扁平化网页设计要点

扁平化网页设计要点

扁平化设计能做出3D效果的元素，例如透视、纹理、渐变等元素效果，在设计元素上，更多强调抽象、极简和符号化。下面介绍扁平化网页设计要点，希望可以帮助到大家。

一、什么是扁平化设计

扁平化设计能做出3D效果的元素，例如透视、纹理、渐变等元素效果，在设计元素上，更多强调抽象、极简和符号化，更多侧重于用色彩和排版构造页面，不需过多的技术，回归简单的搭配与操作，把极简发挥到更佳。

扁平化设计去除网站很多不必要存在的部分，显得简约、大气，把内容精简，突出显示给用户，减少用户错误认知，是近几年较受欢迎的网站制作趋势。

二、设计要点

1.色彩

在扁平化网站制作中，色彩搭配被运用得炉火澄清。不似平常所强调的使用简单的配色，从色彩色系、色调种类、到色彩搭配都是大胆而充满艺术感的，以此吸引用户眼球，紧抓用户目光。

扁平化页面设计，色彩主调以亮色系为主，辅之冷色系，几种颜色一起搭配使用，让明亮的色彩弥补页面中细节不足的缺憾。这种设计方式更加注重设计师的艺术感，错误的色彩搭配会给页面造成灾难现场的视觉体验。

2.排版

排版是扁平化网站制作中重要的步骤之一，灵活的排版布局能给页面带来惊艳的整体效果体验。扁平化网站设计元素构成简单，每个组件要摆放在优先的位置，充分体现其功能作用，使用户一目了然。

3.字体

扁平化网站制作中的字体一般是主角，基本垄断传达信息的重任，图片在这种设计趋势面前反而扮演衬托的作用。因此，字体的使用在扁平化网站制作中强调其可读性和和统一性。

可读性即指在选择字体时，选择一眼能看得懂的字体，避免抽象性，给用户造成信息认知难度大的问题。

统一性指内容字体大致统一，可根据字体尺寸大小、颜色来调整内容的重要程度，大势字体不变，保证页面简洁，层次清晰。

网页扁平化设计分析

去繁存简。

大多数网页设计师都碰到过这样的情况：当客户向你提需求的时候，往往会使用一些类似“简洁、高端、大气”等形容词来描述自己对网站设计的要求，然而这几个词正是笔者认为对于扁平化设计最好的诠释。

简洁：

扁平化设计的UI是十分简洁的，因为它们尽可能地减少一些高光、纹理、阴影等等效果，从一个抽象的层面一针见血地展现出该UI所要体现的物体与含义。

除此之外，扁平化设计在布局上也是尽量做到脉络清晰，从而将用户的注意力凝聚在重要内容上。

高端：

或许每个人对于高端的定义都各执一词，但是笔者对于高端的定义就是，设计简洁、内容精简、交互优雅。

简洁的UI设计、精简的结构布局与内容展现，再加上先进的HTML5技术以及CSS3动画效果。扁平化设计能够将交互设计发挥到极致，从而为客户带去极其优雅的用户体验。

大气：

清晰简洁的网站结构、识别度极高且配色融洽的UI设计、结合CSS3等现代技术所展现的优雅的用户体验——这便是笔者心目中的大气了!

加载迅速、利于SEO搜索引擎优化。

研究过如何优化网站的都知道，扁平化设计是非常符合网站优化思想以及SEO优化思想的，这是由于它们的UI组成以色块为主，从而减少了页面中图片的数量，大大加快了页面加载速度。

除此之外，使用更多的CSS3技术来代替一些复杂的JS效果，也能够为SEO的优化添砖加瓦。

响应式布局，兼容更多设备。

伴随扁平化设计风靡Web设计领域的，还有响应式布局设计。

由于平板电脑以及智能手机的普及，越来越多的网站开始在意自己在这些设备上的表现如何，在这样的背景下，响应式布局进入了大家的视野。

虽然目前在国内，由于大多企业建站的用户群体有限，在移动端的用户就更是凤毛麟角，所以采用响应式布局的网站案例并不算多，但是笔者认为，还是有必要去了解一下。

如果你想查看某一个网站是否采用响应式布局，可以使用笔者在上一篇文章中提到的网站跨设备测试工具，非常方便。

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

扁平化的概念最核心的地方就是：去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素。让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化。

