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平板电脑。

通过UWP平台，使得任何一款应用都可以在安装了Windows 10操作系统的设备上运行，如平板电脑、智能手机、笔记本电脑、台式机、Xbox家用电视游戏机、HoloLens 3D全息眼镜、Surface Hub巨屏触控产品和Raspberry Pi 2迷你电脑等设备之间的连接不再有界限。

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所示。