扁平化设计风格在网页设计中的优势

陈冠军 张阿维

(西安工程大学，陕西 西安 710048)

互联网的诞生是一个奇迹，而网页则是这个奇迹的载体和缩影。随着互联网的飞速发展，网页的设计越来越重要。拟物化和扁平化设计风格作为当下最流行的两种设计风格，关于它们的争论从未停止过。

1 扁平化设计和拟物化设计简介

扁平化设计是指摈弃多余的装饰，如阴影、透视、纹理、渐变等，以抽象化、简洁化、符号化的设计元素将信息和事物的工作方式展示出来的一种设计风格。信息结构呈现的是一种扁而宽的结构形式。其风格特点为抽象新颖、色彩丰富、清新质朴、网格设计明显。[1]

说起扁平化设计就不得不提拟物化设计。拟物化设计是指以高光、纹理、阴影等效果模仿现实世界实物的造型、材质和颜色，从而达到现实实物的再现，通过这种形象易懂的方式来表达操作方法的一种设计风格，其信息组织结构呈现长而深的纵向树形结构,风格特点是具象写实、华丽逼真。[2]

2 扁平化设计在网页界面视觉上的优势

2.1 网页界面元素

格式塔心理学家认为，人们的知觉有一种“简化”的倾向。这种倾向是一种将任何物体以尽可能简单的机构组织起来是能够体现物体最本质的形态的表达。[3]

在拟物化设计中，设计师会模仿现实世界里真实物体的颜色、形状等。例如：设计师会为按钮添加渐变、阴影等效果以符合真实按钮的特征，以求对用户产生亲切的感觉。然而，这样的按钮往往带来的是一种不符合用户预期的体验，同时这也一定程度上限制了用户的个性化想象空间，更重要的是设计开发的周期相对更长。扁平化设计使用的都是基本形状，去除了渐变、阴影等装饰性效果，弱化了视觉上的复杂性，突出了每个元素所表达的信息本身。另外，由于扁平化设计的元素的这些特点，其具有更广泛的适用性，比如：眼睛近视和弱视的用户也可以方便的使用这类设计。

2.2 网页布局

之前的网页设计讲求精美的图片和排版效果，漂亮的插画与周到的布局设计，扁平化设计抛弃了复杂的光影效果，更专注于根本的内容呈现。扁平化设计中大量使用扁平化的图标、矢量图形和图标字体，这种设计更符合现代人的审美观。

一方面，拟物化设计初衷是降低用户的认知成本，目的是让用户在使用科技产品时可以参考现实世界的操作规律，可短时间内轻松掌握数码产品的用法[4]。而在现今阶段，数码产品普及度已非常高，特别是在年轻用户群体中，拟物化设计的功能性优势已无法凸显，用户已经熟悉了各类数码产品的基本特点，适应了各类界面的操作方法，在扁平化设计风格的界面中更容易更快速地找到所需要的信息。

另一方面，扁平化设计界面更能提升用户操作的效率。随着移动互联网的迅速崛起，移动终端屏幕尺寸的多样化给网页设计造成了很多麻烦，所以响应式网页设计应运而生了。在这方面，拟物化设计的网页很难实现跨屏幕、跨平台的界面适配，特别是在小尺寸的屏幕上，拟物化的图标非常不易识别，而扁平化设计的图标则可以很好地满足这些变化因素的需求。扁平化更多的使用矢量图形，减少了对像素精度的依赖，这样设计师也有了更大的创意空间，从而可以创建出适应性更强的用户界面。

2.3 色彩

扁平化设计页面中，因为追求极简主义，所以没有其他多余的装饰。因此，设计者在设计时需要更加注意色彩的搭配，这样将会收到更好的视觉效果。总结扁平设计的色彩搭配大致分为两种：同类色搭配：同类色搭配，最常用的是把同一种颜色的黑、白、灰三种色调结合在一起，形成层次上的对比。在扁平化设计中，单色的使用不仅能分清层次感，同时也能把握住整体感。对比色搭配：对比色搭配的使用可以使页面看起来极富活力又有丰富的色彩变幻，视觉效果醒目。在使用对比色进行搭配时，设计师要注意到在设计时应当先了解网页的主题，选用合适的颜色进行搭配。

2.4 字体

文字是设计师向用户传递信息的最主要手段。而字体的选择不仅要符合扁平化设计的简约风格，同时还要符合整个页面主题的设计风格。一般扁平化风格的页面会使用无衬线字体，再通过对字体字号、颜色和粗细的变化进行排版[5]。不同排版的文字信息会带来不同的视觉浏览体验，如字号较大，或是粗体，能帮助用户轻易地分辨、获取文字所传达的信息，这就在内容上创造出一定的层次感，可明显提升内容的易读性。

3 扁平化设计在网页信息组织结构上的优势

拟物化设计的信息组织结构主要表现为层级化结构，呈现为金字塔形的纵向树形结构，是一种逻辑性较强的层级化组织方式[6]。这种信息组织结构层级较多，每个层级容纳的信息量少而准确，根据严密的逻辑关系将信息进行有效的分类，因此信息获取的准确率比较高。同时层级间的转换路径较长，不同界面的切换耗时长且不利于全局观察，已造成用户“迷路”。拟物化设计是一种注重功能实现的信息结构，它更适用于信息结构逻辑性强，信息种类繁多且详细的产品。

扁平化设计最大程度地缩短了信息层级，不断扩展横向信息承载量，呈现出一种扁而宽的结构形式。特别是卡片式的信息展现形式可以同时展示信息标题和少量内容，减少了用户在访问多个目标信息时所耗费的认知成本。但是如果单个层级承载的信息量过大，获取精确信息的难度将变大，对于信息在页面中的定位也增加了难度。因此，扁平化设计适用于快捷的信息浏览，信息及模块的分支少且信息传达迅速的产品。扁平化设计的这种信息组织结构可以很好地优化目前绝大部分网页体验。

4 扁平化设计在网页交互方式上的优势

拟物化设计的网页往往由于拟物的不彻底，比如可能由于花费时间较长的原因，按钮的四种状态不能做到完全的拟物，会造成用户体验上的不连贯，给用户造成疑惑。同时由于拟物化设计耗时比较长，往往很少在网页动效方面改善用户体验的事情。而扁平设计中使用的多是简单的矢量图形、图标、图片，做交互动效比较容易且不易乱。同时网页交互动效可以大大提高用户的情感体验，避免扁平化设计风格给人造成冰冷、毫无生机的感觉。

5 总结

扁平化与拟物化设计一样都由来已久，随着互联网的飞速发展，特别是移动互联网的崛起，满足了用户的各种新需求，解决了用户体验的痛点，扁平化设计的优势得以凸显并得到了广泛传播。扁平化设计风格运用在网页设计上，他的这些优点将同样会对用户体验产生非常积极的影响。拟物化设计风格也不会就此覆灭，它会用适当的方式对用户体验做出贡献。

［1］宋方，金锦虹，逯新辉.析“扁平化”手机界面设计[J].包装工程，2012,33(14)：60-63.

［2］夏颖翀.数字产品界面中朴素的设计和冗余的设计[J].装装饰，2013（5）：98-99.

［3］马海港.少即是多：论扁平化界面设计风格的优势[J].现代装饰：理论，2013（12）：88.

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

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

［6］严屏，韦锦城.探析现代数字界面中的拟物化风格与扁平化风格[J].包装工程，2013（22）：114-126.