摘要：在人机交互领域,UI扁平化设计以其舒适、安全、高效等特色,成为关注的焦点。对美的感知、体验,需要通过眼睛来接受视觉化信息,而UI设计中的形状、大小、颜色、布局等美学要素,承载着视觉界面美学特征的基础。
关键词：UI扁平化设计,美学原理,人机交互
扁平化是视觉传达领域的一种设计风格,如谷歌的Android、苹果的iOS等系统,在UI设计上都延续扁平化风格。这一设计模式,通过对图形元素的简化处理,将界面配色与排版进行整合,减少一些浮雕、投影、渐变等三维视觉特效,实现由三维向二维界面视觉的转换,带给用户非比寻常的视觉体验。
1 UI扁平化设计中的基本视觉要素
结合UI扁平化设计,从满足用户交互设计需求上,使得UI扁平化设计更加关注界面外观、界面交互、界面要素的合理性与易用性。对于UI设计中的图形要素,利用点、线、面进行高度概括与提炼,以简化传统图形的“拟物性”设计,让视觉画面更加简洁、统一。扁平化风格的应用,与传统的“拟物化”设计相比,用户更易接受,特别是采用简化处理后的图形,用户在视觉体验上不会出现识别性变弱。当然,设计师需要在原“拟物化”图形处理中,要突出整体视觉美感与识别功能。如苹果iOS6与iOS7之间,图标对比更趋于简化,在视觉审美上更加清晰、简洁、明了。对于UI设计的色彩,扁平化风格将亮色的大量使用,特别是高纯度、高明度色彩的组合应用,在白色或黑色单一背景下,让用户的视觉体验更明朗。如微软的Metro UI风格中,图形的简洁化处理,辅以红橙黄绿高纯度、高明度搭配,界面视觉体验更显清爽、洁净。对于UI设计中的版面,需要结合图形、色彩的简洁化原则,来增强版面设计的视觉审美效果。如微软的Windows8,其界面在排版结构上,借鉴地铁站牌排版风格,将图文进行混排,使得界面信息层级一目了然。需要强调的是,在排版布局时,对于字体的选择、字号、字体色彩等运用,也要综合整个布局结构需要,使其相辅相成。
2 UI扁平化设计中对美学原理的体现
2.1 整体的简约美
在UI扁平化设计中,每个部分与整体之间互为依存,两者相辅相成,共同完成视觉交互与体验。梳理界面元素,除了图形、文字、色彩外,还有声音、视频、动画等媒介元素。为了突出各要素间的合理性呈现,需要从版面优化上兼顾整体的简约美。以至简为准则的扁平化设计,更是突出“以少胜多”的设计理念,在视觉审美上,非常关注各要素的视觉表达。通常,前期的设计,设计师需要结合界面内容,全面考虑各布局要素的关系,并通过简化手段,来优化界面布局效果。这其中,设计师需要了解用户需求,需要与开发人员进行沟通,了解各界面要素的基本雏形与逻辑流程,再通过对各个要素细节的处理与把握,最终来实现各界面元素的整体简约化。从UI交互设计应用中,多使用“幽灵按钮”,其特点是线条简洁,以圆角为主,无填充色。这种按钮设计,其目的在于为用户提供查找便捷,减少不必要的装饰与特效,更易在视觉上形成聚焦效应。
2.2 区块的相似性
在UI扁平化设计中,对于一些单一要素,往往考虑到其分散性特点,会采用归纳与分类手法,去发现其视觉共性特征。所谓区块分割,主要是考虑到整个视觉布局与结构特点需要,利用相似性设计,来实现不同元素间的内在关联。在对UI界面进行切换时,设计师通过对视觉元素的整体性规划,使其在色彩、纹理、大小、形状等方面,具有适当的变化,既保持自身独立性,又与整体建立交互关联,让用户在切换时感到顺畅。以微信扁平化界面为例,在窗口化设计上,简洁、平实是其显着特征。分析各视觉元素,包括菜单、按钮等,用户可以轻松、快捷地切换界面,而各要素在风格与色调上仍保持一致性。通过相似性关联,让界面上各要素的排版更加有组织性。以手机新闻类界面设计为例,导航栏往往是保留的,通过对UI界面进行区块分割,如左边与右边的独立区分,左边展示头条新闻,图文并茂方式呈现,右边呈现新闻内容。如对于界面中“链接”的运用,实现具体应用的呈现,其视觉效果与周围元素具有一定区分性。
2.3 风格的接近性
UI扁平化设计中,设计师在综合考量各视觉元素时,需要将功能接近,具有关联性的元素聚集起来,以组团方式形成模块化单元。如主界面、二级界面、三级界面及弹出界面之间,往往在风格设计上具有接近性。这种设计手法,以相对统一的字体样式、配色、大小等特征,让界面呈现层级感,便于用户的高效使用。针对一些操作按钮的设计,设计师需要从其重要性、功能性、应用性、操作方法等方面,依照扁平化简化处理理念,来进行科学、合理的提炼与优化。如对于主要按钮,色彩应用更具冲击力;次级按钮,色彩应用要兼顾主要按钮,进行色相、饱和度的调整。这一设计,使其在外形大小、配色关联上具有统一性,提高视觉可识别度。另外,对于层级间的接近性设计,用户在不同界面切换时,更显简洁,提高使用效率。
3 结语
UI扁平化设计注重对五方面的简约化处理。一是减少或不用特效。包括视觉元素的阴影效果、渐变效果、图文框、突起、导航栏等,尽量不加装饰。二是更多地使用简单图文元素。如对于按钮、图标等,多采用简单的矩形、圆形、方形,各元素相对独立,可以延展文字图形,来优化空间布局,体现和谐审美。三是排版更加突出交互性与易用性。如将字体、字形进行版设区分。四是色彩更纯。如在UI界面中,色调往往不超3种。五是整体效果尚简。
参考文献
[1]张雪铭,赵晓明.设计美学在移动应用UI界面设计中的体现[J].设计,2018(07):40-41.
[2]孙骁莉,贺鹏.UI设计中的扁平化与拟物化视觉传达解析[J].艺术科技,2019,32(07):94-95.
