<option id="uausy"></option>
  • <li id="uausy"></li>
  • array(23) {
      ["id"] => string(2) "96"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(1) "0"
      ["name"] => string(6) "服務"
      ["thumb"] => string(63) "/modules/cms/uploads/recommend/2018/05/15/05797102164099283.png"
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "service"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(88) "定制開發-APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
        ["meta_keywords"] => string(75) "APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(21) "show_page_dingzhi.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "1"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2018/05/25/05805654599261264.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
      ["son"] => array(9) {
        [0] => array(22) {
          ["id"] => string(3) "187"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(15) "小程序開發"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(112) "專業微信小程序解決方案|各種場景核心功能,提前布局微信新生態,搶占第一波紅利"
          ["pdir"] => string(0) ""
          ["dir"] => string(6) "wechat"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(107) "小程序_商城小程序_門店小程序_微圈小程序_餐飲小程序開發-藝源科技小程序開發"
            ["meta_keywords"] => string(103) "小程序開發,商城小程序開發,門店小程序開發,微圈小程序開發,餐飲小程序開發"
            ["meta_description"] => string(269) "專注提供專注提供小程序、商城小程序、門店小程序、微圈小程序、餐飲小程序開發,專業團隊,一對一服務,助企業快速生成自己的移動端微商城平臺. 藝源科技小程序采用高性能數據架構,系統穩定安全。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(17) "show_page_xcx.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "0"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "1"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [1] => array(22) {
          ["id"] => string(3) "199"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(9) "APP開發"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(3) "APP"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(65) "app開發_app定制開發_app制作開發公司【藝源科技】"
            ["meta_keywords"] => string(53) "app開發,app定制開發公司,app制作開發公司"
            ["meta_description"] => string(0) ""
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(17) "show_page_app.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "1"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [2] => array(22) {
          ["id"] => string(3) "244"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "快抖霸屏"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(7) "kuaidou"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(71) "快抖霸屏_抖音快手霸屏_短視頻營銷獲客技術提供商!"
            ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短視頻搜索,同城爆店碼"
            ["meta_description"] => string(161) "藝源智能云推廣系統13325455411專注快抖霸屏,抖音快手霸屏,同城爆店碼,一款線下與線上流量緊密結合的營銷爆客解決方案。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(20) "show_page_douyin.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "2"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(27) "需要短視頻推廣排名"
          ["modelname"] => NULL
        }
        [3] => array(22) {
          ["id"] => string(3) "207"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(14) "AI智能名片"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2019/07/04/06155550417466502.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(2) "ai"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(68) "藝源AI智能名片_名片小程序_智能名片_讓銷售更簡單"
            ["meta_keywords"] => string(97) "藝源AI智能名片,名片小程序,智能名片_讓銷售更簡單,電子名片,二維碼名片"
            ["meta_description"] => string(184) "藝源AI智能名片-讓銷售更簡單。藝源AI智能名片為企業提供名片小程序,智能名片,企業名片,小程序名片,電子名片,二維碼名片等相關的服務。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(16) "show_page_ai.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "3"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [4] => array(22) {
          ["id"] => string(3) "201"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "版權登記"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814062280145708.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(9) "copyright"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(0) ""
            ["meta_keywords"] => string(0) ""
            ["meta_description"] => string(0) ""
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(23) "show_page_copyright.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "4"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814063838873717.jpg"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [5] => array(22) {
          ["id"] => string(3) "203"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "商標注冊"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813359170749750.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(9) "trademark"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(131) "商標注冊_商標注冊流程_商標注冊流程及費用_西安商標注冊_西安商標注冊代理-「源知果」藝源科技"
            ["meta_keywords"] => string(103) "商標注冊,商標注冊流程,商標注冊流程及費用,西安商標注冊,西安商標注冊代理"
            ["meta_description"] => string(182) "「源知果」西安提供代理版權登記,代理商標注冊,代理專利申請,代理企業貫標,代理高新技術企業認定的服務;咨詢電話:13325455411。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(23) "show_page_trademark.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "5"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/11/06135617157272716.png"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [6] => array(22) {
          ["id"] => string(3) "205"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "網站建設"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2019/06/21/06144566585327511.jpg"
          ["desc"] => string(149) "節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款|節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款"
          ["pdir"] => string(0) ""
          ["dir"] => string(7) "website"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(80) "西安商城網站建設_政府網站建設_學校網站建設就選藝源科技"
            ["meta_keywords"] => string(113) "西安網站建設,西安網絡公司,西安網頁設計,商城網站建設,政府網站建設,學校網站建設"
            ["meta_description"] => string(248) "「藝源科技」是西安一家專業的西安商城網站建設,政府網站建設,學校網站建設的網絡公司,咨詢電話:029-88810146/150 9401 9029。公司擁有10年實踐經驗,為您提供一條龍的互聯網應用解決方案。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(21) "show_page_website.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "6"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/24/06146855992801864.jpg"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [7] => array(22) {
          ["id"] => string(3) "208"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "2"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(15) "云服務平臺"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(0) ""
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(0)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(0)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(0) ""
            ["meta_keywords"] => string(0) ""
            ["meta_description"] => string(0) ""
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(0) ""
            ["formid"] => string(0) ""
            ["url"] => string(21) "http://www.qulvkj.com"
            ["target"] => string(6) "_blank"
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "7"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [8] => array(22) {
          ["id"] => string(3) "202"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(9) "SEO優化"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813061683398516.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(3) "seo"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(90) "【西安SEO優化_西安網站優化_關鍵詞排名優化】-SEO優化公司藝源科技"
            ["meta_keywords"] => string(81) "西安SEO優化,西安SEO優化公司,西安網站優化,西安網站優化公司"
            ["meta_description"] => string(244) "藝源科技(yysweb.com),專注為企業提供百度等搜索引擎整站SEO優化服務,針對不同行業、網站情況給出不同策略、報價和SEO建議;是您值得信賴的seo診斷、顧問咨詢等云SEO技術服務外包商。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(17) "show_page_seo.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "8"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813062712033401.jpg"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
      }
    }
    
    				
    當前位置: 首頁 > 售后 > 藝源智庫
    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧
    時間:2019-06-11 11:33:01
    文章發布:李陽
    原創作者:未知
    來源:互聯網

    網站的可用性是個大問題,之前《專為色盲打造!快速提高網站可用性的5個實用方法》 這篇文章提出了幾點針對色盲用戶的網站體驗優化方法,而今天的這篇則是前者的很好的補充~

    根據 Colour Blind Awareness 的數據,4.5% 的用戶是色盲,如果你的網站受眾是以男性為主,那么這個數據可能高達8%。在進行網頁和UI設計的過程中,色盲人群的實際狀況很容易被設計師所忽略,畢竟絕大多數的設計師本身并非色盲。所以,應當如何在設計上兼顧到色盲以及色弱的用戶群體呢?

    今天的文章在之前的基礎上,總結出了13條實用可行的建議,提升色盲用戶的瀏覽體驗。當然,這樣的設計對于普通用戶而言,同樣非常有效果。


    什么是色盲

    首先,色盲是有多種類型的。不過你并沒有必要對所有的色盲都有清晰的概念,絕大多數的色盲都可以歸結為看不清特定色彩、混淆色彩或者無法分辨特定的幾種色彩。

    這樣的情況無疑是棘手的,但是實際狀況還可能讓色盲用戶的情況更加麻煩:質量較差的顯示器,光照不足,屏幕炫光,過于小的手機屏幕,距離電視機較遠,等等等等。

    僅僅依靠簡單的色彩可讀性規則和普通的可供性設計原則,其實并不一定能夠解決這些問題。下面的建議也許無法面面俱到,但是絕大多數網頁設計可能牽涉到的問題,在下面的列表中都有所覆蓋。


    1、文本的可讀性

    為了確保文本的可讀性,應當根據可訪問原則來選擇背景的配色和文本的配色以及尺寸:

    “WCAG 2.0 AA 要求正文文本的對比度達到4.5:1,而標題文本達到3:1。(正文粗體14pt+,標題18pt+)——WebAim color contrast checker ”

    下面的案例展示了哪些搭配能通過,而哪些無法達到標準(passes=通過,fails=不通過):

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技


    2、文字和圖片的疊加

    圖文混排中,文字和圖片的疊加通常會相對更加棘手一些,因為在很多情況下,要保證文本和圖片之間有明顯的對比度并不是那么容易。

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    降低背景的透明度,或者增加蒙板,讓文字更易于識別。

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    當然,你還可以給文本換個更醒目的色彩,或者增加陰影來提升對比度。


    3、取色與說明

    下面的截圖是亞馬遜的購買頁面中不同衣服的顏色分類,對于紅綠色盲用戶而言,他們看到頁面可能是右邊那樣的。在這種情況下,不同的色彩沒有文本標簽分辨,紅綠色盲用戶無法分辨其中的差異。

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    不過,在桌面瀏覽器上,用戶鼠標懸停在色彩上面的時候,能夠看到相應的文本標簽,但是移動端上則無法實現這樣的功能。

    Gap 則通過給每個色彩加文本標簽來解決這一困局:

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    其實這樣的設計對于普通用戶而言也是非常實用而貼心的,比如黑色和海軍藍即使是普通用戶在屏幕上并不是那么好分辨的,加個標簽能更好的分辨。


    4、給圖片附上有用的描述

    下面的截圖是一個SuperDry系列的T恤,網站對這款T恤描述為“Leaf Jaspe”,也就是說它的配色靈感來自于樹葉,而它的實際色彩包含了綠色、黃色和棕色等。

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    問題來了,色盲用戶首先分辨不出它的實際色彩,需要依靠描述來了解,但是描述中的Leaf 意為樹葉,而Jaspe 則為斑駁的意思,實際上也不夠直觀。所以,最合理的描述應當為“Gray Green Leaf Jaspe”(灰綠色斑駁樹葉)。


    5、鏈接識別

    網頁鏈接最好是能夠不通過色彩就可以識別出來。如果一個全色盲用戶(完全無法分辨色彩)打開 UK GDS (英國政府數字服務)網站,那么他會看到下面的界面。這個情況下,網站中用色彩來區分的鏈接他們就全然看不到了。

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    為了找到鏈接,這些用戶需要用鼠標光標來探路,光標沿著文本移動,直到看到箭頭變成指針,他們才能意識到這是一個可點擊的鏈接。如果是在移動端上,他們就不得不用手指一點一點嘗試,來查找每一個鏈接可能存在的地方了。

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    加上圖標說明的鏈接更容易被發現,而如果沒有圖標的話,加上下劃線也可以帶來不錯的效果。


    6、配色

    現實世界中,色彩往往是不可控的:紅色的蘋果旁邊,可能會有一堆綠色的樹葉。但是在網頁中則不然,設計師通常都有著足夠的權限來控制好這些問題。下面的配色就應當盡量規避:

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    ·綠色/紅色
    ·綠色/棕色
    ·藍色/紫色
    ·綠色/藍色
    ·淺綠色/黃色
    ·藍色/灰色
    ·綠色/灰色
    ·綠色/黑色


    7、表單占位符

    在網頁表單設計中同樣存在問題,蘋果官網創建Apple ID的頁面表單當中,每個字段都有相應的占位符,但是占位符的對比度通常不夠高,弱視的用戶很難分辨。在這種情況下,字段的標簽說明就很重要了,然而這個表單又沒有,這就非常尷尬了。

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    但是,增加占位符的對比度并不是合理的解決方案,因為占位符必須同用戶后續輸入的文本清晰的區分開。

    下面 Made.com 的表單就做的不錯,他們通過標簽清晰的說明了每一個字段都是什么內容:

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技


    8、首選按鈕

    通常界面中的首選按鈕會用更顯眼的色彩來強調,Argo 的公司登錄界面就是這么設計的。但是Argo 這樣的設計僅僅是通過色彩來區分,對于色盲用戶而言可能會造成困擾。

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    相反,通過大小、位置、粗細、邊框和圖標來進行區分,就可以很好的緩解可訪問性的問題了。比如Kidly 的設計:

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技


    9、提示信息

    通常成功和失敗兩類信息都是通過綠色和紅色來進行區分的。然而這兩種色彩又正好讓色盲用戶很難區分,這樣一來,他們壓根就無法區分信息的對錯與否。不過,如果你簡單的增加一個“Success”的文本說明,或者使用相應的圖標來說明,用戶就可以更加直觀的了解信息了。

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技


    10、必須填寫的表單字段

    通常必須填寫的表單字段會用色彩(比如紅色)來進行區分,這也使得有一部分用戶會無法分辨。

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    想要解決這個問題,你可以考慮下列方案:

    ·使用星號來進行區分
    ·更直接一點,寫上“必填”
    ·如果可能的話,移除選填字段,讓全部內容為必填


    11、圖表

    通常設計師會在圖表中使用不同的色彩來標識不同的項目,而色盲用戶同樣會存在識別性的問題。下面的這些設計案例就提出了很好的解決方案,右邊案例對于色盲用戶更加友好:

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧-藝源科技

    盡量使用紋理來區分,加上文本的說明,讓圖表更加易懂,即使沒有色彩也能區分。

    小程序開發
    標簽: 優秀網頁設計 用戶體驗 經驗分享 網頁設計 色盲 色盲用戶
    *版權申明:本站部分文章由藝源科技收集整理,不代表我們的觀點。如果這篇轉載侵犯您的版權,請及時聯系我們刪除!
    為您推薦
    最新文章
    掃碼加他,免費獲取方案
    久久青草费线频观看地址_少妇久久久久久久久久_亚洲欧洲自拍拍偷午夜色_国产sm重味一区二区三区
    <option id="uausy"></option>
  • <li id="uausy"></li>