首頁

提高網(wǎng)站瀏覽體驗的5條建議

藍(lán)藍(lán)設(shè)計的小編

提高網(wǎng)站瀏覽體驗的5條建議

當(dāng)你瀏覽一款網(wǎng)站時,一般會迅速的對網(wǎng)站的外觀和使用感受做個評判,整體的設(shè)計風(fēng)格是第一印象,能否引導(dǎo)用戶繼續(xù)閱讀取決于此。

金玉其外敗絮其中必然無法長久,功能性也是重要考量。推薦您也好好學(xué)習(xí)《網(wǎng)站用戶體驗的76個要點》。
好的用戶體驗不僅僅關(guān)乎到功能性和設(shè)計美學(xué),還需要考慮很多因素,我們一起來看一下吧。

一致性

最重要的交互元素一定要友好,并且風(fēng)格一致。

盡管在設(shè)計一款網(wǎng)站時,我們可以融入很多創(chuàng)新點和美學(xué)風(fēng)格,但是一些經(jīng)常使用、且重要的元素,風(fēng)格一定要一致,比如按鈕、鏈接、導(dǎo)航欄、表單等等。我建議可以多瀏覽一些電商網(wǎng)站,他們在這一點上做的就很棒,他們通常有很多的茶品頁面,但是整體體驗卻相差不大,我們可以看看優(yōu)衣庫的網(wǎng)站。

Consistency is one of the most important aspects in web design.

 

  • 像產(chǎn)品類別、當(dāng)前按鈕和重要的文本信息都通過紅色來高亮顯示
  • 頁面不同,布局基本相同。

推薦!20個綠色網(wǎng)站設(shè)計欣賞

藍(lán)藍(lán)設(shè)計的小編

@Iamkikidong 如果在網(wǎng)頁上合理地使用大片的綠色,不僅能營造出清爽,自然的界面,還能讓訪問者感到輕松自在,增加網(wǎng)站的親切感。事實上綠色有很多的色調(diào),這形成了一個非常靈活的色彩,它可以在色盤的黃綠色端顯得很“溫暖”,又可以在藍(lán)綠和碧綠方向顯得有些“冷”。一個檸檬綠可以讓一個設(shè)計很“潮”,橄欖綠則更顯平和,而淡綠色可以給人一種清爽的春天的感覺。

用藍(lán)色搭配綠色可以傳遞一種水的感覺。添加米色或者褐色則可以展現(xiàn)一種泥土的氣息。白色+綠色是新鮮和戶外的,而紫色和綠色是高對比的一對兒(需要小心對待)。

今天為您分享20個綠色系的網(wǎng)站,希望能為你的工作帶來靈感和啟發(fā)!

1. Garnier Body

01

超贊!給設(shè)計師的30款新穎漂亮的WORDPRESS主題模板

藍(lán)藍(lán)設(shè)計的小編

假如你正好想為自己創(chuàng)建一個網(wǎng)站,那WordPress肯定是你的不二之選。插件眾多,安全性較高,主題模板豐富,便于維護(hù)跟管理都是它的優(yōu)點,今天向你推薦30款新穎的WordPress主題模板,每一款都各有千秋,設(shè)計師們趕緊來瞧瞧,總能淘到最心儀的那個。

對了,如果您還不知道什么是wordpress,可以去wordpress的中文網(wǎng)查看。http://cn.wordpress.org/

提醒:這里的模版絕大多數(shù)都是要收費的,建議您預(yù)覽查看,學(xué)習(xí)借鑒別人的優(yōu)點就好。關(guān)于WP建站,這和免費的PSD不一樣,大家不要總想著下載免費的,免費主題在功能上總會缺失一部分,而且極少有漂亮的主題,大部分都過時咯。

相關(guān)推薦:
《不用編碼!全球10大高端建站神器推薦》
《干貨!23套全新的免費HTML5網(wǎng)頁模版》

Simplicity

clip_image012 <p style="white-space:normal;text-transform:none;word-spacing:0px;color:#525252;font:1.2em/1.8 Tahoma, Verdana, 宋體;margin:20px 0px;orphans:2;widows:2;letter-spacing:normal;background-color:#ffffff;text-indent:0px;-webkit-text-size-ad

干貨!小技巧幫你完成創(chuàng)意十足的網(wǎng)頁設(shè)計

藍(lán)藍(lán)設(shè)計的小編

創(chuàng)意

作為一名設(shè)計師,每年都會沉浸在一些新的設(shè)計趨勢中興奮不已。接下來,我們將探尋2013年的設(shè)計趨勢,這絕對是意義非凡的事情。Web設(shè)計師必須洞悉所有相關(guān)領(lǐng)域的新趨勢,緊跟時尚潮流。

