从安卓4.0到8.0探析手机界面的视觉设计趋势

摘要：移动互联网到智能时代，Google发布Android4.0到8.0以来，它占据了很大的市场份额，从Android系统更新的设计规范中解析视觉设计的一些设计元素和设计手法，并分析设计趋势，包含新字体更新、多图显示画中画和多任务切换、栅格设计和响应式设计、智能生物识别、深度个性化、UI动效和视频趋势，从而帮助提升用户体验。

关键词：手机界面；安卓；视觉设计；视觉趋势

引言

“Android 的规模实在太大了，不由得你忽视， 未来 Android 将会成为主角。” SearchMan 的 CEO Niren Hiro 在2011年表示。Android是由Google公司和開放手机联盟领导及开发，基于Linux的自由及开放源代码的操作系统，主要使用于智能手机和平板电脑等升级移动设备。① 从Google2011年发布Android4.0以来使双核大屏手机一度处于热卖中，至2013年9月24日，安卓系统五周岁，其设备数量已经超过了10亿台。2014年10月15日，Android 5.0 系统开始使用Material Design设计风格。2015年5月28日新系统的整体设计风格依然保持扁平化的（棉花糖），2016年8月22日发布了（牛轧糖），2017 年 8 月 21 日升级（奥利奥）。

近年很多手机厂商喜欢通过安卓系统上定制化元素，寻求差异化。原生版的界面视觉设计再度成为视觉焦点。大量的APP应用及众多手机厂商的定制蜕变，即如何处理界面的视觉设计将成为界面视觉设计师探究的重中之重。

Android4.0到8.0的更新就像一个制造精良的工具，第一次操作使用时，就能凭借直觉捕获到最重要的信息和最重要的功能，即使是复杂的任务也会为人量身打造，不受任何年龄和文化的局限。这就是安卓系统精彩和杰出的视觉设计，它的视觉设计将字体、图片、图标、排版、色彩完美地融合，将信息第一时间准确地传递给你，让你感觉那么自然，那么舒适而又贴切，同时又别具一格。

1. 现代的字体选择

Android的视觉设计灵活运用大小，空间，节奏，底层网格等排版方式。构建标准化的文字字体、字号、字间距和字色帮助用户创建视觉层次结构，进而快速愉悦地获取信息。为了更好支持排版，Android采用了一种新的字体：Roboto，专门为高分辨率屏幕下的UI而设② 。这款字体设计属于无衬线字体，简洁、现代、时尚，字体呈细长型，比较秀气，平和，带有几分亲和力与情感，适合在手机中的阅读和识别，也适合不同用户群体的使用。

用户可以在设置app中选择系统级的文本缩放，根据浏览器的宽度自适应。Roboto跟随字号的缩放时依然显得简洁而清晰，并适合老年人大字号的需求。8.0 Android O中谷歌增加了对系统字体的支持，开发者可以自行更改字体样式，让用户有了更多字体的选择。

2. 大量的图片显示——多图功能画中画

读图时代的到来，使用图片来解释想法和吸引眼球。图片的展示获得人们更多的注意力，比文字有效率。当Instagram 普及时，拍照已经成为人们记录生活和分享快乐的重要组成部分，利用图片成为人们联系的名片，既可以快速识别，也添加了使用时的趣味性、灵动感与亲和力。手机界面中的色彩也变得丰富而活跃。著名设计师 Dustin Curtis 认为照片除了艺术表达和记录生活这两个用途外，用作交流方式是更重要的用法。图片可以刺激我们的眼球，并激发我们的求知欲和触动麻木的神经。

在Android4.0到8.0系统中个人联系方式中就采用了富有情感的头像，不仅个性化了联系名片，美化了视觉，信息内容的本身也得到了优化，提供了快速识别和更多无法用语言快速描述的个人信息。比如兴趣爱好，穿着打扮，情感特征等等个人信息。在微信和微博等社区软件中，照片提供了更多个人信息，可以告诉我们在什么地点，什么时间，和谁在一起，正在做什么，甚至涵盖更多内容。 彩色微笑的图片能让人产生愉悦的心情及与人互动交流的欲望，生活在社会化的环境中读图似乎是不可避免的。

Android O在8.0中，分屏画中画功能得到强化，更加流畅，悬浮窗可随意拖动位置，然后在主屏幕中继续你的工作。画中画不仅会让我们想起7.0版本推出的分屏多任务。在安卓8.0中，谷歌着重强调了多任务流畅度的重要性。这一突破性特性可能会改变用户使用手机的习惯。

多任务和多屏幕的切换成为界面重要趋势之一，为app的界面切换或者多功能展示提供了广阔的前景。

3. 信息的关联性处理——栅格设计

界面将特定的视觉信息要素，根据主题表达的需求在特定的页面上进行的一种编辑和安排。格式塔心理学派通过对视觉感知的生理研究，提出了一系列视感知规律，其中包含了“图底”这个核心概念，以及“简明原则”“接近原则”“相似原则”“闭合原则”等视感知特性。③

