本文是我對(duì)現(xiàn)階段學(xué)習(xí)和接觸到的系統(tǒng)項(xiàng)目總結(jié)，將系統(tǒng)界面各部分模塊化/組件化，編寫(xiě)了系統(tǒng)通用交互方案，旨在幫助交互設(shè)計(jì)師、項(xiàng)目經(jīng)理通過(guò)通用方案可以根據(jù)項(xiàng)目需求快速搭建合適的系統(tǒng)界面。

背景

最近負(fù)責(zé)了多個(gè)系統(tǒng)的交互設(shè)計(jì)工作，在設(shè)計(jì)的過(guò)程中遇到了一些問(wèn)題：界面布局應(yīng)該怎么設(shè)計(jì)，這個(gè)功能怎么放，首頁(yè)要放什么內(nèi)容、這邊放這些功能合適嗎、彈窗展示是否合適……設(shè)計(jì)好了又發(fā)現(xiàn)需要個(gè)性化，開(kāi)發(fā)成本較高，標(biāo)準(zhǔn)版不支持。

所以，我想有沒(méi)有一套方案，可以幫助我，幫助設(shè)計(jì)師、項(xiàng)目經(jīng)理快速的搭建系統(tǒng)的原型方案；也可以后續(xù)運(yùn)用到標(biāo)準(zhǔn)版的迭代中。我們交互設(shè)計(jì)制作原型經(jīng)常會(huì)使用Axure 中的組件（元件）通過(guò)組合成為各類(lèi)產(chǎn)品原型，那么是不是我可以通過(guò)分析結(jié)構(gòu)系統(tǒng)的界面設(shè)計(jì)，將系統(tǒng)各個(gè)功能模塊分解出來(lái)，作為一個(gè)元件來(lái)呈現(xiàn)，然后用這些元件來(lái)搭建各類(lèi)系統(tǒng)。只要改變?cè)笮?、元件布局、交互?xì)節(jié)就可以做出各種個(gè)性化同時(shí)適合客戶(hù)需求的系統(tǒng)原型了。

界面結(jié)構(gòu)

本文只是對(duì)常規(guī)系統(tǒng)作分析，一些很個(gè)性化程度很高的系統(tǒng)（例如視頻監(jiān)控、大數(shù)據(jù)展示系統(tǒng)等）不做具體的分析和介紹。

首先，以百度云盤(pán)為例，我們可以看到一個(gè)系統(tǒng)頁(yè)面根據(jù)不同的功能作用分為以下模塊：系統(tǒng)名稱(chēng)/logo、主導(dǎo)航、賬號(hào)信息、消息/工具、內(nèi)容區(qū)等功能區(qū)域；

接下來(lái)，我會(huì)總結(jié)這些模塊的主要功能作用和常用交互方式，并介紹一些設(shè)計(jì)案例，并整理成原型組件，后續(xù)通過(guò)這些組件就可以搭建你想要的系統(tǒng)界面了。

系統(tǒng)名稱(chēng)/logo

（1）說(shuō)明

一般位于界面左上角，標(biāo)識(shí)系統(tǒng)的名稱(chēng)和logo，也有加上sloga或結(jié)合背景圖片來(lái)凸顯系統(tǒng)特性的。

（2）交互

點(diǎn)擊logo區(qū)域返回到系統(tǒng)首頁(yè)。

（3）案例

主導(dǎo)航

（1）說(shuō)明

主導(dǎo)航作為系統(tǒng)模塊或者功能導(dǎo)航，從用戶(hù)的瀏覽習(xí)慣視線(xiàn)從左往右和從上往下，所以主導(dǎo)航常放在左側(cè)和頂部，所以根據(jù)導(dǎo)航位置我把系統(tǒng)常用框架分為兩類(lèi)：左側(cè)導(dǎo)航布局、頂部導(dǎo)航布局（具體的樣式介紹放到最后的框架綜述）。

（2）交互

點(diǎn)擊跳轉(zhuǎn)到對(duì)應(yīng)的導(dǎo)航模塊，也可以點(diǎn)擊展開(kāi)多級(jí)欄目。

（3）案例

賬號(hào)信息

（1）說(shuō)明

用戶(hù)登錄賬號(hào)相關(guān)信息

（2）交互

• 點(diǎn)擊跳轉(zhuǎn)到用戶(hù)中心
• 切換賬號(hào)
• 注銷(xiāo)/退出賬號(hào)
• 移入展開(kāi)個(gè)人中心相關(guān)操作（個(gè)人信息、設(shè)置、賬號(hào)密碼……）

（3）案例

消息/工具

（1）說(shuō)明

主要展示系統(tǒng)的常用工具，包括搜索、消息、注銷(xiāo)/退出、幫助等等功能，常以圖標(biāo)或者文字的形式展現(xiàn)；這些功能放置的位置和和賬號(hào)信息結(jié)合穿插排布在頂部。

（2）交互

根據(jù)不同的功能有對(duì)應(yīng)不同的交互方式，例如搜索可輸入，點(diǎn)擊查詢(xún)搜索結(jié)果，注銷(xiāo)點(diǎn)擊后退出系統(tǒng)返回登錄頁(yè)面……

