扁平化网页的设计方法-页面空间的运用

   这两年的时间内扁平化网页越来越受到大部分人的喜爱，很多企业也想向这方面发展，在扁平化的设计中有一个重要的项目就是页面上空间的运用，今天我们就给大家讲讲网站设计中扁平化网站的设计技巧。
        当一个元素使用不对称的空间，它对周围的其他元素。它会显得更加有活力，如果你设计一个网页，一个链接或按钮的要求比别人更多的关注领域是特别有帮助的。

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

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

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

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

观察对比

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

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

     

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

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

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

 

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

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

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

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

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

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

• 对比并不总是指颜色。它也可以指不同的元素空间，尺寸，和网页上的其他元素的相对位置。
• 空的空间可以是明显的或不明显的依赖于上下文。
• 周围的元素，其他元素的天然的知名度起到了很大的作用。
• 对称创造记忆与和谐，而不对称的关注。相应的平衡。

空间驱动的注意

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

设计演示如何把焦点集中到奇异的元素在一个非常大的页面。截图，演示绘画，和特征都拿出自己的部分。
空格分隔的文本和视觉内容。本设计是在其使用的文字颜色区分标题特别注意（高对比度）和一般网页文字（低对比度）。

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

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

交替布置

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

 

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

看网页Wunderlist，我们可以看到这种非对称的图案在白色的空间出现。不对称的间距是认真执行，使它看起来有趣而不被激怒。

我们可以从网站设计模式的使用空间展示Wunderlist学到很多：

• 不对称，其目的试图提请注意到页面的某些地区时。
• 在一个重复的图案成为对称不对称。
• 文字或图形之间的空间格局也将出现一个大的模式。
• 白色的空间要浏览的内容更容易和更可预见的。