注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

连BAT设计师都在使用的视觉动线技巧(上)原创: skys 我们的设计日记  

2018-07-16 10:43:28|  分类: UX交互设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

连BAT设计师都在使用的视觉动线技巧(上)

原创: skys 我们的设计日记 今天



不知道大家有没有打开一个网站或者一个APP,但是不知道去看那里,因为页面中有太多的信息内容,我们很难决定,从哪里开始,然后我们就很容易关闭这个APP或者网站。大家都知道在互联网时代,用户不是在读书,在读我们设计的每段文字,他们是扫描,扫视!扫描意味着他们只有在眼睛被吸引的时候才会停下来阅读。


作为设计师,我们需要很好的控制用户在使用我们产品的过程中,他的视觉浏览路径,需要去了解我们的眼睛如何处理界面信息,后面两篇我会结合我的一些学习和大家交流下在视觉动线,在设计中如何去运用。


   什 么 是 视 觉 动 线 ?  




   视 觉 动 线 有 几 种 类 型 ?  


上面和大家介绍了什么是动线,其实就是人们眼睛在处理信息时候的顺序,设计中我们需要去了解这些用户视线规律,从中去创造更好的体验,那么回归到设计中,有哪几种动线类型呢?


1.F类型






2.Z类型




Z类型顾明思议,从左上角开始到右上角,保留着从左到右的习惯,然后眼睛会寻找到最后部分,寻找到页面的底部。


3.对角线类型






对角线类型,是在遵从从右到左阅读习惯的基础上,一个更优秀的布局形式,由于我们已经习惯了从左上角到右下角的扫描习惯,这里面包括4个项线。


   Z 类 型 特 点   




从字面意思可以看出,Z形布局是沿着Z的图形追踪,用户在扫描时候从左到右,从上到下,这是眼睛在页面中的自然移动模式





▲ 在UBER的官网设计中,就是一个很典型的Z形引导布局,首先遵从用户习惯从左至右,所以左边放公司品牌LOGO,右侧是页面中的司机和乘客登录入口,下面是氛围图片区域,左下角是新用户注册入口,这是一个典型的Z布局,在很多网站设计中都运用比较多



▲ Z形结构不会把注意力放在文字为核心,往往是突出行动按钮,在一些机简的设计项目中运用比多,往往只需要一个简单的图片,和文字,关键的行地点案例,作为突出即可,遵循这种自然规律!



▲ 这种结构很有效,因为当用户在这种模式上移动的时候,就会出现一个虚构的Z形状



▲ salesforce也是采用Z布局,从左到右分别是LOGO和行动点,下来后从左到右是导航菜单和按钮



▲ Z布局,在平时网页设计中尤其运用频繁,它的规则适用于大多数网站设计,在传递品牌同时,也能很好的凸现内容



▲ 在最早期的时候,杂志,报纸,里面没有任何图片,文字和标题,只有长篇文字,列和列,在这么一个很枯燥设计中,用户一般会遵循Z型来浏览


   特 殊 的 Z 类 型 布 局   



这种特殊Z布局叫之字型布局,我们可以理解为Z的重复排序,有一些的Z型布局出现,用户的路线,从左到右,再开始从左到右,这种有一个Z运动的浏览奇怪我们叫做之字型动线。




   怎 么 运 用 ?  


前面有聊到视觉动线,以及经典的动线Z,那么在设计中我们如何去运用呢!当我们设计一个网站或者海报时候,在布局之前先问自己几个问题:


  • 1.当用户打开这个页面时候,你希望他注意到那些信息?

  • 2.你希望他们以什么样顺序查看你的信息?

  • 3.你想让他做什么?


Z布局的前提其实很简单,在页面上加上Z,然后把重要的信息放到Z上,让用户在扫描路径上看见这些重要元素!所以Z视觉动线,最核心的是你需要传递给用户那些有价值的信息。





▲ Eveynote就是一个很好的案例,在用户打开这个页面,希望用户注意到品牌,然后去注册或者登录,通过文字简单了解这个产品信息:


  • 1.图中LOGO是起点 

  • 2.右上角按钮是行动

  • 3.信息内容,这个产品是做什么的

  • 4.注册登录,页面核心操作


   Z 动 线 缺 点   

 

Z型结构也有缺点,作为控制用户视线移动的模型,它很容易受到外界元素干扰,并且让用户实现脱离我们设定好的轨迹,因为用户在浏览时候总是容易被图片,或者明亮的元素吸引,如果你准备运用Z动线时候,一定需要平衡好这些元素,不要过多干扰我们核心功能操作,否则达不到好的预期。


   总 结   


1.动线作为我们控制用户的移动模型,作为设计师我们需要刻意制造用户浏览的动线。


2.在设计中常用动线有Z、F、对角线动线形式,我们需要了解每一个动线设计的含义和使用场景。


3.Z字型动线,在网页中运用比较多,但是在使用前我们先要确定我们网站核心目标,然后把核心内容组织到我们动线上。

  评论这张
 
阅读(10)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018