网页扁平化设计要点

在设计扁平化风格界面时，特别是在图标的设计时，应该遵循极简原则，复杂的、含义模糊的元素将会造成使用者的困扰。下面介绍网页扁平化设计要点，希望可以帮助到大家。

[图片0]

1、极简的元素

扁平化设计追求的是一切极其的简洁、简单，反对使用复杂的、不明确的元素。在设计扁平化风格界面时，特别是在图标的设计时，应该遵循极简原则。复杂的、含义模糊的元素将会造成使用者的困扰，这与扁平化设计风格直观、简洁的总原则是相违背的。只有采用足够简约的设计元素，才能达到最好的展示效果。

2、贴切的图标

在设计图标时，必须使用与所对应功能紧密关联的图标元素，并且这个元素应是通用的、广为人知的，基本不受地域、种族、文化、语言等因素影响。绝对禁止使用一些定义模糊，寓意不清的元素，或者某些行业特有的，某些领域专用的元素。

3、更多的圆角

在产品设计中，设计师经常会采用圆角设计，以防止在产品使用过程中对使用者造成伤害，这种人性化的设计深受使用者的欢迎。同样的道理，在用户界面设计过程中，使用一些圆角图案，不但会使设计更具亲和力，也会让使用者更容易接受设计者的设计意图。这也符合大众追求圆润、圆满的心理需求。

4、中性之美

在扁平化设计中，色彩的应用极为重要。由于抛弃了拟物化设计风格的渐变、高光等特效，只能使用纯色块来进行设计，那么在色彩的搭配和选择上就极有讲究。为了能让使用者舒适的阅读、使用设计者的作品，不造成眼睛疲劳或者其它不适感，设计师应尽量选择中性的颜色。也就是说，要避免使用饱和度过高的纯色，比如纯红、纯绿、纯蓝等颜色，因为这些颜色在展示的时候会非常刺眼，严重影响使用者的视觉体验。

5、鲜明的对比

在色彩的应用中，要注意颜色之间的对比，只有通过鲜明的颜色对比，才能迅速抓住使用者的眼球，让设计师的意图表现的更加明确。通常的技巧是，通过亮度、色温、对比色、互补色等等手段来实现颜色的对比，应尽量避免使用参数相近的颜色，这样的颜色搭配会使阅读困难，甚至会造成使用者的极度不适。可以通过下面的这张图来体会其中的奥妙:

6、字体的选择

在扁平化设计风格中，因为追求极致的简洁，力求最快速、最直观的表达设计者的意图，所以在字体的选择上，也是以简洁、清爽为标准。应采用通用的、笔划清晰的字体，避免使用字迹不清的字体，比如草书，特殊字体等，也应该避免使用已经不再流通的字体，比如古代甲骨文、篆体字等等(特殊用途除外)。对于中文字体来说，诸如雅黑、幼圆或者细黑等字体都是不错的选择。

7、善用灰色

黑色、白色和灰色在扁平化设计中至关重要，由于采用了大量的色块，难免给用户以眼花缭乱的感觉。所以在有的时候，设计师为了突出重点，可减少色块的使用，而转由使用一种或者二种主要的颜色来突出主体，其它部门则通过灰色来表达。由于灰色与任何颜色都不冲突，所以在设计时，巧妙的使用灰色，将起到意想不到的效果。正确的使用灰色，将使主体更明确和突出，更容易被使用者接受。

8、拟物设计的转型

对于原有的拟物设计风格，如果要向扁平化设计转型，那么只需要将原来设计风格逐一抛弃，分别去除描边、阴影、渐变、高光等等特效，让设计回归本原，用最简洁的几何图型和最清晰的颜色来表达设计者的灵感。当然扁平化设计虽然有许多的优点，但也并不是万能药，并不是所有场合都适用扁平化设计，设计师要根据情况选择正确的设计风格，从而达到最佳的设计效果。

扁平化网页设计需要注意什么

