网站设计内容的某些部分比其他部分更重要,就比如“立即购买”按钮几乎肯定比整个“关于我们”页面更为重要,如果你真的想要销售,你需要相应地引导用户的注意力。这就是此篇文章存在的原因:你可以把它称之为网站设计新手的控制焦点指南。
您将以这样一种方式构建您的网站,即眼睛自然地从一个步骤吸引到下一个步骤。例如,对“购买”按钮的调用需要看起来不错。
1、对比
第一个也是最简单的吸引眼球的方法是使用对比,通过“对比”,意思是一个设计的重要元素需要以一种有意义的方式从其他元素中脱颖而出,可以做些什么?
现在,有几种对比需要讨论:
光明/黑暗的对比
颜色对比
大小的对比
对比鲜明的风格
这些大部分都是不言自明的,但是我们来复习一下。
光明/黑暗
光明的东西比黑暗的东西突出,反之亦然,视情况而定。如果你的网站设计中大部分都很明亮,那么让你的行动大而暗(或至少比其他任何东西都暗一点)是有意义的。
然而,在很多网站设计中,高光/暗对比是整个网站布局的一个特点,而这种对比被用来给所有的东西一种结构感。在这种情况下,你需要使用另一种对比来引导人们的注意力。
颜色
这个是不言自明的,一抹颜色,甚至是一种不同的颜色,都足以让你脱颖而出。在本例中,颜色用于消除大量的印刷干扰。
大小
让重要的按钮比其他按钮大,让你的标题文本比其他文本更大。大小对比不仅可以使事物突出,而且有助于在页面中建立层次结构。
风格
网站设计的风格差异可以通过之前制作的粗体文字笑话这样简单的东西来说明。但是,为了看一个更注重UI的例子,我们来谈谈“Ghost按钮”。 Ghost按钮是带有轮廓但没有背景颜色的按钮,它们经常与常规按钮组合使用,例如IndieGoGo的主页:
你肯定能分辨出他们真正想让你点击哪个按钮,因为风格上的对比说明了这一点。
2、图片
无论我们谈论的是摄影、插画、绘画还是3D图形,图像都会吸引眼球。你可以很容易地用一张图片转移任何人的注意力,唯一真正的例外是被其他图片包围的图片。
当然,您可以使用图像作为焦点对象,但是您也可以使用它们来将眼睛吸引到其他事物上,比如文本或放置在它们上面的按钮。你不认为那些只是漂亮的背景,是吗?事情可能就是这样开始的,但现在一切都是经过精心计算的。
如果你真的想全力以赴,那么就把你的行动号召放在这样一种方式,它看起来就像图片指向它一样。这就是你的经理所说的“协同作用”,尽管听起来非常合群,但它往往会奏效。
3、动画
如果你认为我们喜欢图片,让我来告诉你关于会动的图片。如果房间里没有什么更有趣的事情发生,我的眼睛就会无情地被任何一直开着的电视吸引,不管正在播放什么。可能是体育节目,日间脱口秀,甚至肥皂剧,我很难把视线移开,我想大多数人都会。
动作就是这样吸引眼球的,一开始只是一种生存的本能反应,现在我们只需要知道布莱恩是否会重获记忆并与帕特丽夏结婚,或者帕特丽夏是否会永远被他邪恶的双胞胎德雷克所困。通过在按钮、有用的工具提示和任何你想让人们先阅读的文本中加入一些轻松的动画,充分利用这种反射。
4、公约
最后,利用用户的默认行为模式,作为web用户,我们大多数人都接受过这样的训练,即在顶部附近寻找导航,在底部寻找更多的cta。把重要的信息和功能放在人们希望找到它们的地方是一个非常有效的策略。
同时也要记住你是为那些从右向左阅读的人设计网站,还是为那些从左向右阅读的人设计网站。例如,说英语的人在大多数情况下会先看屏幕的左侧。虽然打破常规是有道理的,但永远不要低估简单但根深蒂固的习惯的力量。
5、谨慎使用重点
当所有网站设计的内容都使用粗体时,粗体文本往往会模糊在一起,而不是将重要信息输入用户的大脑。当页面上有许多图片,而您没有运行一个摄影作品集时,用户可能会分心,所以说也不要过度使用动画。当所有的东西都在动的时候,你怎么能指望他们读你的任何超过一句话的文字呢?
为了真正吸引并将用户的注意力集中在一到两件事情上,您需要消除或至少减少那些可能争夺用户注意力的事情,与其他网站设计竞争,而不是你自己的内容。