編輯導語：在我們的日常生活和工作中，就會看到非常多的列表，最常見的也就是消息列表、聯系人列表之類的，每個列表的功能和表達的信息都有所不同；本文作者分享了關于專門設計一個合适的列表，我們一起來了解一下。

我們平均每天會浏覽多少個列表？

為了得到一個相對真實的數據，我對身邊7個來自互聯網、金融、建築、醫療等不同行業的朋友進行了調研。根據抽樣調查的結果顯示，這個數值在180左右。且超過70%的人，每天浏覽列表的數量數大于150個。

這是一個挺出乎意料的結果。這說明，雖然我們每天都在各種不同的産品中使用“列表”這種形式的構成，但是我們并沒有真正意識到“列表”在産品中的重要作用。

所有的産品都和列表有關系：

根據前面的調查顯示，這幾個朋友日常浏覽的産品，其品類有社交、資訊、工具、娛樂等，幾乎涵蓋了大部分的領域；而且我相信，随着樣本數量的增加，這些品類隻會越豐富、越完整。

比方說，我們日常使用的聊天軟件，微信和QQ，它們裡面就包含了不少列表，如：聊天室列表、聯系人列表、朋友圈的朋友動态列表等；還有我們閑暇時刻殺時間用的資訊軟件和視頻軟件，比如今日頭條、抖音和快手，它們裡面也有不少列表，如：文章列表、視頻列表、創作者列表、音樂列表等。

這些列表的形态各異、結構紛呈、用途不一，但無一列外的是，它們都在不同場景下向用戶呈現了豐富且有用的信息，同時還在用戶和數據之間架起了溝通的橋梁。

列表是信息承載的自然選擇：

在互聯網世界裡，最重要的當然是信息。從技術的角度來看，這些紛繁複雜的信息都儲存在一張張看不見的數據表中；而最初的列表，正是由這些數據表演化而來；這就意味着，列表在數據存儲方面，有着其他結構所不具有的技術優越性。

正是出于這一點，列表被大量的應用到了不同的信息展示和交互場景中，而且都很好的起到的信息承載的作用。

它們的普遍存在隐含了一個我們必須面對的問題，那就是我們如何為每一個不同的場景設計一個合适的列表？

接下來，我将帶着大家一起探索列表的本質，并向大家展示一個合适的列表該有的樣子；然後我會結合一個實戰案例，分享列表的設計過程。

一、認識列表

列表的普遍程度遠超我們的想象，已經達到了能夠潛移默化地走進每一個産品的地步。有時候，我們在設計過程中應用“列表”來承載數據時，并沒有去想太多，也不會去深究為什麼要這麼做，仿佛這一切都是天經地義。

原因也許是前面提到的，列表這一結構在技術上的優越性，那麼這種結構又是由什麼元素組成的呢？我認為有三種，分别是：數據、布局和操作。

1. 數據

如果不去看前端界面的表現，直接通過接口去獲取列表的數據返回，我們會發現，這些“列表”是由多條結構類似的數據組成的，它們組成了一個有序排列的信息合集。

這個信息合集有三大特點。

最大的特點是數據結構的相似性。例如電商平台的訂單列表，每一行數據中哪些是引用、哪些是數組、哪些是擴展字段等，這些大都是一樣的。

第二個特點是數據排列的有序性。這裡的順序，代表的是數據展現給用戶的先後次序，一般會按照時間、數量、類型等數據的典型特點來排序，便于用戶的理解和使用。

最後一個特點是數據的充分必要性。換句話來說就是，接口返回的數據既要充分滿足前端展示的需要，又要保證每個數據的存在都是合理的。這是非常容易理解，但有時候特别難做到的一點。

2. 布局

如果數據是積木塊，那麼它們之間的組織方式将決定積木整體的最終呈現結果。在零零散散的積木面前，我們産品人員就像一個堆積木的玩家，會努力把每一塊積木放置到合适的位置上，最終實現既定的目标。

這個過程要注意兩點。

第一，我們要保證信息結構的合理性，也就是分清信息的類别和層級。這裡舉一個場景，比如我們正在設計商品購買頁，現在需要展示的一個商品是“書”。

