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

标签：

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

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

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

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

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

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

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

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

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

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

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

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

空间驱动的注意

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

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

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

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

交替布置

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

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

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

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

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

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

标签：

原文地址：http://www.cnblogs.com/mivi/p/5401034.html