如何快速搭建系統原型

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

背景

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

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

界面結構

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

首先，以百度雲盤爲例，咱們能夠看到一個系統頁面根據不一樣的功能做用分爲如下模塊：系統名稱/logo、主導航、帳號信息、消息/工具、內容區等功能區域；框架

接下來，我會總結這些模塊的主要功能做用和經常使用交互方式，並介紹一些設計案例，並整理成原型組件，後續經過這些組件就能夠搭建你想要的系統界面了。編輯器

系統名稱/logo

（1）說明模塊化

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

（2）交互工具

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

（3）案例

主導航

（1）說明

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

（2）交互

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

（3）案例

帳號信息

（1）說明

用戶登陸帳號相關信息

（2）交互

點擊跳轉到用戶中心
切換帳號
註銷/退出帳號
移入展開我的中心相關操做（我的信息、設置、帳號密碼……）

（3）案例

消息/工具

（1）說明

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

（2）交互

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

（3）案例

內容區

（1）說明

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

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

（2）案例

OK，那簡單介紹了系統界面的幾個組成部分，那麼咱們如今就是經過這個部分不一樣的組合就能夠組成各類各樣個性化的系統框架樣式了。由於主導航欄是最主要的功能模塊，因此我又分爲兩類：左側導航、頂部導航。

左側導航：最多見，如今最流行的導航位置設計方案

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

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

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

（4）左側導航（右側所有是內容，適用於導航、工具較少的狀況）

頂部導航

頂部導航經常使用於網站導航的設計，系統中若是主導航的模塊較少也能夠放在頂部，提升空間利用率。

（1）頂部導航

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

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

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

上篇文章介紹了系統總體框架的結構，以及相關案例，主要是針對系統的外層框架佈局，那麼今天這篇文章就要介紹系統正文內容區怎麼來分析和設計的，對不一樣的內容分類，介紹參考案例以及各類類型的內容適用於何種場景。

內容區分類

內容區域指的是正文內容區域（以下圖），根據該區域不一樣的使用場景和做用我分爲了首頁和詳情頁兩大類。首頁通常是指系統首頁或者模塊首頁，常須要個性化設計；詳情頁通常是查看/操做頁面，常以列表、表單、信息詳情的形式展示。接下來首先介紹首頁的設計思路。

首頁（控制面板）

我再瀏覽系統交互案例的時候看了不少外國系統動效，發現他們都把首頁都叫作「控制面板」（dashboard）。我理解做爲一個控制面板，首頁的做用就是控制整個系統，控制系統中全部的欄目/模塊，那麼首頁就是由控制這些模塊的「面板」組織而成。以下圖：

那其實咱們要設計首頁，就是把系統各個子模塊簡化成一個個小面板，再按照模塊的優先級等原則進行佈局展現就好了。是否是感受設計首頁很簡單，那麼真正的難度在於不一樣的系統不一樣的功能模塊咱們怎麼把這些模塊簡化成一個個面板。我將這些面板分爲四種類型：信息、表格、圖表、表單：

信息：展現信息，又能夠分爲列表信息、詳細信息、人員信息、消息等

列表信息：展現多條列表信息，經常使用於新聞信息列表、排行、文章標題列表等。

詳細信息：經常使用於文章詳情或單獨的圖文詳情信息。

人員信息：經常使用於展現帳號信息。

消息：經常使用於展現短信消息或者人員留言等信息；

表格：以表格的形式組織整理信息/數據的展示方式

根據其樣式功能的不一樣又能夠細分爲基礎表格、可操做表格和個性化表格。

基礎表格：只作信息/數據展現

可操做表格，能夠對錶格進行編輯、刪除、新增、排序等操做。

個性化表格：在基礎表格的基礎上將數據圖表、操做功能等內容相互結合作成個性化表格。

圖表：數據統計信息的圖形化展現，經常使用於對於系統或者模塊整體信息的綜述展現

大部分有系統數據統計的網站會在首頁將一部分重要數據信息以圖表的形式進行展現。分爲：數據綜述、數據圖表、個性化。

數據綜述：經常使用在界面首屏，展現系統/模塊最終要的數據統計信息；

數據圖表，以圖表的形式展示展現；（圖表可參考echart）

個性化，多個圖表整合

表單表單：在網頁中主要負責數據採集功能，由表單標籤、表單域、表單按鈕組成

