任冬巧 杨春燕

（嘉兴学院，浙江 嘉兴 314001）

随着社会的发展，网络的使用已越来越频繁，网络已经成为人们生活中必不可少的一部分。每天，人们都会通过各个网站来查询资料、购物、游览信息等等。而网页则是构成网站的基本元素，是承载各种网站应用的平台。但它不是随随便便就能产生的，它的设计是要符合一定设计原则。扁平化设计逐渐成为一种设计的潮流，无论在界面设计上，还是在字体、色彩、排版方面上，都有非常鲜明的特点，即简洁明了，又极具特色；即减少用户在学习新交互方式过程中的成本，又使功能界定清晰一目了然。自2010年windows phone率先使用扁平化设计开始，它已经成为一种设计风格，并且是当今最潮流的设计趋势。如果将这种设计原则运用到网页的界面中，那么将使浏览者的操作变得更加舒适、简单，能让用户更加专注于内容本身，简单易用。

1 扁平化设计

那么什么是扁平化设计呢？扁平化设计是完全属于二次元，这个概念最核心的地方就是放弃一切装饰效果，诸如阴影，透视，纹理，渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净利落，没有任何羽化，渐变，或者阴影。尤其在手机上，更少的按钮和选项使得界面干净整齐，使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。

其实生活中处处可见扁平化设计作品，比如苹果手机，采用棱角分明的线条，加上苹果的部分应用设计界面，单色鲜明的对比，非常漂亮。扁平化设计与当下最常见拟物化设计形成鲜明对比，Android系统界面均采用拟物化，苹果IOS系统也采用拟物化，但作为手机领域的风向标品牌苹果手机最新推出的IOS7使用了扁平化设计，鲜明的个性与特点，让人记忆深刻，是一种非常新颖及简便的设计美学原则在手机网页界面设计中运用的典型案例。

2 扁平化设计的原则

然而，不是任何“片面化”的设计形式都可称为扁平化设计，它还是有自己的设计原则的。Designmodo设计师Carrie Cousins总结了扁平化的五大特点。

（1）拒绝特效——就是扁平化设计仅仅采用二维元素，所有元素都不加元素。

（2）仅使用简单的元素——就是扁平设计中简单的UI元素，比如按钮和图标。

（3）注重排版——因为扁平化设计要求元素更简单，排版的重要性就更为突出了，无论文案、字体都应该以简洁为主。

（4）关注色彩——色彩应采用鲜艳、明亮的颜色，必须拥有很多的色调。

（5）极简主义——设计中应该驱除任何无关元素，尽可能地仅使用简单的颜色与文本。

3 扁平化设计在网页中运用的优势

一种设计方式的创新，有好的一面，也有不好一面，不是所有的人都能完全的接受新的创新方式。有人会认为扁平化设计在学习时，需要一定的学习成本，传达的感情也不丰富，甚至过于冰冷。但是一种全新的设计方式的出现，并被大部分人所接受，甚至成为新的设计潮流，那么它的优点必定大于缺点，以下便是扁平化设计这一美学原则在网页中运用所带来的各种便捷与优势。

3.1 界面设计

一个优秀的界面，不仅要独树一帜，而且还要简洁明了，让用户使用起来更加简单、方便、舒适。往常设计师设计的界面往往倾向于拟物化设计，拟物化设计则是通过渐变、阴影、纹理、高光等拟真的视觉效果使得按钮更加真实，使得用户看到后拥有一种亲切感，但是拟物化设计的按钮、图标太过于繁琐，太过于真实，用久之后用户会产生视觉疲劳。而在目前所出现的扁平设计中，设计师们使用矩形、圆形、方形等简单的形状，不仅在保持高度可用性的前提下尽可能的简单，而且还保证网站直观、易用，无需引导。扁平化设计通常采用的菱角分明的形状来代替拟物化设计中的圆角效果，更加直接和方便，减少用户在学习新交互方式过程中的成本，功能界定清晰且一目了然。

3.2 字体

