在一款App中，占有页面最多的恐怕要属列表了，导航列表、选项列表、用户列表、消息列表、信息列表……等等。无处不在的列表，也有多种多样的表现形式

——不过，纵使它再变化多端，也是万变不离其宗，我们不妨总结分析一下APP中列表的UI界面设计，以便今后的设计中规避不必要的错误，也能帮助我们创作出更新颖的列表界面形式。

内容

A尺寸
B类别
一.卡片式
二.简约风格
三.色块风格

A 尺寸

布排列表条目时，若担心尺寸把握得不合理，可以参照IOS的列表尺寸,附上sketch上的 IOS UI 模板中的列表尺寸作为参考 。

（因为sketch默认的iphone6画布是375x667，为了方便查看，此处标注放大了2倍，即750x1334）

B 类别


在sketch IOS UI模板中，展示的基本列表条目类别算是比较完整，接下来我们一起分析一下App中比较常见的列表类型，其中的设计细节处理，用于什么状况，帮助我们理解列表页面在App中的作用。


一.卡片式


卡片式设计在UI界面设计中应用十分广泛，比如微软的win10、Win8，谷歌很多产品也采用了卡片式设计。以方块卡片为信息的容器，将所要呈现的信息模块化，立体直观。


表现方法：以区别于底色的色块作为一个模块，以边框、阴影等打造立体感，卡片颜色通常浅于底色。


1.优点
①清晰直观，信息明确
卡片的布局将信息、图片有规律的整合，避免了信息散乱，更直观明确。

②加强了可点击感

卡片式设计边缘清晰，视觉立体的特点，暗示了用户的可触区域，有效降低了误操作的几率。

Saltedfish Lady-Dribbble

③页面整齐

卡片式布局将内容规整到一个方块里，利于整齐排列的网格式布局，使界面不会因为信息多显得杂乱。而整齐美观。

dribbble -shot_dapp

④响应式设计

卡片式设计中信息模块化，每块的宽高大小利于调节，这样的特性非常适用于多平台的响应式设计，在不同的设备平台，也能够很好地进行自适应展示，且更容易做到不同平台的风格统一。

⑤可拓展性
卡片式的栅格布局使其更利于设计的更新迭代，且更容易做到不同平台的风格统一，视觉的一致。

⑥交互操作的多维度
卡片式的设计立体的视觉属性，在交互操作上也可以有多重变化，它可以堆叠、覆盖、移动、划去，或者翻转，视觉深度得到了延伸。多维度的交互，使其相对而言更灵活，将虚拟视觉与真实物理感受完美结合。

2.缺点

①对页面的空间占比大，一屏幕内呈现的内容相对少。
内容分块使界面利用的空间变小，当用户需要大范围浏览、接收大量相关性的信息然后过滤筛选时，效率会降低，所以不适用于此种情况。需要显示的内容比较长的页面，卡片式给人的视觉感官度几乎为零，卡片的分界反而显得多余，也不适用。

②卡片形式统一性难以把控
当一个产品卡片要承载各种不同的信息时，就需要对应好几种不同的卡片的样式，而这些卡片样式的统一性就难以把控，会显得比较杂乱。


3.适用范围
根据其优缺点，我们得出：卡片式设计适用于对图文编排依赖性强，信息类别较单一，不需要大量浏览，偏向于展示的界面。
就列表而言，常用于购物、新闻、旅游、日历类的首页。

二. 简约


简约风格设计中削减了一些不必要的视觉元素，只留下最有用的信息，通过简化让内容清晰可见。大家熟知的无印良品、苹果都是都属于简约风格。简约风格以它特有的低调质感，以及“突出功能，回归本真”的设计理念，打动了现代人。
表现方法：在设计中应用纯粹柔和的色彩、简练的线条、统一唯美的图片，强调主要内容，icon简洁、纤细、易辨识，留白区域加大。应用图标更鲜艳。

Alim Maasoglu - Dribbble

1.优点
①高端优雅
克制的色彩、大面积的留白以及简洁的视觉元素，细节的精致，使整个产品显得更有质感。


②清晰、精准的表达
通过简化，让内容变得更清晰，强化了产品的功能。

②整体视觉一致
简约风格设计中的线条、形状等几个元素的反复出现利用，强调了主题，保证了整体的一致性。




2.缺点
①展示内容过少
简约风格的设计削减了不必要甚至是次要的展示内容以及相应的视觉元素，因此需要展示内容比较多时，则难以用单一的元素明确地将各种各样的内容进行合理区分。同时留白的特点也限制了展示内容的多少。


②无法与广告并存
简约风格的精准特质，使其无法与视觉极其不稳定的广告并存。即使广告是事先预设好的，也难以避免地成为整个设计中的破坏元素。


③缺乏辨识度特色
简约设计的有规律可循，使设计缺乏特色，尤其是当下使用泛滥的黑白灰色调，很难让一个产品打造独特的视觉体验。

3.适用范围
根据其优缺点，我们得出：简约设计适用于需要展现内容较少，以图片为主，功能趋于简单的应用。
在列表运用上，更倾向于文艺类、高端购物类的app。

三.色块风格

色块风格即用色块将内容进行分区。与卡片式风格很像，其实也算是卡片式的一种。但是色块的表现相对来说更扁平化，应用也最为广泛。
表现方法：底色通常有两种，一种颜色为列表条目的底色，另一种为整个页面的底色。

1.优点

相比真正意义的卡片式，色块风格在列表的运用上更有可塑性，能契合大部分主题。

2.缺点
色彩较多时，对大多数新人设计师而言比较难把握。

3.适用范围
白色条目配浅灰色底色,不会出错的万能的搭配，适用于各类app。深色底色配多彩的列表条目，适用于各种运动数据类应用。

以上图片均来自网络，

部分观点参考：1.知乎：卡片式设计有什么好处？https://www.zhihu.com/question/21473866

2.学UI 网：形式与功能 – 卡片式设计基础概念和运用方法http://www.xueui.cn/experience/app-experience/basic-concept-of-card-design.html

「废银」整理编写

愿我们都成为自己想成为的设计师

欢迎交流指正，码字不易，觉得有用记得给我点赞哦！谢谢阅读~