商品列表设计

如何解决信息集合的问题？

在交互设计中，信息集合的方式往往采用卡片式设计和列表设计。列表针对的集合主要是信息栏的“排列展示”，而卡片式主要解决的是单条信息的“内容较多”，以及此信息的“可操作性”。

一、列表设计

什么是列表设计？

列表设计较为简单，纵向列表以展示所有相同的信息栏，用户能够滑动快速查看信息，并不必强调可操作性。传统的列表设计主要包括简单图文加分割线，像通讯录、聊天框的简单信息展示，能够帮助用户快速浏览。现在随着信息栏内容的丰富，也有卡片式列表，如知乎、微博、Facebook等就是采用这种列表方式。

信息栏是用图文＋分割线还是卡片？

这个需要根据信息栏的内容而定。当信息的内容较为复杂且要强调操作时，卡片是个好选择（如左）；反之，假如内容较为简单，且无操作性时，用图文加分割线的传统列表较合适（如右）。简而言之，卡片是为了拓展信息块的视觉深度和突出可操作性。

二、卡片式设计

卡片式设计是为了将内容信息更好地展示出来，并利用信息来挑逗用户产生操作。

视觉上需要有卡片的真实感受，操作上卡片的翻转、移动、折叠、分享等操作也可以通过设计来强调。

一些有趣的操作

好的视觉体验

我们现在就先说说信息流设计中最常见的两种类型：列表式和卡片式。

一、列表式

列表式常见于新闻、阅读、聊天类APP

信息元素包括：图片/头像、标题/名称、概要/简介、标签/专题、时间

1.这类产品信息流传达的条数多、频率高，用户需要通过快速浏览题目、概要、提示文字等来确定是否需要点击进入信息详情。

2.列表式多为静态列表，加载速度快

3.大多以时间线作为排序标准

设计要点：

列表上展示的内容尽量精简概要，文字不能过长，用户对列表的行为大多是扫描浏览为主，文字太多会对用户造成负担

二、卡片式

与用户互动较多的产品更多使用卡片式

卡片式的信息元素包括：头像/图片、名称、文字内容、标签/话题、赞评转、时间

1.展示的内容比较丰富，经常会伴随图片，屏幕占用交大，用户的阅读体验更好

2.卡片式通常会伴随交互行为，可以有更多操作，如点赞、收藏等

3.因为卡片式通常由交互行为，所以每次打开APP都需要刷新获取最新的交互数据

4.排序标准不一，有的以信息发布时间线为标准，有的以最新发生交互的时间为标准，还有以赞评转数排序

设计要点：

卡片式信息展示的内容多，并且多注重引导交互行为

卡片式设计与列表式设计无所谓好坏之分，只有在当前情景下是否合适，是否能高效展示信息的同时做到与用户体验的和谐一致。

按【Ctrl+R】组合键调出标尺，参考线。其中，上面两部分的划分分别为状态栏（高40像素）和导航栏（高88像素)

选择矩形工具，绘制一个和背景同样大小的矩形，填充紫色（RGB：115、60、215）到深紫色（RGB：56、25、159）的线性渐变，渐变角度为90°

将状态栏.psd拖入到当前画布中，并将图层的混合模式设置为“滤色”

在上面绘制返回按钮，添加导航栏标题文字内容“笔记本”

采用同样的方法绘制其他图标和文字

做完收工 Ctrl+s 保存

学习UI设计的时候，经常要接触到页面的布局，布局的方式会直接影响一个APP的视觉效果，好的布局方式，往往能带来舒服的视觉效果，更能得到用户的接受与好评。然而万变不离其宗，移动端页面常用的布局，不外乎以下8种。

1.列表式布局

·列表式布局

特点：内容从上向下排列，导航之间的跳转要回到初始点

优点：

1.层次展示清晰明了

2.视线流从上到下，浏览体验快捷

3.可展示内容较长的菜单或拥有次级文字内容的标题

缺点：

1.导航之间的跳转要回到初始点，灵活性不高

2.同级内容过多时，用户浏览容易产生视觉疲劳

3.只能通过排列顺序、颜色来区分各入口重要程度

的很多地方都运用了列表式布局，这种布局方法能够让用户清晰明了地知道页面的内容，简介又大方。

2.陈列馆式布局

支付宝·陈列馆式布局

特点：布局比较灵活，即可以平均分布这些网格，也可以根据内容的重要性做不规则分布

优点：

1.同样的高度下可放置更多的菜单，流动性强

2.直观展现各项内容，方便用户浏览经常更新的内容

缺点：

1.不适合展示顶层入口框架

2.界面内容过多时显得杂乱，让用户眼花缭乱

