中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

對(duì)用戶需求越包容，用戶越能理解你的設(shè)計(jì)。接下來，讓我們一起認(rèn)真研究可達(dá)性的幾個(gè)維度，它們能夠幫助你提升設(shè)計(jì)的合理性。

“可達(dá)性問題應(yīng)該在設(shè)計(jì)階段得到解決。”這是Daniel Na和他的團(tuán)隊(duì)在參加會(huì)議時(shí)反復(fù)聽到的一句話。設(shè)計(jì)可達(dá)性就意味著要滿足用戶的需求，這包括你的目標(biāo)用戶、目標(biāo)用戶群以外的用戶、殘障用戶甚至是一些來自不同文化和國家的用戶，而設(shè)計(jì)出良好體驗(yàn)的關(guān)鍵就是了解這些群體的需求。

當(dāng)為可達(dá)性設(shè)計(jì)時(shí)，最常見的問題就是要知道用戶需求是什么，為什么而設(shè)計(jì)，這并不是為了篩選用戶，只是因?yàn)椤拔覀儾涣私馕覀儾恢赖臇|西（譯者注：此處作者的意思應(yīng)為，我們無法為我們不了解的需求進(jìn)行設(shè)計(jì)）”。所以，當(dāng)涉及到可達(dá)性時(shí)，有很多因素需要我們考慮。

我們?nèi)绾瘟私獗姸嗟挠脩粢约八麄兊男枨竽?？我們又如何保證他們的需求會(huì)在我們的設(shè)計(jì)中得到滿足呢？為了解決這些問題，采用一種從不同維度來評(píng)估設(shè)計(jì)關(guān)鍵性的分析方法是很有幫助的。

“當(dāng)你從許多不同的視角或維度來審視你的“設(shè)計(jì)”時(shí)，你就會(huì)發(fā)現(xiàn)優(yōu)秀的“可達(dá)性”設(shè)計(jì)?！薄猅he Art of Game Design: A Book of Lenses

維度（Lens）是一個(gè)過濾口很密的過濾器，通過它可以思考、審視某個(gè)話題。通常還被用于檢查藝術(shù)品、文學(xué)作品或電影，不同的維度要求我們留下我們的世界觀，而不是通過不同的環(huán)境來觀察世界。

例如，通過歷史維度欣賞藝術(shù)作品能夠讓我們了解當(dāng)時(shí)的社會(huì)、政治、經(jīng)濟(jì)、文化或智力情況。這會(huì)讓我們能夠更好地了解藝術(shù)家所處環(huán)境是如何影響他們的，以及如何塑造藝術(shù)作品和其所蘊(yùn)含的時(shí)代特征。

可達(dá)性維度就像一個(gè)過濾器，我們可以用它來了解設(shè)計(jì)是如何影響用戶的需求。在貫穿整個(gè)設(shè)計(jì)過程中，每個(gè)維度所呈現(xiàn)出問題都會(huì)讓設(shè)計(jì)師再次思考自己的設(shè)計(jì)是否合理。通過運(yùn)用這些維度，你將會(huì)更加包容你的用戶需求，為更多的人設(shè)計(jì)出更易于觸達(dá)的用戶體驗(yàn)。

可達(dá)性的維度如下：

• 動(dòng)效維度
• 音頻和視頻維度
• 色彩維度
• 控件維度
• 字體維度
• 圖像和圖標(biāo)維度
• 鍵盤維度
• 布局維度
• 材料忠誠度維度
• 可讀性維度
• 結(jié)構(gòu)維度
• 時(shí)間維度

你應(yīng)該也能猜到，并非所有的維度都要應(yīng)用到每個(gè)設(shè)計(jì)中。雖然有些維度是可以應(yīng)用到所有的設(shè)計(jì)中，但其他的維度則有著一定的適用情景。某個(gè)設(shè)計(jì)中最有效的維度可能并不適用于另一個(gè)設(shè)計(jì)。

由每個(gè)維度提供的問題僅僅是用來幫助你理解可能引起問題的工具。與往常一樣，你應(yīng)該與用戶一起驗(yàn)證你的設(shè)計(jì)，以確保你的設(shè)計(jì)是可用的、可觸達(dá)的。

一、動(dòng)效維度

有效的動(dòng)畫可以給頁面和品牌帶來生命感，引導(dǎo)用戶關(guān)注，并幫助定位用戶。但動(dòng)效也是一把雙刃劍，濫用動(dòng)效不僅會(huì)帶來混亂或分散注意力，而且對(duì)某些用戶來說這可能是致命的。

快速閃爍的效果（定義為閃爍超過三秒）或高強(qiáng)度的效果和模式可能引起癲癇發(fā)作，被稱為“光敏性癲癇”。光敏性還可引起頭痛、惡心和頭暈等癥狀。患有光敏性癲癇癥的用戶在使用網(wǎng)絡(luò)時(shí)必須非常小心，因?yàn)樗麄儾恢朗裁磿r(shí)候可能會(huì)導(dǎo)致癲癇發(fā)作。

其它影響（如視差或運(yùn)動(dòng)果）可能會(huì)導(dǎo)致某些用戶因前庭敏感而感到頭暈或經(jīng)受眩暈。前庭系統(tǒng)控制著人的平衡和運(yùn)動(dòng)感。當(dāng)這個(gè)系統(tǒng)不能正常工作時(shí)，就會(huì)引起頭暈和惡心等癥狀。

