隨著企業(yè)級產(chǎn)品復(fù)雜業(yè)務(wù)場景的增量，Ant Design 的列表覆蓋度也受到了很大的挑戰(zhàn)，很多設(shè)計師說現(xiàn)有的組件和交互模式無法滿足他們的業(yè)務(wù)場景，導(dǎo)致他們需要重新設(shè)計列表，帶來了額外的設(shè)計和開發(fā)成本，同時對于全域產(chǎn)品的體驗(yàn)一致性也帶來了挑戰(zhàn)。因此，我們決定一探究竟，去看看列表的底層基因到底是什么樣子，我們應(yīng)該如何提高通用性和覆蓋度。

表格、列表、卡片列表的區(qū)別

在研究列表之前，我們首先將表格、列表、卡片列表這三個資產(chǎn)，從用戶的交互行為、使用場景、資產(chǎn)結(jié)構(gòu)三個維度進(jìn)行了分析，并嘗試做了明確的定義和區(qū)分，避免后期在使用過程中的概念混淆。

 （1）表格的定義

表格通常是以矩陣式布局呈現(xiàn)，強(qiáng)調(diào)信息的瀏覽性，趨向于展示多而復(fù)雜的數(shù)據(jù)。數(shù)據(jù)按照矩陣布局對齊，方便橫縱瀏覽以及研究數(shù)據(jù)之間的關(guān)系。

（2）列表的定義

列表通常以線性結(jié)構(gòu)呈現(xiàn)，能交互式地展示眾多數(shù)據(jù)結(jié)構(gòu)相同的條目，且擴(kuò)展性強(qiáng)。通過列表，用戶更容易縱向掃讀來獲取宏觀信息，橫向?yàn)g覽來了解單個條目的細(xì)節(jié)信息并進(jìn)行相關(guān)操作。

（3）卡片式列表的定義

卡片列表通常以網(wǎng)格布局呈現(xiàn)，用于承載數(shù)據(jù)間相互獨(dú)立的信息，擴(kuò)展性大且個性化強(qiáng)。通過卡片列表，用戶會更聚焦于單個卡片的概覽內(nèi)容，且很少會進(jìn)行卡片間的數(shù)據(jù)對比，而是對單個卡片的數(shù)據(jù)信息進(jìn)行查閱，并決定是否進(jìn)行操作。

列表的構(gòu)成

在清楚的定義了什么是列表之后，我們開始去思考一個列表的底層結(jié)構(gòu)到底會是什么樣？經(jīng)過幾輪的討論和試錯，我們得到了如上圖所示三層結(jié)構(gòu)，它們分別是容器層、容器功能層、內(nèi)容層。

• 容器層：容器層像一個盒子，它的大小、形狀決定了這個容器承載內(nèi)容的體量，因此我們將列表的容器層默認(rèn)值定義為一個寬1184px，高為44px的矩形。用戶可以根據(jù)業(yè)務(wù)需求調(diào)整其高度和寬度。

• 容器功能層：容器功能層象一個盒子的手提帶，用戶只要提起這個帶子，整個盒子就會被拎起來。也就是說，這個容器功能層是整個列表的全局操作。

• 內(nèi)容層：內(nèi)容層像放入盒子里的各種物件，用戶可以根據(jù)自己的需求在這個盒子里填滿各種東西，并在盒子外面貼上一些標(biāo)簽，來告知盒子里都有些什么，當(dāng)用戶需要查看具體的東西時，就可以打開這個盒子。

  
  

通過三個層次的劃分，我們可以清晰的定義每個層次的內(nèi)容及具體的職能是什么，這有利于我們后期面對復(fù)雜業(yè)務(wù)場景和海量信息內(nèi)容時，可以更好的去歸納和組織信息的呈現(xiàn)，于此同時高度結(jié)構(gòu)化的組織形式也是保持資產(chǎn)內(nèi)在一致性的關(guān)鍵要素。

模式化設(shè)計方法 — 元素窮舉

在列表的構(gòu)成中，我們清晰的定義了列表的底層結(jié)構(gòu)以及其對應(yīng)的職能，到目前為止，你可以把它想象成是一個空盒子。當(dāng)然，僅有這樣一個空盒子是遠(yuǎn)遠(yuǎn)不夠的，接下來，我們要在這個有邊界的空盒子里合理的規(guī)劃物件的收納，以及思考對這個盒子，用戶會有哪些操作訴求。因此，我們有了許多新的疑問，例如：

