小男

11先5走势图:用“Z”型模式阅读网页的内容

小男 版式构图 9952浏览

河北11选五开奖结果 www.p49oh.cn 本文介绍在网页设计中使用“Z”型模式创建视觉层次结构的理论和实践。

Image title

 

很容易想象每个用户在兴奋地阅读你写的每封信时。其实他们不是在阅读而是在扫描。

用户不读取网页,他们只是扫描。

扫描意味着只有当他们的视角集中在一些事物上时才会停下阅读。

作为一名设计师,你可以很好地控制人们在查看你所设计的网页的外观。为了创造出访客眼睛要遵循的正确途径,你需要了解我们的眼睛是如何处理信息的。在本文中,我将介绍在网页设计中使用“Z”型模式创建视觉层次结构的理论和实践。

 

什么是“Z”型模式,它的工作原理是什么?

正如你所期望的,“z”型模式的布局遵循字母Z的形状?!癦”型模式的设计跟踪了人眼扫描页面时的路线——从左到右,从上到下:

首先,人们从左上角到右上角进行扫描,形成一条水平线

第二步,向页面的左下侧,创建一条对角线

最后,再次向右转,形成第二条水平线

当观众的视角以这种模式移动时,它形成一个虚构的“Z”字形:

Image title

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?“Z”型布局的一个例子,图片来源:?Tutplus

 

这种模式是有效的,因为大多数西方读者会像扫描一本书一样扫描你的页面——从上到下,从左到右。

 

在哪里使用?

“Z”型模式的扫描发生在不以文本为中心的页面上(对于文本繁重的页面,如文章或搜索结果,最好使用“F”型模式(?F-Pattern))。这使得“z”型模式很好地解决了最小化复制及需要被看到的几个关键元素的简单设计。以主要围绕一个或两个主要元素为中心的简约页面或登录页面来实现“Z”型模式,鼓励用户遵循这种方法。

Z型布局在设计项目中是真正的闪耀,其中简约性和号召性用语是最重要的原则。

Image title

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Facebook的登录页面是Z型布局的一个例子

 

如何使用它?

在开始设计页面布局之前,首先要查找以下问题的答案:

当访问者在登录页面时,你希望他们注意什么信息?

你希望他们以什么顺序来查看信息?

你想让他们做什么?

Z型布局的前提其实很简单:在页面上加上字母Z。理想情况下,你希望人们首先查看最重要的信息,再次查看第二个重要的信息。因此,重要的元素应该沿着扫描路径放置,访客应在正确的时间被提供正确的信息。

 

创建流程是至关重要的

流程是将你的视线从一个页面的一部分引导到另一个你想要移动的方向。 通过视觉重量和视觉方向的组合创建流程。创建流程时要注意以下几个最佳做法:

第1步:第1步是观众旅程的起点。这是你的标志的黄金地段。

第2步:首先沿着Z的顶部放置你希望读者最先看到的东西。自然地将视线遵循Z字型的路径,将次要的“行为召唤”目标放在最后。将更多的视觉重量放在第2步的元素中——让按钮(或另一个关键元素)鲜明,吸引用户注意力并让其沿着“Z”型路径引导用户视线。

页面的中心区域:这个区域是来填补用户感兴趣的内容,同时将其视线向下延伸到下一行。例如,你可以将英雄图像放置在页面的中央,以分离顶部和底部,并沿Z路径引导用户视线。

第3步:第3步的目的是引导用户在第4步进行最后的行为召唤。例如,如果你的网页宣传你想要销售的某些产品,你希望潜在客户在看到“立即购买”按钮之前看到可以说服他们购买的副本。因此,用第3步为他们提供福利或其他有用的信息。

第4步:第4步是终点线,它与第3点之间的行应包含将用户的视线推向角落的内容。第4点本身就是你的主要行为召唤的理想场所。

Image title

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?建议的Z型布局

 

在下面可以看到Basecamp和Evernote的两个Z型布局很好的例子。

Image title

Image title

 

右曲折模式

关于Z型模式的有趣且有用的是,我们可以更多地看到它是作为一个Z型的系列在移动而不是一个大的Z型移动来扩展这种模式。

正如你可以在下面看到的,这正是Dropbox通过引导用户通过几个关键产品功能,并用“免费注册”号召性用语按钮完成他们重复的Z型布局的功能。 在此布局中,“了解更多”按钮起辅助呼叫按钮的作用,可帮助读者进入下一个相关页面,而无需阅读完整副本。

Image title

 

结论

Z型布局提供了一些不错的东西,这正是它被许多网站采用的原因。 你可以利用Z型模式将重要信息放在视线自然而然能看到的地方,以增加其视觉突出。记住要先沟通信息。

 

 

原文地址:Medium

译文地址:UI中国

作者:Nick?Babich

译者:SKYUI

 

转载请注明:河北11选五开奖结果 » 用“Z”型模式阅读网页的内容

登录收藏
 
你可能喜欢的:
画册封面设计的6种常用形式画册封面设计的6种常用形式
激发灵感的50张精美纸质邀请函设计(二)激发灵感的50张精美纸质邀请函设计(二)
激发灵感的50张精美纸质邀请函设计(一)激发灵感的50张精美纸质邀请函设计(一)
为什么不能将视觉主体做的明显一些?为什么不能将视觉主体做的明显一些?
【拿来就用】20款婚礼婚庆网站模板, 轻松打造幸福满满的网站设计【拿来就用】20款婚礼婚庆网站模板, 轻松打造幸福满满的网站设计
设计语言 - 文字编排(行长)设计语言 – 文字编排(行长)
设计语言 - 文字编排(行高)设计语言 – 文字编排(行高)
平面设计中的点、线、面平面设计中的点、线、面
快速提升设计感的7个版式小妙招快速提升设计感的7个版式小妙招
你是在做设计还是仅仅在堆砌素材你是在做设计还是仅仅在堆砌素材
?
  • 网络医疗广告套路太多 消费者讲述就医被坑经历 2019-04-25
  • 【理上网来】以创新为基点,是“过坎”的关键 2019-04-15
  • 军队资源战略管理研究 2019-04-15
  • 新时代建筑的审美需要 2019-04-14
  • “智能农业”在日本有喜有忧 2019-04-14
  • 5G标准出炉 明年有望商用 2019-04-10
  • 本地人自豪 外地人向往 2019-04-01
  • 女性之声——全国妇联 2019-03-30
  • 我省进入毒蘑菇中毒高发季 省疾控中心发布安全警示 2019-03-29
  • 安徽秸秆综合利用引来“金凤凰” 两天签下275亿大单 2019-03-27
  • 不好意思了,忘记还有赌球一说。[哈哈] 2019-03-27
  • 紧盯节点,打赢反“四风”持久战(前沿观察) 2019-03-25
  • 您访问的页面找不回来了 2019-03-25
  • 昆明母婴室地图出炉啦!公众场合喂奶不再羞答答 春城壹网 七彩云南 一网天下 2019-03-24
  • 大学毕业生是不是越来越过剩?当然大学毕业生可以在多种行业就业,比如农村、服务业等等。不过,过剩还是一种极大的浪费。 2019-03-21
  • 77| 605| 585| 946| 224| 689| 469| 252| 480| 675|