手机界面视觉设计易用性发展趋势

叶琪

摘要：探讨手机界面视觉设计易用性的的影响以及发展趋势。对比过去的手机界面视觉设计发展的流变史，分析手机界面视觉设计变化对易用性的改进。得到手机界面视觉设计易用性的发展趋势。该趋势可为未来手机界面视觉设计的易用性提供一定的参考。

关键词：界面设计;易用性;扁平化设计;视觉设计

中图分类号：J529

文献标识码：A

文章编号：1003-0069（2020）03-0154-03

引言

近年来的人机界面交互设计中，无论是开发者还是使用者，手机界面的易用性都被越来越频繁地提及。因此优化智能手机界面视觉设计的易用性，对于提升交互效率是非常有必要的。

易用性，来源于杰克布·尼尔森（Jokob;Nielsen）的著作《Usability;engineering》。[1]书中将易用性的决定性定义为三点：第一，有效性。指操作的正确度和完整度。第二，高效性。指操作的成本。第三，满意度。指用户主观感受。良好的易用性能够指数倍地提升用户体验的。

一、手机界面视觉设计发展的流变简史

谷歌的Android系统和苹果的IOS系统是当下智能手机的主流搭载系统，但不论是何种手机系统，它们的界面视觉设计的首要目标都是带给用户更好的用户体验，以及最大程度地提升界面的易用性。

（一）仿真拟物风格的诞生

2007年苹果发布了iPhone;OS系统，iPhone;OS的界面图标设计是具象化的运用。通过视觉符号上的特征提取，将具有意义的图标转化为风格统一、极其逼真的手机界面图标，直接唤起人们的相关记忆。这样的设计，使用户能够利用视觉图标识别每个图标所涵的意义[2]。尔后IOS4的推出，这一版界面设计明确定义了“skeuomorphic（仿真拟物风格）”[3]，设计团队为IOS4的界面图标设计大量的细节以增加图标的质感，大量的光影，玻璃等元素加入图标的视觉设计。用户在使用过程中可以感知的视觉元素更加丰富多样。仿真拟物风格一直延续到了IOS6，无论是大量模仿现实生活质感的原生应用背景，还是3D模式的地图软件。仿真拟物风格有助于用户群体联系真实世界中的相应元素，快速地理解操作方式。用户在使用这些图标时极大程度降低了误点的因素，提升了用户使用的易用性。但是随着仿真拟物风格步入极致，界面的视觉设计越来越逼近真实质感，过度的修饰反而削弱了功能的识别性，降低了产品的易用性。

（二）第一代扁平化风格

IOS6过渡到IOS7版本的手机界面从意识形态上对手机界面进行了重新定义，扁平化设计汲取了密斯·凡德罗的“less;is;more”的设计理念。IOS7完全舍弃了之前的仿真拟物风格，设计上去光影化去质感化，对所有的界面图标设计进行了颠覆式的重置[4]。原有的日历图标，是具象化翻页日历的一个仿真拟态设计，保留了顶部的红底搭配白色的星期提示，而改动后的日历图标则为一个纯白的日历图标面板，加以细体的红色星期文字置顶和黑色的细体日期。照片图标更是将原有的向日葵意象的仿真片完全更替为白底彩色的色圈叠片，如图1。

在扁平化的界面设计下，用户可以极大程度地剥离装饰因素的影响，相对于仿真拟物风格，每个元素的有效度得到提高。扁平化的界面设计更符合用户的读图习惯。色彩上，它拉开了图标与图标之间的色彩要素，通过色块的区分让用户的信息识别更准确、迅速。图形上，通过简洁的抽象形象，让改变后的图标变得有力、更易区分。但是完全剥离了细节的第一代扁平化视觉设计，随着APP井喷式的增长，仅能通过色彩和图形来区分图标的功能，在造成审美疲劳的同时，信息也发生了部分偏差，易用性大打折扣。这种局面下，第一代扁平化视觉设计走向了改革。

（三）扁平化设计的物理化补充——扁平化设计2.0

