今(jīn)早打开腾(téng)讯(xùn)ISD的博客,看到一篇新的文(wén)章,《迷你屋视(shì)觉规(guī)范简介》,赶紧看了来学习。不(bú)过给(gěi)我抓到(dào)问题咯,臭鱼不介意我在这说下吧(ba):
这套规范中的,按钮的第一级(jí)、第二级和文字中用于突(tū)出的第三种(zhǒng),红(hóng)底白字和白底红字都不(bú)符合W3C的对比度(dù)规范。原(yuán)本需要突(tū)出和强(qiáng)调的文(wén)字反而可(kě)能识别不易(yì)。
截图中使(shǐ)用对(duì)比度(dù)检查器,基于W3C的WCAG Guideline 1.4.4和1.4.2中有相应(yīng)的规定,工具的下载和具(jù)体说明可见油茶会(huì)的这篇(piān)。
这(zhè)是一个很(hěn)好用(yòng)也很(hěn)科学(xué)的(de)工具(jù),小兔把(bǎ)它放在(zài)Windows的快(kuài)速启动(dòng)栏里,而(ér)且推荐给了同事们。当初刚开始的时候,我(wǒ)们有多(duō)年设(shè)计经验的视觉设计(jì)师不以为然,认为靠肉眼(yǎn)识别就能辨(biàn)别对比度。不过后来给(gěi)我抓(zhuā)到了几回,靠(kào)经验和肉眼(yǎn)也会有漏(lòu)网的时候啊。现在连我们的运(yùn)营(yíng)编辑都把这个(gè)要了去,为了(le)保证自己做的推荐图片(piàn)够醒目:D
注意文字颜色的对比度(dù)是件容(róng)易被忽略(luè)的事。据我所知腾讯对一些(xiē)产品的视觉风格是做(zuò)用户研究的(de),其中也包括色彩的定位。和(hé)臭(chòu)鱼提到(dào)这个时候,他(tā)说自己也就是看(kàn)着,觉得(dé)对比度(dù)还算清楚。在正常人在正(zhèng)常环境中可(kě)能还(hái)不觉得(dé)什么(me),但是如(rú)果(guǒ)在一些表现欠(qiàn)佳的(de)显示环境、或者是(shì)色盲(máng)色(sè)弱(ruò)、视力欠(qiàn)佳的人看来,就显吃力(lì)了。即(jí)使是正常人(rén),面对对比(bǐ)度欠(qiàn)佳的文(wén)字长时间阅(yuè)读也会容易产(chǎn)生(shēng)疲劳,而(ér)浮躁的色彩会(huì)令用户对产品的情感无形中(zhōng)产生影(yǐng)响。
那么颜色的(de)对比度就是可用性工程师该注意的事?小兔觉得这还主要是(shì)视觉设计(jì)师的责任(rèn)。
在大学读编排设计的时候,老师就要求我们完(wán)成前(qián)看看自己的设计在黑白环境中是(shì)什么样子。那时不(bú)论(lùn)我的(de)老师(shī)还是我自己,都没有什么关于可(kě)用性的认(rèn)识,不(bú)曾想到(dào)过(guò)色盲色弱看到会如(rú)何(hé),只是(shì)为了保证作品的表现力。但这却是(shì)一个简单有用的习惯,在(zài)这年头Photoshop里去色看一下就(jiù)好了。
回忆当初学到色彩构成的时候,也被老师叮嘱过注意黄色(sè)这类高明度色彩的使用。虽然近两年(nián)已经不做(zuò)视觉设计,但是大学中所学和国际商(shāng)业美术设计师认证,依然带给(gěi)我不少现在工作中受用的东西。即使(shǐ)不(bú)谈可用性,这也是(shì)一(yī)个(gè)专业(yè)的视觉设计师应该注意(yì)的问题。
最后总结几点(diǎn)建议(yì):
◇ 视觉设计完成后,在灰度颜色模(mó)式(shì)下审查一下效果
◇ 注意网页上需要突出的、以及正文文字的对比(bǐ)度
◇ 可用性不是(shì)一个人或者一个岗位的事情,视觉设计、交互设计、可用(yòng)性工(gōng)程师、开发人员乃(nǎi)至PM都应该去留心和注意的 |