“設(shè)想這樣一個(gè)世界，你的內(nèi)部陀螺儀不正常地工作。非常類似于陶醉，事情似乎是自己動(dòng)起來的，你的腳似乎永遠(yuǎn)不會(huì)穩(wěn)定在你的下方，你的感覺比你的身體移動(dòng)得更快或更慢。”——A Primer To Vestibular Disorders

持續(xù)的動(dòng)效或動(dòng)畫也會(huì)分散用戶的注意力，尤其是對(duì)于那些難以集中注意力的用戶。GIF動(dòng)畫就是典型案例，因?yàn)槲覀兊囊曈X中心會(huì)被運(yùn)動(dòng)的物體所吸引，所以很容易被不斷更新或移動(dòng)的東西分散注意力。

這并不是說動(dòng)效很糟糕，所以你不應(yīng)該使用它。相反，你應(yīng)該要明白為什么要使用動(dòng)效以及如何去設(shè)計(jì)更安全的動(dòng)效。一般來說，你應(yīng)該嘗試設(shè)計(jì)那些短距離，適應(yīng)其它移動(dòng)對(duì)象的方向和速度（包括滾動(dòng)），并且屏幕尺寸相對(duì)較小的動(dòng)效。

你還應(yīng)提供控件或選項(xiàng)以迎合用戶的個(gè)性化體驗(yàn)。例如，Slack可讓你隱藏動(dòng)畫圖像或表情符號(hào)作為全局設(shè)置和每個(gè)圖像的基礎(chǔ)。

要使用動(dòng)效，需要注意以下問題：

• 是否有可能導(dǎo)致癲癇發(fā)作？
• 是否有任何動(dòng)作或效果可能會(huì)通過運(yùn)動(dòng)引起頭暈或眩暈？
• 是否有任何動(dòng)畫可能會(huì)通過不斷移動(dòng)、閃爍或自動(dòng)更新而分散注意力？
• 是否可以提供一些控件或選項(xiàng)來停止、暫停、隱藏或者更改任何動(dòng)畫或效果的頻率？

二、音頻和視頻維度

視頻、音頻的自動(dòng)播放功能有時(shí)可能非常煩人。它們不僅破壞了用戶的注意力，而且還會(huì)逼得用戶主動(dòng)去搜尋那些有問題的媒體文件并將其靜音或關(guān)閉。作為一般通用原則，請(qǐng)不要在設(shè)計(jì)中添加一些自動(dòng)播放的視頻、音頻等媒體文件。

“謹(jǐn)慎地使用自動(dòng)播放的設(shè)計(jì)。雖然自動(dòng)播放可能是一款功能強(qiáng)大的參與工具，但如果播放了用戶不想聽的聲音，會(huì)使用戶剛到煩躁；或者播放了一些不需要的視頻回放，會(huì)讓用戶感到不必要的資源使用（例如數(shù)據(jù)、電量）?！?——Google Autoplay guidelines

你現(xiàn)在可能會(huì)問：“如果我在后臺(tái)自動(dòng)播放視頻但保持靜音，會(huì)怎么樣？”雖然在當(dāng)今的網(wǎng)頁設(shè)計(jì)中使用視頻作為背景可能是一個(gè)日益增長的趨勢；但背景視頻遇到了與GIF動(dòng)畫和連續(xù)移動(dòng)動(dòng)效相同的問題：可能會(huì)分散注意力。因此，你應(yīng)該提供控件或選項(xiàng)來暫停或禁用視頻。

除了控件之外，視頻還應(yīng)具有文本記錄或者字幕，以便用戶可以采用最適合他們的方式瀏覽內(nèi)容。那些視覺受損或?qū)幵搁喿x也不觀看視頻的用戶需要一個(gè)文本記錄，同時(shí)那些視聽障礙的用戶或著那些不想聽視頻的用戶也需要字幕。

要使用音頻和視頻，需要注意以下問題：

• 是否有被自動(dòng)播放的音頻或視頻所困擾？
• 是否可以提供控件來停止、暫?；螂[藏自動(dòng)播放的音頻或視頻？
• 視頻是否有文本或字幕？

三、色彩維度

色彩在設(shè)計(jì)中起著重要的作用。色彩能夠喚起情緒、感覺和想法。色彩還可以用來增強(qiáng)品牌信息和品牌感知。然而，當(dāng)用戶看不到它們或以不同的方式感知它們時(shí)，色彩的力量就會(huì)消失。

綠色盲很常見，導(dǎo)致紅色呈現(xiàn)棕色/黃色，綠色呈現(xiàn)米色。紅色盲很少見，導(dǎo)致紅色顯示為深色/黑色，橙色/綠色顯示為黃色。 藍(lán)黃色色盲是非常罕見的，藍(lán)色的情況下看起來更綠色/藍(lán)綠色，黃色看起來是紫色/灰色。

色彩含義對(duì)于國際用戶來說也是存在問題的。因?yàn)樯试诓煌瑖液臀幕写碇煌氖挛铩?在西方文化里，紅色通常用于表示消極趨勢，而綠色表示積極趨勢，但在東方和亞洲文化中卻相反。

由于色彩及其含義可能因文化差異或色盲而顯得沒有意義，所以你應(yīng)該增加一些無色標(biāo)識(shí)符。標(biāo)識(shí)符（如圖標(biāo)或文字說明）可以幫助彌補(bǔ)文化差異，而圖案可以很好地用來區(qū)分顏色。

Trello的色盲友好標(biāo)簽使用不同的圖案來區(qū)分顏色。

