1.3 App产品设计原则

App产品设计作用的对象是用户，只有从用户的角度出发，深入、全面地了解用户的需求，才能做出具有良好用户体验的设计。在设计App产品时，需要遵循一些设计原则，这些原则包括主体-背景原则、接近性原则、相似性原则、连续性原则、封闭性原则、对称性原则、共同命运原则。

1.3.1 主体-背景原则

主体-背景原则是基于人的眼睛和意识在感知事物时，具有能自动将主体和背景的视觉区域进行区分的功能，如图1-3所示。

图1-3

主体是指在一个场景或界面中占据观者主要注意力的所有元素，其余的元素在此时则是背景。当主体与背景重合时，会对观者的视觉系统产生影响，人们的视觉系统倾向将小的物体视作主体，而把大的物体当作背景。在用户界面设计中主体-背景原则的应用很广泛，例如，通过处理，将图像中的某些部分变成背景，从而使主体变得更为突出，这样既可以显示更多的信息，也可以吸引用户的注意力。

图1-4所示的是腾讯视频App和爱奇艺视频App的界面，它们为了凸显通知的重要性，都使用了主体-背景原则，使通知的信息能够高效地传达给用户。

图1-4

1.3.2 接近性原则

物体与物体之间的相对距离会影响人们的感知。相较于距离较远的两个物体，彼此靠近的两个物体看起来更像是一个组合，两个物体越接近，被视觉系统自动组合在一起的可能性就越大。在App产品的交互设计中使用接近性原则将相似的元素安排在相近的位置上，从而让人们感受到项目整体的结构和顺序，减轻用户对信息资源的认知压力，允许他们一次性处理一类信息。在图1-5中，圆形和长方形的距离不同，使人们在下意识中将它们分成了不同的部分。

图1-5

某商品展示页面设计使用的就是接近性原理，每个商品的关键信息，如可选的颜色、尺寸、价格等都显示在商品图像的底部。相同的信息顺序、相同的风格、相同的交互形式，都表明了他们具有相同的特征表现，从而减轻了用户的认知压力，如图1-6所示。

图1-6

1.3.3 相似性原则

相似性原则与接近性原则类似，但它们是两个不同的概念，接近性原则强调的是物体的位置，而相似性原则强调的是物体的内容。在视觉系统上，相似性原则主要指在形状、颜色、大小、纹理等方面相似的客体易在视觉上被感知为一个整体。人们通常会把一些具有相同特征（如形状、颜色、大小等）的事物归在一类，即人们在视觉上会将感知到的相似部分汇总成一个组。这表明当人感知元素时，会将具有一个或几个特征的组合作为相关的一个大项，仔细观察图1-7所示的3组图形，体验相似性原则的运用手法。因此，在App产品的交互设计中赋予同一类的布局元素相同或相似的视觉特征，可以让用户更好地对内容和各个板块进行区分。

图1-7

网易云音乐App 的页面导航和樊登读书App 的页面导航也都使用了相似性原则，如图1-8所示，统一的视觉风格、统一的色调表明这些图标具有相似的功能，属于相同的信息层级。用户的视觉会自觉地将相类似的事物进行归类，从而默认它们具有相似的功能属性。

图1-8

1.3.4 连续性原则

人的视觉系统是将客体作为连续的整体而不是零散的碎片进行感知的。因而，连续性原则主要根据一定的规律秩序，通过不同的片段内容进行引导，如图1-9所示。当多个元素在页面上以同一方向排列出现时，眼睛会产生强烈的线性感知，这种感知不仅加强了人们对信息分组的感知，而且还可以帮助人的眼睛在页面中根据视觉引导顺畅地移动，从而提高页面信息的可阅读性。

图1-9

在App产品的交互设计中，经常会用到连续性原则，常见的形式有轮播图、泳道、列表等。

轮播图则一般会出现在首页，当用户打开应用程序时，轮播图会自动地进行左右滑动播放，连续性的设计使用户获得了更多的信息。

在图1-10中，红色的导航使用了泳道的设计，没有显示完整的图标表明还有更多的内容可以通过滑动获得，连续性的设计使人的视线沿着线性的引导进行移动。

