1.1 UI设计概论

用户界面（User Interface，UI）设计是指对软件的人机交互、操作逻辑和界面美观的整体设计。好的UI设计不仅要让软件变得具有个性、品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。

1.1.1 什么是UI设计

UI包含UI交互、UI界面和UI图标三个部分。UI的本意是用户界面，是英文User和Interface的缩写，从字面上看是由用户与界面两部分组成的，但实际上还包括用户与界面之间的交互关系。UI设计是为了满足专业化、标准化需求而对软件界面进行美化、优化和规范化的设计分支，具体包括软件启动界面设计、软件框架设计、按钮设计、面板设计、菜单设计、标签设计、图标设计、滚动条即状态栏设计、安装过程设计、包装及商品化等，如图1-1所示。

主要性能

UI设计要保证设计出的作品达到元素外观一致、设计目标一致、交互行为一致、可理解、可控制和可达到。

• 元素外观一致：交互元素的外观往往影响用户的交互效果。同一类软件采用一致风格的外观，对于保持用户焦点、改进交互效果有很大帮助。

• 设计目标一致：软件中往往存在多个组成部分（组件、元素），不同组成部分之间的交互设计目标需要一致。

• 交互行为一致：在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。

• 可理解：“软件要为用户使用”，用户必须可以理解软件各元素对应的功能。

• 可控制：软件的交互流程，用户可以控制。控制功能的执行流程，用户可以控制。

• 可达到：用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。

相关控件

绘制、数据和控制为UI控件的三要素。绘制是第一时间展现在人们视线中的每一个控件的样子，就跟人的相貌一样。接下来就是数据，控件也需要自己的数据，如果没有数据，这些控件的使用将会变得没有意义。最后一个是控制，最典型的就是button，这是用户与界面交互的关键。

• iOS UI控件：Button控件、开关控件、滑块控件、工具栏、Web View等。

• Android UI控件：文本控件、按钮控件、状态开关控件、单选与复选按钮、图片控件、时钟控件、日期和时间选择控件等。

1.1.2 什么是App

App即手机软件，也就是安装在手机上的软件，完善原始系统的不足与个性化。随着科技的发展，现在手机的功能也越来越多，越来越强大，不像过去那么简单死板，目前已发展到可以和掌上电脑相媲美。

App的下载平台

从不同系统下载的App，其文件格式也各不相同。下面详细列举现在主流的App应用商店和相应的App格式。

• iOS系统：App格式有ipa，pxl，deb，这里的App都是用在iPhone系列的手机和平板电脑上，这类手机在中国市场的占用率大概是10%多一点。目前比较著名的App商店是iTunes商店里面的App Store。因为iOS系统的不开源性，iOS系统的App商店就只有苹果公司的App Store，所有使用iPhone手机、Mac电脑或者iOS系统的平板电脑的用户通常只能在App Store上面下载App，如图1-2所示。

• Android格式为apk，在市场的占有率将近80%。其Android的应用可通过安卓市场进行下载，如图1-3所示。

开发App的编程语言

App创新性开发始终是用户的关注焦点，而商用App客户端的开发更得到诸多网络大亨的一致关注与赞许。与趋于成熟的美国市场相比，我国开发市场正处于高速发展阶段。App的开发语言有很多种，主要为以下三种，如图1-4所示。

• iOS平台的开发语言为Objective-C。

• Android开发语言为Java。

移动App带来的好处

移动App一般是指手机中使用的第三方应用软件。App给人们的生活带来的好处可分为以下几点。

• App基于手机的随时随身性、互动性特点，容易通过微博、SNS等方式分享和传播，实现裂变式增长。

• App的开发成本相比传统营销手段成本更低。

• 通过新技术以及数据分析，App可实现精准定位企业目标用户，使低成本快速增长成为可能。

• 用户手机安装App以后，企业即埋下一颗种子，可持续与用户保持联系。

1.1.3 移动App UI与平面UI的区别

无论是身为手机软件的开发工作人员，还是掌握手机App的客户经理、项目经理或者用户界面体验设计师，掌握手机App和平面UI的区别非常重要。在此向大家分享一下手机App客户端UI设计方面的内容，也希望彼此能够互相帮助，让用户拥有更好的新界面体验，如图1-5所示。

移动UI的平台主要是手机的App客户端。而平面UI的范围则非常广泛，包括绝大部分UI的领域。手机UI的独特性，比如尺寸要求、控件和组件类型，使得很多平面设计师要重新调整审美基础。手机的界面设计完全可以做到完美，但需要无数设计师的共同创新和努力。很多设计师存在的问题是不能合理布局，不能合理转化网站设计的构架理念到手机界面的设计上。

有些设计师常常会觉得手机界面限制非常多，觉得创意性发挥空间太小，表达的方式也非常有限，甚至觉得很死板。但真实的情况并不是这样，通过了解手机的空间，应用合理的创意，同样可以完成优秀的UI设计。需要注意的是，手机UI设计受到手机系统的限制。因此，在设计手机UI时，要先确认适用的系统。图1-6所示为iOS系统和Android系统界面对比。

1.1.4 制作App UI的常用软件

制作App UI比较常用的手机UI界面设计软件有Photoshop、Illustrator和3ds Max等。利用这些软件各自的优势和特征，可以创建UI界面中的不同部分。此外，IconCool Studio和Image Optimizer等小软件也可以用来快速创建和优化图像。接下来简单对这几种软件进行介绍。

Photoshop

