9.3.2 需要遵守的设计准则
第9章
生活工具类APPUI设计
生活工具类APP和其他类的APP应用相比,无疑是一个大规模的应用，它涵盖了摄影、旅游、天气、时事、美食等各个领域。它不仅能够丰富人们的生活，而且可以让人们在足不出户的前提下，迅速地了解多方面的信息。因此，此类APP在应用市场中深受用户的欢迎。
9.1 设计准备与规划
关于这个实例的前期准备与规划，主要是收集美食素材图片，依据美食的特点，要设计出精准的配色方案及人性化界面。
9.1.1 素材准备
本实例是一款美食类APPUI设计，在图片方面，由于对象相对而言比较单一，因此在界面设计的过程中，主要需要收集一些蔬菜、水果、调味辅料和菜肴成品图，以及相关的细节装饰即可，如图9‑1所示。
图9‑1 参考素材
9.1.2 界面布局规划
作为一款美食生活类的APP系列界面，根据其本身的特点，在设计中需要设计出一个欢迎启动界面和三个不同功能的单屏界面。根据相关的设计要求和规范，在实际操作前，我们先对这四个界面进行大致的画面布局与界面分隔，具体如图9‑2所示。
图9‑2 界面布局规划
9.1.3 确定风格与配色
本实例是一款关于美食的APPUI设计，在配色方面应当多使用一些能够刺激用户食欲，或者可以使用户通过整体的颜色就能够辨识APP类别的颜色，例如绿色、橙色、黄色、米色、金色等。在整体的界面效果上，要呈现出一种唯美、秀色可餐的感觉，刺激用户的味觉，增加用户的使用度，从而增强APP的实用性，这是设计本实例的最大意义，具体如图9-3所示。
图9‑3 色彩搭配
9.2 界面制作
在收集到足够的素材以后，根据已经构架好的设计思路，从程序欢迎界面开始制作这款美食APP的界面设计。在设计的过程中，注意一定不能偏离设计好的框架，时刻注意前后整体的风格、颜色、结构，下面介绍具体的制作方法。
9.2.1 程序欢迎界面
程序欢迎界面也就是大家通常看到的程序启动页，作为美食类APP，要设计出能刺激用户食欲的界面。
设计思路
本界面首先选取了简约的橙色系渐变色作为背景，半透明的天空设计，抓住了设计要讲究的轻松感，使得界面干净并耐看，制作流程如图9‑4所示。
图9‑4 制作流程
制作步骤
01 新建一个1136×640像素的空白文档并填充渐变效果，新建图层并使用画笔工具在右侧涂抹，增加界面的丰富感，绘制出界面的背景，如图9‑5所示。
02 载入美食素材图片并调整位置，使用“圆角矩形工具”绘制圆角矩形并下移一层，之后运用剪贴蒙版使图片变成圆角，如图9‑6所示。
图9‑5 绘制背景
图9‑6 编辑图片
03 接着复制圆角矩形图层，移动图层到顶层，使用“圆角矩形工具”，绘制出一个圆角矩形框，并调整“不透明度”为35%，如图9‑7所示。
04 使用“圆角矩形工具”沿着图片边框的内测绘制一个边框线，调整“不透明度”为80%、描边宽度为5点，除背景以外，将所有的图层建组，命名为“图片”，
并将所有元素居中对齐，此时的图像效果如图9‑8所示。
图9‑7 绘制图片边框
图9‑8 图像效果
05 使用“矩形工具”绘制出一个矩形形状后，给其添加“投影”图层样式并设置参数值，在形状之上，输入文字信息，如图9‑9所示。
06 选择“圆角矩形工具”，绘制出隐形按钮的形状，接着使用“横排文字工具”在隐形按钮的上方输入文字信息。选中“钢笔工具”，在文字的后方绘制出箭头的形状，最后，绘制出手机状态栏的信息，到此本界面的绘制完成，如图9‑10所示。
图9‑9 绘制图片边框
图9‑10 图像效果
9.2.2 程序主界面
本界面是主要是用来展示美食图文的界面，在设计中，要注重图文的结合，以及界面中的版式设计，既要突出重点，又要简洁明了。
设计思路
提取程序欢迎界面的背景底纹加以白色的底板作为本界面的基础版式框，使用剪贴蒙版，对图片进行编辑，搭配文字，并调整颜色，使得界面的内容更丰富、和谐，如图9‑11所示为制作流程。
图9‑11 制作流程
制作步骤
01 新建一个1136×640像素的空白文档，将程序欢迎界面的背景图层复制到此文档中，使用“矩形工具”绘制出白色底板，如图9‑12所示。
02 在界面上方位置使用“椭圆工具”绘制出一个正圆，添加“描边”图层样式，设置该图层的“填充”为10%，如图9‑13所示。
图9‑12 绘制白色底板
图9‑13 绘制编辑正圆
使用“钢笔工具”和“椭圆工具”绘制形状并与上一步骤中的正圆一起编组，
将组进行命名。用同样的方法，绘制出另一个图标，命名为“搜索”，接着输入文字信息并居中对齐，此时的界面效果如图9‑14所示。使用“圆角矩形工具”绘制形状并添加“描边”图层样式，如图9‑15所示。
图9‑14 界面效果
图9‑15 绘制形状并添加图层样式
04 复制上一步骤的形状，并调整其填充颜色为白色、宽度为50%，选中两个形状进行左对齐。
05 使用“横排文字工具”将字体颜色设置橙色系，在相对应的位置输入文字信息，此时效果如图9‑16所示。
06 导入素材图片，使用“矩形工具”并结合剪贴蒙版，对图片进行调整和编辑，在图片下方输入相应的文字信息并编辑。
07 选择“自定形状工具”，在选项栏中选择心形形状，在图片的右上角绘制形状并使用“直接选择工具”编辑形状，最后建组命名为“美食1”，如图9‑17所示。
图9‑16 界面效果
图9‑17 图文编辑
08 依照“美食1”组的绘制方法，绘制出其他3个组，并分别命名为“美食2”“美食3”及“美食4”，将“美食1”和“美食3”进行左对齐、“美食2”和“美食4”进行右对齐，最后将程序欢迎界面中的“手机状态栏”图层复制到此界面文档中，此时界面效果如图9‑18所示。
图9‑18 界面效果
9.2.3 个人中心界面
个人中心界面的主要内容是用户的个人信息，以及与之相关的各种需求。因此，界面的图文设计要清晰明了，并且内容信息要丰富饱满，以满足用户的便捷体验。
设计思路
根据APPUI设计的基本原则，在此界面中，仍然以整个APPUI设计的主色系——橙色作为主色调，界面中的各个小图标在橙色的基础上根据所搭配的文字加以细微变化。这样既能保证设计的连贯性，又能统一画面，重复的背景设计可以刺激用户的感官，增加用户的体验印象，其制作流程如图9‑19所示。
图9‑19 制作流程
制作步骤
01 新建一个1136×640像素的空白文档，将制作的程序主界面文档中的背景图层复制到本文档中，制作成新的背景，如图9‑20所示。
02 使用“矩形工具”在界面底部绘制出一个合适大小的白色底板，此时的界面效果如图9‑21所示。
图9‑20 界面背景
图9‑21 界面效果
03 按照上一个文档中绘制图标的方法在本界面中相应位置绘制出“首页”图标和“设置”图标，并在导航栏中输入相对应的文字信息，如图9‑22所示。
04 使用“矩形工具”绘制形状并载入素材图片，利用剪贴蒙版将图片调整到合适大小，接着利用“椭圆工具”及剪贴蒙版，绘制出头像，并在头像下方添加文字信息，此时的效果如图9‑23所示。
图9‑22 绘制图标并输入文字
图9‑23 制作头像
05 使用“矩形工具”绘制出合适大小的形状并输入文字,在文字的上方输入相应的文字信息，如图9‑24所示。
06 接着将上一个图层复制多个并修改文字信息，使用“钢笔工具”结合“自定形状工具”和“直接选择工具”，对图标进行调整，如图9‑25所示。
图9‑24 绘制单个选项
图9‑25 复制并编辑多个选项
07 最后，将上个文档中的“手机状态栏”图层复制到本文档中，最终界面效果如图9‑26所示。
图9‑26 最终界面效果9.2.4 设置界面
在整个APP界面设计的过程中，相对于其他界面而言，设置界面无论是在画面中还是在内容上，都算是比较好设计的界面了，此时需要做的就是把握好一个大概的方向，将应当体现的内容、图标及排版设计等做好，下面介绍具体方法。
设计思路
为了保证整个设计的一致性与和谐性，这里仍然保持大致背景不变，在原有的基础上，对界面进行调整和制作。为了能使界面看起来不那么单调，对其文字颜色和图标进行了细微调整，并且在界面分隔色块上调整了“不透明度”，使界面更加丰富，如图9‑27所示为制作流程。
图9‑27 制作流程
制作步骤
01 新建一个1136×640像素的空白文档，将制作的程序主界面文档中的背景图层复制到本文档中，制作成新的背景，如图9‑28所示
02 使用“矩形工具”绘制出形状，并设置形状填充颜色为灰色，如图9‑29所示。
图9‑28 绘制背景
图9‑29 绘制矩形03 继续使用“矩形工具”绘制矩形并设置其“不透明度”为80%，在矩形上输入文字信息。使用“椭圆工具”绘制一个正圆，添加“描边”图层样式，设置“填充”为20%，如图9‑30所示。 04 使用“矩形工具”绘制矩形，设置填充色为白色并设置描边颜色，使用“直线工具”在矩形上绘制出一条直线并移动到合适位置，此时的界面效果如图9‑31所示。
图9‑30 绘制导航栏
图9‑31 界面效果
05 使用“钢笔工具”和“矩形工具”，绘制出图标和箭头，然后输入文字信息并设置颜色，如图9‑32所示。
06 按照上一步骤的方法绘制出其他的矩形形状、图标及文字信息，并添加手机状态栏，最终效果如图9‑33所示。
图9‑32 绘制图标并输入文字
图9‑33 最终效果
9.3 设计师心得
9.3.1 界面设计中需要注意的小细节
俗话说：“细节决定成败”。在界面设计中，细节也同样会影响用户的体验感受。下面看一看都有哪些细节会有如此的影响力，又应该怎么处理才能恰到好处，给设计师所设计的APP加分。
文案：首先要注意的就是界面设计中的文案内容，虽然这一点与界面设计没有直接联系，也不是界面的直接设计元素，但是前期文案文员所策划文案的严谨和完整性都会给整个APP的设计加分。
界面统一性：在设计的过程中，要时刻注意界面的统一性，无论设计到哪一阶段，都要仔细检查界面中的元素、颜色、文字阴影和图标的阴影等是否一致，所有窗口按钮的位置是否一致，标签和信息是否一致，颜色方案是否一致，当出现不一致的时候，要及时进行修改，以防忘记，如图9‑34所示。
图9‑34 CNZZ界面设计
像素精准化：虽然APP界面设计与PC端界面设计相比，在尺寸上相差比较大，但是仍然要注意界面中各个按钮、图标的边缘及其他元素放大后边缘是否出现了垂直或者水平的虚化。
界面齐整化：这个细节和上一细节有一个共同点，就是需要对界面元素进行放大，看清楚元素的大小是否一致。对于多个相同或者应处于统一位置等的对象我们不能只是靠自己的眼睛去对齐，这样只是能保证在视觉上界面的各个元素是对齐的，但是如果要做到真正的对齐，需要借助网格和辅助线等。
整体配色：颜色的搭配是能带给用户第一视觉感受的，所以在最初给设计对象进行配色的分析中，就应该把握好一个大致的配色方案，要谨慎地使用高饱和度颜色，但是从另一个方面来讲，配色只要是能带给用户舒适的感觉，都算得上是好的配色，如图9-35所示。
图9‑35 Nike界面配色
适当地留白：对于移动端APP来讲，鉴于对象的特殊性，需要在有限的空间内表达出精准简洁的内容。所以，适当留白能够让用户更快捷地使用，从另一个方面来讲，在视觉上也能让用户心情不那么堵塞。
9.3.2 需要遵守的设计准则
无论是做哪一方面的设计，都要在遵守其设计准则的基础上添加自己的创意，这样才能保证设计具有更强的实用性及吸引力，同时在该激烈竞争中脱颖而出。那么，作为APP的UI设计，又要遵守哪些设计准则呢？下面就给大家一一列举。
屏幕尺寸合适：在创建屏幕布局的时候，一定要选择适配设备的屏幕大小。具体体现于用户在体验的时候，应该一次就看清主要内容，而无须缩放或者是水平滚动来寻找想要看到的内容，如图9‑36和图9‑37所示。
图9‑36 屏幕尺寸适配
图9‑37 屏幕尺寸不适配
可触控控件大小合适：在设计可触控的控件时，其尺寸不能小于44×44像素，只有这样才能确保用户在使用时触摸的命中率，如图9‑38和图9‑39所示。
图9‑38 可触控控件大小合适
图9‑39 可触控控件大小不合适
文字尺寸大小要合适：作为APP的UI设计，一般要注意界面中的文字不得小于11点，这样用户在观看界面的时候才能在正常距离下不需要缩放画面就能清楚地看到文字所传递的信息，如图9-40和图9-41所示。
图9‑40 文字尺寸大小合适
图9‑41 文字尺寸大小不合适
使用高像素的图片：在界面设计中，会使用“钢笔工具”及“矩形工具”绘制出一些形象等元素，但是每个界面中，都会使用到一些在网络或者是书籍中收集到的相关图片作为界面中的图片元素，所以在收集的过程中一定要注意，好看、合适的图片固然重要，但是一定不能忽视它的像素大小，这样在一些高分辨率的屏幕上才能够得以清晰地展示，如图9‑42和图9‑43所示。
图9‑42 高像素图片
图9‑43 低像素图片
避免图片拉伸：这是界面设计中使用的图片，还需要注意的另外一点。在设计时，要时刻注意检查界面中的图片在进行缩放的时候是否是等比例缩放，在调整其他图层的时候是否一不小心将图片跟着进行了移动和缩放。尤其要注意，如果在设计过程中有喜欢编组的习惯，一定要注意在移动时，界面中不需要移动的图层是否也跟着移动，如图9-44和图9-45所示。
图9‑44 等比例缩放
图9‑45 图片变形
本书是一本介绍使用Photoshop设计制作APPUI的图书。全书分为9章，包括APPUI设计基础、Photoshop在APPUI中的基础应用、APP界面中常见元素设计、常见界面构图与设计、游戏类APPUI设计、音乐类APPUI设计、社交类APPUI设计、购物理财类APPUI设计，以及生活工具类APPUI设计等方面知识。从基础到完整界面的讲解，涵盖了各类热门APPUI的设计制作，使读者由浅及深，逐步了解使用Photoshop制作APPUI的整体设计思路和制作过程。
本书将APPUI设计的相关理论与实例操作相结合，不仅能使读者学到专业知识，也能在实例操作中掌握实际应用，全面掌握APPUI的设计方法和技巧。
图书在版编目（CIP）数据
更赞的UI：Photoshop热门APP类型设计从入门到精通／陈玉芳编著.—北京：机械工业出版社，2016.5
ISBN 978-7-111-54283-4
Ⅰ.①更… Ⅱ.①陈… Ⅲ.①移动电话机—应用程序—程序设计 ②图象处理软件 Ⅳ.①TN929.53 ②TP391.41
中国版本图书馆CIP数据核字（2016）第161013号
机械工业出版社（北京市百万庄大街22号 邮政编码100037）
责任编辑：丁 伦 责任校对：张艳霞
责任印制：李 洋
北京宝昌彩色印刷有限公司
2016年11月第1版·第1次印刷
185mm×260mm·17.5印张·490千字
0001—3000册
标准书号：ISBN 978-7-111-54283-4
ISBN 978-7-89386-074-4（光盘）
定价：69.90 元（附赠1DVD，含教学视频）
凡购本书，如有缺页、倒页、脱页，由本社发行部调换
电话服务
服务咨询热线：(010) 88361066
读者购书热线：(010) 68326294
(010) 88379203
封面无防伪标均为盗版
网络服务
机工官网：www.cmpbook.com
机工官博：weibo.com/cmp1952
教育服务网：www.cmpedu.com
金书网：www.golden-book*com
好书推荐
