不要忽略了颜色的可用性(网页设计理论)

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

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

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

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

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

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

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

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

最后总结几点建议

  •  视觉设计完成后,在灰度颜色模式下审查一下效果
  •  注意网页上需要突出的、以及正文文字的对比度
  • 可用性不是一个人或者一个岗位的事情,视觉设计、交互设计、可用性工程师、开发人员乃至PM都应该去留心和注意的
时间: 2024-08-30 09:11:21

不要忽略了颜色的可用性(网页设计理论)的相关文章

简单优雅的网站颜色方案:黑白网页设计

时颜色越少,越是一个网站的最佳颜色方案.在这篇文章中,展示 55 款激发灵感的最小黑白网页设计.它们简单优雅,能使内容熠熠生辉. Art Directors Club of Europe Blake Allen Design Brian Hoff Brancozero The Grid System Markus Albers margaretlondon.com Designing the News Patrick Fry postmachina Rikcat Industries

网页设计理论:细节让优秀的作品脱颖而出

文章简介:网页设计中最常用到的设计细节. 前一段时间在企业管理界流行一句格言叫"细节决定成败".企业管理当然不是我们这里要讨论的主题,但是,把这句话放在网页设计当中的确是颠扑不破的真理.我们的眼睛和感觉总是非常敏锐的,即使是完全不了解网页设计技术的人也能够从一堆拙劣的设计作品当中挑选出那一个优秀的设计作品.虽然他说不出来为什么这件东西比那些都好,但是直觉会告诉他他自己喜欢哪一个.如果别人向我们问起为什么这件作品要优于其它呢?我们的回答是"很大一部分原因是因为优秀的设计作品总是

网页设计理论:各种元素在页面的综合设计

网页设计中有导航条,链接,表单设计,字体行距,空白,表单聚焦,404错误页面等等元素.可以说每个页面都是由以上各种元素组成,因此对于研究网页用户体验来说,就是研究如何组合并设计这些东西. 如何提高网站产品的可用性? 优秀的产品可用性,一直是产品经理和用户体验设计师们追求的目标,今天我们来谈谈如何提高网站产品的可用性,给大家做做参考.不论是企业网站.个人博客,或者购物网站.游戏网站,我们都希望能吸引访问者并且给他们留下愉快的访问体验. 可用性 是用户体验的一种度量,它可以用访问者完成网站功能的方便

网页设计理论:网页设计风格

文:Jeffrey Zeldman 我的父亲是个业余画家,我的童年就是被他的那些美术书籍塑造的.跟很多小孩一样,我对「纯粹的再现」十分着迷.那些巨细无遗的版画--搏斗中的角斗士,风景如画的村庄,日出时的罗马废墟--每每让我瞠目结舌.口不能言.当时我对艺术的理解就是「画功好」.在那年幼而懵懂的日子里,细节越丰富.蚀刻的线条越密集.树叶越多,这艺术家就越棒.稍后我邂逅了漫画,再往后是美术馆.麦菲·派瑞(Maxfield Parrish)让我想嗑药,也让我明白自己永远当不了画家.保罗·克利(Paul

网页设计理论:漂亮而不空洞的极简网站设计

作为设计师,我们都知道,一个极简的设计可以实现漂亮的效果. 然而,很多设计师在实现上有些麻烦:要么是没有时间让使用如此少的元素制作的页面看起来漂亮,要么就是最终的结果只是看起来"不完美". 网上有很多关于极简主义设计的文章,而本文的目的是帮你实现一个漂亮而不空洞的极简网站设计 最重要的是,我们将展示一个小的极简网站设计画廊,这样你就可以分析为什么一些设计可以而其它的则不可以. 什么是极简主义设计 极简主义设计已经被描述为最基本的设计,剔除了多余的元素.色彩.形状和纹理. 它的目的是使内

网页设计理论:IE6必须下地狱

仅仅六年之前,互联网还是一个独裁者的世界--Internet Explorer ()(主要是Internet Explorer 6)垄断着浏览器市场.没了Netscape的竞争,加上与Windows XP的绑定,微软获得了令人艳羡的市场份额--巅峰时期将近95%.时至今日,可供我们选择的浏览器种类也令当年的用户艳羡--Firefox (), Safari (), Opera (), Chrome (),以及Internet Explorer 8. 那么,为什么现在还有15%至25%的网页浏览量来

网页设计理论:对比和等同

  等同和对比,联系与分别,归类和不归类等都是能将元素中相同或不同的元素加以区别的方式.基于它们所承载的信息,我们希望等同的元素能发生某种联系,用以表明它们在某一方面的相似性.我们同样也希望不同的元素加以区分,以显示它们分属不同的类别. 等同和对比是通过元素之间所呈现的关系表现出来的,如果两个元素有着某种联系,可以确定这两个元素必定有相同的特性.当然,两个不同元素也必定看上去不同. 基础特性 你是如何表达元素间的等同和对比性的?是的,从它们的基础特性中表现出来. 那么,什么是元素的基础特性呢?基

网页设计理论:纹理

  纹理在网页设计中已经成为一个不可或缺的元素.它不仅仅是个趋势,更是个增加网页深度的快捷方法.设计师学会使用纹理,就能强化网页感染力,可谓是网页设计中必然要掌握的功法.而纹理本身就能通过引导用户的视线来展示网页的关键内容. 然而,一直以来纹理似乎都被误解为"GRUNGE"风格设计,想了解GRUNGE可以去GRUNGE系列(一)--网页设计中的GRUNGE看看.在许多网页中我们可以看到,为了突出酷炫的效果时,被大量使用,甚至有滥用的嫌疑.滥用的结果就是它真正带来的好处被埋没.纹理的确可

网页设计理论:注意力和流

我们创造了网站和软件用以向人们展示信息,信息可以是任何东西 :一个公司的产品清单,旅行度假的照片或者朋友们的即时信息,此时此刻,展现给你的信息比历史上任何时候都要多. 所有这些信息有许多积极的效果,但是也带来了挑战."信息的成本显而易见,它消耗了信息接收者的注意力...信息的富有带来了注意力的稀缺"(西蒙1971 年)当注意力成为一种稀缺资源,如何明智的投资它就变得非常重要,信息架构师和设计师在确保设计提供给用户的产品具有良好回报中扮演着关键的角色. 心理学家米哈里csikszentm