[翻圈圈]Daily UX Crash Course系列5 — — 功能性布局设计(1)

#17 — Z-Pattern, F-Pattern, and Visual Hierarchy Z-模式,F-模式和视觉层次

我们很容易能够想象用户兴高采烈地读你写的每个字和你画下的每个像素。然并卵,真正的用户是不会这么做的,他们只“浏览”。“浏览“意味着他们只会在吸引他们目光的地方停住。那么今天我们就一起来学习一下“浏览”的模式:

Z-模式,F-模式和视觉层次

Z-模式

从我能想到的最无趣设计讲起:一份完全是文字的报纸。整一个故事,没有标题,没有图片,没有断开也没有引用。只有长篇文字,列与列之间,对角到对角之间。

像这样的设计 — — 我希望永远都不会是出自你手 — — 用户一般会Z型浏览信息。

太无聊了!Zzzzzz……

我用最后5天的时间来教你视觉设计的原则,所以你会知道怎么做能让布局更合理。

啊哈!

如果我们添加一个大的标题(视觉重量),创建一列来引导(线条张力),然后分章节(重复),这样我们可以引导用户靠近著名的F模式进行阅读。

上面彩色的图像部分显示了眼球追踪的结果,叫“热地图”,记录用户到底看了哪里,他们视线停留越久的地方,在热地图上就越“热”。

相似的布局=相似的结果

F模式的创建让Nielsen Norman Group名噪一时。尽管他们没有进一步的“突破”,不过他们发表了许多相关的文章。

F-模式的运作方式:

从左上角开始,像Z-模式一样。

阅读或浏览文章的第一句(标题)话。

浏览第一列,看看能不能找到值得阅读的信息。

仔细阅读有趣、有用的信息。

继续往下浏览。

通过不断重复以上步骤,热地图看起来就像个F或者E,因此而得名。

为什么这很重要?

你可能会注意到某些部分自然而然地能受到很多关注,而某些部分却容易被忽略。这就是我们所说的布局上的“强”和“弱”。

一个在左上方的按钮会比在右上方的按钮有更高的点击率。而右上方的按钮又会比左下方的按钮有更高的点击率,而左下方按钮的点击率又比右下方的更高。而这四个方位的按钮又都比随意放在中间的按钮有更高点击率,除非你做点手脚。

你最好还知道“每一块”内容和每一列都最好能有F-模式。并不一定每一页都要F-模式,但知道这点逼格明显高点。

视觉层次

当你通过排版来突出文本的重要性,使用颜色来高亮按钮,给重要的元素添加的视觉重量,这个时候你就创建了视觉层次 — — 让用户更容易浏览的设计手法。我们的眼睛从重要的东西到重要的东西,而不是漫无目的地浏览。

一些设计师会觉得视觉层次是个好东西因为它让设计看起来更好看,但真相其实是它让用户感觉更好,因为更容易浏览了。

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

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.