詳情頁需要承載的信息相對較多，這個情況下，不少設計師可能會覺得詳情頁設計相對較難，那么，有沒有什么好的方法可以優化設計、讓設計進行得更輕松一些？本文作者便提供了一種設計思路——“拼樂高”思路，一起來看一下。

前言

在B端的設計之中，詳情頁往往要承載著復雜信息，而作為查閱者往往也會因為信息復雜從而導致閱讀成本較高，因此詳情頁也受到了業務的關注，設計師也有設計難的感受。今天我提供一些奇怪的設計思路來談談如何設計得更輕松一些。

一、業務背景

產品主要是用于開發流程中的團隊協作，其中代碼相關的報告是主管尤其關注的部分，因為代碼的規范性以及是否出現bug等情況會影響到產品的使用，也同時是中層主管對上面老板的交代之一。

中層主管除了通過數據概覽瀏覽整體的進度外，還需要查看單個代碼的質量報告來判斷屬下是否適合自己的團隊。

優化前的詳情頁包含12模塊內容從上到下暴力平鋪式布局，雖然有錨定導航和標題收起作為幫助方式，但是還是無法快速瀏覽與理解全部內容。

二、困難點

1. 表現形式混雜，理解成本高

包含12模塊內容。形式復雜，既包含多個表單多個表格和可視化，還有一個常規內容幾百字左右文本域要呈現。表現形式多樣化，沒有進行過合理的整理，用戶需要在表格/表單/可視化之間穿梭來尋找到自己想看的內容。

2. 內容高度很長，首頁曝光度低

內容的排列方式采用的是區分模塊之后自上而下的暴力平鋪方式，內容多。遇到幾個高度較高的表格或者是幾個高度較大的折線圖，后面的內容雖然有錨定導航幫助定位，但是幫助能力有有限。整體頁面的閱讀成本很高。

接下來以“拼樂高”的場景來解決排版問題。

三、如何解決

1. “拼樂高”的定義是什么？

無論是拼樂高還是拼積木，如果你想拼的準和好，那你就得有屬于自己的方法方式，筆者將自己總結為：“分”“拆”“找”“選”。

2. 分-分析圖紙整體

業務中，主管看詳情頁的目的是信息的瀏覽與編輯相關的信息，因此可以把設計定為：提高信息瀏覽搜尋效率，便于執行操作。

3. 拆-如何進行合理的分組

上一段已經制定好了整體目標，現在開始將所有的模塊開始拆分。

拆分的方式有很多，有：展現形式、時間、功能模塊、用戶階段目標等等。

這里筆者選擇的是多樣結合的方式：

1. 以用戶的階段目標位置：用戶在不同的關注不同的內容，以業務為例：用戶更關注代碼質量如何，多少個，解決了什么有多少bug要處理，是否規范，有沒有注釋等。
2. 再根據展現形式+時間概念分為：文字結論，結果可視化結論以及整體趨勢可視化呈現，以及詳細表格區域。

分別進行組合：

1. 文字結論：基礎信息+文字結論。
2. 結果可視化：未驗證，未解決，缺陷圖標。
3. 整體趨勢分為：整體折線圖與損耗人力表工時表。
4. 全部詳細：將所有的表格進行組合，以tab欄的形式進行組合進行切換。

4. 找-如何將樂高擺放在正確的地方

上面已經區分好了所有的模塊分組，接下來就是如何做好定位排布。

排布的發方式根據業務目標已經是“提高信息瀏覽搜尋效率，便于執行操作”，往下推下一步就是提高首頁的曝光度，增強首頁的包容性。

這里可以在進行2次分區，分為：基礎組，時間組?；A組只包含文字結論，時間組按照時間排列包含：結果可視化，整體趨勢以及全部詳細表格。在排列布局上，微拉提高首頁的曝光度，也是采用了左右布局基礎組固定居左，時間組滑動居右同時時間上以：現在-未來-復盤的順序從上之下排列，提高首頁承載力與曝光度。

5. 選-搭建中選擇合理的模型

這里說的“正確的表現形式”主要是說的是可視化的表現形式。以過程中統計為例：業務目標中既要能直觀表現出損耗的人力，還要表現出bug率的呈現，理論上應該將兩張表合成為一張表，分別是柱狀圖和趨勢圖。

但是實際情況下，表的空間很小，主管對于這張表的關注點也不高，為了閱讀性的提高，所以筆者將一張表拆分為兩張表進行切換查看。

四、如何驗證

目標“提高信息瀏覽搜尋效率，便于執行操作”，反推回來最后設計做驗證的，主要是針對用戶的瀏覽時間/暫留時間。與前端溝通做了埋點，灰度一個月上線后，用戶的暫留時間從原先的8分鐘縮短到了4分鐘，滿意度提高了10%。

五、一點點總結

本文通過以樂高搭建的方式來拆解詳情頁面的設計方式，希望能給到同行遇到復雜頁面迷惑時一絲絲幫助。如果有不同的思考方式，隨時聯系與溝通。