国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

編輯導語：在我們的日常生活和工作中，就會看到非常多的列表，最常見的也就是消息列表、聯(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)粘Ｊ褂玫牧奶燔浖?，微信和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)币徊豢伞Ｎ覀兞私馑臉?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é)議。