吸睛大法!如何突出网页中的关键内容?

我有特别的抢眼技巧!今天的好文非常值得拜读,此文从对比、色彩、字体、留白等方面帮同学们将最关键的内容呈现出来,文末还附上一个特别有效果的检测方法,一眼就能看出你的网站是否合格。

对比:引发兴趣

为了更好地理解对比在网页设计中的作用,我们先解释下什么是对比。对比就是在一个相对封闭的环境里发生的某种元素间的一种关系。这些元素可以是颜色、纹理、形状、方向和大小。

只是稍稍对字号大小进行调整,或对色彩进行更改,就会马上改变整个界面的视觉效果。例如,当你看到下面这个网页时,把浅色的背景换为深色,首页引人注目的“try it free”的首要按钮马上在视觉重要性上降级,而最下方的“call us”就会升级为首要的按钮。

再来看看下图中,颜色和大小是怎样影响我们的界面视觉的。例如,很多人在第一眼扫视而过时,不会仅仅就看到了两个圆。事实上,他们在看这两个圆时,已经获得了这样的信号“一个黑色的大圆和一个红色的小圆”。也就是说,对比关系已经可以在第一时间就进入人们的大脑中,形成强烈的印象。

商业工具:颜色,大小和形状

当我们刚开始设计一个页面的时候,一定不要忘记了运用这几个强大的视觉工具:颜色,大小和空间。设计师Alex Bigman就相信颜色和大小在管理着我们的视觉注意,而空间则帮助管理视觉元素间的关系。

颜色

简单说,亮色可以在柔和的色彩中凸显出来。这是显而易见的,而更为重要的是,在设计中,你就可以运用这一关系去吸引用户的注意。另外,特定的色彩也能帮助营造网站的整体氛围(例如,蓝色代表宁静,红色显得张扬和富有攻击性等)。

上面这个网站采用的是视觉体系中的Z模式,在此模式下,他们运用色彩的技巧是非常巧妙的。水蓝色的背景立刻将首要目标按钮凸显在了顶部,这些目标按钮的色彩可以与“get active”的色彩搭配,暗示这一系列的按钮的相关性。而下方的两个大的矩形区域由于形状的相似又相连,因此也暗示着它们之间的相似性。

大小

说到大小,我们通常在说的其实也就是网页字体的大小。在传统的从左到右自上而下的阅读模式中,这就已经是个很强大的元素了。这意味着,大号字体或段落的右下角通常是读者最先阅读的地方。因此,字号大一点发挥的就是一种强调作用。

讲到这一点,不得不提到,著名的网页设计名博Smashing Magazine对50个流行的网页界面进行调查,他们发现这些网站通常都是采用标题字号18~29px,与此匹配的文章主体字号采用12~14px,只是这项调查针对的是英文字体,而中文字体相对来说应该字号会大一些易于辨认。当然,这也只是一个大概的调查,并无绝对。但是,你可以从中获悉更多关于字号比例的排版设计的知识。

留白

网页设计的目标什么?简单讲,就是创作一个漂亮的页面。那么,你将所有的漂亮的元素全部堆叠在网页中就漂亮吗?无节制的增加吸引的元素是快速毁掉自己的设计方法之一。一个网页中有可以呼吸的空间是非常重要的,也就是我们总是爱说的留白。减少“视觉噪音”会让页面显得更有重点。

Usaura的创始人Dmitry就已经指出,适当的留白能增强对网页内容的理解。2004年,一些研究小组就调查过,适当的留白能让人们对网站内容理解程度增长20%。虽然用户并不会直接对留白的页面做些什么,但它却能影响到用户的满足和体验。大家可以看看下图的页面设计。在每一个主体内容,都保留大量留白,用户的视线流得到了保护,让观者专注内容,才是最好的体验。

网页设计视觉体系的测试:模糊法

就我所知,有人曾提出这样一个方法来检测自己的网站。尤其是当你的网站有特别要强调的内容时,非常适用。将自己的网站首页,放在PS里模糊5~10个像素,这样来判断那些你想强调的内容是否仍然能吸引到注意。

上图的网站经过模糊法测试后,我们会发现那些注册按钮和产品特性仍然是很抢眼。这样的元素安排对我们来说就是合理的。

来源:微信公众号---IxDC

原文发布于微信公众号 - 数据的力量(shujudeliliang)

原文发表时间:2015-01-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

极简设计的最佳实践

随着移动设备被越来越多的使用,极简主义的设计思想也伴随着流行开来。事实上,极简主义的应用确实为无论是移动端的应用程序还是传统的网站都带来了额外的好处,比如使用户...

35470
来自专栏互联网杂技

超实用的设计师个人品牌打造指南

动画早就不是早期人们印象中的低龄向玩物了,从早年的卢卡斯影业到今天的工业光魔,动画技术证明了它可以实现无限的可能性;从70年代的高达、EVA到之后的宫崎骏、皮克...

37170
来自专栏我分享我快乐

PS绘制水晶球

前言:学生们在学习ps软件的过程中非常的认真与努力,所以对于软件的使用可以说已经很熟练了,可是为什么当我们给学生安排一些原创设计需求的时候,学生却有种无从下手的...

42570
来自专栏PHP在线

未来Web设计的7大趋势

原文出处: Medium 译文出处:朵璞 1. 手势取代点击 我们都已经忘记滚动条曾经是有多麻烦,大多数用户都得煞费苦心地把鼠标移至屏幕右侧来移动这古...

41150
来自专栏Sign

动作游戏中的碰撞系统

对于熟悉动作游戏系统制作的玩家来说,这个应该算是常识了,不过还是写一下吧。 毕竟,可能有些同学还没看过。 在动作游戏里,角色的『图』与实际产生的效果是不完全对等...

413160
来自专栏编程微刊

一份来自前端开发工程师的规范简历

42340
来自专栏互联网杂技

视觉设计师需要懂的4个设计原理

把你的工作当作一门手艺,因为总有一些你能改进的东西。靠激励自己成为一个更好设计师。 ? 上周,我的一位读者发了一个问题:如何成为一个好的视觉设计师? 正如我在想...

38750
来自专栏罗超频道

iPhone 6S会带来新一代输入法吗?

iOS每一次升级,App开发者都会如临大敌、严阵以待,以求App能够适配最新版iOS,各类应用纷纷较量谁是最先兼容iOS新版本的。9月16日被视作iOS史上最重...

35970
来自专栏练小习的专栏

W3C对外公布了标准HTML5的草案

周二,W3C机构正式对外公布了互联网网页代码新标准HTML5的草案.预计正式版的标准将会在两年以后形成. HTML可以说是互联网信息组织的一个基石.据悉,这是自...

23590
来自专栏PHP在线

你知道了吗?2015年网页设计的9大趋势

其实在此之前已经有很多小伙伴翻译或总结过类似文章来分析优秀网页设计的趋势,不过我还是希望我总结的东西能更宏观一点并为大家带来一些新的东西。 稍后看官们可能会觉得...

45590

扫码关注云+社区

领取腾讯云代金券