寫在前面的廢話
我們的App正在歷劫視覺改版和功能模塊的大調(diào)整娜谊，常常需要對結(jié)構(gòu)排版樣式作抉擇。前天，我的同桌Adam給我看一個他正在畫的稿子搀别，兩個雙列卡片網(wǎng)格(一個圖標+標題、另一個背景圖上壓標題)和一個單列卡片列表(背景圖上壓標題)的樣式尾抑，問我會選哪個歇父。我很虛的指了一下單列卡片列表的樣式，說了句“這個看得更清楚點吧”再愈，就趕緊把手縮回來了榜苫。我?guī)缀跬耆珣{感覺作了選擇(當然了，我畢竟只用了5秒鐘)践磅。5秒鐘单刁，那種心虛的感覺，就烙下了一個印子府适。
在尋找翻譯目標的時候羔飞，看到了這篇文章，覺得起碼可以給我遇到的問題提供一個思考思路(具體案例還是需要具體分析的)檐春，所以決定這次就翻譯它了逻淌。如果你也遇到了類似的問題，心里有了個印子疟暖，那請(耐著性子)繼續(xù)往下看卡儒。
BTW，這是一篇很淺顯俐巴、基礎(chǔ)的文章骨望，它早在2015年就發(fā)布了，我更加感到欣舵，自己的弱小擎鸠。
照例還是會有英文屠宰場。我非常需要去研究一下如何創(chuàng)建文章內(nèi)的定位鏈接缘圈。
學習是活下去的源泉劣光。
在移動端上何時應用列表視圖 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
在移動設(shè)備上，搞清楚你的內(nèi)容布局是一件很微妙的任務(wù)糟把。臺式桌面設(shè)備會給你全屏幕的范圍绢涡，任你發(fā)揮。但在移動端上遣疯，屏幕空間是有限的雄可。用戶在開始滑動操作之前，只能在一屏看到所有內(nèi)容的很小一部分。
這使得你開始考慮滞项，對于瀏覽來說狭归，什么樣的布局樣式是最高效的。你應該用一個列表視圖還是一個網(wǎng)格視圖呢文判？你的決定會影響用戶是否能快速方便得看到他們想要找的內(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)容展示在一個單列的列表里。它會有很多文字戏仓，沒有圖片疚宇。你頂多可以放一些小icon或者小縮略圖在那些文字旁邊。*用戶是依靠閱讀文字來做出決定的赏殃。*
網(wǎng)格視圖把內(nèi)容展示在2個或2個以上帶圖片的列表里敷待。這些圖片會占據(jù)主要的視圖空間，并且文字會被盡可能的縮短仁热，為了防止過多的文字折行榜揖。*用戶是依靠看圖片來做出決定的。*
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.
列表視圖可以防止過度的滑動操作
List View Prevents Overscrolling
許多設(shè)計師用網(wǎng)格視圖因為它更加吸引視線。但問題就在于迅矛，網(wǎng)格視圖會迫使用戶做更多的滑動操作妨猩。網(wǎng)格視圖包含了圖片，這使得頁面會長很多秽褒。用戶需要滑動很多次壶硅，才能看完所有的選項。這可能會給他們的手指帶去太多次的滑動销斟。
列表視圖通過縮短頁面長度來防止過多的滑動操作庐椒。在沒有圖片的情況下，你可以在一屏中放下更多的選項蚂踊。它還允許你用手風琴的方式扼睬，在同個屏幕上增加層級來展示子選項。*在這種情況下悴势，用戶是通過瀏覽列表中的標題來尋找他們想要看的內(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)格視圖不僅會讓用戶滑動更多措伐，它還會造成用戶草率地作抉擇特纤。用戶會收到圖片的視覺影響，以至于他們可能會根據(jù)對圖片的喜好侥加，選擇最吸引他們的那一個捧存。
這常常會使得，用戶被引導到了一個根本不是他們想看的內(nèi)容上去。結(jié)果就是他們必須返回到上一個頁面昔穴，然后滑動更多镰官。所以，在有那么多圖片的吸引下吗货，用戶很容易被分心和誤導泳唠。
列表視圖可以防止用戶做出草率的決定。文字提供了充足的精確信息來幫助他們找到他們想要看的內(nèi)容宙搬。用戶可以在閱讀了所有選項后笨腥，做出最優(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)格視圖對于審視細節(jié)是最好的
Grid View Works Best for Examining Details
除了視覺上的美觀勇垛，網(wǎng)格視圖還可以幫助用戶審視細節(jié)脖母。例如，一個用戶在選購襯衫闲孤，ta可能會在腦子里出現(xiàn)一個具象的款式谆级。這種情況下，僅當ta在襯衫類別里挑選具體款式時讼积，網(wǎng)格視圖會是最高效的肥照。
因為如果一個網(wǎng)格視圖展示了各種服飾，這種形式對于用戶來說币砂，造成誤導的機會比幫助用戶的可能性大得多建峭，因為在眾多的各種服飾圖片中，可能只有很少數(shù)是襯衫决摧。用戶需要人眼排除很多與ta的目標不相干的圖片亿蒸。
但一旦用戶進到了襯衫的類別里，圖片們就有了很大優(yōu)勢掌桩。用戶可以直接通過襯衫圖片上的細節(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ù)的用戶在移動端上都帶著速戰(zhàn)速決的期望(現(xiàn)在似乎不一定了波岛，尤其在中國)茅坛。他們想要能夠迅速找到他們想要看的內(nèi)容。這時候则拷，你選擇的布局方式就是讓他們達成目標的關(guān)鍵了贡蓖。
在臺式桌面設(shè)備上，布局方式的選擇會更寬松煌茬，但在移動端上斥铺，設(shè)計師選擇哪種布局很關(guān)鍵√成疲總的來說晾蜘，能讓用戶事半功倍邻眷，那你就贏了。
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.
英文屠宰場
這次的用詞相對都比較簡單剔交。而且個人感覺肆饶，這不是一篇從文筆上來看很棒的文章。比較中規(guī)中矩的套用總分總的形式岖常。挑幾個詞說一說吧驯镊。
Tricky：狡猾的；微妙的腥椒；難以捉摸的
口語里常常用來形容一件事情或是人有貓膩阿宅，不太可信，或者需要一些技巧才能解決的事情笼蛛。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：手風琴
作為一個移動端設(shè)計師，下面這張圖一定能幫助你記住這個樂器單詞
Stimulating：刺激性的
Stimulate滨砍，動詞往湿，原意是刺激、促進惋戏、激發(fā)领追；在文章里，原作者比較圖片和文字兩種呈現(xiàn)形式的時候响逢，用來形容圖片是更加搶眼的绒窑，更能激發(fā)出用戶點擊欲望的意思。
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: 靈活性、機動性
也表達一種愿意做出改變的意思
the quality of bending easily without breaking.
"players gained improved flexibility in their ankles"
視圖形式小討論
我們真正在做設(shè)計時钦铺，常常并不明確區(qū)分列表視圖和網(wǎng)格視圖订雾。例如下面這個截圖，就是當時Adam給我看的??稿矛洞。最右邊頁面4可以說是洼哎，上面文章里所定義的列表視圖和網(wǎng)格視圖一種結(jié)合吧(這里我和Adam產(chǎn)生了分歧，他認為這是列表視圖沼本，我認為偏向網(wǎng)格視圖噩峦，你怎么看？)抽兆。它雖然是單列的排布樣式壕探，但是每個卡片里又有圖片，并且只有一個標題郊丛，并沒有以文案自為主李请；它雖然圖片蒙層的目的就是為了突出標題，某程度上遵循了列表視圖的衣缽厉熟，但這里并沒有大篇幅的文字內(nèi)容导盅，用戶仍然可能根據(jù)圖片來判斷這里大概會是什么內(nèi)容。
所以，最后我想說的是绢片，雖然這次翻譯的這篇文章分析并列舉了兩種視圖的最基礎(chǔ)的差別和用法滤馍，但在實際應用中，設(shè)計師還是可以靈活變通底循，分清設(shè)計內(nèi)容和業(yè)務(wù)要求的輕重緩急巢株，將兩種形式混合使用。下面是一些Adam在開始設(shè)計這個項目的時候熙涤，收集的一些案例阁苞，其中有一些非常典型的混用情況，大家可以找找看祠挫。那槽。。
