LOGO-200LOGO-120×35LOGO-200LOGO-200
    • 首页
    • 课程
      • 建筑设计方案表现班
      • 建筑参数化设计犀牛班
      • 室内设计就业高级综合班
      • AutoCAD专项
      • BIM全科高级综合班
        • BIM企业培训
        • BIM建筑与结构实战班
        • BIM机电管线实战班
        • BIM建筑装饰实战班
        • 全国BIM技能等级考试班
      • 景观园林设计表现班
      • 网课
      • 作品
        • 建筑犀牛作品
        • 园林设计作品
        • 室内设计作品
        • 产品设计作品
    • 课件
      • BIM课程课件
        • BIM建模结构课件
        • BIM机电课件
        • BIM装饰课件
      • 建筑
      • 建筑犀牛课件
      • SketchUp 课件
      • Auto CAD 课件
      • 室内设计课件
      • Lumion 课件
      • 产品设计课件
      • Keyshot
      • 平面设计课件
        • PS课件
        • AI课件
        • CDR课件
        • ID课件
      • 更多设计经典和教程
        • –室内设计–
        • –建筑设计–
        • –平面设计–
        • –产品设计–
        • –网页设计–
        • –CG插画–
        • –设计动态–
      • BIM技术
        • –BIM资讯–
        • –BIM教程–
        • –BIM案例–
        • –BIM考证–
        • –BIM软件–
    • 资源
      • 软件
      • -材质贴图-
      • -3DMAX模型-
      • -Sketchup模型-
      • -Rhino模型-
      • -BIM模型-
      • -CAD图纸-
      • -室内设计-
      • -建筑规划-
      • -平面设计-
      • -景观园林-
    • 晶网问答
    • 教学管理
    • 其他
      • BIM咨询
      • 制作
      • 合作企业
      • 招聘求职
      • 最新动态
      • 我们的风采
      • 住宿安排
      • 关于我们
      • 手机版
    • ===== 资 源 ======
    • >>>常用素材<<<
    • >>>材质贴图<<<
    • >>>3DMAX模型<<<
    • >>>Sketchup模型<<<
    • >>>Rhino模型<<<
    • >>>BIM 模型<<<
    • >>>CAD 图纸<<<
    • >>>室内设计<<<
    • >>>建筑规划<<<
    • >>>平面设计<<<
    • >>>景观园林<<<
    ✕
    为什么说网站设计要超越颜色!
    2016年8月8日
    虽然这篇文章比较老,但是确实说到了我们在做网页设计中容易忽略的一个问题和一个使用群体,因此特意拿出来重新进行翻译整理,希望能够帮助大家做出更好的设计!
    7601

     

     

     

     

     

     

     

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

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

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

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

    20150311151533_color-blindness-chart

    IMAGE:COLOR MATTERS

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

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

    20150311151546_Avis-Car-Rental

    IMAGE:AVIS

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

    20150311151601_Avis-Red-Colorblind

    IMAGE:COLBLINDOR

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

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

    20150311151634_Budget-colorblind1

    IMAGE:BUDGET

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

    20150311151645_Budget-green-blind

    IMAGE:COLBLINDER

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

    结束语

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

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

    20150311151701_Home-depot-colorblind

    IMAGE:HOME DEPOT

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

    20150311151711_Home-depot-red-color-blind

    IMAGE:COLBLINDER

    微海报分享

    Related posts

    2022年6月28日

    建筑设计陈同学作品3


    Read more
    2022年6月28日

    建筑园林案例


    Read more
    2022年6月20日

    咨询


    Read more
    2022年6月17日

    建筑园林高级班李同学作品2


    Read more

    严老师电话|微信|

    手机:18902259698

    QQ咨询

    严老师 QQ 275043888

    QQ联系咨询课程

    晶网设计培训是广州建筑室内设计培训知名机构,拥有专业建筑犀牛课程,BIM培训考证,室内设计学习,园林景观学习课程等完善的广州室内设计培训教学机构。

    地址:广州天河北路703号 曜一城 C座 21 楼 08 联系电话18902259698

    ©2018 晶网设计 粤ICP备10225019号-1