支付宝的界面相信大家都很熟悉，它的首页就使用了陈列馆式布局，它能直观得展现各项内容，而且首页的内容都是用户经常游览的，不过由于界面过多，视觉体验效果就稍微逊色了一点。

3.九宫格布局

·九宫格布局

特点：相比陈列馆式，九宫格布局比较稳定为一行三列式

优点：清晰展现各入口，方便用户快速查询

缺点：

1.菜单之间的跳转要回到初始点

2.容易形成更深的路径，不能显示太多入口次级内容

很多软件都喜欢运用九宫格布局，的专题管理员这里也使用了这种布局，井然有序且间隔合理，视觉效果挺舒服的。

4.选项卡式布局

·选项卡式布局

特点：导航一直存在，具有选中状态，可快速切换另一个导航

优点：

1.直接展示最重要接口内容信息

2.分类位置固定，清楚当前所在入口位置

3.减少界面跳转的层级，轻松在各入口间频繁跳转

缺点：1.功能入口过多时，该模式显得笨重不实用

的首页也使用了选项卡布局，图中上面的红色框和下面的红色框都是此布局，但是，个人觉得上面的选项卡由于功能入口太多而显得笨重，下面的则恰到好处。

5.旋转木马式布局

一个·旋转木马式布局

特点：重点展示一个对象，通过手势滑动查看更多内容

优点：单页面内容整体性强，聚焦度高

缺点：1.受屏幕宽度限制，可显示的数量较少

2.不能跳跃性地查看间隔的页面

3.各页面内容结构相似，容易忽略后面的内容

阅读软件“一个”的首页则使用了旋转木马式布局，一个的主题是“复杂的世界里，一个就够了”，所以它选用此布局起到了画龙点睛的作用，更能提高单页面的聚焦度。

6.行为扩展式布局

QQ好友列表·行为扩展式布局

特点：能在一屏幕内显示更多的细节，无需页面跳转

优点：

1.减少页面跳转的层级

2.对分类有整体性的了解，清楚当前所在的入口位置

缺点：分类位置不固定，当展开的内容较多时，跨分类跳转不方便

腾讯QQ的联系人页面使用了行为扩展式布局，相信大家也不陌生，用起来也很方便。

7.多面板布局

QQ兴趣部落·多面板布局

特点：能同时呈现比较多的分类及内容

优点：1.分类位置固定，清楚当前所在入口位置

2.对分类有整体性的了解，减少界面跳转的层级

缺点：界面比较拥挤，容易产生视觉疲劳

腾讯QQ的兴趣部落页面使用了多版面布局，能同时呈现出比较多的兴趣分类及内容，这也是一种典型的页面布局方式。

8.图表式布局

支付宝·图表式布局

特点:用图表的方式直接呈现信息

优点：直观，总体性强

缺点：详细信息显示有限

支付宝作为一个与金钱有关的软件，它余额宝页面选择了与自身比较符合的图表式布局，这种布局能直观详细地显示出信息，很适合用于数据、账单有关的APP。

首先，在SharePoint Designer中打开某个列表的概览界面

点击List Settings里面的Design Forms in InfoPath

此时，Infopath会被打开，并且自动产生一张表单，如下

我们先不要任何修改，直接发布

此时，再去新建项目的话，就会使用该表单

好吧，你可能觉得不是很明显的，那么我们可以去调整那个表单设计好了。在浏览器中，点击下面的“自定义表单”也是可以打开Infopath的

再次发布一下吧

我们还可以做更多事情，例如我们希望当用户没有选择Existing Product的时候，下面那个Alternatives控件不能编写内容。

列表的布局常见于新闻类App。其布局形式的特点在于能够在较小的屏幕中显示多条信息，用户通过上下滑动的手势能获得大量的信息反馈。而列表也是一种非常容易理解的展示形式。

卡片式布局常见于微博、Facebook等社交类App，也出现于其他不同类的App中，形式非常灵活。其特点在于，每张卡片的内容和形式都可以相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片承载不同的内容。而由于每张卡片都是独立存在的，其信息量可以相对列表更加丰富，而且可以让用户对其进行评论、点赞等等操作、省去了跳转到详情页面的步骤。但由于卡片的信息很多，在小屏幕上并不能显示多个卡片，一屏内卡片数很少会超过3个。

而双栏卡片的布局形式，比较常见于以图片信息为主导的App。例如Pinterest，一些商城的商品陈列页面。这种形式与卡片式类似，但它能在一屏里显示更多的内容，至少4张卡片。同时，由于分开左右两栏的显示，用户可以更加方便地对比左右两栏卡片的内容。

