1.3　移动UI的设计内容

作为一个移动UI设计师，主要的工作内容包括什么呢？移动UI设计和传统的平面设计工作很相似，都需要考虑配色及页面布局对App产品的影响。由于移动硬件的屏幕尺寸都不大，因此，还要考虑App界面中的按钮、图标和文字的排列布局。

1.3.1　配色方案的设计

配色对任何设计作品来说都很重要，尤其是移动UI设计。好的配色是一个App界面设计成功的基础。

在开始设计一个App界面时，首先就是要根据产品的行业和受众人群确定界面的主色，然后再根据主色确定配色方案。

可以通过App的行业选择主色，因为每一种颜色都具有特定的心理效果和情感效果，会引起受众人群产生各种遐想。例如，看到绿色，就会想到教育和医疗行业；看到蓝色，就会想到科技行业；看到红色，就会想到食品和安全行业，如图1-15所示。

除了根据颜色本色的色彩意象来确定主色，设计师还可以通过App项目产品或企业Logo的颜色来确定App界面的主色。

例如，中石油的Logo采用了红色和橘黄色。因此在设计与石油产业相关的App产品时，界面的主色就可以选择红色或橘黄色，如图1-16所示。

确定了页面的主色以后，就可以根据主色再选择辅助色、点缀色和文字色了。无论要选择哪种颜色，都可以遵循同色搭配、临色搭配和补色搭配的标准。

● 同色搭配

同色搭配指的是使用降低了明度或纯度的主色与主色搭配。例如主色选择了蓝色，辅助色设置为浅蓝色。同色系搭配如图1-17所示。这种搭配方式会显得页面效果整洁，风格一致。同色搭配是入门级的色彩搭配方式。

● 临色搭配

临色搭配指的是使用色谱环上与主色相邻的颜色与主色搭配，例如主色选择了青色，辅助色设置为洋红色。临色系搭配如图1-18所示。

这种搭配方式能够很好地凸显页面中的内容，对比强烈，主题突出。这种搭配方式相对比较难操作，不考虑黑色和白色等中性色，建议搭配的颜色不要超过3种。

提示

配色的技巧有很多，设计师不用局限于以上几种配色方式，可以在实际的工作中不断实践，摸索出符合自己特色与风格的配色技巧。

● 补色搭配

补色搭配指的是使用色谱环上主色对面的颜色与主色搭配，例如主色选择了洋红色，辅助色设置为绿色。补色系搭配如图1-19所示。

这种搭配方式可以很好地凸显重要内容。由于补色颜色对比比较强烈，在搭配使用时要适当降低颜色的纯度或明度。在使用面积上也应适当减小，降低由于互相补色给用户视觉带来的不适感。

1.3.2　页面布局的设计

确定了界面的配色方案以后，设计师首先要分析项目产品的信息，并梳理清楚产品信息架构，然后选择一种非常好的方式来合理地呈现这些信息，体现产品的核心操作流程，这就是页面布局的设计。

页面布局的方式有很多种，例如列表式布局、陈列馆式布局、宫格式布局、选项卡式布局和旋转木马式布局。不同的布局方式能呈现不同的页面内容，给用户带来不同的视觉感受。由于篇幅的关系，本节只介绍常见的宫格式布局和列表式布局。其他布局方式将在后面章节中与案例一起讲解。

● 宫格式布局

宫格式布局是将不同模块以块状宫格方式沿水平方向和竖直方向布局，使产品的功能模块可以完全展示在用户面前，具有较好的延展性。

宫格式布局多以3×3的模块划分，每个模块多以“图标+文字”的形式展示，图1-20所示为芒果TV的界面。有时也呈现为卡片式宫格，图1-21所示为美图秀秀的界面。

宫格式布局使产品拥有较多的信息模块，每个模块都具有完整的体系或较深的层级，且模块与模块之间相互独立。通过标签或分页的形式划分不同宫格组，以区分产品功能模块，如图1-22所示为支付宝界面分页划分宫格组。

提示

有时产品的功能较多，界面所展示的模块内容较多，因此一些产品也允许用户自行设置宫格所展示的内容。例如，支付宝就允许用户自行设置页面中显示的应用内容。

