如何制造画面聚焦点

1,096 阅读5分钟
好的视觉体验的产品,不单指好看。最重要的是,页面视觉呈现是否做到了主次分明,对于产品战略的重点部分,是否给予了足够的视觉比重?


每个设计元素的存在都是有意义的。视觉引导顺序的优先级,要和内容信息,功能的优先级对齐。这时,就要确定哪些信息是重点。 体现信息层级要有轻,才能体现重。根据信息的重要性,运用图形,颜色,大小等方法,凸显内容。

以下是我从书籍,文章中找到的知识点。我将它们分别整理出来:

颜色:

  • 色相差异越大越容易聚焦
24色相环上相距120度到180 度之间的两种颜色,差异最大。称为对比色。


举个栗子:  左右图对比。左图用色为相接近的色,右图的蓝色和黄色形成对比色。视线一下注意到右图了。


  • 明度差异越大越容易带来聚焦

黑白是明度最极端的两颜色。因此对比度最大。3张图背景色为绿色,明度偏暗,可以假装它是黑色。三棵树干中。第一棵树明度最亮,因此与在暗色背景中产生最大的对比。

  • 冷暖差异容易带来聚焦
人的视觉习惯,先看暖色,后看冷色。


举个栗子:

以下4个图标,第二个暖色图标最为突出。在实际工作中也可根据情况。运用这种方法突出图标。


  • 面积差异容易带来聚焦

出现较大的形状。视觉焦点就会集中在大形状上


  • 纯度高的颜色容易带来聚焦

色彩纯度越高。视觉引导性越强。左图为纯色调,色彩很饱和。右图为淡色调,加入些许的白色形成的色调。明显左图更吸引眼球。


拓展知识点:

色调分,纯色调,明色调,淡色调,灰色调,暗色调。

纯色:就是不加任何黑色或白色的颜色。色彩饱和度很高。那些看似鲜艳的颜色都是纯色。下面是各个色调的示意图,大家自个领会吧~


  • 产品营销视觉设计思路,强聚焦的图标是什么样的?

市场上的应用图标多式多样。怎样才能脱颖而出。提高下载率。是有方法可循的。色彩和图形两类的引导强度如



空间:

  • 聚焦的位置符合你的期待

当聚焦的位置符合你的期待,这时候信息和色彩产生了很好的沟通。大家不喜欢被延迟,焦点要在合适的位置。让人立刻得到信息。


  • 留白、弱化

在周围留白、弱化其它元素形成背景。也有聚焦的作用。


  • 色块,空间
使用色块来划分不同组别和层次的信息。


文字:

  • 大小

文字以大小的文字强调信息重要性


  • 深浅

使用不同灰度的颜色来区分重要性不同的文字。如重要的文字,用深色。相对不重要的文字,用灰色弱化它


  • 英文大小写

在英文中,大写的文字具有“大声强调”的意味 。写头条标题或需要引起用户注意时,可用全大写


图片内容:

追溯到远古时代,人类最关注生存情况,不断观察周围环境。思考方式是,可以吃吗?可以和它性交吗? 它会杀死我吗?现代人思考方式已经不像过去那样了。但是不管你愿不愿意,你都会注意到这些事情。

根据这个结论,人类对怎样对图片会引起注意。以下是最容易吸引人注意力的内容:

  • 人脸图片

尤其是正脸。眼睛也是强点。杂志书籍广告等等,会使用人像做装饰元素。区别在于如何更吸引眼球。



  • 性爱照片

利用性感美女吸引用户注意。达到提高点击量的目的。


  • 危险,恐怖图片

恐怖的照片让人有过目不忘的视觉冲击力。用户的好奇心和探究欲也越是强烈。

  • 故事

我们不想一成不变。大脑需要刺激,需要被感动、被吸引等。通过故事,我们可以通过缩短时间,简化环境的方式,以“上帝的视角”来了解一件事情。


动态:

视频、图片滚动、声音和动效很容易吸引用户的注意力 。

  • 视频

动态和静态的展示方式,前者会更为夺目。


  • 图片滚动

将banner摆放在黄金位置上。通过轮播的方式。吸引用户注意力。


  • 声音

根据需求选择恰当的声音。最容易引起注意的声音要用在关键时刻,频繁使用会让用户麻木,且无视它。

举个栗子:用户格式化硬盘时或是执行无法撤销的动作时。 可出现声音提醒。

  • 动效

动效给予用户焦点,拉开视觉层次,让用户用户更明白自己所在的位置。


总结:视觉焦点的把控。是有规律可循的。当我们知道产品界面中那些信息需要突出。通过一些方法。可以把控用户视觉焦点的去向。让用户更快地聚焦到需要聚焦的地方。