2B產(chǎn)品設計套路三:詳情頁設計
回顧一下上一篇中講到的:“我們可以通過數(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)照片放在最頂端,大概是這樣的:
詳情+編輯
在“編輯”功能比較低頻的時候,我會把“編輯”直接放在詳情頁而不是放在表格頁里。有些字段本身在表格中沒有顯示,要想編輯肯定要先進詳情頁查看,所以把“編輯”直接放在詳情頁也符合用戶的操作流程。
這樣做的好處是在表格頁中可以給更高頻的操作留出空間,壞處是“編輯”的入口比較深。
相關閱讀
本文由 @LCC 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉載。
題圖來自Unsplash,基于CC0協(xié)議。
- 目前還沒評論,等你發(fā)揮!