七條優(yōu)秀網(wǎng)頁(yè)設計的基本準則發(fā)布者：本站     時(shí)間：2022-01-05 11:01:13

互聯(lián)網(wǎng)何時(shí)誕生，專(zhuān)家對此說(shuō)法不一，30多年前，互聯(lián)網(wǎng)的應用非常有限，僅僅一小部分人能夠接觸到這種先進(jìn)的技術(shù)。然后經(jīng)歷了30多年的指數級發(fā)展，它取得了夢(mèng)幻般的成功。

十年前，互聯(lián)網(wǎng)剛剛處于雛形階段，到如今，整個(gè)產(chǎn)業(yè)的格局已呈”大而不倒”的局面。

而互聯(lián)網(wǎng)的陣線(xiàn)也拉長(cháng)了，從傳統的”老式桌面”到各式各樣的便攜式設備，從由互聯(lián)網(wǎng)引領(lǐng)的”大數據時(shí)代”，再到存儲的新革命”云概念”。而設備呢?手表、眼鏡各種以網(wǎng)絡(luò )為基礎的可穿戴設備正在蓬勃發(fā)展。

如穿越到十年前，向別人描述今日的網(wǎng)絡(luò )現狀，他肯定會(huì )一笑而過(guò)，認為這只不過(guò)是”海市蜃樓”般的幻想。

但十年后的今天，這些革新一一實(shí)現，不再是觸手不可及的幻象，這所有的技術(shù)革新切切實(shí)實(shí)的就在我們身邊。

感謝那些為互聯(lián)網(wǎng)做出貢獻的革命者們!

七條優(yōu)秀網(wǎng)頁(yè)<a href=/design/ target=_blank class=infotextkey>設計</a>的基本準則,PS教程,

這張圖能夠很好的闡述響應式設計的思想。

七條優(yōu)秀<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>的基本準則,PS教程,

而聰明的Luke Wroblewski提出了”移動(dòng)優(yōu)先(Mobile First)”設計戰略，他認為，這種設計模式：先從移動(dòng)設備開(kāi)始設計，那么設計便能很輕松的向下兼容。(通俗的講，就是大屏肯定能完美呈現小屏上的設計，而小屏不一定能裝得下大屏上的設計。)

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

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

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

新時(shí)代的網(wǎng)頁(yè)設計以響應式理論為藍本，力圖在不同設備上呈現一致的網(wǎng)頁(yè)瀏覽體驗。

而響應式時(shí)代依然不便的設計基本準則又是什么呢?一起來(lái)看看下面的七條，望諸君設計時(shí)銘記于心。

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

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

我們可以畫(huà)出一個(gè)橫軸，左邊是簡(jiǎn)約、右邊是完整，而最好的設計會(huì )聰明的選取中值(如下圖)

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

太簡(jiǎn)單的網(wǎng)頁(yè)如果沒(méi)有空能支撐，那么從里到外就真的是”空洞無(wú)物”了。

太復雜的網(wǎng)頁(yè)如果缺少簡(jiǎn)約的收束，那么便會(huì )”尾大不掉”，讓用戶(hù)閱讀困難。

“言簡(jiǎn)意賅”的設計才是好設計，一個(gè)設計師的掌控力得以體現。

七條優(yōu)秀網(wǎng)頁(yè)設計的基本準則,PS教程,

總結起來(lái)就是一句話(huà)：一個(gè)布局、風(fēng)格具有簡(jiǎn)約美，同時(shí)又能提供大量有價(jià)值信息的網(wǎng)站必定受用戶(hù)歡迎。

2. 用戶(hù)往往缺乏耐心

互聯(lián)網(wǎng)充滿(mǎn)了機遇，每個(gè)人都想通過(guò)簡(jiǎn)單的操作便能獲取所需信息。

互聯(lián)網(wǎng)的信息浩瀚如海，你并不是唯一的信息提供者。

亙古不變的是：用戶(hù)的時(shí)間寶貴，他們缺乏耐心。如果你不能提供便捷的信息，那么他們會(huì )選擇離開(kāi)，進(jìn)而尋找其他網(wǎng)站來(lái)謀求信息。

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

但其實(shí)也不簡(jiǎn)單，就加載而言，我舉一個(gè)例子

七條優(yōu)秀網(wǎng)頁(yè)設計的基本準則,PS教程,

上面這三種加載方式，中間的方式最迂腐：用戶(hù)會(huì )想’這等到什么時(shí)候會(huì )是個(gè)頭啊!

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

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

