為了避免出現(xiàn)用戶(hù)所想看的信息被其他海量信息所淹沒(méi)的情況，設(shè)計(jì)師或者產(chǎn)研團(tuán)隊(duì)需要思考如何做好信息收納，讓擁有厚重信息和功能的產(chǎn)品變得簡(jiǎn)單清爽且易用。這篇文章里，作者就梳理了如何利用好容器類(lèi)UI組件達(dá)成這一目標(biāo)的策略，一起來(lái)看。

用戶(hù)的矛盾

如果你問(wèn)用戶(hù)他需要什么，他的回答大概率是“我全都要”。但是如果你把他想要的東西全都展示在頁(yè)面上，會(huì)發(fā)生什么？

用戶(hù)被自己想要的信息淹沒(méi)了。他會(huì)說(shuō)：“這根本沒(méi)法看，也沒(méi)法用，你們的設(shè)計(jì)太爛了。”

信息量大、操作復(fù)雜是B端產(chǎn)品的典型特征。我們?nèi)绾伟丫哂泻裰匦畔⒑凸δ艿漠a(chǎn)品，變得對(duì)用戶(hù)來(lái)說(shuō)清爽易用？

設(shè)計(jì)師就像魔術(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ì)就是把報(bào)紙塞進(jìn)火柴盒的藝術(shù)”，這個(gè)比喻真是太妙了！（本土化：把大象裝進(jìn)冰箱的藝術(shù)）。怎么把報(bào)紙塞進(jìn)火柴盒？變魔術(shù)嗎？其實(shí)從某種角度上看，我們?cè)O(shè)計(jì)師就是魔術(shù)師——在適當(dāng)?shù)臅r(shí)機(jī)展示恰到好處的信息。

做到這三點(diǎn)挑戰(zhàn)，產(chǎn)品經(jīng)理只會(huì)不斷升值

好的產(chǎn)品經(jīng)理是很稀缺的，懂用戶(hù)、懂商業(yè)、懂?dāng)?shù)據(jù)的產(chǎn)品經(jīng)理走出互聯(lián)網(wǎng)，依然是搶手貨。相反，如果只做簡(jiǎn)單傳話(huà)、低效執(zhí)行、淺層思考的產(chǎn)品經(jīng)理，恐怕走不過(guò)未來(lái)3-5年的洪流。

查看詳情 >

而我們用到的道具，就是容器類(lèi)UI組件。區(qū)別于其他類(lèi)型的組件（比如輸入框下拉框），容器類(lèi)組件就像收納盒，也就是用來(lái)收納信息和操作的。

咱們今天就來(lái)探索一下，如何利用好容器類(lèi)UI組件，完成“空間膨脹術(shù)”，把報(bào)紙絲滑地塞進(jìn)火柴盒。

本文結(jié)構(gòu)

本文會(huì)分成兩部分。

• 第一部分：尋找到問(wèn)題所在，探索出恰當(dāng)?shù)脑O(shè)計(jì)策略。
• 第二部分：針對(duì)設(shè)定好的設(shè)計(jì)策略，提煉出“容器類(lèi)”組件使用決策樹(shù)。

這個(gè)決策樹(shù)不限于提供以下價(jià)值：

• 幫助設(shè)計(jì)師們?cè)谠O(shè)計(jì)過(guò)程中高效決策，提升設(shè)計(jì)效率；
• 幫助產(chǎn)研團(tuán)隊(duì)在討論中快速達(dá)成一致、減少內(nèi)耗；
• 提升匯報(bào)時(shí)的說(shuō)服力，獲得干系人支持。

下面我們正式開(kāi)始吧~

PART 1：定位問(wèn)題、設(shè)定策略

1. 問(wèn)題所在

一個(gè)單點(diǎn)數(shù)據(jù)關(guān)聯(lián)的信息量能有多大？看一個(gè)網(wǎng)安行業(yè)的例子：

安全管理的目標(biāo)是要確保資產(chǎn)安全。用戶(hù)要做的，首先是要清點(diǎn)資產(chǎn)，資產(chǎn)分類(lèi)分級(jí)和業(yè)務(wù)信息是資產(chǎn)自身屬性。另外，資產(chǎn)本身會(huì)存在一系列漏洞，漏洞也有分類(lèi)分級(jí)以及修復(fù)過(guò)程數(shù)據(jù)。如果漏洞被利用，就會(huì)產(chǎn)生威脅告警，而告警也存在分類(lèi)分級(jí)及處置過(guò)程數(shù)據(jù)。

