之前的兩篇文章，我們講了整體的系統頁面結構框架可以怎么搭建，講了首頁的設計思路，現在我們來講講詳情頁（詳細的功能、內容頁面）可以怎么設計，如果你準備好的話，那我們可以新的旅程啦。

詳情頁概述

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

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

內容區構成：

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

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

各個區域組合布局，根據實際業務需求和場景自由組合設計，常見的按鈕區根據用戶操作場景的前后順序會放在頂部或底部，內容區占大部分位置放于正中，其他的區塊（菜單區、查詢區等）可以放置于內容區左右也可以結合到按鈕區域。

展示樣式：展示樣式也是分成以下主要也是根據展示方式的不同分為：嵌入式、彈窗式、嵌入式、抽屜式。

【嵌入式】系統最常見的展示方式，直接在右側展示操作內容。

（1）嵌入式單列

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

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

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

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

常用于單獨的功能模塊以應用/面板的形式展現，打開后只可以在當前窗口完成所有操作或者退出操作。

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

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

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

參考案例：360安全衛士，彈窗展示對應的功能，常用于的場景是類似于360將一個個功能模塊作為應用進行分類、展示，用戶點擊后彈出改應用對應的操作頁面；

【抽屜式】從右側展開內容詳情，可以算是一種變異的彈窗樣式，可以方便用戶快速切換需要展示的內容，常用于列表和內容的結合。

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

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

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

基本上掌握上方三類基本樣式就可以自由組合成其他復雜樣式了。

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

內容樣式

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

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

表單_信息編輯

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

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

【圖文詳情】主展示展示圖文結合的信息內容（可以只有圖或者只有文字內容）

圖文詳情_信息閱讀

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

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

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

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

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

（2）數據圖表_多圖結合，多個圖表整合，可以根據需要展示數據的優先級進行個性化設計；（類似首頁_控制面板的圖表多圖結合的樣式）

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

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

（1）列表_表格

（2）列表_辦件列表，信息較多無法以表格的形式無法展示所有重要信息，所以需要整合信息內容，展示更多信息，操作便捷，但開發難度較大；（參考淘寶訂單中心）

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

（4）列表_圖文列表（卡片式），圖文為重要內容，需要突出展示，以卡片為展示樣式；

小結

本章主要講了內容區（詳情頁）相關的設計結構樣式以及功能分類的設計案例，因為篇幅有限，所以沒有很詳細的針對每種類型的使用場景，功能交互進行詳細的說明，請見諒。我所講的內容也只是一些基礎的設計案例，只是給大家做個參考，很多復雜的方案并沒有介紹，實際設計的時候還是需要大家根據產品/業務需求個性化的設計。希望這篇文章可以幫助大家快速入門，給大家一個設計時候可以參考的方式方法。

有很多講的不清楚、不到位的地方，請大家多多指教。

備注：文章中的截圖內容都來自網絡，如有侵權，請及時聯系我進行處理。

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

相關閱讀：

如何快速搭建系統原型（一）

如何快速搭建系統原型（二）：內容區（首頁）設計

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

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