[翻圈圈]Daily UX Crash Course系列4 — — 视觉设计原则(5)

#16 — Alignment & Proximity 排列和邻近

最后一个设计原则是关于如何再不增加其他元素的情况下排列元素并使之自带表达。听起来很复杂,其实我们每天都能看到:排列和邻近原则。

排列好的鸭子看起来联系更紧密。

靠的越近的鸭子看起来联系更紧密。

今天,我们就要跟情怀满分的橡皮鸭说拜拜了(不舍-。-),但首先它们还会再次贡献玉身于两组视觉示例当中,它们不仅仅是靠脸吃饭的!

排列

在图一中我们看见一组帅得惊为天人的橡皮鸭,但由于它们排列的顺序我们似乎能看到它们各种关系:

我们看到两列。

最左边和最右边的鸭子看起来像被分开了。

中间两只鸭子显得最团结。

所有的鸭子似乎都向着同一个方向。

如果有动态效果,最左边的那只可能要掉队了。

如果有动态效果,最右边那只貌似是带着头。

这6只鸭子完全一样,是不同的排列才有了这些效果。

有类似功能的按钮也能被排列。不同层级的内容可以被排列。信息通过纵向和横向排列可以创造出复杂的含义。

邻近原则

两个物品之间的亲密度或距离可以营造出它们的相关程度。那个距离就被称为“邻近排列”。

在图二中你可以看见6只完全相同的鸭子没有排成行也没有排成列,但却能被我们识别为2组。每个组的鸭子会被认为是“在一起的”像一个队伍或者一家人。创造出这种效果就是多得“邻近排列”。

在你的设计中,让相关的元素靠近,让不相关元素远离。

例如:抬头标题、正文和按钮是同一套动作相关元素 — — 像购买或者应用下载 — — 通常都会设计成“一块儿的”。这意味着让用户免去阅读就能明白这些元素是在同一个语境中的。

原文地址:http://thehipperelement.com/post/73500942856/daily-ux-crash-course-16-of-31

Show your support

Clapping shows how much you appreciated Minting Xu’s story.