可以看出，將數(shù)據(jù)建立層層關(guān)聯(lián)后，從一個(gè)單點(diǎn)可以衍生出來(lái)的信息是海量的、無(wú)邊的。

我們當(dāng)然不能把這全家桶一整個(gè)砸給用戶(hù)呀，用戶(hù)會(huì)被砸暈的。那我們?cè)撛趺醋觯?/p>

2. 設(shè)計(jì)策略

有兩個(gè)定律，跟“復(fù)雜”有關(guān)。

這兩個(gè)定律告訴我們一個(gè)道理：復(fù)雜，不會(huì)讓用戶(hù)覺(jué)得更好用，甚至增加了不必要的內(nèi)耗。

處理復(fù)雜，我們一般有哪些辦法呢。

第一步，先刪除多余的部分。就好比我們整理房間時(shí)，先挑出垃圾和閑置。

第二步，把物品歸類(lèi)。被子和被子疊在一起，衣服和衣服掛在一起，書(shū)本放在書(shū)架上。總之，不能都堆到床上。

第三步，漸進(jìn)呈現(xiàn)。這就到了設(shè)計(jì)師要用“容器類(lèi)”組件來(lái)完成“空間膨脹術(shù)”的環(huán)節(jié)了。

漸進(jìn)呈現(xiàn)的設(shè)計(jì)理論有點(diǎn)像C4模型。C4模型是一種軟件架構(gòu)可視化方法。它的獨(dú)特之處，就是從宏觀(guān)到微觀(guān)，設(shè)置了多個(gè)焦距，來(lái)層層遞進(jìn)。

3. 內(nèi)容分析

產(chǎn)品中的內(nèi)容也存在層層遞進(jìn)。內(nèi)容之間的關(guān)系，常見(jiàn)以下兩種。

一種是從屬關(guān)系，或父子關(guān)系。

一種是關(guān)聯(lián)關(guān)系，數(shù)據(jù)以某種維度建立了關(guān)聯(lián)。

PART 2：容器，以及如何使用容器

1. 關(guān)于容器

我們?nèi)绾斡萌萜黝?lèi)UI組件，去放置這些復(fù)雜且層層關(guān)聯(lián)的內(nèi)容？

以下是我們常見(jiàn)的容器類(lèi)UI組件。

這些組件都可以用來(lái)收納，但是它們的特征差異也是巨大的，不能隨意混用。

我從“復(fù)雜度高低”和“關(guān)聯(lián)性強(qiáng)弱”這兩個(gè)坐標(biāo)維度來(lái)劃分出四個(gè)象限，展示這幾個(gè)容器的特征。

左下角這里基本是空的，為什么？因?yàn)檫@個(gè)是按照組件的最大潛力來(lái)擺放的，高維度可以兼容低維度。

值得注意的是，有一些組件在當(dāng)前頁(yè)面內(nèi)，而有些在浮層中。浮層在空間Z軸上有高度，視覺(jué)表現(xiàn)為有投影。

容器可以展示信息，也可以用來(lái)承載操作。我們把這兩個(gè)場(chǎng)景分開(kāi)考慮。首先，我們從信息展示場(chǎng)景開(kāi)始，分析如何選擇容器。

2. 信息展示容器的決策樹(shù)

這里有幾個(gè)關(guān)鍵問(wèn)題，我們逐個(gè)分析：

關(guān)鍵問(wèn)題一：能否分清主次。

這個(gè)問(wèn)題很難。用戶(hù)可能說(shuō)“這個(gè)內(nèi)容我需要”，但“需要”這個(gè)詞存在極大的灰度空間，我們要判斷“需要”是多“重要”，需要從這幾個(gè)維度去分析。

關(guān)鍵問(wèn)題二：是否需要對(duì)比參考。

如果需要對(duì)比參考，不能使用tabs（選項(xiàng)卡）。因?yàn)閠abs組件存在“排他性”——只有選中tab的子內(nèi)容是展示的，未選中的tabs下的內(nèi)容是被隱藏的。

以購(gòu)物為例，用戶(hù)在對(duì)幾款產(chǎn)品進(jìn)行對(duì)比挑選時(shí)，期望在一個(gè)界面同時(shí)看到幾款產(chǎn)品的參數(shù)和價(jià)格等。如果把產(chǎn)品數(shù)據(jù)放入各tab中，用戶(hù)就得在tab間反復(fù)橫跳，讓有限的短期記憶承受巨大壓力。

