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

一、列表页的程移顶部设计

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

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

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

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

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

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

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

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

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

二  、列表页的列表设计

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

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

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

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

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

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

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

三 、单列列表

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

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

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

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

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

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

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

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

四、多列列表

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

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

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

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

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

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

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

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

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

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

结尾

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

我们下篇再贱~

作者 ：酸梅干超人