夺你眼球！有哪些方法可以突出网页中的关键内容？ - 推酷
夺你眼球！有哪些方法可以突出网页中的关键内容？
编者按：我有特别的抢眼技巧！今天的好文非常值得拜读，@飞屋睿UIdesign同学从对比、色彩、字体、留白等方面帮同学们将最关键的内容呈现出来，文末还附上一个特别有效果的检测方法，一眼就能看出你的网站是否合格，周末来充电吧。
对比：引发兴趣
为了更好地理解对比在
中的作用，我们先解释下什么是对比。对比就是在一个相对封闭的环境里发生的某种元素间的一种关系。在我此前写过
中也详细介绍过对比在设计中的重要性，这些元素可以是颜色、纹理、形状、方向和大小。
只是稍稍对字号大小进行调整，或对色彩进行更改，就会马上改变整个界面的视觉效果。例如，当你看到下面这个网页时，把浅色的背景换为深色，首页引人注目的“try it free”的首要按钮马上在视觉重要性上降级，而最下方的“call us”就会升级为首要的按钮。
再来看看下图中，颜色和大小是怎样影响我们的界面视觉的。例如，很多人在第一眼扫视而过时，不会仅仅就看到了两个圆。事实上，他们在看这两个圆时，已经获得了这样的信号“一个黑色的大圆和一个红色的小圆”。也就是说，对比关系已经可以在第一时间就进入人们的大脑中，形成强烈的印象。
商业工具：颜色，大小和形状
当我们刚开始设计一个页面的时候，一定不要忘记了运用这几个强大的视觉工具：颜色，大小和空间。设计师Alex Bigman就相信颜色和大小在管理着我们的视觉注意，而空间则帮助管理视觉元素间的关系。
简单说，亮色可以在柔和的色彩中凸显出来。这是显而易见的，而更为重要的是，在设计中，你就可以运用这一关系去吸引用户的注意。另外，特定的色彩也能帮助营造网站的整体氛围（例如，蓝色代表宁静，红色显得张扬和富有攻击性等）。
颜色基础知识见：
上面这个网站采用的是视觉体系中的Z模式，Z模式的详细情况已经在
中讲过了。在此模式下，他们运用色彩的技巧是非常巧妙的。水蓝色的背景立刻将首要目标按钮凸显在了顶部，这些目标按钮的色彩可以与“get active”的色彩搭配，暗示这一系列的按钮的相关性。而下方的两个大的矩形区域由于形状的相似又相连，因此也暗示着它们之间的相似性。
最完整的色彩搭配方法见：
说到大小，我们通常在说的其实也就是网页字体的大小。在传统的从左到右自上而下的阅读模式中，这就已经是个很强大的元素了。这意味着，大号字体或段落的右下角通常是读者最先阅读的地方。因此，字号大一点发挥的就是一种强调作用。
讲到这一点，不得不提到，著名的
名博Smashing Magazine对50个流行的网页界面进行调查，他们发现这些网站通常都是采用标题字号18~29px，与此匹配的文章主体字号采用12~14px，只是这项调查针对的是英文字体，而中文字体相对来说应该字号会大一些易于辨认。当然，这也只是一个大概的调查，并无绝对。但是，你可以从中获悉更多关于字号比例的排版设计的知识。
的目标什么？简单讲，就是创作一个漂亮的页面。那么，你将所有的漂亮的元素全部堆叠在网页中就漂亮吗？无节制的增加吸引的元素是快速毁掉自己的设计方法之一。一个网页中有可以呼吸的空间是非常重要的，也就是我们总是爱说的留白。减少“视觉噪音”会让页面显得更有重点。
Usaura的创始人Dmitry就已经指出，适当的留白能增强对网页内容的理解。2004年，一些研究小组就调查过，适当的留白能让人们对网站内容理解程度增长20%。虽然用户并不会直接对留白的页面做些什么，但它却能影响到用户的满足和体验。大家可以看看下图的页面设计。在每一个主体内容，都保留大量留白，用户的视线流得到了保护，让观者专注内容，才是最好的体验。
干净舒适的留白方法见：
网页设计视觉体系的测试：模糊法
就我所知，有人曾提出这样一个方法来检测自己的网站。尤其是当你的网站有特别要强调的内容时，非常适用。将自己的网站首页，放在PS里模糊5~10个像素，这样来判断那些你想强调的内容是否仍然能吸引到注意。
上图的网站经过模糊法测试后，我们会发现那些注册按钮和产品特性仍然是很抢眼。这样的元素安排对我们来说就是合理的。
【字体资源免费获取三重奏】
Step 1：不认识字体没关系，一下子帮你找到它！
Step 2：人气最高的字体资源免费打包！
Step 3：神器帮你更快完成字体设计！
原文地址：
作者：@飞屋睿UIdesign
【优设网 原创文章 投稿邮箱：】
================ 关于优设网 ================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：
设计微博：拥有粉丝量89万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
官方微信：想在手机上、被窝里获取设计教程和各种意想不到的”福利”吗？添加优设哥微信号： youshege
已发表评论数()
&&登&&&陆&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见小学阅读训练100篇(附参考答案) (1)_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
喜欢此文档的还喜欢
小学阅读训练100篇(附参考答案) (1)
阅读已结束，如果下载本文需要使用
想免费下载本文？
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
你可能喜欢戴眼镜时间长，眼睛突出有解决或缓解的办法
时间： 22:38:57
健康咨询描述：
戴眼镜时间长，眼睛突出有解决或缓解的办法吗？
曾经的治疗情况和效果：
想得到怎样的帮助：平时应怎样保养，怎样可以减轻（感谢医生为我快速解答——该。）
十大相似问答推荐
医生回复区
帮助网友：963称赞：12
病情分析：你好，长期配戴眼镜导致的眼睛变形在手术后不再配戴眼镜会不会恢复过来，医生一般从病理学上解释是不能恢复的，因为近视导致的是眼球变形，是由于近球轴长的变化而成的，手术不会改变这种眼球的病理性，所以术前眼睛状况如何术后也一样，不会有所改变。指导意见：角膜塑形镜可控制眼轴的发展，会对你有帮助。平时不要过度用眼，定期复查。希望可以帮到您！
擅长: 口腔全科
帮助网友：5290称赞：456
病情分析：您好，戴眼镜时间长眼睛会变形的，这个没有好办法。指导意见：摘除眼镜有很多方法，隐形眼镜、手术治疗都可以，但是有利就有弊，戴框架眼睛最安全，如果不好看可以选择多配几副眼镜，根据服饰可以随时更换眼镜的。
擅长: 心律失常及心绞痛心梗等心血管疾病
帮助网友：1011称赞：28
病情分析：您好，这是眼睛近视导致的指导意见：眼睛长期近视会导致眼球的前后径增大，这是一种不可逆的改变。建议注意用眼健康，不要让眼睛过于劳累，平时做做眼保健操滴些抗疲劳眼药水。祝好
帮助网友：7824称赞：46
病情分析：您好，这个是眼睛的视力下降所致指导意见：除非您要去做个视力的矫正手术才会恢复的，建议您可以试试激光矫正吧
擅长: 擅长中医治疗内科综合方面的调理，慢性病，哮喘，慢性
帮助网友：8407称赞：93
病情分析：戴眼镜之后，视野范围就是眼镜的镜片范围，为了获得更大的视野，睫状肌会产生调节，长期的结果就是：眼球突出。指导意见：这个已经回不去了。你配眼镜时要注意，自己戴着最舒服，视野最好，而不是追求眼镜镜框怎么怎么漂亮。
百度智能推荐
近视（Myopia）是眼睛看不清远物、却看清近物的症状。在屈光静止的前提下，远处的物体不能在视网膜汇聚，而在视网膜之前形成焦点，因而造成视觉变形，导致远方的物体模糊不清。近视分屈光和轴性两类。其中屈光...
挂号科室眼科
常见症状远视力下降、力正常、视
检查项目裸眼、矫正、测定
参考价格：39
参考价格：39
参考价格：39
网友最关注
治病成功案例/我的经验分享
用药指导/吃什么药好
调节视力。用于治疗青少年假性近视和连续近距离使用...
参考价格：￥39
调节视力。用于治疗青少年假性近视和连续近距离使用...
参考价格：￥39
如何收藏问题？
方法一：同时按住Ctrl键和D键收藏问题。
方法二：点击浏览器上的收藏按钮收藏问题。眼睛近视，眼球突出，眼睛变小，怎么办？
时间： 16:44:42
健康咨询描述：
戴眼镜5年了，眼球就逐渐地往外突，眼睛也变小了，变成了单眼皮，戴眼镜时间长了会感觉不舒服
曾经的治疗情况和效果：
一直在戴眼镜
想得到怎样的帮助：有什么方法可以恢复？（感谢医生为我快速解答——点击这里 。）
十大相似问答推荐
医生回复区
擅长: 内、外、妇儿、耳鼻喉科、皮肤性病等。
帮助网友：118698称赞：980
病情分析：您好！近视了，要带眼镜的，真性近视后需要戴镜避免度数的增长。18岁后可以做分子激光手术治疗。指导意见：
建议：日常生活中注意科学的用眼、保护视力，如连续近距离用眼一小时左右要休息或远眺片刻，以缓解眼睛疲劳。还要养成良好的用眼卫生习惯。
帮助网友：5415称赞：39
病情分析：近视所致的眼球突出，一般你可以通过按摩眼球来改善症状指导意见：眼保健操要每天坚持做，每天坚持做做眼球按摩，双手掌压住眼球，每五秒放松一次，要有眼球下陷的感觉，但也不要太用力，慢慢的坚持半年左右就可以了。一般这种症状手术是没办法治疗的。
百度智能推荐
( 专业名称：重睑术
别称：双眼皮手术
平均费用：6082元
重睑术，又称“重睑成形术”，俗称“双眼皮术”，是指改变眼睑组织结构，对眼睑外形重新塑造，形成新的上睑皱褶的手术。通俗地说就是把单眼皮做成双眼...
手术项目：
割双眼皮亲身体验
割双眼皮相关资讯
治病成功案例/我的经验分享
用药指导/吃什么药好
调节视力。用于治疗青少年假性近视和连续近距离使用...
参考价格：￥39
调节视力。用于治疗青少年假性近视和连续近距离使用...
参考价格：￥39
如何收藏问题？
方法一：同时按住Ctrl键和D键收藏问题。
方法二：点击浏览器上的收藏按钮收藏问题。}