网页设计中网页颜色与网页文字的搭配

今早打开 腾讯ISD的博客 ,看到一篇新的文章,《迷你屋视觉规范简介》,赶紧看了来学习。不过给我抓到问题咯,臭鱼不介意我在这说下吧:

这套规范中的,按钮的第一级、第二级和文字中用于突出的第三种,红底白字和白底红字都不符合W3C的对比度规范。原本需要突出和强调的文字反而可能识别不易。

截图中使用对比度检查器,基于W3C的WCAG Guideline 1.4.4和1.4.2中有相应的规定,工具的下载和具体说明可见 油茶会的这篇。

这是一个很好用也很科学的工具,小兔把它放在Windows的快速启动栏里,而且推荐给了同事们。当初刚开始的时候,我们有多年设计经验的视觉设计师不以为然,认为靠肉眼识别就能辨别对比度。不过后来给我抓到了几回,靠经验和肉眼也会有漏网的时候啊。现在连我们的运营编辑都把这个要了去,为了保证自己做的推荐图片够醒目:D

注意文字颜色的对比度是件容易被忽略的事。据我所知腾讯对一些产品的视觉风格是做用户研究的,其中也包括色彩的定位。和臭鱼提到这个时候,他说自己也就是看着,觉得对比度还算清楚。在正常人在正常环境中可能还不觉得什么,但是如果在一些表现欠佳的显示环境、或者是色盲色弱、视力欠佳的人看来,就显吃力了。即使是正常人,面对对比度欠佳的文字长时间阅读也会容易产生疲劳,而浮躁的色彩会令用户对产品的情感无形中产生影响。

那么颜色的对比度就是可用性工程师该注意的事?小兔觉得这还主要是视觉设计师的责任。

在大学读编排设计的时候,老师就要求我们完成前看看自己的设计在黑白环境中是什么样子。那时不论我的老师还是我自己,都没有什么关于可用性的认识,不曾想到过色盲色弱看到会如何,只是为了保证作品的表现力。但这却是一个简单有用的习惯,在这年头Photoshop里去色看一下就好了。

回忆当初学到色彩构成的时候,也被老师叮嘱过注意黄色这类高明度色彩的使用。虽然近两年已经不做视觉设计,但是大学中所学和国际商业美术设计师认证,依然带给我不少现在工作中受用的东西。即使不谈可用性,这也是一个专业的视觉设计师应该注意的问题。

最后总结几点建议

视觉设计完成后,在灰度颜色模式下审查一下效果

注意网页上需要突出的、以及正文文字的对比度

可用性不是一个人或者一个岗位的事情,视觉设计、交互设计、可用性工程师、开发人员乃至PM都应该去留心和注意的

时间: 2024-11-03 22:30:39

网页设计中网页颜色与网页文字的搭配的相关文章

网页设计中的颜色如何搭配

  网站建设第一步要做到的就是要有精美的网页设计效果,而我们往往对于美都是有追求的,我们也抵挡不住美给我们带来的好心情,要知道,美丽的事物总是能让我们的心情都更加愉悦,网页设计的美也能给企业带来意想不到的效果.由于每个人的审美观是各有差别的,所以网页设计不可能做到人人都满意,但是一个好的设计,在不喜欢这种风格和颜色搭配上的眼里,也不会差到哪里去的. 对于做网页设计的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但是,浏览一下大型的网站,你会发现他们更多运用的是白色.蓝色.黄色等,使得网

如何在网页设计中使用颜色

  在网页设计中,对目前的网站配色(Landscape of color)认真琢磨一下还是非常有趣的.大多数网站或多或少相同,但是颜色的设计搭配却是一个非常给力的工具. 我并不想尝试去阐述一些具有革命性的东西或者是特别的发现.但如果大部分网站都采用同样的配色方案,那对颜色意味着什么呢?实际上,远超出你的想象.幻想一下整个世界的每一个网站都是非常漂亮和五彩缤纷的,但它同时也意味着千篇一律.这就像你文章中每一个段落的粗体. 因此,当配色方案比较柔和的时候,它允许有更多的机会. 关注你想要的任何东西

网页制作高手进阶:网页设计中的文字运用

设计|网页|网页设计  如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分.网络世界五彩缤纷,涌现出大量优秀精美的网页.大量网络信息的呈现,无非就是通过文本.图像.Flash动画等,其中, 文本是网页中最为重要的设计元素.对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见.     文字的格式化     1.字号.字体.行距字号大小可以用不同的方式来计算,例如磅(Point)或像素(Pixel).因为以像素技术为基础单位打印

