作者：数码创意
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Photoshop移动终端APP界面设计(全彩)试读：
前言
近几年，有一个新兴的词在设计领域诞生，这个词就是“UI”。在短短的几年时间里UI设计师越来越多，设立UI部门的企业越来越普遍，各大院校也出现了和UI相关的专业，UI 设计的组织和网站层出不穷。这一切都预示着一个“UI”大时代已经到来。
所谓的UI包含UI交互、UI界面 和UI图标三个部分。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。所以作为一个手机界面的设计师应该具备勇敢、坚持的“画上帝”精神，把最新的趋势和思想带给团队和领导层，要明白手机的产品设计已经步入一个界面时代，准确地说，是应用体验和用户需求的时代。综上所述，一个好的手机界面设计师应该具备以下几个要点：
1.第一眼体验。当用户打开界面的时候，我们应该让用户有一种赏心悦目的感觉，让人一看界面就知道自己要做什么，该做什么，这样才能吸引用户，从而让用户对我们的产品感兴趣。
2.便捷的输入方式。有时候我们应该考虑到用户也有不方便的时候，所以一个便捷的输入方式能给用户一种轻松的感受，让用户更加离不开我们的产品。
3.呈现用户需要的。有的时候用户外出需要地图、天气预报、快速回复邮件等，因此需让他们在短时间内就能达到自己的目的，来换取更多的时间做自己喜欢的事，应提升应用表现，改变UI，让用户所需结果的呈现变得更快。这样也能使我们的产品更畅销。
4.适当选择横向呈现方式。我们知道手机的屏幕是长方形的，有的时候用户需要使用手机观看视频，这时候使用横屏能达到更好的效果，所以选择横向呈现方式能让用户更加喜欢我们的产品。
5.让你的应用更为独特。任何东西都不是一成不变的，你能想到的别人不一定想不到，所以让你的应用更为独特是你的产品能否继续发展的前提。这需要我们有很好的创新精神。
6.不忽视任何细节。俗话说得好：“细节决定一切。”细节方面也是十分重要的，一个精美的图标也会让你的应用显得鹤立鸡群，让人流连忘返。
本书主要采用基础知识和应用案例相结合的方法，向读者系统地介绍使用Photoshop CC对各种手机UI界面进行设计和制作的操作方法及常用技巧。
界面设计是APP开发中最重要的方面，并涉及整个开发队伍。对于应用软件来说，一个基本现实就是：用户界面是面向用户的。用户需要的是开发者开发的应用软件满足其需求，并且易于使用。用户界面走到今天也是经历千锤百炼的，要做到易用就更不容易了。
现在，我们将为你奉献一本APP界面设计图书，它采用完全适合自学的“基础理论”和“完全案例”两种形式编写，兼具技术和应用技巧参考的特点，书中所有案例的源文件和素材文件均可在电子出版社的网站下载。希望本书能够帮助你解决学习中遇到的难题，提高技术水平，快速学会手机UI界面设计，成为设计高手。
参与本书编著的人员有：李倪、张爽、杨伟、李红、樊媛超、赵丹华、戴珍、范志芳、罗树梅、廖江衡、刘琳琳、费晓蓉、钟叶青、周文卿、赵道强。 01 APP用户界面基础
APP用户界面设计主要包括网页设计、手机界面设计、软件界面设计和游戏界面设计4类。手机界面设计由于受到屏幕大小的限制，具有其独特的特征和设计准则。1.1 手机界面设计的基础
手机界面是手机操作系统中人机互动的窗口，其界面必须在了解手机的物理特性和软件的应用特性的基础上进行合理的设计。界面设计师首先应对手机的系统性能有所了解，例如：手机所支持的最多色彩数量、手机所支持的图像格式；其次应该对软件的功能详细了解，熟悉每个模块的应用形式，从而做到最大限度地利用现有资源进行手机界面的设计。1.1.1 什么是手机界面设计
APP用户界面设计就是UI设计，UI即User Interface，是用户界面的简称。UI设计是指对软件的人机互动、操作逻辑、界面美观的整体设计。好的手机界面设计不仅能让软件变得有趣、有品位，还会让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。
APP界面设计大致分为4类：网页设计、手机界面设计、软件界面设计和游戏界面设计。手机界面设计软件界面设计网页设计游戏界面设计1.1.2 界面构成的基本区域
界面的主要构成被分为几个标准的信息区域（主要针对按键手机和触屏手机）：状态区、标题区、功能操作区、公共导航区。状态区标题区
1.状态区
标示手机目前的运行状态及事件的区域，可以包括电池电量、信号强度、运营商名称、未处理事件及数量、时间等。
2.标题区
主要是LOGO、名称、版本及相关的图文信息。
3.功能操作区
这是软件的核心部分，也是版面上面积最大的部分，包含列表、焦点、滚动条、图标等很多不同的元素。不同层级的界面包含的元素是不同的，需要依据具体情况合理搭配运用。
4.公共导航区
公共导航区也称为软键盘区域，主要是针对软件的操作需要进行大面积控制的区域，常常使用到，在这里它可以保存当前的操作结果、切换当前操作板块、退出软件系统，实现对软件的灵活操控。对于嵌入式的软件，界面版式的设计，在一定程度上需要参考其他内容相符的手机系统界面版式设计，确保形式的基本统一，这样更有利于系统与软件的组合。当然也需要考虑到软件本身的运用特点，综合操作的可用性和实施性，对板块样式进行适当的调整，使信息呈现的区域之间协调统一，详略得当，确保使用手机的用户可以方便迅速地进行功能项目的操作。针对整个手机的操作系统界面，需要根据不同的设计需求进行不同风格的设计。功能操作区公共导航区1.1.3 手机界面效果的规范性
手机界面设计应该遵循一定的规范和原则，主要包括两点：界面效果的一致性和个性化。一致性主要是指手机界面应该从整体色调和风格上保持协调一致，使界面效果更美观；个性化是指手机界面应该具有区别于其他同类产品的特征。
手机软件界面承载着沟通用户与机器的纽带作用，一套风格色调统一、交互方式合理一致的界面，往往更有利于形成产品外观的整体性，也更有利于用户操作。下图所示为两款整体效果一致的手机界面。
不同手机界面的总体色彩和风格应该接近或类似于系统界面的总体色调，这样更符合人的心理视觉，而风格杂乱的界面可能会使用户眼花缭乱，不适应。在设计操作流程时，也要遵循系统的规范性，尽量使所有的操作都统一化，这样更有利于用户掌握，更快地学会使用软件。1.1.4 手机界面效果的个性化
除了考虑界面的整体性之外，还应该注重软件界面的个性化。手机界面的整体性和一致性是基于手机系统视觉效果而言的，个性化则是基于软件本身的特征和用途而言的。界面效果的个性化包括如下几个方面：
实用性
为手机界面制作图标时，应该尽可能考虑到屏幕的局限性，选择具有典型行业特征且线条简单的图形，确保清晰性、实用性和有效性。
界面构架
手机界面中的导航区、功能操作区和内容显示区域都应该统一范围，且风格色调应该尽量接近。不同功能模块的相同操作区域的元素风格也应该协调统一，使整个界面统一在一个整体之中，这样有利于用户快速辨别不同的功能，并轻松学会操作使用。
界面色彩的个性化
色彩会影响一个人的情绪，不同的色彩会让人产生不同的心理效应；反之，不同的心理状态所能接受的色彩也是不同的，不断变化的事物才能引起人的注意。色彩在客观上是对人们的一种刺激和象征；在主观上又是一种反应与行为。界面设计的色彩个性化，目的就是用色彩的变换来协调用户的心理，让用户使用软件产品时保持一种新鲜感，它是通过用户根据自己的需要来改变默认的系统设置的，选择一种自己满意的个性化设置，达到产品与用户之间的协调性。在众多的软件产品中都涉及到了界面的换肤技术，在手机的软件界面设计过程中，应用这一个性化设置可以更大地提升软件的魅力，满足用户的多方面需要。1.1.5 手机UI设计基本流程
本节主要讲述用户研究与界面设计的过程。一个通用消费类软件界面的设计大体可分为5个步骤：需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段。
1.需求阶段
软件产品依然属于工业产品的范围。离不开3W的考虑（Who、where、why），也就是使用者、使用环境、使用方式的需求分析。所以在设计一个软件产品之前，我们应该明确什么人用、什么地方用、如何用。上面任何一个元素的改变，结果都会有相应的改变。除此之外，在需求阶段同类竞争产品也是我们必须了解的。单纯地从界面美学角度考虑，说哪个好哪个不好是没有一个很自我的评价标准的，只能说哪个更合适，更适合于最终用户的就是最好的。
2.分析设计阶段
分析设计阶段包含需求分析、用户场景模拟及竞品分析。简单地说，就是用户检验的一个过程，从用户体验中不断开拓、探索，寻求用户最满意的效果。
3.调研验证阶段
对于设计出的方案，可以邀请各方人士来进行评定，可以对几套方案做测试，选取用户体验更好的方案。
调研阶段可以从下面的几个方面出发：（1）用户对各套方案的第一印象。（2）用户对各套方案的综合印象。（3）用户对各套方案的单独评价。（4）选出最喜欢的。（5）选出其次喜欢的。（6）对各方案的色彩、文字、图形等分别打分。
结论出来以后请所有用户说出最受欢迎方案的优缺点。
4.方案改进阶段
经过用户调研，得到目标用户最喜欢的方案，了解用户为什么喜欢选出的方案，还有什么需要改进的，此时可以进行方案的改进。
5.验证阶段
产品出来后，UI设计师需要对产品的效果进行验证：是否与当初设计产品时的想法一致、是否可用、用户是否接受，以及与需求是否一致，都需要UI设计师验证。1.2 安卓与苹果手机系统组件介绍
各类组件集合在一起，丰富且增强了APP的互动性，UI组件可以根据APP的需要自定义风格。可以说，没有组件的APP就像一个公告牌一样，没有了互动，APP也就黯然失色了。1.2.1 安卓系统基础组件
Android一词的本义指“机器人”，同时也是Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称，该平台由操作系统、中间件、用户界面和应用软件组成。
以下是安卓系统基础组件：（1）TextView（文本显示）：用于显示固定不变的文本。（2）Button（常规按钮）：常规按钮的风格可以很不一样，上面可以写文字，也可以用图片，但它们最终都要用于确认、提交等功能的实现。（3）EditText（编辑输入框）：输入文本，能够对文本内容进行编辑修改的文本框。（4）CheckBox（复选框）：复选框常见于设置管理、资料的填写页面中，用于资料内容选项的选择和状态的确认（如兴趣爱好、剩余是否开启）。复选框对选择数量没有限制。（5）RadioButton（单选按钮）：按照APP中的实际需求，列出几个不同时存在的条件，每个条件旁放置一个单选按钮。与复选框不同的是，单选按钮对选择数量有限制，同一个选项组里，只能选择一个单选按钮，不能多选。（6）TiggleButton（开关按钮）：一键开关，可更改APP设置的状态（如网络开关、WIFI开关）。通常情况下，打开时显示绿色，关闭则为灰色。（7）Spinner（下拉列表框）：打开后，可以从中选择一个选项。下拉列表框中的选项跟单选按钮类似，只能选择一个选项。（8）AutoCompleteTextView（智能提示框）：智能提示框指的是带智能提示的文本输入框。（9）TimePicker（时间选择框）：选择时间时用到的控件，通过数字上下方的微调按钮进行调节选择。（10）ListView（列表显示）：将所有选项以列表的形式排列。适用于管理设置、资料管理等。（11）ExpanddableListView（可扩展列表显示）：在列表包含子列表时，可向下展开子列表，这种列表显示方式称为可扩展列表显示。（12）GridView（网格式浏览）：图标呈网格式的排列，称为网格式浏览。（13）Gallery（图片显示组件）：显示文本时使用文本显示，显示图片时要用的就是Gallery。（14）ImageSwitcher（图片切换条）：在多个图片中切换的时候，可以用到ImageSwitcher（图片切换条），在图片切换条区域左右滑动，可以浏览指定栏中的所有图片。（15）ProgressBar（进度条）：进度条一般用于显示APP的安装进度或读取进度。（16）TabWidget（选项卡切换）：单击选项卡中的任意一个选项，可以进入该选项下的子页面。（17）Toast（提示信息）：提示信息不等同于文本显示。（18）Quick Actions（快捷菜单）：快捷菜单常见于通讯录，但在APP中很少用到。1.2.2 苹果系统基础组件
iOS是由苹果公司开发的移动操作系统，最初是设计给iPhone使用的，后来陆续套用到iPod Touch、iPad及Apple TV等产品上。iPhone的组件名称大多以UI开头，这种命名的方法有可能是为了与其他系统的组件区分，避免混淆。以下是苹果手机系统基础组件：（1）UITextView（文本显示）：UITextView有点类似于Android系统中的TextView，不同之处在于，UITextView可以设置成可编辑的模式，且UITextView中的字体、字号皆是统一的。（2）UILabel（文本标签）：UILabel也是文本显示的一种形式，它是短的文本，不能进行文字编辑，但可以通过设置视图属性，为标签选择颜色、字体和字号等。（3）UIImage Views（图片显示）：用于图片的显示，等同于Android中的Gallery组件。（4）UIWebView（Web内容显示）：用于显示HTML、PDF等高级网页内容。（5）MKMapViews（地图显示）：用来显示地图的控件。（6）UIScrollView（滚动条）：滚动条用于显示界面无法满足的内容。（7）UIAlertView与UIActionSheet（警告框）：警告框是附带一组供选择的选项按钮的组合组件。（8）UIButton（按钮）：UIButton等同于Android中的Button组件，用于提交确认的操作。（9）UISegmentedControl（平行按钮组）：常用于各种子功能之间的切换，位置一般在页面主体偏上区域，但最近也常被放在页面底部。（10）UISwitch（一键开关）：一键切换，常用于状态的开关，类似于Andriod的ToggleButton。（11）UISlider（滑动条）：UISlider的作用非常广，常用于参数值的调整、缩放图片、屏幕亮度的增减。（12）UIPageControl（多图片浏览切换控件）：浏览多张图片时观察图片张数和当前图片所在页的组件。（13）UITextField（编辑输入框）：文本输入框，等同于Android中的EditText组件。（14）UITableView（表格排列显示）：像表格一样，将相同级别的选项排列出来，类似于Android中的ListView组件，不过没有进行分组。（15）UINavigationBar（导航栏）：在iOS状态栏下方，APP主体上方的这一栏就叫UINavigationBar。（16）UItabBarController（页面切换）：类似于Android中的TableWidget组件，在APP页面底部，用于不同页面切换的组件。（17）UISearchBar（搜索栏）：在搜索栏中输入搜索文字，单击“查找”按钮就可以进行查找。1.2.3 登录界面设计中几种常见的设计思路
用户对软件或网页的第一印象，是各种软件或网站入口的登录界面。登录界面包含的元素不多，不超出几个文本框和按钮的范围，但这意味这它的重要性且不容易制作。右图所示的是设计精美的登录界面。
登录界面在一些细节上展现了APP手机界面的特点，主要表现在：（1）视觉设计：一款手机APP的应用或系统，首先要通过界面将整体效果传递给用户，这是产品的一种性格，体现在界面风格营造的氛围上。用户对产品的观点、兴趣，决定了视觉设计的姿态乃至后面的使用情况。APP界面的视觉设计制作可以帮助产品的感性部分找到更多的共性，也可以规避一些用户可能的抵触感。（2）屏幕大小：手机屏幕大小是有限的，由于应用产品功能太强大，页面过多会导致都装不下，于是我们总会面对很多的次级界面加以添加。（3）逻辑设计：事实上，我们对一个产品的要求往往很纯粹，页面中大多数的操作都在集中，过多的页面“转场”让我们感到焦虑，所以次级界面有助于我们把握逻辑关系。1.2.4 手机界面设计常用的5种布局
在设计手机界面时，合理的布局可以让信息看起来层次分明，用户可以很容易地找到自己想要的信息，产品的交流率和信息传递的效率也都会大大地提升。下面介绍手机界面设计中常用的5种布局。（1）竖排列表布局：手机屏幕中的列表一般是竖屏显示的，文字是横屏显示的，所以竖排列表可以包含比较多的信息。列表长度没有限制，在视觉效果上显得整齐美观，用户接受度也很高，所以是最常用的布局之一。一般用于并列元素的展示，包括目录、分类、内容等。（2）横排列表布局：这是并列元素横向显示的一种布局，一般常见的工具栏都采用这种布局。由于受手机屏幕宽度的限制，横排列表中可以显示的数量比较少，在原色数量较少的情况下比较适合使用这种布局。在界面需要展示更多的内容时竖排列表是不二之选。竖排列表布局（3）九宫格布局：九宫格布局是非常经典的设计，展示形式简单，一眼就能看懂，用户接受程度很广。虽然它有时候让人有一种设计陈旧的感觉，不过它在原来体式上的一些改变在目前来说还是比较流行的。（4）弹出框布局：弹出框在版面设计上是很常见的。在需要它的时候才弹出，其他时间弹出框会把内容隐藏，用来节省屏幕空间，弹出框可以在原有的界面上进行操作，不需要弹出界面，体验起来还是比较方便的。在安卓系统上弹出框的使用很普遍，比如菜单、单选框、多选框等，在苹果手机系统上使用得相对少一些。竖排列表布局（5）标签布局：在搜索界面和分类界面中，会采用标签的方式来展现，增加了应用的趣味性。九宫格布局1.3 手机界面设计尺寸标准
刚开始接触UI的时候，碰到最多的就是尺寸问题，例如画布尺寸、文字大小、界面套数等为避免在手机UI设计时出现不必要的麻烦，如设计尺寸错误而导致显示不正常的情况发生，设备尺寸的标准（如单位、分辨率、密度等）都是必须先了解清楚的。1.3.1 英寸（Inch）
英寸是长度单位。例如，14英寸笔记本电脑、30英寸纯平彩电，指的是屏幕对角的长度，手机屏幕也沿用这个概念。1.3.2 分辨率（Resolution）
分辨率是屏幕物理像素的总和。一般用屏宽像素数乘以屏高像素数来表示，比如480px X 800px、320px X 480px等。像素是显示屏规范中的最小单位。
分辨率是屏幕图像的精密度，是指显示器所能显示的像素的多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，屏幕区域内能显示的信息也就越多，所以分辨率是一个非常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。
所有的画面都是由一个一个的小点组成的，这一个一个的小点就称为像素。一块方形的屏幕横向有多少个点，竖向有多少个点，相乘之后的数值就是这块屏幕的像素（数码相机的像素也以此方法计算）。但是为了方便表示屏幕的大小，通常用横向像素×竖向像素的方式来表示，例如计算机屏幕中很常见的1024×768像素，以及手机屏幕中很常见的240×320像素。点距越小，图像越细腻。
以下是3种数码产品的界面尺寸：
iPhone界面尺寸：320x480、640x960、640x1136。
Android界面尺寸：854x480、960x540、1280x720。
iPad界面尺寸：1024x768、2048x1536。
下左图所示的是一张分辨率为420X320的图片，用放大工具将此图放大后，所见图片就变成下右图所示的正方形格子的样子。每一个正方形格子，就是一个像素，数一下这些格子数就可以发现，屏宽的格子数为420，屏高的格子数为320，也就是分辨率中的宽和高。1.3.3 网点密度（DPI）
网点密度又称DPI，是Dots Per Inch（每英寸所打印的点数）的缩写，是打印机、鼠标等设备分辨率的单位。这是衡量打印机打印精度的主要参数之一，一般来说，数值越大，表示打印机的打印精度越高。
DPI是指每英寸的像素，也就是扫描精度。国际上都是计算1平方英寸面积内像素的多少。DPI越高，显示的画面质量就越精细。一般情况下平面设计比较追求高DPI来呈现画面质感。但在手机UI设计中，DPI要与相应的手机相匹配，因为低分辨率的手机无法满足高DPI图片对手机硬件的要求，显示的效果反而会变得不好。DPI越小，扫描的清晰度越低，由于受网络传输速度的影响，网络上使用的图片都是72DPI，但是冲洗照片不能使用这个参数，必须是300DPI或者更高（350DPI）。例如要冲洗4X6（英寸）的照片，扫描精度必须是300DPI，那么文件尺寸应该是（4X300）X（6X300）=1200像素X1800像素。所以，这就出现了一个新的名词——屏幕密度。1.3.4 屏幕密度（Screen Densities）
屏幕密度分别为iDPI（低）、mDPI（中等）、hDPI（高）、xhDPI（特高）4种。下左图所示的是屏幕密度低、中、高的效果。
下右图中分成了屏幕密度（横列表头）和屏幕大小（纵列表头）两个维度。与屏幕密度相对应的，屏幕大小也分为4种：小屏、中屏、大屏、超大屏。
拿出自己的手机，根据分辨率看它属于哪种屏幕大小，从而可以推断出应该采用的屏幕密度。假设手机分辨率为320X480，可以看到对应320X480（即HVGA）分辨率屏幕大小的只有中屏，通过图表反查可知，其适用于mDPI屏幕密度。也就是说，如果我要做一个适合此手机的应用，就应该选择mDPI屏幕密度来进行设计。1.3.5 图标尺寸大小与格式
本节介绍Android、iOS、Windows Phone三个系统图标尺寸的要求，以及对于图片采用格式的建议。
1.图表尺寸大小
APP的图标（ICON）不仅指应用程序的启动图标，还包括状态栏、菜单栏或者是切换导航栏等位置出现的其他标识性图片，所以ICON指的是所有这些图片的集合。
2.图表格式
BMP：BMP代表位图，是Windows操作系统中的标准图像文件格式。几乎所有处理图像的Windows程序都支持BMP文件格式。
EM：Enhanced Metafile（中文意思是“增强型元文件”）图形，是Microsoft Windows的本机文件格式之一，一种Windows 32位扩展图元文件格式，是矢量文件格式。
GIF：GIF是图形交换格式，是由CompuServe创造的一种简单图形格式，由于受到网络浏览器的支持而得到广泛使用。GIF允许将256种颜色中的某一个设为透明色；在网页上使用时，该颜色的像素是透明的，这样便可以看到GIF后面的背景。
JPEG：JPG扩展名用于表示JPEG压缩文件。该文件类型是3种标准的互联网类型（JPG、GIF及PNG）之一，广泛用于存储照片。所有的JPEG图像都允许使用真彩色（真彩色就是几百万种颜色）。
TIFF：此格式支持多种压缩算法，甚至可以不压缩。大多数算法是无损压缩，但有一个是有损压缩（JPEG）。TIFF文件可以包含多个图像，但许多程序不支持此项功能。1.3.6 iPad UI设计的尺寸规范
在做UI设计的时候要首先了解产品的尺寸，这样才能够做出合理的设计。下面介绍iPad的界面尺寸及界面中图标的尺寸规范。
iPad的界面尺寸
iPad的界面尺寸示意图
iPad的图标尺寸
iPad的图标尺寸示意图1.4 手机界面的色彩搭配与视觉效果
色彩的搭配是否恰当，决定着你的设计水平品位的高低。本节将介绍几种常见的色彩搭配方法，全面提升你的色彩搭配感知力。1.4.1 色彩的重要性
有科学人员研究表明，人们对色彩的反应高于文字，这是一个有趣的研究。
设计中最具表现力和感染力的因素来源于色彩，它可以让人在视觉感官上产生一些生理、心理和类似物理的效应，并形成丰富的联想效果、深刻的意义及独特的象征性。人的视觉效果的反应来自色彩的物理性质方面，比如冷暖、远近、轻重、大小等。（1）温度感：在色彩学上，不同色相的色彩可以划分为热色、冷色和温色，热色包括红紫、红、橙、黄到黄绿色，其中以橙色为最热。冷色包括青紫、青至青绿色，其中以青色为最冷。红与青色混合而成紫色，黄与青混合而成绿色，所以这些是温色。红色、黄色让人联想到太阳、火、炼钢炉等，是人类长期适应的感觉，这样会感觉到热，而青色、绿色，让人联想到江河湖海、绿色的田野、森林，感觉凉爽。（2）距离感：进退、凹凸、远近可以使人感觉到不同的色彩，具有前进、凸出、接近的效果一般是由暖色系和明度高的色彩显示出来的；相反地，具有后退、凹进、远离的效果一般是由冷色系和明度较低的色彩显示出的。（3）重量感。色彩重量感的形成是因为有明度和纯度的存在，明度和纯度高的显得轻，例如桃红色、浅黄色。（4）尺度感。色相和明度这两个因素的形成是由于色彩对物体大小产生的作用。暖色和明度高的色彩具有扩散作用，所以物体就会显得大一些；而冷色和暗色则具有内聚作用，所以物体就会显得小一些。有时不同的明度和冷暖也可以通过对比作用显示出来，比如室内一些不同的家具、物体的大小和整个室内空间的色彩处理有着密切的关系，可以利用色彩来改变物体的尺度、体积和空间感，使室内各部分之间的关系更为协调。1.4.2 色彩的分类
色彩分为原色、间色、复色和补色4类。按色彩的色调色系（冷、暖、明、暗、软、硬）、色彩的感情表达（喜、怒、哀、乐）、色彩的呈现状态（安静的、活泼的、典雅的、清新的）不同，可以划分出多种不同的类别组合。
下图所示展现的是春、夏、秋、冬，在画面中，色彩的转换能变换出别样的情绪状态。
春天：微寒却点缀了生机的绿——清新。
夏天：热闹欢乐铺满世界的蓝——活泼。
秋天：热未散尽带点哀愁的黄——典雅。
冬天：冷清沉寂纯洁如雪的白——安静。1.4.3 色彩搭配方法
颜色切忌滥用，在实际搭配中，如果对自己色彩搭配水平没有把握，可以采用3个简单的方法：参考同类APP案例、使用配色软件和在线配色网站。色彩为第一视觉语言，具有影响受众心理，唤起受众感情的作用，左右我们的感情和行动。
1.参考同类APP案例
参考同类APP案例是指根据APP行业、风格和定位，去寻找同类APP的常用色彩搭配组合。使用APP色彩搭配组合图，具体操作是采用吸管工具，将APP界面中面积最大的几种颜色提取出来。这种方法可以快速有效地找出使用的色彩搭配方案。
2.配色软件
目前有很多配色软件可以用来实现色彩捕捉分析，RealColors Pro就是一款手机上的色彩搭配工具。除支持直接调用图片进行色彩分析外，还可通过摄像头实拍功能进行外界色彩的抽取与搭配。遇到喜欢的搭配，可以保存到库中，需要的时候调用作为参考。
3.配色网站
参考别人的APP始终有不方便之处，现在配色网站很多，它们推荐的搭配总有一个适合你，其中省去了很多操作步骤，方便了设计的色彩搭配，让色彩搭配变得很容易。1.4.4 简约明快型
简洁明快、实用大方是简约明快型色彩搭配的特点。因为“极简主义”的生活理念普遍存在于当今社会流行的文化中，所以才会有这个概念。
简约明快型的界面适合色彩支持数量较少的彩屏手机。由于大块颜色和线条组合的构成，使界面具有大气、简约的特点。点、线、面基本原色的形状构成结合了色彩的纯净搭配，这样做是为了让画面显得干净利落，给用户的操作带来轻松的感受。
同种色搭配是一种最简单便捷、最基本的配色方法。同种色是指一系列的色相相同或相近，由明度变化而产生的浓淡深浅不同的色调。如果需要端庄、沉静、稳重的效果，也可以选用同种色搭配方法，但必须要注意，在使用同种色搭配时，颜色之间的明度区别要适当，太接近的色调容易相互混淆，缺乏层次感，版面的颜色就会显得相差太小；对比太强烈的色调容易使整体效果显得分裂，版面的颜色就会显得相差太大。在使用同种色搭配时，最好有深、中、浅3个层次的变化，少于3个层次的搭配显得比较单调，而层次过多则容易产生琐碎、分散的效果。1.4.5 趣味与独创型
形式的情趣是手机界面设计中的趣味性。这是具有活泼感和跳跃感的版面视觉效果。制造趣味性可以使本没有多少精彩内容的版面更加有趣，这是在构思中动用了艺术手段后起到的作用。版面充满趣味性，可以使传媒信息更上一层，具有画龙点睛的作用，从而更吸引用户，打动用户。
独创性实际上是突出个性化特征的。版面设计的创意是其鲜明的个性特点。设计师要敢于思考，敢于别出心裁，敢于独特，要想赢得用户的青睐，就要在排版设计上多一点个性、多一点独创性、多一点趣味性。1.4.6 高贵华丽型
高贵华丽型适合支持色彩数量较多的彩屏手机，最好支持带8位Alpha通道的PNG透明图。
饱和的色彩和华丽的质感，会给人超酷、超炫的视觉感受。利用羽化了的像素对图形图像进行的仿真设计，不仅界面色彩、形状与众不同，还进一步在元素的质感和体积感上下功夫，给用户一种高贵华丽的视觉享受。1.5 UI的设计流程及方法
为了获取最终用户和直接用户的需求，通常在软件设计过程中，会确定目标用户。用户交互设计要考虑到目标用户的不同，所以在设计流程上交互设计的重点也会有所不同。1.5.1 定位指南图
定位指南图用来直观地展现产品的定位。明确的定位更容易把握产品的风格。在设计的过程中，可以用此图提醒自己，避免因定位不明确而造成风格不符等问题。1.5.2 核心功能确认
大方向把握好了，接下来就是核心功能的确认。UI设计的分工其实并不是很明确的，有些公司的设计者无须进行功能确认，只是按照项目经理要求的功能进行还原，而有些公司则需要UI设计加入到功能剔除及功能确认的环节中去。1.5.3 ADS
先进设计系统（Advanced Design System，ADS），也就是应用定义声明。应用定义声明由3个不同的部分组成，即定位（location）、方案（solution）和用户（audience）。除设计功能简单的软件外，它还为蜂窝和便携电话、寻呼机、无线网络，以及雷达和卫星通信系统这类产品的设计师提供完全的设计集成。
例如一个天气预报APP的ADS可能是：为在出游前想确认天气情况的用户提供随时随地的查询天气情况的解决方案。
ADS不是功能的堆砌，而是将此APP与其他APP区别开来，设计师要做的就是尽量展现出APP的独特性。1.5.4 画草图
ADS由文字的展示形成。画草图是最直观并且容易理解的方式。
无论是产品经理、设计师，还是开发工程师，都可以通过自己所绘的草图清晰地表达自己的创意。不需要太夸张的绘图，只需要使用适当的技巧表达出自己的想法即可。
现在有很多人开始认识并了解到草图对于相关的原型工作的重要意义。相反，在实际应用的工作中，真正会使用到纸和笔的设计师不是很多。如今，使用计算机中的原型设计软件代替了以前的纸和笔，是一种省事省力的做法，不过从计算机图像处理技术来看，这并不是最好的解决方案。当设计师在思索网页或是手机移动应用的版面设计布置，以及功能流程的设计方法的时候，使用画笔画草图才是最有效的方法。它能够帮助你集中精神解决问题，不断地有设计方法涌现出来。
草图不等于绘画
从视觉角度来说，即使是很完美的一个草图设计作品，实际上与真正意义上的“绘画”比较还是有很大差距的。就跟人类的思维和灵感一样，草图设计可以根据需求进行调整，同时处于一种持续变化的状态。对于没有绘画基础的人或者是初学者来说，不需要画得多好，也不需要去学习绘画。
草图本身的形体是什么？
简单来说，草图就是思维的表达方式，主要用来解决问题。
草图是一种可视的、更加清晰的、有效的沟通方式。
试读结束[说明：试读内容隐藏了图片]