一、響應(yīng)式設(shè)計

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

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

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


二、導(dǎo)航欄設(shè)計

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

      一般我的頂部導(dǎo)航欄式這樣設(shè)計的：





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

      側(cè)邊導(dǎo)航欄可以存在也可以不存在，當(dāng)一個網(wǎng)站的信息架構(gòu)比較復(fù)雜時，即二級分類以下還有第三級分類，那么設(shè)置一個側(cè)邊導(dǎo)航欄是比較好的選擇。

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


三、模數(shù)化設(shè)計

       學(xué)過建筑的朋友都知道模數(shù)這個概念，在交互設(shè)計中，我把它借鑒過來，使交互稿的排版更加工整有序，便于視覺設(shè)計師的閱讀。
       什么叫建筑模數(shù)？
       建筑模數(shù)（construction module） ，建筑設(shè)計中，統(tǒng)一選定的協(xié)調(diào)建筑尺度的增值單位。是選定的標(biāo)準(zhǔn)尺度單位，作為建筑物、建筑構(gòu)配件、建筑制品以及有關(guān)設(shè)備尺寸相互間協(xié)調(diào)的基礎(chǔ)。以100mm為基礎(chǔ)模數(shù)，100mm=1M，在中國標(biāo)準(zhǔn)中，一般取3M為常用模數(shù)。

       在交互設(shè)計中，假如定義10px=1M，考慮到頁面尺寸的數(shù)值，可以確定一個具有個人風(fēng)格的模數(shù)，比如當(dāng)你的網(wǎng)頁設(shè)計中，可以用2M，3M為基本的模數(shù)，那么后續(xù)的交互部件之間的關(guān)系就顯得井然有序，不會因為各種參差不齊而顯得這個交互稿“不專業(yè)”，也有助于培養(yǎng)良好的設(shè)計思維。


四、常用組件

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

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

不規(guī)則形：用于其他情況下的內(nèi)容填充，比如頭像，氣泡，標(biāo)簽等等。

占位符：可以作為重要標(biāo)志，比如圖片，banner等等。

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

分隔線：用于頁面分區(qū)，也可以用于文字輸入欄，這種情況一般適用于material design的設(shè)計規(guī)則中。

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

復(fù)選/單選框：用于選項中。

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


五、手法

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

       統(tǒng)一性：設(shè)計中往往會出現(xiàn)相似的類目，可能在不經(jīng)意之間有整理強迫癥的人自然就把他們歸類了，但是系統(tǒng)的來說，字體、線條、符號、顏色、設(shè)計要素、格式、平面關(guān)系等都是設(shè)計稿呈現(xiàn)中需要注意的組成部分。
       因此為了讓成果看起來專業(yè)性強，頁面之間及頁面內(nèi)部的組成部分就需要設(shè)計統(tǒng)一樣式，形成統(tǒng)一的風(fēng)格，減少閱讀者的信息識別干擾，提高效率。以輸入框為例，前后頁面的輸入框形式需要統(tǒng)一，矩形框、文本框、橫線等不建議同時出現(xiàn)在一個交互設(shè)計中，除非是特殊情況。再以字體為例，相同的層級的字體大小一樣，不建議多余4種大小的字體。

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

       對齊：對齊不僅僅是整齊，在對齊的同時，內(nèi)容之間自然會出現(xiàn)視覺上的聯(lián)系，以至于存在功能上流程上的聯(lián)系。

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


六、注意事項

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

      這是一個很大的類別，我們在日常工作中，不同的崗位，不同的角色會有不同的理解。只有一直思考，一直學(xué)習(xí)，才能將它做好。