欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

用“Z”型模式,阅读网页的内容

发布时间:2017:06:22 10:21:54 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1404个文字,预计阅读时间4分钟
导语
Z型布局提供了一些不错的东西,这正是它被许多网站采用的原因。 你可以利用Z型模式将重要信息放在视线自然而然

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

用“Z”型模式,阅读网页的内容

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

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

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

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

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

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

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

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

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

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

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

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

  在哪里使用?

用“Z”型模式,阅读网页的内容

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

用“Z”型模式,阅读网页的内容

  Z型布局在设计项目中是真正的闪耀,其中简约性和号召性用语是最重要的原则。 Facebook的登录页面是Z型布局的一个例子。

  如何使用它?

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

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

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

  你想让他们做什么?

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

  创建流程是至关重要的

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

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

  第2步:首先沿着Z的顶部放置你希望读者最先看到的东西。

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

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

  第3步:第3步的目的是引导用户在第4步进行最后的行为召唤。

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

  第4步:第4步是终点线,它与第3点之间的行应包含将用户的视线推向角落的内容。

  第4点本身就是你的主要行为召唤的理想场所。

用“Z”型模式,阅读网页的内容

  建议的Z型布局

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

用“Z”型模式,阅读网页的内容

用“Z”型模式,阅读网页的内容

  右曲折模式

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

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:完美界面设计秘诀:界面设计的八大黄金法则

下一篇:你的产品有容错性设计吗?

  • 18876 文章总数
  • 2196313访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信