盡管現(xiàn)在手機(jī)屏幕的趨勢(shì)是越做越大，然而實(shí)際上真正使得手機(jī)如此輕便的地方正在于它的小尺寸。相比于臺(tái)式電腦，甚至筆記本電腦的屏幕，手機(jī)的小屏幕都只能容納更少的內(nèi)容信息，用戶(hù)在滾動(dòng)查看更多內(nèi)容前只能在當(dāng)前屏幕中看到很少一部分。

今天我要重新審視信息展示的兩種基本模式——列表視圖和網(wǎng)格視圖，并為各自提供相關(guān)用例加以說(shuō)明。

列表視圖和網(wǎng)格視圖

一、列表視圖

一個(gè)列表垂直呈現(xiàn)多個(gè)連續(xù)的行元素。列表視圖重在文本內(nèi)容，因此通常只有一些小圖標(biāo)穿插在文本信息內(nèi)。為了同一時(shí)間能在當(dāng)前屏幕中顯示更多的列表項(xiàng)內(nèi)容，這就要求列表中的每一項(xiàng)在垂直方向上占用相比于圖片更少的空間。

列表視圖示例

1、內(nèi)容瀏覽

列表視圖的內(nèi)容呈現(xiàn)方法更符合人們自然的閱讀模式，如F形模式。

網(wǎng)頁(yè)上的F形示例

列表視圖最適合用來(lái)顯示同類(lèi)型的數(shù)據(jù)，并易于人們的閱讀理解。通過(guò)減少頁(yè)面（即每一頁(yè)包含更多內(nèi)容），列表視圖降低了用戶(hù)的滾動(dòng)壓力。對(duì)圖片的排斥（列表視圖只有縮略圖，完整的圖片占用空間）更使得視圖的每一屏允許您以適應(yīng)更多的內(nèi)容。

典型瀏覽模式下的列表示例

最后一點(diǎn)同樣重要的是，當(dāng)用戶(hù)瀏覽列表視圖時(shí)，他們的注意力從上到下依次降低。

2、用戶(hù)是如何做選擇的

用戶(hù)主要依靠閱讀文本信息來(lái)做出決定。

3、優(yōu)缺點(diǎn)

相比于網(wǎng)格視圖，列表視圖有以下優(yōu)點(diǎn)：

• 列表視圖遵循人們的自然閱讀模式；
• 每一屏能夠展示更多信息/選項(xiàng)，減輕了給用戶(hù)帶來(lái)太多滾動(dòng)翻頁(yè)的麻煩；

其缺點(diǎn)在于：

• 列表視圖在視覺(jué)外觀上缺乏表現(xiàn)力；
• 列表視圖中，用戶(hù)的注意力會(huì)自上而下減弱；

二、網(wǎng)格視圖

網(wǎng)格視圖是標(biāo)準(zhǔn)列表視圖的一種替代方案。網(wǎng)格視圖由用來(lái)做布局的網(wǎng)格線和其他視覺(jué)線索將其明顯區(qū)分出來(lái)。一個(gè)網(wǎng)格視圖由在垂直和水平方向上重復(fù)排列的元素項(xiàng)構(gòu)成。

網(wǎng)格視圖示例

1、內(nèi)容瀏覽模式

網(wǎng)格視圖營(yíng)造了一個(gè)略微有停頓感的瀏覽模式，使得它最適合于視覺(jué)內(nèi)容。通常情況下，圖片占用了是視圖元素的絕大部分空間。

典型瀏覽模式下的網(wǎng)格視圖

用戶(hù)的注意力在每個(gè)網(wǎng)格單元間均勻遷移。網(wǎng)格視圖更易于視覺(jué)理解，并區(qū)分相似類(lèi)型的數(shù)據(jù)。

2、用戶(hù)是如何做選擇的

網(wǎng)格視圖下用戶(hù)主要依靠圖片來(lái)做出選擇/決定。而需要注意的一點(diǎn)是用戶(hù)在同一時(shí)刻只能注意到4-6個(gè)網(wǎng)格單元。

Ecommerce 中的網(wǎng)格視圖應(yīng)用

3、優(yōu)缺點(diǎn)

網(wǎng)格視圖有以下優(yōu)點(diǎn)：

• 網(wǎng)格視圖更吸引用戶(hù)眼球；
• 網(wǎng)格視圖有助于用戶(hù)區(qū)分單元項(xiàng)間的視覺(jué)差異；
• 視覺(jué)視圖中用戶(hù)注意力均勻遷移；

不足之處：

（1）網(wǎng)格視圖會(huì)導(dǎo)致內(nèi)容信息分布在更多的頁(yè)面，因此，用戶(hù)需要為了看到更多信息需要滾動(dòng)更多次。下面例子中你可以看到兩種視圖的對(duì)比情況：

紅線部分標(biāo)示出每一屏容納的信息量

三、關(guān)于縮略圖使用的一般準(zhǔn)則

那么究竟對(duì)于內(nèi)容呈現(xiàn)來(lái)講什么是最有效的布局方案呢？你到底該使用列表視圖還是網(wǎng)格視圖呢？正確的答案是：看情況而定。

選擇列表視圖？還是網(wǎng)格視圖？一個(gè)關(guān)鍵的因素是用戶(hù)為了做選擇/決定究竟需要l瀏覽/對(duì)比多少信息。這到底是神馬意思？這一切都?xì)w為一個(gè)主要原則，即內(nèi)容為王。你應(yīng)該根據(jù)你的內(nèi)容類(lèi)型來(lái)選擇與之合適的視圖布局。

詳情使用列表，圖片使用網(wǎng)格

商品頁(yè)面是一個(gè)極為恰當(dāng)?shù)睦?。?duì)于像家用電器這樣的商品，其產(chǎn)品型號(hào)、評(píng)分和尺寸規(guī)格是用戶(hù)做選擇的關(guān)鍵因素，采用列表視圖就很有意義。

WallMart iOS客戶(hù)端

網(wǎng)格視圖則更適合于那些要求更少的商品信息或者商品類(lèi)似的情況。比如服裝類(lèi)商品，你挑選時(shí)更在意商品外觀，對(duì)于文本描述則次要很多。在這種情況下，用戶(hù)更關(guān)心單元元素間的視覺(jué)差異，也更愿意滾動(dòng)頁(yè)面來(lái)進(jìn)行比較，而不是多次重復(fù)的在列表頁(yè)和詳情頁(yè)間來(lái)回切換。

MrPorter iOS客戶(hù)端

當(dāng)設(shè)計(jì)這些布局時(shí)，挑選合適的圖片尺寸，一方面使其大到足夠用戶(hù)識(shí)別，一方面使其小到同一屏能顯示更多商品。

四、使用哪種方案關(guān)乎于用戶(hù)體驗(yàn)

最后，究竟使用列表視圖還是網(wǎng)格視圖，這需要你從哪種信息（是文本描述還是圖片）是對(duì)用戶(hù)最有價(jià)值來(lái)衡量。切記，用戶(hù)體驗(yàn)關(guān)乎于人性探討，絕不僅僅停留在模式層次。找出最適合于用戶(hù)或?qū)τ脩?hù)最友好的方案自然簡(jiǎn)單：將主要流程實(shí)體建模后找一部分用戶(hù)進(jìn)行測(cè)試。那個(gè)能提高用戶(hù)效率的方案便是贏者。

譯者：三達(dá)不留點(diǎn)gpj

譯自：https://uxplanet.org/mobile-ux-design-list-view-and-grid-view-8f129b56fd5b#.keyi6kjst

本文由 @三達(dá)不留點(diǎn)gpj 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。