本文作者Jacey Gulden是一名Web Designer,原載於Medium。

一個成功的web設計源自精雕細琢。但當進行響應式web設計(Responsive Web Design ,RWD)時候,我們會發現針對普通web設計的經典方法已無法適用了。
有趣的是響應式web設計其實是一種web設計的倒退。在響應式web設計出現之前,在傳統的web設計過程中通常我們會固定整個佈局和容器的寬度,以此來構成一個靈活的網格系統。隨後,向其中添加表格和區塊並填充響應內容,最終完成設計。但這種設計方式,並不適合用於設計會在不同設備上顯示的頁面。所以,當設計者在設計響應式設計時,不應再執著於佈局、線框等的具體大小,而應該考慮如何使用流體元素。與其根據不同設備的大小來設計頁面,不如想想如何針對內容進行設計。


響應式Web下需要變通設計方式
傳統的web設計方法無法應用於響應式網站的設計,目前在設計響應式網站的方法上還比較缺乏好的設計方法。雖然一下子要摒棄已經熟悉的方法很痛苦,但如果要設計好響應式web,這是必須的。不斷的反思可以讓你在設計響應式web時更有效率。
  

響應式Web設計的設計流程
現在讓我來看看適應響應式web設計的方法應該是什麼樣的。

1、開發一套設計體系
設計者Laura Kalbag認為應該創造一種無需關注佈局細節只關注獨立的響應式設計組件的設計體系。因為響應式設計是流體的,所以不用擔心佈局是否有問題,但是你需要考慮單個設計元素的效果。 Kalbag說,“這樣我們就不會因為要為手機、平板和桌面PC設計而煩惱了。”
Kalbag建議摒棄老的設計方法,因為站點會在不同的設備上被訪問,所以我們應該去著重設計站點的整體感覺。版式、顏色、形狀以及圖片,這些元素構成視覺設計。只要能將這些元素設計地連貫,即便是不同大小的設備也會給用戶一致的感覺。
在思考視覺設計(或內容)時,首先要明確任何大小的設備都有可能使用你正在設計的這個元素。響應式web設計的關鍵在雖然是多個平台,但也能給用戶一致的用戶體驗。通過這種組件化設計,從而形成一套設計體系,對於響應式web設計是很有效的。

2、基於內容層次的新型模型圖
模型圖在當今的web設計領域仍然有一席之地。但是我認為響應式web設計並不需要創建具體模型圖,比如具體設計出在某個設備上的尺寸。
還有些人認為可以基於內容製作模型圖,而不基於佈局。我覺得這個想法也很好。
移動設備通常都是狹長型的,這使得你只能將內容以列的方式呈現。這種線性顯示是由於寬度所限,使得設計者不得不這麼做,在較寬的屏幕上通常是不會這樣的。
因此許多設計者開始嘗試一種新型的模型圖,這種模型圖關注內容層次不關注佈局。設計者會給內容元素標上數值,用來表示這些元素在堆疊的列佈局中的位置。這種方式對於設計有些束縛,但對展示內容可能是絕佳的。

推薦工具
能夠用於響應式web設計的工具十分多。在這裡主要介紹兩款特別有用的工具。

1、StyleTil.es
StileTiles是一款能幫助設計者這種全新的設計方式,該方式主要關注站點中的字體、顏色以及示例UI色板。 StyleTiles不關注佈局上的細節,但可以很方便地讓你知道你設計的網站大致是個什麼樣。

响应式Web设计需要不一样的设计思路:针对内容进行设计而非设备

2、優先級嚮導

Spark Box就是由Drew Clemens根據優先級嚮導(下載地址)所設計的。優先級嚮導說明瞭如何為站點中內容分配優先級。此時不需要進行任何視覺設計,因為此時內容的排布是根據關聯性而不是美學。下圖說明瞭如何劃分內容層次:

响应式Web设计需要不一样的设计思路:针对内容进行设计而非设备

  

結語
響應式web設計是一個全新、未知的領域,所以要勇於嘗試新的方法、摸索一些新的技巧,同時不斷的實踐。畢竟,解決新的問題,還需新的方法。
  

參考文章:
Drew Clemens, “Design Process in the Responsive Age”
Laura Kalbag, “Responsive Day Out”

 

 

了解更多:http://www.qredc.com.tw/

 

blog聯絡

 

創作者介紹

艾爾森數位有限公司

艾爾森數位 發表在 痞客邦 留言(0) 人氣()