布局背后的行为逻辑

然而，为什么新闻类的多采用列表，社交类多采用卡片，图片类多采用双栏卡片？

我们回归到用户需求和行为模式来思考这个问题。

当我们在浏览新闻的时候，我们的需求是什么？大部分人的需求都是，一方面想要知道最近发生的一些事情，这是量的需求；另一方面，想要深入了解这一事情是什么，这是深度阅读的需求。而量的需求往往具有先行性，深度阅读是在其后的。基于这样的需求，用户在浏览新闻时候的行为模式大概如下：快速大量浏览→筛选→判断→快速大量浏览，如下：

由上图看出，用户在浏览新闻时，需要快速地处理大量的信息，而且高频地在极短时间内进行决策。因此，高效性就极为重要，假如在一屏中只显示一两条信息显然是不合适的。除此之外，展示形式的高度一致性和对展示内容的信息量进行严格控制也及其重要。高度一致性可以让用户快速理解展示形式，从而能自主选择自己想要的内容，便于筛选和判断。控制信息量能减少信息干扰，从而提高效率。由于这样的限制，列表就成为了新闻展示的合理形式。

同理，在用Pinterest时，我们究竟是想要什么？是找到最适合的图片。最适合，就会存在唯一性，就会有对比，取舍，选择。这也意味着，用户不是一张张按顺序浏览，而是反复地对比浏览，如下图：

基于这样的行为模式，要求布局形式：1.在一屏能内能展示足够多的内容；2.能让用户方便地对比内容。同时，对内容本身也有要求：1.内容本身是能被快速理解。2.内容本身具有可比性。

以厨房故事为例，这是一个款学习西餐的App，跟Pinterest毫无关联，却用着同样的布局。除了视觉美观这样感性的解释之外，我们可以从别的角度来理解。

假设这样一个场景，饭点到了，今天我想吃吃西餐，所以打开了每日厨房，挑其中一款来作为今晚的晚餐。因为，可能我这周就做这么一顿西餐，所以这次的选择必须精挑细选，既要好吃，还要颜值高，更要操作简单。在每日厨房的首屏中展示了各种成品的图片，这很好，我可以通过比较颜值来挑选我想要的。还有每款菜的收藏数，这大概能体现这款菜的综合评价，这也帮助我降低了选择的难度。很快，经过几番的对比，我最终选择了肉酱意面作为今晚的晚餐...

由以上场景可以说明，用户在使用这款App时，由于只能选择一次，所以他不得不对比内容。同时，易于理解的图片和数据促成了对比这一行为。所以，双栏卡片这样的布局是一个很好的承载方式。

以同样的思路，当我们在刷微博的时候，我们的需求又是什么？更加便捷地跟好友或者是关注的人进行互动。而进行互动的前提是，要对内容进行理解性地阅读，而不是快速地跳读。所以在浏览好友动态时的行为模型应该如下：

上图说明，在展示形式至少要满足2个条件。第一，需要承载致少两个纬度的信息，一是让用户理解的内容信息，二是让用户互动的操作信息；第二，在当前页用户可以对内容进行操作，甚至能在当前页把操作完成。然而，这还不能完全说明卡片式的布局是最合理的。这需要把微博内容的易理解性，信息的复杂度等因素综合考虑，卡片式的布局是一个比较好的解决方案。

由于卡片式的设计形式非常多样和灵活，适用范围也极为广泛。且不在这里作深入的探讨。

总结

结合各布局形式的特点和背后的行为逻辑，我们可以得出以下结论:

当用户的行为模式更倾向于高效，迅速地筛选信息，列表是一个非常好的选择。

当用户的行为需要反复对比信息，或者需要在单屏内获得更多信息，可以尝试用双栏卡片式布局。

当用户不仅仅需要消费所展示的内容，更愿意地对其内容进行互动，那么卡片式的布局可以优先考虑。

最后反思

本文仅仅是通过个布局形式的特点和背后的行为逻辑去思考布局的适用范围，显然，这种单一维度的思考，在实际案例中是不合适的。除了用户的行为模式意外，需要考虑到的因素可以有：

1.各布局形式视觉流特点（列表是自上而下的"I"型视觉流，双栏卡片是上下左右跳动的"z"型视觉流）

2.信息传达的优先性（列表更适用于文字传达，卡片式更适合图片传达）

3.布局的可延展性

4.对品牌的塑造性

5.等等

而针对每个场景，每个App，每个页面，每个考虑因素的比重也是不一样的，这需要具体问题问题具体分析。但无论怎样，设计的结果可以千变万化，但设计背后的逻辑必须是可以追本溯源的。