在這之前，我們收集到與這個商品有關的信息有：書名、作者、作者的詳情、書籍分類、價格；那麼，按照信息的類别和層級，我們可以把這些信息組織成一張信息結構圖，如下。

第二，我們要遵循人類視覺的規律；比如，人的視覺範圍是有一定限度的，超過這個範圍的區域是人的視覺盲區，我們不應該把重要的内容放到這裡；又比如，人對文字感知的敏感程度遠比對圖形的低，所以一些需要突出重點的内容，可以應用圖形的方案；再比如，不同的色彩能給人帶來不同的情緒，紅色是熱情、藍色是冷靜、黑色是莊重等，這些都可以合理利用。

3. 操作

列表之所以能夠如此受歡迎，當然不隻是用于展示信息而已，它更重要的表現在于近乎完美的交互體态；無論是搜索、篩選還是排序，無論是單個操作、多個操作還是全選操作，列表的應對都遊刃有餘。

如果說對數據庫的增删改查是一個程序員的浪漫，那麼對列表的操作則是一個産品的藝術。這種藝術特質，可以反映在兩個方面上。

一方面，操作要符合場景。這裡的場景，更多的是交互場景；比方說你在搜索一個超市的時候，出來了一個商超的列表，這時候你看到表頭裡有“距離”這項；這時候大部分用戶的想法，可能就是希望列表能夠按照“距離”這個項來進行排序，那麼我們理所應當把篩選的操作放到“距離”上面，而不是去其他地方放一個篩選項（比如列表的頭部操作區域）。

另一方面，操作是必要的。在理論的角度來看，任何列表都可以增删改查。可一旦列表處于某些場景中時，我們就需要隐藏一些不合時宜的行為；比如買家看到商家的商品列表時，不能改删除商品。相反，如果列表處于另一些場景中時，我們可能要去豐富基礎的操作；比如同樣是買家查看商品列表，我們需要提供多維度的篩選和排序方式，以供用戶快速找到合适的商品。

二、如何設計

列表的這三個元素是大部分場景下，一個合适的列表本該有的樣子，但這并不意味着它們缺一不可。我們了解它的構成，不是為了可以照本宣科地去設計的，而是為了在既定的場景中搭配出合适的樣子，需要具體情況具體分析。

這裡有這麼一個場景：在一個PC端的雲文檔産品中，用戶儲存有許多文檔，其中不少開啟了分享，以便與他人協作；分享的方式雖然很便利，但是也存在安全隐患，因此用戶特别希望能有一個地方能夠對這些分享出去的文檔進行統一管理。

如果是你，你會怎麼去設計這個“已分享文件”的管理列表呢？這裡我給出我自己的答案。

1. 分析需要什麼數據

首先，這是一個文件列表，那麼對用戶來說最基本的一個數據就是文件的基礎信息，用于文件的識别，如文件名、文件圖标。

其次，從需求背景來看，用戶的核心訴求在于“找到想要的東西”并加以管理，而這個“東西”就是已分享出去的文件。那麼這種文件有什麼特征呢？

最明顯的一點就是“已經開啟分享”，也就是說産生了分享的行為數據，如分享鍊接、分享的對象（範圍）、分享出去的權限、分享鍊接的有效期。

除此之外，用戶肯定還會關心文件分享出去之後所産生的結果，比如文件通過分享鍊接的下載量和訪問量。

2. 梳理信息優先級

整理好所需的數據之後，我們就可以開始定義數據的優先級，并根據信息對用戶的重要程度來劃分。

在當前案例中，用戶的首要目的是“查找”，其次才是了解文件的分享信息和分享行為帶來的結果詳情；那麼我們就能得出一個優先級：輔助查找和定位的信息 > 解釋和詳情類信息。

然後，我們要按照優先級歸類信息。

過程就不贅述了，我直接上圖：

3. 布局

經過了前面兩步的分析，我們已經知道用戶關心的内容是什麼，也知道了哪些信息應該重點突出；那麼在第三步中，我們要做的是如何把這些信息有機結合起來。

一般來說，我們會參考一些比較成型的範式，通過套用與調整，最終形成合适的列表。

