交互設計中的排版-網頁

最近在交互設計崗位也工作了一段時間，期間在知乎上也經常分享自己的從業心得，但是比較零碎，又有一些網友來諮詢我如何入門交互設計，做為一名傳統設計行業轉行的交互設計師，我想乾脆就系統地梳理下所學所得，寫成文章，與大家共勉。

交互設計的工作內容並不複雜，但是其包含的知識面卻十分龐大，設計學、心理學、商業、管理、傳播學、前端程序等等，可以說要精通並不簡單，這裡我就先分享下工作中設計成果的版式設計心得。

交互設計稿的閱讀對象主要是視覺設計師和前端開發人員，因此我們的設計稿需要達到以下兩點要求：

1、版面具有設計感

2、信息呈現清晰

這兩點分別對應視覺和前端。

一、響應式設計

網頁設計中最明顯特點就是頁面尺寸的多樣性，大家平時可以縮放下瀏覽器框的大小，可以發現優秀的網頁往往會根據頁面尺寸的變化內容版式也跟隨適應，這是最近幾年技術進步的成果，從交互設計角度看，往往體現在不同尺寸下的頁面布局變化。

以material design中的頁面尺寸分布，我們可以將網頁主要尺寸節點分為480px、600px、840px、960px、1280px、1440px、1600px、1920px

一般在畫交互稿時，我會採用480px、960px、1280px這幾個主要節點，因為目前pc屏幕的大部分尺寸都在1024*768以上，所以960px是一個比較保守的大小，而1280px是可以在某些需要的網站類型可以使用，具體看實際情況。480px則是考慮手機打開網站時的閱讀體驗。

二、導航欄設計

導航欄在網頁中具有很重要的地位，導航欄設計好了一個網頁的設計也好了一半，所以單獨拿出來說下導航欄的排版設計。一般網頁交互設計中，產品信息架構多為平行並列式，當然也存在流程式的，具體看網站類型。在這樣情況下導航欄的排版設計就成了一個要點。

一般我的頂部導航欄式這樣設計的：

這三種比較常用，第一種是常規的後台網站使用版式，注重子類的聚集，便於用戶切換；第二種是我設計的官網的導航版式，注重企業logo的展示，居中則比較搶眼，但是在交互上存在視覺線路斷裂的缺點；第三種是面向常規用戶的登錄型網站，右側是個人頁面的入口，左側則是子類入口，兩者區分開，以免有視覺上的模糊感。

側邊導航欄可以存在也可以不存在，當一個網站的信息架構比較複雜時，即二級分類以下還有第三級分類，那麼設置一個側邊導航欄是比較好的選擇。

這兩種布局方式都各有千秋，第一種直觀，用戶能看到操作路徑，有較強的掌控感，適合操作界面複雜的網站，比如後台管理網站，購物類網站等。第二種界面信息干擾較少，簡潔美觀，但是缺少直觀的路徑識別，可以用在架構較複雜的宣傳性網站上，比如遊戲網站。

三、模數化設計

學過建築的朋友都知道模數這個概念，在交互設計中，我把它借鑒過來，使交互稿的排版更加工整有序，便於視覺設計師的閱讀。

什麼叫建築模數？

建築模數（construction module） ，建築設計中，統一選定的協調建築尺度的增值單位。是選定的標準尺度單位，作為建築物、建築構配件、建築製品以及有關設備尺寸相互間協調的基礎。以100mm為基礎模數，100mm=1M，在中國標準中，一般取3M為常用模數。

在交互設計中，假如定義10px=1M，考慮到頁面尺寸的數值，可以確定一個具有個人風格的模數，比如當你的網頁設計中，可以用2M，3M為基本的模數，那麼後續的交互部件之間的關係就顯得井然有序，不會因為各種參差不齊而顯得這個交互稿「不專業」，也有助於培養良好的設計思維。

四、常用組件

一般交互稿的製作使用Axure這個軟體，我以Axure8.0來舉例。

矩形：最常用的一個組件，具有良好的分區效果，也可以作為條目的襯底，在使用中建議需要分區時顯示線框，需要顯示顏色時隱藏線框。

不規則形：用於其他情況下的內容填充，比如頭像，氣泡，標籤等等。

佔位符：可以作為重要標誌，比如圖片，banner等等。

按鈕：一個交互稿內的按鈕類型不能太多種，一般不多於3種。同一類型的按鈕用例不宜超過2個，區分開以點擊和未點擊，可點擊和不可點擊。

分隔線：用於頁面分區，也可以用於文字輸入欄，這種情況一般適用於material design的設計規則中。

文本框：區別於一般的矩形，可輸入文字。如果設計重互動，就需要它，如果設計重界面形象，那可以用矩形代替。

複選/單選框：用於選項中。

一般的界面風格我會用兩種，一種是用有色矩形加有色按鈕形成的比較有顏色層次感的排版，一種是用各種線框以及佔位符組成的具有較強結構感的排版，兩者都可以，但是在顏色使用上一般用黑白灰的顏色，同時顏色不宜太多。

五、手法

排版手法主要在文字與文字，文字與組件，組件與頁面之間。

統一性：設計中往往會出現相似的類目，可能在不經意之間有整理強迫症的人自然就把他們歸類了，但是系統的來說，字體、線條、符號、顏色、設計要素、格式、平面關係等都是設計稿呈現中需要注意的組成部分。

因此為了讓成果看起來專業性強，頁面之間及頁面內部的組成部分就需要設計統一樣式，形成統一的風格，減少閱讀者的信息識別干擾，提高效率。以輸入框為例，前後頁面的輸入框形式需要統一，矩形框、文本框、橫線等不建議同時出現在一個交互設計中，除非是特殊情況。再以字體為例，相同的層級的字體大小一樣，不建議多餘4種大小的字體。

對比性：交互稿不僅僅具有產品邏輯的信息呈現，同時也會給閱讀者傳遞設計信息。比如一個按鈕需要較強的視覺效果和功能地位，那麼自然在大小顏色形式上需要與其他按鈕區別，通過對比的手法，有秩序地突出主要內容，也傳遞出功能或者信息的優先順序，當然也不建議隨意對比，還是以產品的功能需求和交互邏輯為主導。

對齊：對齊不僅僅是整齊，在對齊的同時，內容之間自然會出現視覺上的聯繫，以至於存在功能上流程上的聯繫。

版式設計中設計手法還有很多，這裡就將了幾個最重要的。然而手法並不是主要的，在設計中以交互邏輯為出發點，兼顧常規的版式設計，才是正確的順序，不要本末倒置，不然就是去了交互設計的初衷。

六、注意事項

網頁交互設計中版式的許多小細節需要大家在工作中多多思考，這裡也只是講了比較淺顯的部分，版式只是一個外在表現，其內核是一個有良好邏輯思維和貼切的用戶體驗的產品，由內而外去設計，才是正道。

這是一個很大的類別，我們在日常工作中，不同的崗位，不同的角色會有不同的理解。只有一直思考，一直學習，才能將它做好。
推薦閱讀：