為了避免出現(xiàn)用戶所想看的信息被其他海量信息所淹沒的情況，設(shè)計師或者產(chǎn)研團(tuán)隊需要思考如何做好信息收納，讓擁有厚重信息和功能的產(chǎn)品變得簡單清爽且易用。這篇文章里，作者就梳理了如何利用好容器類UI組件達(dá)成這一目標(biāo)的策略，一起來看。
用戶的矛盾
如果你問用戶他需要什么，他的回答大概率是“我全都要”。但是如果你把他想要的東西全都展示在頁面上，會發(fā)生什么？
用戶被自己想要的信息淹沒了。他會說：“這根本沒法看，也沒法用，你們的設(shè)計太爛了。”
信息量大、操作復(fù)雜是B端產(chǎn)品的典型特征。我們?nèi)绾伟丫哂泻裰匦畔⒑凸δ艿漠a(chǎn)品，變得對用戶來說清爽易用？
設(shè)計師就像魔術(shù)師
My dad once told me that graphic design is the art of fitting a newspaper inside a matchbox, and I would say a lot of interface design is the same.
——Tess Gadd《UX cheat sheet: Preview and full display》
“界面設(shè)計就是把報紙塞進(jìn)火柴盒的藝術(shù)”，這個比喻真是太妙了！（本土化：把大象裝進(jìn)冰箱的藝術(shù)）。怎么把報紙塞進(jìn)火柴盒？變魔術(shù)嗎？其實從某種角度上看，我們設(shè)計師就是魔術(shù)師——在適當(dāng)?shù)臅r機(jī)展示恰到好處的信息。
而我們用到的道具，就是容器類UI組件。區(qū)別于其他類型的組件（比如輸入框下拉框），容器類組件就像收納盒，也就是用來收納信息和操作的。
咱們今天就來探索一下，如何利用好容器類UI組件，完成“空間膨脹術(shù)”，把報紙絲滑地塞進(jìn)火柴盒。
本文結(jié)構(gòu)
本文會分成兩部分。
- 第一部分：尋找到問題所在，探索出恰當(dāng)?shù)脑O(shè)計策略。
- 第二部分：針對設(shè)定好的設(shè)計策略，提煉出“容器類”組件使用決策樹。
這個決策樹不限于提供以下價值：
- 幫助設(shè)計師們在設(shè)計過程中高效決策，提升設(shè)計效率；
- 幫助產(chǎn)研團(tuán)隊在討論中快速達(dá)成一致、減少內(nèi)耗；
- 提升匯報時的說服力，獲得干系人支持。
下面我們正式開始吧~
PART 1：定位問題、設(shè)定策略
1. 問題所在
一個單點數(shù)據(jù)關(guān)聯(lián)的信息量能有多大？看一個網(wǎng)安行業(yè)的例子：
安全管理的目標(biāo)是要確保資產(chǎn)安全。用戶要做的，首先是要清點資產(chǎn)，資產(chǎn)分類分級和業(yè)務(wù)信息是資產(chǎn)自身屬性。另外，資產(chǎn)本身會存在一系列漏洞，漏洞也有分類分級以及修復(fù)過程數(shù)據(jù)。如果漏洞被利用，就會產(chǎn)生威脅告警，而告警也存在分類分級及處置過程數(shù)據(jù)。
可以看出，將數(shù)據(jù)建立層層關(guān)聯(lián)后，從一個單點可以衍生出來的信息是海量的、無邊的。
我們當(dāng)然不能把這全家桶一整個砸給用戶呀，用戶會被砸暈的。那我們該怎么做？
2. 設(shè)計策略
有兩個定律，跟“復(fù)雜”有關(guān)。
這兩個定律告訴我們一個道理：復(fù)雜，不會讓用戶覺得更好用，甚至增加了不必要的內(nèi)耗。
處理復(fù)雜，我們一般有哪些辦法呢。
第一步，先刪除多余的部分。就好比我們整理房間時，先挑出垃圾和閑置。
第二步，把物品歸類。被子和被子疊在一起，衣服和衣服掛在一起，書本放在書架上。總之，不能都堆到床上。
第三步，漸進(jìn)呈現(xiàn)。這就到了設(shè)計師要用“容器類”組件來完成“空間膨脹術(shù)”的環(huán)節(jié)了。
漸進(jìn)呈現(xiàn)的設(shè)計理論有點像C4模型。C4模型是一種軟件架構(gòu)可視化方法。它的獨特之處，就是從宏觀到微觀，設(shè)置了多個焦距，來層層遞進(jìn)。
3. 內(nèi)容分析
產(chǎn)品中的內(nèi)容也存在層層遞進(jìn)。內(nèi)容之間的關(guān)系，常見以下兩種。
一種是從屬關(guān)系，或父子關(guān)系。
一種是關(guān)聯(lián)關(guān)系，數(shù)據(jù)以某種維度建立了關(guān)聯(lián)。
PART 2：容器，以及如何使用容器
1. 關(guān)于容器
我們?nèi)绾斡萌萜黝怳I組件，去放置這些復(fù)雜且層層關(guān)聯(lián)的內(nèi)容？
以下是我們常見的容器類UI組件。
這些組件都可以用來收納，但是它們的特征差異也是巨大的，不能隨意混用。
我從“復(fù)雜度高低”和“關(guān)聯(lián)性強(qiáng)弱”這兩個坐標(biāo)維度來劃分出四個象限，展示這幾個容器的特征。
左下角這里基本是空的，為什么？因為這個是按照組件的最大潛力來擺放的，高維度可以兼容低維度。
值得注意的是，有一些組件在當(dāng)前頁面內(nèi)，而有些在浮層中。浮層在空間Z軸上有高度，視覺表現(xiàn)為有投影。
容器可以展示信息，也可以用來承載操作。我們把這兩個場景分開考慮。首先，我們從信息展示場景開始，分析如何選擇容器。
2. 信息展示容器的決策樹
這里有幾個關(guān)鍵問題，我們逐個分析：
關(guān)鍵問題一：能否分清主次。
這個問題很難。用戶可能說“這個內(nèi)容我需要”，但“需要”這個詞存在極大的灰度空間，我們要判斷“需要”是多“重要”，需要從這幾個維度去分析。
關(guān)鍵問題二：是否需要對比參考。
如果需要對比參考，不能使用tabs（選項卡）。因為tabs組件存在“排他性”——只有選中tab的子內(nèi)容是展示的，未選中的tabs下的內(nèi)容是被隱藏的。
以購物為例，用戶在對幾款產(chǎn)品進(jìn)行對比挑選時，期望在一個界面同時看到幾款產(chǎn)品的參數(shù)和價格等。如果把產(chǎn)品數(shù)據(jù)放入各tab中，用戶就得在tab間反復(fù)橫跳，讓有限的短期記憶承受巨大壓力。
（↑案例：蘋果手機(jī)參數(shù)對比）
當(dāng)然，如果沒有對比參考的需求，我們可以考慮把內(nèi)容歸類到不同tabs下。在使用tabs組件時要確保內(nèi)容分類合理、標(biāo)簽文案簡潔易懂。這樣用戶才能理解并愿意探索。
（↑tabs的應(yīng)用）
關(guān)鍵問題三：是否需要保持上下文。
有這樣一個場景：上級單位對多個下屬單位進(jìn)行考核，打分有一定主觀性，需要參考其他單位得分。如果跳轉(zhuǎn)新頁面進(jìn)行打分操作，就會斷開原有上下文的關(guān)系，影響用戶操作流暢性。
需要保持上下文的場景中，應(yīng)避免迫使用戶離開父級頁面，建議在原頁面或浮層中呈現(xiàn)更多信息。
關(guān)鍵問題四：是否頻繁往返。
這個一般由任務(wù)類型決定，即當(dāng)前操作是“主線任務(wù)”還是“支線任務(wù)”。
在主線任務(wù)場景中，用戶持續(xù)前進(jìn)。比如網(wǎng)購商品，用戶在選購商品-確認(rèn)地址-付費-下單完成···等步驟中環(huán)環(huán)前行。這時建議使用原頁面跳轉(zhuǎn)的方式。
支線任務(wù)完成后，一般要回歸主任務(wù)，也就是存在“往返”，就像從小路回歸到大路上。比如清理郵箱：用戶閱讀處理完一封未讀郵件后返回未讀列表，繼續(xù)處理下一條。在這里，“閱讀并處理一條郵件”是支線任務(wù)，“”清理郵箱”是主線任務(wù)。建議給“支線任務(wù)”新開標(biāo)簽頁處理。
關(guān)鍵問題五：是不是必須看到的。
當(dāng)前信息對用戶來說是否重要且關(guān)鍵？模態(tài)是較為“強(qiáng)勢”的交互模式。原則上，界面態(tài)度保持禮貌克制，以免打擾到用戶。
3. 功能操作決策樹
并不是所有容器都適合放置表單操作——部分容器因“排他性”的特征，會隱藏部分信息，可導(dǎo)致用戶遺漏重要操作。
我們一般將操作分成兩類：
- 一類是需要用戶提交信息的，例如填寫表單，一般由用戶喚起。
- 一類是接收和確認(rèn)系統(tǒng)信息，一般由系統(tǒng)發(fā)起。
我們可以按照表單的體量，或者信息的重要及關(guān)鍵程度，選擇相應(yīng)的UI組件。
4. 空間膨脹術(shù)
容器組件的的神奇之處是可以多次嵌套和疊加，創(chuàng)造出更多空間。
但注意保持信息體量和層級之間的平衡，避免過多嵌套和疊加，讓用戶在多個容器中迷失方向。
（↑案例：抽屜嵌套抽屜）
（↑案例：tabs嵌套tabs）
（↑案例：抽屜嵌套tabs）
今天的分享就到這里了
感謝讀到最后的讀者們，就用一句話來結(jié)束今天的分享吧~
設(shè)計一件東西時，總是要在更大的環(huán)境中考慮它——房間里的一把椅子、房子里的房間、環(huán)境中的房子、城市規(guī)劃中的環(huán)境。
——埃里爾·沙里寧 (1873–1950)，芬蘭建筑師
本文由 @杜大大杜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
蘭亭妙微(www.newchinaweekly.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan
