浅析扁平化互联网界面设计的特点

周黎铃

摘 要：随着扁平化风格互联网产品的相继推出，扁平化设计成为互联网产品界面设计中的热潮。在日新月异的互联网大背景下，如何通过完善用户体验，让扁平化设计更好地满足用户的需求，成为当下一个极其有意义的课题。本文从视觉体验角度，通过色彩、字体、图形的特点分析对扁平化设计方法进行了整合。

关键词：扁平化视觉设计；互联网产品

2013年9月，苹果公司推出了全新的iOS7系统，最为直观的便是焕然一新的视觉设计，抛弃了iOS系统最为经典的“拟物化设计”，采用了图形简洁、色彩明快的“扁平化设计”，从此扁平化设计成为设计热潮，并广为人知。何为扁平化设计？首先，扁平化是一种设计风格，是指去除拟真效果（包括给人立体错觉的渐变、阴影、高光、肌理、羽化等），追求简洁的整体设计，不仅是视觉上的扁平化还包括信息层级的扁平化。在日新月异的互联网大背景下，如何通过完善用户体验，让扁平化设计更好地满足用户的需求，成为当下一个极其有意义的课题。本文从视觉体验角度，通过色彩、字体、图形的特点分析对扁平化设计方法进行了整合。

1 色彩设计分析

1.1 单色渐变配色

所谓单色渐变，就是在色相环中选取一种色相，通过改变的明度和纯度来区分色彩层次。同一色相的色彩对比较弱，因此为避免单调，在扁平化的界面中，往往会用单色渐变配以某个明度的灰色作为基底色，或者选择另一种颜色，在色彩上出现冷暖或明度的对比。一般单色会用在最为关键的页面元素上或者文字部分。背景削减理论在单色渐变中发挥了重要作用。

单色会给人带来单纯、柔和、平静、雅致、秩序的感受。单色配色的界面相较于多色配色的界面，视觉上显得更加简洁、统一，同时这种极简的配色能够通过同色相的明暗、纯度的对比突出重要信息，有效地区分界面中元素的主次对比。

1.2 明度、纯度相似仅改变色相的配色

设计师只要在色相环中选取相近的明度、纯度，仅色相不同的色彩搭配在一起，给人以和谐感。这样的配色分两种情况。当这些色彩没有特定的形状，在没有强烈背景色的衬托的情况下会呈现出一种迷幻、缥缈的色彩。相同明度的色彩与光学混合有很多的共同点，但是大色块明度相同的颜色并不会像光一样融合在一起成为新的颜色，与此相反，反而会形成一种新的质感，无明显边界感的色彩，仿佛有一起漂浮的错觉，这样的色彩搭配有种神秘的感觉。当这些色彩与更亮或更暗的背景色彩一起使用时，就会呈现出极为扁平的效果。从而达到色彩扁平感。因为明度相似，就缺乏了因为明暗对比而带来的空间效果。各色彩元素在界面中就呈现出“极平”的状态，多种明度相近的色彩一起使用虽然视觉上扁平，但界面会显得丰富、活泼。

2 字体设计分析

2.1 现代感的字体

现代感即简洁明快。在英文字体中，字腔宽、几何图形化的无衬线字体拥有现代气质。一般无衬线体的x高比衬线体来的高，且腰线均匀。无衬线体中，字腔宽的字体会给人轻松的感觉，排列在一起不会产生紧张的密度感，便于阅读，不论是在单色还是花哨的背景上，都有较强的识别性。几何图形感的无衬线体线条极为简洁，没有任何装饰感的字体与结构明快的扁平化风格界面设计是天造地设的一对，这样的组合应用是最为保险的。除此之外英文中的一部分衬线体也颇具现代感，如使用细的直线作为笔画连接处衬线的字体，虽然腰线并不均匀，但笔画转折和衔接处处理得非常简练，同样能带给用户现代化的印象。

在中文字体中，几何感腰线均匀的无衬线体，与字面大、胸线大、几何感衬线的衬线具有现代感。一般中文中的无衬线体是指黑体，在众多的黑体中，横竖笔画为水平、垂直且腰线均匀的字体呈现出简明的几何感，而字面大、胸线大的黑体会给人以开放的感觉。

2.2 纤细感的字体

若将苹果手机iOS6和iOS7中英文字体系统字体对比，从视觉上能直观地感受到，新系统的字体除了去除斜体字体更显现代感以外，变得更为纤细。

中英文的无衬线体中有一种字体，腰线有一定曲线的幅度，字体笔画呈现出一种犹如女性般优美、轻巧的感觉。这样的英文字体x高较高、字腔宽，中文字体胸线字面大。例如，英文Arial Regular字体是经典的无衬线体，腰线较粗且带有变化；NexaLight字体腰线纤细圆润、字腔宽很有几何感，非常适合用作大块单色底的界面中的标题；Swis721 Lt BT Light字体x高很高腰线也比一般的字体更为细一些，适合用作正文字体；而Microsoft Yi Baiti字体笔画带有一定的粗细变化，更加典雅，比较适合作为女性用户为主的界面标题字体。再如中文字体，苹果公司原先使用的中文字体“黑体—简”字体较为复古且厚重，方正兰亭超细黑简体胸线、字面都非常大，好似只勾画出了字体的骨架，适合用作个性化的副标题；思源黑体腰线比较均匀，字面很大，颇具几何感，适合用作正文字体；方正纤黑简体则明显能看到腰线中的变化，包括笔画转折处的处理，纤细中带有女性的优雅，适合女性用户为主的界面标题字体。

3 图形、图像设计分析

3.1 色块拼贴图形与线性图形

无边框是扁平化设计中功能图标的一大特点，几乎去掉了所有的描邊线条，只用色块来交代图形的结构。当不能用线条来交代结构关系时，色彩的构成成为此类图形设计的主力之一。确定色调后，通过色彩的冷暖、明度对比可交代出不同面的前后、转折关系，通过色相的改变可区分不同的部位和物体，并且前期形的提炼过程相比拟物化设计要求更高。

扁平化设计中线性图形一般出现在各种栏、按钮、输入框等交互性控件内，或某些应用内，且线条更加简练、纤细且符号化，常常与单色背景搭配使用。在扁平化设计中为与精致的字体保持一致，线性图形比例增加，线条更加均匀。线性的图形通常不会单独使用，而是与形状相同的单色图形一起成对使用，当用户点击该图形时，形状相同的单色图形会作为操作反馈代替线性图形。因此，设计师在设计时不仅要考虑线性时图形的美观性，还必须注意“填色”后图形的样式，是对图形抽象能力的双重考验。

3.2 磨砂感的图像处理

使用照片作为背景是扁平化设计中常见的一种，在不影响网速的情况下，适当使用照片来做界面背景可以提升视觉效果。全屏图片加上半透明的处理是常见的一种搭配，半透光或半透明的视觉效果给人带来流动性的情感体验的同时还能产生一种磨砂般的触觉幻觉。在移动设备中这样的设计配合手触的操作方式能带来绝妙的感受。图片的磨砂处理不仅增加了视觉美感，更重要的是它有助于信息层次和界面层次的区分。磨砂感的视觉处理其实主要是对图片的模糊处理和图层叠加，造成一种相片“失焦”般的视觉感受，弱化了图片在界面中的“抢镜”感，从而强调了非磨砂的信息，起到突出重点的作用。

磨砂处理对象一般有两种：一种是对底图的磨砂处理；另一种是对各种菜单、栏等提示性界面的磨砂处理。第一种主要起到突出重要信息的作用，而第二种则是区分两个界面层次的作用。第二种的磨砂界面往往可以收缩，在网站中常用作鼠标的悬停效果，而移动端则常用于收缩性菜单栏。

参考文献：

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

[2] 张雅秋.图形界面设计的表达和解读[D].上海：华东师范大学，2010.

[3] 马娜娜.简洁而不乏味——浅谈扁平化界面设计[J].大众文艺，2013（16）：137-138.

[4] 赵大羽，关东升.交互设计的艺术：iOS7拟物化到扁平化革命[M].北京：清华大学出版，2014.