Grids or lists? That is the question we will look at in this cheat sheet. While they can be used anywhere in your site, we are going to look primarily at search results, catalogs and newsfeeds. Making this choice will determine how your users interact with your content and what they will engage with.

網格還是列表？ 這就是我們將在本備忘單中探討的問題。 盡管它們可以在您網站的任何地方使用，但我們將主要關注搜索結果，目錄和新聞提要。 做出選擇將決定您的用戶如何與您的內容進行交互以及將與之互動。

在本備忘單中，我們將介紹以下內容： (In this cheat sheet we will cover the following:)

1. Introduction

1.簡介

1. The difference between grids and lists
   網格和列表之間的區別
2. What mode your user is in and what is most important to them
   您的用戶所處的模式以及對他們而言最重要的是
3. Working with images
   處理圖像
4. Cognitive load
   認知負荷

2. Grid view

2.網格視圖

1. What a grid looks like
   網格看起來像什么
2. Standard grid
   標準格
3. Masonry grid
   砌體網格
4. Justified grid
   合理網格
5. Best practices for grids
   網格的最佳做法

3. List view

3.列表視圖

1. What a list looks like
   列表看起來像什么
2. Simple list
   簡單清單
3. List with horizontal stacking
   水平堆疊清單
4. List with vertical stacking
   垂直堆疊清單
5. Best practises for lists
   列表的最佳做法

4. Result or item styles

4.結果或項目樣式

1. Skeuomorphic/elevated cards
   擬形/高架卡
2. Outlined cards
   卡概述
3. Flat
   平面
4. Mix
   混合

5. Closing thoughts — and how to best workshop this with your stakeholders

5.總結思想-以及如何最好地與利益相關者進行討論

1.簡介 (1. Introduction)

網格和列表之間的區別 (The difference between grids and lists)

What is the difference between a list and grid view? Well, Watson, one is a list and the other is a grid. Need further clarity? In a list, items sit below one another. In a grid, items sit vertically and horizontally from each other.

列表視圖和網格視圖有什么區別？ 沃森(Watson)，一個是列表，另一個是網格。 需要進一步說明嗎？ 在一個列表中，項目位于彼此之間。 在網格中，項目彼此垂直和水平放置。

But what really is the difference in a user experience sense? One is usually (but not always) better for desktop, the other is better for mobile. One is better for images, the other for text. One is better for allowing you to compare images, the other is better for comparing text.

但是，在用戶體驗上的真正區別是什么？ 一種通常(但并非總是)對臺式機更好，另一種對移動設備更好。 一種適合圖像，另一種適合文本。 一種更好地允許您比較圖像，另一種更好地比較文本。

您的用戶所處的模式以及對他們而言最重要的是 (What mode your user is in and what is most important to them)

When deciding on what information to display to your user, try to identify what is most important to them. While you could always guess or use existing patterns, this may be a good opportunity to do some user research.

在決定向用戶顯示哪些信息時，請嘗試確定對他們最重要的信息。 盡管您總是可以猜測或使用現有模式，但這可能是進行一些用戶研究的好機會。

First, try identifying if your user is in pure browsing mode or if they are in a combination of search and browse mode. Once you have worked this out, you need to determine what they are looking for within each item.

首先，嘗試確定您的用戶是處于純瀏覽模式還是處于搜索和瀏覽模式的組合。 解決此問題后，您需要確定他們在每個項目中尋找的內容。

If your user is in browse mode, they are there for entertainment so will probably be focused on images (Instagram, Pinterest or meme sites), on headlines/statuses (Twitter, news sites) or perhaps a combination of both (Facebook). If this is the case, bring what they are looking at to the forefront.

如果您的用戶處于瀏覽模式，那么他們在那里是消遣娛樂，因此可能會專注于圖像(Instagram，Pinterest或meme網站)，標題/狀態(Twitter，新聞網站)或兩者的結合(Facebook)。 如果是這種情況，請將他們所關注的內容帶到最前沿。

If your user is in search mode, you should also support some browsing behaviour, but focus on how they will be skimming or comparing different items. You will need to identify what it is that users are using to compare items, it could be: star rating, price, amount of community engagement, images, certifications, etc. or a combination.