對(duì)于某些用戶來說，飽和的顏色、高對(duì)比度的顏色，甚至只是黃色都會(huì)讓人感到不舒服和不安，突出表現(xiàn)在自閉癥譜系上。所以在設(shè)計(jì)時(shí)最好避免高濃度類型的顏色，以幫助用戶保持舒適。

前景色和背景色之間的對(duì)比度差使得視力較差的用戶、使用低端顯示器的用戶或者剛好在陽光直射下的用戶更難看到。對(duì)于使用鍵盤的用戶來說，所有文本、圖標(biāo)和任何焦點(diǎn)指示符應(yīng)滿足背景顏色的最小對(duì)比度4.5：1。

你還應(yīng)確保設(shè)計(jì)和色彩在Windows高對(duì)比度模式的不同設(shè)置中正常工作。常見的問題就是文本在某些高對(duì)比度模式背景下變得不可見。

要使用色彩，需要注意以下問題：

• 如果顏色從設(shè)計(jì)中刪除，會(huì)失去什么含義？
• 如何在不使用顏色的情況下表達(dá)含義？
• 顏色是否過飽和或具有高對(duì)比度，這些都可能導(dǎo)致用戶過度刺激或不舒服？

所有文字、圖標(biāo)和聚焦指示的前景和背景顏色是否符合4.5：1的對(duì)比度指標(biāo)？

四、控件維度

控件也被稱為“交互式內(nèi)容”，是用戶可以與之交互的任何UI元素，可以是按鈕、鏈接、輸入或任何帶有事件監(jiān)聽器的HTML元素。控件太小或太靠近可能會(huì)給用戶帶來很多問題。

對(duì)于無法用指尖精確定位的用戶（如那些有顫抖疾病的用戶），或因年齡而導(dǎo)致靈活性降低的用戶，會(huì)很難點(diǎn)擊小控件。例如，復(fù)選框和單選按鈕的默認(rèn)大小可能會(huì)給老年用戶帶來問題。即使提供可以點(diǎn)擊的標(biāo)簽，也并非所有用戶都知道他們可以這樣做。

太靠近的控件可能會(huì)給使用觸摸屏的用戶帶來問題。手指大而難以準(zhǔn)確點(diǎn)擊。意外觸摸錯(cuò)誤的控件可能會(huì)導(dǎo)致挫敗感，特別是如果該控件導(dǎo)航你離開或讓您失去上下文。

當(dāng)觸摸單行推文時(shí)，很容易意外地點(diǎn)擊該人的姓名或句柄，而不是打開推文，因?yàn)樗麄冎g沒有足夠的空間

嵌套在另一個(gè)控件內(nèi)的控件也可能導(dǎo)致誤觸。它不僅在HTML規(guī)范中不允許使用，而且它還會(huì)容易地選擇父級(jí)控件而不是你想要選擇的控件。

為了給用戶足夠的間距來準(zhǔn)確選擇控件，建議控件的最小尺寸為34×34像素，但是Google建議至少48×48像素，而WCAG規(guī)范建議至少44×44像素。此大小還包括控件所具有的任何填充。所以一個(gè)控件可以在視覺上是24 x 24像素，但是在所有邊上都會(huì)有一個(gè)額外的10像素的填充將會(huì)使它達(dá)到44×44像素。

同時(shí)還建議控件之間的空間足夠遠(yuǎn)以減少誤觸。微軟建議至少有8個(gè)像素的間距，而谷歌推薦的控件至少間隔32個(gè)像素。

控件還應(yīng)該有一個(gè)可見的文本標(biāo)簽。屏幕閱讀器不僅需要文本標(biāo)簽來知道這個(gè)控件的功能，而且顯示文本標(biāo)簽可以幫助用戶更好地理解控件的用途。這對(duì)于表單輸入和圖標(biāo)來說尤其重要。

要使用控件，需要關(guān)注以下問題：

• 是否有的控件讓一些用戶觸摸起來覺得不夠大？
• 是否有控件太過于靠近，以至于很容易碰到錯(cuò)誤的控件？
• 是否有的控件嵌套在另一個(gè)控件中或可點(diǎn)擊區(qū)域內(nèi)？
• 是否所有的控件都有可見的文本標(biāo)簽？

五、布局維度

在網(wǎng)絡(luò)早期時(shí)，我們設(shè)計(jì)了字體大小在9-14像素之間的網(wǎng)頁。由于顯示器具有相對(duì)已知的屏幕尺寸，因此當(dāng)時(shí)顯示效果都很好。我們設(shè)計(jì)思考點(diǎn)是瀏覽器窗口是一個(gè)常量，這是無法改變的。

今天的技術(shù)已經(jīng)與20年前截然不同了。如今，瀏覽器可以在任何尺寸設(shè)備上使用，從小型手表到巨大的4K屏幕。我們不能再使用固定字體大小來設(shè)計(jì)我們的網(wǎng)站。字體大小必須與設(shè)計(jì)本身一樣具有響應(yīng)性。

字體大小不僅應(yīng)該具有響應(yīng)性，而且設(shè)計(jì)得應(yīng)該足夠靈活，可以允許用戶自定義字體大小、行高或字母間距以達(dá)到舒適的閱讀水平。許多用戶使用自定義CSS來幫助他們獲得更好的閱讀體驗(yàn)。

