手机UI设计风格发展及趋势研究

金健浩 李立

摘 要：随着电子科技的日新月异，手机在我们日常生活中越来越重要，从最初只满足单一的通信功能演变到当前智能手机，其本身的意义及价值不言而喻。它的发展也伴随着UI设计风格的不断变化，更注重用户偏好及习惯。本文将通过分析手机UI设计风格发展的历程及不同风格的优缺点，对未来手机UI设计风格发展趋势做一些展望。

关键词：UI设计;交互设计;扁平化;拟物化;后扁平化

中图分类号：TB472文献标识码：A文章编号：2096-0905（2020）23-00-02

伴随着智能手机的普及，手机外观设计越来越趋于同质化，UI界面的设计已成为当今手机软实力的一种重要体现。UI设计风格也由拟物化风格为主导转变为如今扁平化风格为主导，通过对比分析拟物化风格与扁平化风格，可以使我们更加深刻的理解两种风格之间的联系与区别，对未来UI设计风格的发展提供相应的理论参考与指导意见。

一、手机UI设计的发展历程

提及智能手机UI设计的发展，我们可以追溯到20世纪末摩托罗拉天拓手机的发布，它将UI设计划分为两个方向，一种为sysbian系统为主导的手机九宫格界面，另一种为window mobile系统为主导类似PC风格的界面;而智能手机UI设计的转折点则是在2007年ios1.0系统的推出，将拟物化的风格的图标与触摸电容屏的结合，颠覆了人们对手机界面的认知。

从ios1到ios6这六年时间里，拟物化成为手机UI设计的主流设计风格，通过模拟现实生活中的场景、声音、外观造型，利用光感、空间、肌理、材质、阴影的表现，形象地表达出手机界面每个图标的不同功能用途，拟物化的图标降低用户的学习成本，也给人一种亲切、华丽精致的感觉。

而从ios7开始，手机UI设计转变为扁平化设计风格，通过六代的系统迭代，已经习惯和培养了操作界面的用户习惯，此时的UI设计抛弃了过度的装饰、立体效果，使设计上趋于简化，视觉上更加简洁清晰明了，减少用户的视觉负担，使用户更加注重在内容本身上。这一转变也符合现代主义所追捧的设计哲学“less is more”。

二、扁平化风格与拟物化风格对比分析

（一）从开发设计分析

拟物化到扁平化的转变实际上是手机UI设计发展的必然结果。拟物化风格更注重对现实具象物品的刻画，注重细节、光影、纹理、质感的再现，在设计上缺乏艺术的提炼，久而久之会使用户产生审美疲劳，其次精细刻画的图标运用了大量的图层和装饰，占用了更多的手机空间，使其加载速度和手机反应速度缓慢[1]。扁平化风格顺应了设计开发的发展，为长久的拟物化风格增添抽象简约的艺术美感，提高了对设计师提炼图标符号以及色彩搭配运用的能力，降低了开发技术难度，节省手机空间资源。

（二）交互体验对比分析

在交互体验上，拟物化风格相比扁平化风格更具有表现力。拟物化风格模拟现实生活物品使用的体验和逻辑，让用户更加直观地联想到生活中的使用方式，降低用户的使用难度。例如ios6中的iBook软件，利用木头的纹理及阴影模仿出真实书架的质感，在书本阅读过程中也模拟出真实纸张的颗粒质感和翻页声音及操作，让用户直观地联想到现实生活中的场景，这样的设计给用户带来人性化的体贴（如图一）。对于扁平化设计而言，减少细腻的细节设计，占用较少的系统运行资源，让用户使用更加流畅，摒弃材质、特效的应用利于用户更加沉浸式阅读内容[2]。

（三）视觉效果对比分析

从视觉效果上看，拟物化设计具有更高识别度，光影三维立体感的图标可以便于用户习惯的引导与养成。而扁平化设计在空间表达上弱于拟物化，但在色彩搭配上、图标统一性上、内容架构层级框架上都优越于拟物化。通过不同的色块来划分不同的功能，减少线条、边框的使用，降低视觉干扰。用色块的明暗关系来划分空间感，暗色背景下亮色就具有前景感，在亮色背景下深色就具有前景感，空间的表达使用户对内容层级的划分更加清晰，减少用户的视觉疲劳，给人一种一目了然的感觉[3]。

三、未来手机UI设计风格发展趋势分析

纵观当下我们常用的APP软件，我们可以直观清晰的发现这些互联网公司的产品UI已经不再拘泥于单纯的扁平化风格，每个产品都通过各自的品牌个性对扁平化进行细微的发展改进，因此可以推断出未来UI设计风格将呈现多元化发展的趋势。

（一）空间感增强

未来UI设计风格还将以扁平化风格为主导，对于空间感的设计将会增强，在空间感表达上我们可以融合拟物化风格阴影、质感等设计元素，其目的使扁平的像素具备海拔高度，对其同一页面中不同重要度的内容进行合理化的区分。例如卡片、按钮的设计，通过增加空间感的投影，使其具备悬浮感，从视觉上让用户感受到层级的不同划分，卡片及按钮是可点击、可操作的、重要与其他扁平内容的，对用户操作及阅读也是一种引导，降低用户在接收信息过程中的视觉干扰（如图二）。

（二）三维动效增多

长期的扁平化风格也让界面越来越缺乏趣味性，近观近些年各种APP的引导页及大型电商的节日活动页，不难发现未来UI设计的趋势是增加更多立体三维效果的动效表达。随着C4D、HTML5在UI设计中的普及，使三维立体模型与动效交互的实现变得轻松，据统计适当地加入三维动效可以提升用户的交互体验感，让用户产生与二维效果不同的新鲜感，更好地参与到产品的体验中，增加用户的参与感[4]。

（三）APP品牌调性的融入

当前UI的设计也趋势也越来越注重品牌调性的提升，不同定位的APP在其产品的设计上也融入不同的设计元素，让用户对其产品有一定的识别度。从色彩搭配上来看，针对年轻用户为主的APP未来更多的会使用渐变色，这种渐变色的搭配并非与拟物化时期一样为了凸显质感，而是为了视觉美感、产品本身空间所做的大撞色渐变，这样的色彩搭配运用为产品营造活泼、年轻、时尚的印象起到質感重要的作用（如图三）。从排版上看，未来深入阅读类、金融工具类APP产品，将向大标题、大字体、大间距排版上发展，放大文字字号和间距的处理，可以使页面更简洁，减少用户阅读、使用的视觉干扰，降低用户的错误操作，营造安静、安全的界面印象，从而传递出产品的品牌调性（如图四）。

四、结束语

我们当下是在一个扁平化UI的时代，认为拟物化时代已经逝去，但我们也可以从不同角度看到拟物化的影子，看到拟物化与扁平化各自的优点。虽然未来UI设计发展充满了许多不确定因素，但我们一定要做到形式服从内容，不盲目追随潮流趋势，让设计为解决用户需求而存在。

参考文献：

[1]孙骁莉，贺鹏.UI设计中的扁平化与拟物化视觉传达解析[J].艺术科技，2019（07）：94-95.

[2]梁亮.UI设计中图标设计探索[J].美与时代，2016（06）：76-77.

[3]张剑.扁平化UI中的空间表达[J].艺术科技，2014（01）：61-63.

[4]胡臻靖.UI设计中“后”扁平化风格的探讨[J].设计，2019（07）：34-36.