这两年的时间内扁平化网页越来越受到大部分人的喜爱,很多企业也想向这方面发展,在扁平化的设计中有一个重要的项目就是页面上空间的运用,今天我们就给大家讲讲网站设计中扁平化网站的设计技巧。
当一个元素使用不对称的空间,它对周围的其他元素。它会显得更加有活力,如果你设计一个网页,一个链接或按钮的要求比别人更多的关注领域是特别有帮助的。
今天我们要仔细看看不对称表示通过对比,间距和布局。我们观察对比思考,如何关注空间的驱动器。
不对称也可以关注内部关系如图像缩略图或文本对齐。例如,一个图像画廊缩略图可以展示5里中间的拇指略大于其他人,主要是用来捕获注意。不对称是伟大的关注一个特定的区域在页面或页面中的特定元素。
而且,就像我们描述的免费电子书人眼的Web UI设计,在不对称时候,不对称的缘故是有用的。
让我们仔细看看不对称表示通过对比,看间距和布局。
观察对比
通过去除杂念,你强迫用户只关注什么是立即可见的。
你可能将影响到这些地区的设计背景梯度甚至jQuery的动画。这些效果可以用在一个或两个元素使他们从别人的立场。
我们最喜欢的一本影响生活在主页的例子素描由波希米亚编码。主页将黑暗与光明的颜色融合成一个统一的布局对比。
在头的部分,你会发现有两个按钮:一个免费试用和其他购买软件。两个按钮是蓝色的,采取了相同数量的空间。然而,免费试用按钮用一个“空”的背景,这是通常被称为幽灵按钮。上层的黑暗头,免费试用按钮似乎失去焦点的背景。
因为购买按钮用淡蓝色的背景和白色文字,它代表了坚强,大声对黑暗的背景。当快速扫描你的眼睛在头部,这是很明显的购买按钮,立即吸引了你的注意力。这是通过色彩的选择造成的但也从白色空间之间的元素的添加。
垂直和水平的白色空间的使用按钮出现在标题文本分离。由于一个按钮比其他明亮,自然是因为有足够的空间和方式,没有多少人注意捕获。
你可以在页脚区看到一个类似的按钮风格:
在这种情况下,用户只可以选择提交他们的电子邮件或隐瞒信息。
因为草图要你提交你的电子邮件后尽可能快地键入,间距更严格的输入框和提交按钮之间。这是因为当你降低Fitts定律的距离(和大小是固定的),你的速度就要元素之间的时间。
最后,注意输入形成不对称的大小相比,提交按钮也吸引你的眼睛到页面的一部分,而这正是素描的希望。
使用白色空间你的优势吸引到特定的页面元素,流浪的眼睛。实验发现什么是最好的,尽量的A / B的间距不同值的测试方法不同。
这里是从素描的网站收集到的一些一般的笔记:
- 对比并不总是指颜色。它也可以指不同的元素空间,尺寸,和网页上的其他元素的相对位置。
- 空的空间可以是明显的或不明显的依赖于上下文。
- 周围的元素,其他元素的天然的知名度起到了很大的作用。
- 对称创造记忆与和谐,而不对称的关注。相应的平衡。
空间驱动的注意
你可以找到一个稍微不同的例子在主页,为iPad数字绘画工具。通过浏览网页,你会发现整个布局是黑暗和功能大大超大的页面元素。
设计演示如何把焦点集中到奇异的元素在一个非常大的页面。截图,演示绘画,和特征都拿出自己的部分。
空格分隔的文本和视觉内容。本设计是在其使用的文字颜色区分标题特别注意(高对比度)和一般网页文字(低对比度)。
通过将一页分成几部分,你创造了一个天然的内容层次。然后将这些部分具有独特风格(全屏背景,超大字体,APP截图)的分歧更加明显。
记住,不是所有的网站可以从内容大部门效益,这似乎是一个非常流行的趋势之间的设计。看起来很棒当正确执行。
交替布置
表面上,交流内容似乎讨厌因为你强迫读者的目光跳跃。但由于内容是隔开的那么好,它更容易阅读z-pattern可能比你想象的。
该模式也迫使游客停留在他们的脚趾因为设计不是填鸭式的信息。当然,这种模式只可能因为雅致的白色空间划分出路径扫描。
看网页Wunderlist,我们可以看到这种非对称的图案在白色的空间出现。不对称的间距是认真执行,使它看起来有趣而不被激怒。
我们可以从网站设计模式的使用空间展示Wunderlist学到很多:
- 不对称,其目的试图提请注意到页面的某些地区时。
- 在一个重复的图案成为对称不对称。
- 文字或图形之间的空间格局也将出现一个大的模式。
- 白色的空间要浏览的内容更容易和更可预见的。