七條優(yōu)秀網(wǎng)頁設(shè)計(jì)的基本準(zhǔn)則發(fā)布者：本站 時(shí)間：2022-01-05 11:01:13
互聯(lián)網(wǎng)何時(shí)誕生，專家對(duì)此說法不一，30多年前，互聯(lián)網(wǎng)的應(yīng)用非常有限，僅僅一小部分人能夠接觸到這種先進(jìn)的技術(shù)。然后經(jīng)歷了30多年的指數(shù)級(jí)發(fā)展，它取得了夢(mèng)幻般的成功。
十年前，互聯(lián)網(wǎng)剛剛處于雛形階段，到如今，整個(gè)產(chǎn)業(yè)的格局已呈”大而不倒”的局面。
而互聯(lián)網(wǎng)的陣線也拉長(zhǎng)了，從傳統(tǒng)的”老式桌面”到各式各樣的便攜式設(shè)備，從由互聯(lián)網(wǎng)引領(lǐng)的”大數(shù)據(jù)時(shí)代”，再到存儲(chǔ)的新革命”云概念”。而設(shè)備呢?手表、眼鏡各種以網(wǎng)絡(luò)為基礎(chǔ)的可穿戴設(shè)備正在蓬勃發(fā)展。
如穿越到十年前，向別人描述今日的網(wǎng)絡(luò)現(xiàn)狀，他肯定會(huì)一笑而過，認(rèn)為這只不過是”海市蜃樓”般的幻想。
但十年后的今天，這些革新一一實(shí)現(xiàn)，不再是觸手不可及的幻象，這所有的技術(shù)革新切切實(shí)實(shí)的就在我們身邊。
感謝那些為互聯(lián)網(wǎng)做出貢獻(xiàn)的革命者們!
七條優(yōu)秀網(wǎng)頁<a href=/design/ target=_blank class=infotextkey>設(shè)計(jì)</a>的基本準(zhǔn)則,PS教程,
這張圖能夠很好的闡述響應(yīng)式設(shè)計(jì)的思想。
七條優(yōu)秀<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁設(shè)計(jì)</a>的基本準(zhǔn)則,PS教程,
而聰明的Luke Wroblewski提出了”移動(dòng)優(yōu)先(Mobile First)”設(shè)計(jì)戰(zhàn)略，他認(rèn)為，這種設(shè)計(jì)模式：先從移動(dòng)設(shè)備開始設(shè)計(jì)，那么設(shè)計(jì)便能很輕松的向下兼容。(通俗的講，就是大屏肯定能完美呈現(xiàn)小屏上的設(shè)計(jì)，而小屏不一定能裝得下大屏上的設(shè)計(jì)。)
世界一直在變，它的變數(shù)很大，而引領(lǐng)世界改變的互聯(lián)網(wǎng)變數(shù)大到你無法想象。因此，迅捷的變化節(jié)奏導(dǎo)致互聯(lián)網(wǎng)工作者的工作注定是”高強(qiáng)度、快節(jié)奏”的，要么適應(yīng)變化，要么引領(lǐng)變局，要么被淘汰，無非這三種。正因如此，這個(gè)行業(yè)競(jìng)爭(zhēng)激烈，新生力量層出不窮，很難有人一直保持前列。
而本文的目的，不是為各位設(shè)計(jì)師羅列出森嚴(yán)的”軍規(guī)”，然后以專家的口吻說”你必須得這么干”。本文的目的是更新大家適應(yīng)網(wǎng)頁設(shè)計(jì)的觀念，掌握哪些經(jīng)歷過時(shí)間檢驗(yàn)的基本準(zhǔn)則，以更好的適應(yīng)變化。
新時(shí)代的網(wǎng)頁設(shè)計(jì)充滿了各種新技術(shù)、各種新的jQuery腳本、各種響應(yīng)式網(wǎng)頁設(shè)計(jì)——但我們依然不能忽略最基本的網(wǎng)頁設(shè)計(jì)基礎(chǔ)。
新時(shí)代的網(wǎng)頁設(shè)計(jì)以響應(yīng)式理論為藍(lán)本，力圖在不同設(shè)備上呈現(xiàn)一致的網(wǎng)頁瀏覽體驗(yàn)。
而響應(yīng)式時(shí)代依然不便的設(shè)計(jì)基本準(zhǔn)則又是什么呢?一起來看看下面的七條，望諸君設(shè)計(jì)時(shí)銘記于心。
1.優(yōu)秀的網(wǎng)頁設(shè)計(jì)應(yīng)該簡(jiǎn)約，并且完整
設(shè)計(jì)大師往往都是哲學(xué)家，他們往往保持一種包容的設(shè)計(jì)態(tài)度，不會(huì)采用極端的設(shè)計(jì)方式，他們的設(shè)計(jì)往往是一種平衡之美。
我們可以畫出一個(gè)橫軸，左邊是簡(jiǎn)約、右邊是完整，而最好的設(shè)計(jì)會(huì)聰明的選取中值(如下圖)
網(wǎng)頁設(shè)計(jì)必須簡(jiǎn)約，任何無用的特質(zhì)都必須移除;與此同時(shí)，網(wǎng)頁設(shè)計(jì)必須能夠滿足用戶需求。
太簡(jiǎn)單的網(wǎng)頁如果沒有空能支撐，那么從里到外就真的是”空洞無物”了。
太復(fù)雜的網(wǎng)頁如果缺少簡(jiǎn)約的收束，那么便會(huì)”尾大不掉”，讓用戶閱讀困難。
“言簡(jiǎn)意賅”的設(shè)計(jì)才是好設(shè)計(jì)，一個(gè)設(shè)計(jì)師的掌控力得以體現(xiàn)。
七條優(yōu)秀網(wǎng)頁設(shè)計(jì)的基本準(zhǔn)則,PS教程,
總結(jié)起來就是一句話：一個(gè)布局、風(fēng)格具有簡(jiǎn)約美，同時(shí)又能提供大量有價(jià)值信息的網(wǎng)站必定受用戶歡迎。
2. 用戶往往缺乏耐心
互聯(lián)網(wǎng)充滿了機(jī)遇，每個(gè)人都想通過簡(jiǎn)單的操作便能獲取所需信息。
互聯(lián)網(wǎng)的信息浩瀚如海，你并不是唯一的信息提供者。
亙古不變的是：用戶的時(shí)間寶貴，他們?nèi)狈δ托摹Ｈ绻悴荒芴峁┍憬莸男畔?，那么他們?huì)選擇離開，進(jìn)而尋找其他網(wǎng)站來謀求信息。
想要做好這一點(diǎn)?說白了，就是信息層級(jí)要清晰，加載速度要快。
但其實(shí)也不簡(jiǎn)單，就加載而言，我舉一個(gè)例子
七條優(yōu)秀網(wǎng)頁設(shè)計(jì)的基本準(zhǔn)則,PS教程,
上面這三種加載方式，中間的方式最迂腐：用戶會(huì)想’這等到什么時(shí)候會(huì)是個(gè)頭啊!
右面呢?右面會(huì)不會(huì)好一點(diǎn)?答案是不會(huì)，想想你高中時(shí)上午最后一節(jié)課，你在等下課，所以你一直仔細(xì)的看著表上的指針，你越急躁，觀察的越仔細(xì)，越能感覺到”時(shí)間太慢”。
左面好不好?也不好，旋轉(zhuǎn)指示條轉(zhuǎn)的快，用戶會(huì)認(rèn)為加載速度很快，用戶會(huì)想”加載的這么快還沒有完全載入，這是設(shè)計(jì)問題嗎?” 轉(zhuǎn)的慢，用戶會(huì)認(rèn)為”這是網(wǎng)絡(luò)問題，加載的居然這么慢”
說實(shí)話，上面這三種方式都是告訴用戶：請(qǐng)等待! 所謂的進(jìn)度讀取、旋轉(zhuǎn)讀取只不過是一種心理騙局：無論多塊、進(jìn)度條多充盈，在沒有完成加載前，用戶還是看不到頁面信息。
而最近出現(xiàn)了一種新方法，Luke Wroblewski在他的文章中提到過，叫做框架讀取，也就是加載了多少內(nèi)容，呈遞多少內(nèi)容，推薦各位嘗試。
參考閱讀：
談?wù)劶虞d(LOADING)的那點(diǎn)事
推薦：如何加速網(wǎng)頁的打開速度
高端揭秘：為你的響應(yīng)式設(shè)計(jì)提速
3. 網(wǎng)頁設(shè)計(jì)必須具備一致性
想像一下你作為網(wǎng)絡(luò)瀏覽者時(shí)的經(jīng)歷：你在瀏覽網(wǎng)頁時(shí)，一般都不會(huì)詳細(xì)閱讀內(nèi)容，你會(huì)快速滑動(dòng)頁面，大致瀏覽一遍，如果看到感興趣的信息便停下，進(jìn)行仔細(xì)閱讀。這是一種用戶習(xí)慣。
萬物作而弗始，生而弗有，為而弗恃，功成而弗居。夫唯弗居，是以不去?！赖陆?jīng)
在John Allsopp《網(wǎng)頁設(shè)計(jì)之道》中有這樣一句話，大致是這么一種意思：設(shè)計(jì)師不應(yīng)該作為用戶的對(duì)立，設(shè)計(jì)師應(yīng)該尊重用戶的習(xí)慣，讓設(shè)計(jì)適應(yīng)用戶的習(xí)慣，而不是做一個(gè)高高在上的獨(dú)裁者。功成身退，這似乎有種”偉大的設(shè)計(jì)是隱形”的意味。
好了，我們把話題扯回來，用戶的這種閱讀習(xí)慣意味著什么?這意味著設(shè)計(jì)必須具有高度的一致性，用戶看到前面的布局，對(duì)后面的布局有一種”預(yù)期”：他會(huì)認(rèn)為后面的頁面布局也是如此，不要破壞用戶的閱讀節(jié)奏感。
同樣的，同一頁面的各個(gè)元素以及各個(gè)子頁面之間必須要具備一致的聯(lián)系性，也就是說設(shè)計(jì)師的設(shè)計(jì)模式應(yīng)該專一，再舉個(gè)簡(jiǎn)單的例子，如果主頁的導(dǎo)航欄布置在上方，子頁面的導(dǎo)航欄布置在側(cè)邊，你認(rèn)為用戶會(huì)高興嗎?
參考閱讀：
高手之路：如何設(shè)計(jì)才能讓網(wǎng)站風(fēng)格協(xié)調(diào)一致
4.將導(dǎo)航菜單作為交互的”核心”
七條優(yōu)秀網(wǎng)頁設(shè)計(jì)的基本準(zhǔn)則,PS教程,
上面已經(jīng)提到過，各個(gè)頁面的導(dǎo)航欄必須具備一致性。有時(shí)候，好的網(wǎng)頁設(shè)計(jì)和差的網(wǎng)頁設(shè)計(jì)差距就在導(dǎo)航菜單，好的導(dǎo)航菜單成就了一款設(shè)計(jì)，壞的導(dǎo)航毀滅了一例網(wǎng)站。
每當(dāng)用戶有問題時(shí)，他都會(huì)習(xí)慣性的翻閱導(dǎo)航菜單，這也是用戶習(xí)慣，要注意。個(gè)人認(rèn)為，導(dǎo)航是網(wǎng)頁設(shè)計(jì)的核心元素，影響到網(wǎng)站的交互性，至于要怎么設(shè)計(jì)，仁者見仁，智者見智了。
參考閱讀：
大型網(wǎng)站導(dǎo)航設(shè)計(jì)指南
網(wǎng)頁新趨勢(shì)：革命性的創(chuàng)新網(wǎng)頁導(dǎo)航設(shè)計(jì)
5. 留白和信息同樣重要
七條優(yōu)秀網(wǎng)頁設(shè)計(jì)的基本準(zhǔn)則,PS教程,
“內(nèi)容為王”、”內(nèi)容至上”是嗎?那我就提供大量豐富信息，把網(wǎng)站全部都填滿。”這種設(shè)計(jì)思想真是大錯(cuò)特錯(cuò)，太片面了。
你要有這樣一種觀念：留白也是設(shè)計(jì)的一部分，那些不使用的空間也能發(fā)揮其作用。從用戶的角度來說，留白很好，讓布局更有條理，信息更清晰。
太剛強(qiáng)的事物容易折斷，有張有弛才能長(zhǎng)久。網(wǎng)頁設(shè)計(jì)也是同理，多給用戶一點(diǎn)閱讀呼吸空間，讓他們感受到網(wǎng)頁設(shè)計(jì)的”節(jié)奏感”。
各位可以自行想象一下，如果一款網(wǎng)頁中一點(diǎn)留白都沒有，到處都是密密麻麻的文字和圖像，你會(huì)感到舒服嗎?
參考閱讀：
我們?yōu)楹我谠O(shè)計(jì)中重視”留白”
6.用心的設(shè)計(jì)都有清晰的視覺層級(jí)
七條優(yōu)秀網(wǎng)頁設(shè)計(jì)的基本準(zhǔn)則,PS教程,
明智的設(shè)計(jì)師不光會(huì)創(chuàng)造內(nèi)容，還知道如何高效組織內(nèi)容，傳遞信息。視覺層級(jí)對(duì)于信息呈遞來說異常重要，優(yōu)秀的視覺層級(jí)還能幫助設(shè)計(jì)師強(qiáng)化設(shè)計(jì)理念。
空間排布、間距使用、整體布局，關(guān)于這些的探討已經(jīng)夠多了，歸根結(jié)底，無非是為了打造優(yōu)秀的視覺層級(jí)。
參考閱讀：
如何在設(shè)計(jì)中建立良好的視覺層級(jí)
7.永遠(yuǎn)不要忽略字體
七條優(yōu)秀網(wǎng)頁設(shè)計(jì)的基本準(zhǔn)則,PS教程,
內(nèi)容為王，那么內(nèi)容是由什么包裝的呢?答案是字體，這種小小的細(xì)節(jié)能造就大差異。字體的清晰與否決定了信息呈遞的結(jié)果。
扁平化設(shè)計(jì)強(qiáng)化了大家對(duì)于字體的重視，這一點(diǎn)我很贊同。
還有一點(diǎn)趨勢(shì)不容忽略：屏幕越來越大。那么字體呢?
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話：021-58370032
關(guān)鍵詞標(biāo)簽：上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)