扁平化网站是较年来很流行的一种网站设计风格，这种风格对于像素级别的设计非常到位，对于色彩和空间的把控也非常棒。扁平化设计可以使网页更加耐看，不容易产生审美疲劳，但是也并不是说就可以万试万灵，也需要判定要设计的网站是否适合扁平化风格，并且在扁平化设计时要注意许多问题。

首先，也是大前提，客户认可扁平化网站。如果客户不满意，网站建设岂不是违背了初衷?

其次，网站内容与信息量庞大，需要简洁有序的设计风格时，扁平化设计无疑是一个非常好的选择。

第三，网站设计元素过于“散漫”，但又都不能舍弃之时，扁平化设计可以将其“串联”在一起，并不觉突兀。

第四，部分行业网站，例如IT界亦或是科技界等具有进步精神的行业网站就非常适合扁平化设计。反之像是旅游网站、儿童站点就不太适合。

第五，如果一个网站很依赖视觉形象展示又或是交互功能，那么扁平化设计也会使其受到一定的限制。

最后，扁平化与枯燥呆板完全不同，它只是提倡一种“Less is More”的设计理念，通过简洁让重要元素更加的醒目，布局上同样要下足功夫。

网站扁平化设计的优势与设计要素

近几年，扁平化设计已经在网页设计界掀起了一股热潮，简洁分明的网页设计风格，大胆饱满的配色方案在众多设计中别树一帜，所谓“扁平化设计”是指抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果，从而打造出一种看上去更“平”的界面，善于用颜色去鼓用户探索。

扁平化网站设计

那么这种扁平化设计的优势在哪里呢?快速高效是扁平化设计的一个很重要的基因，在这个信息更新如此之快的互联网时代，人们越来越追求快速高效的生活方式，扁平化设计能去除很多不必要的设计元素，从而使网页加载速度更快，这是很多互联网企业选择扁平化设计的重要因素之一。

此外这种扁平化设计通过颜色的对比，大小不同字号的交互，把信息放在重要位置，淡化不必要的元素，从而使用户能够把注意力很快聚焦在产品信息上，减少了不必要的干扰，且这种简约的设计，有时候往往更受用户喜爱，那么这种扁平化设计通常都有哪些设计要素呢?

[图片1]

一:极简与抽象

扁平化设计天生就是极简的，当设计的灵感并非来源于现实生活，拟物化的设计质感就理所应当被抛弃。那么，剩下的就是用颜色，渐变，阴影，形状，和其他视觉细微之处的框架内容。扁平设计在本质上，迫使设计师更具创造性 —— 设计服务于内容呈现，而不是真实感的呈现。

极简主义的概念并不新鲜，但它因其洁净美观和网站的性能优势最近又开始流行，这随着扁平化设计重生，并使用了鲜艳的背景，简单的设计，并演变成大量留白的更简单的设计。

二:微阴影

使用微阴影就是让用户在这种极细微的视觉效果差中，增加设计内容的元素深度，从而让用户在辨识中看到背景中这种细微差别，从而让这种微阴影脱颖而出，保持这种方式柔和感和隐蔽性，而且在视觉中保持色调基本一致的简洁化。

三:虚拟按钮

扁平化中使用这种按钮设计，可以让内容获得聚焦效果，例如我们设计按钮采用规则椭圆形就很容易引起用户注意，把这种按钮方式在显眼位置，就很容易让用户点击。而且颜色配色就需要跟背景形成区别，字体采用黑或白字体方式，让按钮和其字体都在外观上取得一致性。

四:渐暖变色渐变效果

采用渐暖的渐变效果，很容易让这种效果区别背景色和主基调，不再喧兵夺主，运用这种渐变效果很容易达到颜色过渡效果。

实际上扁平化设计并没有公认的量化标准，它是设计元素的一种可以运用在各种更高层次的设计体系。将扁平化的设计元素嵌入各种设计之中常常有意想不到的惊喜，例如一个有过多内容的网站，可以适当运用扁平化设计元素以适应传统的设计方案。