宫格式布局可以使用户直观地看到产品的各种功能模块，并且在使用过程中能够较为直接地进入某个功能模块而不需要花费过多精力去寻找，其效率较高。对于信息量较大且每个模块之间关联性较弱的产品，宫格式布局可以同时呈现出多个入口，其延展性优秀，并且可以较好地拓展信息模块，便于产品迭代。

● 列表式布局

如果产品需要有大量信息或功能展示，且在展示多个模块的同时还需要展示出每个模块相应的信息（例如新闻类App），并且需要以规整的方式呈现，此时就可以采用列表式布局。

列表式布局通常采用竖排列表的形式或采用“图标+文字”的形式，用于展示同类型或并列的元素，通过上下滑动可以查看更多列表内容，用户可接受程度较高，同时视觉上也较为规整。

对于不同种类的信息有时也采用分页的形式进行区分，同时在列表右侧展示次级信息。文字列表式布局如图1-23所示。也可以采用“标题+图片”的方式显示列表，增加页面的可读性和美观性。标题+图片的布局如图1-24所示。

提示

以内容为主的产品列表则多以“标题+图片+部分内容”的形式展现，同时对纯图片和视频的模块列表样式进行了区分。例如今日头条用户就可以看到更多的列表信息。

列表式布局可以使用户快速获取一定量的信息，以决定是否点击进入更深的层级进行深度浏览或操作。用户可以在多类信息中进行筛选和对比，自主高效地选择自己想要的内容。

列表式布局信息展示的层级较为清晰，且可以灵活地通过不同形式进行展示。在展示主要信息的同时，还可以展示一定的次要信息，提醒及辅助用户理解。列表式布局符合用户从上到下查看的视觉流程，排版也较为整齐，并且延展性强。

提示

丰富且华丽的布局固然重要，但要符合当前产品的特点和需求。无论采用何种布局方式，只要能将产品的内容和特点展示清楚即可。

1.3.3　按钮和图标的设计

在UI中合理地使用按钮和图标，能够使页面内容简单、醒目且友好，并增加设计的艺术感染力。对内容较丰富的App来说，图标的使用可以节省空间，用户可以在一个页面中查看更多的信息。

虽然在UI设计中使用按钮和图标有很多好处，但也要考虑其潜在的负面影响。下面针对移动UI设计中按钮和图标设计的要点进行讲解。

● 图标传达含义的功能必须放在首位

设计师们有时会过于注重形式，忽略了图标本身的功能，导致其难以识别，这打破了图标最重要的图形意象属性。按照定义，图标是一个对象或动作的视觉体现。对用户而言，如果这个对象或动作不明确，该图标就失去它的实用价值，并成为一个视觉干扰。

图1-25所示分别为主页、打印机和放大镜的图标，这几个图标在用户心中已经享有普遍共识并且容易辨识。

对用户而言，大多数图标的含义仍旧模棱两可，图1-26所示为一个游戏中心的图标，其采用了一组色彩丰富的圆圈，让人很难联想到它跟游戏有什么关系。

图标的首要任务就是引导用户去他们需要的地方。设计师可以通过5秒钟规则和选择熟悉的图标两种方法来设计符合用户要求的图标。5秒钟规则指的是，如果设计师花了超过5秒的时间考虑一个图标是否合适，那么这个图标不太可能有效地传达含义。选择熟悉的图标指的是用户通常对图标的理解基于以前的经验，使用竞品的图标是个不错的选择。

● 保持图标的简单和示意

在大多数情况下，设计图标无须发挥创意。这是因为太花哨的图标可能会对用户体验产生负面影响。图标设计理念的本质是减到最简形态。设计师应确保即使图标是小尺寸也具有清晰度和可读性，所以精心设计的图标应该能够快速辨认。

图1-27所示为iOS系统不同版本中的照相机图标，可以看到图标的设计风格从写实转换为扁平化，图标变得更加简单，但也更易辨认。

● 包含清晰可见的文本标签