例如，Windows、Mac OS、iOS、Android系统的设计已经往扁平化设计发展。其设计语言有Material Design、Modern UI等。

扁平化尤其在手机上，更少的按钮和选项使得界面干净整齐，使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。

扁平化在移动系统上不仅界面美观、简洁，而且达到降低功耗，延长待机时间和提高运算速度。例如，Android 5.0用了扁平化效果，因此被称为“最绚丽的安卓系统”。[1]

英文名为“flat design”(扁平化设计)，这个概念2008年由Google提出。但围绕着“flat design”这个名字存在着诸多争论。现在你所看到的这个名称“flat design”也不是被大家绝对地认可。

不同的公司团体都尝试用过其他名称，例如minimal design, honest design，而微软公司甚至称它作 “authentically digital”。

优点

降低移动设备的硬件需求，延长待机时间;

可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生;

随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸，创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计，你可以一次保证在所有的屏幕尺寸上它会很好看。扁平化设计更简约，条理清晰，最重要的一点是，更好的适应性。

在扁平化设计目前最有力的典范是微软的Windows以及Windows Phone和Windows RT的Metro界面，不得不说Microsoft不愧为扁平化用户体验开拓者，如此大胆的尝试与实现，不得不让人佩服。与扁平化设计相比，在目前也可以说之前最为流行的是skeuomorphic设计，最为典型的就是苹果iOS系统中拟物化的设计，让我们感觉到虚拟物与实物的接近程度，iOS、安卓也已在向扁平化改变。

缺点

扁平化反对者认为：

降低用户体验，在非移动设备上令人反感;

缺乏直观，需要一定的学习成本;

传达的感情不丰富，甚至过于冰冷。

扁平化设计的实用小技巧

Tip 1：关于高光、渐变和投影

网上所说扁平化风的三大要素：去高光、去渐变、去阴影。这么说是有点绝对了，我认为应该是去掉过渡式高光、过渡式渐变、过渡式阴影。在这篇文章里，扁平化高光、阶梯式渐变以及所谓的长投影是允许的。

Tip 2：使用扁平化图标

使用有明确含义的图标可以让你的设计不那么单调并且耐看。

Tip 3：色块的形状和颜色

色块在扁平化设计中占据着很重要的地位，几乎我们看到的所有扁平化设计都离不开色块。

关于色块的形状，基础形状有圆形、三角形、四边形、五边形以及六边形，注意不要用超过六条边的形状，这样人们就会开始数形状的边数而忽略掉你要传达的信息。

有的人在扁平化设计中更喜欢使用带有圆角的基础形状。

关于色块的颜色，并没有特别的要求，但是我个人更加喜欢使用不那么鲜艳刺眼的颜色，使用温和、饱和度不高的颜色更对我胃口。

在扁平化设计中，如果我追求可靠、稳定、安全、平静的风格，那么我会选择一种主色以及与主色同色系的四五种辅色，如果我追求活泼、青春、充满生命力的风格，那么我选择的辅色就和主色便是完全不同色系。

扁平化设计中，黑白以及不同程度的灰很重要，因为它们白百搭，所以在你不知道该用什么颜色的时候，黑白灰也许是不错的选择。

Tip 4：色块的组合

除了基础的形状之外，你可以由基础形状衍生出更多的组合形状。但是我建议不要超过三种不同的基础形状组合，这样会让你的设计脱离扁平化简约的初衷。

Tip5：字体的选择

请选择无衬线体，常用的中文无衬线体有微软雅黑、黑体、幼圆、张海山锐楷体、方正智艺体等。

Tip6：注重排版

扁平化设计中尤其要注意排版，在这里再次祭出设计的四大原则：

对齐、亲密性、重复、对比。在你放好一个色块或者文字后，请务必检查一下是否满足以上四条准则。

注意，色块里面放置文字的时候，要留出呼吸空间。

Tip 7：图片的使用

扁平化设计中如果要用到图片，常见的处理方法有三种：

普通的色块/文字+图片

压暗处理

模糊处理

Tip 8：使用不同色块组合做出伪立体感

这是所谓“似扁平化”的部分，但是它仍然能给我们的设计带来一种简约而不失美感的感觉，因此我在这里也归并起来总结一下。像我们之前很火的lowpoly以及长投影设计都属于这一类。

最常见的手段是使用不同饱和度的色块打造伪光影效果，来给人立体感。

最后，无论如何，请记住扁平化的核心就是简洁。