中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如果不去看前端界面的表現(xiàn)，直接通過(guò)接口去獲取列表的數(shù)據(jù)返回，我們會(huì)發(fā)現(xiàn)，這些“列表”是由多條結(jié)構(gòu)類(lèi)似的數(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ù)量、類(lèi)型等數(shù)據(jù)的典型特點(diǎn)來(lái)排序，便于用戶的理解和使用。

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

2. 布局

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

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

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

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

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

3. 操作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

過(guò)程就不贅述了，我直接上圖：

3. 布局

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

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

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

1）行列式

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

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

2）無(wú)列式

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

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

3）無(wú)行式

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

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

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

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

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

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

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

4. 功能操作

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

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

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

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

三、結(jié)語(yǔ)

小事情中也有大學(xué)問(wèn)，仔細(xì)回顧列表設(shè)計(jì)的整個(gè)過(guò)程，你會(huì)發(fā)現(xiàn)，這里面的方法論和設(shè)計(jì)觀其實(shí)適用于很多地方。

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

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

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。