首页 > 网站建设 >

网站制作如何巧用视觉动态效果设计作品

发布时间:2018-07-25 作者:深圳网站制作

 深圳网站制作公司发现不管是网页设计还是APP前端,其实并不难。以下我们 总结了一些经过实践的经验供大家参考。大家有没有打开一个网站或者一个 APP,但是不知道去看那里,因为页面中有太多的信息内容,我们很难决定,从哪里开始,然后我们就很容易关闭这个 APP 或者网站。大家都知道在互联网时代,用户不是在读书,在读我们设计的每段文字,他们是扫描,扫视!扫描意味着他们只有在眼睛被吸引的时候才会停下来阅读。作为设计师,我们需要很好的控制用户在使用我们产品的过程中,他的视觉浏览路径,需要去了解我们的眼睛如何处理界面信息,我会结合我的一些学习和大家交流下在视觉动线,在设计中如何去运用。
一、网站制作设计师给您说什么是视觉动线?
从字面意思,看着很高大上,大家可以想象一部电视剧,每一集从一个场景转移到另外一个场景,通常情况下,这些场景会有连续性,每一个场景之间有顺序。例如迪士尼在动线上的经典设计,整个路径伴随着听觉,视觉,让你感受非常好,我们做产品也是如此。最近新零售很火,特别是各种生鲜店,那么这些店在设计时候为了保证生鲜店效益最大化,在设计中需要让每一个死角灵活起来,这就是顾客的视觉动线。顾客在商品购买,左右了超市的销售额。超市的购物动线,一般分为 L型,F型,曲线型,大家有兴趣可以去了解下。上图丝袜中,哪一个看起来让人更瘦呢?在一些国外电商中,同样通过设计上的动线引导增强用户购买欲望,在左侧的图片中,丝袜加了几条垂直的线条,使得我们觉得这个丝袜穿身上会让人腿显得更长!其中就是运用到线条垂直延续感,制造动线。那么哪一条看起来更加修长?很明显只有一条线是不够的,设计师又加了多条线,两个产品中,左侧比右侧看起来更加苗条和修长。哪一条看起来更加苗条?黑色是可以让我们看起来更瘦,但其实不透明的,因为可以反射出更多光线,因此可以带来更多幻觉,不透明反而能让你的腿更加的苗条。哪一条看起来更加丰满?如果为了让大腿更加丰满,更大胆的颜色,往往能吸引更多灯光,给人丰满的另外一个诀窍就是图案设计,图案看起来比较复杂,能传递出复杂性,能欺骗大脑。上面案例看似和设计无关,但是却有很大关联,里面蕴藏着很多心理学,很多视觉动线的思考。

二、网站制作或者APP前端制作视觉动线有几种类型?
上面和大家介绍了什么是动线,其实就是人们眼睛在处理信息时候的顺序,设计中我们需要去了解这些用户视线规律,从中去创造更好的体验,那么回归到设计中,有哪几种动线类型呢?Z类型顾名思义,从左上角开始到右上角,保留着从左到右的习惯,然后眼睛会寻找到最后部分,寻找到页面的底部。对角线类型,是在遵从从右到左阅读习惯的基础上,一个更优秀的布局形式,由于我们已经习惯了从左上角到右下角的扫描习惯,这里面包括4个项线。

三、网站制作设计Z类型特点有哪些
从字面意思可以看出,Z形布局是沿着 Z 的图形追踪,用户在扫描时候从左到右,从上到下,这是眼睛在页面中的自然移动模式。在 UBER 的官网设计中,就是一个很典型的 Z形引导布局,首先遵从用户习惯从左至右,所以左边放公司品牌LOGO,右侧是页面中的司机和乘客登录入口,下面是氛围图片区域,左下角是新用户注册入口,这是一个典型的 Z布局,在很多网站设计中都运用比较多。Z形结构不会把注意力放在文字为核心,往往是突出行动按钮,在一些机简的设计项目中运用比较多,往往只需要一个简单的图片和文字,关键的地点案例,作为突出即可。这种结构很有效,因为当用户在这种模式上移动的时候,就会出现一个虚构的 Z 形状。salesforce 也是采用 Z布局,从左到右分别是 LOGO 和行动点,下来后从左到右是导航菜单和按钮。Z布局,在平时网页设计中尤其运用频繁,它的规则适用于大多数网站设计,在传递品牌同时,也能很好的凸现内容。在最早期的时候,杂志,报纸,里面没有任何图片,文字和标题,只有长篇文字,列和列,在这么一个很枯燥设计中,用户一般会遵循 Z型来浏览。

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

五、怎么运用 ?
前面有聊到视觉动线,以及经典的动线Z,那么在设计中我们如何去运用呢?当我们设计一个网站或者海报时候,在布局之前先问自己几个问题:当用户打开这个页面时候,你希望他注意到那些信息?你希望他们以什么样顺序查看你的信息?你想让他做什么?Z布局的前提其实很简单,在页面上加上 Z,然后把重要的信息放到 Z 上,让用户在扫描路径上看见这些重要元素。所以 Z视觉动线,最核心的是你需要传递给用户那些有价值的信息。Eveynote 就是一个很好的案例,在用户打开这个页面,希望用户注意到品牌,然后去注册或者登录,通过文字简单了解这个产品信息:图中LOGO是起点右上角按钮是行动信息内容,这个产品是做什么的注册登录,页面核心操作

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

深圳网站制作公司总结
动线作为我们控制用户的移动模型,作为设计师我们需要刻意制造用户浏览的动线。在设计中常用动线有Z、F、对角线动线形式,我们需要了解每一个动线设计的含义和使用场景。Z字型动线,在网页中运用比较多,但是在使用前我们先要确定我们网站核心目标,然后把核心内容组织到我们动线上。深圳网站制作公司博纳网络编辑整理。
 
文章标题:网站制作如何巧用视觉动态效果设计作品
本文地址:https://www.198bona.com/news/1166.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