1.1 概念解读：认识APP UI设计

设计就是把一种计划、规划、设想通过视觉的形式传达出来的行为过程。简单地说，设计就是一种创造行为，是一种解决问题的过程，其区别于其他艺术类的主要特征之一就是设计更具有独创性。

APP UI设计的相关知识，包括UI设计、APP UI的概念和特点、手机的界面特色以及不同APP UI的视觉效果等，只有认识并且了解APP UI设计的基本知识，才能更好地设计出优秀的APP产品。

1.1.1 UI设计：人和工具之间的界面

UI是指用户界面，由英文User Interface翻译而来，是User Interface的缩写，概括成一句话就是——它是人和工具之间的界面。这个界面实际上体现在生活中的每一个环节，例如，操作电脑时鼠标与手就是这个界面，吃饭时筷子和饭碗就是这个界面，在景区旅游时路边的线路导览图就是这个界面。

在设计领域中，UI可以分成硬件界面和软件界面两个大类。本书主要讲述的是软件界面，介于用户与平板电脑、手机之间的一种移动界面，也可以称之为特殊的或者是狭义的UI设计。

如图1-1所示是热门的图像处理类应用软件“美图秀秀”APP的启动界面和主菜单界面。

1.1.2 APP UI：用户和手机之间的界面

APP是可以安装在手机上的软件，完善原始系统的不足，体现个性化。

APP UI是指移动APP的人机交互、操作逻辑、界面美观的整体设计。好的APP UI设计可以提升产品的个性和品位，为用户带来舒适、简单、自由的使用体验，同时也可以体现出APP产品的基本定位和特色。

图1-2所示为手机APP UI展示效果。

图1-3所示为平板电脑中的游戏APP UI展示效果。

1.1.3 设计特点：小巧轻便、通信便捷

APP UI将各类手机应用和UI设计结合起来，使其成为一个整体，且具备小巧轻便、通信便捷的特点。

• 小巧轻便：APP可以内嵌到各种智能手机中，用户可以随身携带，随时随地打开这些APP，满足某些需求。另外，移动互联网的优势使用户可以通过各种APP快速沟通并获得资讯。图1-4所示为“百度糯米”APP的界面，用户通过手机即可获得各种吃喝玩乐的生活资讯。

• 通信便捷：移动APP使人与人之间的沟通变得更加方便，可以跨通信运营商、跨操作系统平台，通过无线网络快速发送免费语音短信、视频、图片和文字。图1-5所示为“微信”APP的“摇一摇”界面，用户可以通过“摇一摇”“搜索号码”“附近的人”和扫二维码等方式添加好友和关注公众平台，同时可以将内容分享给好友或分享到朋友圈。

1.1.4 设计基础：熟悉手机的界面特色

随着科技的发展，现在智能手机的功能越来越多，而且越来越强大，甚至可以和计算机相媲美。

想要设计出优秀的APP用户界面，用户还需要熟悉智能手机的界面构造。手机的主要界面可分为几个标准的信息区域（主要针对按键手机，而触屏手机相对灵活）：状态栏、标题区、功能操作区和公共导航区等。

图1-6所示为“工商银行手机银行”APP的UI构成。

• 状态栏：用于显示手机目前的运行状态及事件的区域，主要包括应用通知、手机状态、网络信号强度、运营商名称、电池电量、未处理事件及数量，以及时间等要素。在APP UI设计过程中，状态栏并不是必须存在的元素，用户可依照交互需求进行取舍。

• 标题区：主要用于放置APP的Logo、名称、版本及相关图文信息。

• 功能操作区：它是APP应用的核心部分，也是手机版面上面积最大的区域，通常包含有列表（list）、焦点（highlight）、滚动条（scroalbar）和图标（icon）等多种不同元素。在各个APP内部，不同层级的用户界面包含的元素可以相同，也可以不同，用户可以根据实际情况进行合理的搭配运用，如图1-7所示。

• 导航栏：也称之为公共导航区或软键盘区，它是对APP的主要操作进行宏观操控的区域，可以出现在该APP的任何界面中，方便用户进行切换操作。

APP运行在手机操作系统的软件环境中，其UI设计应该要符合这个应用平台的整体风格，这样有利于产品外观的整合。

手机界面效果的规范性包括以下两个方面，如图1-8所示。

手机界面的整体性和一致性是基于手机系统视觉效果的和谐统一而考虑的，而手机界面效果的个性化是基于软件本身的特征和用途而考虑的。界面效果的个性化包括以下几个方面，如图1-9所示。

1.1.5 视觉效果：为用户带来不一样的美感

做得好的APP UI设计具有一定的视觉效果，可以直观、生动、形象地向用户展示信息，从而简明便捷地让用户产生审美想象。

1．简约明快的视觉效果

简约明快型的APP UI设计追求的是空间的实用性和灵活性，可以让用户感受到简洁明快的时代感和纯抽象的美。

在视觉效果上，应尽量突出个性和美感，如图1-10所示。

简约明快型的APP UI设计更适合色彩支持数量较少的彩屏手机，其主要特点如下。

• 通过组合各种色块和线条，使移动界面更加简约大气，如图1-11所示。