字體本身就應(yīng)該便于閱讀的。你可能想知道一種字體是否比另一種字體更便于閱讀。而事實(shí)真相就是字體對(duì)可讀性沒有真正的影響。相反，它的字體風(fēng)格在字體可讀性中卻起著非常重要的作用。

對(duì)于許多用戶來說，裝飾字體或草書字體的樣式是很難閱讀的，這對(duì)于患有閱讀障礙的用戶來說就更是個(gè)大問題。小字體、斜體文本和全部大寫文本對(duì)用戶來說都是很難的?？偟膩碚f，較大的文字、較短的線條長度、較高的線條高度和增大的字母間距可以幫助用戶獲得更好的閱讀體驗(yàn)。

要使用字體，需要關(guān)注以下問題：

• 設(shè)計(jì)是否足夠靈活，可以讓用戶自行修改字體為舒適的閱讀狀態(tài)？
• 字體樣式是否容易閱讀？

六、圖片和圖標(biāo)維度

他們說，“一張圖片勝過千言萬語?！比欢?，一張你看不到的圖片卻是無言的，對(duì)吧？圖像在設(shè)計(jì)中可用于來傳達(dá)特定的意義或感覺。有時(shí)它們可用于簡化復(fù)雜的想法。無論什么樣的圖像，使用屏幕閱讀器的用戶都需要知道圖像的含義。

作為設(shè)計(jì)師，是最能理解圖像所要傳達(dá)的意義或信息。因此，你應(yīng)該使用這些信息對(duì)設(shè)計(jì)進(jìn)行闡釋，以便后期不會(huì)遺漏或誤解，這將用于為圖像創(chuàng)建可替代的文本。

“你幾乎不會(huì)去描述圖片的樣子，而你會(huì)解釋圖片所包含的信息?！薄狥ive Golden Rules for Compliant Alt Text

既然知道描述圖像是一件很困難的事情，那么在做決策時(shí)，有個(gè)方便的決策樹是很有幫助的。 一般來說，如果這個(gè)圖像是裝飾性的或者已經(jīng)有描述圖像信息的文本，就不需要進(jìn)一步的信息說明。否則的話，你應(yīng)該描述圖像的信息。如果圖像包含文本，也請(qǐng)重復(fù)描述中的文本。

描述應(yīng)該簡潔。建議不超過兩個(gè)句子，而盡可能使用一個(gè)簡潔的句子。這可以讓用戶快速地理解圖像而無需聽取冗長的描述。

舉個(gè)例子，如果你打算要對(duì)屏幕閱讀器描述這個(gè)圖像，你會(huì)說什么？

由于我們描述的是圖像所傳達(dá)的信息而不是圖像本身，因此描述的內(nèi)容可能是梵高的“星夜”，而沒有其他相關(guān)內(nèi)容的描述。你不應(yīng)該僅放一些繪畫的風(fēng)格或圖片的樣子的描述。

如果圖像包含的信息需要冗長的描述，你不應(yīng)將該描述放在關(guān)鍵信息中（例如復(fù)雜的圖表）。 相反，你應(yīng)該使用關(guān)鍵文字的簡短描述作為標(biāo)題，然后給一個(gè)詳細(xì)描述的內(nèi)容或指向其他頁面的鏈接。

這樣，用戶仍然可以快速獲取最重要的信息，當(dāng)然如果他們愿意，還可以進(jìn)一步挖掘。如果圖像是一張圖表，你應(yīng)該重復(fù)圖表的數(shù)據(jù)，就像對(duì)圖像中的文本重復(fù)一樣。

如果你正在設(shè)計(jì)的平臺(tái)允許用戶上傳圖像，你應(yīng)該為用戶提供一種方式來輸入關(guān)鍵信息以及圖像。例如，Twitter允許用戶在將圖片上傳到推文時(shí)可寫下關(guān)鍵信息。

要使用圖像和圖標(biāo)，需要關(guān)注以下問題：

• 任何圖像包含的信息在看不到的情況下會(huì)丟失嗎？
• 我如何以非視覺方式提供信息？
• 如果圖像是由用戶控制的，是否可以提供一種方法讓他們輸入關(guān)鍵信息描述？

七、鍵盤維度

鍵盤可達(dá)性是可達(dá)性設(shè)計(jì)中最重要的一個(gè)方面，但也是最容易被忽視的一個(gè)。

用戶喜用鍵盤而不是鼠標(biāo)的原因有很多。有一些使用屏幕閱讀器的用戶經(jīng)常使用鍵盤來閱讀網(wǎng)頁，也有一些顫抖癥狀的用戶使用鍵盤，因?yàn)樗峁┝吮仁髽?biāo)更好的準(zhǔn)確性。甚至一些高級(jí)用戶也會(huì)使用鍵盤，因?yàn)樗?、更高效?/p>

使用鍵盤的用戶通常會(huì)使用Tab鍵按順序操控著每個(gè)控件。Tab鍵的邏輯順序很大程度上幫助用戶知道了下一個(gè)按鍵將在何處進(jìn)行。在西方文化中，這通常是從左到右，從上到下的順序。但意外的Tab操作指令也會(huì)導(dǎo)致用戶迷失，用戶會(huì)瘋狂的掃描網(wǎng)頁來尋找焦點(diǎn)所在的位置。

有序的Tab鍵操作還意味著它們必須能夠觸達(dá)用戶完成任務(wù)之前所需的控件。如果用戶完成任務(wù)需要點(diǎn)擊數(shù)十次或數(shù)百次的控件命令，這對(duì)于用戶來說可能是個(gè)真正的痛點(diǎn)。

