element-ui 网格_UI备忘单：列表与网格

element-ui 网格

重点 (Top highlight)

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)，一个是列表，另一个是网格。 需要进一步说明吗？ 在一个列表中，项目位于彼此之间。 在网格中，项目彼此垂直和水平放置。

Example of a list view (left) and grid view (right). 列表视图(左)和网格视图(右)的示例。

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.

当您尝试展示图像时，网格视图可以很好地工作，但是它还允许您同时显示多个产品。 这也有助于用户直观地比较不同的项目。 不利之处是文本没有太多空间。

Example of a grid. 网格示例。

网格是什么样的 (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.

所有项目的大小均相同时，即为标准网格。 该模式可能会在您的工厂零售站点运行中使用。 这个网格使他们的所有产品保持整洁，使用户比较物品更加容易。

Example of a standard grid. 标准网格的示例。

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营销人员都利用此功能受益匪浅，并制作了很长的图像，以便在用户滚动时获得更多的“屏幕时间”。

Example of a masonry grid. 砌体网格的示例。

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”时，我该和谁说话？)

Example of a justified grid. 合理网格的示例。

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)，同时还允许用户轻松比较和查看不同的文本项。

Example of a list. 列表示例。

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.

简单的列表中几乎没有显示变量-通常只是标题和描述，如果您想变得很疯狂，甚至可能是发布日期。 通过这种简单的布局，它使用户可以轻松浏览和比较标题和说明。

Example of a simple list. 简单列表示例。

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.

根据您出售的商品，您可能具有更多的元素，例如“公司名称”，“床和浴室数量”，“完成课程的人数”，“离最近的潜水酒吧的距离”等。这种类似表格的结构使用户可以轻松浏览他们正在寻找的元素。

Example of a list with horizontally stacked items. 具有水平堆叠项目的列表示例。

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.

被设计为“移动优先”的产品通常具有垂直堆叠的物品，这是有道理的，因为它可以在小型设备上最大程度地缩小尺寸。

Example of a list with vertically stacked items. 具有垂直堆叠的项目的列表示例。

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的卡片组件页面，您可以在其交互式卡片中添加说明和媒体。 天哪 材料设计就像最合适的吗？

Example of elevated cards. 高架卡示例。

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.

这些家伙是高架卡牌的书呆子。 它们的工作方式相同-但加载速度更快。

Example of outlined cards. 卡概述示例。

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。

Example of results in a flat style. On the left we have an example without lines and on the right it uses lines. 平面样式结果示例。 左边是没有线条的示例，右边是使用线条的示例。

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.

为了强调比其他结果更重要的结果，请对重要内容使用不同的样式，对通用内容使用平坦的布局，以将其混合。

Example of mixed styles. 混合样式的示例。

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?
   哪种设计模式(列表或网格)最能满足我们用户的需求？

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in. UX Para Minas Pretas (UX For Black Women)，这是一个巴西组织，致力于通过采取行动，赋权和知识共享的举措来促进科技行业中的黑人女性平等。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

翻译自: https://uxdesign.cc/ui-cheat-sheet-list-vs-grids-48151a7262a7

element-ui 网格