對網站設計師來說，響應式設計的到來究竟意味著什么？

+ 查看更多

 

響應式網站設計(RWD)這個術語在網站領域越來越流行，這一點顯而易見。當你在社交媒體如Twitter、Facebook或微博上等搜索#響應式網站設計時，你會找到很多文章，有優質的內容，也有泛泛而論的空談，這就是新概念逐漸成熟的一種現象。曾經Ajax（一種網頁開發技術）也是如此，現在卻幾乎無人問津了。

RWD如今到處都是，就連在雜志界也有點名氣。我有一個做雜志出版的朋友最近參加了一個會議，會議上很多有名的新興雜志編輯都提到了未來網站發展的趨勢，談到了響應式Web設計。雜志編輯可能在網站建設方面并不專業，但是也都知道這個詞“響應式網站設計”(RWD)。

響應式設計蒸蒸日上，人們創建網站的方式已經改變。而且隨著RWD成為Web設計的常規部分，網頁設計師的工作方式也要做出改變。因此我們需要確立一些關于響應式網站設計的準則。

 

 

 

當用戶要求你對某個響應式網站進行測試時，你會怎么做？改變窗口大小，觀察布局怎么變化？在這種情況下，大部分設計或開發人員可能就會使用手機或者平板訪問，旋轉顯示方向，或測試頁面加載速度。這是因為他們整天都在調整瀏覽器，很容易形成這種想法。但是用戶是另一種存在，當你作為用戶進行訪問時，你不會關心網站布局是否流暢，你只希望能夠盡快找到自己想要的信息。

 

因此在這里，我想要告訴大家響應式網站設計不僅僅需要關注布局的響應式，還應留意網站內容的取舍，不要只停留在"軟式響應"上。“軟式響應”是指網站的線性縮放，在不同尺寸屏幕上的大小的改變。軟式響應遠遠不夠，設計網站時我們還需要有一個核心，在不同的屏幕上圍繞這個核心按照功能適量加載更多內容。舉個栗子來說，假如網站需要為IE7制作一個手機元素(如App宣傳頁面)，那么手機元素就是你需要重點關注的核心，最好圍繞手機元素對屏幕或其他元素進行設計，根據不同的屏幕作出合理的布局。

 

 

 

響應式設計很復雜。我們都希望這有一些能夠讓它更加簡單的技巧或方法，但這真的沒有，或者說目前還沒有出現。大多數負責開發響應式的設計師還是需要兢兢業業，在做新內容交付或是其他活動時做好工作流程的添加。以我的一個朋友為例。她是先在Photoshop里做了一個符合PC端的設計圖。但完成一些設計頁面以后，又想要網站在平板或智能手機上呈現良好，因此又制作了一些設計圖。不過向用戶展示成果后，一些地方需要根據用戶需求做出創意性的調整，新的設計圖又是不可避免的了。這樣一算，已經差不多有50個PSD文件了。她需要花不少時間來調整頁面布局。

如果是添加新設計，就更會消耗時間，還有可能造成前后框架或布局的不一致。建議：最好的處理方式之一就是向客戶展示原型線框圖。這樣就可以照著框圖只講布局不談設計。Foudation by ZURB是很一種比較好的線框圖制作工具。

 

 

 

在第一次構建響應式網站時。我僅使用了Photoshop和GoLive兩個工具，但現在卻至少要用6個。我仍然使用Photoshop創建頁面中的圖形元素，但頁面中的其它設計元素主要使用Sublime Text 2，并且使用iOS 6自帶的Safari瀏覽器開發者工具查看生產的頁面元素。另外，我還使用Codekit來編譯pre-processed CSS（比如LESS或Sass），使用版本控制工具Git設置命令行。

 

響應式Web設計意味著設計方式的改變。相對于在Photoshop中畫出整個頁面，使用Samantha Warren’s Style Tiles工具可以更清晰的表達視覺設計。通過設計一個Web在多種布局下的視覺品牌和界面元素，你還可以根據布局直接改變設計來創建響應式的Web原型。

CSS pre-processors對于任何響應式設計的工作都有巨大的幫助。簡單的說，pre-processors可以降低網站構建的復雜性并且在CSS解釋執行的過程中減少了許多樣式重復繼承的工作。針對這方面的工具，我個人更喜歡SCSS，當然LESS也是一個很好的選擇，它還有更加完善的文檔。

 

 

 

網站應該能夠為任何可訪問互聯網的設備訪問并提供友好的體驗，無論是固定設備還是移動設備、不管屏幕是大還是小。——Tim Berners Lee

HTML和CSS本身就是響應式的。自HTML誕生以來，網站就試圖變得更加靈活，來適應一切可以訪問互聯網的硬件設備。并不是說以前設計者和開發者趨向于固定的布局，現在卻改變了，而是因為給網站強制加上固定的大小會限制它在不同設備端提供的用戶體驗。

 

 

 

響應式網站設計是一個將你如何表達抽象為你表達什么的設計原則，例如，NPR最近遷移到一個API驅動的內容模型中，通過使用API提供相應的內容方式，NPR可以在app和網站上形成一致的表現，唯一需要修改只有表現層。

這就是響應式網站設計具備的一切，弄清楚設計師想表達什么，并且通過它驅動實現如何表達，設計出迎合用戶需求并賞心悅目的效果。

這就是響應式網站設計具備的一切，以用戶為先。創建為用戶服務的網站，保證用戶在任何情況下都可以輕松實現內容的訪問。做一個可以適應小屏幕的網站僅僅是個開始。

 

 

出自：開源中國社區 Oschina.net