1.1.1 什么是智能手机用户界面

界面就是在你使用工具完成任务的过程中，你所做的操作以及工具的响应的总和。所以用户界面设计，不仅要考虑如何摆放按钮和菜单，还要考虑程序、设备与用户如何互动。但是，由于用户看不到隐藏的代码，所以界面就代表了产品的全部。因此，比较科学的做法就是先设计界面，再做代码。

1.1.2 优秀的界面具有哪些特点

智能手机的软件五花八门，界面的美观程度和友善程度也是良莠不齐，质量差的界面设计常常让用户不知如何使用。下面，让我们看看优秀的界面都应该具有哪些特点。

1.2.1 APP界面设计的布局

下面将对iPhone、Android、Windows Phone的APP界面布局进行剖析，从而了解不同的系统在进行APP设计时的异同。

iPhone系统的布局界面元素一般分为三个部分：状态栏、导航栏（标题）和标签栏/工具栏。

状态栏：显示应用运行状态。

导航栏：文本居中显示当前APP的标题名称。左侧为返回按钮，右侧为当前APP内容操作按钮。

标签栏/工具栏：标签栏和工具栏共用一个位置，在iPhone的最下方，可以根据APP的需要来选择一个。工具栏按钮不超过5个。

Android系统的布局界面元素一般分为4个部分：状态栏、标题栏、标签栏和工具栏。

状态栏：位于界面的最上方。当有短信、通知、应用更新、连接状态变更时，会在左侧显示，而右侧则显示电量、闹钟、信号和时间等常规手机信息。按住状态栏向下拉，可以查看信息、通知、应用更新等详细情况。

标题栏：在左方显示当前的APP名称。

标签栏：在标签栏中放置的是APP的导航菜单，标签栏可以在APP主体的上方或下方，标签的项目不宜超过5个。

工具栏：针对当前的APP页面，是否有相应的操作，若是有，会放置在工具栏中。

Windows Phone布局界面元素一般分为4个部分：状态栏、标题栏、枢轴和工具栏4个部分。

状态栏：显示时间、电量等信息。

标题栏：显示当前APP的名称或应用程度等主要标题。

枢轴：枢轴的表现形式较为特别，它是由枢轴组件组成、类似于Android中的标签栏，可用于APP中的各个功能，以及选项间的切换。

工具栏：单击Windows Phone手机上的开始键，就可以弹出相应的工具栏。工具栏中包含当前APP界面操作的相应功能按钮。

1.2.2 APP界面的分类

下面对APP界面的分类进行总结，一般可将其分为6种方式。

（1）平铺成条。以长条的形式横向平铺。

（2）九宫格。以九宫格的方式进行网格式横向和纵向排列。

（3）大图滑动。以一张大图的方式布满全屏。

（4）图片平铺。所有图片不规则地平铺于界面之中。

（5）分类标签。以标签的形式进行分类，导航条的下方水平铺开，可以左右滑动。

（6）下拉选项框。以下拉列表或下拉选项的方式呈现，主要对信息进行筛选。

1.3.1 你的UI是不是保持着高度一致

当用户来到你的站点时，他的脑子里会保持着自己的思维习惯，为了避免把用户的思维方式打乱，你的UI就需要和用户保持一致。你不仅可以将按钮放到不同页面相似的位置，使用相契合的配色；还可以使用一致的语法和书写习惯，让页面拥有一致的结构。例如，你的某个品目下的产品可以拖放到购物车，那么你站点中所有产品都应该可以这样操作。

1.3.2 用户可以自由掌控自己的操作吗

在设计UI之前，你应当考虑到站点是否容易导航。一个优秀的UI，用户不仅能自由掌控浏览行为，还要确保他们能从某个地点跳出或毫无障碍地退出。而这些在用户离开前弹出窗口的行为，正是用来判断UI易用性的标准。

1.3.3 你对你的用户群了解吗

只有对你的用户群有所了解，才能设计有效的UI。不同的用户群对不同的设计元素有着不同的理解，例如，16～20岁年龄段的人和35～55岁年龄段的人的喜好和习惯肯定有很大的不同，所以你的UI设计必须有针对性。

1.3.4 你有预防错误的措施吗

我们应该尽可能检查程序中的错误和Bug，而Beta测试是消减错误的最好方法。为了使用户有更好的用户体验，最好减少那些弹出一个窗口告诉用户发生了什么的内容。

1.3.5 你有没有在重要的位置为用户展示最重要的内容

为了让用户更好地理解你的内容，应该将重点放在重要的内容上，在重要的位置为用户展示最重要的内容。

1.3.6 你的设计是不是显得很简约

你的UI功能可以很强大，但是设计一定要简约，因为拥挤的界面，不管功能多么的强大，都会吓跑用户，而简约的设计不仅能增强UI的易用性，还可以让用户不必关心那些无关的信息。所以，很多优秀的站点的设计都显得十分简约。