Android4.0到8.0的信息编排设计也是基于格式塔原理的栅格设计，将信息重新梳理和规划，让用户阅读更顺畅，并提高信息传达的速度与准确度。栅格是一种利用视觉来组织事物的标准方式，网页栅格系统的定义：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。在Android界面设计中，设计师根据黄金栅格标准化页面。不仅让网页的信息呈现更加美观易读，具有可用性。而且，对于前端开发来说，网页将更加的灵活与规范。通过栅格来排布字母和文字，使页面变得更加和谐，手机界面与人的沟通也变得更加便捷。页面和页面元素之间的一致性有助于一个有凝聚力的品牌和用户体验，所以在Android系统中相同的版式——垂直滚动形成的和谐垂直节奏和相同的间距（包括头部、脚部、导航、信息块、标题与内容之间）。如通常把48dp作为可触摸的UI元件的标准，每个UI元素之间的间距是8pd，形成了一套标准的设计规范，这样一个干净的和一致的页面结构，大大加强了用户在使用界面时的易用性和可预测性。

设计师的创意越来越强了，即使是栅格也能玩出新花样。通过自定义创造出实验性的栅格系统，设计师在此基础上能够创造出更加灵活原创的布局，创造性地使用各种视觉元素。不过，实验性的栅格系统通常都需要多次迭代和测试，确保可用性。

4. 明亮与渐变色

色彩是设计师手上最强大的工具之一。色彩能够吸引用户的注意力，影响用户的情绪和行为。对于移动端应用而言，色彩是用户获取到的第一信息，鲜艳的色彩对于用户的影响是巨大而明显的。

将色彩作为功能性元素。色彩并不仅仅具有美学特征，而且也能塑造功能和体验。安卓界面设计师使用色彩来区分不同类型的按鈕和通知。色彩的使用通常需要结合色彩心理学和配色规则来使用，而时下流行的明亮的色彩，更是要注意。

5. 多面板布局和响应式设计

Android3.0之后重要的改进就是增强了适配性，平面化的图形便于横向拉伸，分辨率增大时，顶部可以由两栏合并为一栏，手机和平板可以使用同一个程序，所以应用程序将更多的考虑高分辨率的显示效果。有效地利用平板电脑的屏幕空间，扁平化层级结构，简化导航。④扁平化层级结构不仅能够减轻用户对导航层级的负担，也让用户更快达到目的，操作更简洁。

近年界面设计都符合响应式设计的趋势。响应式设计是根据移动端的不同宽度自动适应。响应式设计能确保用户无论是在行动装置，或者在 PC 上都能按你的意愿浏览内容。无论你的终端是什么，都可以舒适地阅读到自适应的信息。即使是不同的像素密度 （DPI），从Android4.0提供的资源也使应用的所有设备上都看起来很棒。响应式设计赋予了成千上万的手机、平板电脑和其他移动设备灵活的编排和自适应，将信息从大屏幕到小屏幕进行了优雅的转化。

安卓7.0更新主要变化在于取消程序抽屉图标，改为桌面上滑拉出全部程序列表。同时桌面的谷歌搜索框也换成了悬浮的“G”拉环，点击可快速搜索。⑤

6. 多主题性——个性化

正如Android设计规范中所讲“人们总是喜欢增加个性的东西，它们让人感觉更有亲切感及控制感。提供实用、漂亮、有趣、可自定义，且不妨碍主要任务的默认设置。”

Android运用图片作为背景，增加个性化特征。全景视图和卡片式视图成为核心体验的一部分。

背景图片位于全景应用的最底层，通常是一张全景图，它可能是应用程序最直观的部分。由它来给出类似于杂志的体验。交互功能不仅做到了视觉显性化，样式也更趋于统一化。

从安卓系统诞生起就一直存在的一项元老级特性，在安卓7.0上被终结。应用抽屉，不少用户也把它视作是安卓与iOS系统的显著差异之一。

深度个性化个性化的用户体验将会成为2018-2019年的热门趋势。定制化的用户界面UI界面中的个性化设计不仅仅是关乎内容，每个用户都是非常不同的，不仅仅是偏好不同，用户的视力状况、需求、爱好、文化背景都有着明显的差异。个性化的UI界面应该单独适配每一个用户，借助内置的传感器和其他的辅助信息，来实现更加深度定制的UI界面。由于移动端设备通常会随着用户的位置改变而变化，基于不同的地理位置信息，而为用户提供不同的内容并不难实现，甚至成为用户体验优化的一个固定方向。以星巴克为代表的服务商已经在他们的APP当中内置了这样的功能，用户能在不同的门店享受到不同的优惠服务。

7. 文字型多彩图标与表情

另外，一些图标和操作也省略了复杂的文字解说，而采用了简洁的图形设计，这种单色平面化的符号——视觉隐喻也让人一目了然。在Android4.0 app设计准则中，特别强调为Android设计纯粹的Android app。在Twitter， Facebook， 以及Pinterest，它们的App体验都比移动浏览版的页面要好多了。用户会越来越多的选择你的App而不是移动浏览版。多样而统一的APP应用图标无疑成为重要的识别标志。屏幕中小小的一寸之地，却为复杂的操作、状态和APP提供了一个快速而直观的表现形式。在Android4.0中采用了独特的挖版，三维，且带有从上而下的透视和光感，打破了苹果系统中的圆角方形，而更显灵动和深度。