通過將最重要的用戶流程貼近Tab鍵頂部的方式，我們可以幫助用戶更好地提高操作效率。然而，這種方式并不總是有效的。在這些情況下，提供快速跳轉(zhuǎn)到特定流程或內(nèi)容的方法可能使它們更高效。這就是為什么“跳到內(nèi)容”鏈接的存在意義。

一個(gè)很好的案例就是Facebook，它提供了一個(gè)鍵盤導(dǎo)航菜單，通過這個(gè)菜單用戶可以跳轉(zhuǎn)到網(wǎng)站的特定模塊，這極大地提升了用戶與他們想要的頁面和內(nèi)容的交互的效率。

Facebook為所有鍵盤用戶提供了一種跳轉(zhuǎn)到頁面特定模塊或其他頁面的方式，以及一個(gè)“輔助功能幫助”的菜單。

在設(shè)計(jì)Tab鍵交互時(shí)，焦點(diǎn)狀態(tài)應(yīng)該始終可見，否則用戶很容易迷失。就像意外的Tab鍵操作一樣，沒有良好的焦點(diǎn)指示會(huì)導(dǎo)致用戶不知道當(dāng)前所處的狀態(tài)，需要到處瀏覽頁面來尋找焦點(diǎn)。

更改默認(rèn)焦點(diǎn)指示的樣式有時(shí)可以改善用戶體驗(yàn)。一個(gè)好的焦點(diǎn)指示不僅依靠顏色來指示焦點(diǎn)（參考顏色維度），而且還應(yīng)該足夠清晰，以便用戶能夠輕松找到它。例如，周圍有著藍(lán)色按鈕的處于焦點(diǎn)狀態(tài)的藍(lán)色線框就會(huì)在視覺上不夠明顯，而導(dǎo)致其很難辨識(shí)。

雖然該維度側(cè)重于鍵盤可達(dá)性，但要注意到它適用于沒有鼠標(biāo)的用戶，為他們提供一種與網(wǎng)站交互的方式。

用戶可以在沒有鼠標(biāo)的情況下與網(wǎng)站交互的任何方式。諸如開關(guān)按鈕、sip-puff按鈕以及眼動(dòng)追蹤軟件之類的設(shè)備都要求頁面可以通過鍵盤進(jìn)行操作。

通過改進(jìn)鍵盤可達(dá)性，你可以讓更多用戶更好地訪問你的網(wǎng)站。

使用鍵盤，需要注意以下問題：

• 什么樣的鍵盤導(dǎo)航順序?qū)υO(shè)計(jì)是最有意義的？
• 一個(gè)鍵盤用戶如何以最快的方式獲得他們想要的東西？
• 焦點(diǎn)指示是否始終可見且視覺上明顯不同？

八、布局維度

布局對(duì)網(wǎng)站的可用性有很大的幫助。一個(gè)好的布局可以很輕松地查找到有用的內(nèi)容，一個(gè)好布局應(yīng)該為用戶提供有意義的邏輯順序。

隨著CSS 網(wǎng)格的出現(xiàn)，能夠根據(jù)可用空間改變布局使其變得更有意義，這比以前更容易實(shí)現(xiàn)。但是，更改可視的頁面布局會(huì)給那些依賴頁面結(jié)構(gòu)布局的老用戶帶來新的問題。

結(jié)構(gòu)布局是屏幕閱讀器和使用鍵盤的用戶使用的。當(dāng)可視的頁面布局發(fā)生變化時(shí)（底層結(jié)構(gòu)布局未變），這些用戶可能會(huì)因?yàn)槠銽ab鍵順序不合邏輯而感到困惑。如果必須更改可視的頁面布局，則應(yīng)通過更改結(jié)構(gòu)布局來執(zhí)行此操作，以便使用鍵盤的用戶保持有序的、有邏輯的Tab操作。

布局應(yīng)該是可調(diào)整大小的，在沒有水平滾動(dòng)條的情況下，靈活度至少320像素，以便在手機(jī)上可以輕松查看。對(duì)于需要增加字體大小來獲得更好閱讀體驗(yàn)的用戶，布局也應(yīng)該足夠靈活，可以放大到400％（也沒有水平滾動(dòng)條）。

當(dāng)相關(guān)內(nèi)容彼此非常接近時(shí)，使用屏幕放大鏡的用戶將會(huì)受益。屏幕放大鏡僅向用戶提供整個(gè)布局的小視圖，因此很難找到較遠(yuǎn)或
遠(yuǎn)離交互發(fā)生位置，因而忽略這些位置的內(nèi)容。

在CodePen上執(zhí)行頁面的右上角的搜索時(shí)。單擊該按鈕可在屏幕的另一側(cè)顯示大量搜索輸入。 使用屏幕放大鏡的用戶將難以注意到這些更改，還以為該按鈕不起作用。

使用布局，需要注意以下問題：

• 布局是否有意義有邏輯順序？
• 當(dāng)在小屏幕上觀看或放大到400%時(shí)，布局會(huì)發(fā)生什么？
• 由于用戶互動(dòng)而相互關(guān)聯(lián)或變化的內(nèi)容是否非常接近？

九、材料忠誠度維度

材料忠誠度是一種建筑設(shè)計(jì)價(jià)值度量，用來表明材料本身是實(shí)在的，不能用作替代另一種材料。這意味著混凝土應(yīng)該看起來像混凝土，而不是被涂漆或雕刻成看起來像磚。

