扁平化网页设计技巧

扁平化网页设计技巧

以下就是扁平化网页设计技巧等等的介绍，希望为您带来帮助。

什么是扁平化设计

扁平化设计是一种极简主义的美术设计风格，通过简单的图形、字体和颜色的组合，来达到直观、简洁的设计目的。扁平化设计风格比较常见于传统媒体，比如杂志、公交指示牌等处。随着计算机网络技术的发展，扁平化设计风格越来越多应用于软件、网站等人机交互界面，以迎合使用者对信息快速阅读和吸收的要求。与扁平化设计风格相对的是偏向写实的拟物化设计风格。要设计出好的扁平化界面，必须抛弃所有拟物风格的技巧。我们可以通过一张图来了解拟物化设计的主要特点，把这些特点统统扔掉，就是扁平化设计的特征：

极简的元素

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

贴切的图标

在设计图标时，必须使用与所对应功能紧密关联的图标元素，并且这个元素应是通用的、广为人知的，基本不受地域、种族、文化、语言等因素影响。绝对禁止使用一些定义模糊，寓意不清的元素，或者某些行业特有的，某些领域专用的元素。比如在下面这张图中，如果设计师要表达的是“分享”这一功能，那么显然右侧的图标更具有通用性：

更多的圆角

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

中性之美

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

鲜明的对比

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

字体的选择

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

善用灰色

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

拟物设计的转型

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

网页扁平化设计分析

爽简约，去繁存简

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

简洁：

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

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

高端：

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

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

大气：

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

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

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

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

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

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

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

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

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

扁平化网页的设计方法

这两年的时间内扁平化网页越来越受到大部分人的喜爱，很多企业也想向这方面发展，在扁平化的设计中有一个重要的项目就是页面上空间的运用，今天我们就给大家讲讲网站设计中扁平化网站的设计技巧。

当一个元素使用不对称的空间，它对周围的其他元素。它会显得更加有活力，如果你设计一个网页，一个链接或按钮的要求比别人更多的关注领域是特别有帮助的。

今天我们要仔细看看不对称表示通过对比，间距和布局。我们观察对比思考，如何关注空间的驱动器。

不对称也可以关注内部关系如图像缩略图或文本对齐。例如，一个图像画廊缩略图可以展示5里中间的拇指略大于其他人，主要是用来捕获注意。不对称是伟大的关注一个特定的区域在页面或页面中的特定元素。

而且，就像我们描述的免费电子书人眼的Web UI设计，在不对称时候，不对称的缘故是有用的。

让我们仔细看看不对称表示通过对比，看间距和布局。

观察对比

通过去除杂念，你强迫用户只关注什么是立即可见的。

你可能将影响到这些地区的设计背景梯度甚至jQuery的动画。这些效果可以用在一个或两个元素使他们从别人的立场。

我们最喜欢的一本影响生活在主页的例子素描由波希米亚编码。主页将黑暗与光明的颜色融合成一个统一的布局对比。

在头的部分，你会发现有两个按钮：一个免费试用和其他购买软件。两个按钮是蓝色的，采取了相同数量的空间。然而，免费试用按钮用一个“空”的背景，这是通常被称为幽灵按钮。上层的黑暗头，免费试用按钮似乎失去焦点的背景。

因为购买按钮用淡蓝色的背景和白色文字，它代表了坚强，大声对黑暗的背景。当快速扫描你的眼睛在头部，这是很明显的购买按钮，立即吸引了你的注意力。这是通过色彩的选择造成的但也从白色空间之间的元素的添加。

垂直和水平的白色空间的使用按钮出现在标题文本分离。由于一个按钮比其他明亮，自然是因为有足够的空间和方式，没有多少人注意捕获。

你可以在页脚区看到一个类似的按钮风格：

在这种情况下，用户只可以选择提交他们的电子邮件或隐瞒信息。

因为草图要你提交你的电子邮件后尽可能快地键入，间距更严格的输入框和提交按钮之间。这是因为当你降低Fitts定律的距离(和大小是固定的)，你的速度就要元素之间的时间。

最后，注意输入形成不对称的大小相比，提交按钮也吸引你的眼睛到页面的一部分，而这正是素描的希望。

使用白色空间你的优势吸引到特定的页面元素，流浪的眼睛。实验发现什么是最好的，尽量的A / B的间距不同值的测试方法不同。

这里是从素描的网站收集到的一些一般的笔记：

对比并不总是指颜色。它也可以指不同的元素空间，尺寸，和网页上的其他元素的相对位置。

空的空间可以是明显的或不明显的依赖于上下文。

周围的元素，其他元素的天然的知名度起到了很大的作用。

对称创造记忆与和谐，而不对称的关注。相应的平衡。

空间驱动的注意

你可以找到一个稍微不同的例子在主页，为iPad数字绘画工具。通过浏览网页，你会发现整个布局是黑暗和功能大大超大的页面元素。

设计演示如何把焦点集中到奇异的元素在一个非常大的页面。截图，演示绘画，和特征都拿出自己的部分。

空格分隔的文本和视觉内容。本设计是在其使用的文字颜色区分标题特别注意(高对比度)和一般网页文字(低对比度)。

通过将一页分成几部分，你创造了一个天然的内容层次。然后将这些部分具有独特风格(全屏背景，超大字体，APP截图)的分歧更加明显。

记住，不是所有的网站可以从内容大部门效益，这似乎是一个非常流行的趋势之间的设计。看起来很棒当正确执行。

交替布置

表面上，交流内容似乎讨厌因为你强迫读者的目光跳跃。但由于内容是隔开的那么好，它更容易阅读z-pattern可能比你想象的。

该模式也迫使游客停留在他们的脚趾因为设计不是填鸭式的信息。当然，这种模式只可能因为雅致的白色空间划分出路径扫描。

扁平化设计的实用小技巧

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

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

Tip 2：使用扁平化图标

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

Tip 3：色块的形状和颜色

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

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

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

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

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

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

Tip 4：色块的组合

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

Tip5：字体的选择

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

更细致的字体可参考：《超实用!有哪些活泼而高端且不俗套的中文字体?》

Tip6：注重排版

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

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

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

Tip 7：图片的使用

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

普通的色块/文字+图片

压暗处理

模糊处理

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

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

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

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

规则是用来打破的，但在打破规则之前，你需要知道规则是什么。无论是设计的四大原则还是扁平化的这几条tips，都不是不可挑战不可违逆的，你可以大胆跳出这些规则，创新需要如此，但是在此之前，掌握这些规则是必须的。