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优点之一是可以同时浏览“锁定香蕉面包食谱”的大量图像。 在选择要使用的设计模式时，请考虑您