扁平化风格在网页界面设计中的应用

罗园菁

摘要：扁平化是近年来的一种新潮流设计风格，在网页设计中体现了简约的特点，将网页界面的信息进行整合，采用舒适的颜色、图形等，带给人清新独特的视觉体验，深受年轻人喜爱。本文作者主要分析了扁平化风格在网页界面设计中的应用。

关键词：扁平化风格;网页;界面设计;版式

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2021）11-0189-02

现如今以手机为主的信息技术和网络传播飞速发展，设计风格是随着社会的经济发展而变化，文化发展也注定成为设计风格变化的主要因素，而网页设计也越来越向数字艺术为主的扁平化风格发展，对当下的文化构造和经济发展有着深远影响。在扁平化风格的网页界面设计中，设计师以提高用户体验为切入点，通过各种简约的元素，使扁平化风格在网页界面设计中更加舒适、实用。

1 扁平化风格的基本概念

其实，扁平化设计（flag design）是在拟物化设计基础之上发展来的新潮流风格，扁平化风格简化了拟物化设计，改变高光阴影、渐变等传统视野中的流行元素，将抽象、简化、符号化的元素整合，去掉那些繁琐的细节和明暗处理，使设计风格更加简约更加纯粹，视觉上给人舒适、整洁的体验。扁平化风格经历了过去几年的快速发展，不仅仅是在数字领域深受喜爱，渐渐地在平面设计领域被广泛使用，成了近几年的重要设计趋势之一。

但扁平化并不是单单的将物品或板块彻底抽象和变“扁”，而是将运用的元素进行提炼，多余的进行去除，将特征留下，将装饰去除，如中国传统文化艺术中的皮影。

2 扁平化风格的兴起

新时代以来科学技术不断发展，手机成为综合性极强的生活智能工具，手机的小巧灵活的特点使原本流行多年的拟物化风格受到打击，拟物化风格无法在手机上很好地发挥其立体、阴影等功能，而时代发展飞快，人们的生活压力也越来越大，大众也越来越偏向手机界面和网页界面的简洁和舒适感，对简约的“绿色设计”在视觉上给人休闲的感受，对于设计而言，不变才是病态，改变和创新才是设计发展的常态。

3 扁平化风格在网页设计中的应用

3.1 简约性图形

3.1.1 图片去底法

从字面意思上来看，图片去底法就是去掉图片的底（背景），这种方法可以让想要呈现的图片更突出。比如很多高端电子产品的网页，用户在打开此商品页面时直观地看到产品本身超清的图像，整体网页简单却抓住用户的眼睛，产品本身非常突出，更加吸引用户注意力。将图片去底，只运用产品本身的图像呈现，网页整体的画面空间感被拉强。扁平化的网页设计中不仅需要使用调整颜色或图形形状等方法改变网页的风格，图片在网页中也是非常重要的元素，使用图片去底的方式将图片与网页设计的风格主体相统一，就是一项优秀的网页设计作品。这种图片去底的方式，设计者需要根据客户对页面的需要对板块和文字都进行处理调整，使页面的具有较好的层次感，使它们有机排列增强视觉效果，让页面整体变得和谐和统一。图片去底这种方式一般运用在产品方面的网页设计中。

3.1.2 图形抽象法

扁平化网页设计中最常见和最典型的就是对图形进行抽象化，在网页设计中每个图形呈现出的视觉感受就是扁平的，并不具有高光、阴影元素，没有给人带来凹凸感或动感的图形。扁平化的网页设计中，通过对图片或物体的抽象删减呈现简约化的图形，使网页更简约、大气。比如一些网站的网页中，将功能图标进行设计，在正常呈现的状态下是一种图标，当鼠标进行点击图形时，又会转变图形样式，利用图形的变化样式进行区分，给用户带来不一样的体验，用户在对网页进行点击选择时可以轻易地区分出点击和未点击状态，辅助和引导用户视觉的效果，从而做出正确的选择。方便用户浏览的同时，带给用户良好的视觉效果。

3.2 色彩

3.2.1 视觉色彩

页设计中的重要元素就是色彩，扁平化网页设计中的色彩是非常重要的，应该做到“总体协调，局部对比”的原则，色彩还决定了作品的风格走向。日常中见到的扁平化网页设计中往往比其他风格的网站色彩更加的明亮和炫目。

比如像优衣库的RECIPE，与其他平常的网页设计来讲，更加吸引顾客的眼球，视觉上给人明亮的感觉。而且，扁平化风格的网页设计中运用的色彩也要多于其他风格的网页，一般来讲网页设计中会用到三种的主要颜色，而扁平化风格不仅色彩平均会比其他风格多五种，色调用到的也会更丰富。所有的网页设计中的色彩都在布局关系和形体关系上有着重要作用，使作品的风格走向更鲜明，扁平化风格网页设计也是如此，扁平化设计中还有一些非常常见和热门的扁平化网页设计中的色彩，例如蓝色、绿色、紫色、复古浅黄。若想让用户在较短时间内接收到需要的目标相关信息，作为设计者需要我们对色彩把握在媒体的特点表达，在用户打开页面时进行有效的视觉刺激，现代简约化的色彩明亮度以及纯度、亮度，活力、趣味地呈现在扁平化风格的页面设計中。

3.2.2 情感色彩导向

