作者：高金山
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
UI设计必修课：游戏+软件+网站+APP界面设计教程试读：
内容简介
本书内容涵盖了目前最受欢迎的图像处理与合成软件的基础知识，如Photoshop CC、Illustrator CC、3ds Max、Sketch及Image Optimizer，对主流UI设计流程和制作技巧进行了全面、细致的剖析。
本书共7章。第1章，了解UI设计；第2章，UI常见组件设计；第3章，应用软件界面设计；第4章，移动APP界面设计；第5章，播放器界面设计；第6章，网页界面设计；第7章，游戏界面设计。书中将最实用的技术、最快捷的操作方法和最丰富的内容介绍给用户，使用户在掌握软件功能的同时，提高UI设计效率和从业素质。
本书提供的光盘中包括书中案例的素材、源文件和教学视频，用户可以结合本书、练习文件和教学视频，提升界面设计学习效率。
本书结构清晰、由简到难，实例精美实用、分解详细，文字阐述通俗易懂，与实践结合非常密切，具有很强的实用性，适合UI设计爱好者、APP界面设计从业者阅读，也适合作为各院校相关设计专业的参考教材，是一本实用的APP界面设计操作宝典。
未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。版权所有，侵权必究。前 言
随着智能设备和网络的飞速发展，各种通信与网络连接设备与大众生活的联系日益密切。用户界面是用户与机器设备进行交互的平台，人们对各种类型UI的要求越来越高，促进了UI设计行业的兴盛，这就为UI设计人员提供了很大的发展空间。而作为从事相关工作的人员则必须要掌握必要的操作技能，以满足工作的需要。
本书由浅入深地讲解了初学者需要掌握和感兴趣的基础知识和操作技巧，全面解析各种元素的具体绘制方法。全书结合实例进行讲解，详细地介绍了制作的步骤和软件的应用技巧，使读者能轻松地学习并掌握。内容安排
本书共分为7章，采用基础知识与应用案例相结合的方法，循序渐进地向用户介绍了不同类型UI设计的方法和技巧，以下是每章所包含的主要内容。
第1章，了解UI设计。主要介绍了UI设计基础、良好的UI用户体验、UI设计风格、UI设计的构成法则、UI设计中的色彩搭配技巧、UI设计的原则及UI设计的一般流程等。
第2章，UI常见组件设计。主要介绍了UI设计中的基本视觉元素、图标设计知识、图标设计的风格、扁平化图标、按钮设计及菜单与工具栏设计等。
第3章，应用软件界面设计。主要介绍了应用软件界面设计、软件启动界面、应用软件界面面板设计、应用软件界面设计规范及应用软件界面设计风格等。
第4章，移动APP界面设计。主要介绍了什么是APP界面设计、iOS系统界面设计、Android系统界面设计及移动APP软件界面设计的要求等。
第5章，播放器界面设计。主要介绍了播放器界面设计概述、播放器界面设计特点、个性化播放器界面设计及播放器界面设计原则等。
第6章，网页界面设计。主要介绍了网页界面设计概述、网页界面设计的设计要点、网页界面设计的原则、网页界面创意设计方法及网页界面的设计风格等。
第7章，游戏界面设计。主要介绍了游戏界面设计概述、游戏UI设计的准备工作、网页游戏界面设计、手机游戏界面设计及大型网络游戏界面设计。本书特点
本书内容全面、结构清晰、案例新颖，采用理论知识与操作案例相结合的教学方式，向读者全面介绍了不同类型元素的处理和表现的相关知识和所需的操作技巧。通俗易懂的语言
本书采用通俗易懂的语言全面地向读者介绍了各种类型UI设计所需的基础知识和操作技巧，综合实用性较强，确保读者能够理解并掌握相应的功能与操作。基础知识与操作案例结合
本书摒弃了传统教科书式的纯理论式教学，采用少量基础知识和大量操作案例相结合的讲解模式。技巧和知识点的归纳总结
本书在基础知识和操作案例的讲解过程中列出了大量的提示和技巧，这些信息都是结合作者长期的UI设计经验与教学经验归纳出来的，可以帮助用户更准确地理解和掌握相关的知识点和操作技巧。用户对象
本书适合UI设 计爱好者，想进入UI设计领域的用户朋友，以及设计专业的大中专学生阅读，同时对专业设计人士也有很高的参考价值。希望读者通过对本书的学习，能够早日成为优秀的UI设计师。
作者在本书写作过程中力求严谨，由于时间有限，疏漏之处在所难免，望广大读者批评指正。编者Chapter 01了解UI设计
手机和计算机是当代社会人们接触和使用最为频繁的媒体类型之一。与平面设计一样，UI不仅要时尚美观，还需注重各个功能的整合，力求使用户毫无障碍、快捷有效地使用各个功能，从而提高用户体验。本章知识点：
★ 了解UI设计基础
★ 了解UI设计风格
★ 了解UI设计的构成法则
★ 了解UI设计的原则和一般流程
★ 基本掌握UI设计中的色彩搭配技巧1.1 UI设计基础
用户界面在我们的生活中随处可见，什么是用户界面？那么什么是用户界面设计？用户界面主要包括哪些类型？用户界面设计有哪些具体的规则和要求？本节就向用户介绍一些与用户界面设计相关的基础理论知识。1.1.1 什么是UI设计
UI包含UI交互、UI界面和UI图标3个部分。UI设计是指对软件的人机交互、操作逻辑和界面美观的整体设计。UI的本意是用户界面，是英文User和 Interface的缩写。从字面上看由用户与界面两个部分组成，但实际上还包括用户与界面之间的交互关系。
UI设计是为了满足专业化、标准化需求而对软件界面进行美化、优化和规范化的设计分支，具体包括软件启动界面设计、软件框架设计、按钮设计、面板设计、菜单设计、标签设计、图标设计、滚动条即状态栏设计、安装过程设计、包装及商品化等，如图1-1所示。图1-11.1.2 UI设计的常见类别
由于网站类型不同，用户需求也会不同，UI设计人员设计出的图稿可能会有很大差别。
随着信息技术的高速发展，人们对信息的需求量不断增加，图形界面的设计也越来越多样化。UI设计主要可以分为手机UI设计、网页UI设计、软件UI设计和游戏界面设计等，不同类型的界面设计风格和特点各不相同。1.手机UI设计
如今，手机已经成为普通大众的生活必需品，而手机的功能也越来越完善，很多高端手机的性能甚至与计算机不分高下。手机UI设计最大的要求就是人性化，不仅要便于用户操作，还要美观大方，如图1-2所示为一套成功的手机UI设计作品。图1-22.网页UI设计
近年来，随着电子商务的飞速发展，国内网页设计行业也正在快速崛起。从最初的纯文本网页到版式古板、配色拙劣的网页，再到如今配色新奇、版式多元化的网页，网页设计得到了长足发展。
网页UI设计必须具有独立性和创意性，能够最大限度地方便用户检索信息，从而提升用户的操作体验，如图1-3所示为一些成功的网页UI设计作品。图1-33.软件UI设计
用户主要通过软件与各种机器设备进行交流，更确切地说，是通过软件界面达到这一目的的。为了方便用户使用，软件UI设计应该简洁美观、易于操作。如图1-4所示为一些成功的软件UI设计作品。图1-44.播放器界面设计
如今，市场上的各种音乐播放器软件层出不穷，体验者们不再局限于追求软件的强大功能，更对软件界面风格提出了新的要求。如图1-5所示为两款成功的播放器界面设计作品，这两款界面无论在款式还是在质感上都极为出色。图1-55.游戏界面设计
相较于其他软件界面来说，游戏界面通常都更加华丽、主题鲜明，三维效果应用非常普遍，具有较强的视觉震撼力。如图1-6所示为两款成功的游戏界面设计作品。图1-61.1.3 UI设计的规范
由于用户浏览网页的习惯或者是由于Web前端技术的限制或界面限制，网页设计和移动端界面设计不能任意进行天马行空的设计，需要遵守一些设计规范，下面为用户详细地进行介绍。1.界面不同
PC端UI设计指的是计算机端网页的设计，移动端UI设计指的是手机端用户页面设计，因为屏幕尺寸不同，因此设计稿也会有很大不同。（1）操作方式。
PC端的操作方式与移动端已经有了明显的差别，PC端使用鼠标操作，包括滑动、左击、右击、双击操作，操作相对来说单一，交互效果相对较少；而对于手机端来说，包括点击、滑动、双击、双指放大、双指缩小、五指收缩和苹果最新的3DTouch按压力度，除了手指操作外还可以配合传感器完成摇一摇、陀悬仪感应灯等，操作方式更加丰富，通过这些丰富的操作可以设计新颖、吸引人的交互设计，如图1-7所示。图1-7（2）屏幕尺寸。
随着时间的推移，移动端的设备屏幕逐渐增大，但是再大也是大不过PC屏幕的。PC端屏幕大，所以视觉范围更广，可设计的空间更大，设计性更强，相对来说容错度更高，有一些小的纰漏不容易被发现。移动端设备相对来说屏幕较小，操作局限性大，在设计上可用空间显得尤为珍贵，在小小的屏幕上使用粗大的手指操作也需要在设计中避免元件过小、过近， 如图1-8所示。图1-8（3）网络环境。
当下不管是移动端还是PC端都离不开网络，PC端设备连接网络更加稳定，而移动端可能会遇到信号问题导致网络环境不佳，出现网速差甚至断网的问题，这就需要产品经理在设计中充分考虑网络问题，更好地设计相应的解决方案。（4）使用场景与使用时间。
PC端设备的使用场景多为家里或者学校、公司等一些固定的场景，所以其使用时间偏向于持续化，在一个特定的时间段内持续使用，而移动端设备不受局限，所以它的使用时间更加灵活，时间更加碎片化，所以在操作上更偏向于短时间内可完成的。（5）文字的输入。
对于文字输入，PC端一般使用文本框解决。在移动端中，因为手机屏幕尺寸及UI风格的原因，我们基本没有在手机上看到过PC端这样的展现形式，而是采用另起一页输入或者在文字后直接输入的方式，这些都是各个平台根据自身的特性选择的展现形式，如图1-9所示。图1-9（6）内容选择。
在PC端，由于鼠标的灵活性，可以使用下拉菜单或者是单选按钮完成内容的选择。而在移动端，由于手指操作的便捷性，一般不采用PC端的选择方式，而是通过列表选择或者其他交互来完成，如图1-10所示。图1-10
提示：这样的设计点不胜枚举，就不一一展开了，还需要在日常生活和工作中多留意，切不可把PC端的设计模式照搬到移动端。2.PC端设计规范
前面为用户详细讲述了PC端与移动端设计上的区别，相对于移动端而言，PC端比较简单，本节主要为用户详细介绍PC端的设计规范，如图1-11所示。图1-11
PC端网页设计画布宽度一般为1920px，在设计时，网页高度随着需求变化，页面宽度有效范围应该控制在1000px~1200px，网页的宽度都在1000px左右。
由于整体的计算机屏幕向大尺寸及高分辨发展，不少网页也正朝着更宽的方向发展。有效范围就是显示内容的地方，比如打开一个网页后，除浏览器的工具栏和侧边栏，真正显示有用内容的地方。
主体内容字体网页默认的是宋体，字体种类不要超过3种，配色不要超过3种，一般使用12px 或14px。导航和标题可使用18px或者更大的字体，也可根据需要设计字体加黑或者变化颜色，避免大面积地使用加黑字体。
字体之间的间距一般根据字体大小选择1~1.5倍，段间距可以选择加大点，正文的文字颜色为深灰色，建议选用#333333或 #666666。
图片上使用文字或装饰，要确保文字清晰、易识别、整体搭配协调统一，需要全屏显示的图片比如banner可以设计成1920px，图片上的有效内容不得超过有效区域，比如图片上可能出现的按钮等，就是为了保证分辨率比较低的用户也能够看到有效内容。将图片设计成1920px，是因为开发人员会通过代码实现100%显示，UI设计只要保证有效范围就行。
页脚部分的内容，比如许可证书、版权信息或者备案编号等，各超链接之间统一使用“|”或者空格，禁止使用加粗字体。
上述规范只是实践中比较常用的一些，并不是一成不变的，可根据实际情况进行调整，保证网页的美观性、协调性、实用性即可。3.移动端设计规范
PC端的设计思路和移动端的不一样，移动端更多的是从用户体验来思考的，而且因为屏幕的限制尽量要去繁就简，PC端因为只有单击操作而且可视面大，所以布局流程和移动端不是一个思路。
当你使用一个在移动端和PC端均可打开的网页时，就会发现两者有很大的不同。经过多年的发展，在设计上形成了很多规则，下面为用户详细介绍移动端UI设计。（1）内容精简。
手机界面交互过程不宜设计得过于繁杂，交互步骤不宜过多，可以提高用户操作的便利性，提高用户体验。（2）色彩鲜明。
手机的显示屏比较小，设计人员需要在有限的屏幕下抓住用户的视线，需要色彩鲜明简洁的设计。手机支持的色彩范围有限，也要求设计做得简洁。PC端和移动端最大的区别就是尺寸有很大不同，PC端可以通过有效范围来解决这个问题，如当前的手机种类繁多，手机屏幕的大小、比例各异，并且手机的屏幕本身就小，因此既要考虑应用在不同屏幕大小上的适配，又要保持其一致性，这就存在着很多矛盾点。4.移动端UI设计尺寸
当今，移动端的界面设计主要集中在iOS和Android这两种操作系统中，两者界面设计尺寸基本相同，下面为用户详细进行介绍。（1） iOS系统手机尺寸。
下面主要通过表格和一些图稿来介绍一下iPhone手机设计规范。目前，很多APP设计师的APP UI设计稿是先做iPhone 6的，方便向上适配iPhone 6 Plus，也方便向下适配iPhone 5和iPhone 4的尺寸，如图1-12所示。图1-12
不同设备的界面尺寸不同，那么其设计元素的大小也就各不相同，如表1-1所示。表1-1
提示：从手机的设计尺寸上大致可以将iPhone 1、iPhone 2、iPhone 3划分为@1x，iPhone 4、iPhone 4s、iPhone 5、iPhone 5c、iPhone 5s、iPhone 6为@2x，iPhone 6s Plus为@3x。比如导航栏的高度@1x 为44px、@2x为88px、@3x为132px，@2x就是@1x设计稿的2倍。也就是说，在设计iPhone 6尺寸时，需要给开发人员再切一个@3x去做适配。
图像最好为矢量图，放大1.5倍不变形。所有能点击的图片不得小于44px。定制界面或图片位图必须额外制作大图，非矢量素材，就可以做尺寸最大的，之后再进行缩小。
比如你需要兼容@3x的屏幕，就直接做@3x的图片，后台开发人员再进行缩放。工具栏、状态栏、导航栏的高度规范和设计字体大小等均以2:3的比例放大即可。（2）iOS界面图标尺寸。
在iOS应用中，图标作为动作执行的视觉表现，下面简单向用户介绍不同设备的界面图标尺寸，如表1-2所示。表1-2（3）iOS界面文本尺寸。
Apple为全平台设计了San Francisco字体以提供一种优雅的、一致的排版方式和阅读体验。在iOS 10及未来的版本中，San Francisco 是系统字体。
当用户在APP中使用San Francisco时，iOS会自动在适当的时机在文本模式和展示模式中切换。文本模式(Text)和展示模式(Display) 在不同字号下的间距值分别如图1-13所示和图1-14所示。图1-13图1-14
提示：San Francisco有两类尺寸，分别为文本模式(Text)和展示模式(Display)。文本模式适用于小于20点(points)的尺寸，展示模式适用于大于20点(points)的尺寸。
一个视觉舒适的APP界面，字号大小对比要合适，并且各个不同界面大小对比要统一，其各个元素中的文本大小如下所示：
·导航栏标题：34px~42px，如今标题越来越小，一般34或36比较合适。
·标签栏文字：20px~24px。iOS自带应用都是20px。
·正文：28px~36px，正文样式在大字号下使用34px字体大小，最小也不应小于22px。
·在一般情况下，每一档文字大小设置的字体大小和行间距的差异是2px。一般为了区分标题和正文，字体大小差异至少要为4px。
·标题和正文样式使用一样的字体大小，为了和正文样式区分，标题样式使用中等效果。
提示：在一般情况下。每一档文号设置的文字和行间距的差异是2px。一般为了区分标题和正文字号差异至少要为4px。（4）Android系统界面尺寸。
Android的APP界面和iPhone的基本相同，状态栏、导航栏、主菜单栏及中间的内容区域，这和网页有很大不同，安卓适用于很多媒介，尺寸各种各样，设计师在设计应用程序UI时，怎样实现在各个媒介上看到的效果都一样或者差不多呢？一般Android的UI以720×1280为标准，这样的手机有vivo智能手机、三星Galaxy A5、华为荣耀等手机。
在Android规范中对于导航栏、工具栏等的尺寸没有明确的规定，根据一些主流的Android应用的截图分析，总结一下尺寸要求，如表1-3所示。表1-3（5）Android系统界面图标尺寸。
由于Android系统涉及的手机种类非常多，所以屏幕尺寸很难统一，根据屏幕尺寸的不同，相应的界面元素尺寸如表1-4所示。表1-4
提示：在Android设计规范中，使用的单位是dp，转换成px是不一样的。
在设计图标时，对于5种主流的像素密度（MDPI、HDPI、XHDPI、XXHDPI 和 XXXHDPI）应按照 2:3:4:6:8 的比例进行缩放。例如，一个启动图标的尺寸为48 dp×48 dp，这表示在 MDPI 的屏幕上其实际尺寸应为 48 px×48 px，在 HDPI 的屏幕上其实际大小是 MDPI 的 1.5 倍 (72 px×72 px)，在XDPI 的屏幕上其实际大小是 MDPI 的 2 倍 (96 px×96 px)，以此类推。
提示：虽然Android也支持低像素密度(LDPI)的屏幕，但无须为此费神，系统会自动将HDPI尺寸的图标缩小到1/2进行匹配。1.1.4 UI设计的常用工具
在制作APP UI的过程中，比较常用的手机UI设计软件有Photoshop、Illustrator和3ds Max等，利用这些软件各自的优势和特征，可以分别用来创建UI中的不同部分。此外，IconCool Studio和Image Optimizer等小软件也可以用来快速创建和优化图像。接下来就简单对这几种软件进行介绍。1.Photoshop
Adobe Photoshop，简称PS，是美国Adobe公司旗下最为出名的图像处理软件之一，是集扫描、编辑修改、图像制作、广告创意、图像输入与输出于一体的图形图像处理软件，如图1-15所示。本书中的案例将使用Photoshop目前的最新版进行制作。图1-15
Photoshop的软件界面主要由5部分组成：工具箱、菜单栏、选项栏、面板和文档窗口。
·面板：用户可以通过“窗口”菜单打开不同的面板，这些面板主要用于对某种功能或工具进行进一步的设置，最为常用的是“图层”面板，如图1-16所示。
·文档窗口：文档窗口是显示用户文档的区域，也是进行各种编辑和绘制的操作区域，如图1-17所示。
·菜单栏：菜单栏中包括“文件”“编辑”“图层”“类型”“选择”“滤镜”“3D”“视图”“窗口”和“帮助”等11个菜单项，涵盖了Photoshop几乎全部的功能，用户可以在一个菜单中找到相关的功能，如图1-18所示。
·工具箱：工具箱中存放着一些比较常用的工具，例如“移动工具”“画笔工具”“钢笔工具”“横排文本工具”和各种形状工具等。此外，设置前景色和背景色也在工具箱中进行，如图1-19所示。图1-16图1-17图1-18图1-19
·选项栏：选项栏位于菜单栏底部，主要用于显示当前使用工具的各项设置参数，是实现不同处理和绘制效果的主要途径之一。不同工具的选项栏会显示不同的参数，如图1-20所示分别为“油漆桶工具”“吸管工具”和“文本工具”的选项栏。图1-202.Illustrator
Adobe Illustrator是美国Adobe公司推出的应用于出版、多媒体和在线图像的工业标准专业矢量绘图工具，如图1-21所示。图1-21
作为一款非常好用的图片处理工具，Adobe Illustrator广泛应用于印刷出版、专业插画、多媒体图像处理和互联网页面的制作等，也可以为线稿提供较高的精度和控制，适合生产任何小型设计到大型设计的复杂项目。
Adobe Illustrator的界面同样由5部分组成：菜单栏、选项栏、工具箱、文档窗口和面板，如图1-22所示。
提示：Adobe Illustrator软件使用Adobe Mercury支持，能够高效、精确地处理大型复杂的文件。可以快速地设计流畅的图案及对描边使用渐变效果，快速又精确地完成设计，其强大的性能系统提供各种形状、颜色、复杂的效果和丰富的排版 ，可以自由尝试各种创意并传达用户的创作理念。图1-22
·菜单栏：菜单栏用于组织菜单内的命令。Illustrator CC有10个主菜单，每一个菜单中都包含不同类型的命令。例如，“滤镜”菜单中包含各种滤镜命令，“效果”菜单中包含各种效果命令。
·选项栏：显示当前所选工具的选项。所选工具不同，选项栏中的选项内容也会随之改变。选项栏也称控制栏。
·工具箱：工具箱中包含用于创建和编辑图像、图稿和页面元素的工具。
·文档窗口：文档窗口显示了正在使用的文件，它是编辑和显示文档的区域。
·面板：用于配合编辑图稿、设置工具参数和选项等内容。很多面板都有菜单，包含特定于该面板的命令，可以对面板进行编组、堆叠和停放等操作。3.Sketch
Sketch 是一款适用于所有设计师的矢量绘图软件。矢量绘图也是目前进行网页、图标及界面设计的最好方式。但除了矢量编辑功能之外，我们同样添加了一些基本的位图工具，比如模糊和色彩校正。如图1-23所示为Sketch的操作界面。图1-23
提示：目前Sketch只推出了苹果操作系统Mac OS X的安装版本，Windows暂时不能安装和使用该软件。4.3ds Max
3ds Max 2015是Autodesk公司开发的三维动画渲染和制作软件，如图1-24所示为该软件的启动界面。图1-24
3ds Max广泛应用于广告、影视、工业设计、建筑设计、多媒体制作、游戏、辅助教学及工程可视化等领域。如图1-25所示为3ds Max的操作界面。图1-25
·菜单栏：菜单栏位于3ds Max 2015 界面的上端，其排列与标准的Windows 软件中的菜单栏有相似之处，其中包括“文件”“编辑”“工具”“组”“视图”“创建”“修改器”“动画”“图形编辑器”“渲染”“自定义”“MAX Script”和“帮助”13个项目。
·主工具栏：主工具栏位于菜单栏的下方，由若干个工具按钮组成，通过主工具栏上的按钮可以直接打开一些控制窗口， 如图1-26所示。图1-26
试读结束[说明：试读内容隐藏了图片]