說(shuō)實(shí)話(huà)，上面這三種方式都是告訴用戶(hù)：請等待! 所謂的進(jìn)度讀取、旋轉讀取只不過(guò)是一種心理騙局：無(wú)論多塊、進(jìn)度條多充盈，在沒(méi)有完成加載前，用戶(hù)還是看不到頁(yè)面信息。

而最近出現了一種新方法，Luke Wroblewski在他的文章中提到過(guò)，叫做框架讀取，也就是加載了多少內容，呈遞多少內容，推薦各位嘗試。

參考閱讀：

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

推薦：如何加速網(wǎng)頁(yè)的打開(kāi)速度

高端揭秘：為你的響應式設計提速

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

想像一下你作為網(wǎng)絡(luò )瀏覽者時(shí)的經(jīng)歷：你在瀏覽網(wǎng)頁(yè)時(shí)，一般都不會(huì )詳細閱讀內容，你會(huì )快速滑動(dòng)頁(yè)面，大致瀏覽一遍，如果看到感興趣的信息便停下，進(jìn)行仔細閱讀。這是一種用戶(hù)習慣。

萬(wàn)物作而弗始，生而弗有，為而弗恃，功成而弗居。夫唯弗居，是以不去?！赖陆?jīng)

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

好了，我們把話(huà)題扯回來(lái)，用戶(hù)的這種閱讀習慣意味著(zhù)什么?這意味著(zhù)設計必須具有高度的一致性，用戶(hù)看到前面的布局，對后面的布局有一種”預期”：他會(huì )認為后面的頁(yè)面布局也是如此，不要破壞用戶(hù)的閱讀節奏感。

同樣的，同一頁(yè)面的各個(gè)元素以及各個(gè)子頁(yè)面之間必須要具備一致的聯(lián)系性，也就是說(shuō)設計師的設計模式應該專(zhuān)一，再舉個(gè)簡(jiǎn)單的例子，如果主頁(yè)的導航欄布置在上方，子頁(yè)面的導航欄布置在側邊，你認為用戶(hù)會(huì )高興嗎?

參考閱讀：

高手之路：如何設計才能讓網(wǎng)站風(fēng)格協(xié)調一致

4.將導航菜單作為交互的”核心”

七條優(yōu)秀網(wǎng)頁(yè)設計的基本準則,PS教程,

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

每當用戶(hù)有問(wèn)題時(shí)，他都會(huì )習慣性的翻閱導航菜單，這也是用戶(hù)習慣，要注意。個(gè)人認為，導航是網(wǎng)頁(yè)設計的核心元素，影響到網(wǎng)站的交互性，至于要怎么設計，仁者見(jiàn)仁，智者見(jiàn)智了。

參考閱讀：

大型網(wǎng)站導航設計指南

網(wǎng)頁(yè)新趨勢：革命性的創(chuàng )新網(wǎng)頁(yè)導航設計

5. 留白和信息同樣重要

七條優(yōu)秀網(wǎng)頁(yè)設計的基本準則,PS教程,

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

你要有這樣一種觀(guān)念：留白也是設計的一部分，那些不使用的空間也能發(fā)揮其作用。從用戶(hù)的角度來(lái)說(shuō)，留白很好，讓布局更有條理，信息更清晰。

太剛強的事物容易折斷，有張有弛才能長(cháng)久。網(wǎng)頁(yè)設計也是同理，多給用戶(hù)一點(diǎn)閱讀呼吸空間，讓他們感受到網(wǎng)頁(yè)設計的”節奏感”。

各位可以自行想象一下，如果一款網(wǎng)頁(yè)中一點(diǎn)留白都沒(méi)有，到處都是密密麻麻的文字和圖像，你會(huì )感到舒服嗎?

參考閱讀：

我們?yōu)楹我谠O計中重視”留白”

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

七條優(yōu)秀網(wǎng)頁(yè)設計的基本準則,PS教程,

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

空間排布、間距使用、整體布局，關(guān)于這些的探討已經(jīng)夠多了，歸根結底，無(wú)非是為了打造優(yōu)秀的視覺(jué)層級。

參考閱讀：

如何在設計中建立良好的視覺(jué)層級

7.永遠不要忽略字體

七條優(yōu)秀網(wǎng)頁(yè)設計的基本準則,PS教程,

內容為王，那么內容是由什么包裝的呢?答案是字體，這種小小的細節能造就大差異。字體的清晰與否決定了信息呈遞的結果。

扁平化設計強化了大家對于字體的重視，這一點(diǎn)我很贊同。

還有一點(diǎn)趨勢不容忽略：屏幕越來(lái)越大。那么字體呢?