![Photoshop移动UI设计从入门到精通](https://wfqqreader-1252317822.image.myqcloud.com/cover/759/26943759/b_26943759.jpg)
1.3 熟悉界面:了解手机与平板的界面
APP UI是移动设备的操作系统,是硬件与用户进行人机交互的窗口。必须基于手机的物理特性和软件的应用特性进行合理的界面设计,因此,设计者首先应对移动设备的常用界面有所了解。
1.3.1 手机界面
就互联网入口而言,总是需要设备来接入网络的。目前国内流行的设备除了平板电脑,还有一种应用更广泛的设备——智能手机。
在智能手机中,通过结合“无线网络+APP应用”,可以实现很多意想不到的功能,这些都为智能手机的流行和APP UI设计的发展奠定了一定的基础。
常用的手机界面主要分为以下3类。
1. Android手机界面
采用Android操作系统的手机可以说是种类繁多,其屏幕尺寸和分辨率却有着很大的差异。如表1-1所示为Android智能手机常用的屏幕尺寸和分辨率。
表1-1 Android智能手机常用的屏幕尺寸和分辨率
![](https://epubservercos.yuewen.com/0CB4C8/15367249805332106/epubprivate/OEBPS/Images/figure_0028_0001.jpg?sign=1739289322-YXX4r7pGf6gksQylPFH4WkRrjTHCGClR-0-79b287436604084427f913c1ac40d63f)
续表
![](https://epubservercos.yuewen.com/0CB4C8/15367249805332106/epubprivate/OEBPS/Images/figure_0029_0001.jpg?sign=1739289322-y7EJnm25SbXmwLbCchWnE4rpjNyXbMNC-0-ef22d0c729e5c24b6125a84b6bae5784)
例如,小米手机就是国内Android系统手机的代表。其中,小米5(尊享版)的主屏尺寸为5.15英寸,主屏分辨率为1920像素×1080像素,搭载骁龙820处理器,提供4GB内存和128GB存储空间(UFS 2.0),3000mAh电池以及索尼1600万像素4轴防抖相机,小米5(尊享版)如图1-25所示。
![](https://epubservercos.yuewen.com/0CB4C8/15367249805332106/epubprivate/OEBPS/Images/figure_0029_0002.jpg?sign=1739289322-QiJMCnEJo21av9oIsKIkEjaa8YFxW7Pl-0-362f5af062da6032f9104603c54ae913)
图1-25 小米5(尊享版)
小米5在UI设计上也有不少创新,例如,在视屏通话的过程中可以添加趣的动画效果,如“么么哒”(一个飞吻)、“闪瞎了”“给你一球”等。
2.苹果手机界面
以iPhone 6s Plus为例,其外观颜色有金色、银色、深空灰、玫瑰金等,屏幕采用高强度的Ion-X玻璃,支持4K视频摄录。
iPhone 6s Plus的主屏分辨率为1920像素×1080像素,屏幕像素密度为401ppi。iPhone 6s Plus在屏幕设计上的最大升级是加入了Force Touch压力感应触控(即3D Touch技术),使触屏手机的操作性进一步扩展,如图1-26所示。
![](https://epubservercos.yuewen.com/0CB4C8/15367249805332106/epubprivate/OEBPS/Images/figure_0030_0001.jpg?sign=1739289322-aoH2e9ZRcHtDqj3EpehqqxtW4kYMUJoH-0-ad92c6b5eb13866aefdd2e16af6466e5)
图1-26 iPhone 6s Plus中的3D Touch技术
专家指点
3D Touch是一种屏幕压感技术,通过内置硬件和软件感受用户手指的力度,以实现不同层次的操作。用力按一个APP图标,会弹出一层半透明菜单,里面包含了该APP应用下的一些快捷操作。
3.微软手机界面
采用微软系统的手机除了具有特立独行的Metro用户界面,并搭配动态磁贴(Live Tiles)信息展示及告知系统等特色外,还有一大特色就是无缝连接各类应用的丰富“中心”(Hub),如图1-27所示。
![](https://epubservercos.yuewen.com/0CB4C8/15367249805332106/epubprivate/OEBPS/Images/figure_0031_0001.jpg?sign=1739289322-lKszYMNIlxzVcN5pUMc4FNRaFmlrOKNE-0-c3fcae0b27e22197385abbcf40504ed4)
图1-27 微软系统手机的“中心”(Hub)特色
1.3.2 平板电脑界面
平板电脑(Tablet Personal Computer,简称为“Tablet PC”“Flat PC”“Tablet”“Slates”)又被称为“便携式电脑”,是一种体积较小、方便携带的微型电脑,以触摸屏作为基本的输入设备,如图1-28所示。
![](https://epubservercos.yuewen.com/0CB4C8/15367249805332106/epubprivate/OEBPS/Images/figure_0031_0002.jpg?sign=1739289322-GPeadHw3Q47uqa1GM6bIaCDeTe4yg4rS-0-29a4524a20573b5d19b404ee655a3d43)
图1-28 平板电脑
平板电脑主要通过触摸屏进行操作,不需要主机、鼠标、键盘等配件,使用起来非常方便。作为一种小型、便捷的微型电脑,平板电脑受到了越来越多用户的喜爱。在2010—2015年这几年间,平板电脑的使用呈现爆发式增长,形成了一种新的产业格局。
如今,iPad在平板电脑市场中占据了主导地位,另外一部分市场就是Android平板电脑的“天下”了。华为、联想、小米、三星、戴尔、HTC等厂家均推出了Android平板电脑。如图1-29所示为华为M210.0平板电脑。
![](https://epubservercos.yuewen.com/0CB4C8/15367249805332106/epubprivate/OEBPS/Images/figure_0032_0001.jpg?sign=1739289322-tL2PqAhf1TjnAYCEsaGNa28UlDSilE7Y-0-1a0537bbbc67a642df043624b9eb98ae)
图1-29 华为M210.0平板电脑
专家指点
微软不甘落后,在2015年的世界移动通信大会(MWC 2015)上,首次展示了Windows 10统一平台战略的“代表作”:Windows 10通用应用(Windows 10 Universal App, UWP)平台,如图1-30所示。
![](https://epubservercos.yuewen.com/0CB4C8/15367249805332106/epubprivate/OEBPS/Images/figure_0032_0002.jpg?sign=1739289322-toeI6Xq5VmycZ4Dsbw91iQAikqgH09Py-0-1b584578bff1a690a5f155d87190bdc8)
图1-30 Windows 10通用应用平台
UWP平台使得任何一款应用都可以在所有安装了Windows 10操作系统的设备上运行,平板电脑、智能手机、笔记本电脑、台式机、Xbox家用电视游戏机、HoloLens 3D全息眼镜、Surface Hub巨屏触控产品以及Raspberry Pi 2迷你电脑等设备之间的连接不再有界限。
1.3.3 流程分析
APP UI设计的基本工作流程包括分析阶段、设计阶段、调研阶段、验证与改进阶段4个阶段,具体流程如图1-31所示。
![](https://epubservercos.yuewen.com/0CB4C8/15367249805332106/epubprivate/OEBPS/Images/figure_0033_0001.jpg?sign=1739289322-SsKV6iVj4exoitXZfu4HUwI2pXOklO5Y-0-365ef29edb0a41e6e6135a514005a17d)
图1-31 APP UI的设计流程
1.3.4 注意事项
在设计APP UI的过程中,有很多需要注意的使用禁忌,如色彩、图案等。