2023-5-7 博博
看完本篇文章，你會(huì)學(xué)到以下內(nèi)容：
1、什么是詳情頁(yè)
2、詳情頁(yè)設(shè)計(jì)原則
3、詳情頁(yè)的構(gòu)成
4、詳情頁(yè)設(shè)計(jì)要點(diǎn)拆解
一、什么是詳情頁(yè)？
詳情頁(yè)向用戶展示一個(gè)對(duì)象的完整信息，主要用于信息瀏覽，允許對(duì)該對(duì)象發(fā)起編輯等操作。如電商的訂單詳情，OA的審批詳情等等。
二、詳情頁(yè)設(shè)計(jì)原則？
1、直接了當(dāng)
信息盡量平鋪展示，如沒有必要不要做隱藏折疊。
2、層次分明
按照接近原則，對(duì)信息分層分組展示，降低單個(gè)頁(yè)面內(nèi)信息復(fù)雜度。
3、化繁為簡(jiǎn)
減少?gòu)?fù)雜結(jié)構(gòu)的使用，盡量使用相似的結(jié)構(gòu)和模塊，降低結(jié)構(gòu)差異對(duì)用戶進(jìn)行干擾，讓用戶聚焦信息本身。
三、詳情頁(yè)構(gòu)成
詳情頁(yè)由標(biāo)題、標(biāo)簽頁(yè)、圖片、文字詳情、按鈕、可視化、列表、表格、篩選、數(shù)據(jù)統(tǒng)計(jì)、進(jìn)度軸、標(biāo)簽構(gòu)成
詳情頁(yè)的特點(diǎn)：1、內(nèi)容雜，什么元素/模塊都可能出現(xiàn)。2、布局多，布局沒有套路，核心是做好內(nèi)容分塊和視覺引導(dǎo)。3、差異大，頁(yè)面與頁(yè)面巨大差異
四、詳情頁(yè)設(shè)計(jì)要點(diǎn)拆解
1.容器
由內(nèi)容由少到多劃分為原位展開、氣泡卡片、彈窗、抽屜、頁(yè)面。能優(yōu)先滿足內(nèi)容收納的同時(shí)，容易盡可能輕量。
2.布局
根據(jù)內(nèi)容從簡(jiǎn)單到復(fù)雜可分為基礎(chǔ)樣式、標(biāo)題分組、色塊/分割線/卡片分組、錨點(diǎn)定位/標(biāo)簽頁(yè)、自由布局。核心是做好內(nèi)容分區(qū)、視覺引導(dǎo)符合用戶操作習(xí)慣。
布局注意事項(xiàng)：把用戶最關(guān)心的內(nèi)容放在最顯眼的地方
3.交互操作
交互操作可分為編輯（原位/氣泡/彈窗/頁(yè)面），查看詳情（內(nèi)容不多的話可以少用頁(yè)面容器，減少套娃），業(yè)務(wù)操作（層級(jí)清晰，符合用戶操作習(xí)慣）。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.chinatradebeam.com