亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

前言

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

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

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

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

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

困難點(diǎn)

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

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

內(nèi)容高度很長，首頁曝光度低

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

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

如何解決

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

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

分-分析圖紙整體

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

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

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

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

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

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

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

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

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

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

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

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

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

這里說的“正確的表現(xiàn)形式”主要是說的是可視化的表現(xiàn)形式。以過程中統(tǒng)計為例：業(yè)務(wù)目標(biāo)中即要能直觀表現(xiàn)出損耗的人力還要表現(xiàn)出表現(xiàn)出bug率的呈現(xiàn)，理論上應(yīng)該將兩張表合成為一張表，分別是柱狀圖和趨勢圖。但是實(shí)際情況下，表的空間很小主管對于這張表的關(guān)注點(diǎn)也不高，為了閱讀性的提高所以筆者將一張表拆分為兩張表進(jìn)行切換查看。

如何驗(yàn)證

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

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

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

Powered by Froala Editor