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