如何設計一個合適的列表

1 評論 8626 瀏覽 22 收藏 18 分鐘

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

我們平均每天會瀏覽多少個列表?

為了得到一個相對真實的數(shù)據(jù),我對身邊7個來自互聯(lián)網(wǎng)、金融、建筑、醫(yī)療等不同行業(yè)的朋友進行了調(diào)研。根據(jù)抽樣調(diào)查的結(jié)果顯示,這個數(shù)值在180左右。且超過70%的人,每天瀏覽列表的數(shù)量數(shù)大于150個。

這是一個挺出乎意料的結(jié)果。這說明,雖然我們每天都在各種不同的產(chǎn)品中使用“列表”這種形式的構(gòu)成,但是我們并沒有真正意識到“列表”在產(chǎn)品中的重要作用。

所有的產(chǎn)品都和列表有關系:

根據(jù)前面的調(diào)查顯示,這幾個朋友日常瀏覽的產(chǎn)品,其品類有社交、資訊、工具、娛樂等,幾乎涵蓋了大部分的領域;而且我相信,隨著樣本數(shù)量的增加,這些品類只會越豐富、越完整。

比方說,我們?nèi)粘J褂玫牧奶燔浖?,微信和QQ,它們里面就包含了不少列表,如:聊天室列表、聯(lián)系人列表、朋友圈的朋友動態(tài)列表等;還有我們閑暇時刻殺時間用的資訊軟件和視頻軟件,比如今日頭條、抖音和快手,它們里面也有不少列表,如:文章列表、視頻列表、創(chuàng)作者列表、音樂列表等。

這些列表的形態(tài)各異、結(jié)構(gòu)紛呈、用途不一,但無一列外的是,它們都在不同場景下向用戶呈現(xiàn)了豐富且有用的信息,同時還在用戶和數(shù)據(jù)之間架起了溝通的橋梁。

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

在互聯(lián)網(wǎng)世界里,最重要的當然是信息。從技術的角度來看,這些紛繁復雜的信息都儲存在一張張看不見的數(shù)據(jù)表中;而最初的列表,正是由這些數(shù)據(jù)表演化而來;這就意味著,列表在數(shù)據(jù)存儲方面,有著其他結(jié)構(gòu)所不具有的技術優(yōu)越性。

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

它們的普遍存在隱含了一個我們必須面對的問題,那就是我們?nèi)绾螢槊恳粋€不同的場景設計一個合適的列表?

接下來,我將帶著大家一起探索列表的本質(zhì),并向大家展示一個合適的列表該有的樣子;然后我會結(jié)合一個實戰(zhàn)案例,分享列表的設計過程。

一、認識列表

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

原因也許是前面提到的,列表這一結(jié)構(gòu)在技術上的優(yōu)越性,那么這種結(jié)構(gòu)又是由什么元素組成的呢?我認為有三種,分別是:數(shù)據(jù)、布局和操作。

1. 數(shù)據(jù)

如果不去看前端界面的表現(xiàn),直接通過接口去獲取列表的數(shù)據(jù)返回,我們會發(fā)現(xiàn),這些“列表”是由多條結(jié)構(gòu)類似的數(shù)據(jù)組成的,它們組成了一個有序排列的信息合集。

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

最大的特點是數(shù)據(jù)結(jié)構(gòu)的相似性。例如電商平臺的訂單列表,每一行數(shù)據(jù)中哪些是引用、哪些是數(shù)組、哪些是擴展字段等,這些大都是一樣的。

第二個特點是數(shù)據(jù)排列的有序性。這里的順序,代表的是數(shù)據(jù)展現(xiàn)給用戶的先后次序,一般會按照時間、數(shù)量、類型等數(shù)據(jù)的典型特點來排序,便于用戶的理解和使用。

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

2. 布局

如果數(shù)據(jù)是積木塊,那么它們之間的組織方式將決定積木整體的最終呈現(xiàn)結(jié)果。在零零散散的積木面前,我們產(chǎn)品人員就像一個堆積木的玩家,會努力把每一塊積木放置到合適的位置上,最終實現(xiàn)既定的目標。

這個過程要注意兩點。

第一,我們要保證信息結(jié)構(gòu)的合理性,也就是分清信息的類別和層級。這里舉一個場景,比如我們正在設計商品購買頁,現(xiàn)在需要展示的一個商品是“書”。

在這之前,我們收集到與這個商品有關的信息有:書名、作者、作者的詳情、書籍分類、價格;那么,按照信息的類別和層級,我們可以把這些信息組織成一張信息結(jié)構(gòu)圖,如下。

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

3. 操作

列表之所以能夠如此受歡迎,當然不只是用于展示信息而已,它更重要的表現(xiàn)在于近乎完美的交互體態(tài);無論是搜索、篩選還是排序,無論是單個操作、多個操作還是全選操作,列表的應對都游刃有余。

如果說對數(shù)據(jù)庫的增刪改查是一個程序員的浪漫,那么對列表的操作則是一個產(chǎn)品的藝術。這種藝術特質(zhì),可以反映在兩個方面上。

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

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

二、如何設計

列表的這三個元素是大部分場景下,一個合適的列表本該有的樣子,但這并不意味著它們?nèi)币徊豢伞N覀兞私馑臉?gòu)成,不是為了可以照本宣科地去設計的,而是為了在既定的場景中搭配出合適的樣子,需要具體情況具體分析。

