南通企業(yè)網(wǎng)站建設500元全包（交互界面設計排版）交互設計排版展板，
最近在交互設計崗位也工作了一段時間，期間在知乎上也經(jīng)常分享自己的從業(yè)心得，但是比較零碎，又有一些網(wǎng)友來咨詢我如何入門交互設計，做為一名傳統(tǒng)設計行業(yè)轉行的交互設計師，我想干脆就系統(tǒng)地梳理下所學所得，寫成文章，與大家共勉。
交互設計的工作內容并不復雜，但是其包含的知識面卻十分龐大，設計學、心理學、商業(yè)、管理、傳播學、前端程序等等，可以說要精通并不簡單，這里我就先分享下工作中設計成果的版式設計心得 交互設計稿的閱讀對象主要是視覺設計師和前端開發(fā)人員，因此我們的設計稿需要達到以下兩點要求：。
1、版面具有設計感 2、信息呈現(xiàn)清晰 這兩點分別對應視覺和前端一、響應式設計 網(wǎng)頁設計中最明顯特點就是頁面尺寸的多樣性，大家平時可以縮放下瀏覽器框的大小，可以發(fā)現(xiàn)優(yōu)秀的網(wǎng)頁往往會根據(jù)頁面尺寸的變化內容版式也跟隨適應，這是最近幾年技術進步的成果，從交互設計角度看，往往體現(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)站時的閱讀體驗二、導航欄設計 導航欄在網(wǎng)頁中具有很重要的地位，導航欄設計好了一個網(wǎng)頁的設計也好了一半，所以單獨拿出來說下導航欄的排版設計一般網(wǎng)頁交互設計中，產(chǎn)品信息架構多為平行并列式，當然也存在流程式的，具體看網(wǎng)站類型。
在這樣情況下導航欄的排版設計就成了一個要點 一般我的頂部導航欄式這樣設計的：
這三種比較常用，第一種是常規(guī)的后臺網(wǎng)站使用版式，注重子類的聚集，便于用戶切換；第二種是我設計的官網(wǎng)的導航版式，注重企業(yè)logo的展示，居中則比較搶眼，但是在交互上存在視覺線路斷裂的缺點；第三種是面向常規(guī)用戶的登錄型網(wǎng)站，右側是個人頁面的入口，左側則是子類入口，兩者區(qū)分開，以免有視覺上的模糊感。
側邊導航欄可以存在也可以不存在，當一個網(wǎng)站的信息架構比較復雜時，即二級分類以下還有第三級分類，那么設置一個側邊導航欄是比較好的選擇。
這兩種布局方式都各有千秋，第一種直觀，用戶能看到操作路徑，有較強的掌控感，適合操作界面復雜的網(wǎng)站，比如后臺管理網(wǎng)站，購物類網(wǎng)站等第二種界面信息干擾較少，簡潔美觀，但是缺少直觀的路徑識別，可以用在架構較復雜的宣傳性網(wǎng)站上，比如游戲網(wǎng)站。
三、模數(shù)化設計 學過建筑的朋友都知道模數(shù)這個概念，在交互設計中，我把它借鑒過來，使交互稿的排版更加工整有序，便于視覺設計師的閱讀 什么叫建筑模數(shù)？ 建筑模數(shù)（construction module） ，建筑設計中，統(tǒng)一選定的協(xié)調建筑尺度的增值單位。
是選定的標準尺度單位，作為建筑物、建筑構配件、建筑制品以及有關設備尺寸相互間協(xié)調的基礎以100mm為基礎模數(shù)，100mm=1M，在中國標準中，一般取3M為常用模數(shù) 在交互設計中，假如定義10px=1M，考慮到頁面尺寸的數(shù)值，可以確定一個具有個人風格的模數(shù)，比如當你的網(wǎng)頁設計中，可以用2M，3M為基本的模數(shù)，那么后續(xù)的交互部件之間的關系就顯得井然有序，不會因為各種參差不齊而顯得這個交互稿“不專業(yè)”，也有助于培養(yǎng)良好的設計思維。
四、常用組件 一般交互稿的制作使用Axure這個軟件，我以Axure8.0來舉例。
矩形：最常用的一個組件，具有良好的分區(qū)效果，也可以作為條目的襯底，在使用中建議需要分區(qū)時顯示線框，需要顯示顏色時隱藏線框。
不規(guī)則形：用于其他情況下的內容填充，比如頭像，氣泡，標簽等等。
占位符：可以作為重要標志，比如圖片，banner等等。
按鈕：一個交互稿內的按鈕類型不能太多種，一般不多于3種。同一類型的按鈕用例不宜超過2個，區(qū)分開以點擊和未點擊，可點擊和不可點擊。
分隔線：用于頁面分區(qū)，也可以用于文字輸入欄，這種情況一般適用于material design的設計規(guī)則中。
文本框：區(qū)別于一般的矩形，可輸入文字。如果設計重互動，就需要它，如果設計重界面形象，那可以用矩形代替。
復選/單選框：用于選項中 一般的界面風格我會用兩種，一種是用有色矩形加有色按鈕形成的比較有顏色層次感的排版，一種是用各種線框以及占位符組成的具有較強結構感的排版，兩者都可以，但是在顏色使用上一般用黑白灰的顏色，同時顏色不宜太多。
五、手法 排版手法主要在文字與文字，文字與組件，組件與頁面之間 統(tǒng)一性：設計中往往會出現(xiàn)相似的類目，可能在不經(jīng)意之間有整理強迫癥的人自然就把他們歸類了，但是系統(tǒng)的來說，字體、線條、符號、顏色、設計要素、格式、平面關系等都是設計稿呈現(xiàn)中需要注意的組成部分。
因此為了讓成果看起來專業(yè)性強，頁面之間及頁面內部的組成部分就需要設計統(tǒng)一樣式，形成統(tǒng)一的風格，減少閱讀者的信息識別干擾，提高效率以輸入框為例，前后頁面的輸入框形式需要統(tǒng)一，矩形框、文本框、橫線等不建議同時出現(xiàn)在一個交互設計中，除非是特殊情況。
再以字體為例，相同的層級的字體大小一樣，不建議多余4種大小的字體 對比性：交互稿不僅僅具有產(chǎn)品邏輯的信息呈現(xiàn)，同時也會給閱讀者傳遞設計信息比如一個按鈕需要較強的視覺效果和功能地位，那么自然在大小顏色形式上需要與其他按鈕區(qū)別，通過對比的手法，有秩序地突出主要內容，也傳遞出功能或者信息的優(yōu)先級，當然也不建議隨意對比，還是以產(chǎn)品的功能需求和交互邏輯為主導。
對齊：對齊不僅僅是整齊，在對齊的同時，內容之間自然會出現(xiàn)視覺上的聯(lián)系，以至于存在功能上流程上的聯(lián)系 版式設計中設計手法還有很多，這里就將了幾個最重要的然而手法并不是主要的，在設計中以交互邏輯為出發(fā)點，兼顧常規(guī)的版式設計，才是正確的順序，不要本末倒置，不然就是去了交互設計的初衷。
六、注意事項 網(wǎng)頁交互設計中版式的許多小細節(jié)需要大家在工作中多多思考，這里也只是講了比較淺顯的部分，版式只是一個外在表現(xiàn)，其內核是一個有良好邏輯思維和貼切的用戶體驗的產(chǎn)品，由內而外去設計，才是正道。
這是一個很大的類別，我們在日常工作中，不同的崗位，不同的角色會有不同的理解。只有一直思考，一直學習，才能將它做好。