在网页界面设计中，文字是最重要的构成元素之一，具有比其他视觉元素更加易于辨识的信息传达功能。文字是设计师向用户传递信息的最佳媒介，因此，在网页界面设计中，字体的设计不仅要考虑到界面的总体设想，更要考虑到浏览者的情况。所以在扁平化设计的网页中，字体的选择，既要符合扁平化设计的简约风格，又要符合网页的整体风格，所以我们应该选择无衬线字体或者默认字体，这样更方便用户游览和信息的传达。

3.3 色彩

色彩是网页界面设计中不可缺少的视觉元素。在网页界面设计中，色彩总的应用原则是“总体协调，局部对比”。扁平化设计中，色彩的搭配是非常重要的。你可能已经发现了，扁平化设计的网站，应用色彩明显要比其他风格网站更加炫丽、明亮。此外扁平化设计的项目也拥有更多的色调。比如，其他设计的网站中最多只包含两三种主要颜色，但是扁平化设计中会平均使用六到八种颜色。另外还有一些颜色也挺受欢迎，如复古色浅橙、紫色、绿色、蓝色等……正如图一优衣库出品的RECIPE，相对于图二平常的网页设计，使用扁平化设计的图一网站，则显得更加的明亮，更吸引用户的眼球。

图1

图2

3.4 排版

网页版面设计，是在有限的屏幕空间将多媒体元素进行有机组合。 其目的在于帮助用户理解设计。扁平化设计的要求是让元素更简单，因此排版的重要性就更为突出了。不仅字体的大小应该匹配整体设计，字形上应该可以使用粗体，而且文案要求精简、干练，最终保证产品在视觉上和措辞上的一致性。如果一定需要视觉元素，可以添加简单的图形，但一定要记得不能过火。

4 总结

在Win8 metro界面中可以发现，有使用了完全的扁平化设计；在苹果产品及IOS系统中，可以看到部分扁平化设计影子，在Google中，也同样可以看到准扁平化设计模式，并且在Google中体验良好。越来越多的网站设计已在UI上走扁平式设计的路线。谈到设计，无论是一个网站还是一个应用程序，扁平化和极简的设计正在成为新的趋势，人们正在远离一直很受欢迎的拟物化设计。

随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸，创建多个屏幕尺寸和分辨率的拟物化设计既繁琐又费时，网站设计正朝着更加扁平化的设计，可以一次保证在所有的屏幕尺寸上它会很好看。而且，以往网站界面的风格设计潮流基本都是通过拟物化的设计手法来体现，长期使用会产生视觉疲劳。而扁平化设计潮流的出现，使得用户眼前一亮，极简主义的风格使得界面更加简洁明了。但是不管是拟物化还是扁平化，重点不在于追赶潮流，潮流只是一时的流行，只是在改变食物的表面，并没有改变实质，因此它会慢慢淡去，被新的潮流所替代。设计师设计一款应用的时候，让外观充分表现产品的内容才是王道。但有人会认为“扁平化设计”，是简单的把圆角方形+挑选颜色+使用免费图标=完事；扁平化设计看起来简单，设计起来是很难的。设计师只有根据内容要求恰当的使用扁平化设计的美学原则，把精力集中到每一处细节上，将一切元素合理整合，才能设计出没有丝毫三维、阴影等效果的界面。

[1]张芸.扁平化设计在网页上应用的优势[J].艺术科技,2013,(7):58-59.

[2]韩晓墨.承与发展并重_论扁平化设计的席卷[J].现代装饰(理论),2013,(7):101-102.

[3]宿子顺.能手机界面设计形式与感性价值[J].青春岁月,2013,(7):90-92.

[4]宋方,金锦虹,逯新辉.析“扁平化”手机界面设计[J].包装工程,2012,(7):110-112.

[5]王水雄.结构博弈:互联网导致社会扁平化的剖析[M].华夏出版社,2003.

[6](美)Patrick McNeil.网页设计创意书[M].图灵编辑部译.北京:人民邮电出版社,2013.

[7](美)Penny Mcintire.web 视觉设计[M].叶永彬,译. 北京:机械工业出版社,2008.

[8](美)贝尔德.完美网页的视觉设计法则[M].石屹,译. 北京:电子工业出版社,2011.

[9]刘永东.视觉设计基础[M].北京:中央广播电视大学出版社,2007.

[10]蒋广喜.色彩视觉表现·设计色彩[M].天津:天津大学出版社,2010.