響應式Web設計需要不一樣的設計思路:針對內容進行設計而非設備
響應式Web設計需要不一樣的設計思路:針對內容進行設計而非設備-移動閱讀二維碼

一個成功的 web 設計源自精雕細琢。但當進行響應式 web 設計(Responsive Web Design ,RWD)時候,我們會發現針對普通 web 設計的經典方法已無法適用了。

有趣的是響應式 web 設計其實是一種 web 設計的倒退。在響應式 web 設計出現之前,在傳統的 web 設計過程中通常我們會固定整個布局和容器的寬度,以此來構成一個靈活的網格系統。隨后,向其中添加表格和區塊并填充響應內容,最終完成設計。但這種設計方式,并不適合用于設計會在不同設備上顯示的頁面。

所以,當設計者在設計響應式設計時,不應再執著于布局、線框等的具體大小,而應該考慮如何使用流體元素。與其根據不同設備的大小來設計頁面,不如想想如何針對內容進行設計。

響應式Web下需要變通設計方式

傳統的 web 設計方法無法應用于響應式網站的設計,目前在設計響應式網站的方法上還比較缺乏好的設計方法。雖然一下子要摒棄已經熟悉的方法很痛苦,但如果要設計好響應式 web,這是必須的。

不斷的反思可以讓你在設計響應式 web 時更有效率。

響應式Web設計的設計流程

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

1、開發一套設計體系

設計者 Laura Kalbag 認為應該創造一種無需關注布局細節只關注獨立的響應式設計組件的設計體系。因為響應式設計是流體的,所以不用擔心布局是否有問題,但是你需要考慮單個設計元素的效果。Kalbag 說,“這樣我們就不會因為要為手機、平板和桌面 PC 設計而煩惱了?!?/p>

Kalbag 建議摒棄老的設計方法,因為站點會在不同的設備上被訪問,所以我們應該去著重設計站點的整體感覺。版式、顏色、形狀以及圖片,這些元素構成視覺設計。只要能將這些元素設計地連貫,即便是不同大小的設備也會給用戶一致的感覺。

在思考視覺設計(或內容)時,首先要明確任何大小的設備都有可能使用你正在設計的這個元素。響應式 web 設計的關鍵在雖然是多個平臺,但也能給用戶一致的用戶體驗。通過這種組件化設計,從而形成一套設計體系,對于響應式 web 設計是很有效的。

2、基于內容層次的新型模型圖

模型圖在當今的 web 設計領域仍然有一席之地。但是我認為響應式 web 設計并不需要創建具體模型圖,比如具體設計出在某個設備上的尺寸。

還有些人認為可以基于內容制作模型圖,而不基于布局。我覺得這個想法也很好。

移動設備通常都是狹長型的,這使得你只能將內容以列的方式呈現。這種線性顯示是由于寬度所限,使得設計者不得不這么做,在較寬的屏幕上通常是不會這樣的。

因此許多設計者開始嘗試一種新型的模型圖,這種模型圖關注內容層次不關注布局。設計者會給內容元素標上數值,用來表示這些元素在堆疊的列布局中的位置。這種方式對于設計有些束縛,但對展示內容可能是絕佳的。

推薦工具

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

1、StyleTil.es

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

2、優先級向導

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

結語

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

參考文章:

Drew Clemens, “Design Process in the Responsive Age”

Laura Kalbag, “Responsive Day Out”

本文鏈接:http://www.casaleticia.com/responsive-web-design-for-content-design.html
本文標簽: ,