如果您的用戶處于搜索模式，則您還應該支持某些瀏覽行為，但要著重于他們如何瀏覽或比較不同項目。 您將需要確定用戶用來比較商品的含義，可能是：星級，價格，社區參與程度，圖像，證書等或兩者結合。

To read more about searching and browsing, check out my other cheat sheet:

要了解有關搜索和瀏覽的更多信息，請查看我的其他備忘單：

處理圖像 (Working with images)

Be careful of relying too much on feature images, reasons being;

注意，不要過多地依賴特征圖像；

A) Similar feature images don’t give the user anything to compare.

A)相似的特征圖像不會給用戶任何可比較的內容。

If your content is all similar, the visuals won’t be informative. E.g. If you offer online courses in accounting, how would your users expect to compare courses using the feature image? The more similar you expect the feature images to be — the less important they become.

如果您的內容都是相似的，則視覺效果將不會足夠。 例如，如果您提供在線會計課程，您的用戶如何期望使用功能圖片比較課程？ 您期望特征圖像越相似，它們變得越不重要。

B) You have to trust that people can upload good photos (if you are a social platform).

B)您必須相信人們可以上傳精美的照片(如果您是社交平臺)。

If you allow your users to upload their own images, you are relying on them being decent photos. Just think back to your last family gathering and how long it took your mum to take a photo that was, a) in focus, b) had everyone in it, c) had the right day time settings, d) the dog wasn’t peeing on someone. That all being said — Instagram (and to a lesser extent, Facebook) has shown us that civilians can take engaging photos, but I still remain wary.

如果允許用戶上傳自己的圖像，則說明他們是不錯的照片。 只需回想一下您上一次的家庭聚會，以及您的媽媽拍攝一張照片需要多長時間，a)聚焦，b)每個人都參與其中，c)白天的時間設置正確，d)狗不是在某人上撒尿。 俗話說，Instagram(在較小程度上是Facebook)向我們展示了平民可以拍攝引人入勝的照片，但我仍然保持警惕。

認知負荷 (Cognitive load)

Cognitive load refers to how long it takes for the brain to compute information, e.g. a single image = low cognitive load, 10 images = high cognitive load. Think of your concentration as RAM on your first computer. The more your little computer brain has to focus on, the less efficiently it works. The higher the cognitive load, the less ‘focused’ your user will be — but that is okay too. When you are just looking to entertain yourself, ‘focus’ is not something most people prioritise.

認知負荷是指大腦計算信息需要多長時間，例如，一張圖像=低認知負荷，十張圖像=高認知負荷。 將您的注意力集中在第一臺計算機上的RAM中。 您的小電腦大腦必須專注的越多，它的工作效率就越低。 認知負荷越高，用戶的“專注”就越少-但這也是可以的。 當您只是為了娛樂自己時，“專注”并不是大多數人優先考慮的事情。

Part of the beauty of Instagram (on mobile) is that you can focus on a single photo of a ‘#lockdownBananaBread’ at a time. Part of the beauty of Pinterest is that you can browse loads of images of ‘lockdown banana bread recipes’ at the same time. When selecting what design pattern you want to go with, consider how many items you want your users to compare at a single time.

Instagram(在移動設備上)的美麗之處之一在于，您一次可以專注于一張#lockdownBananaBread照片。 Pinterest優點之一是可以同時瀏覽“鎖定香蕉面包食譜”的大量圖像。 在選擇要使用的設計模式時，請考慮您希望用戶一次比較多少個項目。

As a general rule, when browsing, display more items at once. When searching, display fewer items at once. But this rule is broken again and again (see: Instagram and online stores) so don’t take it to heart.

通常，瀏覽時一次顯示更多項目。 搜索時，一次顯示較少的項目。 但是，此規則一次又一次被打破(請參閱：Instagram和在線商店)，因此請不要將其牢記在心。

2.網格視圖 (2. Grid view)

Grid views work well when you are trying to show off the image, but it also allows you to have multiple products displayed next to each other at the same time. This also helps the user to compare different items visually. The downside here is that there isn’t much space for text.

當您嘗試展示圖像時，網格視圖可以很好地工作，但是它還允許您同時顯示多個產品。 這也有助于用戶直觀地比較不同的項目。 不利之處是文本沒有太多空間。

網格是什么樣的 (What a grid looks like)

