響應(yīng)式排版中的基礎(chǔ)知識(shí)

1、互聯(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)的陣線也拉長了， 從傳統(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)，

2、不再是觸手不可及的幻象， 這所有的技術(shù)革新切切實(shí) 實(shí)的就在我們身邊。感謝那些為互聯(lián)網(wǎng)做出貢獻(xiàn)的革命者們！張圖能夠很好的闡述響應(yīng)式設(shè)計(jì)的思想。而聰明的 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)變局，要么被

3、淘汰，無非這三種。正因如此，這個(gè)行業(yè)競爭激烈，新生力量層出不窮，很 難有人一直保持前列。而本文的目的， 不是為各位設(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)

4、該簡約，并且完整 設(shè)計(jì)大師往往都是哲學(xué)家，他們往往保持一種包容的設(shè)計(jì)態(tài)度，不會(huì)采用極端的設(shè)計(jì)方式， 他們的設(shè)計(jì)往往是一種平衡之美。我們可以畫出一個(gè)橫軸， 左邊是簡約、右邊是完整，而最好的設(shè)計(jì)會(huì)聰明的選取中值（如下 圖）網(wǎng)頁設(shè)計(jì)必須簡約， 任何無用的特質(zhì)都必須移除； 與此同時(shí)， 網(wǎng)頁設(shè)計(jì)必須能夠滿足用戶需 求。太簡單的網(wǎng)頁如果沒有空能支撐，那么從里到外就真的是”空洞無物”了。 太復(fù)雜的網(wǎng)頁如果缺少簡約的收束，那么便會(huì)”尾大不掉”，讓用戶閱讀困難。 “言簡意賅”的設(shè)計(jì)才是好設(shè)計(jì)，一個(gè)設(shè)計(jì)師的掌控力得以體現(xiàn)。結(jié)起來就是一句話： 一個(gè)布局、 風(fēng)格具有簡約美， 同時(shí)又能提供大量有價(jià)值信息的網(wǎng)站必定 受用

5、戶歡迎。2. 用戶往往缺乏耐心 互聯(lián)網(wǎng)充滿了機(jī)遇，每個(gè)人都想通過簡單的操作便能獲取所需信息。 互聯(lián)網(wǎng)的信息浩瀚如海，你并不是唯一的信息提供者。亙古不變的是： 用戶的時(shí)間寶貴，他們?nèi)狈δ托摹?如果你不能提供便捷的信息，那么他們會(huì) 選擇離開，進(jìn)而尋找其他網(wǎng)站來謀求信息。想要做好這一點(diǎn)？說白了，就是信息層級(jí)要清晰，加載速度要快。 但其實(shí)也不簡單，就加載而言，我舉一個(gè)例子上面這三種加載方式，中間的方式最迂腐：用戶會(huì)想'這等到什么時(shí)候會(huì)是個(gè)頭??！ 右面呢？右面會(huì)不會(huì)好一點(diǎn)？答案是不會(huì)， 想想你高中時(shí)上午最后一節(jié)課， 你在等下課， 所 以你一直仔細(xì)的看著表上的指針，你越急躁，觀察的越仔細(xì)，越能感覺

6、到”時(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)頁的打開速度 高端揭秘：為你的

7、響應(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í)慣意味著什么？這意味著

8、設(shè)計(jì)必須具有高度的 一致性， 用戶看到前面的布局， 對(duì)后面的布局有一種”預(yù)期”： 他會(huì)認(rèn)為后面的頁面布局也 是如此，不要破壞用戶的閱讀節(jié)奏感。同樣的， 同一頁面的各個(gè)元素以及各個(gè)子頁面之間必須要具備一致的聯(lián)系性， 也就是說設(shè)計(jì) 師的設(shè)計(jì)模式應(yīng)該專一， 再舉個(gè)簡單的例子， 如果主頁的導(dǎo)航欄布置在上方， 子頁面的導(dǎo)航 欄布置在側(cè)邊，你認(rèn)為用戶會(huì)高興嗎？參考閱讀：高手之路：如何設(shè)計(jì)才能讓網(wǎng)站風(fēng)格協(xié)調(diào)一致4. 將導(dǎo)航菜單作為交互的”核心”上面已經(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)

9、用戶有問題時(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. 留白和信息同樣重要“內(nèi)容為王”、”內(nèi)容至 上”是嗎？那我就提供大量豐富信息，把網(wǎng)站全部都填滿。”這種設(shè)計(jì)思想真是大錯(cuò)特錯(cuò)，太片面了。你要有這樣一種觀念： 留白也是設(shè)計(jì)的一部分， 那些不使用的空間也能發(fā)揮其作用。 從用戶 的角度來說，留白很好，讓布局更有條理，信息更清晰。太剛強(qiá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í)造內(nèi)容，還知道如何高效組織內(nèi)容， 傳遞信息。視覺層級(jí)對(duì)于信息呈遞來說異常重要， 優(yōu)秀 的視覺層級(jí)還能幫助設(shè)計(jì)師強(qiáng)化設(shè)計(jì)理念?？臻g排布、間距使用、整體布局，關(guān)于這些的探討已經(jīng)夠多了，歸根結(jié)底，無非是為了打造 優(yōu)秀的視覺層級(jí)。參考閱讀：如何在設(shè)計(jì)中建立良好的視覺層級(jí)7.永遠(yuǎn)不要忽略字體內(nèi)容為王，那么內(nèi)容是由什么包裝的呢？答案是字體， 這種小小的細(xì)節(jié)能造就大差異。 字體