• 全国400电话网上服务平台
    强大号码库资源任选,方便,快捷,快速开通。
    咨询热线:400-1100-266  

    实例分析:「8招」教你玩转视觉引导
    POST TIME:2018-12-03 21:29
     

    在所有的设计需求中,可以利用一些具有指向性的设计元素,如:色彩、人物和动作、留白处理等,让用户的眼神跟着页面元素的引导,完成对信息的关注与吸收。今天这篇文章,我将分享几个引导视觉的方法和技巧,一起来收。

    01.先要有个视觉点,靠这些点指引或者聚集视线点的形状并非都是圆,或者是某种具象的元素。

    好比:在整张页面中出现的大小对比关系,那么小的元素可以称之为点。大的元素也可称之为点。

    它是一种相对而言的说法。其实,在页面中出现一点时,就 可以很快吸引住用户的眼球。当再出现一点时,此刻用户不雅观察画面时的注意力就分散了。

    当遇到大小差别的点同时出现时,用户首先会关注较大的阿谁点,再接着是 较小的点。

    左上1:视线会首先集中在右侧鲜红的草莓上,1是因为颜色的对比,2是因为面积的对比。点在这里是相对的关系,你可以把整体出现的元素都可以看做点。但是首先会有一个焦点去吸引用户的视线;

    左上2:点的焦中设计,居中的位置使用户直接关注到正中的内容;

    左下3:这里的点,甚至说是页面中的亮点。就是右侧冲出画面的骑行者,这种表示打破画面的平稳,使用户最先关注到破格出画面的人物,同时也表现出户外骑行的自然和冒险;

    左下4:点的集中设计,中间的圆为点,二边的餐具为线,属于典型的居中构图;

    在实际应用中又可分为

    焦点

    第一时间吸引人眼球的阿谁元素。画面中的点有着明显的大小、颜色、形状的对比。

    亮点

    是指画面中点的形状或者细节区别于其他元素,成为画面中的主视觉。

    左图1:以手绘的黑白线条为主,用原色的食品形成画面的视觉点,引导用户跳跃式的浏览;

    右图1:居中的点设计,视觉会焦聚在此。大面积的留白,,使得画面很干净,除了主体产品外,没有任何其他的元素干扰视线。以3种地殊场景下为主,向用户保举了差别的产品;

    当你在设计时

    1、画面元素的对比不明显,整体视觉很平均时:

    你可以按照设计需要和活动目的,对设计元素调整大小、或者颜色等形式,使要突出的点对比更为突出。

    2、当版式中的文字太多时,用户不知道先看什么?

    这时你可以尝试把主要案牍的字形、颜色等进行处理,使用户视线有个聚焦点。亦或者你可以尝试对文字的层次进行调整,使该突出的突出,该弱化的弱化。

    02、人物动作设计多,手眼身脚都要使!动作,举止的指向性。

    这种指向可以通过模特摆出的各种姿势去表现,也可以通过调整模特元素的标的目的、位置、和排版共同完成对指定内容的指向。在做一些以模特类为主要元素的设计时,可以好好利用下模特的一举一动。

    实际应用中

    如在表示一些运动活动专题时:动感、活力是这类需求的主要切入点。

    在人物动作的挑选上,就尽量找一些动作幅度较大、夸张的模特,来完成对于“动”起来的基本诉求。

    左图1:模特人物展开双臂运动的动作中,其中拿球的左手位置正好置于文字上,加之文字颜色为白色,使得用户第一时间去关注那部分内容。其中右手所示的位置,有一个扶地的动作,而这个动作也正好巧妙的结合于保举的商品上,使用户的视觉顺着向下进行浏览关注。

    右图2:第一屏,图像中模特的动作有“秀一下”的暗示,向用户展示出他的8块腹肌(嘻嘻)。二是人物所展示的拳头指向,也使用户的视觉焦点向画面左侧的文字挨近。第二屏,模特眼神所示的标的目的正好指向了右侧内容。

    当你在设计时选择大片模特时,首先要考虑到使用模特做为主视觉元素时,模特的动作是否要去结合案牍需要、构图需要等需求。然后再去挑选或者去拍摄适合活动目的并带有指向的动作素材;在使用模特素材时,充分利用好模特的动作、心情和眼神的视觉指向,按着浏览轨迹摆设合适的贩内容到正确的位置上。

    眼神

    眼神的作用,暗示出模特所指的具体内容中,它有着明确的标的目的指向。

    当你看我、当我看你,当你看它时,随着人们注意视线的移动,人们关注的焦点也会做出相应的调整。

    在实际应用中

    当你用差别的眼神不雅观察事物时,其实你的眼神中,就带有了指向目的的作用。

    
    Copyright © 2003-2016
    时间:9:00-21:00 (节假日不休)
    版权所有:巨人网络(扬州)科技有限公司
    总部地址:江苏省信息产业基地11号楼四层
    《增值电信业务经营许可证》 苏B2-20120278
    X

    截屏,微信识别二维码

    微信号:veteran88

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

     打开微信

    微信号已复制,请打开微信添加咨询详情!