• 通过点、线、面等基本形状构成的元素，再加上纯净的色彩搭配，使界面更加整齐有条理，给用户带来赏心悦目的感觉，如图1-12所示。

2．趣味型的视觉效果

趣味性是指某件事或者物的内容能使人感到愉快，能引起人的兴趣的特性。

在APP UI设计中，趣味性主要是指通过一种活泼的版面视觉语言，使界面具备亲和力、视觉魅力和情感魅力，让用户在新奇、振奋的情绪下深深地被界面中展示的内容所吸引。图1-13所示为趣味与独创型界面。

3．高贵华丽型的视觉效果

高贵华丽型的APP UI设计，主要是通过运用饱和的色彩和华丽的质感来塑造超酷、超炫的视觉感受，整体营造出一种华丽、高贵、温馨的感觉。图1-14所示为高贵华丽型的APP界面。

由于高贵华丽型的APP界面设计需要用到很多的色彩和各类设计元素，因此更适合色彩支持数量较多的彩屏手机。

1.2 APP平台：主流手机操作系统

在移动互联网时代，Android、iOS、Windows等智能操作系统成为用户应用APP的基本入口，如图1-15所示。

因此，用户除了要了解APP UI设计的基本概念外，还必须认识Android、iOS、Windows三大主流系统，以此熟悉移动设备的主流平台和设计的基本原则。

1.2.1 谷歌Android系统

Android是由Google基于Linux开发的一款移动操作系统。

在移动设备的操作系统领域，iOS和Android系统的竞争十分激烈，它们都希望占据更大的市场份额。目前，由于市面上存在众多的Android系统OEM厂商，因此Google的Android操作系统处在移动系统的领先位置，如图1-16所示。

Android操作系统的APP UI设计基本原则就是要拥有漂亮的界面，设计者可以设置精心的动画或者及时的音效，带给用户一种更加愉悦的体验，如图1-17所示。

另外，Android用户可以直接触屏操作APP中的对象，这样有助于降低用户完成任务时的认知难度，进一步提高用户对APP的满意度。例如，在“最美天气”APP的界面中，用户可以通过滑动屏幕的方式，查看更多的天气资讯，如图1-18所示。

在设计Android操作系统的APP界面时，设计者应尽量使用图片来表达信息，图片比文字更容易理解，而且更加吸引用户的注意力。例如，在“暴风影音”APP的界面中，就采用了大量直观的图标菜单和图片目录列表，如图1-19所示。

1.2.2 苹果iOS系统

iOS是由苹果公司开发的一种采用类Unix内核的移动操作系统，最初是为iPhone设计的，后来陆续套用到iPod touch、iPad以及Apple TV等产品上。

• iPod touch：一款由苹果公司推出的便携式移动产品。iPod touch与iPhone相比造型更加轻薄，彻底改变了人们的娱乐方式，如图1-20所示。

• iPad：苹果公司发布的平板电脑系列，提供浏览网站、收发电子邮件、观看电子书、播放音频或视频、玩游戏等功能，如图1-21所示。

• Apple TV：由苹果公司设计、营销和销售的数字多媒体播放机。

乔布斯在首次展示iPhone手机时说：“我们今天将创造历史。1984年Macintosh改变了计算机，2001年iPod改变了音乐产业，2007年iPhone要改变通信产业”。

如今，乔布斯的预言的确实现了，基于iOS系统的iPhone将智能手机推向了新的舞台，引发了移动互联网时代的爆发，改变了互联网行业的入口格局，如图1-22所示。

对于UI设计者而言，iOS操作系统带来了更多的开发平台。下面简单分析iOS操作系统APP应用的UI设计基本原则。

• 便捷的操作：iOS操作系统中的APP应用通常具有圆润的轮廓和程式化的梯度，操作非常便捷，如图1-23所示。

• 清晰明朗的结构，便捷的导航控制：在设计APP界面时，应该尽量将所有的导航操作都安排在一个分层格式中，使用户可以随时看到当前的位置，如图1-24所示。

另外，苹果公司还推出了车载iOS系统，用户可以将iOS设备与车辆无缝结合，使用汽车的内置显示屏和控制键，或Siri免视功能与苹果移动设备实现互动，如图1-25所示。

1.2.3 微软Windows Phone系统

Windows Phone（简称为WP）是微软于2010年10月21日正式发布的一款手机操作系统，如图1-26所示。

Windows Phone操作系统采用“Metro UI”的界面风格，并在系统中整合了Xbox Live游戏、Xbox Music音乐与独特的视频体验。

2012年6月21日，微软发布Windows Phone 8手机操作系统，采用与Windows系统相同的Windows NT内核，并且支持很多新的特性，如图1-27所示。

2015年5月14日，微软正式宣布以Windows 10 Mobile作为新一代Windows 10手机版的正式名称，如图1-28所示。Windows Phone 8.1则可以免费升级到Windows 10 Mobile版本。

Windows 10 Mobile操作系统的界面非常整洁干净，其独特的内容替换布局的设计理念更是让用户回到了内容本身，其设计原则应该是“光滑”“快”“现代”。