這些新趨勢讓設(shè)計變得妙趣橫生。但是很多專家還會倡導(dǎo)那些并非最時髦、最震撼世界的設(shè)計。當(dāng)然,響應(yīng)式設(shè)計不僅去年是熱點,今年依然還會被人們重視。同樣,柵格化設(shè)計作為最基本的設(shè)計,也會被繼續(xù)延續(xù)下去。

這次,我想探索一下那些逐漸發(fā)展起來的設(shè)計潮流。也許過去我們只是偶爾嘗試一下這些設(shè)計風(fēng)格,但是今年我們會真正關(guān)注它們。

優(yōu)設(shè)哥很遺憾的告訴大家:“文章的這些優(yōu)秀案例,大部分要翻墻。。?!?/p>

更多留白/負(fù)空間

I think I might -

盤點那些讓用戶玩起來的交互方式

藍(lán)藍(lán)設(shè)計的小編

手機(jī)已經(jīng)成了我們生活中不可分割的一部分,手機(jī)應(yīng)用也在扮演著越來越重要的角色。它們或者幫我們打發(fā)無聊時間,或者幫助我們緊密聯(lián)系遠(yuǎn)方的朋友,抑或?qū)W(xué)習(xí)知識、獲取資訊有所裨益。

手機(jī)應(yīng)用有不少有趣的交互方式值得深思和學(xué)習(xí)。讓我們來看看它們中有哪些好玩的交互,我們又是如何通過它們來進(jìn)行操作的。

搖一搖:搖擺的節(jié)奏

盤點那些讓用戶玩起來的交互方式

自從微信引入了搖一搖的交互方式后,立即四處風(fēng)靡,各種應(yīng)用紛紛推出各種基于搖一搖的功能:搖一搖更換皮膚、搖一搖推薦餐館、搖一搖換歌等。有些應(yīng)用結(jié)合的比較自然,還有一些則有些牽強附會。當(dāng)然,在此之前 iPhone 就已經(jīng)加入了打字時晃動撤銷的交互,雖然很新潮,但隱藏較深,不少用戶不了解也沒有形成習(xí)慣。

吹一吹:吹出的精彩

盤點那些讓用戶玩起來的交互方式

iOS 上有一款仿陶笛的應(yīng)用 Ocarina。只要對著界面上方正中央箭頭(話筒)的位置吹,就可以看到往外圍泛出聲波的效果,界面中央四個藍(lán)點分別代表笛孔,在吹的時候按住不同的笛孔會發(fā)出不同的音調(diào),而且界面會提示每次按壓住哪幾個孔,這樣即使像我這種完全沒有音樂細(xì)胞的人也可以吹奏出美妙的音樂。最關(guān)鍵的是,你還能聽到來自全世界其他地方分享的聲音。

創(chuàng)建一個成功的網(wǎng)站究竟該做些什么

藍(lán)藍(lán)設(shè)計的小編

建立一個專業(yè)網(wǎng)站的步驟分步指南

如果你要在網(wǎng)絡(luò)上開展自己的事業(yè),那么擁有優(yōu)秀的網(wǎng)頁是成功的關(guān)鍵因素。其優(yōu)點在于,不僅能提高網(wǎng)絡(luò)營銷的可見度,也能維護(hù)起持續(xù)增長的客戶群。但是呢,羅馬非一天建成,在我們要創(chuàng)建一個優(yōu)秀網(wǎng)站之前,前期的構(gòu)思是必不可少的。

創(chuàng)建一個成功的網(wǎng)站究竟該做些什么

近年來,網(wǎng)站搖身一變成為了更好的交流場所和絕佳的信息來源地。Boss們不僅想讓網(wǎng)站品牌化,同時也希望游客能在瀏覽時找到有價值的信息。SO,如果一個網(wǎng)站不能提供精準(zhǔn)且廣泛的信息給目標(biāo)顧客,顧客們就會轉(zhuǎn)而去其他的網(wǎng)站。
網(wǎng)站的另一個目的在于讓生活更便利,讓工作更快捷。它通過放大雙向溝通的方式,讓游客對此留下深刻印象,從而產(chǎn)生依賴心理,并愿意長久的通過網(wǎng)站的查詢方式來聯(lián)系業(yè)務(wù)和訂票等。這樣一來,方便顧客這一目標(biāo)就達(dá)到了。除此之外,網(wǎng)站還可以有效的節(jié)省你的時間,幫助你迅速增加用戶基礎(chǔ)以及讓一些進(jìn)程自動化。
前面提到的網(wǎng)站優(yōu)點都只是抱磚引玉,網(wǎng)站真正的目的在于——最終能給顧客帶去價值。這些價值除了鼓勵顧客通過網(wǎng)站相互交流,并參與到商務(wù)處理流程中,還應(yīng)該提供更好評定信息、規(guī)避長久的等待陣列、授與顧客權(quán)利去挖掘更廣泛的產(chǎn)品和服務(wù)信息等。
本文主要是向你闡述,創(chuàng)建一個成功的網(wǎng)站究竟該做些什么。

