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

背景

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

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

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

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

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

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

系統(tǒng)名稱/logo

（1）說明

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

（2）交互

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

（3）案例

主導航

（1）說明

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

（2）交互

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

（3）案例

賬號信息

（1）說明

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

（2）交互

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

（3）案例

消息/工具

（1）說明

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

（2）交互

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

（3）案例

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

（1）說明

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

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

（2）案例

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

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

（1）左側(cè)導航（含標簽欄，標簽欄同瀏覽器標簽頁功能，方便用戶打開多個欄目頁面進行切換）

（2）左側(cè)導航（主導航整合賬號信息）

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

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

頂部導航

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

（1）頂部導航

（2）頂部導航（單獨導航欄）

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

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

小結(jié)

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

后續(xù)還會一直分享自己的設(shè)計心得的，會一直堅持寫下去的。

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

備注：

文章是我的不專業(yè)總結(jié)，如有遺漏和疏忽請在評論區(qū)指出；

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

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

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