Because grids are mostly used for products, they tend to have big images with copy beneath it. The copy is usually the name of the item and the price, and maybe one or two other details.

由于網格主要用于產品，因此它們往往具有較大的圖像并在其下具有副本。 該副本通常是商品的名稱和價格，也許還有一個或兩個其他細節。

While there are many different types of grids, the most common is a standard grid where the containers are the same height and width. We will also look at masonry and justified grids. I haven’t included custom grids here as I have yet to come across any good search results that use them. If you want to find out more about grids, this gives a nice overview.

盡管有許多不同類型的柵格，但最常見的是標準柵格，其中容器的高度和寬度相同。 我們還將研究磚石結構和合理的網格。 我尚未在此處包括自定義網格，因為我還沒有發現任何使用它們的良好搜索結果。 如果您想了解有關網格的更多信息， 這將為您提供一個很好的概述。

When to use a grid view:

何時使用網格視圖：

• If the image of the result item is most important to the user.
  結果項的圖像對用戶而言是否最重要。
• If a user needs to be able to compare items visually (e.g. to compare shoes).
  用戶是否需要能夠在視覺上比較商品(例如比較鞋子)。
• If your search results don’t need a description.
  如果您的搜索結果不需要描述。

標準格 (Standard grid)

A standard grid is when all the items are the same size. This pattern will probably be used by your run of the mill retail site. This grid allows all their products to be kept neat and tidy, making it easier for users to compare items.

所有項目的大小均相同時，即為標準網格。 該模式可能會在您的工廠零售站點運行中使用。 這個網格使他們的所有產品保持整潔，使用戶比較物品更加容易。

Who should consider using it: Online retail stores for physical products, possibly portfolio sites (artists, illustrators, etc).Why is it good: It allows users to compare product images and prices easily.Who uses it: Walmart, Amazon (sometimes), Esty, most online retail stores.

誰應該考慮使用它：實體產品的在線零售商店，可能是投資組合網站(藝術家，插圖畫家等)。 優點：允許用戶輕松比較產品圖片和價格。 誰使用它：沃爾瑪，亞馬遜(有時)，埃斯蒂，大多數在線零售商店。

砌體網格 (Masonry grid)

I first came across the wonders of masonry grids when a friend invited me to Pinterest while I was still in university. *Sigh* the hours I wasted curating boards about places I would never visit because it turns out studying graphic design won’t make you rich.

當我還在上大學時，一個朋友邀請我去Pinterest時，我第一次遇到了砌磚網的奇觀。 *嘆氣*，我浪費了很多時間去策劃我從未去過的地方的木板，因為事實證明，學習平面設計不會使您富有。

So, what makes a masonry grid different to a standard grid? In a standard grid, the height and width are the same, whereas in a masonry grid, the heights are different. This allows images to be displayed to their original proportions without being cropped to a set size. However, the longer the image is in height, the more space it gets. A lot of Pinterest marketers use this to their benefit and make really long images so that they get more ‘screen time’ while the user is scrolling.

那么，什么使砌體網格不同于標準網格呢？ 在標準網格中，高度和寬度相同，而在磚石網格中，高度不同。 這樣一來，圖像就可以按原始比例顯示，而不會被裁剪為設定的尺寸。 但是，圖像的高度越長，獲得的空間就越大。 許多Pinterest營銷人員都利用此功能受益匪淺，并制作了很長的圖像，以便在用戶滾動時獲得更多的“屏幕時間”。

As a rule of thumb, most of the masonry grids I have come across promote a ‘browsing behaviour’; the only exception that I can find being artists’ online stores and stock photography sites.

根據經驗，我遇到的大多數砌體網格都促進“瀏覽行為”。 我可以找到的唯一例外是藝術家的在線商店和股票攝影網站。

Who should consider this pattern: Interest and portfolio sites.Pros: It encourages users to carry on scrolling.Cons: It is difficult to compare items.Who uses it: Unsplash, tumblr., Pinterest, and some artist/designer portfolio sites.

誰應該考慮這種模式：興趣和投資組合網站。 優點：它鼓勵用戶進行滾動。 缺點：很難比較項目。 誰使用它： Unsplash，tumblr。，Pinterest和一些藝術家/設計師作品集網站。