材料忠誠度是衡量每種材料的獨(dú)特屬性和特征的屬性。遵循材料忠誠度的建筑師知道何時(shí)使用哪種材料以及如何使用它而不會(huì)使其失去光澤。

盡管如此，材料忠誠度并不是一個(gè)硬性規(guī)則。它是一個(gè)連續(xù)統(tǒng)一體，與所有值一樣，你可以在理解它們的前提下將它們分解。俗話說，它們更多的是你所說的指導(dǎo)方針而不是實(shí)際的規(guī)則。

當(dāng)應(yīng)用在網(wǎng)頁設(shè)計(jì)時(shí)，材料忠誠度意味著一個(gè)頁面元素或組件不應(yīng)該看起來、操作起來或發(fā)揮作用時(shí)像其他的元素或組件。這樣做會(huì)欺騙用戶，并可能導(dǎo)致困惑。一個(gè)常見的例子是看起來像按鈕的鏈接或像鏈接的按鈕。

鏈接和按鈕具有不同的行為和可供性。使用回車鍵激活鏈接，通常會(huì)將您帶到另一個(gè)頁面，并在右鍵單擊時(shí)顯示特殊的上下文菜單。使用空格鍵激活按鈕，主要用于觸發(fā)當(dāng)前頁面上的交互，并且沒有此類上下文菜單。

當(dāng)鏈接的樣式看起來像一個(gè)按鈕或反之，用戶可能會(huì)感到困惑，因?yàn)樗]有表現(xiàn)且看起來很有效。如果這個(gè)“按鈕”意外地導(dǎo)致用戶離開，且在這過程中丟失了數(shù)據(jù)，他們很可能變得非常沮喪。

“乍一看，一切看起來都很好，但經(jīng)不起驗(yàn)證。 一旦這樣的網(wǎng)站在各種瀏覽器中進(jìn)行壓力測試時(shí)，其將會(huì)面臨崩潰的風(fēng)險(xiǎn)。“ —— Resilient Web Design

這最大的問題就在于當(dāng)鏈接和按鈕的樣式相同并且彼此相鄰放置時(shí)，由于沒有什么可以區(qū)分這兩者，網(wǎng)站會(huì)出乎用戶意料之外引導(dǎo)他們。

你能分辨出哪一個(gè)會(huì)讓你跳出該頁面，哪個(gè)不會(huì)？

當(dāng)一個(gè)組件的行為與預(yù)期不同時(shí)，對(duì)使用鍵盤或屏幕閱讀器的用戶來說，這很容易會(huì)導(dǎo)致出現(xiàn)問題。所能舉出的不只是一個(gè)自動(dòng)完成菜單的案例。

自動(dòng)完成是用于提示或預(yù)測用戶正在鍵入的單詞的其余部分。自動(dòng)生成菜單允許用戶在不能顯示所有選項(xiàng)時(shí)從大量選項(xiàng)中進(jìn)行選擇。

自動(dòng)生成菜單通常附加到輸入字段，并使用向上和向下箭頭鍵進(jìn)行導(dǎo)航，將焦點(diǎn)保持在輸入字段內(nèi)。當(dāng)用戶從列表中選擇一個(gè)選項(xiàng)時(shí)，該選項(xiàng)將覆蓋輸入字段中的文本。自動(dòng)生成菜單僅是包含文本的列表。

當(dāng)自動(dòng)生成菜單開始獲得更多行為時(shí)，問題也會(huì)隨之出現(xiàn)。你不僅可以從列表中選擇一個(gè)選項(xiàng)，還可以對(duì)其進(jìn)行編輯、刪除，甚至展開或折疊部分。自動(dòng)生成菜單不再僅僅是可選文本的簡單列表。

通過添加編輯、刪除和配置文件按鈕，此自動(dòng)生成菜單實(shí)際上是材料不忠誠的。

添加的行為不再意味著你可以使用向上和向下箭頭選擇?，F(xiàn)在每個(gè)選項(xiàng)都有多個(gè)操作，因此用戶需要能夠遍歷兩個(gè)維度而不是一個(gè)維度。這意味著使用鍵盤的用戶可能會(huì)對(duì)如何操作組件感到不解。

屏幕閱讀器受這種行為改變的影響最大，因?yàn)闆]有簡單的方法可以幫助他們理解它。需要進(jìn)行大量的工作以確保屏幕閱讀器可以使用非標(biāo)準(zhǔn)方式訪問菜單。

因此，它可能會(huì)導(dǎo)致他們會(huì)有較差或不適當(dāng)?shù)捏w驗(yàn)。

為了避免這些問題，最好對(duì)用戶和設(shè)計(jì)誠實(shí)，而不是組合兩個(gè)不同的行為（自動(dòng)生成菜單的編輯和刪除功能），將它們留作兩個(gè)單獨(dú)的行為。使用自動(dòng)生成菜單只是自動(dòng)填充用戶的名稱，并使用不同的組件或頁面來編輯和刪除用戶。

使用材料忠誠度，需要注意以下問題：

• 設(shè)計(jì)對(duì)于用戶是實(shí)在的？
• 是否有頁面元素看起來、表現(xiàn)起來、操作起來像其他元素？
• 是否有任何組件將不同的行為組合到一個(gè)組件中？這樣做會(huì)使組件實(shí)質(zhì)上不誠實(shí)嗎？

十、可讀性