网页设计中颜色搭配技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网页设计师通常通过不同颜色来呈现网站风格定位,表达情感和意图.颜色到底是怎样体验情感的呢?下面简单介绍一下网页设计中的颜色搭配: 第一.弄清楚颜色所表达各种情感.颜色根据感情分为冷色.暖色和中性色.(1)红色.黄色.橙色等暖色主要表达的是温暖舒适的感觉;(2)蓝色.绿色和紫色等冷色主要呈现清凉或寒冷的感受.(3)灰色.棕色等中性色所表达的是平

网页设计中文字颜色的搭配技巧

技巧|设计|网页|网页设计|中文 对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但浏览一下大型的商业网站,你会发现他们更多运用的是白色.蓝色.黄色等,使得网页显得典雅,大方和温馨.更重要的是,这样可以大大加快浏览者打开网页的速度. 一般来说,网页的背景色应该柔和一些.素一些.淡一些,再配上深色的文字,使人看起来自然.舒畅.而为了追求醒目的视觉效果,可以为标题使用较深的颜色.下面是我做网页和浏览别人的网页时,对网页背景色和文字色彩搭配积累的经验,这些颜色可以做正文的底色,也可

高级技巧之网页设计中的文字运用

如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分.网络世界五彩缤纷,涌现出大量优秀精美的网页.大量网络信息的呈现,无非就是通过文本.图像.Flash动画等,其中, 文本是网页中最为重要的设计元素.对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见. 文字的格式化 1.字号.字体.行距 字号大小可以用不同的方式来计算,例如磅#quotel.quoter#或像素(Pixel).因为以像素技术为基础单位打印时需要转换为磅,所以,

高手进阶:网页设计中的文字运用

    如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分.网络世界五彩缤纷,涌现出大量优秀精美的网页.大量网络信息的呈现,无非就是通过文本.图像.Flash动画等,其中, 文本是网页中最为重要的设计元素.对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见.     文字的格式化     1.字号.字体.行距     字号大小可以用不同的方式来计算,例如磅#quotel.quoter#或像素(Pixel).因为以像素技术为基

大图片背景网页设计中文字设计重要性

文章描述:浅析文字在国际范网页中的重要性. 网页设计中最重要的元素是什么?你不知道?思考一下:你是如何将信息传递给用户的?你是如何展示产品的?现在你明白了吧,答案很简单,用文字将信息传递给用户,用图像展示产品.两者结合之后,表达能力呈几何级上升. 图像胜过文字 大多数人认为图像比文字易于理解,这已经不是什么秘密了.通过观看的形式,图像更容易表达情绪,也更容易让用户铭记.用户很可能因为页面中一幅动人的图像而记住你的网站. 在网上,你可能看过很多信息图.信息图的绘制规则很简单--人们更喜欢读图.很多

设计参考:网页设计中的渐变文字应用实例

使用色彩渐变作为一种处理类型是在网站设计中制作迷人的文字的一种非常流行的技术.它们用于多种情况:网站logo.介绍性文字.视觉元素等等.但是请特别小心:造成时尚或俗气的只是在Photoshop设置里面的一些小错误,一点细微的差别就可能适得其反. 如果你正好在寻找网页设计中的渐变文字类的实例和灵感,这里是一些很不错的例子.希望能为你的设计提供些参考. 虽然用Photoshop/Fireworks等制图软件可以很容易的创建漂亮的文字渐变效果,但是我们同样也可以用CSS创建漂亮的文字渐变效果,而用CS

色调心理效应 颜色在网页设计中的重要性

你可能尚未意识到颜色在网页设计中的重要性.你可能觉得一个网站是绿色的,换成蓝色也行,反正无所谓.长期以来,我都在思考颜色在网页设计中的重要性,最近我才得出结论:颜色真能改变很多东西,并且能让读者感受不一样的东西.每种色调的背后都隐藏着某种心理效应,接下来我会深入探讨这个问题. 使人兴奋的东西有很多.科学实验指出,使人兴奋最有效的办法之一,就是将红色投射到其房间墙壁上.住在这样房间的人的心率和血压比蓝色房间的人更高.众所周知,红色能提高兴奋度.这也很好解释了快餐店喜用红色作为主色调的原因.比如,可