合理網格 (Justified grid)

The first time I noticed a justified grid was on Google images, however it is also used on blog and photography sites. Unlike masonry grids, justified grids resize the images so that they fit in justified rows rather than columns. This by default makes the grid look very neat, nevertheless, it lacks the scroll-more-iness of masonry grids. (side note: Who do I speak to about adding ‘scroll-more-iness’ to the dictionary?)

我第一次注意到在Google圖片上有一個合理的網格，但是在博客和攝影網站上也使用了它。 與砌體網格不同，對齊網格會調整圖像的大小，以使其適合對齊的行而不是列。 默認情況下，這使網格看起來非常整潔，但是缺少砌體網格的滾動性。 (旁注：在向字典添加“ scroll-more-iness”時，我該和誰說話？)

Who should consider this pattern: Image sites.Pros: You may be able to display more images which encourages bulk comparing.Who uses it: Shutterstock, Google Images, Flickr.

誰應該考慮這種模式：圖片網站。 優點：您也許可以顯示更多圖像，從而鼓勵進行大量比較。 誰使用它： Shutterstock，Google圖片，Flickr。

網格的最佳做法 (Best practices for grids)

Here are a few best practises you can follow around styling your grid.

您可以按照以下一些最佳做法來設計網格樣式。

Product imagesTo encourage potential buyers, consider how you can make it easier for them to compare products. You can do this by;

產品圖片為了鼓勵潛在的買家，請考慮如何使他們更容易比較商品。 您可以通過以下方式實現：

• Using the same or similar background colours. Most online stores use white or a plain background.
  使用相同或相似的背景色。 大多數在線商店使用白色或純色背景。

• If you are selling clothes, make sure your models are in familiar poses. Also, avoid having your models wear the clothes inside out or sitting on the stove, or anything else that Zara thinks is a good idea.

  如果您要賣衣服，請確保您的模特擺姿勢熟悉。 另外，請避免讓模特兒將衣服穿在里面或坐在爐子上，或者避免Zara認為是個好主意。

Title lengthWhat is the best length for a product title? Often you won’t get much of a choice in this, but as a general rule — shorter is better for grids because, depending on how many columns there are, you may not have that much space for copy. And having a long column with single words just won’t fly. I would recommend deciding on the maximum number of characters per item title (based on horizontal space, font size and amount of lines) and asking the content creators to keep within that limit.

標題長度產品標題的最佳長度是多少？ 通常，您在這方面不會有太多選擇，但是作為一般規則-網格越短越好，因為網格取決于有多少列，您可能沒有那么多的復制空間。 而且只有一個長單詞的專欄是行不通的。 我建議確定每個項目標題的最大字符數(基于水平空間，字體大小和行數)，并要求內容創建者將其限制在此范圍內。

And obviously, avoid having descriptions or anything else that will be deemed as distracting from the main focus (the image). Consider seeing if you can get away without even having a title, like Shutterstock.

顯然，請避免使用描述或其他任何會干擾主要焦點(圖像)的內容。 考慮看看您是否可以在沒有標題的情況下離開，例如Shutterstock。

Amount of columnsIf you expect to have lots of results per screen (e.g. a big retailer) you should have more columns. If you expect to only have a few results per screen (e.g. a boutique retailer) you can have fewer columns with bigger images. Think of it the same way you would a brick and mortar store; ‘Bob’s Groceries’ down the road, will have loads of products on their shelves, all piling over each other. Whereas, at ‘Fancy Pants’ on 5th Avenue, there will be one garment every square meter.