這里有這么一個場景:在一個PC端的云文檔產(chǎn)品中,用戶儲存有許多文檔,其中不少開啟了分享,以便與他人協(xié)作;分享的方式雖然很便利,但是也存在安全隱患,因此用戶特別希望能有一個地方能夠?qū)@些分享出去的文檔進行統(tǒng)一管理。

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

1. 分析需要什么數(shù)據(jù)

首先,這是一個文件列表,那么對用戶來說最基本的一個數(shù)據(jù)就是文件的基礎信息,用于文件的識別,如文件名、文件圖標。

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

最明顯的一點就是“已經(jīng)開啟分享”,也就是說產(chǎn)生了分享的行為數(shù)據(jù),如分享鏈接、分享的對象(范圍)、分享出去的權(quán)限、分享鏈接的有效期。

除此之外,用戶肯定還會關心文件分享出去之后所產(chǎn)生的結(jié)果,比如文件通過分享鏈接的下載量和訪問量。

2. 梳理信息優(yōu)先級

整理好所需的數(shù)據(jù)之后,我們就可以開始定義數(shù)據(jù)的優(yōu)先級,并根據(jù)信息對用戶的重要程度來劃分。

在當前案例中,用戶的首要目的是“查找”,其次才是了解文件的分享信息和分享行為帶來的結(jié)果詳情;那么我們就能得出一個優(yōu)先級:輔助查找和定位的信息 > 解釋和詳情類信息。

然后,我們要按照優(yōu)先級歸類信息。

過程就不贅述了,我直接上圖:

3. 布局

經(jīng)過了前面兩步的分析,我們已經(jīng)知道用戶關心的內(nèi)容是什么,也知道了哪些信息應該重點突出;那么在第三步中,我們要做的是如何把這些信息有機結(jié)合起來。

一般來說,我們會參考一些比較成型的范式,通過套用與調(diào)整,最終形成合適的列表。

這里我介紹三種比較通用的列表范式:

1)行列式

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

這種列表的優(yōu)點在于結(jié)構(gòu)清晰且具有穩(wěn)定性、信息的定義清晰明了、沒有業(yè)務傾向且可塑性強;缺點在于單行能容納的信息不能太多,不然要么引起視覺疲勞,要么打破原有的結(jié)構(gòu)穩(wěn)定性;其次就是重點不突出,用戶的視覺焦點比較零散。

2)無列式

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

它的優(yōu)點是自上而下的信息布局符合大多數(shù)用戶的閱讀習慣;其次每個信息單元的獨立性強,因而信息單元內(nèi)的信息布局比較自由,可根據(jù)業(yè)務形態(tài)進行拓展;不過它的缺點也很明顯,就是信息的密度比較低,一屏內(nèi)所能展示的信息單元不多。

3)無行式

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

回到案例當中,如果我們把已有的信息往這三種范式中套用,那么就會發(fā)現(xiàn)行列式和無行式結(jié)構(gòu)的列表都不是最佳的。為什么呢?

首先,在這些數(shù)據(jù)當中,優(yōu)先級高的信息數(shù)量明顯少于優(yōu)先級低的信息,所以如果我們采用行列式結(jié)構(gòu),那么就會分散用戶視覺焦點到優(yōu)先級低的信息上,這是有悖于“查找”這一目標的;其次,用戶的核心訴求是“找到想要的東西”,而查找和定位需要列表的結(jié)構(gòu)具有穩(wěn)定性,那么穩(wěn)定性低的無行式結(jié)構(gòu)也就不適用了。

因此,我們選擇了在結(jié)構(gòu)上更穩(wěn)定、內(nèi)容布局比較自由的無列式結(jié)構(gòu)。

整體的框架定好了,那么每個信息單元的內(nèi)容應該如何布局呢?這里我們主要是根據(jù)用戶的視覺習慣來進行信息布置的。

在PC端,用戶的視覺焦點一般分布在左上、中部和右下,尤其左上。那么優(yōu)先級最高的信息,像圖標和文件名,就應該被放在這個位置上;而次要優(yōu)先級的信息,可以放在左下和右下,如分享信息和分享行為數(shù)據(jù)。

除了視覺焦點之外,我們還可以利用人對色彩和圖形的敏感性來調(diào)整信息的表現(xiàn)形式;例如,我們會根據(jù)文檔的不同類型去設計不同的圖標,便于用戶第一時間就能區(qū)分文件的類型;又比如,我們會采用不同的顏色來區(qū)分文字信息的重要程度,以便抓住用戶的眼球。

4. 功能操作

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

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

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

至于說管理,每個不同的列表場景對應的管理需求大相徑庭,無法一概而論。不過有一點是共通的,那就是管理行為本身是與列表的信息高度匹配的;例如,在已分享文件列表的場景中,用戶能管理的內(nèi)容其實是有限的,如分享的對象(范圍)、分享出去的權(quán)限、分享鏈接的有效期等;從這個角度出發(fā),那么用戶需要的管理操作無非就是修改分享行為、結(jié)束分享行為等。

三、結(jié)語

小事情中也有大學問,仔細回顧列表設計的整個過程,你會發(fā)現(xiàn),這里面的方法論和設計觀其實適用于很多地方。

在產(chǎn)品設計的領域里,沒有大小貴賤之分,你傾注到產(chǎn)品里的每一份感情,用戶都是能夠感知到的;只是這個世界太復雜,節(jié)奏也越來越快,大家的視線都聚焦在那些高大上的東西身上,很多細微的存在漸漸被人們遺忘。

我不希望人人如此,愿你我成為細節(jié)里的巨人。

 

本文由 @凌豐 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 學習到了~

    來自安徽 回復