優(yōu)秀網(wǎng)頁設(shè)計的七條基本準(zhǔn)則

2014-3-12    藍(lán)藍(lán)設(shè)計的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(   m.sillybuy.com  )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,   請點(diǎn)這里

世界一直在變,它的變數(shù)很大,而引領(lǐng)世界改變的互聯(lián)網(wǎng)變數(shù)大到你無法想象。因此,迅捷的變化節(jié)奏導(dǎo)致互聯(lián)網(wǎng)工作者的工作注定是”高強(qiáng)度、快節(jié)奏”的,要么適應(yīng)變化,要么引領(lǐng)變局,要么被淘汰,無非這三種。正因如此,這個行業(yè)競爭激烈,新生力量層出不窮,很難有人一直保持前列。

藍(lán)藍(lán)設(shè)計的目的,不是為各位設(shè)計師羅列出森嚴(yán)的”軍規(guī)”,然后以專家的口吻說”你必須得這么干”。本文的目的是更新大家適應(yīng)網(wǎng)頁設(shè)計的觀念,掌握哪些經(jīng)歷過時間檢驗的基本準(zhǔn)則,以更好的適應(yīng)變化。

新時代的網(wǎng)頁設(shè)計充滿了各種新技術(shù)、各種新的jQuery腳本、各種響應(yīng)式網(wǎng)頁設(shè)計——但我們依然不能忽略最基本的網(wǎng)頁設(shè)計基礎(chǔ)。

新時代的網(wǎng)頁設(shè)計以響應(yīng)式理論為藍(lán)本,力圖在不同設(shè)備上呈現(xiàn)一致的網(wǎng)頁瀏覽體驗。
而響應(yīng)式時代依然不便的設(shè)計基本準(zhǔn)則又是什么呢?一起來看看下面的七條,望諸君設(shè)計時銘記于心。

1.優(yōu)秀的網(wǎng)頁設(shè)計應(yīng)該簡約,并且完整

設(shè)計大師往往都是哲學(xué)家,他們往往保持一種包容的設(shè)計態(tài)度,不會采用極端的設(shè)計方式,他們的設(shè)計往往是一種平衡之美。

我們可以畫出一個橫軸,左邊是簡約、右邊是完整,而最好的設(shè)計會聰明的選取中值(如下圖)

網(wǎng)頁設(shè)計必須簡約,任何無用的特質(zhì)都必須移除;與此同時,網(wǎng)頁設(shè)計必須能夠滿足用戶需求。

太簡單的網(wǎng)頁如果沒有空能支撐,那么從里到外就真的是”空洞無物”了。
太復(fù)雜的網(wǎng)頁如果缺少簡約的收束,那么便會”尾大不掉”,讓用戶閱讀困難。

“言簡意賅”的設(shè)計才是好設(shè)計,一個設(shè)計師的掌控力得以體現(xiàn)。

Beautiful Design Basics

總結(jié)起來就是一句話:一個布局、風(fēng)格具有簡約美,同時又能提供大量有價值信息的網(wǎng)站必定受用戶歡迎。

2. 用戶往往缺乏耐心

互聯(lián)網(wǎng)充滿了機(jī)遇,每個人都想通過簡單的操作便能獲取所需信息。
互聯(lián)網(wǎng)的信息浩瀚如海,你并不是唯一的信息提供者。

亙古不變的是:用戶的時間寶貴,他們?nèi)狈δ托?。如果你不能提供便捷的信息,那么他們會選擇離開,進(jìn)而尋找其他網(wǎng)站來謀求信息。

想要做好這一點(diǎn)?說白了,就是信息層級要清晰,加載速度要快。

但其實也不簡單,就加載而言,我舉一個例子

談?wù)劶虞d(Loading)的那點(diǎn)事

上面這三種加載方式,中間的方式最迂腐:用戶會想’這等到什么時候會是個頭??!

右面呢?右面會不會好一點(diǎn)?答案是不會,想想你高中時上午最后一節(jié)課,你在等下課,所以你一直仔細(xì)的看著表上的指針,你越急躁,觀察的越仔細(xì),越能感覺到”時間太慢”。

左面好不好?也不好,旋轉(zhuǎn)指示條轉(zhuǎn)的快,用戶會認(rèn)為加載速度很快,用戶會想”加載的這么快還沒有完全載入,這是設(shè)計問題嗎?” 轉(zhuǎn)的慢,用戶會認(rèn)為”這是網(wǎng)絡(luò)問題,加載的居然這么慢”

說實話,上面這三種方式都是告訴用戶:請等待! 所謂的進(jìn)度讀取、旋轉(zhuǎn)讀取只不過是一種心理騙局:無論多塊、進(jìn)度條多充盈,在沒有完成加載前,用戶還是看不到頁面信息。

而最近出現(xiàn)了一種新方法,Luke Wroblewski在他的文章中提到過,叫做框架讀取,也就是加載了多少內(nèi)容,呈遞多少內(nèi)容,推薦各位嘗試。參考閱讀:
談?wù)劶虞d(LOADING)的那點(diǎn)事
推薦:如何加速網(wǎng)頁的打開速度
高端揭秘:為你的響應(yīng)式設(shè)計提速

3. 網(wǎng)頁設(shè)計必須具備一致性