图1-10

微信页面中的导航设计也使用了连续性原则。当元素对齐时，其产生的连续性使视线的移动性增强，行和列的线性排列是连续性最好的示例，整齐的排列形成了视觉引导线，不仅加强了用户对信息分组的感知，而且使整个页面具有一种秩序感。音乐播放器的歌单列表也是如此，如图1-11所示。

图1-11

1.3.5 封闭性原则

封闭性原则即指当元素不完整或不存在时，依然可以被人们所识别。因为视觉系统在感知上的整体性，人们总是习惯性地将图形当作一个整体看待，于是便会将所缺少的图形部分在脑海中补充完整，使之呈现出人们最终能够识别出来的完整图形的样子。如图1-12所示，即使没有呈现出完整的三角形和圆形，人们依然会在脑海中自动补充出缺失的部分。

图1-12

封闭性原则的应用可以有效地解决信息冗余的问题。如图1-13所示，电子钱包中的卡片即使显示不全，也不影响用户对它的认知。省略和减法的处理，不仅可以节省空间，同时也可以让用户产生联想。爱奇艺App 首页的导航分类较多，很难在同一个页面中显示出所有的导航信息，封闭性原则可以使用户在潜意识中自动地进行信息补充，引导用户通过交互的方式查看更多的信息内容，如图1-14所示。

图1-13

图1-14

1.3.6 对称性原则

对称性原则就是将复杂的东西进行简单化的分解。人类的视觉区域对信息的处理不只会进行组合，也会对复杂的信息进行自动组织和解析，使事物简单化并赋予它们以对称性。协调的对称元素不仅给人一种简单、舒服、愉快的感觉，而且能够帮助人们更加专注于一些重要的事情。对称性原则具有的秩序性、稳定性、规律性，更利于人们的眼睛捕捉信息和理解信息的含义。因此，通过对称性原则传递信息会更快、更高效。当然，对称的作品有时也会给人一种静止和沉闷的感觉，而视觉的对称性更加趋向于有趣的和动态的效果，在原本对称的设计中添加一些不对称的元素在打破沉闷的同时吸引人的注意力。在App产品的交互设计中对称性和不对称性的应用都非常重要。对称性具有一种秩序美，而应用对称性原则设计的作品不仅具有一种稳定性、规律性，而且还极具生气。如图1-15所示，上方两个黄色的矩形色块与下方两个蓝色圆形色块形成了视觉上的对称。

图1-15

Pinterest 是一个图片分享类的社交软件，用户可以按主题分类添加和管理自己的图片收藏，并分享给好友，如图1-16所示。Pinterest所使用的页面布局是瀑布流的形式。Pinterest中的信息非常庞杂，而瀑布流的对称形式有效地解决了信息冗多的问题，并且使信息呈现出一种韵律感和秩序美。

Apple Books 是苹果手机中自带的一款订阅电子书的应用程序，如图1-17所示。其书库中的图书，以图书的封面作为信息的呈现元素，页面布局也采用了对称性的设计，图书的数量虽然不断地被添加，但对称性的设计依旧能够使图书信息保持一种整齐的秩序感，使用户的精力可以更多地集中在图书的选择和阅读上，而不会使注意力被其他信息分散。

图1-16

图1-17

1.3.7 共同命运原则

前面介绍的6种原则关注的是事物的静态设计，而共同命运原则关注的是事物的动态设计。在相同条件下，方向一致、速度相同的元素会自动地被组织在一起，如图1-18所示。当元素在同一时间、同一方向以同一速度移动时，会让人感觉它们之间所产生的关联性最强，此时应用共同命运原则进行设计最为有效。

图1-18

在iOS系统中长按App 图标进行删除的交互动作时，所有App 的图标都会有一致的运动倾向，开始左右摇晃，以告知用户它们当前处于可编辑的状态，可以对应用程序进行位置调整或删除操作了，这就是通过共同命运原则的应用来表明所有的元素都具有相同的属性，如图1-19所示。

图1-19