书名：Photoshop CC移动UI设计案例教程（全彩慕课版）pdf/doc/txt格式电子书下载

推荐语：

作者：胡金黎,朱海燕

出版社：人民邮电出版社

出版时间：2020-05-01

书籍编号：30616839

ISBN：9787115530110

正文语种：中文

字数：133414

版次：1

所属分类：教材教辅-计算机类

图书在版编目（CIP）数据

Photoshop CC移动UI设计案例教程：全彩慕课版 / 胡金黎，朱海燕编著．--北京：人民邮电出版社，2020.5

“十三五”高等院校数字艺术精品课程规划教材

ISBN 978-7-115-53011-0

Ⅰ．①P…　Ⅱ．①胡… ②朱…　Ⅲ．①移动电话机—人机界面—程序设计—高等学校—教材②图象处理软件—高等学校—教材　Ⅳ．①TN929.53②TP391.413

中国版本图书馆CIP数据核字（2019）第274717号

编　　著　胡金黎　朱海燕

责任编辑　桑珊

责任印制　王郁　马振武

人民邮电出版社出版发行　北京市丰台区成寿寺路11号

邮编　100164　电子邮件　315@ptpress.com.cn

网址　https://www.ptpress.com.cn

北京捷迅佳彩印刷有限公司印刷

开本：787×1092　1/16

印张：14.75

字数：385千字

2020年5月第1版

2020年5月北京第1次印刷

读者服务热线：（010）81055256　印装质量热线：（010）81055316

反盗版热线：（010）81055315

广告经营许可证：京东工商广登字20170147号

内容提要

本书全面、系统地介绍了移动UI设计的相关知识点和基本设计技巧，包括初识移动UI设计、移动UI设计规范、iOS系统界面设计、Android系统界面设计和App界面设计实战等内容。

全书内容介绍均以知识点讲解加课堂案例制作为主线。每章的知识点讲解部分使学生能够系统地了解移动UI设计的各类规范，案例部分可以使学生快速掌握移动UI设计流程并能完成案例制作。主要章节的最后还安排了课堂练习和课后习题，可以拓展学生对移动UI设计的实际应用能力。设计实战可以帮助学生对App界面设计有深入的认识，并且快速掌握制作App界面的规范和方法。

本书可作为高等院校、高职高专院校移动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官网提供的示意图5

1.1.5 移动UI设计的常用软件

移动UI设计的常用软件可以分为界面设计、动效设计、网页设计、3D渲染、思维导图设计和交互原型设计6种类型。

1. 界面设计类软件

（1）Photoshop

Photoshop简称“PS”，是由Adobe公司开发和发行的图像处理软件，截至2018年10月，其版本已经更新到CC 2019，如图1-15所示

....