本章介紹：基本表單、嚮導表單、編輯器。

基本表單，基本的數據輸入等操做，經常使用於登陸、設置、信息輸入等場景。

嚮導表單：多步驟的處理表單，經常使用於註冊、辦件等複雜流程中，提高交互的效率。

編輯器，圖文編輯器，經常使用於信息發佈、回覆帖子等場景

總結

以上就是首頁（控制面板）的介紹，此處只是提供一些常規面板的設計方案，你可使用這些面板，調整面板大小、信息、位置自由組成你所須要的首頁。固然本文只是介紹了總結了我本身在設計設計時的基本思路對系統首頁元素的解構，能夠給大家做爲參考，真正設計系統首頁的時候還須要設計師根據實際業務需求來進行分析和個性化設計。

以前的兩篇文章，咱們講了總體的系統頁面結構框架能夠怎麼搭建，講了首頁的設計思路，如今咱們來說講詳情頁（詳細的功能、內容頁面）能夠怎麼設計，若是你準備好的話，那咱們能夠新的旅程啦。

詳情頁概述

上一章節，咱們講到正文內容區域若是是首頁的時候該怎麼設計，同時簡單介紹了一下詳情頁：詳情頁通常是查看/操做頁面，常以列表、表單、信息詳情的形式展示。下面我來來詳細的介紹內容詳情頁的設計思路，首先咱們先要了解下內容區的構成和基本展示形式。

首頁（控制面板）詳情頁結構

內容區構成：

一個基礎的詳情頁面基本上是以兩類區域構成的，包括操做按鈕區和內容展現區：

其中，內容展現區能夠是表單（信息填寫、修改……），也能夠是圖文詳情或者數據圖表。擴展到出來也能夠根據業務需求、頁面規劃的不一樣，擴充出菜單區、查詢區等其餘功能區域。

各個區域組合佈局，根據實際業務需求和場景自由組合設計，常見的按鈕區根據用戶操做場景的先後順序會放在頂部或底部，內容區佔大部分位置放於正中，其餘的區塊（菜單區、查詢區等）能夠放置於內容區左右也能夠結合到按鈕區域。

展現樣式：展現樣式也是分紅如下主要也是根據展現方式的不一樣分爲：嵌入式、彈窗式、嵌入式、抽屜式。

【嵌入式】系統最多見的展現方式，直接在右側展現操做內容。

（1）嵌入式單列

參考案例：框框區域爲內容區（詳情頁）

（2）嵌入式_雙列，左右兩列的比例可根據功能的須要在設計是進行調整

參考案例：紅框區域分爲左側列表區、操做按鈕區和右側內容區；

【彈窗式】以彈窗口的形式展現，可帶底部遮罩。

經常使用於單獨的功能模塊以應用/面板的形式展示，打開後只能夠在當前窗口完成全部操做或者退出操做。

（1）彈窗式_有遮罩，彈窗通常不能夠放大縮小和移動，引導用戶要麼在彈窗中完相應的操做，要麼就關閉退出該功能對應的詳情頁彈窗。

參考案例：QQ空間查看圖片。