這裡我介紹三種比較通用的列表範式：

1）行列式

最大的特點是每個行列的交點形成獨立的信息單元，也叫表格。

這種列表的優點在于結構清晰且具有穩定性、信息的定義清晰明了、沒有業務傾向且可塑性強；缺點在于單行能容納的信息不能太多，不然要麼引起視覺疲勞，要麼打破原有的結構穩定性；其次就是重點不突出，用戶的視覺焦點比較零散。

2）無列式

沒有嚴格意義上的列，每個單元自為整體，也叫信息流、feed流列表。

它的優點是自上而下的信息布局符合大多數用戶的閱讀習慣；其次每個信息單元的獨立性強，因而信息單元内的信息布局比較自由，可根據業務形态進行拓展；不過它的缺點也很明顯，就是信息的密度比較低，一屏内所能展示的信息單元不多。

3）無行式

沒有嚴格意義上的行，每個單元自為整體，一般也叫瀑布流。這種列表在保留了信息流列表絕大多數優點的前提下，解決了信息單元密度低的問題。代價就是要求大屏幕，且缺乏結構的穩定性。

回到案例當中，如果我們把已有的信息往這三種範式中套用，那麼就會發現行列式和無行式結構的列表都不是最佳的。為什麼呢？

首先，在這些數據當中，優先級高的信息數量明顯少于優先級低的信息，所以如果我們采用行列式結構，那麼就會分散用戶視覺焦點到優先級低的信息上，這是有悖于“查找”這一目标的；其次，用戶的核心訴求是“找到想要的東西”，而查找和定位需要列表的結構具有穩定性，那麼穩定性低的無行式結構也就不适用了。

因此，我們選擇了在結構上更穩定、内容布局比較自由的無列式結構。

整體的框架定好了，那麼每個信息單元的内容應該如何布局呢？這裡我們主要是根據用戶的視覺習慣來進行信息布置的。

在PC端，用戶的視覺焦點一般分布在左上、中部和右下，尤其左上。那麼優先級最高的信息，像圖标和文件名，就應該被放在這個位置上；而次要優先級的信息，可以放在左下和右下，如分享信息和分享行為數據。

除了視覺焦點之外，我們還可以利用人對色彩和圖形的敏感性來調整信息的表現形式；例如，我們會根據文檔的不同類型去設計不同的圖标，便于用戶第一時間就能區分文件的類型；又比如，我們會采用不同的顔色來區分文字信息的重要程度，以便抓住用戶的眼球。

4. 功能操作

如果說前面的三步我們都在研究用戶想要“看”什麼，那麼在最後這一步中，我們要分析的是用戶想要對列表“做”什麼。

在本文的案例中，用戶想要做的事情前面其實已經提到過，是“找到想要的東西”并加以管理，簡單來說，就是查詢和管理。

說到查詢，不得不提“search全家桶”：搜索、篩選和排序。它們分别滿足了三種不同的場景，搜索滿足的是用戶隻模糊記得文件名的場景、篩選滿足的是用戶通過文件的特性減少列表結果的場景、排序滿足的是用戶根據自己關心的信息去改變列表信息展示優先級的場景，這三者的作用無一例外都是為了提高用戶的查詢效率。

至于說管理，每個不同的列表場景對應的管理需求大相徑庭，無法一概而論。不過有一點是共通的，那就是管理行為本身是與列表的信息高度匹配的；例如，在已分享文件列表的場景中，用戶能管理的内容其實是有限的，如分享的對象（範圍）、分享出去的權限、分享鍊接的有效期等；從這個角度出發，那麼用戶需要的管理操作無非就是修改分享行為、結束分享行為等。

三、結語

小事情中也有大學問，仔細回顧列表設計的整個過程，你會發現，這裡面的方法論和設計觀其實适用于很多地方。

在産品設計的領域裡，沒有大小貴賤之分，你傾注到産品裡的每一份感情，用戶都是能夠感知到的；隻是這個世界太複雜，節奏也越來越快，大家的視線都聚焦在那些高大上的東西身上，很多細微的存在漸漸被人們遺忘。

我不希望人人如此，願你我成為細節裡的巨人。

本文由 @淩豐 原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部