如何快速搭建系統(tǒng)原型（一）

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

背景

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

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

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

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

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

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

系統(tǒng)名稱/logo

（1）說明

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

（2）交互

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

（3）案例

主導(dǎo)航

（1）說明

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

（2）交互

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

（3）案例

賬號(hào)信息

（1）說明

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

（2）交互

• 點(diǎn)擊跳轉(zhuǎn)到用戶中心

• 切換賬號(hào)

• 注銷/退出賬號(hào)

• 移入展開個(gè)人中心相關(guān)操作（個(gè)人信息、設(shè)置、賬號(hào)密碼……）

（3）案例

消息/工具

（1）說明

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

（2）交互

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

（3）案例

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

（1）說明

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

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

（2）案例

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

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

（1）左側(cè)導(dǎo)航（含標(biāo)簽欄，標(biāo)簽欄同掃瞄 器標(biāo)簽頁功能，方便用戶打開多個(gè)欄目頁面進(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)成和一些簡單的案例，教導(dǎo)了大家如何來搭建一個(gè)簡單的系統(tǒng)界面框架。詳細(xì)的制作一個(gè)首頁界面、詳細(xì)的界面內(nèi)容區(qū)域的功能模塊設(shè)計(jì)還需要更多細(xì)節(jié)，所以在下一節(jié)會(huì)介紹各類組件，包括首頁的面板和詳情頁的各類列表、彈窗、內(nèi)容的各類樣式等等，方便大家更好的了解系統(tǒng)原型搭建的方式。

小結(jié)

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