Adobe Photoshop（PS）是美国Adobe公司旗下最为出名的图像处理软件系列之一，为集图像扫描、编辑修改、图像制作、广告创意、图像输入与输出于一体的图形图像处理软件，如图1-7所示。本书中所有的案例都将使用Photoshop进行制作。

Photoshop的软件界面主要由5部分组成：工具箱、菜单栏、选项栏、面板和文档窗口，如图1-8所示。

• 工具箱：工具箱中存放着一些比较常用的工具，如“移动工具”“画笔工具”“钢笔工具”“横排文字工具”和各种形状工具等。此外，设置前景色和背景色也在工具箱中进行，如图1-9所示。

• 菜单栏：菜单栏中包括“文件”“编辑”“图层”“类型”“选择”“滤镜”“3D”“视图”“窗口”和“帮助”等11个菜单项，涵盖了Photoshop中近乎全部的功能，用户可以在一个菜单中找到相关的功能，如图1-10所示。

• 选项栏：选项栏位于菜单栏底部，主要用于显示当前使用工具的各项设置参数，是实现不同处理和绘制效果的主要途径之一。不同工具选项栏会显示不同的参数。图1-11所示分别为“油漆桶工具”“吸管工具”和“文字工具”的选项栏。

• 面板：用户可以通过“窗口”菜单打开不同的面板，这些面板主要用于对某种功能或工具进行进一步的设置，最为常用的是“图层”面板，如图1-12所示。

• 文档窗口：文档窗口是显示文档的区域，也是进行各种编辑和绘制操作的区域，如图1-13所示。

Illustrator

Adobe Illustrator是美国Adobe公司推出的应用于出版、多媒体和在线图像的工业标准专业矢量绘图工具。作为一款非常好的图片处理工具，Adobe Illustrator广泛应用于印刷出版、专业插画、多媒体图像处理和互联网页面的制作等，也可以为线稿提供较高的精度和控制，适合生产任何小型设计到大型的复杂项目。

Adobe Illustrator的界面同样由5部分组成：菜单栏、选项栏、工具箱、文档窗口和面板，如图1-14所示。

• 菜单栏：菜单栏用于组织菜单内的命令。Illustrator CC有10个主菜单，每一个菜单中都包含不同类型的命令。例如，“滤镜”菜单中包含各种滤镜命令，“效果”菜单中包含了各种效果命令。

• 选项栏：显示当前所选工具的选项。所选的工具不同，选项栏中的选项内容也会随之改变。选项栏也称控制栏。

• 工具箱：工具箱中包含用于创建和编辑图像、图稿和页面元素的工具。

• 文档窗口：文档窗口显示了正在使用的文件，它是编辑和显示文档的区域。

• 面板：用于配合编辑图稿、设置工具参数和选项等内容。很多面板都有菜单，包含特定于该面板的选项，可以对面板进行编组、堆叠和停放等操作。

3ds Max

3ds Max（3D Studio Max）是Autodesk公司开发的三维动画渲染和制作软件，广泛应用于广告、影视、工业设计、建筑设计、多媒体制作、游戏、辅助教学以及工程可视化等领域。图1-15所示为3ds Max的操作界面。

• 菜单栏：菜单栏位于3ds Max 2014界面的上端，其排列与标准的Windows软件中的菜单栏有相似之处，其中包括“文件”“编辑”“工具”“组”“视图”“创建”“修改器”“动画”“图形编辑器”“渲染”“自定义”“MAX Script”和“帮助”13个项目。

• 主工具栏：主工具栏位于菜单栏的下方，由若干个工具按钮组成。通过主工具栏上的按钮可以直接打开一些控制窗口，如图1-16所示。

• 动画时间控制区：动画时间控制区位于状态行与视图控制区之间，它们用于对动画时间的控制。通过动画时间控制区可以开启动画制作模式，随时对当前的动画场景设置关键帧，并且完成的动画可在处于激活状态的视图中进行实时播放，如图1-17所示。

• 命令面板：命令面板由6个用户界面面板组成，使用这些面板可以访问3ds Max的大多数建模功能，以及一些动画功能、显示选择和其他工具，如图1-18所示。

• 视图区：视图区在3ds Max操作界面中占据主要面积，是进行三维创作的主要工作区域。一般分为顶视图、前视图、左视图和透视图4个工作窗口。通过这4个不同的工作窗口，可以从不同的角度观察创建的模型，如图1-19所示。

• 状态行和提示行：状态行位于视图左下方和动画控制区之间，主要分为当前状态行和提示信息行两部分，用来显示当前状态及选择锁定方式，如图1-20所示。

• 视图控制区：视图控制区位于视图右下角，其中的控制按钮可以控制视图区各个视图的显示状态，如视图的缩放、选择和移动等。

图1-21所示为几张立体图标示意图。若使用其他的二维绘图软件制作起来很麻烦，使用3ds Max很快就可以完成。

Image Optimizer

Image Optimizer是一款图像压缩软件，可以对JPG、GIF、PNG、BMP和TIFF等多种格式的图像文件进行压缩。该软件采用一种名为Magi Compress的独特压缩技术，能够在不过度降低图像品质的情况下对文件体积进行减肥，最高可减少50%以上的文件大小。图1-22所示为Image Optimizer的操作界面。

IconCool Studio

IconCool Studio是一款非常简单的图标编辑制作软件，里面提供了一些最常用的工具和功能，如画笔、渐变色、矩形、椭圆和选区创建等。此外，它还允许从屏幕中截图以进行进一步的编辑。IconCool Studio的功能简单，操作直观简便，对Photoshop和Illustrator等大型软件不熟悉的用户可以使用这款小软件制作出比较简单的图标。图1-23所示为IconCool Studio的操作界面。