下手前的第一步當(dāng)然是要先搞明白使用場(chǎng)景和功能用途，這個(gè)太基礎(chǔ)了，想必大家都懂。具體到這個(gè)項(xiàng)目來(lái)說(shuō)，它是一個(gè)用于數(shù)據(jù)分析的服務(wù)，后臺(tái)有一個(gè)信息量很大的數(shù)據(jù)庫(kù)，通過(guò)前臺(tái)進(jìn)行條件過(guò)濾后即可得到一張數(shù)據(jù)表。
看到原型我的第一反應(yīng)是：該從哪里開(kāi)始操作？頁(yè)面功能的終點(diǎn)在哪？原因在于，頁(yè)面中有三個(gè)主按鈕“生成表格”，“預(yù)覽”和“應(yīng)用條件”，且視覺(jué)結(jié)構(gòu)基本扁平。和產(chǎn)品溝通后了解到，當(dāng)前的邏輯是先選擇指標(biāo)，給指標(biāo)排序后就可以生成表格了，針對(duì)表格可以再應(yīng)用條件篩選，最終形成的表格可以導(dǎo)出。
二、結(jié)構(gòu)梳理
2.1 拆分重組功能
設(shè)計(jì)改造一般從大到小作調(diào)整。先優(yōu)化整體結(jié)構(gòu)，盡可能讓功能分區(qū)更明確。理解了原型后不難看出，頁(yè)面的配置項(xiàng)分的很開(kāi)，先在左邊欄加指標(biāo)，再在內(nèi)容去上方排序，生成表格后再去右邊欄條件篩選。這種需要用戶(hù)點(diǎn)來(lái)點(diǎn)去的結(jié)構(gòu)顯然不太友好，而且細(xì)碎的分割消耗了大量的空間。
該頁(yè)面功能大概分為配置和數(shù)據(jù)展示兩大部分，不妨從這個(gè)角度重組頁(yè)面功能。配置生成類(lèi)頁(yè)面有這樣幾種常見(jiàn)交互形式：一，分兩步，先配置再生成；二，模態(tài)浮層，通過(guò)彈窗或者抽屜配置；三，非模態(tài)，用工具欄或抽屜容納配置項(xiàng)目。為了便于比對(duì)或調(diào)整配置項(xiàng)，非模態(tài)的抽屜更適合操作場(chǎng)景。
功能結(jié)構(gòu)的優(yōu)化得到了如下的改進(jìn)：
- 易于統(tǒng)一卷展配置抽屜，避免了各個(gè)面板獨(dú)立控制和空間浪費(fèi)。
- 減少了配置時(shí)的操作步驟，選好配置項(xiàng)即可一鍵生成。
- 分區(qū)明顯，一邊操作另一邊展示，各司其職。
2.2 方案對(duì)比測(cè)試
對(duì)比測(cè)試方案的目的是盡可能考慮全各種設(shè)計(jì)方案，確定出一個(gè)最符合使用習(xí)慣和操作流程的布置。不論是手畫(huà)草圖還是用電腦畫(huà)線(xiàn)框圖都可以，期間多和產(chǎn)品或業(yè)務(wù)討論，可以讓對(duì)方理解整個(gè)的推導(dǎo)過(guò)程。
不過(guò)溝通中有兩點(diǎn)需要注意，首先討論方案前先過(guò)濾掉從設(shè)計(jì)的角度看明顯不合理的，評(píng)審的目的是通過(guò)多方意見(jiàn)調(diào)解讓方案達(dá)到最優(yōu)，而不是展示工作量。其次是結(jié)構(gòu)和視覺(jué)方案盡量分開(kāi)評(píng)估，否則對(duì)方會(huì)收到海量排列組合后的設(shè)計(jì)方案，評(píng)起來(lái)抓不住重點(diǎn)。下面是當(dāng)時(shí)和產(chǎn)品一塊研討的三個(gè)方案：
- 方案一：指標(biāo)一列，過(guò)濾條件一列。其中指標(biāo)可以通過(guò)頁(yè)簽切換全部和已選。
- 方案二：同方案一，但全部指標(biāo)和已選指標(biāo)上下顯示。
- 方案三：全部指標(biāo)單占一列，已選指標(biāo)和過(guò)濾條件單占一列。
最終選定了方案三，綜合來(lái)看有如下原因：用戶(hù)添加條件篩選的頻次低，所以沒(méi)有單放一列并且可單獨(dú)卷展；并且方案三的布局在語(yǔ)義上更容易被理解為“庫(kù)和待應(yīng)用項(xiàng)”，提供更典型的心理暗示。
過(guò)濾條件的結(jié)構(gòu)做了一些特定的優(yōu)化：一，新增功能保持在頭部，避免被擠下去；二，條件關(guān)系配置直接外露，減少點(diǎn)擊的同時(shí)也沒(méi)有占用更多空間；三，條件卡片增加了。
至此，需求頁(yè)面的結(jié)構(gòu)已經(jīng)定了下來(lái)，之后就是常規(guī)意義上的視覺(jué)處理了。因?yàn)檫@部分比較細(xì)碎，單獨(dú)來(lái)講可能缺乏普適性，所以下面一章總結(jié)了一些常見(jiàn)且通用的設(shè)計(jì)點(diǎn)供大家參考，最后再提供頁(yè)面的最終視覺(jué)效果供大家參考。
三、視覺(jué)效果構(gòu)建
3.1 內(nèi)容元素的背景色
盡量讓內(nèi)容和表單展示在白色卡片上。大部分基礎(chǔ)組件樣式是按白色底色的場(chǎng)景來(lái)做的，放在其他顏色的背景上很容易出問(wèn)題，比如表單的禁用態(tài)或者標(biāo)簽的顏色和底色融為一體時(shí)，可讀性很差，而且有一種不干凈的感覺(jué)。當(dāng)然這一條不絕對(duì)，如果深度定制了基礎(chǔ)組件的樣式，或是結(jié)構(gòu)功能簡(jiǎn)單，背景采用其他顏色也是沒(méi)問(wèn)題的。
3.2 陰影和描邊
陰影分割是一種常見(jiàn)的視覺(jué)表達(dá)手法，然而B(niǎo)端用戶(hù)的顯示器普遍比較糟糕，分辨率低且色域小，太輕的陰影效果不如描邊，有時(shí)甚至?xí)寛D形邊緣看起來(lái)很模糊。擔(dān)心顯示效果的話(huà)，實(shí)際上可以看一看 macOS 窗口的陰影尺寸和透明度。B端工具設(shè)計(jì)中，功能性比美觀(guān)度重要的多。
3.3 易讀性與復(fù)雜度
下次去宜家的時(shí)候可以觀(guān)察下結(jié)賬的柜員機(jī)，你會(huì)震驚地看到里面仍然顯示著擬物化界面。元素的質(zhì)感對(duì)現(xiàn)代界面設(shè)計(jì)來(lái)說(shuō)可能是增加了頁(yè)面復(fù)雜度，然而放到具體的操作場(chǎng)景中，擬物化界面可以給高速操作的收銀員提供更佳的功能可見(jiàn)性，有益于培養(yǎng)肌肉記憶。所以頁(yè)面易讀性與復(fù)雜度之間的平衡，取決于用戶(hù)在場(chǎng)景中的操作方式。
3.4 功能顏色的數(shù)量
功能顏色讓用戶(hù)不閱讀內(nèi)容就可以初步感知數(shù)據(jù)狀態(tài)，比如警告色，標(biāo)識(shí)色等等。數(shù)量太多時(shí)用戶(hù)會(huì)記不住映射關(guān)系，顏色就失去了功能性。一個(gè)常見(jiàn)的錯(cuò)誤是標(biāo)簽的配色，假如一個(gè)系統(tǒng)里有十種標(biāo)簽，千萬(wàn)不要設(shè)計(jì)十種配色，不僅區(qū)分度低而且視覺(jué)上很混亂，盡可能先歸類(lèi)再配色。再舉審核狀態(tài)的例子，除了成功失敗之外，審核流程還有各式各樣的中間態(tài)，需要異化表現(xiàn)時(shí)，不妨嘗試通過(guò)圖形視覺(jué)信號(hào)區(qū)分，比如增加圖標(biāo)。
3.5 避免攤大餅
非必要不攤餅。隨著層級(jí)增多，用戶(hù)對(duì)層級(jí)歸屬的感知逐漸變差，內(nèi)容區(qū)也越來(lái)越窄，視覺(jué)效果難以把控。當(dāng)然，在B端系統(tǒng)設(shè)計(jì)中沒(méi)有什么完全不可打破規(guī)則，實(shí)在避免不了的話(huà)，可以著重突出頂層內(nèi)容或動(dòng)態(tài)提示用戶(hù)當(dāng)前聚焦的層級(jí)。比如鼠標(biāo)懸停時(shí)高亮層級(jí)關(guān)系，類(lèi)似編譯器的代碼區(qū)塊高亮功能。
3.6 數(shù)據(jù)與提示
- 用真實(shí)字段內(nèi)容設(shè)計(jì)：視覺(jué)設(shè)計(jì)前找產(chǎn)品或者研發(fā)要一份內(nèi)容字段樣本，有助于提高視覺(jué)保真度，同時(shí)避免開(kāi)發(fā)上線(xiàn)后內(nèi)容擠不下或大面積留白的情況。
- 表單項(xiàng)默認(rèn)值：表單中可以通過(guò)感知預(yù)測(cè)填充內(nèi)容，或設(shè)置常用的默認(rèn)配置，提高表單的填寫(xiě)效率，減少機(jī)械操作。
- 提示信息：提示信息的暴露程度取決于系統(tǒng)功能是否常規(guī)，以及目標(biāo)用戶(hù)的理解能力。常用操作不提示，常用但晦澀的功能采用懸停提示，不常用且難懂的功能可以露出提示或幫助中心鏈接。
3.7 數(shù)據(jù)分析頁(yè)最終效果
經(jīng)過(guò)以上粗略的講解，希望大家對(duì)頁(yè)面控件和整體的視覺(jué)處理有了一定了解。針對(duì)高度定制化的B端頁(yè)面，視覺(jué)的核心目的是提高功能可見(jiàn)性和操作易用性，不是單純地去套規(guī)范。
四、工期管理及研發(fā)對(duì)接
除了頁(yè)面的設(shè)計(jì)流程，項(xiàng)目管理則是另一個(gè)重點(diǎn)，B端項(xiàng)目經(jīng)常會(huì)倒排工期，個(gè)別戰(zhàn)略導(dǎo)向型的需求更是火燒眉毛。毋庸置疑，兩天工期的設(shè)計(jì)質(zhì)量多半是比不上一周工期的，下面講一講在時(shí)間緊張時(shí)如何保障輸出質(zhì)量。
4.1 按需求表單規(guī)劃
開(kāi)始設(shè)計(jì)前，根據(jù) PRD 整理出一個(gè)任務(wù)表單，即當(dāng)期需求覆蓋的功能范圍。遇到緊急需求時(shí)，可以按照拆分出來(lái)的功能模塊分批交付開(kāi)發(fā)。B端模塊的設(shè)計(jì)時(shí)間很少會(huì)完全符合預(yù)期，比如在設(shè)計(jì)時(shí)發(fā)現(xiàn)了一個(gè)重大優(yōu)化點(diǎn)，從構(gòu)思概念方案到各方評(píng)估影響需要占用一部分工期，而通過(guò)模塊排期表可以更穩(wěn)妥地評(píng)估突發(fā)事件對(duì)后續(xù)輸出的影響，幫助產(chǎn)品評(píng)估是否投入資源做優(yōu)化。
4.2 先輸出核心頁(yè)面確認(rèn)方向
先輸出關(guān)鍵頁(yè)面給產(chǎn)品和業(yè)務(wù)確認(rèn)，一來(lái)讓研發(fā)心里有底，二來(lái)控制改稿成本。返工在 B 端項(xiàng)目中很常見(jiàn)，有時(shí)候我甚至?xí)之?huà)草稿去找產(chǎn)品過(guò)方案，提前評(píng)估可行性，避免方案走了很遠(yuǎn)再被駁回。切忌等到交稿節(jié)點(diǎn)給產(chǎn)品一個(gè)突然驚喜。
4.3 組件與組件狀態(tài)
B端原型通?？此浦挥幸粋€(gè)頁(yè)面，而算上各種面板的打開(kāi)和關(guān)閉，頁(yè)面操作狀態(tài)，彈窗，包括定制化組件樣式的說(shuō)明，工作量并不小。組件狀態(tài)可以留到最后再補(bǔ)充，但務(wù)必和研發(fā)提前協(xié)商技術(shù)方案：首先確定常規(guī)功能能否用現(xiàn)成組件，采用哪款組件，這一部分之后就不再出交互視覺(jué)樣式了。其次和研發(fā)同事溝通非標(biāo)組件的交互形式，這樣他們可以先寫(xiě)框架最后再加樣式，不會(huì)出現(xiàn)研發(fā)空窗。
五、初步排錯(cuò)
交付設(shè)計(jì)稿或者做用戶(hù)測(cè)試之前，還差一步驗(yàn)證的工序。過(guò)濾掉明顯且粗粒度的問(wèn)題，可以顯著提高后續(xù)的測(cè)試效率?？陀^(guān)上驗(yàn)證可用性，主觀(guān)上評(píng)估體驗(yàn)。
5.1 小黃鴨調(diào)試法
小黃鴨調(diào)試法是一個(gè)工程師都知道，但設(shè)計(jì)師很少聽(tīng)說(shuō)的測(cè)試方法，本意是通過(guò)給桌上的橡皮鴨逐行解釋代碼來(lái)排查問(wèn)題。驗(yàn)證階段不妨也試試這個(gè)方法，給想象中的人物講講界面的使用方法和元素的設(shè)計(jì)原因，講都講不通的功能，想必也不會(huì)特別好用。（認(rèn)識(shí)我的同事都知道我辦公桌上有張青年 Gary Anderson 給一個(gè)領(lǐng)導(dǎo)樣子的人解釋可回收標(biāo)識(shí)設(shè)計(jì)的照片。我的講解對(duì)象就是這個(gè)領(lǐng)導(dǎo)樣子的人，他已經(jīng)駁回了我的很多爛方案。）
5.2 走用戶(hù)流程
核對(duì)產(chǎn)品功能沒(méi)有缺漏后，就可以檢查用戶(hù)流程的流程度了。幾種常見(jiàn)的流程問(wèn)題包括：不知從何下手；找不到功能入口；操作失誤難以補(bǔ)救；系統(tǒng)出錯(cuò)原因不明。這些問(wèn)題會(huì)突然地卡住用戶(hù)，感受上很糟糕。我們可以找出類(lèi)似的卡點(diǎn)，提供適當(dāng)?shù)囊龑?dǎo)。假如從設(shè)計(jì)上找不到解決方案，則需要提供可檢索的幫助中心以便用戶(hù)自行查閱解決。
結(jié)語(yǔ)
B端產(chǎn)品一般會(huì)有詳細(xì)的文檔，或者培訓(xùn)操作人員。然而以B端產(chǎn)品的體量和非常規(guī)的交互方式，很多操作不好記憶。單純按照原型施工，難以保障易用性。作為設(shè)計(jì)師的一個(gè)關(guān)鍵職責(zé)，便是將產(chǎn)品操作邏輯翻譯成簡(jiǎn)明易懂的頁(yè)面和圖形，盡可能鋪平體驗(yàn)的道路。
注1：文章示意圖內(nèi)容由于脫敏需要進(jìn)行了處理，實(shí)際設(shè)計(jì)時(shí)請(qǐng)記得盡量使用真實(shí)字段內(nèi)容。
注2：本文主要介紹流程處理，為避免繁瑣略去了一些視覺(jué)設(shè)計(jì)點(diǎn)，想要了解更多可以參考上一篇文章《引起舒適！什么是好用的界面》。
作者：
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》如何解析產(chǎn)品原型
藍(lán)藍(lán)設(shè)計(jì)( www.tuitetiyu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司