刘恒媛

摘要：本文经过对视觉交互机制在信息界面扁平化设计实践中应用的分析研究，介绍了信息界面设计中扁平化设计与交互设计的定义内容，着重从信息界面色彩设计扁平化分析、信息界面版式设计扁平化分析、信息界面图形设计扁平化分析三个方面探讨了视觉交互机制下的信息界面扁平化设计，从而为扁平化信息界面设计的研究提供一点思考价值。

关键词：视觉交互机制;信息界面设计;扁平化设计

中国分类号：J524 文献标识码：A

文章编码：1672-7053（2018）06-0087-02

2012年，微软公司的windows8面世，采用了“化繁为简”的UI界面和容控式的交互系统。2013年6月，苹果公司发布了iOS7系统，这套全新的系统抛弃了苹果有史以来经典的“拟物化设计”，采用了图形简洁、色彩明快的扁平化设计，同年9月份，苹果公司正式推送iOS7系统，这一举动使扁平化设计真正成为主流设计风格。通过近几年的扎根发展，我们看到质感厚重、图层样式繁多的信息界面越来越少，取而代之的是一目了然、质感轻盈、创意新颖的界面设计。

1信息界面设计中扁平化设计的定义

在设计研究领域，界面是一种由色彩、文字、图像、符号等视觉元素以及多媒体元素为主构成的，以传达特定信息和方便人机交流为目的的媒介，就是我们通常所说的图形界面设计。信息界面设计是指信息产品中的界面设计从色彩、文字、符号等元素对信息进行设计，以达到传达信息和方便人机交流的目的。

扁平化设计概念于2008年由Google公司提出。它关注于简单元素、排版和单一色彩的极简化应用。从以上描述中我们可以理解，拟物化设计是三维的，扁平化设计是二维的。通过三维立体的设计，设计师可以在设计中增加阴影、纹理、高光等元素，营造出一种信息界面的凹凸立体感，而扁平化设计则放弃了任何附加的效果，创建了一个完全的二维平面空间。扁平化设计的核心原则是去除冗余的装饰效果，在扁平化设计中，没有阴影效果，没有浮雕和渐变等元素来使设计产生凹凸效果。虽然扁平化设计摒弃了高光、阴影等营造透视感的元素，但它通过抽象、简洁、符号化等设计元素成功的形成了与众不同信息界面设计风格，界面设计简洁抽象、频繁使用色块等，呈现出了十足的现代感。

2基于视觉交互机制的信息界面扁平化设计研究

2.1视觉交互机制的定义

交互机制概念由人机交互鼻祖Alan Cooper（美国的一位有25年IT经验，10年交互设计咨询经验的卓越权威）在其所著的《软件概念改革命》一書中正式提出。交互设计作为作为一门关注交互体验的新兴学科，在二十世纪八十年代就已经产生了，它由比尔·摩格理吉（Bill Moggridge）在1984年的一次设计会议上提出，一开始比尔·摩格理吉（Bill Moggridge）将它命名为“软面（Soft Face）”，由于当时这个词容易让人联想到一种名叫“椰菜娃娃（Cabbage Patch doll）"的流行玩具，所以，后来摩格理吉将它改名为”Interaction Design”，即交互设计。

2.2信息界面色彩设计扁平化分析

色彩设计是信息界面设计中视觉交互设计的一个重要组成部分。在扁平化设计中，用平涂的色块或者单色的线条来区分信息界面的模块是其一大特色。对信息界面上的色彩来说，与普通的物体色彩有很大不同。普通物体的色彩是由反射光所呈现，而信息界面大部分的载体是电子显示屏，因此，它的色彩是作为直射光而被人所见。显示屏上显示的是加色，是一种直接射入人眼的颜色，所呈现出的色彩由不同波长的色光的样式、强弱等决定。我们通常所见的生活场景是由不同波长的色光，通过反射，映入人眼，在人眼中所产生的视觉效应。色彩识别细胞主要集中在人眼球的中心，实际上，事业周围的色彩我们并未真正的看清，而是大脑用已有的认知补全了那部分模糊的色彩。对于设计师来说，色彩设计并不是简单的叠加色彩，而是能够控制色彩。大部分情况下，信息界面设计师会用RGB色彩空间来进行色彩设计。通常，色彩可以分为三个基本要素：色调（H）、明度（V）、饱和度（S）。根据孟塞尔颜色系统，色彩可以通过色相、透明度以及纯度这三个维度描述。

在信息界面设计上，界面上色彩设计的改变，可以改变人们对空间的认知，造成远近、高低、大小的错觉。扁平化设计通过也可以通过色彩在整体构图中达到凸显某个元素的作用。

在扁平化得界面设计中，经常采用单色渐变配色。单色渐变式将这一种色相通过明度和纯度的改变来营造界面的色彩层次感。因为同一色相会相对单调，所以在信息界面的扁平化设计中，通常采用单色渐变并搭配某个明度的灰色作为基底色，或者采用别的色彩，来达到冷暖或者明度上对比的效果。单色一般会呈现在信息界面中最关键的元素或者文字上。单色配色的信息界面相对于多色配色界面，在视觉上会更加简洁与统一，给人单纯、柔和、平静以及秩序感。

