• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 赶紧收下!连BAT设计师都在使用的视觉动线技巧(上)

赶紧收下!连BAT设计师都在使用的视觉动线技巧(上)

作者:sky 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含动线设计,视觉动线,视觉设计等相关知识,sky希望在学习及工作中可以帮助到您

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

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

一、什么是视觉动线?

从字面意思,看着很高大上,大家可以想象一部电视剧,每一集从一个场景转移到另外一个场景,通常情况下,这些场景会有连续性,每一个场景之间有顺序。

上海迪士尼里其中一个项目加勒比海盗,在迪士尼的设计中,动线往往是里面很重要一个环节和流程,观众爽不爽,刺激不刺激都在动线视觉中。

进场:从进场开始,光线越来越亮,门口用巨大的海盗建筑和石头的海盗旗,慢慢把你带入到电影里面的场景。

入口:潮湿的墙壁,昏暗的灯光,金币宝箱的感觉,破旧的木头,低沉的音乐让你瞬间进入电影世界。

航行:阴沉的灯光,骷髅人和你招手,发出着让人惊悚的笑声,同时还伴随海水的声音,让我们的感官和听觉都竖起来了。

氛围:阴暗的灯光里面到处是悬崖峭壁,以及反派的出现,水流也越大越大,瞬间把我们置身于电影之中 。

氛围:水面慢慢平静,眼前突然出现一搜大船,船体突然失去重力,伴随着巨大的海浪声。

高潮:昏暗的场景突然明亮起来,巨大的海面和行使的船只就在眼前。

大高潮:船长和他的战士就在这里互相作战,伴随着浓浓炮火的声音。

收尾:伴随着音乐声,和平静的海水声音慢慢把观众带回现实。

上述就是迪士尼在动线上的经典设计,整个路径伴随着听觉,视觉,让你感受非常好,我们做产品也是如此。

最近新零售很火,特别是各种生鲜店,那么这些店在设计时候为了保证生鲜店效益最大化,在设计中需要让每一个死角灵活起来,这就是顾客的视觉动线。顾客在商品购买,左右了超市的销售额。超市的购物动线,一般分为 L型,F型,曲线型,大家有兴趣可以去了解下。

上图丝袜中,哪一个看起来让人更瘦呢?在一些国外电商中,同样通过设计上的动线引导增强用户购买欲望,在左侧的图片中,丝袜加了几条垂直的线条,使得我们觉得这个丝袜穿身上会让人腿显得更长!其中就是运用到线条垂直延续感,制造动线。

那么哪一条看起来更加修长?很明显只有一条线是不够的,设计师又加了多条线,两个产品中,左侧比右侧看起来更加苗条和修长。

哪一条看起来更加苗条?黑色是可以让我们看起来更瘦,但其实不透明的,因为可以反射出更多光线,因此可以带来更多幻觉,不透明反而能让你的腿更加的苗条。

哪一条看起来更加丰满?如果为了让大腿更加丰满,更大胆的颜色,往往能吸引更多灯光,给人丰满的另外一个诀窍就是图案设计,图案看起来比较复杂,能传递出复杂性,能欺骗大脑。

上面案例看似和设计无关,但是却有很大关联,里面蕴藏着很多心理学,很多视觉动线的思考。大家有兴趣可以去看看?https://www.viennemilano.com/?这家电商公司在商品中的一些研究,充分运用了设计中很多经典的动线,视觉错觉等技术。

二、视觉动线有几种类型?

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

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,那么在

您可能想查找下面的文章:

  • 赶紧收藏!连BAT设计师都在使用的视觉动线技巧(下)
  • 赶紧收下!连BAT设计师都在使用的视觉动线技巧(上)

相关文章

  • 2018-08-23如何判断你的产品“好不好”?来看高手的角度!
  • 2018-08-23UCAN2017回顾!当新技术来临时,设计会发生哪些变化?
  • 2018-08-23为什么在App设计中,应该慎用左右横滑设计?
  • 2018-08-23自学水彩没你想的那么难,说说我是怎么自学的
  • 2018-08-23网易云音乐产品负责人:如何做好用户研究的?(上)
  • 2018-08-23腾讯的设计到底好在哪?高手是从这3个维度分析的!
  • 2017-08-06网站配色方案 为网站选择正确的颜色
  • 2017-08-06网站设计经验 建设网站常犯错误汇总
  • 2018-08-23超全面!产品动效设计全方位科普手册
  • 2018-08-23超实用!通用设计法则解析之「无障碍使用」

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 偷偷问你一句:你觉得今年有机会涨薪吗?
    • 好的网站文案 良好的用户体验
    • 如何在网站中插入天气预报
    • 「从硅谷回国,我没有任何犹豫」: 专访 Airbnb 中国设计经理 Vivian Wang
    • 以用户为中心作为设计的标准
    • ofo小黄车是如何打造情感化设计的?来看总监的自述!
    • 想设计按钮?先来看这份超全面的按钮使用场景总结
    • 想更好地掌控设计,你还需要懂得形状心理学
    • 信息架构设计大杀器!超全面的卡片分类法使用指南
    • 即使是最靠下的网站页脚,设计上同样很讲究

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有