扁平化设计技术在网页设计中的具体运用

金燕飞

摘 要：扁平化设计是跟随网页设计语言一起出现的新的设计风格和思路，它的主要功能在于将信息和事物的工作方式更简单直接地展现出来，减少用户认知障碍的产生。新的设计风格和方式是伴随着新的技术而产生的，新技术带给我们更方便更快捷的工作方式，也让设计师们有了更流畅表达设计思想的工具。

关键词：扁平化设计；新技术；网页设计；洛阳分院

传媒行业是信息的发布者，也是信息的加工者，如何使自己手中的信息迅速抓住人们的眼球，如何更好地将信息精准地展示给受众，是每一个传媒人都应该考虑的问题。本文通过对所参与的“中国民航飞行学院洛阳分院官方网站改版”项目的设计与分析，简述扁平化设计及新技术在网页设计中的运用，探讨新的设计理念与良好信息传递的关系，为今后的网页设计提供一些思路与建议。

1 网页设计简述

网页设计是设计者根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化）进行网站的功能策划，然后通过使用合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。作为企业对外宣传物料的一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。网页设计需要程序员通过一定的“超文本标记语言”（如HTML 4、HTML 5）进行信息的表示，设计语言的简洁、功能的全面以及良好的交互性能，可以使复杂的内容表现得以“快速、优雅”地跃然“纸”上，对于用户来讲，也可以得到更新颖、更便捷的感受。

2 扁平化设计在具体项目中的应用

笔者在去年主持设计了“中国民航飞行学院洛阳分院官方网站改版”项目，整个项目施行过程中，在页面的设计和表现上主要以“扁平化设计”理念为表达方式，通过与程序员的配合协作，最终完成了整个改版工作。改版后的网页是一个全新的样式，从色调到风格及布局进行了彻头彻尾的改变，该网站于2013年8月正式运行，运行顺畅、视觉效果良好，得到了用户的肯定（网站网址：http：//www3.cafuc.edu.cn/）。

2.1 扁平化设计

扁平化设计是跟随网页设计语言一起出现的新的设计风格和思路。扁平化设计指使用简单特效，或者无特效来创建的设计方案，主要功能就在于将信息和事物的工作方式更简单直接地展现出来，减少用户认知障碍的产生。

首先，扁平化要求“拒绝特效”：顾名思义，扁平化设计仅仅采用二维元素。所有元素都不加修饰——阴影、斜面、突起、渐变这样会带来深度变化的设计都是不应该的。从图片框到按钮，再到导航栏都干脆有力，需要极力避免羽化、阴影这样的特效。现实主义、3D、拟物化更是扁平化设计的大敌。扁平化设计中的层次和其他的一一对应，但各个位面间没有交叉，不会明确区分背景图片、前景图片、按钮、文本、导航，等等。具体到“洛阳分院网站”，最明显的体现就是导航栏的改动：导航栏从复杂的“拟按钮化”形式演变成新版的只使用深浅色块表示“选中”和“未选中”，给人以大方直观的感觉，干净利落。并且整个页面取消了大部分3D和阴影效果，采用矩形大色块设计，色块之间直接相邻，没有交叉，体现了“拒绝特效”的要求。

其次，扁平化“仅使用简单的元素”：扁平设计中使用到很多简单的UI元素，比如按钮和图标。设计师更常用矩形、圆形、方形等简单的形状，元素独立，正角、直角、圆弧都非常常见。UI元素在保持高可用性的前提下尽可能的简单，保證应用或网站直观、易用，无须引导。为了同时达到简单但直观的效果，可以尝试为按钮填充深色，以鼓励用户点击。在“洛阳分院网站”项目中，笔者以标志性特征的图片用于导航栏、背景和主题画面，图片尽量采用简单明快。尤其是导航栏标志的设计，采用单一色彩和简单的线条，既契合了整个页面的风格，也突出了所导航的内容。同时建议用户方整合优化栏目版块，在保留原VI色彩特征的同时简化界面，网页风格更趋平面化，简洁清爽。

第三，扁平化更加注重“排版”：因为扁平化设计要求元素更简单，排版的重要性就更为突出了。字体的大小需要匹配整体设计，高度美化的字体会与极简设计原则相冲突。字形上可以使用粗线体，文案要求精简、干练，最终保证产品在视觉上和措辞上的一致性。字体选择上使用简单的无衬线字体，通过字体大小和比重来区分元素。同时，也可以使用新奇的字体作为点缀，但不能过火。标签按钮等其他元素应当更注重增强易用性和交互性。本项目中的文字，除用户VI手册中的logo文字外，大部分选择了简大黑体和宋体。在色彩调整过程中，与程序技术员的沟通精确到色相比例，对于位置像素的偏移、图片文字的对位也力求精准，不厌测试，确保网页视觉稿与在线稿的完美吻合。

第四，扁平化的核心思想是“极简主义”： 扁平化设计天生简约，提倡功能大于形式，提倡一种少即是多，留白大于填充的美学。这样，最重要的元素便得以突显，成为视觉焦点。设计中应该驱除任何无关元素，尽可能地仅使用简单的颜色与文本。和旧版的网页相比，新版的网页在色调的选择上趋于统一，所有模块集中在两行内表现，尽量排除了不必要的详细说明和内容，这些改进都体现了“极简主义”思想。本项目在二级页面的设计中，同样沿用了这样的设计理念，使用户浏览更具舒适，不会因内容繁杂而无所适从，以至产生厌烦心理。

2.2 新技术的运用

作为设计人员，在与程序技术员合作的过程中，首先需要大致了解当前先进的技术水平，只有通过与技术的合作，才能将所设计的视觉稿实现在线动态发布。

首先，在早期的网页设计中，程序员将网页划分成固定大小的“表格”，在每个表格中填充不同的内容。这样的设计虽然简化了排版，但是却造成网页看上去非常死板，如果某个模块内没有内容，网页不会自动调整，而是留下表格中的空白。运用新技术设计的网站会自动调整网页的宽度和长度用于适应不同的显示器，这是网页设计中“自适应”模式的优势。旧版在宽屏显示器上会出现大量的空白，而新版能很好地适应宽屏显示器，无论是网页页眉还是网页底部都自动填充了左右两边的空白，获得了更好的效果。

其次，采用新的网页设计技术，网页可以获得更好的动态感。例如，打开进入现在的“中国民航飞行学院洛阳分院的官方网页”可以看到，主页上的图片展示采用了动态演示的效果，图片在变换的时候渐入渐出。当主页标题被选中时，标题栏被指向的色块会逐渐展开变宽，同时变成稍深一些的颜色，相应的标志和文字也会变成白色用于更好地显示内容。

可以看出，网站的交互性问题、综合页面的动态感和整体设计的统一以及用户使用的感受，所有的关于网页设计的问题，并不是单一的程序员或者设计师可以独立而为的，视觉设计师的工作一定包含着与程序员的合作，程序员有了设计师的配合才能将技术发挥到极致与完美。

3 总结

新的设计风格和方式总是伴随着新的技术而产生。电脑技术的普及、各类设计软件的开发运用，让平面设计从纸上进化到鼠标和键盘之间，而网页新技术带给我们的，是程序员更方便更快捷的工作方式，是设计师新的描绘工具。新一代网页标准和技术，也引导人们逐渐转换到“扁平化”思维、交互式页面和响应式布局等新的设计理念中来。网页的设计，需要和用户进行更深层次的沟通。网站的功能，需要从原先的“单向式”展示变为“双向式”的交流。这些都是设计师在网页设计中必须重视的方面。