列數如果希望每個屏幕(例如大型零售商)有很多結果，則應該有更多列。 如果您希望每個屏幕(例如精品店)的結果很少，那么可以減少具有較大圖像的列。 可以像存儲實體店的方式來思考它。 沿途的“鮑勃雜貨店”(Bob's Groceries)貨架上將堆滿大量產品，并且彼此堆積。 而在第五大街的“花式褲子”上，每平方米將有一件衣服。

Grids on mobile Most of the sites I reviewed keep their grid on mobile, and move over to two columns, the exception was Amazon who moved over to a list view. Having smaller images in two columns allows your users to see more items at once and makes comparing easier. Overall, If you don’t have to change your layout for mobile — don’t. Save the development time on something more practical like hiding Easter eggs or making custom cursors, for example.

移動式網格我審核的大多數網站都保持網格式移動，并移至兩列，但Amazon例外，后者移至列表視圖。 在兩列中使用較小的圖像可以使您的用戶一次看到更多項目，并使比較變得容易。 總體而言，如果您不必更改移動設備的布局，則不必。 例如，將開發時間節省在一些更實用的事情上，例如隱藏復活節彩蛋或制作自定義光標。

3.列表視圖 (3. List view)

The list view is used when the content or description is the most important thing for the user. There may or may not be an image, and if there is, it is supplementary or used to give more information.

當內容或描述對用戶來說最重要時，將使用列表視圖。 可能有或沒有圖像，如果有，它是補充圖像或用于提供更多信息。

A list view reads like a list (duh), while also allowing the user to easily compare and view different textual items.

列表視圖的讀取方式類似于列表(duh)，同時還允許用戶輕松比較和查看不同的文本項。

Because a list item takes up all the vertical space, it means that fewer results appear on the screen at the same time. This could seem like a bad thing, but if the user is skimming the results — the fewer results on a page may help with reducing cognitive load and make for easier comparisons.

因為列表項占據了所有垂直空間，所以意味著更少的結果同時出現在屏幕上。 這似乎是一件壞事，但是如果用戶瀏覽結果-頁面上的結果越少，則可能有助于減輕認知負擔，并使比較變得更容易。

When to use a list:

何時使用清單：

• If your results need descriptions or supporting text.
  如果您的結果需要描述或輔助文字。
• If you can’t rely on your results having (decent) images.
  如果您不能依靠具有(良好)圖像的結果。
• If your images are all similar and need a description to differentiate.
  如果您的圖像都相似并且需要描述以區分。
• If there are certain text variables that need to be highlighted.
  是否有某些文本變量需要突出顯示。

• If you expect some of your users to be in ‘search mode’.

  如果您希望某些用戶處于“ 搜索模式 ”。

• If you want to encourage your users to compare items.
  如果您想鼓勵用戶比較項目。

簡單清單 (Simple lists)

Simple lists have very few variables displayed in them — usually just a headline and a description, maybe even a published date if you want to get really wild. With such a simple layout, it allows users to easily skim and compare headlines and descriptions.

簡單的列表中幾乎沒有顯示變量-通常只是標題和描述，如果您想變得很瘋狂，甚至可能是發布日期。 通過這種簡單的布局，它使用戶可以輕松瀏覽和比較標題和說明。

Who should consider this pattern: Search engines and news sitesPros: You don’t need to rely on specific variablesCons: Because they are so simple, they can look under-designed without the proper consideration.Who uses it: Google search, most news sites

誰應該考慮這種模式：搜索引擎和新聞網站優點：您不需要依賴特定的變量缺點：因為它們是如此簡單，所以在沒有適當考慮的情況下它們看起來可能設計得不夠好。 誰使用它： Google搜索，大多數新聞網站

水平堆疊的物品 (Horizontally stacked items)

Horizontally stacked items make comparing elements even easier given that you can surface more information.

如果您可以獲取更多信息，則水平堆疊的項目使比較元素變得更加容易。

But how should you style them?

但是您應該如何設計它們的樣式？

Think of scanning items on a table (like Google Sheets — not a dinner table) and use the same principle. The standard layout for horizontally stacked items from left to right seems to be:

考慮掃描桌子上的物品(例如Google表格-而不是飯桌)，并使用相同的原理。 從左到右水平堆疊物品的標準布局似乎是：

1. Image,
   圖片，
2. Left-aligned title and description,
   標題和說明左對齊，
3. Right-aligned star rating and price.
   右對齊的星級和價格。

Depending what it is you are selling, you may have more elements like ‘company name’, ‘amount of beds and bathrooms’, ‘amount of people who have done the course’, ‘distance from the closest dive bar’, etc. Using this table-like structure allows the user to easily skim the elements that they are looking for.

根據您出售的商品，您可能具有更多的元素，例如“公司名稱”，“床和浴室數量”，“完成課程的人數”，“離最近的潛水酒吧的距離”等。這種類似表格的結構使用戶可以輕松瀏覽他們正在尋找的元素。

I would only recommend this layout for non-physical products (online courses, home rentals, etc), because with physical products, users tend to only visually compare items and not their information (think of when you are buying shoes or clothes) in which case a grid is better.

我只推薦這種布局用于非實物產品(在線課程，房屋租賃等)，因為對于實物產品，用戶傾向于僅在視覺上比較商品而不是其信息(例如，何時購買鞋子或衣服)。如果網格更好。

Who should consider this pattern: online retailers selling digital products, real estate companies, tourism, and other non-physical services or products.Pros: Good for skimming and comparing information.Who uses it: Airbnb (desktop), Udemy, Bookings.com, Amazon (sometimes), some news sites.

誰應該考慮這種模式：銷售數字產品的在線零售商，房地產公司，旅游業和其他非物質服務或產品。 優點：適合瀏覽和比較信息。 誰使用它： Airbnb(臺式機)，Udemy，Bookings.com，Amazon(有時)和一些新聞網站。

垂直堆疊的物品 (Vertically stacked items)

Products that were designed to be ‘mobile-first’ generally have vertically stacked items — and this makes sense, as it scales down best on small devices.

被設計為“移動優先”的產品通常具有垂直堆疊的物品，這是有道理的，因為它可以在小型設備上最大程度地縮小尺寸。

Depending on the context, some sites may switch between vertically and horizontally stacked items. For example, on desktop, Airbnb is horizontally stacked, while on mobile it is vertically stacked.

根據上下文，某些站點可能會在垂直和水平堆疊的項目之間切換。 例如，在臺式機上，Airbnb是水平堆疊的，而在移動設備上，它是垂直堆疊的。

Who should consider this pattern: Social networksPros: Works if some of the results don’t have images.Cons: Can view fewer items on a screen (desktop).Who uses it: Airbnb (mobile), Instagram, Twitter, Facebook

誰應該考慮這種模式：社交網絡優點：如果某些結果沒有圖像，則可以工作。 缺點：可以在屏幕(桌面)上查看較少的項目。 誰使用它： Airbnb(移動設備)，Instagram，Twitter，Facebook

列表的最佳做法 (Best practices for lists)

Ideal line length on horizontally stacked itemsWhen users are searching, they want to be able to scan & skim information. Having too few characters per line forces the user to read every word and stop at every line break. Having too many characters per line, makes it confusing to keep your place while reading. So what is the ideal length?

水平堆疊物品上的理想行長當用戶搜索時，他們希望能夠掃描和瀏覽信息。 每行字符太少會迫使用戶讀取每個單詞并在每個換行符處停止。 每行有太多字符，使您在閱讀時保持位置混亂。 那么理想長度是多少？

According to Baymard: 50–60 character per lineAccording to Web Typography: 45–75 characters per line

據Baymard ：每lineAccording 50-60字符的Web版式 ：每行45-75個字符

Personally, I have been using WebTypography’s rule — but that is only because I found the Web Typography rule years ago… And it is also more forgiving when I miscalculate something in my grid.

就我個人而言，我一直在使用WebTypography的規則-但這僅是因為幾年前我發現了Web Typography規則……而且當我對網格中的某些內容進行錯誤計算時，它也更加寬容。

MobileThe list with vertically stacked elements works really well on mobile. If you have a grid that is horizontally stacked, see if you can reshuffle it on mobile to stack vertically. And if your list is a simple one, well — it should already be mobile-ready anyway.

移動設備具有垂直堆疊元素的列表在移動設備上非常有效。 如果網格水平堆疊，請查看是否可以在移動設備上重新排列網格以垂直堆疊。 而且，如果您的清單很簡單，那么它應該已經可以用于移動設備了。

Fallback imageThe fact that you have gone with a list and not a grid, tells me that either, a) you are relying on your users to upload images, b) images aren’t as important as the text content. So, when setting up your design rules — make sure to have a fallback/default image if it is missing.