• 企業(yè)級產(chǎn)品通常都會在這個列表中放些什么內(nèi)容呢？

• 這些內(nèi)容是否可以能被抽離出一些共同的特征和展示形式呢？

• 我們應(yīng)該如何更好的組織這些內(nèi)容，提升用戶的閱讀和操作體驗(yàn)的同時更好的解決通用性和覆蓋率的問題呢？

  
  

為了解決這些疑惑，我們嘗試了很多種方法，最終總結(jié)了一個新方法：Ant Design 模式化設(shè)計 — 元素窮舉。（關(guān)于 Ant Design 模式化設(shè)計方法詳情，請查看此處。）

 

如上圖所示，在元素窮舉之前，首先我們嘗試思考了一個問題：當(dāng)用戶看到一個列表時，它的瀏覽順序和閱讀習(xí)慣會時什么樣子的。通過分析發(fā)現(xiàn)，在信息瀏覽的場景中，通常人們會以從左到右，從上至下的順序進(jìn)行信息的瀏覽。于此同時，人們在獲取信息時，更習(xí)慣于先了解信息概要，再查看細(xì)節(jié)，最后作出判斷或決策。那么，基于以上兩個維度的分析，我們嘗試將單個列表條目的內(nèi)容層進(jìn)行區(qū)塊的劃分，得到了如下圖所示的三個區(qū)域：主題區(qū)、關(guān)鍵信息區(qū)、操作區(qū)。

• 主題區(qū)：主要呈現(xiàn)的是一些信息概覽，包括標(biāo)題、時間、備注等信息，用戶看到這里就可以快速的對當(dāng)前列表產(chǎn)生信息的認(rèn)知。

• 關(guān)鍵信息區(qū)：該區(qū)是對列表中詳情數(shù)據(jù)的高度提煉，主要呈現(xiàn)一些關(guān)鍵信息，幫助用戶對列表內(nèi)容進(jìn)行知悉，輔助其更好的進(jìn)行下一步的決策與操作。

• 操作區(qū)：基于業(yè)務(wù)的需求，放置相關(guān)的操作按鈕，從而達(dá)到產(chǎn)品的運(yùn)作和流轉(zhuǎn)。

 

在完成區(qū)塊的劃分和具體的職能之后，我們開始思考，每個區(qū)域應(yīng)該要有什么樣的元素才能夠更好更直接的展示列表信息，在此期間，我們例遍了上百個列表頁面，并開展了一次腦爆會，對每個區(qū)域的內(nèi)容進(jìn)行了元素的窮舉。

 

如上圖所示，我們在上百個頁面中梳理并抽取了每個區(qū)域可能出現(xiàn)的元素，并整理出一些通用性強(qiáng)，覆蓋率高的元素進(jìn)行組件化。保證后期設(shè)計師在結(jié)合不同場景使用時的拼裝和靈活替換。此外，三個區(qū)的元素都有各自明顯的特征性，例如在主題區(qū)中的元素更加簡練、概括和基礎(chǔ)。而在關(guān)鍵信息區(qū)，展示的元素相對更加豐富，如我們會通過 Mini Chart 來向用戶展示一些數(shù)據(jù)信息，通過進(jìn)度條來向用戶展示數(shù)據(jù)處理進(jìn)度，通過標(biāo)簽來向用戶呈現(xiàn)數(shù)據(jù)的分類或重要程度等。在操作區(qū)，我們也設(shè)定了一些展示規(guī)則，例如純字段的展示、圖標(biāo)的展示以及弱化操作的展示方式等等。

 

梳理完內(nèi)容層的信息之后，我們也對容器功能層結(jié)合業(yè)務(wù)場景，進(jìn)行了窮舉，賦予了四個常用功能，分別是：排序、勾選、展開和置頂。如上圖所示，我們將對條目容器全局性的操作放在了條目的最前面，這有利于對多個條目進(jìn)行批量操作，于此同時也和尾部的業(yè)務(wù)操作做一個顯著的區(qū)分。

基于元素窮舉的方法，我們系統(tǒng)全面的梳理了列表在內(nèi)容層和容器功能層的底層元素，通過這些元素的自由搭配組合，就可以生長出基于業(yè)務(wù)場景下的不同列表。他們有著相同的底層邏輯和規(guī)則，卻有著不同的外在視覺和功能。

