響應式排版中的基礎知識

1、互聯網何時誕生？專家對此說法不一， 30 多年前，互聯網的應用非常有限，僅僅一小部分 人能夠接觸到這種”先進”的技術。然后經歷了30 多年的指數級發(fā)展，它取得了夢幻般的成功。十年前，互聯網剛剛處于雛形階段，到如今，整個產業(yè)的格局已呈”大而不倒”的局面。 而互聯網的陣線也拉長了， 從傳統(tǒng)的”老式桌面”到各式各樣的便攜式設備， 從由互聯網引 領的”大數據時代”， 再到存儲的新革命”云概念”。 而設備呢？手表、 眼鏡各種以網絡為 基礎的可穿戴設備正在蓬勃發(fā)展。如穿越到十年前， 向別人描述今日的網絡現狀， 他肯定會一笑而過， 認為這只不過是”海市 蜃樓”般的幻想。但十年后的今天， 這些革新一一實現，

2、不再是觸手不可及的幻象， 這所有的技術革新切切實 實的就在我們身邊。感謝那些為互聯網做出貢獻的革命者們！張圖能夠很好的闡述響應式設計的思想。而聰明的 Luke Wroblewski 提出了”移動優(yōu)先（ Mobile First） ”設計戰(zhàn)略，他認為，這種設 計模式：先從移動設備開始設計，那么設計便能很輕松的向下兼容。 （通俗的講，就是大屏 肯定能完美呈現小屏上的設計，而小屏不一定能裝得下大屏上的設計。 ） 世界一直在變， 它的變數很大， 而引領世界改變的互聯網變數大到你無法想象。因此， 迅捷 的變化節(jié)奏導致互聯網工作者的工作注定是”高強度、 快節(jié)奏”的， 要么適應變化， 要么引 領變局，要么被

3、淘汰，無非這三種。正因如此，這個行業(yè)競爭激烈，新生力量層出不窮，很 難有人一直保持前列。而本文的目的， 不是為各位設計師羅列出森嚴的”軍規(guī)”， 然后以專家的口吻說”你必須得 這么干”。 本文的目的是更新大家適應網頁設計的觀念， 掌握哪些經歷過時間檢驗的基本準 則，以更好的適應變化。新時代的網頁設計充滿了各種新技術、各種新的 jQuery 腳本、各種響應式網頁設計但 我們依然不能忽略最基本的網頁設計基礎。新時代的網頁設計以響應式理論為藍本，力圖在不同設備上呈現一致的網頁瀏覽體驗。 而響應式時代依然不便的設計基本準則又是什么呢？一起來看看下面的七條， 望諸君設計時 銘記于心。1. 優(yōu)秀的網頁設計應

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

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

6、到”時間太慢”。 左面好不好？也不好， 旋轉指示條轉的快， 用戶會認為加載速度很快， 用戶會想”加載的這 么快還沒有完全載入，這是設計問題嗎？” 轉的慢，用戶會認為”這是網絡問題，加載的 居然這么慢”說實話，上面這三種方式都是告訴用戶：請等待！ 所謂的進度讀取、旋轉讀取只不過是一 種心理騙局：無論多塊、進度條多充盈，在沒有完成加載前，用戶還是看不到頁面信息。 而最近出現了一種新方法， Luke Wroblewski 在他的文章中提到過，叫做框架讀取，也就是 加載了多少內容，呈遞多少內容，推薦各位嘗試。參考閱讀：談談加載 (LOADING) 的那點事推薦：如何加速網頁的打開速度 高端揭秘：為你的

7、響應式設計提速3. 網頁設計必須具備一致性 想像一下你作為網絡瀏覽者時的經歷： 你在瀏覽網頁時， 一般都不會詳細閱讀內容， 你會快 速滑動頁面，大致瀏覽一遍，如果看到感興趣的信息便停下， 進行仔細閱讀。這是一種用戶 習慣。萬物作而弗始，生而弗有，為而弗恃，功成而弗居。夫唯弗居，是以不去。道德經在 John Allsopp 網頁設計之道中有這樣一句話，大致是這么一種意思：設計師不應該作 為用戶的對立， 設計師應該尊重用戶的習慣， 讓設計適應用戶的習慣， 而不是做一個高高在 上的獨裁者。功成身退，這似乎有種”偉大的設計是隱形”的意味。好了，我們把話題扯回來， 用戶的這種閱讀習慣意味著什么？這意味著

8、設計必須具有高度的 一致性， 用戶看到前面的布局， 對后面的布局有一種”預期”： 他會認為后面的頁面布局也 是如此，不要破壞用戶的閱讀節(jié)奏感。同樣的， 同一頁面的各個元素以及各個子頁面之間必須要具備一致的聯系性， 也就是說設計 師的設計模式應該專一， 再舉個簡單的例子， 如果主頁的導航欄布置在上方， 子頁面的導航 欄布置在側邊，你認為用戶會高興嗎？參考閱讀：高手之路：如何設計才能讓網站風格協調一致4. 將導航菜單作為交互的”核心”上面已經提到 過，各個頁面的導航欄必須具備一致性。 有時候， 好的網頁設計和差的網頁設計差距就在導 航菜單，好的導航菜單成就了一款設計，壞的導航毀滅了一例網站。 每當

9、用戶有問題時，他都會習慣性的翻閱導航菜單，這也是用戶習慣，要注意。個人認為， 導航是網頁設計的核心元素，影響到網站的交互性，至于要怎么設計， 仁者見仁， 智者見智 了。參考閱讀： 大型網站導航設計指南 網頁新趨勢：革命性的創(chuàng)新網頁導航設計5. 留白和信息同樣重要“內容為王”、”內容至 上”是嗎？那我就提供大量豐富信息，把網站全部都填滿。”這種設計思想真是大錯特錯，太片面了。你要有這樣一種觀念： 留白也是設計的一部分， 那些不使用的空間也能發(fā)揮其作用。 從用戶 的角度來說，留白很好，讓布局更有條理，信息更清晰。太剛強的事物容易折斷， 有張有弛才能長久。 網頁設計也是同理， 多給用戶一點閱讀呼吸空 間，讓他們感受到網頁設計的”節(jié)奏感”。各位可以自行想象一下， 如果一款網頁中一點留白都沒有， 到處都是密密麻麻的文字和圖像， 你會感到舒服嗎？參考閱讀：我們?yōu)楹我谠O計中重視”留白”6.用心的設計都有清晰的視覺層級造內容，還知道如何高效組織內容， 傳遞信息。視覺層級對于信息呈遞來說異常重要， 優(yōu)秀 的視覺層級還能幫助設計師強化設計理念?？臻g排布、間距使用、整體布局，關于這些的探討已經夠多了，歸根結底，無非是為了打造 優(yōu)秀的視覺層級。參考閱讀：如何在設計中建立良好的視覺層級7.永遠不要忽略字體內容為王，那么內容是由什么包裝的呢？答案是字體， 這種小小的細節(jié)能造就大差異。 字體