寫在前面的廢話
我們的App正在歷劫視覺(jué)改版和功能模塊的大調(diào)整，常常需要對(duì)結(jié)構(gòu)排版樣式作抉擇。前天，我的同桌Adam給我看一個(gè)他正在畫的稿子，兩個(gè)雙列卡片網(wǎng)格(一個(gè)圖標(biāo)+標(biāo)題、另一個(gè)背景圖上壓標(biāo)題)和一個(gè)單列卡片列表(背景圖上壓標(biāo)題)的樣式，問(wèn)我會(huì)選哪個(gè)。我很虛的指了一下單列卡片列表的樣式，說(shuō)了句“這個(gè)看得更清楚點(diǎn)吧”，就趕緊把手縮回來(lái)了。我?guī)缀跬耆珣{感覺(jué)作了選擇(當(dāng)然了，我畢竟只用了5秒鐘)。5秒鐘，那種心虛的感覺(jué)，就烙下了一個(gè)印子。
在尋找翻譯目標(biāo)的時(shí)候，看到了這篇文章，覺(jué)得起碼可以給我遇到的問(wèn)題提供一個(gè)思考思路(具體案例還是需要具體分析的)，所以決定這次就翻譯它了。如果你也遇到了類似的問(wèn)題，心里有了個(gè)印子，那請(qǐng)(耐著性子)繼續(xù)往下看。
BTW，這是一篇很淺顯、基礎(chǔ)的文章，它早在2015年就發(fā)布了，我更加感到，自己的弱小。
照例還是會(huì)有英文屠宰場(chǎng)。我非常需要去研究一下如何創(chuàng)建文章內(nèi)的定位鏈接。
學(xué)習(xí)是活下去的源泉。
在移動(dòng)端上何時(shí)應(yīng)用列表視圖 vs. 網(wǎng)格視圖 List vs. Grid View: When to Use Which on Mobile?
原文地址：
http://uxmovement.com/mobile/list-vs-grid-view-when-to-use-which-on-mobile/?
by anthony on 11/03/15 at 9:26 am
在移動(dòng)設(shè)備上，搞清楚你的內(nèi)容布局是一件很微妙的任務(wù)。臺(tái)式桌面設(shè)備會(huì)給你全屏幕的范圍，任你發(fā)揮。但在移動(dòng)端上，屏幕空間是有限的。用戶在開(kāi)始滑動(dòng)操作之前，只能在一屏看到所有內(nèi)容的很小一部分。
這使得你開(kāi)始考慮，對(duì)于瀏覽來(lái)說(shuō)，什么樣的布局樣式是最高效的。你應(yīng)該用一個(gè)列表視圖還是一個(gè)網(wǎng)格視圖呢？你的決定會(huì)影響用戶是否能快速方便得看到他們想要找的內(nèi)容。
Figuring out your content layout is a tricky task on mobile devices. Desktop devices give you all the screen space to work with. But on mobile, screen space is limited. Users can only view a small amount of content at a time before they need to scroll.
This makes you wonder what the most efficient layout for viewing is. Should you use a list view or grid view? Your decision could affect how quick and easy it is for users to find what they’re looking for.
列表視圖 vs. 網(wǎng)格視圖
List vs. Grid View
列表視圖和網(wǎng)格視圖
列表視圖把內(nèi)容展示在一個(gè)單列的列表里。它會(huì)有很多文字，沒(méi)有圖片。你頂多可以放一些小icon或者小縮略圖在那些文字旁邊。*用戶是依靠閱讀文字來(lái)做出決定的。*
網(wǎng)格視圖把內(nèi)容展示在2個(gè)或2個(gè)以上帶圖片的列表里。這些圖片會(huì)占據(jù)主要的視圖空間，并且文字會(huì)被盡可能的縮短，為了防止過(guò)多的文字折行。*用戶是依靠看圖片來(lái)做出決定的。*
List view displays your content in a single column list. It’s text heavy and there are no images. At most, you can display small icons or thumbnails next to the text. Users rely on reading the text to make their selection.
Grid view displays your content in two or more columns with images. The images dominate most of the space, and text is shortened to prevent too much textwrapping. Users rely on the images to make their selection.
列表視圖可以防止過(guò)度的滑動(dòng)操作
List View Prevents Overscrolling
許多設(shè)計(jì)師用網(wǎng)格視圖因?yàn)樗游暰€。但問(wèn)題就在于，網(wǎng)格視圖會(huì)迫使用戶做更多的滑動(dòng)操作。網(wǎng)格視圖包含了圖片，這使得頁(yè)面會(huì)長(zhǎng)很多。用戶需要滑動(dòng)很多次，才能看完所有的選項(xiàng)。這可能會(huì)給他們的手指帶去太多次的滑動(dòng)。
列表視圖通過(guò)縮短頁(yè)面長(zhǎng)度來(lái)防止過(guò)多的滑動(dòng)操作。在沒(méi)有圖片的情況下，你可以在一屏中放下更多的選項(xiàng)。它還允許你用手風(fēng)琴的方式，在同個(gè)屏幕上增加層級(jí)來(lái)展示子選項(xiàng)。*在這種情況下，用戶是通過(guò)瀏覽列表中的標(biāo)題來(lái)尋找他們想要看的內(nèi)容的。*
Many designers use grid view because it’s more appealing to the eye. But the problem is that grid view forces users to scroll more. Grid view includes images which make the page much longer. It’ll take users many scrolls to view all the available options. This is too much scrolling for their fingers.
List view prevents overscrolling by making pages shorter. The exclusion of images allows you to fit more options per screen. It also allows you to use accordions to?add layers of suboptions on the same screen. Users find what they’re looking for by scanning text labels.
列表視圖可以防止草率的決定
List View Prevents Hasty Selections
網(wǎng)格視圖不僅會(huì)讓用戶滑動(dòng)更多，它還會(huì)造成用戶草率地作抉擇。用戶會(huì)收到圖片的視覺(jué)影響，以至于他們可能會(huì)根據(jù)對(duì)圖片的喜好，選擇最吸引他們的那一個(gè)。
這常常會(huì)使得，用戶被引導(dǎo)到了一個(gè)根本不是他們想看的內(nèi)容上去。結(jié)果就是他們必須返回到上一個(gè)頁(yè)面，然后滑動(dòng)更多。所以，在有那么多圖片的吸引下，用戶很容易被分心和誤導(dǎo)。
列表視圖可以防止用戶做出草率的決定。文字提供了充足的精確信息來(lái)幫助他們找到他們想要看的內(nèi)容。用戶可以在閱讀了所有選項(xiàng)后，做出最優(yōu)的選擇。
Not only does grid view force users to scroll more, but it causes them to make hasty selections. Users get so stimulated by images that they’ll select the first option that appeals to them.
This can often lead them to a section that doesn’t have what they’re looking for. The user then has to go back and scroll further. With so many stimulating images, it’s easy for users to get distracted and misled.
List view prevents users from making hasty selections. The text provides precise enough information to help them find the content they want. They’re able to make the best selection after reading through all the options.
網(wǎng)格視圖對(duì)于審視細(xì)節(jié)是最好的
Grid View Works Best for Examining Details
除了視覺(jué)上的美觀，網(wǎng)格視圖還可以幫助用戶審視細(xì)節(jié)。例如，一個(gè)用戶在選購(gòu)襯衫，ta可能會(huì)在腦子里出現(xiàn)一個(gè)具象的款式。這種情況下，僅當(dāng)ta在襯衫類別里挑選具體款式時(shí)，網(wǎng)格視圖會(huì)是最高效的。
因?yàn)槿绻粋€(gè)網(wǎng)格視圖展示了各種服飾，這種形式對(duì)于用戶來(lái)說(shuō)，造成誤導(dǎo)的機(jī)會(huì)比幫助用戶的可能性大得多，因?yàn)樵诒姸嗟母鞣N服飾圖片中，可能只有很少數(shù)是襯衫。用戶需要人眼排除很多與ta的目標(biāo)不相干的圖片。
但一旦用戶進(jìn)到了襯衫的類別里，圖片們就有了很大優(yōu)勢(shì)。用戶可以直接通過(guò)襯衫圖片上的細(xì)節(jié)，方便地找到ta想要的款式。
Aside from aesthetic appeal, grid view also helps users when they’re examining details. For example, if a user is shopping for a shirt, they’ll have a specific type in mind. It’s only after the user has narrowed down the content to a category that grid view is most effective.
A grid view?display of clothes will distract more than help because only a few of those images will be of?shirts. The user has to scroll?to filter out a lot of?irrelevant images when scanning.
But once the user is in the category of shirts they want, the images will have more relevancy. The user can scan the shirts and spot?certain details they’re looking for with ease.
想法小總結(jié)
Final Thoughts
大多數(shù)的用戶在移動(dòng)端上都帶著速戰(zhàn)速?zèng)Q的期望(現(xiàn)在似乎不一定了，尤其在中國(guó))。他們想要能夠迅速找到他們想要看的內(nèi)容。這時(shí)候，你選擇的布局方式就是讓他們達(dá)成目標(biāo)的關(guān)鍵了。
在臺(tái)式桌面設(shè)備上，布局方式的選擇會(huì)更寬松，但在移動(dòng)端上，設(shè)計(jì)師選擇哪種布局很關(guān)鍵?？偟膩?lái)說(shuō)，能讓用戶事半功倍，那你就贏了。
Most users are on the go when they’re on a mobile site. They need to be able to find the content they want fast. The layout you choose is key in making this happen.
There’s more flexibility with layouts on desktop, but on mobile, your choice matters. The view that allows users to see more content while doing less work is the?winner.
英文屠宰場(chǎng)
這次的用詞相對(duì)都比較簡(jiǎn)單。而且個(gè)人感覺(jué)，這不是一篇從文筆上來(lái)看很棒的文章。比較中規(guī)中矩的套用總分總的形式。挑幾個(gè)詞說(shuō)一說(shuō)吧。
Tricky：狡猾的；微妙的；難以捉摸的
口語(yǔ)里常常用來(lái)形容一件事情或是人有貓膩，不太可信，或者需要一些技巧才能解決的事情。Trick本身是把戲、小技巧的意思
1.(of a task, problem, etc.) requiring care and skill because difficult or awkward.
"applying eyeliner can be a tricky business"
2.deceitful or crafty.
"I wouldn't trust her—she's tricky"
Accordions：手風(fēng)琴
作為一個(gè)移動(dòng)端設(shè)計(jì)師，下面這張圖一定能幫助你記住這個(gè)樂(lè)器單詞
Stimulating：刺激性的
Stimulate，動(dòng)詞，原意是刺激、促進(jìn)、激發(fā)；在文章里，原作者比較圖片和文字兩種呈現(xiàn)形式的時(shí)候，用來(lái)形容圖片是更加搶眼的，更能激發(fā)出用戶點(diǎn)擊欲望的意思。
encouraging or arousing interest or enthusiasm.
"a rich and stimulating working environment"
Precise：精確的
同義的常用詞還有：Exact、accurate、specific
marked by exactness and accuracy of expression or detail.
"precise directions"
Flexibility: 靈活性、機(jī)動(dòng)性
也表達(dá)一種愿意做出改變的意思
the quality of bending easily without breaking.
"players gained improved flexibility in their ankles"
視圖形式小討論
我們真正在做設(shè)計(jì)時(shí)，常常并不明確區(qū)分列表視圖和網(wǎng)格視圖。例如下面這個(gè)截圖，就是當(dāng)時(shí)Adam給我看的??稿。最右邊頁(yè)面4可以說(shuō)是，上面文章里所定義的列表視圖和網(wǎng)格視圖一種結(jié)合吧(這里我和Adam產(chǎn)生了分歧，他認(rèn)為這是列表視圖，我認(rèn)為偏向網(wǎng)格視圖，你怎么看？)。它雖然是單列的排布樣式，但是每個(gè)卡片里又有圖片，并且只有一個(gè)標(biāo)題，并沒(méi)有以文案自為主；它雖然圖片蒙層的目的就是為了突出標(biāo)題，某程度上遵循了列表視圖的衣缽，但這里并沒(méi)有大篇幅的文字內(nèi)容，用戶仍然可能根據(jù)圖片來(lái)判斷這里大概會(huì)是什么內(nèi)容。
所以，最后我想說(shuō)的是，雖然這次翻譯的這篇文章分析并列舉了兩種視圖的最基礎(chǔ)的差別和用法，但在實(shí)際應(yīng)用中，設(shè)計(jì)師還是可以靈活變通，分清設(shè)計(jì)內(nèi)容和業(yè)務(wù)要求的輕重緩急，將兩種形式混合使用。下面是一些Adam在開(kāi)始設(shè)計(jì)這個(gè)項(xiàng)目的時(shí)候，收集的一些案例，其中有一些非常典型的混用情況，大家可以找找看。。。
