本文作者在對一個電商系統進行系統重構的過程中，發現存在着一些問題，導緻各個後台系統的用戶體驗不統一，與業内優秀的電商系統差距較大。于是決定使用Ant Design Vue這套框架對現有系統再進行一次優化，本文講述了這之中詳情頁的設計規範，一起來看一下吧。

2016年，我進入一家中型跨境電商公司，開始負責整體電商系統的系統重構産品工作，将原本一套開源的電商系統架構重構解耦成顆粒度更小、松耦合的分布式微服務系統架構，因為原本的系統架構在性能、效率、體驗上已經遠遠不能滿足公司的成長速度。

整體系統架構包含類目系統、商品系統、庫存系統、促銷系統、訂單系統、售後系統、會員系統、财務系統、CMS系統、CPS系統等等。

2019年，全部重構完成。整個過程，就像給一個高速行駛的汽車換輪胎。

重構過程中産生了一些遺留問題：

1. 更關注業務、架構、流程、功能、邏輯，對視覺、交互、體驗關注較少。重構中前端開發資源投入較少，所有後台系統均由後端開發直接渲染頁面。
2. 後台系統太多，不同産品經理工作習慣、交互能力、審美水平各不一樣，各自負責的後台系統用戶體驗不統一。
3. 所有後台系統雖然都是用Bootstrap這套前端框架，但是Bootstrap組件用法非常多，導緻不同産品經理在實踐時存在差别。
4. 所有模塊的重構産品方案，我雖然都有評審，但是評審時更關注流程、功能、邏輯，對視覺、交互沒有制定統一的規範。

以上四點，導緻各個後台系統用戶體驗不統一，與業内優秀的電商系統（如shopify、有贊）差距較大。

基于此，在調研了大量的前端框架情況下，我們決定使用Ant Design Vue這套框架對現有系統再進行一次優化，于是有了這篇設計規範。

前文“後台産品設計規範-Ant Design實踐到落地”中已經說明了“布局”、“适配”、“間距”、“常用組件”、“文案”等基礎規範，詳情可查看前文并下載源文件。

前文“後台産品設計規範-Ant Design實踐到落地-表單篇”中已經說明了“表單分區”、“表單設計原則”、“Ant Design Vue表單常用組件使用說明”、“表單實踐案例”。

此文專門講述詳情頁的設計規範。

詳情頁分區是基于布局、适配、間距規範之上，經過大量分析原有後台詳情頁面，最後總結的一套詳情頁分區規則。

可查看下圖：

1.詳情頁分區講解

（1）表單布局：畫布1440px，導航區200px，詳情區兩側間距分别24px，詳情區1192px。

（2）詳情頁分為通欄、兩欄、三欄、四欄四種樣式。為了保持結構化的格式，防止多種詳情頁樣式交錯而出現的設計原則與視覺不統一問題，此處約定“一個信息分組隻能選擇一種樣式，盡量避免一個信息分組出現兩種詳情頁樣式”。

（3）單個詳情頁中盡量避免同時出現兩欄樣式、三欄樣式、四欄樣式，也就是在單個詳情頁中通欄樣式 兩欄樣式、通欄樣式 三欄樣式、通欄樣式 四欄樣式可以結合起來使用，但是避免通欄樣式 三欄樣式 四欄樣式結合起來使用。例如三欄樣式和四欄樣式同時出現在一個樣式，會存在多個信息分組對齊線不一緻的問題，看起來樣式比較混亂，不利于提高浏覽效率。

（4）經過大量分析後台字段長度，推薦詳情頁樣式的使用頻率如下：

2.通欄規範&通欄樣例

3.兩欄規範&兩欄樣例

4.三欄規範&三欄樣例

5.四欄規範&四欄樣例

1.是否需要詳情頁？

很多場景下，其實并不需要規劃、開發詳情頁，用編輯表單也可以滿足業務需求。那麼具體是哪些場景不需要詳情頁呢？

總結原則就是：如果頁面隻需要編輯功能且沒有查看編輯操作日志的需求，可以不需要詳情頁，直接用編輯頁面代替，節省開發成本。

如果頁面裡需要承載更多的功能，那麼就需要設計詳情頁，并将功能歸納于按鈕組中。如果頁面需要展示操作日志，也需要設計詳情頁展示操作日志。

2.按鈕組

我們固定将詳情頁的按鈕操作放置于頁面右上角。按鈕組分為常規操作和主操作，如下圖所示：

如果有需要特别突出的功能，可以使用主操作按鈕；如果沒有需要突出的功能，按鈕組可以不使用主操作按鈕。常規操作的排序需要按操作的優先級依次排序。

3.Tab分區

當頁面非常長，浏覽非常耗時的場景下，可以使用Tab分區功能。切換Tab可以快速切換至頁面設置的錨點處，提高浏覽效率。

4.信息分組

信息分組在表單中也有提到此原則，詳情頁信息分組的歸類需要和表單保持一緻，不能出現A字段在表單中屬于“信息分組一”，在詳情頁中屬于“信息分組二”。

5.字段順序

查詢欄、列表頁、詳情頁的字段順序盡量保持一緻，避免字段過多時找不到對應的字段信息。

6.數據脫敏

7.折疊

在表單的設計原則中有提到，當同一個信息分組内内容非常多時，可根據使用頻率将低頻使用的内容折疊起來，提高高頻内容的操作效率。詳情頁同理，也可以根據需要使用此功能。

8.複制

詳情頁可以在高頻複制字段右側增加“複制”功能，方便用戶操作。例如訂單号、快遞單号等。

9.操作日志

操作日志固定按列表展示“操作類型”、“操作内容”、“操作人”、“操作時間”，需要在PRD中詳細說明不同操作所對應的“操作類型”和“操作内容”。如下圖所示：

1.商品詳情

2.優惠券詳情

3.訂單詳情

4.歡迎語詳情

以上是詳情頁的産品設計規範，案例中隻列舉了最複雜的高級詳情頁，簡單詳情頁沒有做更多的闡述，大家可以運用自己的理解，結合公司的實際情況，制定自己團隊的設計規範。

Ant Design的使用規範，從第一篇的通用規範，到第二篇的表單規範，到這篇的詳情頁規範，核心内容基本上就介紹完了。

最重要的是：要遵循規範，但是又不能局限于規範之中，要在理解規範的基礎上根據自身業務場景靈活變通，提升用戶體驗，提升使用效率。

接下來的系列主題是“電商後台産品設計指南”，我會從基礎分類、運營分類、商品、庫存、營銷、推廣、裝修、用戶、訂單、售後、物流、财務、數據、權限等模塊一一講述産品設計思路、功能點以及詳細的産品設計方案、核心功能邏輯。

作者：城雨塵，公衆号：城雨塵（ID：bymono）

本文由 @城雨塵 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!