Step.1 寫一份網(wǎng)站說明書

寫一份切實可行的網(wǎng)站說明書是創(chuàng)建一個專業(yè)網(wǎng)站所不可缺少的,它是最關(guān)鍵的文件之一,能助企業(yè)挖掘出優(yōu)先考慮事項、明晰企業(yè)責(zé)任和樹立企業(yè)品牌形象。必要的計劃和精準(zhǔn)的信息對一份網(wǎng)站說明書來講是最重要的。但是當(dāng)下,成功的尋找到有力的營銷方法和持久最佳努力的前提是 —— 你有策劃一個縝密計劃的能力嗎?
一份優(yōu)秀的網(wǎng)站說明書要涵蓋: 企業(yè)的預(yù)算、因不能及時交付產(chǎn)品而延誤的時間、可交付產(chǎn)品、知識產(chǎn)權(quán)、網(wǎng)站的目的、網(wǎng)站的體系結(jié)構(gòu)、域名、網(wǎng)站使用的編程語言。除此之外,以下幾點是絕對不可缺少的:

1.創(chuàng)建這份文件的意圖
2.項目介紹

網(wǎng)頁設(shè)計過程思考:更優(yōu)雅的微信第三方設(shè)計

藍(lán)藍(lán)設(shè)計的小編

更優(yōu)雅的微信第三方設(shè)計

@米田的天空最近比較忙,整理作品的速度明顯放緩了許多。今天總結(jié)些前段時間做的微信第三方網(wǎng)站。要清楚,它是網(wǎng)站不是單獨的一個網(wǎng)頁。需要考慮更多是整體性的問題。

在拿到項目時,首先需要冷靜下來。而不是急著去動手,大部分同學(xué)肯定都理解了解其緣由。這邊要說的更多是前期先看看相似對手的情況。因為視覺設(shè)計相對于產(chǎn)品功能,是最容易拉開差異感的部分。或許一套不同的視覺策略就能讓產(chǎn)品迅速脫離大部分同類作品走出來。

 

大部分的普遍

大部分的微信第三方,和似乎都不太注重展示部分。即視覺部分,隱隱有些暴發(fā)戶的感覺。而且現(xiàn)在做這塊的公司似乎已經(jīng)有當(dāng)年做團(tuán)購的景象。多,十分多,最后迷失在一片片營銷的海洋里。

做為設(shè)計師,先跳出來觀察下。其實我們會驚訝的發(fā)現(xiàn),這些站的普遍性都是為你做個微信mini站,就是所謂的新時代營銷。最核心的功能基本也是一致,如下:

  • 智能導(dǎo)航(調(diào)用地理位置地圖接口)
  • 在線支付
  • 全景看圖(自由圖片組合)
  • 抽獎營銷活動

隨便打開搜索”微信 營銷 專家”,一堆類似微信第三方網(wǎng)站。現(xiàn)在很多的創(chuàng)業(yè)者也在做類似的項目,總之,就是很多很多公司做著類似的嘗試。當(dāng)然,國內(nèi)任何的領(lǐng)域基本都是同時存在上百個同類的項目,能真正運營下去到最后也只有3-4家而已。

自己隨便打開其中一個站點,發(fā)現(xiàn)其推廣的核心點,也是如上述說的一樣,功能部分的幾乎所有的微信第三方都做著差不多的事情。如果你隨便打開這個網(wǎng)頁,你覺得你會主動去聯(lián)系他們么?在很多相似產(chǎn)品存在的情況下。

微信營銷有哪些推廣方法

藍(lán)藍(lán)設(shè)計的小編

微信營銷在今年是非?;鸨鞣N利用微信營銷獲得贏利,互聯(lián)網(wǎng)上經(jīng)??梢钥吹脚H朔窒淼奈⑿艩I銷案例。微信營銷這么火爆,那么微信營銷有哪些實用的推廣方法呢?

微信營銷有哪些推廣方法

1、合作互推
微博上的玩法,據(jù)說這種效果不錯,也是最好最快的方法。微信互推的效果遠(yuǎn)比微博互推的效果好。例如有1000個粉絲的賬號找其他人合作互推,每次可以獲得上百個粉絲,微信合作做好,是非常不錯的。合作互推最佳的策略是一個合作伙伴合作1-3次,次數(shù)多了,結(jié)果你懂得。

