扁平化潮流下,移动应用界面设计何去何从?
一.前言
如今科技与资讯日新月异,手机显示屏尺寸持续增大,其页面开始容纳海量数据,那些复杂的视觉装饰元素,使得界面整体愈发臃滞,大众的目光逐渐聚焦于内容与实用性,信息布局趋向于平面化,在美学取向方面,创作者们不再热衷立体或仿真的设计手法,反而更加信奉平面和极简的视觉准则。
版面是信息沟通的重要载体,运用构成元素的不同特质和作用,能让整体版面实现视觉与内涵的和谐统一,提升美观度,进而加速信息的传递并确保其准确性,正因如此,版式设计在广告宣传、海报制作、期刊排版等众多平面设计领域得到了普遍应用。移动应用的核心在于用户的互动和感受,不过,随着扁平化设计成为主流,我们不再借助精致的质感和光影来优化界面,也不再强调界面的层次感,那么,我们如何才能吸引用户的注意,并为他们提供舒适的阅读和操作环境呢?
二、版式设计在移动界面中的应用
版式设计通常包含十余种典型构造,包括骨骼式排布,全图式填充,上下分区布局,左右分布格局,中心轴线排列,曲线形态组合,斜向角度构造,对称平衡构图,重心突出安排,三角形状组合,邻近元素并置,无序自由组合,以及四角方位布局等。这些排版方式在视觉艺术领域运用十分普遍,手机应用界面制作与平面创作最显著的差异在于其实用性、易用性以及互动性,版面规划也是依据商品的用途特点、潜在客户、运用环境等要素来确定的。
移动端界面依据其产品用途能够分为两个主要类别,分别是用于呈现信息的界面以及用于执行操作的界面。
1.信息展示型界面
日常接触到的用于获取资讯和分享内容的界面包括新闻、气象、阅读、购物、音乐、食谱、养生等应用程序的部分界面,还有新用户入门指导页面也是常见的信息传递型页面。这些应用程序根据各自的功能特性,其界面布局也呈现出不同的风格特征。
1)以浏览引导为主
以视觉引导为核心的界面在结构上会有一条清晰的主轴,常见的版式设计如上下分区式、左右分区式、中心对称式、弧形布局式等,在图文组合的排布上能对使用者产生一种不易察觉的引导作用,所以这类设计被大量采用。
这两张图片,尽管呈现的情境和用途各不相同,却都运用了中心对称式排版方式,就是图像与文字沿着竖直方向部署,促使人们自上而下地查看,整体构造的条理十分分明。
2)以品牌传递为主
以品牌宣传为首要目标的界面,更适宜选用整页式、核心式、无序式等排版方法。整页式是将图像完整覆盖整个画面,呈现效果鲜明而突出。紧随其后的两个案例便运用了整页式的布局,借助覆盖整个视窗的图形以及精炼的文字,展现出商品的特质与核心思想,并且营造出开阔、放松的氛围。
3)以提高浏览效率为主
针对以提升浏览体验为核心的应用界面,其通常承载着丰富的内容要素,怎样才能让信息高效且精准地呈现给使用者,从而防止引发他们的不耐烦情绪和认知负担?
新闻类、信息类以及相册类软件的界面设计较为常见,可以参考框架式布局方案,框架式是一种条理分明、逻辑清晰的划分方式,在杂志版面设计中常见的框架有:单栏延伸、并列两栏、并列三栏、并列四栏等形式,借助图像与文字的交错组合能够营造出规整而严谨的视觉效果,有助于信息传递更加迅速明确。
左边的界面是一个资讯软件,运用了垂直排列的版式,模块化的构造让内容呈现井然有序,条理清晰。右边的界面则是一个照片浏览应用,选择了三列的排布方式,将图像以瀑布般的姿态呈现给使用者,有助于他们迅速查看。因为平级事物相互干扰,难以分辨主次,人的目光也无法同时集中观察两个或更多对象,因此采用图片交错布局,让画面显得更加生动。
4)以信息展示为主
以信息呈现为首要目标的界面,较为多见的是记录数据与天气状况等应用程序,这类应用程序的界面设计更注重内容的清晰易懂性。在这些应用程序中,常见的排版方式包括全部占据屏幕、上下分区、左右分布、以中心为基准、均衡对称以及无固定模式等。
这两个图示虽然都以呈现信息为主要目的,不过由于界面信息多少、应用程序功能差异的影响,左图的运动记录界面因为信息量相对较少,因此运用了中心对称式排版,而右图的天气应用因为信息量较大,所以选用了全覆盖式排版,恰当的排版方式对信息呈现有非常关键的意义。
2 .功能操作型界面
以实现功能为首要目的的界面,主要作用是指导用户进行操作,因此常见的排版方式包括将界面分为上下两部分,或者左右两部分,还有以中心轴为基准的布局等形式。
左边的图像是一个登记界面,按钮采用垂直排列的布局方式,明确标示了执行步骤和注册步骤。右边的图像运用了上下分区的版式设计,上方区域用于展示视觉内容,下方区域则包含了可供选择的选项和执行按钮,整体布局一目了然。
三、结语
当前趋向扁平化设计,众多产品吸收了杂志版式设计手法,从而使用户获得更佳的浏览感受和操作便利。先前提供的案例,仅是个人挑选的部分具有代表性且颇具巧思的页面布局,至于功能各异的软件,应当依据具体用途挑选恰当的版式结构,并且可以勇敢地融合版面设计中的经典模式,这样或许能为设计工作开辟新的视角。