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

幾個(gè)詳情頁(yè)的例子

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

（某寶網(wǎng)頁(yè)）

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

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

再舉個(gè)栗子，就是項(xiàng)目管理軟件中某個(gè)項(xiàng)目的詳情。

（teambition）

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

詳情頁(yè)的入口

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

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

想象一下，一般用戶的瀏覽順序是從寬泛到具體，只有對(duì)某個(gè)對(duì)象的概況感興趣，才會(huì)點(diǎn)擊進(jìn)入詳情頁(yè)了解它的全部信息。比如我想買一件毛衣，首先會(huì)瀏覽毛衣相關(guān)的商品列表，覺(jué)得某件毛衣還不錯(cuò)后才會(huì)點(diǎn)擊查看詳情。

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

分塊

個(gè)人認(rèn)為分塊是詳情頁(yè)設(shè)計(jì)中最核心的思想。

首先為什么要分塊？

因?yàn)樵斍轫?yè)的特點(diǎn)就是包含的信息非常多樣，為了讓這些多樣的信息看起來(lái)更加有序，讓用戶能更方便的找到想要的信息，最好把同一類或者比較相關(guān)的的信息放在一起，把不同類的信息從視覺(jué)上區(qū)分開(kāi)，這樣信息就被分成了一塊一塊的了。在前邊的表單設(shè)計(jì)中也有提到過(guò)填寫信息時(shí)候要“分塊分步”，其實(shí)詳情頁(yè)顯示信息是一樣的。

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

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

突出重點(diǎn)

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

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

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

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

詳情+編輯

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

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

相關(guān)閱讀

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

2B產(chǎn)品設(shè)計(jì)套路二：表格頁(yè)設(shè)計(jì)

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

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