两个人www高清免费视频,欧美激情videos hd

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會(huì)員專屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊 | 登錄

如何設(shè)計(jì)一個(gè)合適的列表

凌豐

2021-04-16

1 評論 8626 瀏覽 22 收藏

18 分鐘

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

我們平均每天會(huì)瀏覽多少個(gè)列表？

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

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

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

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

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

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

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

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

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

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

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

一、認(rèn)識(shí)列表

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

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

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

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

這個(gè)信息合集有三大特點(diǎn)。

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

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

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

2. 布局

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

這個(gè)過程要注意兩點(diǎn)。

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

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

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

3. 操作

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

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

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

另一方面，操作是必要的。在理論的角度來看，任何列表都可以增刪改查?？梢坏┝斜硖幱谀承﹫鼍爸袝r(shí)，我們就需要隱藏一些不合時(shí)宜的行為；比如買家看到商家的商品列表時(shí)，不能改刪除商品。相反，如果列表處于另一些場景中時(shí)，我們可能要去豐富基礎(chǔ)的操作；比如同樣是買家查看商品列表，我們需要提供多維度的篩選和排序方式，以供用戶快速找到合適的商品。

二、如何設(shè)計(jì)

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

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

如果是你，你會(huì)怎么去設(shè)計(jì)這個(gè)“已分享文件”的管理列表呢？這里我給出我自己的答案。

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

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

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

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

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

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

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

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

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

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

3. 布局

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

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

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

1）行列式

最大的特點(diǎn)是每個(gè)行列的交點(diǎn)形成獨(dú)立的信息單元，也叫表格。

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

2）無列式

沒有嚴(yán)格意義上的列，每個(gè)單元自為整體，也叫信息流、feed流列表。

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

3）無行式

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

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

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

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

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

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

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

4. 功能操作

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

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

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

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