1.3.7 你有没有使用视觉提示

当你使用了像AJAX和Flash一类的技术，在加载内容的时候，你应当提供视觉提示，要让用户知道目前他在做什么。

1.3.8 你的UI有操作提示吗

你的用户是靠自己的研究还是看FAQ文档来学习操作UI的。一个优秀的UI，应当在UI现场提供类似于在jQuery的各个UI元素上的简单操作与提示。

1.3.9 你的内容清晰吗

文本的清晰和准确是确保内容的两个重要因素。

1.3.10 你是怎样使用色彩的

UI的重要元素是色彩，不同的颜色代表着不同的心情。在使用色彩的时候，首先要和站点及主题相吻合；其次还应当考虑到色盲用户的感受，如果你选定了某种配色，就应该在整个站点及主题统一使用这种配色，以保持色彩的统一性。

1.3.11 你的UI是不是太过花哨

最好的设计是用来体验的，而不是用来看的。所以，你的UI不要放一些花哨的内容给用户看，而是应该让用户去体验。因为越是简单的UI设计，用户体验越好。

1.3.12 你的UI结构是否清晰明了

在你的UI中，总体结构应当清晰明了，各个元素应当放在适当的位置，彼此之间相互关联，那些不相关的内容，可以把它们单独放置。

关于如何提升自我这个问题，伴随而来的疑问也有不少。什么是美术人员必备的素质？如何打造对玩家和游戏有意义的作品？如何提升美术技能？很多人会告诉你“不断地动手练习啊”、“不断地实战演练啊”、“不断地吸取经验教训啊”。这基本上是对的，但答案不止于此。毕竟，你可以花很多时间在错误的道路上磨炼——如果真的是这样的话，你的提高会有很多局限性。

过程必然是苦闷的。所以，在开始谈论自我提升这条道路之前，我想与大家分享一条非洲人的智慧箴言：“很不幸，种树的最佳时机是20年以前；幸运的是，现在就是下一个最佳时机。”

1.4.1形状/轮廓

我们通过物体的边缘来感知物体，所以为了清楚的表达，应该首先考虑轮廓，确保通过轮廓可以识别物体。为了增加趣味，物体应该容易让人理解，不引起困惑。在保持美术风格的同时，应该努力让观者只看轮廓就能识别道具和角色。

1.4.2 美术基础

我们是美术设计师，画出好图的能力应该是有的。使用工具、使用设计软件的唯一用途就是执行你的想法。把重点放在想象力、执行速度和工作合作方面，与相关团队保持有效的沟通。从想法、清楚的意图、理想的目标和贯穿设计原则的合理的方法开始，将所有选择导向你的目标。

1.4.3 色彩识别

色彩是一个值得讨论的话题，主观性比较强，也没有什么硬性标准，如果有的话，也都有例外。所以只要记住几件事：颜色带有温度和情绪的特点，要以所表达、表现的意图为基础，可能要避免使用某些颜色（如大面积的黑色，会造成空间上的不透气，画面不美观等）。可以用颜色创造象征性的联系。这可能很微妙，但却很强大，如皮克斯动画公司的《飞屋环游记》就用得很好。在那部动画里，美工用紫红色作为Ellie的象征色，在她的穿着和使用的物品里经常可以看到紫红色；当粉红色的阳光消失在窗户的反光中，她离开了，这种既定的色彩象征为观众描绘了一幅凄美的画面。很多书都专门讨论了色彩，但学习色彩的有效方法是看电影，然后仔细分析其中的色彩运用以及对剧情表达的作用。我们不只关注和谐的色彩搭配，还要注意剧情氛围与和谐的色彩之间的组合。以下我们列举了最常用的设计原则和元素。

●设计原则：统一、冲突、支配、重复、交替、平衡、和谐、渐变。

●设计元素：线条、值、色彩、色相、纹理、形状、轮廓、尺寸、方位。

利用以上原则和元素，一定会帮助你构思出清楚准确的画面。可以借助这些工具从设计的角度看待画面，你觉得对基本形状、比例满意后，再从各个独立元素出发，把注意力放在正题画面上。如果你的基本设计草稿都不耐看，那么就谈不上什么细节了。

1.4.4 引导视觉

在美术概念中，构成大概是最难理解的。如果可以将它表述成一句简单的话，那我会说，构成是通过画面引导视觉的艺术。假设不存在糟糕的构成，只有误用的构成——太紧密或太松散。在某个情节中管用的构成放到另一个情景中可能就不管用了。构成的唯一目的就是让玩家看到并且理解预期的空间和剧情。最常用的办法是使用冲突和对比、形状上的冲突、颜色上的视觉冲突、方向线带来的视觉引导。人的眼睛通常最先注意到框架内的最高对比区域。当你确定焦点，请确保其他元素不会产生冲突或干扰观者的注意力。所有元素的分层结构应该最终引向一个焦点。人们往往误解构成，把它简单地理解为黄金分割，事实上构成的内涵远不止于此。

