吸睛大法!有哪些方法可以突出网页中的关键内容? - 优设网 - UISDC

吸睛大法!有哪些方法可以突出网页中的关键内容?

2015/01/09 10250评论区

highlight-website-content-skills-1

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

对比:引发兴趣

为了更好地理解对比在网页设计中的作用,我们先解释下什么是对比。对比就是在一个相对封闭的环境里发生的某种元素间的一种关系。在我此前写过《设计基础功!帮你彻底掌握设计四大原则中的对比原则》中也详细介绍过对比在设计中的重要性,这些元素可以是颜色、纹理、形状、方向和大小。

ifeiwu20150109 (1)

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

ifeiwu20150109 (2)

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

ifeiwu20150109 (3)

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

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

颜色

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

颜色基础知识见:《设计师配色宝典!教你从零开始学配色(一)》

ifeiwu20150109 (4)

上面这个网站采用的是视觉体系中的Z模式,Z模式的详细情况已经在《基础小科普!聊聊两种最常见的网页布局设计模式》中讲过了。在此模式下,他们运用色彩的技巧是非常巧妙的。水蓝色的背景立刻将首要目标按钮凸显在了顶部,这些目标按钮的色彩可以与“get active”的色彩搭配,暗示这一系列的按钮的相关性。而下方的两个大的矩形区域由于形状的相似又相连,因此也暗示着它们之间的相似性。

最完整的色彩搭配方法见:《色彩搭配速成!3个实用方法帮你全面搞定配色》

大小

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

ifeiwu20150109 (5)

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

留白

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

ifeiwu20150109 (6)

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

干净舒适的留白方法见:《高端网站都懂的!如何在网页设计中使用留白》

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

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

ifeiwu20150109 (7)

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

【字体资源免费获取三重奏】

Step 1:不认识字体没关系,一下子帮你找到它!
《还在问“这是什么字体?”四款神器帮到你!》

Step 2:人气最高的字体资源免费打包!
《字体排行榜!2014年最受欢迎的35款字体素材打包下载》

Step 3:神器帮你更快完成字体设计!
《AI圆角插件!助你更快设计字体 XTREAM PATH1.4的安装使用教程》

原文地址:ifeiwu
作者:@飞屋睿UIdesign

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网ag亚游集团“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量89万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.offshoring-digest.com
官方微信:想在手机上、被窝里获取设计教程和各种意想不到的”福利”吗?添加优设哥微信号:youshege

chat-yinliu-pic

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.offshoring-digest.com/highlight-website-content-skills

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 设计师 扁平化设计 交互设计师 界面设计 优设专访 排版布局 优设大课堂 职场 配色 视觉设计 素材下载 web前端开发 设计流程 AI教程 设计理论 神器下载 设计师专访 字体下载 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里