你有沒有讀過一本書，在只讀幾段或幾頁內(nèi)容后就想著放棄，因?yàn)槲恼绿y讀了，因?yàn)槟切┖茈y讀懂的內(nèi)容會(huì)讓人在精神上感到疲憊。

句子長短、段落長短和語言的復(fù)雜性都會(huì)影響文本的可讀性。復(fù)雜的語言會(huì)給使用者帶來問題，尤其是那些有認(rèn)知障礙，或者那些語言不流利的用戶。

除了使用簡單明了的語言之外，你還應(yīng)該確保每個(gè)段落都集中于單一的思想上。只有單一想法的段落更容易讓用戶記住和消化。同樣的道理也適用于字?jǐn)?shù)較少的句子。

內(nèi)容可讀性的另一個(gè)因素就是一行文字的長度。理想的一行長度通常在45—75個(gè)字符之間。太長會(huì)導(dǎo)致用戶注意力不集中，很難正確地移動(dòng)到下一行，而太短則會(huì)導(dǎo)致用戶頻繁地跳轉(zhuǎn)導(dǎo)致眼睛疲勞。

“在跳到下一行時(shí)，人的潛意識(shí)里是會(huì)充滿活力的。在每一個(gè)新行的開頭，讀者都會(huì)關(guān)注的，但這一焦點(diǎn)隨著整行文字的閱讀逐漸消失”—— Typographie: A Manual of Design

你還應(yīng)該使用標(biāo)題、表格或圖像來分解內(nèi)容，以便為讀者提供心理上的休息時(shí)間，同時(shí)支持不同的學(xué)習(xí)方式。使用標(biāo)題能夠系統(tǒng)的對(duì)信息進(jìn)行分組和匯總。標(biāo)題、鏈接、控件和標(biāo)簽應(yīng)清晰且具有描述性，以增強(qiáng)用戶理解的能力。

使用閱讀性，請(qǐng)注意以下內(nèi)容：

• 語言是否簡單明了？
• 每個(gè)段落都集中在一個(gè)中心思想上嗎？
• 是否有任何長段落或長段不間斷的文字？
• 所有標(biāo)題、鏈接、控件和標(biāo)簽是否清晰且具有描述性？

十一、結(jié)構(gòu)維度

正如布局維度中所述，結(jié)構(gòu)布局是屏幕閱讀者和使用鍵盤的用戶所使用的。雖然頁面布局側(cè)重于視覺布局，但頁面結(jié)構(gòu)側(cè)重于結(jié)構(gòu)布局，或設(shè)計(jì)中底層的HTML和語義。

作為設(shè)計(jì)師，你可能無法編寫設(shè)計(jì)的結(jié)構(gòu)布局。但這不應(yīng)該阻止你考慮如何構(gòu)建你的設(shè)計(jì)。否則，你的設(shè)計(jì)可能會(huì)導(dǎo)致屏幕閱讀器無法訪問。

如下案例，一個(gè)錦標(biāo)賽賽事晉級(jí)的設(shè)計(jì)：

你如何知道使用屏幕閱讀者的用戶是否可以訪問此設(shè)計(jì)呢？如果不理解結(jié)構(gòu)和語義，你可能不會(huì)知道。就目前而言，該設(shè)計(jì)可能會(huì)導(dǎo)致使用屏幕閱讀者的用戶無法訪問。

要理解為什么，我們首先必須了解屏幕閱讀者是按順序閱讀頁面及其內(nèi)容。這意味著將會(huì)讀取錦標(biāo)賽第一列中的每個(gè)名稱，然后是第二列中的所有名稱，接著第三列，直至最后一個(gè)。

“George, Fred, Linus, Lucy, Jack, Jill, Fred, Ginger, George, Lucy, Jack, Ginger, George, Ginger, Ginger.”

如果你只有一個(gè)看似隨意的名字列表，你如何解釋這項(xiàng)錦標(biāo)賽的結(jié)果呢？你能說誰贏了比賽嗎？或者誰贏了第6場比賽？

如沒有其他工作可做，使用屏幕閱讀者的用戶可能會(huì)對(duì)結(jié)果感到有些困惑。為了能夠理解視覺設(shè)計(jì)，我們必須為用戶提供結(jié)構(gòu)設(shè)計(jì)方面更多信息。

這意味著作為設(shè)計(jì)師，你需要了解屏幕閱讀者如何與頁面上的HTML元素進(jìn)行交互，以便你知道如何提升其體驗(yàn)。

標(biāo)志性元素（頁眉、導(dǎo)航、主頁和頁腳）

允許屏幕閱讀者跳轉(zhuǎn)到設(shè)計(jì)中的重要部分：

• 標(biāo)題（h1（一級(jí)標(biāo)題）→h6（六級(jí)標(biāo)題））

允許屏幕閱讀者掃描頁面并獲得上一層級(jí)的大致內(nèi)容。屏幕閱讀者也可以跳轉(zhuǎn)到任何標(biāo)題。

• 列表（ul和ol）

將相關(guān)項(xiàng)目組合在一起，并允許屏幕閱讀者輕松地從一個(gè)項(xiàng)目跳轉(zhuǎn)到另一個(gè)項(xiàng)目。

• 按鈕

觸發(fā)當(dāng)前頁面上的交互。

• 鏈接

導(dǎo)航或檢索信息。

• 標(biāo)簽

告訴屏幕閱讀者每個(gè)表單輸入是什么。

了解了這一點(diǎn)后，那我們?nèi)绾螢槠聊婚喿x用戶提供更多有意義的事情呢？