设计思路：如何设计出更加友好的界面

下面我们就来看几个友好的界面设计。

1.友好界面设计的几大特点

简约而不简单，看上去非常简洁，其实往往都是非常讲究的。细节丰富，架构清晰，主题突出，层次分明，最大限度地呈现有效信息，这些特点都能良好地引导用户。

用色大胆奔放。好的作品肯定是将颜色完美地融合到界面里，让用户享受服务的同时，也能感受到一丝美感。

图形运用，高水平的插画与界面完美融合。小到图标，大到模块乃至整个页面，处处流露出设计功底。

2.完美的栅格

下面这几个界面非常整洁，层次感较强，张弛有度，页面整体非常棒，搭调的配色，完美的比例让人顿觉眼前一亮，即使看不懂外文也会被它深深地吸引，设计上有非常多值得我们参考和学习的地方。栅格的安排控制得非常合理，几乎所有的浏览器都能显示到两行的栅格内容。版式非常灵活和自然，无论是在哪种屏幕分辨率下，设计师都对其进行了自然的重组和排序，但对于内容却没有丝毫的影响。

3.配色柔和，图文清晰

配色是一门艺术，一般采用的是高级灰，所谓高级灰就是只有“色相”和“纯度”的蓝灰色，相对于欧美配色的浓重来说，中文的UI应该比较柔和唯美，符合东方人的审美，背景宜采用浅灰和白色层叠，将黑色的标题文字和彩色的图片映衬得非常清晰，没有拖泥带水，字字在目，整个软件的线框和背景都要保持一致。文字标题全是图片更加强调视觉体验。

4.细腻的细节

因为手机尺寸很小，所以手机UI应该着重细节的处理。下面这些界面的细节处理让人佩服，每一个图片的处理，文字的摆放，仿佛页面整体维护都是一位高级设计师在负责，而非“编辑”。仔细一看，页面中所有的图片广告视觉语言都是统一的，如文字和图片的位置都是一致的，同板块图片的底色高度统一，给人一种严谨的整洁感。画面细腻养眼，图标精致典雅，没有可以的拼凑，没有过分的修饰，让人百看不厌。

知识扩展：浏览本书所有范例，从视觉上总结APP UI设计的基本要素

1.图形样式

因为icon最重要的是对形状的把握，所以在定稿之前，不仅要多画草图，还要考虑到形的表现形式。早在2008～2009年，icon的设计趋势于三维样式，自从iPhone上市后，它的终端icon和iPhone一样，还以二维形式展现。不管是那种形式（三维、二维、文字和像素）都要表现得简洁易懂。好的设计源自生活细节的提炼，在当今时代的趋势下，icon必须要设计出更人性化的作品出来，才能立于不败之地。例如，下面的这个作品是800×400分辨率的屏幕，我们可以从像素、颜色和细节等方面再下些功夫。

一般情况下，一套icon要有个统一的外形，这样才能统一UI设计风格。例如，下面的图标都是在一个方形的容器里面去做的，所以icon的四面要顶到容器。同样的，你的容器定位是三角、正三角、梯形也是如此。通常我会做2～4px的浮动空间。

其次还要有素描关系，一套icon的透视角度和光源角度必须保持一致，不然就会显得很凌乱。如果光源角度是50度，我们还要考虑icon的高光、反光、阴影。

2.元素组合搭配

图标的组合元素最好是1～2 个组合，元素过多会导致识别混乱。就算两个元素的组合也要有主次（大小区分或颜色轻重区分）。要是一套图标里面含有共同的元素，我们只需要把元素相互组合即可，没必要重新设计。需要注意的是，如果在同一界面上，一个元素的应用很多，就会导致识别性不高，这时就需要做一些小的调整。

3.配色方案

一个icon的颜色在3个颜色以内是最好的，控制在0～2之间（黑白灰不算）也不错。如果颜色超过3个，icon就会和界面的设计一样，显得很花。

整套icon的颜色灰度和基调应该保持一致。当然，并不是说完全一致，它是有左右浮动的空间，设计师可以凭着感觉取色。

icon和背景明暗距离以及icon的明暗反差都要调整好，需要注意的是要突出主次关系。

4.视觉体验

质感的确定：对于icon设计，对用户的视觉体验来说，质感非常重要。一般情况下，我们在开始设计的时候，就要考虑到icon的质感效果（如金属质感、水晶玻璃、纸质、亚光质感等）和质感定型（如好几种体现剔透的水晶质感，我们只选取体现高光的）。

质感的表现：一套icon在草稿纸上画好后，我们就用其中最好表现的一个图标进行做质感的尝试。这时候，只要我们能想到的质感的表现方式，都可以尝试做一下。其实只要做完一个icon，就可以仿照着做其他icon。