是否减少用户思考的时间是衡量用户体验良好的一个很重要的标准。界面清晰是一个好界面的重要特征。图标的设计应该能帮助用户毫不费力地了解它们的功能。但是，图标的问题在于用户会基于之前的经验对每个图标联想出不同的含义。如果用户为了探索每个图标的功能而一一试用，那就失去了图标该有的作用。

在一些特殊的上下文环境里，为避免图标可能会产生的歧义，应该在图标周围设计一个文本标签，用来清晰地表达其含义。支付宝界面中添加了文本标签的图标，能够清楚地表达其含义，如图1-28所示。

● 使用感更佳的图标触控体验

用户在移动端访问应用程序时，通常都是通过手指点击与界面进行交换的。较小的图标会严重影响用户的访问。因此，包括图标在内的UI控件，尺寸要足够大才能承载手指间的动作。

提示

通常成人手指的平均宽度为11mm，婴儿的手指宽度为6mm，一些体育运动员的手指宽度可以达到甚至超过19mm。

触屏对象的推荐点击目标尺寸为7～10mm。两大主流操作系统对于点击目标尺寸的规范不尽相同。

iOS系统推荐的最小点击目标尺寸为44px×44px。由于物理像素的尺寸会随着屏幕分辨率发生变化，在5.8寸的屏幕上，苹果公司推荐的尺寸是1125px×2436px。

Android系统推荐触控目标的尺寸至少为48dp×48dp。如果一个图标的尺寸为24dp×24dp，则需要在其周围加上间距，共同组成48dp×48dp的触控面积，如图1-29所示。

提示

为了防止触控间距太近造成用户的误碰触，需要在两个触控目标间设置间距，通常会设置2mm的间距。

● 不要跨平台使用图标

在设计Android或iOS系统应用时，不要使用其他平台特定的UI元素。各平台为某些常用功能使用一套典型的图标，比如分享、新建和删除。当转换应用到另一个平台时，应替换掉相对应的图标。Android系统和iOS系统中相同功能图标的对比，如图1-30所示。

图标设计是UI设计的一个重点，UI中使用的所有图标都应有目的性，正确的图标设计能够简单而直接地帮助用户使用应用程序。

1.3.4　文字和版式的设计

在移动端UI中，文字内容能占版面近80%的区域。因此，理解文字和排版对设计师来说非常重要。设计师需要始终把内容的可读性放在首位，再综合考虑设计文字和版式。

● 字体基本结构

一般来说，为了保证字体的完整展示，字体设计师都会给字体预留一定的安全距离，设定合适的升部线及降部线距离，让字体的展示更为平衡。图1-31所示为字体的基本结构。

● 了解汉字字型

了解字体结构，更有利于在以后的界面设计中运用字体。在大多数情况下，我们都选择系统自带的字体，比如微软雅黑、宋体、黑体等来定义标题和内容。这些字体都是中文字，汉字的常见字型结构如图1-32所示。

在设计和制作Logo、banner时，需要对字体进行改造来达到更加理想的效果。掌握汉字的字型结构及一些最基本的设计原则是非常必要的。

● 衬线字和无衬线字

西方国家的字母体系分成两大字族：Serif（衬线字）及Sans Serif（无衬线字）。衬线字是指在字的笔画开始及结束的地方有额外的装饰，而且笔画的粗细会因直横的不同而有所不同。相反，无衬线字就没有这些额外装饰，而且笔画粗细大致上是差不多的。图1-33所示为衬线字和无衬线字的对比。

衬线字的字体较易辨识，因此也具有较高的易读性。无衬线字较醒目，需要强调、突出的小篇幅文字一般使用无衬线字；而在长篇正文中，为了阅读便利，一般使用衬线字。

提示

在实际应用中，因为中文的宋体和西文的衬线体、中文的黑体和西文的无衬线体，在风格和应用场景上相似，所以通常搭配使用。

在移动端界面设计中，由于屏幕尺寸较小，在追求排版美观之前，要保证文字内容能够简单且清晰地展现出来。优秀的文字与排版会使用户更愿意去阅读，因此要先关注设定的文字和排版是否便于阅读，然后再考虑为了美观而进行的修饰。