色彩具有很强的综合性功能，在网页设计中起到情感导向作用。作为设计者，我们应该想表达的情感导向来建立基础的网页色彩基调，将色彩与所设计的网页主题相统一。在网页设计中的色彩选择上，充分考虑使人产生情感的视觉感受。如：冷暖感、软硬感、动静感和轻重感，将这些可以使人产生视觉情感的色彩搭配合理化。

在扁平化的网页设计中，色彩的情感导向需要根据电商的商品类型、视觉感受、风格、特点来设计色彩的搭配和色彩的组合，表现电商的视觉传达效果。对需要设计的网页先设定一个标准色，以标准色为基点选择界面的辅助颜色。而色彩基调与网页主题相符合，会产生情感导向作用，如星巴克网站整体基调为绿色，大自然的绿色与健康，繁荣和环保举措紧密相关。绿色为基调可以给人带来清新、环保、健康等情感导向，非常适合各种有机或天然产品以及专注于户外和自然的品牌。

3.2.3 色彩层级搭配法

我们日常经常见到的网页设计色彩表达为饱和度搭配进行的，如低饱和度和高饱和度的色彩相结合的页面。现在的扁平化风格网页设计比较常用的是纯色色彩搭配进行设计的，设计者要对画面色彩搭配给人心旷神怡的视觉感，对网页中的层次感也要进行表达和体现，使用户更好地进行浏览网页。扁平化风格相比拟物化风格的突出感是平稳的，设计者要用颜色分出信息的层次，主体信息和辅助信息，通过颜色表达空间感。注意留白的运用，给用户充分的呼吸空间，让用户更好的消化页面信息并确定网页中的优先级。

3.3 网页布局

扁平化的网页设计相对其他风格的网页来说更方便用户对网页的使用和操作，更好地展示功能性还传达了简洁美。很好的代替了传统网页中对精美图片和元素的追求，不再利用抛光和阴影等烦琐的光影效果，也不再有精美的布局，扁平化风格更关注与想呈现的目标内容。人们生活压力日益增加，而网页的简洁舒适感更符合现代人的审美。以图片排版为例，设计者可以采取以下几种版式：

1）正常图片版式：等大小图片+统一间距;

2）版式设计排版：图片按栅格分割，最大图片的宽/高等于分割后小图片聘妻的宽/高;

3）照片墙式排版：图片大小不一，比较松散随意;

4）瀑布流式排版：图片全部等宽，垂直排列，视觉上有点像瀑布，是一种使用频率很高的排版方式，常见的比如花瓣网。

3.4 字体

3.4.1 字体的应用

扁平化风格中的字体有着很重要的作用，与色彩导向相同，每种字体都有着情感含义，不同的字体表达着不同的情感导向，设计者在选择扁平化风格网页中的字体时，将网页的主题视觉目的与字体相统一，设计出与客户想表达情感相同的风格和网页整体基调。例如，宋体这种字体，是设计者们使用最为广泛的一种。带给人的感觉就是典雅和端庄的味道，宋体在网页中有着占据的版面较小的优点，字体较为秀丽，非常适合用于网页文字表达较多的情况，进行大面积的文字排版，正文中大多使用的也是宋体。宋体和新宋体在Windows系统网页中使用范围比较广泛。黑體的字形严肃庄重，给人的感觉是非常干净和醒目的，不会拖泥带水，设计者可以选择黑体作为标题或重点信息，便于展示主旨信息，正黑和微软雅黑使用频率较多。

字体不仅仅在于信息的表达，还可以在网页上直观的进行设计，旧金山的一家设计公司Godfrey Dadich在其网页主页上运用荧光绿的高亮部分来突出重点。有利于用户在浏览时抓住关键信息。正如我们在课本上重点处涂上鲜艳色彩来突出一样，设计者在网页设计中也可以运用，正所谓设计源于生活。

3.4.2 字号的应用

设计者在进行网页文字排版时，字号也可以作为一项设计元素，字号的特征可以有效地向用户传递重点信息，比如高对比色的大字号字体、高清的自定义字体和平衡的文字段落都是当前流行的网页编排字号设计。例如CreativeDoc的首页中，6个加粗的白色字母在强烈的黑色背景中，对比强烈十分醒目。另外Octoplus Group是一个散步信件来讲述故事的通信机构，网站首页就是借助小而粗的字母来充当导航元素。这种设计从品牌信息传达和故事性的角度上来看是非常有趣且有效的。

设计者可以充分利用文字的这些特性，在扁平化风格的网页设计中发挥创意体现所传递信息的简洁和情感。

4 结束语

新时代的人们的审美观念不断提升，网页设计风格随着各种社会和人文因素不断发展变化，扁平化的设计风格与当下人们的生活与商业需要相贴合，很好的满足于当代社会。设计者基于拟物化设计风格对网页视觉层面中的图片、文字等元素进行抽象的简化，对文字和色彩进行搭配，有效的表达信息的主次关系，不仅仅在用户浏览网页时提高效率和便捷性，而这种吸引人目光却简洁明了的设计风格深受大家喜爱，设计者需要不断地更新个人观念，追寻更多的表达方式。

参考文献：

[1] 秦岁明，何梦楠.扁平化风格在网页界面设计中的应用[J].包装工程，2015，36（6）：41-44，54.

[2] 李江玲.扁平化设计在视觉形象中的运用[J].艺术科技，2015，28（8）：203.

[3] 许晓云，王一琳.扁平化——以简约为核心的产品交互设计研究[J].设计，2015（19）：80-81.

【通联编辑：李雅琪】