移动端界面设计趋势研究

    刘寒韵

    摘要：现在，移动端无疑已经是真正意义上的“第一屏”，人们每天都花一定时间在那些手机应用上。那么，某些应用在功能99%都相同的情况下，如何获得用户的青睐呢？这便关乎更高层次的追求一一设计。文章结合艺术设计理论和认知心理学，从移动端应用界面设计的各个角度，结合最新案例分析当今设计趋势，发现规律并对未来界面设计进行展望。

    关键词：界面设计 APP 设计趋势

    引言

    界面设计的演变正在进行，目前，一种新的潮流，不同于扁平化设计，也不同于极简设计，进化成新的移动端设计趋势。在上一流行阶段中，界面设计对效果、写实化彻底舍弃，形成了多彩的色块划分和极致的扁平化，而如今效果又被悄无声息地重新使用起来。

    几大知名软件的新版本中，前沿的设计师们似乎开始推动新的浪潮，将界面设计的趋势推向了一个新的方向，一些创新之处就在它们的移动端产品中可以窥见—二。

    随着iPhone7一起发布的iOS 10正式版的人机界面设计指南，出现了这样的改变：最重要的设计原则的部分，仍然是从前的黄金三法则一一清晰、顺从、深度。但是其中有了一个非常细微的变化，就是从前一直位于第二原则的清晰，这次变为第一位。这样的改变，也许是为了加大提升用户体验的力度，清晰原则应该会发展为今后界面设计之重点。

    一、移动端界面设计趋势分析

    （一）加大加粗的标题

    使用较大而且显眼的字体可吸引用户的注意力和视线，使得用户在手机应用上花费的时间更长，争取到了时间，那么争取用户就成功了一半。用户会因为良好的设计层次而产生舒适感，因此应当增大重要元素的比重，使用大字体显示。另外，合适的大字体会使界面更加有气质、有特色，使用户受到优雅独特的页面的吸引，这就是留住用户的手段之一。有时，一个功能并不出色的APP，会因为出色的设计而吸引大量追随者。

    如果标题和正文字体都更大，两者之间大小差距也更大，整体页面的信息密度就会降低，对比更明显，同时字体变大阅读效率也会有所提高。

    （二）轻微质感

    如同时尚界的复古与轮回，界面设计的潮流也正在回溯并加以新时代的新元素。之前，写实化的质感元素被设计师彻底抛弃，扁平化开始风靡。现在，轻微质感中的投影和渐变又逐渐兴起，在扁平设计的基础上，视觉上给人带来一种不同的新鲜感，可以发现，国内火爆的APP如淘宝、美颜相机、新浪微博等都在icon中加入了轻微的渐变。

    1.投影

    一种新的投影方式叫作彩色投影，投影的颜色会随着整体背景的色系而改变，这样的好处是可以把投影融进整体的画面中，同时也可以让界面更突出和饱满。不仅使得界面更加生动与丰富，而且投影与背景前景相容，增强了界面的整体性、一致性。

    （如图1）右边是蘑菇街改版后首页，与左边的旧版相比，新版的轮播banner增加了彩色投影的样式，因为背景使用了蓝绿色，bannet的投影也使用了相同的色系，与背景的颜色相互映衬。这种阴影效果几乎不会被人一眼就察觉出来，设计方式十分微妙，但这一点点精巧的变化却使得界面更加精细，提升了界面的层次感，bannet似乎微微从屏幕中跳出，并且保证了低调、柔和，没有增加任何违和感。如此一来，用户的视线就会被banner吸引，达到了良好的推广效果。投影和背景色相融，更好地凸显了重点元素——广告内容。

    2.双色调渐变

    极端扁平主义逐渐过时，新的扁平化增加了渐变的元素，因此似乎已经退出历史舞台的渐变设计被重新拾起，形成了一种更加隐蔽的精致的渐变设计。它要求只用于背景色或氛围色，不与重要内容互抢眼球，只能使用两种颜色进行过渡。

    渐变色中，最为流行的应属双色渐变了，越来愈多的新鲜产品开始使用。（如图2）完美使用了各种双色渐变，在扁平化与卡片设计的基础上，用渐变色来调节过度使用的图像和元素，画面添加趣味性，并完善视觉表现以吸引更多的用户。另外，丰富的高饱和度颜色让界面更加鲜艳多姿，并且添加了适度的质感，让界面层次感更丰富的同时，突出页面更加重要、关键的元素。

    （三）减少彩色的使用

    少即是多（英文：Less is more）这个概念，已经独占鳌头。作为设计师，要谨记简洁为上的设计原则，一定要时刻保持这一点，特别是想要使用色彩的時候，时尚高雅的APP设计在界面中一定会采用极简的方式来搭配颜色。

    2016年5，lnstagram发布了新的UI设计，（如图3）右边新的版本中去除了左边旧版中大量使用的蓝色和深灰色，不仅加粗了标题，底部导航栏和图标也被简化，这也印证了上文中提到的其他原则。为了突出内容，只有黑白界面和醒目的标题被留下，功能更加清晰。顶部导航和底部导航的颜色都不见了，另外，为了区分内容区块，使用了加粗文字的方法，以前给文字添加颜色的方式不再使用，如用户昵称、获赞数目等。整体界面去除了不必要的图形和色彩，增强它们通用性和易辨性。然后简化色彩，变成黑白界面，内容更突出，功能性更强。

    （四）加大留白区域

    还有一种方法可以使重要的内容和功能显得更加引人注目，那就是恰当的留白。而且，留白能够带给人一种清新、宁静的视觉感受，设计内容变得更加有目的性、有效率。

    以前设计师喜欢用线条来划分区块，可是这种方法很容易使得界面元素变得拥挤不堪。现在，利用留白来组建更加美观、干净的界面，无疑是更好的设计方式。

    此外，移除分割线和分隔符还有一点好处，就是可以达到更加现代化的效果，使整个设计聚焦产品功能，具体方法例如使用更大的图片和字体，来提高层级划分的清晰度，增强易用性。所以利用留白进行区域划分不仅不是干扰性的设计，而且很好地顺应了现今设计风格的潮流和产品的需求。

    在著名的图片社区Pinterest新版设计中，卡片的背景彻底消失，这种十分勇敢的尝试效果非常明显，界面中的图片内容更加清晰明了。通过留白来划分区域，界面元素不仅没有因为缺少卡片和背景的对比而变得混乱，一致性竟然变得更强了。

    （五）更醒目的控件

    用更加醒目的控件来提高用户对可操作内容的认知度和辨识度，从而降低点击操作的难度，降低误触率，使界面与用户的交互变得更友好。

    （如图4）新版iphone的地图，首先，他们改变了控件的位置，以前在底部的开始按钮改成了规划路线右边的位置，这样更加醒目，与路线规划的亲密性更强，两者看起来更像是一组。然后把上端的各种操作转移到底部，用户体验更加方便，不用移动手指就能在底部使用一切想要的功能。

    其次，控件形式也发生了变化，以前开始按钮是使用文字，现在添加了绿色背景的按钮，增强对比性，更加醒目地吸引用戶视线，功能和内容变得明显。另外，“开始”也变成了“出发”，目的地和花费时间的字体变得更粗更大。

    二、归纳总结与展望

    （一）归纳总结

    替换了从前利用线条等平面元素划分界面结构的方法，增加字体的大小与粗细程度，留下更多空白空间，使用户能够更好地领会界面的层级结构，既能够使界面扁平化设计更加直观，也极好地突出了重点内容。并且一些具有色盲或色弱和老年人用户也不再受到颜色和小字体的困扰。

    按钮变大、位置也做了相应改变（结构更明显），减小误触的概率，用户体验更加优秀。

    减少彩色。当然，也可以保留一种颜色，或者使用和谐的双色渐变。剩下的所有最都好是黑白的，从而用信息内容替代颜色，体现内容至上的原则。

    因此，目前的主流趋势可以说就是醒目吸睛、简洁精确、内容为王。在这种设计潮流的推动下，今后界面设计将以提高用户体验为准则，减少一切对操作干扰的元素的使用。

    （二）展望

    1.手动输入将变成对话

    根本上说，对话式的界面就是要模拟现实世界中人与人的交流。现在的界面其实已经与对话十分接近了，只是呈现为按钮、菜单和输入栏等其他人机交互方式。

    目前很多公司都热衷于研究对话机器人，这无疑是下一场设计潮流的前奏。语音识别将提升产品的延展性、创新性，人机之间的会话交流更加体现了用户体验为中心的服务。

    2.虚拟现实

    设计适应虚拟现实的界面是我们必将面临的新挑战。将现实世界中具有类似意义的自然手势运动作为虚拟世界中的操作，这是Google、Facebook和其他玩家已经为虚拟空间定义的交互准则。对话式界面也在这里发挥着相当大的功能，毕竟人与人交流的方式是对话而不是屏幕。

    3.数据可视化

    很多APP开始试着使用数据可视化、信息图表化来表现数据信息。界面中除了列表的表现手法，还多了许多生动的扇形图、折线型、柱状图等，这使得信息的呈现方式更加丰富，并且有助于用户快速获取和理解内容。

    结语

    从上面分析与总结中，可以看出，APP的设计越来越以人为中心，为用户服务，并不断朝着人性化的方向发展，更加重视用户体验。随着手机功能越来越丰富，优秀的APP不仅要功能强大，而且视觉上应当让人眼前一亮，并在交互中带给用户无尽的便利与舒适感。