扁平化网页设计要点

第页扁平化网页设计要点扁平化网页〔制定〕要点

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

一、什么是扁平化制定

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

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

二、制定要点

1.色彩

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

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

2.排版

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

3.字体

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

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

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

网页扁平化制定分析

去繁存简。

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

简洁：

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

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

高端：

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

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

大气：

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

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

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

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

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

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

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

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

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

扁平化制定在网页中的运用

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

例如，Windows、MacOS、iOS、Android系统的制定已经往扁平化制定发展。其制定语言有MaterialDesign、ModernUI等。

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

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

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

不同的公司团体都尝试用过其他名称，例如minimaldesign,honestdesign，而微软公司甚至称它作"authenticallydigital'。

优点

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

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

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

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

缺点

扁平化反对者认为：

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

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

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

扁平化制定的有用小技巧

Tip1：关于高光、渐变和投影

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

Tip2：使用扁平化图标

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

Tip3：色块的形状和颜色

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

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

有的人在扁平化制定中更喜爱使用带有圆角的基础形状。

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

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

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

Tip4：色块的组合

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

Tip5：字体的选择

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

Tip6：注重排版

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

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

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

Tip7：图片的使用

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

一般的色块/文字+图片