列表的布局及交互規(guī)則

（1）內(nèi)容層的布局規(guī)則

通過元素窮舉的方法，我們更清晰的梳理了不同區(qū)塊可能出現(xiàn)的視覺元素和信息內(nèi)容，更合理的排布了整體的信息展示順序。到此為止，我們可以很好的解決內(nèi)容層的覆蓋度問題。但是，我們發(fā)現(xiàn)，除了內(nèi)容層的樣式以外，還有很多細(xì)節(jié)問題有待解決。例如：并不是所有的業(yè)務(wù)都需要將單個條目分為3個區(qū)域。基于這個問題，我們制定了一系列的排布規(guī)則，詳細(xì)的說明內(nèi)容層三個區(qū)域搭配的具體規(guī)則，如下圖所示。

 

動態(tài)演繹

 

（2）容器功能層的布局規(guī)則

為了保證這四個功能的擺放不影響主題區(qū)的信息展示，我們制定了一系列的間距規(guī)則，保證在四個功能都存在的場景下，有一個較優(yōu)的展示方案。具體內(nèi)容如下動態(tài)演示圖。

 

列表的視覺案例

根據(jù)以上的交互規(guī)則和相關(guān)的組件元素，設(shè)計師可以根據(jù)自己的業(yè)務(wù)需求進(jìn)行拼裝優(yōu)化。如下圖所示，動態(tài)演繹中展示了單行條目的一些規(guī)則變化。你可以添加圖標(biāo)、添加Tag；在關(guān)鍵信息區(qū)你可以增加進(jìn)度條等。

 

當(dāng)你需要展示的信息較多時，可以對容器層的高度進(jìn)行擴(kuò)展，變成雙行甚至是多行。如下圖所示，動態(tài)演繹圖中展示了兩行的列表是如何展示數(shù)據(jù)的。

 

單行列表的展示樣式，如下圖所示。

 

 

總結(jié)

以上就是本次分享的全部內(nèi)容，相信大家看完之后可以理解“表里不一”的概念了。所謂的“表”是指在UI層面的視覺元素表現(xiàn)，我們通過元素窮舉的方式，來抽離通用性強(qiáng)、覆蓋率高的元素，將這些元素設(shè)計成一個個的UI組件，設(shè)計師可以根據(jù)自己的業(yè)務(wù)場景自由拼裝組合，得到一個幻化萬千的的外表。

所謂的“里”指的是資產(chǎn)的內(nèi)在結(jié)構(gòu)和交互規(guī)則，我們可以將其定義為是一個設(shè)計公式，其包括了對列表的區(qū)塊劃分、間距規(guī)則、響應(yīng)式規(guī)則等。大家可以通過這個公式來制定自己的資產(chǎn)規(guī)則，從而保證產(chǎn)品的內(nèi)在體驗(yàn)一致性，交互一致性，減少用戶的學(xué)習(xí)成本和試錯成本。目前整套規(guī)則和資產(chǎn)已經(jīng)在螞蟻內(nèi)部的企業(yè)級產(chǎn)品開始推行使用了半年，整理來看，設(shè)計師通過以上的規(guī)則以及相關(guān)組件的自由搭配組合，業(yè)務(wù)場景的覆蓋率能夠達(dá)到80%以上，大大提升了設(shè)計的效率，于此同時，結(jié)構(gòu)化的交互邏輯和標(biāo)準(zhǔn)化的組件與開發(fā)形成了精準(zhǔn)的同步，提升了研發(fā)效能，從而促進(jìn)整個產(chǎn)品研發(fā)效率的提升。

最后，感謝你的花費(fèi)寶貴的時間閱讀這篇文章，希望可以給你帶來一些啟發(fā)。我們非常期待設(shè)計師體驗(yàn)和使用Ant Design 4.0 的設(shè)計資產(chǎn)，同時也能全面了解這些資產(chǎn)背后我們的思考和一些小經(jīng)驗(yàn)。當(dāng)你發(fā)現(xiàn)我們的設(shè)計資產(chǎn)無法滿足你的業(yè)務(wù)場景時，也可以通過這些方法和步驟，創(chuàng)造屬于你們團(tuán)隊自己的設(shè)計資產(chǎn)。

文章來源：站酷  作者：Ant_Design

藍(lán)藍(lán)設(shè)計( www.lzhte.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)