设为首页 加入收藏

手机版 郑州清新教育-郑州电脑设计培训学校典范,专业课程包括:室内家装建筑装饰设计培训学习班,平面广告网页美工动漫设计培训,淘宝开店美工运营推广网站手机开发培训等课程
郑州清新教育电话

当前位置:首页 > 网页美工设计

网页美工设计

为什么说网站设计要超越颜色

编辑: 时间:2016-03-29 16:30:28

   虽然这篇文章比较老,但是确实说到了我们在做网页设计中容易忽略的一个问题和一个使用群体,因此特意拿出来重新进行翻译整理,希望能够帮助大家做出更好的设计!

  颜色,是个强有力的工具,特别是对于设计领域来说。

  它能够传递情绪和感情,给设计增添存在感并提高品牌认知度。但是我们经常看到,存在色觉障碍的用户会在五颜六色的界面上因为导航而痛苦不堪。考虑到这部分人,我经常建议设计师要时时牢记无障碍性这个问题,并在灰度格式下对网页进行测试,保证在颜色无法正常表现的情况下也能达到完善的实用性。

  存在色觉缺失的用户可能会难以分辨某些颜色之间的区别。最常见的色觉缺失就是红绿色盲,这个人群看红色和绿色感觉是一样的。

  下面是一张来自Color Matters的常见色盲表格图示。

  通过这张表格我们发现,要填写这张在线表单,就必须靠考虑到存在这种色盲问题的用户能不能看到红色的错误信息。

  再来看看Avis给我们的主页预订表单。我在没有填写任何东西的时候点击了“继续”按钮,所显示的“请输入接取位置”信息是以纯红色文字显示的。

  下面我们使用Colblindor这款色盲模拟器看看透过红色色盲用户的眼睛看待同一布局时的情形。

  我们发现红色错误信息的高亮对比效果没有了,取而代之的是绿色的文字,这些文字和页面上黑色的内容几乎完全融合,非常容易看不到。

  再看一个来自Budget主页预订表单的示例,这里我点击了“以客人身份继续”的按钮,收到了错误信息。在这种情况下,红色的错误信息表现为红色文案遮盖住了输入框的标签,同时实际输入框外面有一圈红色边框。

  下面我们使用色盲模拟器看看透过绿色色盲用户的眼睛看是什么效果。

  我们发现红色看不见了,取而代之的是淡绿色。绿色的文案没有足够的对比效果,无法引起人的注意,同时输入框的边界也没有了高亮效果。

  ▌结束语

  不要单纯依靠颜色来传递网上的信息。相反,要结合文字、形状、网格和空间等多种设计基本要素,并给重要的元素分配较多的重量。

  The Home Depot的账户注册表单就在颜色的基础上采用了形状来指示问题。其会在方形的框内,错误信息文案之前显示感叹号,同时会在相关输入框旁边显示“x”来指示发生错误的地方。

  通过Colblindor的模拟器看,我们也会发现红色和绿色色调没有了,但是用户仍然可以通过形状来分辨操作是否有问题。

  所以建议大家借助Colblindor对页面进行测试,或者简单地把设置改成灰色来确保实用性不会因颜色问题而受到影响。

求学问答专业答复,快速响应
电话:0371-63218905
手机:13613841515
QQ:
有问题需要老师在线解答? 立即提问 马上回复
更多 热门课程排行榜
郑州清新教育电脑学校

室内家装设计知识平面广告设计知识网页美工设计知识

模具机械设计知识电脑办公文秘知识游戏动漫设计知识

郑州清新教育电脑学校

清新教育新闻资讯清新教育报班选课清新教育就业服务

关于清新教育联系清新教育清新教育乘车路线

关于我们 版权所有:郑州清新教育(www.qingxinedu.cn)备案号:豫ICP备11011661号-1