Windows 10 Mobile操作系统的“Metro UI”是一种界面展示技术，和苹果的iOS界面、谷歌的Android界面最大的区别在于：后两种都是以应用为主要呈现对象，而Metro界面强调的是信息本身，而不是冗余的界面元素。

另外，Metro界面的主要特点是完全平面化、设计简约，没有像iOS界面一样采用渐变、浮雕等质感效果，这样可以营造出一种身临其境的感受，如图1-29所示。

Windows操作系统不断进入移动终端市场，试图打破人们与信息和APP之间的隔阂，提供优秀的“端到端”的体验，使其适用于人们的工作、生活和娱乐的方方面面。

1.3 入门基础：手机界面与设计流程

APP界面是移动设备的操作系统、硬件与用户进行人机交互的窗口，设计界面时必须基于手机的物理特性和软件的应用特性进行合理的设计，界面设计者首先应对移动设备的常用界面有所了解。

1.3.1 手机界面：品类繁多、特点各异

就互联网入口的网络部分而言，接入网络总是需要设备的。目前国内最流行的设备除了平板电脑，还有一种使用更为广泛的设备就是智能手机。

在智能手机中，通过结合“无线网络+APP应用”可以实现很多意想不到的功能，这些都为智能手机的流行和APP UI设计的发展奠定了一定的基础。

常用的手机界面主要分为以下3类。

• Android手机界面

Android操作系统的手机可以说是品类繁多，其屏幕尺寸和分辨率都有很大的差异。表1-1所示为Android智能手机常用的屏幕尺寸和分辨率。

例如，小米手机就是国内Android系统手机的代表。其中，小米5（尊享版）的主屏尺寸为5.15英寸，主屏分辨率为1920像素×1080像素，搭载骁龙820处理器，提供4GB内存和128GB存储空间（UFS 2.0）,3000毫安时电池以及索尼1600万像素4轴防抖相机，如图1-30所示。

小米5在UI设计上也有不少创新，例如，在视屏通话的过程中可以添加有趣的动画效果，如“么么哒（一个飞吻）”“闪瞎了”“给你一球”等。

• 苹果手机界面

以iPhone 6s Plus为例，其外观颜色有金色、银色、深空灰、玫瑰金等，屏幕采用高强度的Ion-X玻璃，支持4K（分辨率为4096像素×2160像素）视频摄录。

iPhone 6s Plus的主屏分辨率为1920像素×1080像素，屏幕像素密度为401ppi。iPhone 6s Plus在屏幕上的最大升级是加入了Force Touch压力感应触控（即3D Touch技术），使触屏手机的操作性进一步扩展，如图1-31所示。

• 微软手机界面

微软系统的手机除了采用特立独行的Metro用户界面，并搭配动态磁贴（Live Tiles）信息展示及告知系统等特色外，另一大特色就是无缝链接各类应用的丰富“中心”（Hub），如图1-32所示。

1.3.2 平板界面：操作方便、性能优越

平板电脑（Tablet Personal Computer，简称Tablet PC、Flat Pc、Tablet、Slates），又称为便携式电脑，是一种体积较小、方便携带的微型计算机，以触摸屏作为基本的输入设备，如图1-33所示。

平板电脑主要通过触摸屏进行操作，不需要主机、鼠标和键盘等配件，使用起来非常方便。作为一种小型、便捷的微型计算机，平板电脑受到了越来越多用户的喜爱，在2010年～2015年间，平板电脑呈现爆发式增长，形成了一种新的产业格局。

如今，苹果iPad在平板电脑市场中占据了主导地位，它使用的是iOS操作系统，另外一部分市场就是Android系统平板电脑的“天下”了。例如，华为、联想、小米、三星、戴尔、HTC等厂家均推出了基于Android操作系统的平板电脑。图1-34所示为华为M2 10.0平板电脑。

1.3.3 阶段分析：APP UI设计的基本流程

APP UI设计的基本工作流程包括分析、设计、调研、验证与改进4个阶段，具体流程如图1-36所示。

1.3.4 使用要点：APP UI设计的色彩与图案

在设计APP界面的过程中，有很多需要注意的使用禁忌，如色彩、图案等。

1．色彩的使用要点

对于APP界面设计来说，色彩是最重要的因素，不同颜色代表不同的情绪，因此对色彩的使用应该和APP的主题相契合。如图1-37所示，该APP的导航栏通过运用不同颜色的按钮来代表其激活状态，使用户快速知道自己所处的位置。

在APP界面的制作过程中，根据彩色的特性，可以通过调整其色相、明度以及纯度之间的对比关系，或通过各色彩间面积的调和，从而搭配出色彩斑斓、变化无穷的APP UI画面效果。

总之，让自己的APP界面更好看一点，更漂亮一点，这样就会在视觉上更吸引用户，给APP带来更多的下载量。

2．图案的使用要点

在APP UI的图案设计过程中，每一个页面不要放置过多的内容，这样会让用户难以理解，操作也会显得更加烦琐。

例如，可以使用一些半透明效果的图案来作为播放器的控制栏，使用户在操作时也可以看到视频播放画面，如图1-38所示。