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

背景

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

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

界面結構

本文只是對常規系統作分析，一些很個性化程度很高的系統（例如視頻監控、大數據展示系統等）不做具體的分析和介紹。

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

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

系統名稱/logo

（1）說明

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

（2）交互

點擊logo區域返回到系統首頁。

（3）案例

主導航

（1）說明

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

（2）交互

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

（3）案例

賬號信息

（1）說明

用戶登錄賬號相關信息

（2）交互

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

（3）案例

消息/工具

（1）說明

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

（2）交互

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

（3）案例

內容區

（1）說明

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

（內容區的內容和系統需求相關，會在后續章節中對內容區進行總結分析）

（2）案例

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

左側導航：最常見，現在最流行的導航位置設計方案

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

（2）左側導航（主導航整合賬號信息）

（3）左側導航（導航和內容區同步滾動）

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

頂部導航

頂部導航常用于網站導航的設計，系統中如果主導航的模塊較少也可以放在頂部，提高空間利用率。

（1）頂部導航

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

以上是一些系統界面布局樣式，但是界面布局不限于這些結構，你可以設計的時候可以模塊組件自由搭配，組件間不一定要區分的很明顯，組成適合你的項目的系統界面框架。

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

小結

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

后續還會一直分享自己的設計心得的，會一直堅持寫下去的。

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

備注：

文章是我的不專業總結，如有遺漏和疏忽請在評論區指出；

文章中部分界面截圖內容來自網絡，如有侵權，請及時聯系我進行處理。

作者：Tom王，菜鳥交互設計師一枚，2年未滿的產品交互設計經驗，2年電商APP運營經驗。

本文由 @Tom王 原創發布于人人都是產品經理。未經許可，禁止轉載。