扁平化设计相关知识

1. 长阴影

在按键等大多数 UI 设计元素中，长阴影常常伴随亮色调的控件出现。

阴影常常比较宽，且以 45 度角倾斜，锋利的边角使其一眼可辨。对阴影恰到好处的应用可以起强调作用并使扁平的图标更具立体感。

然而，这种长阴影有逐渐被淡雅的阴影取代的趋势。拭目以待更短的阴影效果在未来的表现。

2. 亮色调

有趣的是，扁平化设计的出现使得大胆靓丽的色彩运用得以重生。设计师们比以前更多地运用了有趣又充满活力的颜色。

事实上，一些设计师们甚至建立了专门的网站用以展示他们独特的配色方案。

3. 简化排版

说到排版，扁平化的排版不仅仅是把字体替换成无衬线的 Helvetica 或黑体。

当然，扁平化的排版应采用简单易读的字体，这意味着无衬线和等宽字体称为必然选择。最好的字体应该让人将注意力集中到内容本身。

尽管字体设计也是艺术的一种，设计师们应该把可读性放在第一位。扁平化设计使设计师们更加注重字体的选择。甚至衬线字体也被简化。

4. 虚拟按键

透明且可点击的虚拟按键，在提供了可视化的交互方块的同时又不会遮挡住 UI 设计。

虚拟按键由于透明，简洁的特性，并不会吸引太多注意力。起初，虚拟按键以拟物设计革命者的姿态出现，其后在形状与细节等方面有了长足的进步。虚拟按键与扁平化设计相辅相成，构成了极简与抽象的设计风格。

5. 极简与抽象

扁平化设计天生就是极简的。当设计的灵感并非来源于现实生活，拟物化的设计质感就理所应当被抛弃。

那么，剩下的就是用颜色，渐变，阴影，形状，和其他视觉细微之处的框架内容。扁平设计在本质上，迫使设计师更具创造性 —— 设计服务于内容呈现，而不是真实感的呈现。

极简主义的概念并不新鲜，但它因其洁净美观和网站的性能优势(如降低网页加载时间)最近又开始流行 。这随着扁平化设计重生，并使用了鲜艳的背景，简单的设计，并演变成大量留白的更简单的设计。

展望

扁平化设计最初的概念是用一个个没有特征且清晰可辨的方块呈现设计框架。但在与其他流行的设计语言融合之后，扁平化设计本身已经发生了巨大改变。

扁平化设计一夜之间成为业界潮流，但它的发展成熟无疑还需要一些时日。扁平化设计的早期形式非常激进的想要做出与拟物化渭泾分明的极简设计，但现在的扁平化设计逐渐加上了修饰与质感。

大多数精美的近乎扁平化设计设计运用在网页领域，运用“视差滚动”可以在一个屏幕中显示丰富的内容。

扁平化设计不会过快消失，只是会增加动画与交互设计，以适应更加复杂的网站。众所周知，“设计追随内容”，扁平化则是呈现内容的最佳设计范式。

网页设计以实用为第一追求，每一个按键，点击与滑动都应该有明确功能与视觉反馈。最重要的是，UI 控件需要有统一的风格，让用户忽略页面与设备的差异。这些基础控件将被提取出各自特点构成扁平化的图标。

看看「汉堡包式菜单按钮」的出现——无论你是否同意这种做法，无疑，现在其已经成为司空见惯的导航符号。

扁平化设计也在渐渐加入其他细节。

许多扁平化设计或近乎扁平化设计的网站包含大量图片，这在传统网站上是很少见的。扁平化的配色及排版与图片完美结合，这不需要对图片有太多修饰就可以获得现代化的风格。

比如，有些网站运用近乎扁平化设计设计风格，在网页中采用深色背景图片，扁平化的按钮，导航及字体，令网站非常直观简洁，现代且易用。