新款 emoji 表情：斗图再也不单调。emoji斗图成为时下网民常用的方式，而 iOS 11 和安卓 8.0 都新增了大量的emoji新款表情。安卓 8.0 不仅新增了超过 60 个全新设计的表情，还抛弃了以往 " 布丁 " 的外形设计，采用拟人化和更为夸张的风格。

8. 视觉的平面化——栅格风正在8.0中演绎

以Windows8为代表的界面将这种简洁而直观的设计风格推向主流。色彩方格构成，细线分割，形成强烈的对比，容易引起用户的视觉兴趣，进而继续探索下去。在Android系统的视觉设计，放弃了原有的设计风格，整体正在向平面化、格子风的设计方向进化。明显的蓝色块，视觉的平面化处理界面显得清晰而了然，似乎与Windows 8系统中的平面风格有了些许联系。简约而时尚的平面风格强化了Android统一的品牌感。简洁风格俨然成为一种设计趋势，复杂的元素会增加用户的识别成本，过多的信息容易造成审美和使用的疲劳。简而言之Android的界面风格是平面、中性和简洁。

Android 8.0比Android 7.0在人工智能等方面有了更大的提升。如果说安卓7.0注重系统上的自身强化，以加强流畅性、稳定性为目的。那么，安卓8.0在保证原有基础上，又加强了对系统“大脑”等方面的强化。⑥Google表示，Android Oreo能让你的手机获得超能力：更快、更强、更智能。

9. 多样的UI动效及视频内容的大范围普及

从静态内容到动态和视频。在动效设计这件事情上，你会发现8.0版本比7.0版本越加成熟，融入交互的动效越来越圆融，用户体验引人入胜的APP也越来越多了。交互动效越来越多的使用在ui设计中，它对于产品设计的作用包含：以提高可用性为前提，提升体验为目的，传递层级和状态信息，做到隐形的动效。它的几点特性：快速且流畅、恰到好处的反馈、提升操作感受、提供良好的视觉效果。

根据HubSpot的数据，作为营销和展示的视频内容和视频元素在过去的2017年当中有明显的上升，平均每周有超过78%的用户在线看视频，而超过55%的用户每天都在看视频。视频内容正在成为大势所趋。

10.现实增强技术

和对话式界面和语音交互一样，现实增强技术为用户提供了全新的、可用的交互方式。2018年将会是显示增强技术爆发式增长的一年，每个用户的手机镜头都会成为和虚拟世界沟通的桥梁。

更容易实现的AR体验目前AR类应用越来越多， Google等大型企业也都推出了AR设计的规范和相应的素材，让设计师和开发者可以设计出体验更好的AR类APP。娱乐用AR以Pokemon Go 为代表的AR类应用，让大家看到了AR在娱乐领域的巨大潜力。它不仅可以用作游戏，还能集成在各种应用中，提供更具吸引力的用户体验。用AR解决现实问题AR技术从诞生之日起就是为了应对具体问题而存在的，诸如 AR Measure 这样的应用就是用来帮助用户测量各种真实物体的尺寸而生的。

结语

界面视觉设计随着技术的突飞猛进也在不断更新，特别是巨大移动端市场，更是众多视觉设计师需要研究的课题。从Android4.0到8.0的系统风格解析手机界面视觉设计是为了掌握移动端的最新设计资讯和前沿的研究方向，抛砖引玉。不仅在设计中感知规律并能灵活运用到界面设计中去，更要做到秉承“以用户为中心的设计”理念，应用“以目标为导向的设计”方法，进行互联网产品的视觉设计。

参考文献：

[1]（美）雷迪·欧格. 信息设计[M]. 郭瑽， 译. 北京： 译林出版社， 2009.

[2]（美）库尔特·考夫卡. 格式塔心理学原理[M]. 北京： 北京大学出版社， 2010.

[3]（美）诺曼·唐纳德·A. 设计心理学[M]. 小柯， 译. 北京：中信出版社， 2015.

[4]（美）鲁道夫·阿恩海姆.艺术与视知觉 [M].成都：四川人民出版社，1998.

注释：

①维基百科https：//zh.wikipedia.org/

②安卓设计风格规范

③格式塔理论在网页界面设计中的运用 王慧；-《艺术教育》-2007-06-01

④移动设备应用軟件交互界面设计 王鹏飞-《昆明理工大学硕士论文》2013-04

⑤Nexus 2016安卓7.0新桌面Launcher亮相 http：//app.techweb.com.cn/android/2016-08-03/2369400.shtml

⑥Android 8.0正式发布，盘点“奥利奥”九大新功能http：//www.vccoo.com/v/mz5625

基金项目：2014 年教育厅课题《基于移动端的网络界面视觉设计研究》（Y201432690）

作者简介：黄颖宜（1977—），女，浙江人，清华大学美术学院硕士，中国计量大学讲师，主要研究方向为视觉传达设计、互联网环境下的UI界面设计和量化设计。