| 标题 | 扁平化界面设计及应用研究 |
| 范文 | 丁浩 摘要：数字终端界面 扁平化设计应用越来越广。探讨了扁平化和拟物化两种设计风格；研究了扁平化设计的创新特征与方法，从扁平化设计中的编排和布局、颜色运用以及符号学的角度阐述了扁平化设计特征；针对实际项目，详细分析了扁平化设计思想在系统界面设计中的运用；总结了扁平化设计的优点。 关键词：扁平化；拟物化；界面设计 DOIDOI：10.11907/rjdk.151213 中图分类号：TP317.4 文献标识码：A 文章编号文章编号：16727800（2015）008020203 0 引言 目前，在界面设计领域有两种截然不同的设计理念，即拟物化设计与扁平化设计。拟物化设计简单来说，就是模拟现实世界中已存在的同类事物，因而这种设计方式的初衷便是使人们能够更加形象地理解系统所要表达的功能，所以拟物化设计需要花费更多的时间和精力来描绘UI细节。拟物化设计也正是苹果公司已故CEO乔布斯所推崇的一种设计风格。 扁平化设计从2012年开始流行，这种设计的核心思想就是放弃一切装饰效果[1]，所有元素的边界都要求干净利落。目前业界关于拟物化设计和扁平化设计存在着激烈的争论，并且这种争论愈演愈烈。笔者认为，在研究讨论这两种设计风格时，不仅要考虑界面元素的呈现方式，还要考虑信息在界面上的传递效果，对信息层级的精简也正是扁平化设计的重要特点之一，这种设计风格在很多方面都有着别具一格的创新性。 1 扁平化设计的创新特征与方法 相对于拟物化来说，扁平化设计在视觉交互中的优点越来越明显。这种具有抽象化的设计形式更适合智能产品新功能的拓展。 1.1 扁平化设计编排与布局 扁平化设计通常是从视觉层面入手，通过吸引用户和设计师的目光，使之从一种对风格的接受逐渐演变为对扁平化设计思想的赞赏和理解。交互界面设计是一种重要的视觉信息传递媒介[2]，因为扁平化设计需要丢弃一切装饰效果，图形元素已经被最大程度地简化，所以版式布局和编排变得尤为重要，不合理的布局和编排不但会影响系统界面的视觉效果，还会对用户的操作体验产生影响。扁平化设计中版式的编排需要注意以下几点： （1）要有一个统一的风格，界面上的各个图形元素要与整个版式相结合。比如可以从图形元素中提取一些重要特征将其运用到版式设计上，以此达到与整体相呼应的效果。 （2）版式布局编排要引导操作流程，强化版式功能，还要注意减少一切不必要的装饰，防止对各个单一的图形元素造成不必要的干扰。 （3）编排设计时要强调主次之分，突出使用频率高和重要的功能。在有限的界面中，如何通过文字和图形的组合来呈现一种和谐的美感，给予用户流畅的视觉效果，需要进一步创新。 1.2 扁平化设计中的颜色运用 在扁平化设计中，常用的图形元素比较简单和纯粹，如何对其进行色彩的搭配便显得尤为重要。与目前流行的其它设计风格相比，扁平化设计对色彩的运用更为大胆，通常用鲜亮的颜色，特别是饱和度、纯度较高的颜色，有时在特定的情况下甚至会用到灰色和黑色这种偏暗的色系。为了加强视觉冲击，扁平化色彩设计通常不作任何柔化或者淡化处理，这样才能呈现出图像鲜明的效果。扁平化设计平均会使用6～8 种流行色彩，部分流行颜色如图1所示。 在扁平化设计色彩方案中，配色尽量简洁，通常以饱和度和色调相一致为原则，采用的颜色一般为高饱和、复古、鲜亮、单色块为主，同时色彩会随着当前的流行色趋势不断变化。笔者在研究扁平化配色体系后，发现许多值得借鉴的地方。例如，鲜艳明亮的颜色能够展现出一种与众不同的气质，特别是在暗背景或者亮背景中，能产生理想的视觉对比度，通常能得到较高的吸引力指数。综上所述，颜色的运用在扁平化设计中尤为重要，在颜色搭配方面也有着更多的创新点值得进一步探讨和研究。 图1 扁平化设计中常用的7种颜色（本刊为黑白显示） 1.3 从符号学角度解读扁平化设计 著名符号学家卡西尔曾说过：“人是符号的动物” 。语言、工具包括思想，都隶属于符号系统[3]。符号体系的发展伴随着人类文明的发展。龟甲刻字、岩壁作画都显示出图形化信息是人类信息传递的本源这一事实，如图2所示。 图2 龟甲刻字和岩壁作画 从视觉角度看，图形界面上任何有意义的可视化元素都是由相应的符号组合而成的，比如图标、 文字等；另一方面，从交互的角度来说，界面上所有涉及到的信息反馈都是以符号的信息交流规则为前提，设计图形界面就是将界面符号化。界面本质上是以信息交流为根本，是一个起源于设计师然后延续到用户的一种思维过程，在这一过程中，图形界面能给用户带来不同的情感体验。 扁平化正是图形界面的图像符号向指示符号进化的必然结果，因为UI要面对大量不同人群，所以其建立的符号系统必须具有广泛的认知性[4]。在UI发展初期，种类繁多的视觉元素设计往往没有形成统一的规范，导致符号的能指与所指无法在人群中形成清晰的约定，这个时期也正是设计师在不断尝试修正和构建两者关系的时期。 扁平化图形符号通常为指示符号，这种指示符号通常由几种图像符号组合或者再造，以此来诠释新的意义，如图3所示。 指示符号的新意义得到群体的广泛认同是社会约定的必然结果，而扁平化设计是图形界面的图像符号向指示符号进化的必然结果。在数码设备分辨率越来越高的今天，图像符号因为精致、生动、注重个性等特点，能为用户带来优秀且独特的视觉感受；而指示符号通过复杂的组合规则，含有大量的数字信息，并且设计成本更低、界面功能更强，这正是其优于图像符号的地方。 图3 扁平化图标案列 2 扁平化设计应用 随着时代的发展，客户对软件和系统界面的要求越来越高，不仅希望界面给人漂亮、舒适的感觉，还对系统界面的交互过程、信息显示有特定需求。 2.1 客户需求 本文通过应用项目实例探讨客户对系统界面方面的需求。 设计团队通过与该项目客户反复沟通，明确了几点需求：①客户希望该项目系统背景为单一色，界面上其它元素要能与背景显著区分；②系统中的图标要美观且易于点击，同时图标所代表的功能要容易理解；③重要的信息要在进入系统时能够方便实时显示，不用进行任何操作便能在主界面获得相关信息；④界面上元素的编排要符合用户习惯，界面交互要友好；⑤系统界面要在不同分辨率的屏幕下都能使用，不能因为分辨率而影响系统功能。 针对以上客户需求，设计团队在分析讨论之后，决定选用扁平化的设计思想来对该项目系统界面进行设计，因为采用扁平化的设计思想不仅可以满足用户对图标、界面背景的要求，还能有效地精简信息层级，满足客户方便快捷获取重要信息的目的。 2.2 系统界面设计 针对客户需求，在页面编排上，设置了导航栏并将其以竖排的方式放置于系统页面的最左侧，通过导航栏，客户可以迅速进入到相关子系统。导航放置在最左侧可以最大限度地减少对主页面信息的遮挡。在主页面上部位置，设计放置了各个子系统大图标，从而以醒目的方式将所有子系统进入方式展示给客户，客户通过点击这些图标便能非常方便地进入相关子系统，系统主页面布局如图4所示。 在各个子系统图标下面，编排了4个矩形块，这4个矩形块与特定流程关联，可以实时显示出今日新增案卷的数量等信息。通过这种编排设置，客户可一目了然地看到相关案卷的数量信息，极大地精简了信息层级。在4个矩形块的下部，分别放置每月工单示意图模块和工作记录模块，这样编排的原因同样是为了让客户能够清晰直观地看到所需要的信息记录。信息显示模块布局如图5所示。 图4 系统主页面布局 图5 信息显示模块 针对客户希望的单一色背景，设计团队在和客户沟通后，选择了客户喜欢的红色作为系统背景主色调。在选择红色作为系统背景主色调之后，根据客户建议，对背景进行了不同程度的渐变处理，给用户一种舒适柔和的视觉效果。同时为了避免用户审美疲劳，还提供了几种单一颜色作为主色调的背景图片供用户切换使用。 为了有效区分系统单一的背景色，选择白色作为文字、线条、矩形块等元素的颜色，因为白色不但能使文字等元素清晰地呈现在页面上，并且会与背景色产生明显的差异感。按钮颜色选择黑色作为主色调，因为黑色可以使按钮元素与其它元素区分开，用户很容易找到想要点击的按钮。同时按钮中的文字与界面其它部分的文字颜色一致，采用白色可以与按钮的主色调形成有效对比，用户可以清晰看到点击该按钮后触发的事件。按照客户需求，在下拉框的配色上，采用了用户最为习惯的白底黑字，使用户在选择时能够清晰看到每一个下拉选项，如图6所示。 设计中采用了扁平化的图标来指代相关子系统，这些扁平化图标给用户一种非常直观的表达，并且在PC以及移动设备上更容易被点击，选择这些扁平化的图标避免了理解上的歧义，有利于用户与系统之间的交互。特别要注意的是，为了与背景色更好地结合，本文对图标的透明度等属性也进行了调整，通过这些调整使得界面元素更加契合。系统中使用的部分图标如图7所示。 为了满足用户简单直观获取重要信息的需求，本文有效利用了扁平化设计中精简信息层级的思想来进行设计。在主页面的突出位置设计放置了4个大的矩形块，在这4个大的矩形块当中使用图形（小矩形块）和数字相结合的方式，直观展示出用户所需要的重要信息。同时在主页面侧边的待办任务栏，特殊的待办任务（比如说上级领导回退的待办任务）更是以鲜艳的大红色作为背景进行标注，以帮助用户在打开主页面的瞬间就注意到这些特殊的任务。 图6 按钮线条示例 图7 系统部分图标 采用Bootstrap框架开发，通过该框架不但能够迅速完成前端界面的开发工作，还能够实现在不同的屏幕分辨率下系统界面自动调整的自适应功能。该系统交付使用后，得到了客户的一致肯定，特别是对用户界面部分给予了充分的赞赏。 3 结语 随着人们生活节奏的加快，对信息的传递要求也更加精确，条理清晰、界面简洁的扁平化设计更接近人们的需求[5]。它不但秉承以人为本的设计原则，同时注重产品的功能，产生了全新的交互体验模式。目前的拟物化设计已经接近饱和，全新的扁平化设计必将顺应时代的潮流，在今后的一段时间里成为界面设计的主流风格。下一步将在基于扁平化的界面设计方面进行更多的探索，在扁平化符号创新、界面编排、用户交互和信息层级传递等多个角度进行研究和创新。 参考文献： [1] 汪大伟.现代主义风格的 UI 设计之兴起[J].现代装饰，2012（9）：182184. [2] 宋冬慧，葛俊杰.符号学在图形设计中的意义[J].桂林电子工业学院学报，2002，22（6）：5963. [3] 孙奕颖.图形用户界面的符号学解读[J].郑州轻工业学院学报，2008（2）：5254. [4] 韩晓墨.继承与发展并重——论扁平化设计的席卷[J].现代装饰理论，2012（3）：2629. [5] 绿帆博客.为何越来越多公司采用扁平化设计[EB/OL].http：//www.cnbeta.com/articles/240985.htm，2013. （责任编辑：杜能钢） |
| 随便看 |
|
科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。