扁平化风格的信息界面色彩设计中，设计师也习惯于选取相同明度、纯度的不同色彩搭配在一起，这样会给人营造一种和谐之感。通常有两种做法，一种是没有特定形状的色彩，由于没有强烈的背景色村托，这些色彩显得迷幻而飘渺。第二种是采用相同明度与纯度的色彩搭配更亮或者更暗的背景色，会产生强烈的扁平感。因为明度相似，所以就失去了明暗对比产生的空间感。各种色彩元素在界面上就呈现出“平”的状态，如果使用多种明度相似的色彩，虽然在视觉上呈现扁平化，但是界面却会因此显得活泼、丰富。

扁平化的界面色彩设计中，设计师场采用选用“互补色”，即色相环中两极相对的颜色。把互补色放在一起回产生强烈的色相对比，极易吸引入的眼球。当互补色出现在同一界面中时，能增强相互在画面中的强度，即便是暗淡的灰色系，在加入它的补色后，也会绽放光彩。对比色的应用可以在灰色调的信息界面中，凸显重要元素，增加画面的层次感，避免单调，解决视觉疲劳的问题。

2.3信息界面版式设计扁平化分析

扁平化风格的信息界面设计中，版式设计是另外一整个重要影响因素。版式设计通常要遵循用户视觉运动轨迹。2016年美国著名网站设计杰柯柏·尼尔森发表了《眼球轨迹的研究》报告，报告中发现，用户在阅读信息界面时，其视觉运动轨迹通常呈“F”状。他使用眼动仪作为实验器材，对不同的用户在不同的界面上进行测试，得出了三张热点图。图中用红、蓝、灰三种颜色代表视线聚集的热度，红色代表最热，蓝色为较热，灰色则代表了几乎不关注。

网格作为辅助工具，常常出现在扁平化设计中。从美学或者整齐方面来说，网格布局有利于界面平衡。网格可以规划布局，使设计的版式排布具有很强的秩序感，能增强界面上元素的识别性，后期用户在使用过程中能有效的减少因信息排布不合理而出现的错误。网格布局方式能提高信息传达的效率，展现清晰的信息层级，带给用户完美无瑕的信息界面设计。

扁平化设计中通常采用平涂的色块来区分界面中的模块。2013年7月，张芸在《扁平化设计在网页上应用的优势》中也提出：扁平化设计中删除了网格布局中多余的线条和边框，使用单纯的二维色块对页面进行大胆的分割，色块上使用大小不一的文字来标示内容中心或是使用多标题图片，都可容纳更多的内容，使每个国标都有属于自己的独特风格，同时内容从一个边缘流向另一个边缘，在轴上进行活动，增加了稳定感。^[5]由于界面由色块和线条分割为区域和栏，栏与栏，区域与区域之间的间隔为背景底色，整个界面有线条和色块组成，视觉上具有矢量感。

扁平化设计中，常见的版式设计方式还有平铺。信息界面设计中，常常见到这样一种版式：图片平铺整个界面或者与界面同宽以作背景，图形与文字则置于图片之上。苹果系统的桌面设计便是典型代表。好看的图片能够吸引用户的注意力，提高用户的点击率，加上富有韻律的文字排版，能够突出整个界面的主基调。平铺版式设计的界面中，文字一般以居中对齐、置于界面中央的方式排版，使信息聚集，方便用户阅读。

2.4信息界面图形设计扁平化分析

设计师习惯于将图形运用到信息界面设计中，譬如图标、按钮等。通常设计师所使用的图形都较为简单，如圆形或者矩形这类几何图形，这些元素几乎都是直角，尽量突出图形，方便用户点击。扁平化风格的界面设计中，无边框图标设计是一大特色。无边框图标几乎去掉了所有的描边线条，只用一些色块来代表图形的结构。这些图形通常作为国标以及个性化元素应用。在线条不能交代结构关系时，色彩构成通常就会被用作替代。色调确定以后，通过色彩的冷暖、明暗可以突出界面的层次感，色相的改变还可以区分不同的部位和物体。

扁平化风格的信息界面设计中，线性图标通常出现在输入框和按钮等一些交互的控件中，或者在某些应用中，线条更加简化、纤细，且符号化更加显著，经常与单色背景搭配使用。线性图标一般不会单独使用，通常会搭配相同形状的单色图形一起使用。当用户点击线性图标的时候，相同形状的单色图形变会作为反馈代替线形图形。

3结语

从兴起到现在，扁平化设计风格一直作为设计潮流中的主流设计，为众多设计师所追捧。从视觉效果角度来说，去繁从简的扁平化设计风格只是众多设计风格中的一种，它的最终目的还是为了提高界面设计良好的交互操作体验，在界面信息设计中，良好的交互体验才是其核心。对于扁平化的信息界面设计来说，遵循视觉交互机制中的色彩设计、版式设计和图形设计原则，更能够满足现今用户的需求，提高用户体验的满意度。

参考文献

[1]王娟.基于用户体验的互联网产品界面设计研究[D].浙江：浙江农林大学，2012.

[2]中国社会科学院语言研究所词典编辑室.现代汉语词典[M].北京：商务印馆，2002.

[3]孙鹏.以触摸屏为例的界面交互机制研究[D].上海：同济大学，2011.

[4]周黎铃.基于用户体验的扁平化互联网产品界面设计研究[D].浙江工商大学，2014.

[5]张芸.扁平化设计在网页上应用的优势[J].艺术科技，2013 （06）：229.

[6]原研哉.白[M].纪江红，译广西：师范大学出版社，2012：21.