后備圖像附帶列表而不是網格的事實告訴我，要么a)您依靠用戶上傳圖像，要么b)圖像不如文本內容重要。 因此，在設置設計規則時-確保缺少后備/默認圖像。

4.結果或項目樣式 (4. Result or item styles)

In this section, we will look at common stylings for search results or items.

在本節中，我們將介紹搜索結果或項目的常見樣式。

擬形/高架卡 (Skeuomorphic/elevated cards)

These cards help give your platform depth and unifies the content clearly. I enjoy these cards more on mobile as they feel more ‘real’ than they do on desktop. This is not based on any research whatsoever — I just like it. Interestingly enough, Google’s standard search uses this pattern on mobile and not on desktop — so maybe that supports my theory?

這些卡有助于您深入了解平臺并統一內容。 我在移動設備上更喜歡這些卡，因為它們比在臺式機上感覺更“真實”。 這并不是基于任何研究，我只是喜歡它。 有趣的是，Google的標準搜索在移動設備而非臺式機上使用此模式-也許這支持我的理論？

For shits and giggles, head over to Material Design’s page on card components, and you can play around with adding descriptions and media to their interactive card. Gosh. Material Design is just like the best right?

如果想拉屎，請轉到Material Design的卡片組件頁面，您可以在其交互式卡片中添加說明和媒體。 天哪 材料設計就像最合適的嗎？