首先，我們可以將錦標(biāo)賽的每一列分為幾輪，并使用標(biāo)題標(biāo)記每一輪。這樣，屏幕閱讀者就能理解新一輪的發(fā)生時(shí)間。

接下來，我們可以幫助用戶了解每場比賽的對(duì)手。我們可以再次使用標(biāo)題來標(biāo)記每場游戲，讓他們找到他們可能感興趣的任意一場游戲。

通過添加標(biāo)題，內(nèi)容如下所示：

“第1輪：第1場：George、Fred；第2場：Linus、Lucy；第3場：Jack、Jill；第4場：Fred、Ginger；第2輪：第5場：George、Lucy；第6場：Jack、Ginger；第3輪：第7場：George、Ginger；勝利者：Ginger?！?/p>

這比以前更容易理解了。

盡管如此，這些信息仍無法回答誰贏了每場比賽。要知道這一點(diǎn)，你必須知道在勝利者的下一場比賽時(shí)才能看到誰贏得了之前的比賽。例如，你要知道第四場比賽的勝利者，必須在第六場比賽中知道誰從第四場比賽中晉級(jí)。

我們可以通過告知用戶誰贏得每場比賽，來進(jìn)一步提升體驗(yàn)，這樣他們就不必去尋找它。在贏得場比賽的人后面加上“獲勝者”標(biāo)簽就足夠了。

我們還應(yīng)該使用列表進(jìn)一步將游戲和回合進(jìn)行分組。列表提供了設(shè)計(jì)的結(jié)構(gòu)語義，實(shí)質(zhì)上通過可視化設(shè)計(jì)向用戶通知連接的節(jié)點(diǎn)。如果我們將其轉(zhuǎn)換回視覺設(shè)計(jì)，結(jié)果可能如下所示：

具有描述性標(biāo)題和獲勝者信息的比賽（此處顯示為灰色背景）

由于標(biāo)題和獲勝者字段在視覺設(shè)計(jì)中顯得多余，因此你可以從視覺上隱藏它們，因此最終的視覺效果看起來就像第一個(gè)設(shè)計(jì)的那樣。

你可能會(huì)問“如果最終結(jié)果在視覺上與我們開始的地方相同，那我們?yōu)槭裁匆?jīng)歷這一切？”

原因是你應(yīng)該使用所有必要結(jié)構(gòu)設(shè)計(jì)要求來闡釋你的設(shè)計(jì)，以獲得更好的屏幕閱讀體驗(yàn)。這樣，執(zhí)行這個(gè)設(shè)計(jì)人員就知道如何添加它們。如果你剛剛將第一個(gè)設(shè)計(jì)交給實(shí)施者，那么很可能最終無法訪問。

使用結(jié)構(gòu)，請(qǐng)關(guān)注以下問題：

• 我能夠概述下我設(shè)計(jì)的HTML結(jié)構(gòu)嗎？
• 如何構(gòu)建設(shè)計(jì)以更好地幫助屏幕閱讀者理解內(nèi)容或找到他們想要的內(nèi)容？
• 如何幫助實(shí)施設(shè)計(jì)的人了解預(yù)期的結(jié)構(gòu)？

十二、時(shí)間維度

在設(shè)計(jì)中，你可能需要定期地限制用戶在任務(wù)上花費(fèi)的時(shí)間。有時(shí)可能出于安全原因，例如會(huì)話超時(shí)。其它時(shí)候可能是由于非功能性要求，例如時(shí)間限制測試。

無論是什么原因，你應(yīng)該知道某些用戶可能需要更多時(shí)間才能完成任務(wù)。有些用戶可能需要更多時(shí)間來理解內(nèi)容，有些用戶可能無法快速執(zhí)行任務(wù)，并且很多時(shí)候他們可能會(huì)被中斷。

“設(shè)計(jì)師應(yīng)該假設(shè)人們在活動(dòng)中會(huì)被打斷”—— The Design of Everyday Things

對(duì)于需要更多時(shí)間來執(zhí)行操作行為的用戶，應(yīng)該能夠在可能的情況下調(diào)整或刪除時(shí)間限制。例如，對(duì)于會(huì)話超時(shí)，你可以在會(huì)話即將到期時(shí)提醒用戶并允許他們對(duì)會(huì)話進(jìn)行擴(kuò)展。

要使用時(shí)間維度，請(qǐng)注意：是否可以提供控件來調(diào)整或消除時(shí)間限制？

總結(jié)

既然你已經(jīng)知道了可以通過查看設(shè)計(jì)的不同維度，那么你改如何使用它們？

即使設(shè)計(jì)已經(jīng)發(fā)送給你的用戶，這些維度也可以在設(shè)計(jì)過程中隨時(shí)使用。從身邊的用戶開始，一次又一次的利用可達(dá)性維度來分析設(shè)計(jì)。

問自己一些問題，看看是否應(yīng)該調(diào)整一些內(nèi)容以更好地滿足用戶的需求。當(dāng)你慢慢做出改變時(shí)，請(qǐng)把其它維度代入并重復(fù)此過程。

通過不同維度來驗(yàn)證設(shè)計(jì)，將能夠提升體驗(yàn)，以更好地滿足用戶需求。由于你能滿足用戶的需求，因此你將為所有用戶創(chuàng)造更易于訪問的設(shè)計(jì)。

翻譯：行云

校審：吊車尾

原文作者：Steven Lambert

原文鏈接：https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/

本文由 @元設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議