想像一下你作為網(wǎng)絡(luò)瀏覽者時的經(jīng)歷:你在瀏覽網(wǎng)頁時,一般都不會詳細(xì)閱讀內(nèi)容,你會快速滑動頁面,大致瀏覽一遍,如果看到感興趣的信息便停下,進(jìn)行仔細(xì)閱讀。這是一種用戶習(xí)慣。萬物作而弗始,生而弗有,為而弗恃,功成而弗居。夫唯弗居,是以不去?!赖陆?jīng)

在John Allsopp《網(wǎng)頁設(shè)計之道》中有這樣一句話,大致是這么一種意思:設(shè)計師不應(yīng)該作為用戶的對立,設(shè)計師應(yīng)該尊重用戶的習(xí)慣,讓設(shè)計適應(yīng)用戶的習(xí)慣,而不是做一個高高在上的獨(dú)裁者。功成身退,這似乎有種”偉大的設(shè)計是隱形”的意味。

好了,我們把話題扯回來,用戶的這種閱讀習(xí)慣意味著什么?這意味著設(shè)計必須具有高度的一致性,用戶看到前面的布局,對后面的布局有一種”預(yù)期”:他會認(rèn)為后面的頁面布局也是如此,不要破壞用戶的閱讀節(jié)奏感。

同樣的,同一頁面的各個元素以及各個子頁面之間必須要具備一致的聯(lián)系性,也就是說設(shè)計師的設(shè)計模式應(yīng)該專一,再舉個簡單的例子,如果主頁的導(dǎo)航欄布置在上方,子頁面的導(dǎo)航欄布置在側(cè)邊,你認(rèn)為用戶會高興嗎?參考閱讀:
高手之路:如何設(shè)計才能讓網(wǎng)站風(fēng)格協(xié)調(diào)一致

4.將導(dǎo)航菜單作為交互的”核心”

closer-view-01

上面已經(jīng)提到過,各個頁面的導(dǎo)航欄必須具備一致性。有時候,好的網(wǎng)頁設(shè)計和差的網(wǎng)頁設(shè)計差距就在導(dǎo)航菜單,好的導(dǎo)航菜單成就了一款設(shè)計,壞的導(dǎo)航毀滅了一例網(wǎng)站。

每當(dāng)用戶有問題時,他都會習(xí)慣性的翻閱導(dǎo)航菜單,這也是用戶習(xí)慣,要注意。個人認(rèn)為,導(dǎo)航是網(wǎng)頁設(shè)計的核心元素,影響到網(wǎng)站的交互性,至于要怎么設(shè)計,仁者見仁,智者見智了。參考閱讀:
大型網(wǎng)站導(dǎo)航設(shè)計指南
網(wǎng)頁新趨勢:革命性的創(chuàng)新網(wǎng)頁導(dǎo)航設(shè)計

5. 留白和信息同樣重要

ws-dribbble_1x

“內(nèi)容為王”、”內(nèi)容至上”是嗎?那我就提供大量豐富信息,把網(wǎng)站全部都填滿?!边@種UI設(shè)計思想真是大錯特錯,太片面了。

你要有這樣一種觀念:留白也是設(shè)計的一部分,那些不使用的空間也能發(fā)揮其作用。從用戶的角度來說,留白很好,讓布局更有條理,信息更清晰。

太剛強(qiáng)的事物容易折斷,有張有弛才能長久。網(wǎng)頁設(shè)計也是同理,多給用戶一點(diǎn)閱讀呼吸空間,讓他們感受到網(wǎng)頁設(shè)計的”節(jié)奏感”。
各位可以自行想象一下,如果一款網(wǎng)頁中一點(diǎn)留白都沒有,到處都是密密麻麻的文字和圖像,你會感到舒服嗎?參考閱讀:
我們?yōu)楹我谠O(shè)計中重視”留白”

6.用心的設(shè)計都有清晰的視覺層級

heir

明智的設(shè)計師不光會創(chuàng)造內(nèi)容,還知道如何組織內(nèi)容,傳遞信息。視覺層級對于信息呈遞來說異常重要,優(yōu)秀的視覺層級還能幫助設(shè)計師強(qiáng)化設(shè)計理念。

空間排布、間距使用、整體布局,關(guān)于這些的探討已經(jīng)夠多了,歸根結(jié)底,無非是為了打造優(yōu)秀的視覺層級。參考閱讀:
如何在設(shè)計中建立良好的視覺層級

7.永遠(yuǎn)不要忽略字體

shot_1297076222

內(nèi)容為王,那么內(nèi)容是由什么包裝的呢?答案是字體,這種小小的細(xì)節(jié)能造就大差異。字體的清晰與否決定了信息呈遞的結(jié)果。

扁平化界面設(shè)計強(qiáng)化了大家對于字體的重視,這一點(diǎn)我很贊同。
還有一點(diǎn)趨勢不容忽略:屏幕越來越大。那么字體呢?

本文雖然是老生常談,但是我相信這些準(zhǔn)則不會隨流行而改變,想要設(shè)計出更優(yōu)秀的網(wǎng)頁設(shè)計?別著急復(fù)制流行了,先磨磨你的基本功吧。

分享本文至:

日歷

鏈接

個人資料

存檔