回顧一下上一篇中講到的：“我們可以通過數(shù)據(jù)統(tǒng)計、表格、詳情頁配合篩選、搜索實現(xiàn)查和顯的操作，達到從不同維度向用戶輸出的目的。從數(shù)據(jù)的概括/抽象程度角度看：數(shù)據(jù)統(tǒng)計>表格>詳情頁?！边@一篇就來繼續(xù)總結下詳情頁的設計。

幾個詳情頁的例子

相較前邊的表格和表單，詳情頁簡直是五花八門，可以是圖片、數(shù)據(jù)、表格、圖表各類元素的各種排列組合。詳情頁這個概念在電商系統(tǒng)中運用的比較多，每個商品介紹就是一個詳情頁。

（某寶網(wǎng)頁）

之前看到過一個栗子，舉得是財經(jīng)類網(wǎng)站中某只股票的詳情頁面，也比較具有代表性。

（某股票網(wǎng)頁）

再舉個栗子，就是項目管理軟件中某個項目的詳情。

（teambition）

以上這些頁面都差別很大，所以相對的設計時候的套路就少很多，但我們?nèi)匀豢梢钥偨Y出一些共性~

詳情頁的入口

詳情頁內(nèi)容較多，通常需要單獨的一個頁面/彈窗來承載，所以打開它就需要一個入口。

這個入口很大幾率是在表格頁中的。為什么呢？

想象一下，一般用戶的瀏覽順序是從寬泛到具體，只有對某個對象的概況感興趣，才會點擊進入詳情頁了解它的全部信息。比如我想買一件毛衣，首先會瀏覽毛衣相關的商品列表，覺得某件毛衣還不錯后才會點擊查看詳情。

B端系統(tǒng)中最常見的是通過按鈕，或者直接點擊名稱/標題進入詳情頁的；有些列表中，信息是以卡片化的形式展現(xiàn)的，點擊卡片也可以進入詳情頁；還有些內(nèi)容比較少的詳情頁是以彈窗、折疊面板等形式展現(xiàn)的。

分塊

個人認為分塊是詳情頁設計中最核心的思想。

首先為什么要分塊？

因為詳情頁的特點就是包含的信息非常多樣，為了讓這些多樣的信息看起來更加有序，讓用戶能更方便的找到想要的信息，最好把同一類或者比較相關的的信息放在一起，把不同類的信息從視覺上區(qū)分開，這樣信息就被分成了一塊一塊的了。在前邊的表單設計中也有提到過填寫信息時候要“分塊分步”，其實詳情頁顯示信息是一樣的。

還是舉資產(chǎn)的例子，資產(chǎn)的屬性進過歸類后分為基本信息、使用信息、采購信息、折舊信息四類。詳情頁中顯示的時候也是分為四塊來顯示，這樣看起來就一目了然了。

如果每一類的內(nèi)容很多，可以采用tab分頁的形式。比如上邊提到的某項目管理軟件中，一個項目下分別有“任務”、“分享”、“文件”、“群聊”……多個模塊，每個模塊都是較為復雜的功能，所以采用tab分頁，可以靈活的在這幾個模塊間切換。

突出重點

也是由于詳情頁內(nèi)容繁雜，除了分塊之外，最好把用戶最關心的內(nèi)容放到最顯眼的地方?！帮@眼”可以通過元素的位置、大小、顏色等來實現(xiàn)，這是更偏重UI設計的范疇了，我就不展開啦

舉個栗子吧，用戶第一次打開某股票的詳情頁，很容易不知所措，因為內(nèi)容實在太多了。一眼望過去最顯眼的信息一是股票名稱、二是當前的價格，這也是這個頁面中最最重要的信息，還有圖表信息也在一堆文字中脫穎而出。

基于分塊+突出重點的思路，一直用來舉栗子的資產(chǎn)詳情頁也可以優(yōu)化下?，F(xiàn)在是這樣的：

把用戶最關心的信息（資產(chǎn)名稱、位置、使用人）和直觀的資產(chǎn)照片放在最頂端，大概是這樣的：

詳情+編輯

在“編輯”功能比較低頻的時候，我會把“編輯”直接放在詳情頁而不是放在表格頁里。有些字段本身在表格中沒有顯示，要想編輯肯定要先進詳情頁查看，所以把“編輯”直接放在詳情頁也符合用戶的操作流程。

這樣做的好處是在表格頁中可以給更高頻的操作留出空間，壞處是“編輯”的入口比較深。

相關閱讀

2B產(chǎn)品設計套路一：表單設計

2B產(chǎn)品設計套路二：表格頁設計

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

題圖來自Unsplash，基于CC0協(xié)議。