詳情頁(yè)需要承載的信息相對(duì)較多，這個(gè)情況下，不少設(shè)計(jì)師可能會(huì)覺(jué)得詳情頁(yè)設(shè)計(jì)相對(duì)較難，那么，有沒(méi)有什么好的方法可以優(yōu)化設(shè)計(jì)、讓設(shè)計(jì)進(jìn)行得更輕松一些？本文作者便提供了一種設(shè)計(jì)思路——“拼樂(lè)高”思路，一起來(lái)看一下。

前言

在B端的設(shè)計(jì)之中，詳情頁(yè)往往要承載著復(fù)雜信息，而作為查閱者往往也會(huì)因?yàn)樾畔?fù)雜從而導(dǎo)致閱讀成本較高，因此詳情頁(yè)也受到了業(yè)務(wù)的關(guān)注，設(shè)計(jì)師也有設(shè)計(jì)難的感受。今天我提供一些奇怪的設(shè)計(jì)思路來(lái)談?wù)勅绾卧O(shè)計(jì)得更輕松一些。

一、業(yè)務(wù)背景

產(chǎn)品主要是用于開(kāi)發(fā)流程中的團(tuán)隊(duì)協(xié)作，其中代碼相關(guān)的報(bào)告是主管尤其關(guān)注的部分，因?yàn)榇a的規(guī)范性以及是否出現(xiàn)bug等情況會(huì)影響到產(chǎn)品的使用，也同時(shí)是中層主管對(duì)上面老板的交代之一。

中層主管除了通過(guò)數(shù)據(jù)概覽瀏覽整體的進(jìn)度外，還需要查看單個(gè)代碼的質(zhì)量報(bào)告來(lái)判斷屬下是否適合自己的團(tuán)隊(duì)。

優(yōu)化前的詳情頁(yè)包含12模塊內(nèi)容從上到下暴力平鋪式布局，雖然有錨定導(dǎo)航和標(biāo)題收起作為幫助方式，但是還是無(wú)法快速瀏覽與理解全部?jī)?nèi)容。

二、困難點(diǎn)

1. 表現(xiàn)形式混雜，理解成本高

包含12模塊內(nèi)容。形式復(fù)雜，既包含多個(gè)表單多個(gè)表格和可視化，還有一個(gè)常規(guī)內(nèi)容幾百字左右文本域要呈現(xiàn)。表現(xiàn)形式多樣化，沒(méi)有進(jìn)行過(guò)合理的整理，用戶需要在表格/表單/可視化之間穿梭來(lái)尋找到自己想看的內(nèi)容。

2. 內(nèi)容高度很長(zhǎng)，首頁(yè)曝光度低

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

接下來(lái)以“拼樂(lè)高”的場(chǎng)景來(lái)解決排版問(wèn)題。

三、如何解決

1. “拼樂(lè)高”的定義是什么？

無(wú)論是拼樂(lè)高還是拼積木，如果你想拼的準(zhǔn)和好，那你就得有屬于自己的方法方式，筆者將自己總結(jié)為：“分”“拆”“找”“選”。

2. 分-分析圖紙整體

業(yè)務(wù)中，主管看詳情頁(yè)的目的是信息的瀏覽與編輯相關(guān)的信息，因此可以把設(shè)計(jì)定為：提高信息瀏覽搜尋效率，便于執(zhí)行操作。

3. 拆-如何進(jìn)行合理的分組

上一段已經(jīng)制定好了整體目標(biāo)，現(xiàn)在開(kāi)始將所有的模塊開(kāi)始拆分。

拆分的方式有很多，有：展現(xiàn)形式、時(shí)間、功能模塊、用戶階段目標(biāo)等等。

這里筆者選擇的是多樣結(jié)合的方式：

1. 以用戶的階段目標(biāo)位置：用戶在不同的關(guān)注不同的內(nèi)容，以業(yè)務(wù)為例：用戶更關(guān)注代碼質(zhì)量如何，多少個(gè)，解決了什么有多少bug要處理，是否規(guī)范，有沒(méi)有注釋等。
2. 再根據(jù)展現(xiàn)形式+時(shí)間概念分為：文字結(jié)論，結(jié)果可視化結(jié)論以及整體趨勢(shì)可視化呈現(xiàn)，以及詳細(xì)表格區(qū)域。

分別進(jìn)行組合：

1. 文字結(jié)論：基礎(chǔ)信息+文字結(jié)論。
2. 結(jié)果可視化：未驗(yàn)證，未解決，缺陷圖標(biāo)。
3. 整體趨勢(shì)分為：整體折線圖與損耗人力表工時(shí)表。
4. 全部詳細(xì)：將所有的表格進(jìn)行組合，以tab欄的形式進(jìn)行組合進(jìn)行切換。

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

上面已經(jīng)區(qū)分好了所有的模塊分組，接下來(lái)就是如何做好定位排布。

排布的發(fā)方式根據(jù)業(yè)務(wù)目標(biāo)已經(jīng)是“提高信息瀏覽搜尋效率，便于執(zhí)行操作”，往下推下一步就是提高首頁(yè)的曝光度，增強(qiáng)首頁(yè)的包容性。

這里可以在進(jìn)行2次分區(qū)，分為：基礎(chǔ)組，時(shí)間組?；A(chǔ)組只包含文字結(jié)論，時(shí)間組按照時(shí)間排列包含：結(jié)果可視化，整體趨勢(shì)以及全部詳細(xì)表格。在排列布局上，微拉提高首頁(yè)的曝光度，也是采用了左右布局基礎(chǔ)組固定居左，時(shí)間組滑動(dòng)居右同時(shí)時(shí)間上以：現(xiàn)在-未來(lái)-復(fù)盤的順序從上之下排列，提高首頁(yè)承載力與曝光度。

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

這里說(shuō)的“正確的表現(xiàn)形式”主要是說(shuō)的是可視化的表現(xiàn)形式。以過(guò)程中統(tǒng)計(jì)為例：業(yè)務(wù)目標(biāo)中既要能直觀表現(xiàn)出損耗的人力，還要表現(xiàn)出bug率的呈現(xiàn)，理論上應(yīng)該將兩張表合成為一張表，分別是柱狀圖和趨勢(shì)圖。

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

四、如何驗(yàn)證

目標(biāo)“提高信息瀏覽搜尋效率，便于執(zhí)行操作”，反推回來(lái)最后設(shè)計(jì)做驗(yàn)證的，主要是針對(duì)用戶的瀏覽時(shí)間/暫留時(shí)間。與前端溝通做了埋點(diǎn)，灰度一個(gè)月上線后，用戶的暫留時(shí)間從原先的8分鐘縮短到了4分鐘，滿意度提高了10%。

五、一點(diǎn)點(diǎn)總結(jié)

本文通過(guò)以樂(lè)高搭建的方式來(lái)拆解詳情頁(yè)面的設(shè)計(jì)方式，希望能給到同行遇到復(fù)雜頁(yè)面迷惑時(shí)一絲絲幫助。如果有不同的思考方式，隨時(shí)聯(lián)系與溝通。