（2）彈窗式_無遮罩：彈窗無底部遮罩，通常能夠移動放大縮小，能夠同時打開多個窗口，可在多個窗口中切換。(相似於win系統中的文件夾，或者瀏覽器的標籤頁、qq對話彈窗）

參考案例：360安全衛士，彈窗展現對應的功能，經常使用於的場景是相似於360將一個個功能模塊做爲應用進行分類、展現，用戶點擊後彈出改應用對應的操做頁面；

【抽屜式】從右側展開內容詳情，能夠算是一種變異的彈窗樣式，能夠方便用戶快速切換須要展現的內容，經常使用於列表和內容的結合。

案例：點擊左側列表，選項對應的內容從系統右側展開展現，用戶能夠在左側列表快速切換右側展現的內容。

【其餘樣式】介紹一些比較特殊/複雜的內容詳情頁，能夠是內容區展現信息比較特殊，也能夠是內容區包含的功能區塊相互組合而成。

案例：微信公衆平臺編輯頁面

基本上掌握上方三類基本樣式就能夠自由組合成其餘複雜樣式了。

上面講了基本的內容結構和基本的幾種展示形式，下面根據功能再對內容不一樣在對內容樣式進行分類介紹。

內容樣式

詳情頁主要應用於次級模塊頁面、功能頁面以及後續系統的全部子頁面，如今我更準確的把詳情頁再分紅如下幾個大類：列表、表單、圖文詳情、數據圖表。列表是最爲常見的內容，包含的操做功能交互也會比較多；表單主要是信息填寫/保存/修改操做的功能頁；圖文詳情經常使用於文章（新聞）/文件詳情頁的展現；最後數據圖表是以圖表的形式展示系統數據，能夠和上一節介紹的控制面板相似，以數據圖面板組合成詳情頁。

【表單】經常使用戶採集信息數據，適用於新增、修改、編輯、設置等功能應用場景

表單_信息編輯

表單_郵件編輯（參考網易、qq郵箱）

表單_新增，具體展現那些表單組件和這些組件的佈局須要你根據實際的需求進行個性化設計；

【圖文詳情】主展現展現圖文結合的信息內容（能夠只有圖或者只有文字內容）

圖文詳情_信息閱讀

圖文詳情_內容+列表（郵件回覆）

圖文詳情_彈窗（無遮罩）

【數據圖表】數據圖表是比較複雜的場景，由於不一樣的業務數據不一樣，對應適合的圖表也不一樣個性化程度較高，這邊簡單介紹一些參考示例。

（1）數據圖表_數據綜述+數據詳情，比較常見的設計方式，先對總體數據進行綜合展現，再展現對應的數據列表信息。

參考案例：微信公衆平臺用戶分析

（2）數據圖表_多圖結合，多個圖表整合，能夠根據須要展現數據的優先級進行個性化設計；（相似首頁_控制面板的圖表多圖結合的樣式）

【列表】列表是最多見的內容區樣式，將模塊內容所包含的信息以列表的形式展示

方便用戶瀏覽和操做，主要用戶此模塊是對數據的編輯操做或者是數據展現；

（1）列表_表格

（2）列表_辦件列表，信息較多沒法以表格的形式沒法展現全部重要信息，因此須要整合信息內容，展現更多信息，操做便捷，但開發難度較大；（參考淘寶訂單中心）

（3）列表_信息，展現圖文信息列表；

（4）列表_圖文列表（卡片式），圖文爲重要內容，須要突出展現，以卡片爲展現樣式；

小結

本章主要講了內容區（詳情頁）相關的設計結構樣式以及功能分類的設計案例，由於篇幅有限，因此沒有很詳細的針對每種類型的使用場景，功能交互進行詳細的說明，請見諒。我所講的內容也只是一些基礎的設計案例，只是給你們作個參考，不少複雜的方案並無介紹，實際設計的時候仍是須要你們根據產品/業務需求個性化的設計。但願這篇文章能夠幫助你們快速入門，給你們一個設計時候能夠參考的方式方法。

http://1q779b.axshare.com

經過前三篇內容，咱們瞭解了系統的結構框架和內容區域的設計思路，基本上已經能夠搭建一個完整的網站原型了。那麼接下來的這章就主要是介紹一些組件的設計，以便擴充咱們的武器庫，讓咱們搭建的系統細節上更加完善、展現效果上更加多樣化。

彈窗窗口

彈窗是系統經常使用的一種展現內容的方式，在網頁、軟件、系統、APP都是很是常見的。我以爲彈窗更多的是一種容器，用戶來盛放內容，這和我上兩章提到的內容的「彈窗式」展現樣式是一致的。那這邊單獨將彈窗做爲一種組件進行介紹，是由於彈窗做爲一種最多見的展示方式，可是在結合到不一樣的場景、針對不一樣目的會有不少種不一樣的彈窗形式，因此這邊對彈窗進行了整理和說明。

【彈窗結構】彈窗主要分爲彈窗控制區和內容區兩個部分組成。

彈窗控制區：展現彈窗對應的內容名稱，控制彈窗的變化（放大、縮小、關閉等）；
內容區：展現內容信息，常見爲表單、列表、詳情等形式，和上章介紹的內容區（詳情頁）樣式基本一致；

彈窗交互

介紹系統中常見的彈窗交互：

（1）彈窗交互-打開方式

居中打開：常規的彈窗是在界面正中間展開；

底部展開：爲了避免影響用戶目前的操做，常見系統消息、新聞提示等彈窗會在界面右下方打開；

抽屜式：從側邊展開彈窗；

懸浮（位置不固定）：彈窗打開位置不固定，主要是表現了彈窗內容和用戶操做內容的聯繫性；，通常彈窗內信息量較少；

（2）彈窗交互-控制動做

默認大小：窗口的默認尺寸大小，應貼合所要展現的內容進行調整，即寬度/高度不指定，通常有底部遮罩的彈
窗是不能進行移動放大和縮小操做的；

最大化：

最小化：點擊作小到標籤欄或者有一個最小化懸浮窗口；

拖動：鼠標左鍵長按窗口頂部控制區域進行拖動，通常能夠拖動的彈窗是沒有底部遮罩

其餘：根據業務需求能夠有刷新、上下翻頁等功能；

彈窗分類

根據彈窗的不一樣功能和使用場景，能夠分紅如下幾種彈窗：

【引導彈窗】主要是用於介紹界面相關信息功能，引導用戶操做；
【選擇彈窗】主要是進行選擇操做，包括人員、圖片、項目等；
【任務彈窗】完成某項任務，包含新增/修改、註冊、事項流程等；
【提示彈窗】用戶提示用戶，包括操做確認、信息提示/反饋等；
【內容彈窗】彈窗展現內容信息，主要用戶內容查看；

（1）引導彈窗

【樣式說明】：經常使用於首頁進入系統或者某個功能模塊，對當前界面的介紹以及操做引導幫助用戶儘快熟悉使用方法。
【適用場景】：新手引導、操做引導、系統介紹…

（2）選擇彈窗

【樣式說明】：經常使用於進行選擇的頁面，由於只須要進行一次選擇操做因此爲保持先後頁面的聯繫，用彈窗展現會更好；
【適用場景】：人員選擇、圖片選擇、操做方式（支付方式）選擇、分類（用戶類型）選擇等；

（3）任務彈窗

【樣式說明】：用戶完成某些任務，單獨用彈窗展現會更高效；
【適用場景】：辦事（流程）彈窗、編輯、設置、登陸/註冊…

（4）提示彈窗

【樣式說明】：此類彈出窗只用於告知用戶某些須要強制確認、提示的信息（報錯類提醒中，支持查看錯誤信息）,並須要用戶作出相應的決定操做；

【適用場景】：

對頁面中一些操做重要度較高的再確認，如是否刪除？是否放棄保存？
【提示信息】提示一些說明性質的信息；
【警告信息】系統可預知的客戶錯誤操做提示，錯誤級別低；
【錯誤信息】因不可預知的緣由引發的操做失敗提示，通常在異常捕獲後提示；
【成功信息】用戶操做完成併成功後提示。

（5）內容彈窗

和上一章內容詳情頁設計保持一致，這裏就再也不作過多介紹了。

其餘組件

下面就介紹下其餘經常使用的組件，根據不一樣的功能和使用場景咱們能夠分爲：

【分頁】主要用戶頁碼切換，經常使用於列表頁面；
【附件】用於上傳附件操做；
【信息回覆】對內容的評論和信息反饋，消息回覆等組件；
【其餘】各類數據圖表、天氣等個性化組件；

分頁組件

附件管理

信息回覆

其餘組件

小結

這章主要是介紹了我本身整理一些系統中經常使用的組件設計案例，由於是我本身的整理和分類，因此其實這些組件還有更多的內容和更加專業的分類方式，並且組件的樣式和交互方式其實還有不少不少，每個類型均可以擴展起來詳細介紹。這裏沒有作過多的介紹，只是但願整理的這些內容對你們的設計有一些啓發和指導意義。

後記

基本上整個系統原型快速搭建的方案已經講完了，這是我去年就編輯好的，後來由於工做緣由本身也忘記了繼續更新分享。今年定的一個目標就是要更多的總結和整理本身工做中學習到的內容，纔想起來本身原來還有這個分享沒有完成。回頭來看本身以前的整理仍是有不少欠缺的地方的，從系統框架上本身只整理了一些經常使用的佈局方式，還有一些個性化的設計內容能夠擴展，不少內容的整理分佈佈局都有些問題，也有更多更好的設計交互案例沒有給你們整理分享，不少內容也是和同事一塊兒整理的，沒有什麼專業性，還存在着不少問題。那今年還會對這篇內容從新進行整理迭代，但願到時候有更好的內容分享給你們。