Something that I have struggled with when using elevated cards is something I only learnt from experience. When a user clicks on a card, they expect the whole card to be the link — especially if the card has a hover state. All of this is fine IF you only have one link on your card. But, now, let’s say you want to have a ‘favourite’ button, a link to the author’s page, a kebab menu, etc. it forces links (the buttons) on top of another link (the whole card). This can get really hairy and is not a problem that you would come across with a flat design where the whole div isn’t a link.

我只能從經驗中學到一些使用提升卡時遇到的困難。 用戶單擊卡片時，他們希望整個卡片都是鏈接，尤其是在卡片處于懸停狀態時。 如果您的卡上只有一個鏈接，那么所有這些都很好。 但是，現在，假設您想要一個“收藏夾”按鈕，一個指向作者頁面的鏈接，一個烤肉串菜單等。它將強制鏈接(這些按鈕)置于另一個鏈接(整個卡片)的頂部。 這會變得很毛茸茸，在整個div不是鏈接的平面設計中，這不是問題。

Pros: Looks like a single unit.Cons: Not great if you need to have multiple links on a single card.Designer notes: Make sure your background and card colours are different as the dropshadow alone isn’t clear enough to elevate it.Who uses it: Google Search (mobile), Sky News (Checked in May 2020)

優點：看起來像一個單元。 缺點 ：如果您需要在單個卡上具有多個鏈接， 則不太好。 設計師注意事項 ：確保您的背景和卡片顏色不同，因為單獨的陰影不足以提升陰影。 誰使用它： Google搜索(移動版)，天空新聞(2020年5月檢查)

卡概述 (Outlined cards)

These guys are the nerdy cousin of the elevated cards. They work the same way — but they load a bit quicker.

這些家伙是高架卡牌的書呆子。 它們的工作方式相同-但加載速度更快。

Pros: Because it isn’t as skeuomorphic as elevated cards, users don’t expect them to act as a single unit as much and you can get away with more links in a result. Just look at Bookings.com.Cons: I personally don’t find it as attractive as some of the other designs, but hey, one of the world’s biggest social network’s uses it so it must be effective, right?Designer notes: Consider making your background a bit different from the card’s colour.Who uses it: Facebook (desktop), Bookings.com (Checked in May 2020)

優點 ：因為它不像高架卡那樣擬人化，所以用戶不希望它們充當單個單元，因此您可以擺脫更多鏈接。 只需查看Bookings.com。 缺點 ：我個人認為它沒有其他設計那么吸引人，但是，嘿，世界上最大的社交網絡之一使用它，因此它必須有效，對嗎？ 設計師注意事項 ：考慮使您的背景與卡的顏色有所不同。 誰使用它 ：Facebook(桌面)，Bookings.com(于2020年5月檢查)

平面 (Flat)

Because it is clean, simple, quick to load and puts the emphasis on the content and not the design, this style of flat list has become very popular. But ‘how do you separate the different results from each other?’ you may ask, well you have two options;

因為它干凈，簡單，易于加載，并且強調內容而不是設計，所以這種扁平化樣式已變得非常流行。 但是，“如何將不同的結果彼此區分開？” 您可能會問，那么您有兩種選擇；

