1.1 便捷生活：认识移动UI设计

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

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

1.1.1 连接工具和人的界面

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

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

如图1-1所示为热门的图像处理类应用“美图秀秀”APP的启动UI和主菜单UI。

1.1.2 连接用户和手机的界面

APP是可以安装手机上的软件，用以弥补原始系统的不足与实现个性化。

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

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

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

1.1.3 移动UI的设计特点

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

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

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

1.1.4 移动UI的设计基础

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

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

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

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

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

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

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

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

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

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