（3）案例

內(nèi)容區(qū)

（1）說(shuō)明

主要分為首頁(yè)和詳情頁(yè)面，首頁(yè)或者叫控制面板（dashboard）主要是各類(lèi)組件（數(shù)據(jù)、列表、表單等等）相互組合而成，就是將系統(tǒng)最主要的功能優(yōu)先在首頁(yè)有個(gè)快速展示也作為快捷入口；詳情頁(yè)對(duì)應(yīng)的是各個(gè)模塊的功能操作頁(yè)面，具體需要根據(jù)不同的欄目需求來(lái)設(shè)計(jì)。

（內(nèi)容區(qū)的內(nèi)容和系統(tǒng)需求相關(guān)，會(huì)在后續(xù)章節(jié)中對(duì)內(nèi)容區(qū)進(jìn)行總結(jié)分析）

（2）案例

OK，那簡(jiǎn)單介紹了系統(tǒng)界面的幾個(gè)組成部分，那么我們現(xiàn)在就是通過(guò)這個(gè)部分不同的組合就可以組成各種各樣個(gè)性化的系統(tǒng)框架樣式了。因?yàn)橹鲗?dǎo)航欄是最主要的功能模塊，所以我又分為兩類(lèi)：左側(cè)導(dǎo)航、頂部導(dǎo)航。

左側(cè)導(dǎo)航：最常見(jiàn)，現(xiàn)在最流行的導(dǎo)航位置設(shè)計(jì)方案

（1）左側(cè)導(dǎo)航（含標(biāo)簽欄，標(biāo)簽欄同瀏覽器標(biāo)簽頁(yè)功能，方便用戶(hù)打開(kāi)多個(gè)欄目頁(yè)面進(jìn)行切換）

（2）左側(cè)導(dǎo)航（主導(dǎo)航整合賬號(hào)信息）

（3）左側(cè)導(dǎo)航（導(dǎo)航和內(nèi)容區(qū)同步滾動(dòng)）

（4）左側(cè)導(dǎo)航（右側(cè)全部是內(nèi)容，適用于導(dǎo)航、工具較少的情況）

頂部導(dǎo)航

頂部導(dǎo)航常用于網(wǎng)站導(dǎo)航的設(shè)計(jì)，系統(tǒng)中如果主導(dǎo)航的模塊較少也可以放在頂部，提高空間利用率。

（1）頂部導(dǎo)航

（2）頂部導(dǎo)航（單獨(dú)導(dǎo)航欄）

以上是一些系統(tǒng)界面布局樣式，但是界面布局不限于這些結(jié)構(gòu)，你可以設(shè)計(jì)的時(shí)候可以模塊組件自由搭配，組件間不一定要區(qū)分的很明顯，組成適合你的項(xiàng)目的系統(tǒng)界面框架。

這次只是介紹了框架的構(gòu)成和一些簡(jiǎn)單的案例，教導(dǎo)了大家如何來(lái)搭建一個(gè)簡(jiǎn)單的系統(tǒng)界面框架。詳細(xì)的制作一個(gè)首頁(yè)界面、詳細(xì)的界面內(nèi)容區(qū)域的功能模塊設(shè)計(jì)還需要更多細(xì)節(jié)，所以在下一節(jié)會(huì)介紹各類(lèi)組件，包括首頁(yè)的面板和詳情頁(yè)的各類(lèi)列表、彈窗、內(nèi)容的各類(lèi)樣式等等，方便大家更好的了解系統(tǒng)原型搭建的方式。

小結(jié)

作為一個(gè)正式作為交互設(shè)計(jì)師一年多的菜鳥(niǎo)來(lái)說(shuō)，第一次編輯這種分享類(lèi)的文檔。沒(méi)接受過(guò)系統(tǒng)的專(zhuān)業(yè)的學(xué)習(xí)，所有學(xué)到的知識(shí)都是來(lái)源于各種產(chǎn)品設(shè)計(jì)類(lèi)相關(guān)的網(wǎng)站分享的文章。所以，第一次分享更多的還是報(bào)著學(xué)習(xí)的目的，邏輯話(huà)術(shù)上肯定還有很多問(wèn)題，分析的也很片面，講的也很啰嗦，所以如果本文有各種問(wèn)題，請(qǐng)各位童鞋不吝指出，謝謝。

后續(xù)還會(huì)一直分享自己的設(shè)計(jì)心得的，會(huì)一直堅(jiān)持寫(xiě)下去的。

原型演示地址：http://1q779b.axshare.com

備注：

文章是我的不專(zhuān)業(yè)總結(jié)，如有遺漏和疏忽請(qǐng)?jiān)谠u(píng)論區(qū)指出；

文章中部分界面截圖內(nèi)容來(lái)自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)及時(shí)聯(lián)系我進(jìn)行處理。

作者：Tom王，菜鳥(niǎo)交互設(shè)計(jì)師一枚，2年未滿(mǎn)的產(chǎn)品交互設(shè)計(jì)經(jīng)驗(yàn)，2年電商APP運(yùn)營(yíng)經(jīng)驗(yàn)。

本文由 @Tom王 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。