下载掌阅APP，畅读海量书库
立即打开
设计就是把一种计划、规划、设想通过视觉的形式传达出来的行为过程。简单地说，设计就是一种创造行为，是一种解决问题的过程，其区别于其他艺术类的主要特征之一就是设计更具有独创性。
APP UI设计的相关知识，包括UI设计、APP UI的概念和特点、手机的界面特色以及不同APP UI的视觉效果等，只有认识并且了解APP UI设计的基本知识，才能更好地设计出优秀的APP产品。
UI是指用户界面，由英文User Interface翻译而来，是User Interface的缩写，概括成一句话就是——它是人和工具之间的界面。这个界面实际上体现在生活中的每一个环节，例如，操作电脑时鼠标与手就是这个界面，吃饭时筷子和饭碗就是这个界面，在景区旅游时路边的线路导览图就是这个界面。
在设计领域中，UI可以分成硬件界面和软件界面两个大类。本书主要讲述的是软件界面，介于用户与平板电脑、手机之间的一种移动界面，也可以称之为特殊的或者是狭义的UI设计。
如图1-1所示是热门的图像处理类应用软件“美图秀秀”APP的启动界面和主菜单界面。
图1-1 “美图秀秀”APP的启动界面和主界面
APP是可以安装在手机上的软件，完善原始系统的不足，体现个性化。
APP UI是指移动APP的人机交互、操作逻辑、界面美观的整体设计。好的APP UI设计可以提升产品的个性和品位，为用户带来舒适、简单、自由的使用体验，同时也可以体现出APP产品的基本定位和特色。
图1-2所示为手机APP UI展示效果。
图1-2 手机APP UI展示
图1-3所示为平板电脑中的游戏APP UI展示效果。
图1-3 游戏APP UI展示
APP UI将各类手机应用和UI设计结合起来，使其成为一个整体，且具备小巧轻便、通信便捷的特点。
小巧轻便：APP可以内嵌到各种智能手机中，用户可以随身携带，随时随地打开这些APP，满足某些需求。另外，移动互联网的优势使用户可以通过各种APP快速沟通并获得资讯。图1-4所示为“百度糯米”APP的界面，用户通过手机即可获得各种吃喝玩乐的生活资讯。
图1-4 “百度糯米”APP的界面
通信便捷：移动APP使人与人之间的沟通变得更加方便，可以跨通信运营商、跨操作系统平台，通过无线网络快速发送免费语音短信、视频、图片和文字。图1-5所示为“微信”APP的“摇一摇”界面，用户可以通过“摇一摇”“搜索号码”“附近的人”和扫二维码等方式添加好友和关注公众平台，同时可以将内容分享给好友或分享到朋友圈。
图1-5 “微信”APP的“摇一摇”界面
随着科技的发展，现在智能手机的功能越来越多，而且越来越强大，甚至可以和计算机相媲美。
想要设计出优秀的APP用户界面，用户还需要熟悉智能手机的界面构造。手机的主要界面可分为几个标准的信息区域（主要针对按键手机，而触屏手机相对灵活）：状态栏、标题区、功能操作区和公共导航区等。
图1-6所示为“工商银行手机银行”APP的UI构成。
图1-6 手机界面构成的基本单位
状态栏：用于显示手机目前的运行状态及事件的区域，主要包括应用通知、手机状态、网络信号强度、运营商名称、电池电量、未处理事件及数量，以及时间等要素。在APP UI设计过程中，状态栏并不是必须存在的元素，用户可依照交互需求进行取舍。
标题区：主要用于放置APP的Logo、名称、版本及相关图文信息。
功能操作区：它是APP应用的核心部分，也是手机版面上面积最大的区域，通常包含有列表（list）、焦点（highlight）、滚动条（scroalbar）和图标（icon）等多种不同元素。在各个APP内部，不同层级的用户界面包含的元素可以相同，也可以不同，用户可以根据实际情况进行合理的搭配运用，如图1-7所示。
图1-7 同一个APP中不同层级的用户界面
导航栏：也称之为公共导航区或软键盘区，它是对APP的主要操作进行宏观操控的区域，可以出现在该APP的任何界面中，方便用户进行切换操作。
APP运行在手机操作系统的软件环境中，其UI设计应该要符合这个应用平台的整体风格，这样有利于产品外观的整合。
手机界面效果的规范性包括以下两个方面，如图1-8所示。
图1-8 手机界面效果的规范性
手机界面的整体性和一致性是基于手机系统视觉效果的和谐统一而考虑的，而手机界面效果的个性化是基于软件本身的特征和用途而考虑的。界面效果的个性化包括以下几个方面，如图1-9所示。
图1-9 手机界面效果的个性化
做得好的APP UI设计具有一定的视觉效果，可以直观、生动、形象地向用户展示信息，从而简明便捷地让用户产生审美想象。
1. 简约明快的视觉效果
简约明快型的APP UI设计追求的是空间的实用性和灵活性，可以让用户感受到简洁明快的时代感和纯抽象的美。
在视觉效果上，应尽量突出个性和美感，如图1-10所示。
图1-10 简约明快型APP界面
简约明快型的APP UI设计更适合色彩支持数量较少的彩屏手机，其主要特点如下。
通过组合各种色块和线条，使移动界面更加简约大气，如图1-11所示。
图1-11 各种色块和线条组合的APP界面
通过点、线、面等基本形状构成的元素，再加上纯净的色彩搭配，使界面更加整齐有条理，给用户带来赏心悦目的感觉，如图1-12所示。
图1-12 纯净的色彩搭配组成的APP UI背景
2. 趣味型的视觉效果
趣味性是指某件事或者物的内容能使人感到愉快，能引起人的兴趣的特性。
在APP UI设计中，趣味性主要是指通过一种活泼的版面视觉语言，使界面具备亲和力、视觉魅力和情感魅力，让用户在新奇、振奋的情绪下深深地被界面中展示的内容所吸引。图1-13所示为趣味与独创型界面。
图1-13 趣味与独创型APP界面
3. 高贵华丽型的视觉效果
高贵华丽型的APP UI设计，主要是通过运用饱和的色彩和华丽的质感来塑造超酷、超炫的视觉感受，整体营造出一种华丽、高贵、温馨的感觉。图1-14所示为高贵华丽型的APP界面。
图1-14 高贵华丽型APP界面
由于高贵华丽型的APP界面设计需要用到很多的色彩和各类设计元素，因此更适合色彩支持数量较多的彩屏手机。