1.1 UI设计概述
随着智能手机和平板电脑等移动设备的普及，移动设备已经成为人们日常生活中不可缺少的一部分，各种类型的移动端App软件层出不穷，极大地丰富了移动设备的应用。
用户不仅期望移动设备的软、硬件拥有强大的功能，也注重操作界面的直观性、便捷性，期望其能够提供轻松愉快的操作体验。
1.1.1 什么是UI设计
UI即User Interface（用户界面）的简称，UI设计则是指对软件的人机交互、操作逻辑、界面美观三个方面的整体设计。好的UI设计不仅可以让软件变得有个性、有品位，还可以使用户的操作变得更加舒适、简单、自由，充分体现产品的定位和特点。UI设计包含范畴比较广泛，包括软件UI设计、网站UI设计、游戏UI设计、移动端UI设计等，如图1-1所示为软件UI设计和移动端UI设计。
图1-1 软件UI设计和移动端UI设计
UI设计不仅仅是单纯的美术设计，它需要根据使用者、使用环境、使用方式、最终用户进行设计，是一门纯粹的、科学性的艺术设计。一个友好美观的界面会给用户带来舒适的视觉享受，拉近人机之间的距离，所以UI设计需要和用户研究进行紧密的结合，是一个不断为最终用户设计满意视觉效果的过程。
提示
UI设计不仅需要客观的设计思想，还需要科学、人性化的设计理念。如何在本质上提升产品用户界面的设计品质？这不仅需要考虑界面的视觉设计，还需要考虑人、产品和环境三者之间的关系。
1.1.2 UI设计常用术语
了解用户体验设计领域的相关专业术语，如GUI、UI、UE等，可以帮助我们进一步加深对该领域的认识。
• UI（User Interface）
UI是指用户界面，包含用户在整个产品使用过程中相关界面的软硬件设计，囊括了GUI、UE及ID，是一种相对广义的概念。
• GUI（Graphic User Interface）
GUI是指图形用户界面，可以简单地理解为界面美工，主要完成产品软硬件的视觉界面部分，比UI的范畴要窄。目前国内大部分的UI设计其实做的是GUI，设计师大多出自美术院校相关专业。
• ID（Interaction Design）
ID是指交互设计，简单地讲就是指对人与计算机等智能设备之间的互动过程进行流畅性的设计，一般由软件工程师来实施。
• UE（User Experience）
UE是指用户体验，即关注用户的行为习惯和心理感受，研究用户怎样才能够更加得心应手地使用产品。
• UED/UXD（User Experience Designer）
UED/UXD是指用户体验设计师，国外企业在产品设计开发中十分重视用户体验设计，这与国际上比较注重人们的生活质量密切相关；目前国内相关行业特别是互联网企业在产品开发过程中，越来越多地认识到这一点，很多著名的互联网企业都已经拥有了自己的UED团队。
1.1.3 UI设计的特点
随着移动端设备的不断普及，对移动端应用程序的需求越来越多，移动操作系统厂商都不约而同地建立移动端应用程序市场，如苹果公司的App Store、谷歌公司的Android Market、微软公司的Windows Phone Marketplace等，给用户带来巨量的应用软件。
这些应用软件的界面各式各样，在众多的应用软件使用过程中，用户最终会选择界面视觉效果良好，并且具有良好用户体验的应用软件。那么怎样的移动端应用UI设计才能够给用户带来好的视觉效果和良好的用户体验呢？接下来向读者介绍移动端UI设计的一些特点。
• 第一眼体验
当用户首次启动移动端应用程序时，在脑海中首先想到的问题是：我在哪里？我可以在这里做什么？接下来可以做什么？所以应用程序在刚被打开时就要能够回答用户的这些问题。如果一个应用程序能够在前数秒的时间里告诉用户这是一款适合他的产品，那么他一定会更加深层次地进行发掘。
图1-2 耳机产品App界面设计
图1-2所示的耳机产品App界面设计，重点突出耳机产品，从而给用户留下深刻的印象。界面首页采用了独特的瀑布流布局方式，富有现代感与个性。整个界面采用无彩色的配色，有效地突出了产品，并且使产品的购买流程更加流畅、清晰，方便用户购买。
图1-3 色块在App界面设计中的应用
色块是移动端界面设计中常用的一种表现方式，通过色块用户可以容易地区分屏幕中不同的内容。图1-3所示的App界面设计，使用不同颜色来表现不同的功能操作图标和不同的信息内容，使信息和功能的表现更加突出，并且大色块更容易引导用户使用手进行触摸操作。
• 便捷的输入方式
在多数时间里，人们只使用一个拇指来操作App，所以在设计时不要执拗于多点触摸，以及复杂精密的流程，要让用户可以迅速地完成屏幕和信息间的切换和导航，快速地获得所需要的信息，珍惜用户每次的输入操作。
图1-4 移动端App的聊天界面
图1-4所示为移动端App的聊天界面，该App为用户提供了多种聊天方式，用户不仅可以输入传统的文字，还可以发送语音、视频、图片、定位等，并且将这些交流方式的选择权交给用户，让用户自己选择，使用户的操作和使用更加方便。
图1-5 移动端App的搜索界面
图1-5所示为移动端App的搜索界面，该界面会自动在搜索框下方列出用户最近的历史搜索记录及推荐的热门搜索关键词，方便用户快速搜索。当用户在搜索文本框中输入内容时，系统会根据用户所输入的内容在搜索文本框下方列出相应的联想关键词，这些细节能够使用户的操作变得更加方便。
• 呈现用户所需
用户通常会利用一些时间间隙来做一些小事情，而将更多的时间用来做一些自己喜欢的事情。因此，不要让用户等待App来做某件事情，而是要尽可能地提升App的表现，改变UI，让用户所需的结果呈现得更快。
图1-6 天气App界面设计
天气App界面最核心的信息就是天气信息，所以需要进行重点表现。图1-6所示的天气App界面设计，使用纯白色作为背景色，突出界面中天气信息，并且在界面顶部使用高纯度的色彩，使天气信息的表现更加直观、清晰。
图1-7 餐饮美食App界面设计
餐饮美食类的移动端App界面设计需要重点突出美食，通过精美的食物图片来吸引用户。图1-7所示的餐饮美食App界面设计，通过美食图片搭配少量的说明文字，吸引用户的关注。精美的图片比大段的文字内容更具吸引力。
• 适当的横向呈现方式
对于用户来说，横向呈现带来的体验是完全不同的。
图1-8 App界面在手机与平板电脑中的呈现方式
图1-8所示为同一款App分别在手机与平板电脑中的呈现方式。
平板电脑提供了更大的屏幕空间，可以合理地安排更多的信息内容，而手机屏幕的空间相对较小，适合展示重要的信息内容。通过横屏竖屏不同的展示方式，可以给用户带来不同的体验。
• 制作个性App
每个人的性格不同，喜欢的App风格也各不相同，制作一款与众不同的App，总会有喜欢它的用户。
图1-9 运动鞋电商App界面设计
图1-9所示的运动鞋电商App界面设计，打破了传统电商App界面的布局和表现方式，采用极简的布局方式：以运动鞋产品图片的展示为主，几乎没有文字信息内容；产品详情页同样是以产品图片的展示为主，搭配少量关键信息。整个App界面非常个性，给人带来独特的视觉体验。
图1-10 机票预订App界面设计
图1-10所示的机票预订App界面设计，使用大号的粗体文字来表现机票的相关信息内容，使其在界面中的表现效果非常突出，而座位的选择则使用了非常直观的方式——使用机舱内部的实景图片作为背景，在图片上直接标注相应的座位，使用户在选择座位时更加直观、便捷。
• 不忽视任何细节
不要低估一个App组成中的每一项。精心撰写的介绍和清晰、精美的图标会让App显得出类拔萃，用户会察觉到设计师所投入的精力。
图1-11 影视票务类App界面设计
App界面重要的是实用，所以通用性一定要强，并且需要注意界面的设计细节，做到操作界面的统一，使用户能够快速熟悉了解操作界面。图1-11所示的影视票务类App界面设计，多个界面保持了统一的设计风格，使用白色背景来突出重要信息，使界面具有视觉层次感，界面中没有过多复杂的设计，从而使用户的操作更加便捷。