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

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

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

　　1 扁平化风格的基本概念

　　其实，扁平化设计(flag design)是在拟物化设计基础之上发展来的新潮流风格，扁平化风格简化了拟物化设计，改变高光阴影、渐变等传统视野中的流行元素，将抽象、简化、符号化的元素整合，去掉那些繁琐的细节和明暗处理，使设计风格更加简约更加纯粹，视觉上给人舒适、整洁的体验。扁平化风格经历了过去几年的快速发展，不仅仅是在数字领域深受喜爱，渐渐地在平面设计领域被广泛使用，成了近几年的重要设计趋势之一。但扁平化并不是单单的将物品或板块彻底抽象和变“扁”，而是将运用的元素进行提炼，多余的进行去除，将特征留下，将装饰去除，如中国传统文化艺术中的皮影。

　　2 扁平化风格的兴起

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

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

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

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

　　3.2 色彩 3.2.1 视觉色彩页设计中的重要元素就是色彩，扁平化网页设计中的色彩是非常重要的，应该做到“总体协调，局部对比”的原则，色彩还决定了作品的风格走向。日常中见到的扁平化网页设计中往往比其他风格的网站色彩更加的明亮和炫目。比如像优衣库的RECIPE，与其他平常的网页设计来讲，更加吸引顾客的眼球，视觉上给人明亮的感觉。而且，扁平化风格的网页设计中运用的色彩也要多于其他风格的网页，一般来讲网页设计中会用到三种的主要颜色，而扁平化风格不仅色彩平均会比其他风格多五种，色调用到的也会更丰富。所有的网页设计中的色彩都在布局关系和形体关系上有着重要作用，使作品的风格走向更鲜明，扁平化风格网页设计也是如此，扁平化设计中还有一些非常常见和热门的扁平化网页设计中的色彩，例如蓝色、绿色、紫色、复古浅黄。若想让用户在较短时间内接收到需要的目标相关信息，作为设计者需要我们对色彩把握在媒体的特点表达，在用户打开页面时进行有效的视觉刺激，现代简约化的色彩明亮度以及纯度、亮度，活力、趣味地呈现在扁平化风格的页面设计中。 3.2.2 情感色彩导向色彩具有很强的综合性功能，在网页设计中起到情感导向作用。作为设计者，我们应该想表达的情感导向来建立基础的网页色彩基调，将色彩与所设计的网页主题相统一。在网页设计中的色彩选择上，充分考虑使人产生情感的视觉感受。如：冷暖感、软硬感、动静感和轻重感，将这些可以使人产生视觉情感的色彩搭配合理化。在扁平化的网页设计中，色彩的情感导向需要根据电商的商品类型、视觉感受、风格、特点来设计色彩的搭配和色彩的组合，表现电商的视觉传达效果。对需要设计的网页先设定一个标准色，以标准色为基点选择界面的辅助颜色。而色彩基调与网页主题相符合，会产生情感导向作用，如星巴克网站整体基调为绿色，大自然的绿色与健康，繁荣和环保举措紧密相关。绿色为基调可以给人带来清新、环保、健康等情感导向，非常适合各种有机或天然产品以及专注于户外和自然的品牌。

　　3.3 网页布局扁平化的网页设计相对其他风格的网页来说更方便用户对网页的使用和操作，更好地展示功能性还传达了简洁美。很好的代替了传统网页中对精美图片和元素的追求，不再利用抛光和阴影等烦琐的光影效果，也不再有精美的布局，扁平化风格更关注与想呈现的目标内容。人们生活压力日益增加，而网页的简洁舒适感更符合现代人的审美。以图片排版为例，设计者可以采取以下几种版式： 1)正常图片版式：等大小图片+统一间距; 2)版式设计排版：图片按栅格分割，最大图片的宽/高等于分割后小图片聘妻的宽/高; 3)照片墙式排版：图片大小不一，比较松散随意; 4)瀑布流式排版：图片全部等宽，垂直排列，视觉上有点像瀑布，是一种使用频率很高的排版方式，常见的比如花瓣网。

　　4 结束语

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

　　参考文献：

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

　　[2] 李江玲.扁平化设计在视觉形象中的运用[J].艺术科技,2015, 28(8):203.

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

　　《扁平化风格在网页界面设计中的应用》来源：《电脑知识与技术》，作者：罗园菁