（↑案例：蘋(píng)果手機(jī)參數(shù)對(duì)比）

當(dāng)然，如果沒(méi)有對(duì)比參考的需求，我們可以考慮把內(nèi)容歸類(lèi)到不同tabs下。在使用tabs組件時(shí)要確保內(nèi)容分類(lèi)合理、標(biāo)簽文案簡(jiǎn)潔易懂。這樣用戶(hù)才能理解并愿意探索。

（↑tabs的應(yīng)用）

關(guān)鍵問(wèn)題三：是否需要保持上下文。

有這樣一個(gè)場(chǎng)景：上級(jí)單位對(duì)多個(gè)下屬單位進(jìn)行考核，打分有一定主觀(guān)性，需要參考其他單位得分。如果跳轉(zhuǎn)新頁(yè)面進(jìn)行打分操作，就會(huì)斷開(kāi)原有上下文的關(guān)系，影響用戶(hù)操作流暢性。

需要保持上下文的場(chǎng)景中，應(yīng)避免迫使用戶(hù)離開(kāi)父級(jí)頁(yè)面，建議在原頁(yè)面或浮層中呈現(xiàn)更多信息。

關(guān)鍵問(wèn)題四：是否頻繁往返。

這個(gè)一般由任務(wù)類(lèi)型決定，即當(dāng)前操作是“主線(xiàn)任務(wù)”還是“支線(xiàn)任務(wù)”。

在主線(xiàn)任務(wù)場(chǎng)景中，用戶(hù)持續(xù)前進(jìn)。比如網(wǎng)購(gòu)商品，用戶(hù)在選購(gòu)商品-確認(rèn)地址-付費(fèi)-下單完成···等步驟中環(huán)環(huán)前行。這時(shí)建議使用原頁(yè)面跳轉(zhuǎn)的方式。

支線(xiàn)任務(wù)完成后，一般要回歸主任務(wù)，也就是存在“往返”，就像從小路回歸到大路上。比如清理郵箱：用戶(hù)閱讀處理完一封未讀郵件后返回未讀列表，繼續(xù)處理下一條。在這里，“閱讀并處理一條郵件”是支線(xiàn)任務(wù)，“”清理郵箱”是主線(xiàn)任務(wù)。建議給“支線(xiàn)任務(wù)”新開(kāi)標(biāo)簽頁(yè)處理。

關(guān)鍵問(wèn)題五：是不是必須看到的。

當(dāng)前信息對(duì)用戶(hù)來(lái)說(shuō)是否重要且關(guān)鍵？模態(tài)是較為“強(qiáng)勢(shì)”的交互模式。原則上，界面態(tài)度保持禮貌克制，以免打擾到用戶(hù)。

3. 功能操作決策樹(shù)

并不是所有容器都適合放置表單操作——部分容器因“排他性”的特征，會(huì)隱藏部分信息，可導(dǎo)致用戶(hù)遺漏重要操作。

我們一般將操作分成兩類(lèi)：

• 一類(lèi)是需要用戶(hù)提交信息的，例如填寫(xiě)表單，一般由用戶(hù)喚起。
• 一類(lèi)是接收和確認(rèn)系統(tǒng)信息，一般由系統(tǒng)發(fā)起。

我們可以按照表單的體量，或者信息的重要及關(guān)鍵程度，選擇相應(yīng)的UI組件。

4. 空間膨脹術(shù)

容器組件的的神奇之處是可以多次嵌套和疊加，創(chuàng)造出更多空間。

但注意保持信息體量和層級(jí)之間的平衡，避免過(guò)多嵌套和疊加，讓用戶(hù)在多個(gè)容器中迷失方向。

（↑案例：抽屜嵌套抽屜）

（↑案例：tabs嵌套tabs）

（↑案例：抽屜嵌套tabs）

今天的分享就到這里了

感謝讀到最后的讀者們，就用一句話(huà)來(lái)結(jié)束今天的分享吧~

設(shè)計(jì)一件東西時(shí)，總是要在更大的環(huán)境中考慮它——房間里的一把椅子、房子里的房間、環(huán)境中的房子、城市規(guī)劃中的環(huán)境。

——埃里爾·沙里寧 (1873–1950)，芬蘭建筑師