2021-1-13 鶴鶴
今天想要和大家分享的是一個 Ant Design 的設計資產「列表」。它是企業級產品頁面中重要的組成部分，幾乎所有的產品都會用到它。
隨著企業級產品復雜業務場景的增量，Ant Design 的列表覆蓋度也受到了很大的挑戰，很多設計師說現有的組件和交互模式無法滿足他們的業務場景，導致他們需要重新設計列表，帶來了額外的設計和開發成本，同時對于全域產品的體驗一致性也帶來了挑戰。因此，我們決定一探究竟，去看看列表的底層基因到底是什么樣子，我們應該如何提高通用性和覆蓋度。
表格、列表、卡片列表的區別
在研究列表之前，我們首先將表格、列表、卡片列表這三個資產，從用戶的交互行為、使用場景、資產結構三個維度進行了分析，并嘗試做了明確的定義和區分，避免后期在使用過程中的概念混淆。
（1）表格的定義
表格通常是以矩陣式布局呈現，強調信息的瀏覽性，趨向于展示多而復雜的數據。數據按照矩陣布局對齊，方便橫縱瀏覽以及研究數據之間的關系。
（2）列表的定義
列表通常以線性結構呈現，能交互式地展示眾多數據結構相同的條目，且擴展性強。通過列表，用戶更容易縱向掃讀來獲取宏觀信息，橫向瀏覽來了解單個條目的細節信息并進行相關操作。
（3）卡片式列表的定義
卡片列表通常以網格布局呈現，用于承載數據間相互獨立的信息，擴展性大且個性化強。通過卡片列表，用戶會更聚焦于單個卡片的概覽內容，且很少會進行卡片間的數據對比，而是對單個卡片的數據信息進行查閱，并決定是否進行操作。
列表的構成
在清楚的定義了什么是列表之后，我們開始去思考一個列表的底層結構到底會是什么樣？經過幾輪的討論和試錯，我們得到了如上圖所示三層結構，它們分別是容器層、容器功能層、內容層。
容器層：容器層像一個盒子，它的大小、形狀決定了這個容器承載內容的體量，因此我們將列表的容器層默認值定義為一個寬1184px，高為44px的矩形。用戶可以根據業務需求調整其高度和寬度。
容器功能層：容器功能層象一個盒子的手提帶，用戶只要提起這個帶子，整個盒子就會被拎起來。也就是說，這個容器功能層是整個列表的全局操作。
內容層：內容層像放入盒子里的各種物件，用戶可以根據自己的需求在這個盒子里填滿各種東西，并在盒子外面貼上一些標簽，來告知盒子里都有些什么，當用戶需要查看具體的東西時，就可以打開這個盒子。
通過三個層次的劃分，我們可以清晰的定義每個層次的內容及具體的職能是什么，這有利于我們后期面對復雜業務場景和海量信息內容時，可以更好的去歸納和組織信息的呈現，于此同時高度結構化的組織形式也是保持資產內在一致性的關鍵要素。
模式化設計方法 — 元素窮舉
在列表的構成中，我們清晰的定義了列表的底層結構以及其對應的職能，到目前為止，你可以把它想象成是一個空盒子。當然，僅有這樣一個空盒子是遠遠不夠的，接下來，我們要在這個有邊界的空盒子里合理的規劃物件的收納，以及思考對這個盒子，用戶會有哪些操作訴求。因此，我們有了許多新的疑問，例如：
企業級產品通常都會在這個列表中放些什么內容呢？
這些內容是否可以能被抽離出一些共同的特征和展示形式呢？
我們應該如何更好的組織這些內容，提升用戶的閱讀和操作體驗的同時更好的解決通用性和覆蓋率的問題呢？
為了解決這些疑惑，我們嘗試了很多種方法，最終總結了一個新方法：Ant Design 模式化設計 — 元素窮舉。（關于 Ant Design 模式化設計方法詳情，請查看此處。）
如上圖所示，在元素窮舉之前，首先我們嘗試思考了一個問題：當用戶看到一個列表時，它的瀏覽順序和閱讀習慣會時什么樣子的。通過分析發現，在信息瀏覽的場景中，通常人們會以從左到右，從上至下的順序進行信息的瀏覽。于此同時，人們在獲取信息時，更習慣于先了解信息概要，再查看細節，最后作出判斷或決策。那么，基于以上兩個維度的分析，我們嘗試將單個列表條目的內容層進行區塊的劃分，得到了如下圖所示的三個區域：主題區、關鍵信息區、操作區。
主題區：主要呈現的是一些信息概覽，包括標題、時間、備注等信息，用戶看到這里就可以快速的對當前列表產生信息的認知。
關鍵信息區：該區是對列表中詳情數據的高度提煉，主要呈現一些關鍵信息，幫助用戶對列表內容進行知悉，輔助其更好的進行下一步的決策與操作。
操作區：基于業務的需求，放置相關的操作按鈕，從而達到產品的運作和流轉。
在完成區塊的劃分和具體的職能之后，我們開始思考，每個區域應該要有什么樣的元素才能夠更好更直接的展示列表信息，在此期間，我們例遍了上百個列表頁面，并開展了一次腦爆會，對每個區域的內容進行了元素的窮舉。
如上圖所示，我們在上百個頁面中梳理并抽取了每個區域可能出現的元素，并整理出一些通用性強，覆蓋率高的元素進行組件化。保證后期設計師在結合不同場景使用時的拼裝和靈活替換。此外，三個區的元素都有各自明顯的特征性，例如在主題區中的元素更加簡練、概括和基礎。而在關鍵信息區，展示的元素相對更加豐富，如我們會通過 Mini Chart 來向用戶展示一些數據信息，通過進度條來向用戶展示數據處理進度，通過標簽來向用戶呈現數據的分類或重要程度等。在操作區，我們也設定了一些展示規則，例如純字段的展示、圖標的展示以及弱化操作的展示方式等等。
梳理完內容層的信息之后，我們也對容器功能層結合業務場景，進行了窮舉，賦予了四個常用功能，分別是：排序、勾選、展開和置頂。如上圖所示，我們將對條目容器全局性的操作放在了條目的最前面，這有利于對多個條目進行批量操作，于此同時也和尾部的業務操作做一個顯著的區分。
基于元素窮舉的方法，我們系統全面的梳理了列表在內容層和容器功能層的底層元素，通過這些元素的自由搭配組合，就可以生長出基于業務場景下的不同列表。他們有著相同的底層邏輯和規則，卻有著不同的外在視覺和功能。
列表的布局及交互規則
（1）內容層的布局規則
通過元素窮舉的方法，我們更清晰的梳理了不同區塊可能出現的視覺元素和信息內容，更合理的排布了整體的信息展示順序。到此為止，我們可以很好的解決內容層的覆蓋度問題。但是，我們發現，除了內容層的樣式以外，還有很多細節問題有待解決。例如：并不是所有的業務都需要將單個條目分為3個區域?；谶@個問題，我們制定了一系列的排布規則，詳細的說明內容層三個區域搭配的具體規則，如下圖所示。
動態演繹
（2）容器功能層的布局規則
為了保證這四個功能的擺放不影響主題區的信息展示，我們制定了一系列的間距規則，保證在四個功能都存在的場景下，有一個較優的展示方案。具體內容如下動態演示圖。
列表的視覺案例
根據以上的交互規則和相關的組件元素，設計師可以根據自己的業務需求進行拼裝優化。如下圖所示，動態演繹中展示了單行條目的一些規則變化。你可以添加圖標、添加Tag；在關鍵信息區你可以增加進度條等。
當你需要展示的信息較多時，可以對容器層的高度進行擴展，變成雙行甚至是多行。如下圖所示，動態演繹圖中展示了兩行的列表是如何展示數據的。
單行列表的展示樣式，如下圖所示。
總結
以上就是本次分享的全部內容，相信大家看完之后可以理解“表里不一”的概念了。所謂的“表”是指在UI層面的視覺元素表現，我們通過元素窮舉的方式，來抽離通用性強、覆蓋率高的元素，將這些元素設計成一個個的UI組件，設計師可以根據自己的業務場景自由拼裝組合，得到一個幻化萬千的的外表。
所謂的“里”指的是資產的內在結構和交互規則，我們可以將其定義為是一個設計公式，其包括了對列表的區塊劃分、間距規則、響應式規則等。大家可以通過這個公式來制定自己的資產規則，從而保證產品的內在體驗一致性，交互一致性，減少用戶的學習成本和試錯成本。目前整套規則和資產已經在螞蟻內部的企業級產品開始推行使用了半年，整理來看，設計師通過以上的規則以及相關組件的自由搭配組合，業務場景的覆蓋率能夠達到80%以上，大大提升了設計的效率，于此同時，結構化的交互邏輯和標準化的組件與開發形成了精準的同步，提升了研發效能，從而促進整個產品研發效率的提升。
最后，感謝你的花費寶貴的時間閱讀這篇文章，希望可以給你帶來一些啟發。我們非常期待設計師體驗和使用Ant Design 4.0 的設計資產，同時也能全面了解這些資產背后我們的思考和一些小經驗。當你發現我們的設計資產無法滿足你的業務場景時，也可以通過這些方法和步驟，創造屬于你們團隊自己的設計資產。
文章來源：站酷 作者：Ant_Design
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務