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

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

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

 （1）表格的定義

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

（2）列表的定義

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

（3）卡片式列表的定義

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

列表的構(gòu)成

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

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

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

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

  
  

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

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

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

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

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

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

  
  

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

 

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

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

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

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

 

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

 

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

 

梳理完內(nèi)容層的信息之后，我們也對容器功能層結(jié)合業(yè)務(wù)場景，進行了窮舉，賦予了四個常用功能，分別是：排序、勾選、展開和置頂。如上圖所示，我們將對條目容器全局性的操作放在了條目的最前面，這有利于對多個條目進行批量操作，于此同時也和尾部的業(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)容層的樣式以外，還有很多細節(jié)問題有待解決。例如：并不是所有的業(yè)務(wù)都需要將單個條目分為3個區(qū)域?；谶@個問題，我們制定了一系列的排布規(guī)則，詳細的說明內(nèi)容層三個區(qū)域搭配的具體規(guī)則，如下圖所示。

 

動態(tài)演繹

 

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

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

 

列表的視覺案例

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

 

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

 

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

 

 

總結(jié)

以上就是本次分享的全部內(nèi)容，相信大家看完之后可以理解“表里不一”的概念了。所謂的“表”是指在UI層面的視覺元素表現(xiàn)，我們通過元素窮舉的方式，來抽離通用性強、覆蓋率高的元素，將這些元素設(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)在體驗一致性，交互一致性，減少用戶的學習成本和試錯成本。目前整套規(guī)則和資產(chǎn)已經(jīng)在螞蟻內(nèi)部的企業(yè)級產(chǎn)品開始推行使用了半年，整理來看，設(shè)計師通過以上的規(guī)則以及相關(guān)組件的自由搭配組合，業(yè)務(wù)場景的覆蓋率能夠達到80%以上，大大提升了設(shè)計的效率，于此同時，結(jié)構(gòu)化的交互邏輯和標準化的組件與開發(fā)形成了精準的同步，提升了研發(fā)效能，從而促進整個產(chǎn)品研發(fā)效率的提升。

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

文章來源：站酷  作者：Ant_Design

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