1. you can use white space and consistent design elements to show separation. Think Instagram.
   您可以使用空格和一致的設計元素來顯示分隔。 想想Instagram。
2. You can use faint lines to show the separation. Think AirBnb and Twitter.
   您可以使用淡淡的線條顯示分隔線。 想想AirBnb和Twitter。

Pros: Clean, simple, and puts emphasis on the content.Cons: Flat designs can look ‘under-designed’ without the proper graphic consideration. Just compare AirBnb and Amazon (list view) to see what I mean. Both have graphics, line separators, star reviews, etc. but AirBnb just looks more polished. Designer notes: Be very considerate when choosing your background and font colours. Avoid defaulting to #000 and #fff as this can be very strenuous on the eyes. (

優點：干凈，簡單，并強調內容。 缺點：沒有適當的圖形考慮，平面設計可能看起來“設計不足”。 只需比較AirBnb和Amazon(列表視圖)即可了解我的意思。 兩者都有圖形，行分隔符，星級評論等，但AirBnb看起來更加優美。 設計師注意事項：選擇背景和字體顏色時要非常體貼。 避免默認為＃000和#fff，因為這在您的眼睛上可能非常費勁。 (

混合 (Mix)

To emphasize a result that is more important than others, mix it up by using different styles for the important stuff and flat layouts for the generic.

為了強調比其他結果更重要的結果，請對重要內容使用不同的樣式，對通用內容使用平坦的布局，以將其混合。

Who uses it: Google news (app) (Checked in May 2020)

誰使用它： Google新聞(應用程序)(于2020年5月檢查)

5.總結思想，以及如何與利益相關者最好地進行討論 (5. Closing thoughts and how to best workshop this with your stakeholders)

The reason I first got interested in this subject was because a team I was working with wanted to use a grid design for our online learning platform’s search page. Because grids are pretty. Because images are pretty. Because text is ugly.

我最初對該主題感興趣的原因是，與我一起工作的一個團隊希望為我們的在線學習平臺的搜索頁面使用網格設計。 因為網格很漂亮。 因為圖像很漂亮。 因為文字很丑。

And then I walked in, guns blazing, saying that for online courses, a description is more important than having a big image (unless it is like, art classes or something) hence we needed to use a list layout. I showed page after page of research about why it was a better pattern for our current use case. While I got my way in the end, I regret my approach and should have been more informative and supportive with my team and clients.

然后我走進來，大聲疾呼，說對于在線課程來說，描述比擁有大形象更重要(除非是美術課之類的東西)，因此我們需要使用列表布局。 我逐頁顯示了有關為什么對于我們當前用例而言更好的模式的研究。 雖然我最終取得了進展，但我很后悔，應該為我的團隊和客戶提供更多的信息和支持。

If I were to workshop this now, much like the ‘neck and head’ metaphor used in My Big Fat Greek Wedding, I would have slowly bought everyone with me onto the same logic journey. I would have started with the following questions:

如果我現在要參加這個研討會，就像在“我的大胖希臘婚禮”中使用的“脖子和頭部”的隱喻一樣，我會慢慢地將所有人帶入同一邏輯之旅。 我本來會提出以下問題：

1. Are the users in search mode, browse mode or both?

   用戶是處于搜索模式，瀏覽模式還是同時處于這兩種模式 ？

2. If the user is in search mode, what will help them make decisions?
   如果用戶處于搜索模式，則什么可以幫助他們做出決定？
3. If the user is in browse mode, what is entertaining them?
   如果用戶處于瀏覽模式，那么娛樂他們是什么？
4. List elements in order of what the user would find most important when searching/browsing.
   按用戶在搜索/瀏覽時發現最重要的順序列出元素。
5. What design pattern (list or grid) are our competitors using and what elements are they emphasising? (Sometimes, looking at your competitor’s work is like getting free user research.)
   我們的競爭對手使用哪種設計模式(列表或網格)，并且強調哪些元素？ (有時，查看競爭對手的工作就像獲得免費的用戶研究一樣。)
6. What platforms are solving a similar problem to us and what pattern (list or grid) are they using?
   哪些平臺正在解決與我們類似的問題，它們使用的是什么模式(列表或網格)？
7. What design pattern (list or grid) would best support our user's needs?
   哪種設計模式(列表或網格)最能滿足我們用戶的需求？