保姆级教程！移动端表格界面的视觉设计拆解

上期回顾：

一、列表页的顶部设计

开始列表页的设计要先完成顶部栏的设计，主要包括搜索、筛选、排序等标准内容。简单的列表页可能顶部只是个标题栏或是只有搜索，这种最基本的模式就不用多加解释。

更进一步，就是添加了基本筛选或排序的功能，通常它们会在标题栏外独占一行。

在这类设计中，额外增加的筛选或排序栏通常和顶栏是连接在一起的，且它的高度通常也小于顶栏。然后下方的选项可以是等分的，也可以是左右滚动的。

移动端的空间小，所以为了尽可能利用空间，筛选和排序的操作选项往往就非常多样。包含单选、开关、下拉按钮、唤起弹窗等四种类型，它们往往会组合出现。

而在这些操作选项中，有个非常值得注意的小细节，就是排序和下拉菜单控件的冲突，因为排序有上下箭头指示，下拉菜单也有上下箭头指示，所以为了避免冲突，单一排序选项我们会同时放上下箭头用于点亮，多排序选项就只放下拉菜单，用文字将排序条件全部罗列出来。

再往更复杂的场景推进，除了常规筛选和排序外，这类页面往往还会增加额外的选项，尤其是标签选项。从而让顶栏变成有三、四行的 “汉堡包”形态。

这些多栏的操作和布局由产品需求决定，而在设计中我们要注意的，就是每栏内选项的样式要有差异，上一栏用普通文字按钮，下一栏就用标签按钮。如果没有非常显著的权重对比，可以直接使用相同的栏高和接近的选项视觉大小。

顶部栏因为内容多，往往会占据屏幕很大的区域，阻碍用户浏览下方的信息流，所以这类顶栏通常还会在上滑后缩小，隐藏一部分选项，通过下拉会重新显示。

以上就是顶栏设计的相关思路，如果要添加运营模块就是另一个议题，不在这个讨论范围内了。

二、列表页的列表设计

接下来我们就要展开对列表组件的设计了，而在设计单一列表项之前，我们需要先确定整个组件的基本架构。除了单列和多列的差异之外，还有在视觉中的卡片与通栏效果之分。

卡片效果即每个列表项是以卡片形式呈现的，不同列表项是不同的卡片，相互之间有间距，且有背景色来突出分隔间距。

通栏则是列表之间没有间距，且横向填满整个区域的做法（数量少的时候下方就有背景），列表项之间通常使用分割线来做区分。

使用哪种类型由项目整体的视觉风格决定，但不管选哪种我们还要确定一个设计细节，就是页面左右内间距的大小。

原则上一个项目内除了全屏图片、视频等场景外，会统一一般页面的内间距尺寸，但在真实的设计场景中，列表页的内间距往往和其它页面不一致。

造成这个差异的主要原因，就是列表作为信息流，是最吸引用户注意力的页面类型，为了放大它的效果就要尽量增加它的面积，让内容可以看的更清晰，提供更沉浸的浏览体验。所以重要的信息流页面，往往只会使用8以下的内间距。

接下来，我们就分别解释单列和多列列表设计的细节。

三、单列列表

单列列表的设计先确定框架的样式，基本上就下面几种模式。

而单一列表项内的设计逻辑，遵循先上下、后左右的顺序。

上下即确认该列表项内从上到下分成几个模块，比如常见的动态列表项，从上到下会包含用户、内容、操作三个部分。外卖或商品订单列表项，从上到下会包含店铺、订单信息、操作三个部分。

上下模块是由字段的不同类型拆分而来，不同产品需求会拆分出不同的分类形成不同的模块，也可能不需要拆分出上下模块只有一个即可。这就需要设计师自己分析字段做决策了。

完成上下模块的划分后，再分别定义每个模块内的左右内容布局。以商品服务卡片为例，通常左侧是图片右侧是文字信息，而一些新闻资讯类信息流中，可能就会倒过来。

设计中最主要的难点，就是单个列表项应该做多高，图片应该用多大。这里的设计逻辑，就是先完成文本信息的布局和设计，再决定左侧图片的高度。

而包含了大量字段的信息区域，设计的逻辑其实并不复杂，也遵循先上下再左右的逻辑，比如酒店列表项中，先确定标题、数据、位置、特色、介绍、价格等栏，然后再确定每个栏内左右的布局。

具体每个字段应该用什么样式和颜色，就要根据项目实际场景决定了，没有绝对的限制。而信息部分最高发的问题，就是使用了过小的字号和过多的字重，建议在卡片内最小字号不低于10，且主要使用regular字重，没有绝对的必要不加粗。

四、多列列表

多列列表的设计，同样也要先去确定框架，基本就下面这几种模式。要注意的是，只有卡片模式会用瀑布流，而通栏模式只适合做等高。

接下来就是设计单个列表项的内容了，双列列表的设计会相对更容易一些，因为它是由上下布局主导的，左右布局的考虑因素非常少。

以常见的双列商品列表为例，从上到下分别是图片/视频、信息、销量评价、商家。动态卡片常见的做法则是图片/视频、信息、用户。

如果双列卡片中出现图片或视频，那么就需要重点考虑它们使用的高度。一种情况是由我们设置一个固定的长宽比例来生成高度（适配需要），比如16:9、2:3、4:3 等。

另一种情况，则是由内容的比例决定，即用户上传什么比例的图，展示什么比例，比如花瓣这样。但在这种情况下，还需要决定它的最小和最大尺寸。

而下方的文本信息布局，逻辑就和上面提到的基本一致，只要向下罗列展开即可。

完成上面这些内容的定义，也就完成了该页面UI元素的设计。但是，对于作品集设计或者完整的方案来说还没有结束。我们还需要为了最终展示效果服务，所以这里还有个列表页设计最关键的步骤 —— 配图。

列表要保证观看的体验，就需要配图也是流畅统一的，需要尽量按一个标准、构图、风格来完成图片封面的填充，而不是完全随心所欲的往里贴，最终的展示效果一定特别差。下面我们直接用线上的真实图例来做个对比。

同时，一个优秀的设计案例必然是包含有效的细节在里面，而列表中除了配图外最值得关注的细节，就是不同列表项是有状态上的差异的。在最终设计稿中，我们可以尽量展示不同的状态，才能让这个列表看起来更生动、真实，而不是很应付的复制黏贴。

列表页设计的难度并不大，视觉性也不强，主要关注的是对布局规则的制定逻辑，以满足用户体验和项目的实际需要。想要做好它就必须要先积累对它的正确认识，强烈建议你们对比同类型列表截图并分析它们之间的差异和优劣（真实项目做竞品分析中会干的）。

结尾

下一篇应该会围绕在个人主页或我的页面的设计来做介绍，也可能是表盘类页面，想要什么类型的可以留言或在社群中发出来。

我们下篇再贱~