2、微博大號推廣
在騰訊、新浪微博上有很多的草根微博大號靠這種方式非??斓墨@得了很多的粉絲,同樣自己也可以利用現(xiàn)有的資源與別人互換,或者花錢給微博大號進(jìn)行推廣。

3、其他社交平臺推廣
在人人、豆瓣、貼吧、空間等社交平臺進(jìn)行推廣,做推廣時需要注冊各個平臺的發(fā)布信息的規(guī)則,否則推廣信息就會被刪除。如百度帖吧,可以將二維碼做成簽名圖片,這樣在各帖吧活動時,每次評論都可以做一次推廣,還不容易被刪除。

4、小號帶大號
執(zhí)行力很強的朋友可以使用這招,搞幾十上百的小號,瘋狂的利用接下來分享的方法加微信好友,使用什么策略根據(jù)你自己的想法,是利用美圖,還是什么,你自己想吧!

5、基于LBS推廣
這個方法比較簡單,就是在個性簽名處設(shè)置一個誘導(dǎo)的個性簽名。在附近1公里以內(nèi)有人使用查找附近的人,就有機(jī)會被別人看到,個性簽名有吸引力就可以有機(jī)會獲得關(guān)注。有人試過此方法,1個小時內(nèi)吸引120人關(guān)注其微信,而做的事情就是設(shè)置個性簽名。這個方法受附近的人限制,不能長期使用此方法。

10款設(shè)計師必備的響應(yīng)式網(wǎng)頁設(shè)計工具

藍(lán)藍(lán)設(shè)計的小編

隨著便攜設(shè)備用戶的指數(shù)級增長,網(wǎng)頁設(shè)計師采用響應(yīng)式設(shè)計作為多平臺布局解決方案,不但節(jié)省了設(shè)計師的時間,而且從長遠(yuǎn)角度來講,響應(yīng)式設(shè)計能夠為用戶提供更舒適的操作環(huán)境。
如果你毫無經(jīng)驗,不知從何開始,那么這份工具列表將大大的幫助你,能夠讓你的布局更有“彈性”。

Simple Grid

 Simple Grid-Responsive Web Design Tool

Simple Grid是難以置信的CSS框架,無所限制的柵格布局,支持不同大小的屏幕。

Susy

Susy-Responsive Web Design Tool

Susy “語義變焦”的柵格系統(tǒng),無需額外標(biāo)記和特殊的類,很方便使用Sass的人。

Tiny Fluid Grid

Tiny Grid-Responsive Web Design Tool

Tiny Fluid Grid 很棒的網(wǎng)頁應(yīng)用,能幫你選擇柵格系統(tǒng)。一旦完成后,提供CSS文件下載。

Variable Grid System

Variable Grid System-Responsive Web Design Tool

Variable Grid System依據(jù)960柵格系統(tǒng),能夠自動產(chǎn)生布局,在調(diào)整后,提供CSS文件下載。

Responsive Web Design Sketch Sheets

 Responsive Web Design Sketch Sheets

Responsive Web Design Sketch Sheet 標(biāo)記很方便,可以方便的選擇不同方案中元素的放置位置。

Style Tiles

Style Tiles-Responsive Web Design Tool

可以通過該網(wǎng)站制定完美的響應(yīng)式設(shè)計流程。

 

 

網(wǎng)頁設(shè)計新趨勢!25例出眾的響應(yīng)式導(dǎo)航設(shè)計

藍(lán)藍(lán)設(shè)計的小編

響應(yīng)式設(shè)計是當(dāng)前網(wǎng)頁設(shè)計的趨勢,針對不同的設(shè)備,提供布局解決方案。
而且很多技術(shù)狂人正在不斷的進(jìn)行各種實驗,爭取讓響應(yīng)式設(shè)計越來越好。

響應(yīng)式設(shè)計的難點是導(dǎo)航菜單。可不能像縮放頁面那樣縮放導(dǎo)航菜單。在設(shè)計之前,要謀劃好導(dǎo)航菜單在手機(jī)、平板、桌面上的布局。

更多超炫的網(wǎng)站:
《想讓網(wǎng)站動感十足?試試網(wǎng)頁設(shè)計中的韻律線條》
《想設(shè)計自己的網(wǎng)站?先來看這15個優(yōu)秀設(shè)計師的酷站》

本文收集了25例出眾的響應(yīng)式設(shè)計,大家可以使用響應(yīng)式在線測試工具Responsinator來看看,他們的導(dǎo)航菜單,是怎樣設(shè)計的。

Ableton 

Music production with Live 9 and Push | Ableton

 

日歷

鏈接

個人資料

存檔