2014年Material;Design图2作为一套新的设计语言为后来的扁平化设计打开了一扇可能性的大门。这套由谷歌公司所研发的视觉设计语言，物理特性是其强调的一个重要的概念[5]。这套设计语言去除现实中的冗杂和随机性，保留理性机械的规则框架，用最原始的物理形态空间关系来贴近真实的生活体验，创造出一種全新的数字时代的视觉感官。Material;Design用纸张的型态来模拟电子屏幕的平面化切换，把界面中的元素以一张张白纸来比喻，通过阴影投射的面积、方向、深度来决定物件相对光源位置，模拟出现实当中的3D质感。视觉效果更合乎物理空间逻辑，使界面设计更自然易用。Material;Design具有更强的易用性，在界面设计上还是沿用了扁平化的视觉风格，将高度可用的视觉线索与之结合。在保留第一代扁平化界面视觉设计优点的同时，为扁平化界面视觉设计增添了许多细节，这些细节主要体现在微妙的渐变设计和细微的纹理编排上。这一套视觉系统具有高度的适用性，几乎能与任何概念结合起来使用，从而编排出一种更具有易用性的视觉设计。

强调现实世界的物理特性已然成为扁平化设计的一大出路，这一阶段的扁平化设计又被成为——扁平化2.0。扁平化2.0的通过强调物理化特征，削减了第一代扁平化设计近乎苛刻的去细节原则，为界面用户提供了一种简洁而精致的视觉效果。其操作的概念模型极其逼近现实世界，极富有效性和高效性，使用户在操作的过程中获得了无障碍无延迟的操作体验，。

二、手机界面易用性设计的趋势总结

如果说第一代扁平化设计是对仿真拟态风格的颠覆，扁平化2.0并非拟物风格的一次回归，它是扁平化设计的一次拟态的补充[6]。过去的仿真拟态风格是对现实实体的还原，扁平化2.0则是通过光源、空间、元素之间的景深变换来还原现实中的环境，强调的是一种趋于真实质感的物理化。随着5G时代的来临，用户在速度的体验上有了更进一步的提升，沉浸式体验与多种体验的发展齐头并进。用户追寻更快、更轻松的交互方式，在手机界面视觉设计的易用性方面又向设计师们发起了挑战。在经历了扁平化2.0之后，技术的发展决定了未来的界面视觉设计易用性的深度上走向何方。但不论是何种走向，可以肯定的是，扁平化视觉设计未来的发展趋势一定离不开拟态的深化与补充。

（一）界面设计中线转面的使用

在扁平化2.0界面设计的时代，更多的时候在按钮的设计上依从于扁平化设计的极简与功能主义，采用描边的按钮设计形式。随着拟态研究的深入，描边线的设计手法所凸出的扁平化概念渐渐显现出其设计理念的陈旧。

在IOS11更新APPStore的时候，就将“安装/更新”的线性按钮改为填充的面性按钮。IOS11的面性按钮较之IOS13版本的面性按钮少了很多细节，如图3。但仍能够从界面视觉设计中发现，IOS11之前是散点式的视觉焦点——既会被更新/下载的类目所吸引，也会被获取按钮所吸引。而更迭之后的界面视觉主要集中于更新/下载的类目上，用户基本上不会刻意去关注获取按钮。这样尝试性的改变所带来的易用性的提升，使得线转面这一研究逐步深入。

在IOS13的发布上可以见到线转面的影踪。新版的分段控件从IOS12的描边形式改为填充的表现手法，如图4。在IOS12版本中，选中与未选中模块的关系表现，利用了明度较低的蓝色与明度较高的浅灰色来表现出空间上的前后关系。分段控件整体倒圆角，两个模块的关系利用直线从中间切割区分。改版的IOS13中，弃用了蓝色模式的图底关系直接将图底使用灰色，文字使用黑色。IOS13依旧采用颜色明度来作出选中模块上的区分，沿用了深色为底，浅色在前的区分关系。在新版本中，分段控件的整体倒圆角弧度更圆，两个模块的关系也从原来的直线切割转变为两个倒圆角的矩形的重叠，选中模块在白色的面下还添加了细腻的阴影过渡。这样便巧妙地将选滑块边线转换成了两个块面的视觉特征。

线转面的运用可以提升拟态的深入是从以下几个方面达成的。色彩上，线性界面由于沿袭早期扁平化设计的理念，强调差异化的用色区别功能性。因为线无法营造空间维度，所以在色彩的选取上通常用与底图差异较大的色彩来拉开与底图的差距。从线到面的转换上，面的介入使界面在视觉上多出了一个物理化的拟态空间，即使是不运用差异较大的色彩作区分也能够释放前后的空间关系。颜色对比越大则越能对用户的视觉造成干扰，线转面克服了颜色对比强烈导致的視觉干扰，提升了用户的易用性。形态上，过去的线性界面设计强调区域的边界，而线框选出的形态被不经意强调了，用户在操作的过程中会受到视觉干扰。线转面的界面设计则是由原来的线的一度空间向二度空间转换，是对物理化拟态的又一次深化。清晰的概念模型让用户在使用时能跟专注于操作，界面的功能又能被准确地应用。更进一步的拟态化视觉设计又能让用户几乎察觉不到这样刻意为之的设计。越来越多的APP弃用描边按钮，取而代之的则是一种面型的按钮设计。近年来，通过增加界面设计中的面的方式成为丰富界面拟态化的一种趋势。

