作者：胡金黎 朱海燕
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Photoshop CC 移动UI设计案例教程(全彩慕课版)试读：
前言
移动UI设计简介
移动UI设计是UI设计的一个分支，主要是指对移动设备中的软件交互操作逻辑、用户情感化体验、界面元素美观的整体设计。从应用领域来看，移动UI设计主要体现在移动应用界面设计、移动端网页界面设计、微信小程序设计及H5设计等。移动UI有着独特的交互特点，因此想要从事移动UI设计工作的人员需要进行系统的学习。
作者团队
新架构互联网设计教育研究院由顶尖商业设计师和院校资深教授创立，立足数字艺术教育16年，出版图书270余种，畅销370万册，《中文版Photoshop基础培训教程》销量超过30万册。海量专业案例、丰富配套资源、行业操作技巧、核心内容把握、细腻学习安排，可以为学习者提供足量的知识、实用的方法、有价值的经验，助力设计师不断成长；为教师提供课程标准、授课计划、教案、PPT、案例、视频、题库、实训项目等一站式教学解决方案。如何使用本书
第1步 精选基础知识，快速了解移动UI设计
第2步 知识点解析+课堂案例制作，熟悉设计思路，掌握制作方法
第3步 课堂练习+课后习题，拓展应用能力
第4步 循序渐进，演练真实商业项目制作过程
配套资源及获取方式● 所有案例的素材及最终效果文件。● 案例操作视频，扫描书中二维码即可观看。● 全书5章PPT课件。● 教学大纲。● 教学教案。
全书配套资源，读者可登录人邮教育社区www.ryjiaoyu.com，在本书页面中免费下载使用。
全书慕课视频，登录人邮学院网站www.rymooc.com或扫描封底的二维码，使用手机号码完成注册，在首页右上角单击“学习卡”选项，输入封底刮刮卡中的激活码，即可在线观看视频。扫描书中二维码也可以使用手机观看视频。
教学指导
本书的参考学时为64学时，其中实训环节为32学时，各章的参考学时参见下面的学时分配表。
本书约定
本书案例素材所在位置：章号/素材/案例名，如Ch03/素材/制作旅游类App首页。
本书案例效果文件所在位置：章号/效果/案例名，如Ch03/效果/制作旅游类App首页.psd。
本书中关于颜色设置的表述，如橘黄色（207、141、55），括号中的数字分别为其R、G、B的值。
由于作者水平有限，书中难免存在不妥之处，敬请广大读者批评指正。编者2020年1月第1章 初识移动UI设计本章介绍
随着2009年6月iPhone 3GS的发布，移动UI设计正式进入了设计舞台。由于移动UI有着独特的交互特点，因此想要从事移动UI设计行业的人员需要系统地学习与更新知识体系。本章对移动UI设计的概念、特点、原则、常用软件、学习方法及App的基本概念、操作平台、设计流程、基本分类进行了系统讲解。通过本章的学习，读者可以对移动UI设计有一个宏观的认识，有助于高效、便利地进行后续的移动UI设计工作。
学习目标● 掌握UI设计的相关概念● 掌握移动UI设计的概念● 了解移动UI设计的特点● 掌握移动UI设计的原则● 熟练移动UI设计的常用软件● 掌握移动UI设计的学习方法● 掌握App的基本概念● 了解App的操作平台● 熟练App的设计流程● 了解App的基本分类慕课视频1.1 认识移动UI设计
移动UI设计属于UI设计的一个分支，想要系统、全面地认识移动UI设计，需要对UI设计的相关概念及移动UI设计的概念、特点、原则、常用软件、学习方法进行学习。认识移动UI设计1.1.1 UI设计的相关概念
1. UI设计
用户界面（User Interface，UI）设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。优秀的UI设计不仅要保证界面的美观，更要保证交互设计（Interaction Design，IxD）的可用性强，用户体验（User Experience，UE/UX）的友好度高，如图1-1所示。图1-1 App界面展示
2. UI与WUI和GUI
在设计领域，UI被广泛分为网页用户界面（Web User Interface，WUI）和图形用户界面（Graphical User Interface，GUI）。在企业中，WUI设计师主要从事PC端网页设计的工作；因为移动端包含大量的图形用户界面，GUI设计师主要从事移动端App等相关界面的设计工作，如图1-2所示。图1-2 WUI（左）与GUI（右）
3. UI设计常用术语中英文对照
UI设计常用术语如表1-1所示。表1-1 UI设计常用术语1.1.2 移动UI设计的概念
移动UI设计是UI设计的一个分支，主要是指针对移动设备软件的交互操作逻辑、用户情感化体验、界面元素美观的整体设计。移动UI设计因其设备的独特性，较其他类型的UI设计具有更严格的尺寸要求及手机系统限制。
从设计范畴来看，移动UI设计主要体现在移动应用界面设计、移动端网页界面设计、微信小程序设计及H5设计等，如图1-3所示。图1-3 美国设计师Andrea Hock创作的App（左）、微信跳一跳小程序（中）与网易新闻小易游戏机H5（右）1.1.3 移动UI设计的特点
移动端界面的设计特点可以总结为设计极简、交互丰富及设计适配3个方面。
1. 设计极简
随着全面屏手机的发行，移动设备的屏幕较之前在尺寸上有了较大的提升，但相对于PC和笔记本电脑而言还是较小。因此，要在有限的空间中进行元素的设计不宜太过复杂，不然不利于信息的传递。纵观移动UI的设计发展，设计风格也是从拟物化向扁平化发展，甚至为了更好地进行信息展示，iOS11之后的界面都是围绕着“大而粗、简而美”的设计风格进行设计的，如图1-4所示。图1-4 美国设计师Johny vino创作的界面
2. 交互丰富
2007年1月，乔布斯在旧金山发布了第一代iPhone，开启了移动设备的智能化。智能化的移动设备较之前的传统手机拥有更加友好的用户体验，这源于它的多点触摸屏和传感器。由此造就了手势交互、语音交互、重力感应交互等一系列更加丰富的交互方式，如图1-5所示。因此，设计师在进行移动界面设计时还应充分考虑到这些人机交互的形式，提升用户参与产品使用的积极性，同时还要注意交互过程的简洁，方便用户顺利达成目标。图1-5 通过点击、滑动等手势完成目标
3. 设计适配
由于现有的智能手机、平板电脑型号呈现多样化，设计师进行设计时，应充分考虑文字、图标、图像甚至是界面布局等适配的问题。就移动应用来说，设计师通常会选用一款常用的、方便适配的屏幕尺寸进行设计，而后不必再大规模对其他尺寸屏幕的界面进行重新布局，只需针对不同屏幕尺寸进行切图输出，然后再交由技术端进行适配即可，如图1-6所示。图1-6 不同的屏幕尺寸1.1.4 移动UI设计的原则
进行移动UI设计时，需要遵循iOS系统和Android系统的设计规范，可以根据iOS系统下的设计原则及Android系统下Material Design语言中的设计原则进行设计。
1. iOS系统设计原则
iOS系统设计应遵循清晰、遵从、深度3大原则。（1）清晰
在整个系统中，文字在各种尺寸上都清晰易读，图标精确而清晰，装饰精巧且恰当，令用户更易理解功能。负空间、颜色、字体、图形和界面元素巧妙地突出重要内容并传达交互性，如图1-7所示。图1-7 以色列设计师Vlad Tyzun创作的界面（2）遵从
遵从意指整个页面的交互要让用户的操作有着“从哪来回哪去”的体验。其中，流畅的动画和清晰、美观的界面可以帮助用户理解内容并与之互动，同时不干扰到用户的使用。想要传达的内容一般需要填满整个屏幕，而半透明和模糊显示通常暗示有更多内容。少使用边框，使用渐变和阴影的功能可使界面轻盈，同时确保内容明显，如图1-8所示。
如图1-8所示，位于左侧App界面中橙色渐变银行卡旁边的卡采用了半透明效果，暗示用户可以进行滑动查看更多内容。两张App界面的渐变、边框及阴影都不是很明显，使界面非常轻盈。图1-8 印度设计师Abhisek Das创作的App界面（3）深度
独特的视觉层级和真实的动画效果传达层次结构，赋予界面活力，并促进用户理解。让用户通过触摸和探索发现程序的功能，不仅会使用户提高乐趣，更加方便用户了解功能，还能使用户关注到额外的内容。在浏览内容时，层级的过渡可提供深度感，如图1-9所示。图1-9 乌克兰设计公司Cadabra Studio创作的界面
2. Material Design设计原则
Material Design（材料设计）语言（Google开发的可与iOS系统下的设计原则相媲美的设计语言）设计原则有材质隐喻、大胆夸张、动效表意、灵活、跨平台5大原则。（1）材质隐喻
Material Design的灵感来自物理世界及其纹理，包括它们如何反射光线和投射阴影。对材料表面进行重新构想，融入纸张和墨水的特性，如图1-10所示。图1-10 Material Design官网提供的示意图1（2）大胆夸张
Material Design以印刷设计方法中的排版、网格、空间、比例、颜色和图像为指导，来创造视觉层次、视觉意义及视觉焦点，使用户沉浸其中，如图1-11所示。图1-11 Material Design官网提供的示意图2（3）动效表意
Material Design通过微妙的反馈和平滑的过渡使动效保持连续性。当元素出现在屏幕上时，它们在环境中转换和重组，相互作用并产生新的变化，如图1-12所示。图1-12 Material Design官网提供的示意图3（4）灵活
Material Design系统旨在实现品牌表达。它集成了一个可定制的代码库，如图1-13所示。图1-13 Material Design官网提供的示意图4（5）跨平台
Material Design使用Android、iOS、Flutter和Web的共享组件进行跨平台管理，如图1-14所示。图1-14 Material Design官网提供的示意图51.1.5 移动UI设计的常用软件
移动UI设计的常用软件可以分为界面设计、动效设计、网页设计、3D渲染、思维导图设计和交互原型设计6种类型。
1. 界面设计类软件（1）Photoshop
Photoshop简称“PS”，是由Adobe公司开发和发行的图像处理软件，截至2018年10月，其版本已经更新到CC 2019，如图1-15所示。在Sketch出现之前，PS是大部分UI设计师进行界面设计的首选工具。图1-15 Photoshop工作区界面截图（2）Sketch
Sketch是基于苹果计算机系统的一款收费型专业制作UI的工具，如图1-16所示。相较于PS，它是一款可以迅速上手的轻量级矢量设计工具。不仅UI设计师常用它，就连产品经理和前端开发人员都能够迅速掌握其功能，大大减少了沟通合作中的问题。图1-16 Sketch工作区界面截图（3）Illustrator
Illustrator常被称为“AI”，是由Adobe公司开发和发行的矢量图处理软件，截至2018年10月，其版本已经更新到CC 2019，如图1-17所示。AI在UI设计中除了被广泛应用于插画设计之外，在图标制作中也显示了超凡的性能。图1-17 Illustrator工作区界面截图（4）Experience Design
Experience Design简称“XD”，是由Adobe公司开发和发行的集原型、设计和交互于一体的软件，并于2016年3月发布了正式预览版本，如图1-18所示。XD的“简洁”弥补了PS在制作UI方面的“臃肿”，同时它免费并兼容Windows和Mac双平台的平民化特点又是Sketch无法比拟的。图1-18 Experience Design工作区界面截图
2. 动效设计类软件（1）After Effects
After Effects简称“AE”，是由Adobe公司开发和发行的图形视频处理软件，截至2018年10月，其版本已经更新到CC 2019，如图1-19所示。无论是After Effects软件中经典的插件还是强大的表达式，都使AE制作出来的动效变得更加细腻入微。
试读结束[说明：试读内容隐藏了图片]