（二）依托于Z轴的设计理念的界面交互设计虚拟现实（Virtual;Reality，简称VR）作为一种新兴技术，它借

由给使用者提供听觉、视觉等感官，模拟一个三维空间的虚拟环境。如今VR技术在智能手机上的搭载更是研究的大势所趋，同时它也标志着沉浸式3D内容时代的开启。VR所构筑的虚拟屏幕其具备极强的空间视觉，这为Z轴的设计提供了层次结构的概念模型。Z轴在界面设计的应用最早出现在2017年Material;Design界面视觉设计中引入的数学中Z轴的概念，如图5。传统的扁平化风格仅有X轴和Y轴两个方向，界面设计师通过设置目标元素的Z轴值可以抬升元素的空间高度。这相当于以一种平面化的方法在屏幕中构建了物理世界才会拥有的深度。

VR通过创建逼真的虚拟环境为教育、消费、娱乐等产业带来了无限可能。用户在使用VR进行交互时，通过Z轴建立的虚拟交互模型便能达到良好的交互体验。Z轴在建立体体块感的设计手法有助于元素层叠的堆放。而动态的交互可以完整地释放Z轴构建的空间感，让用户更能够沉浸其中，如图6。VR按键交互就出现过以Z轴为概念模型的设计，用户通过点击虚拟的按键，达到一种逼真的具有空间深度的交互体验。Z轴本身具有深度，深度可以用于表达元素间的区别以及在立体空间中的层次结构，对深度的感知力则与空间的拟态有着密切的联系。并且Z轴的空间关系让交互从视觉上变得更易感知，所以Z轴的加入一方面能够对拟态空间的构建起到一定提升。另一方面，利用Z轴的深度关系则能直接作用于重要和次要信息的排布，对信息的排布也能起到关键的作用。Facebook360作为一款一站式的沉浸体验手机APP，旨在将其平台上的360°照片以及视频更加沉浸化地提供给用户。用户可以通过浏览所有关注的有人的照片和视频，并且探索更多的全景内容，如图7。这款APP的使用界面便是利用了Z轴的概念。用户通过上下层叠的照片进行浏览赛选，达到一种虚拟的超现实体验，而上下层叠的照片正是利用了Z轴所创建的深度来进行演绎的。这是由于Z轴的概念模型完全依托于人们的物理世界的认知，通过动态的呈现在虚拟的界面中以一种视觉的方式存续着。及时的操作反馈与全面的操作可控性，最大程度地联系到人们的几何空间认知，这样能够极大提高界面的易用性。

结论

从第一代iPhone;OS系统的仿真拟物风格，到第一代扁平化界面视觉设计。界面设计经历了从具象再到抽象的过程。再延续到扁平化2.0，抽象化之中再理性地融入物理性。随着技术的不断发展，手机的界面视觉设计还会不断地发展，视觉的进步从未止步。就近年来的发展，手机界面视觉易用性的设计的线转面、Z轴设计会继续深化应用。未来屏幕化的交互会占据人们越来越多的生活领域，设计师对界面设计易用性的升级不会停止，这种对于虚拟空间的物理空间的探索还会一直持续下去。

参考文献

[1][美]TofflerA：第三次浪潮[M].北京：新华出版社.1996.

[2]郝颖婕，郁舒兰.基于iOS系统手机APP界面设计研究[J].家具与室内装饰，2016（4）：70-71.

[3]王怡，赵钢.移动交互界面拟物化设计解读[J].包装工程，2013（18）：66-69.

[4]崔天剑，徐碧珺.大数据时代扁平化设计趋势研究[J].创意与设计，2014（3）：16-20.

[5]吴政兴，朱晓菊.Material;Design的设计语言与动效设计探析[J].艺术与设计（理论），2018（5）：70-72.

[6]曹瑾，肖狄虎.扁平化设计趋势下的拟物化设计探析[J].艺术与设计（理论），2014（4）：105-107.