「無(wú)障礙設(shè)計(jì)」指南

2021-9-17    資深UI設(shè)計(jì)者

產(chǎn)品在進(jìn)行設(shè)計(jì)時(shí),往往需要做好多方面的考量,針對(duì)有一定“障礙”的用戶,產(chǎn)品需要做好包容性設(shè)計(jì),幫助用戶更自如、輕松地使用和進(jìn)行交互。本篇文章里,作者就如何進(jìn)行無(wú)障礙設(shè)計(jì)做了方法策略上的總結(jié),一起來(lái)看一下。

你知道嗎?視力、聽(tīng)力和行動(dòng)能力完全健康的人,可以輕松地讀寫,可以有效執(zhí)行多任務(wù),并且始終可以正常工作的人約占總?cè)丝诘?0%?其余的人都是戴著眼鏡或有色盲,手腕或耳朵受傷,生活在嘈雜的環(huán)境中或網(wǎng)絡(luò)信號(hào)質(zhì)量差,忙碌或忙碌中,閱讀障礙或有注意力障礙等。

這意味著大約一半的用戶可能很難使用我們的產(chǎn)品或?yàn)g覽我們的網(wǎng)站。因此,我們可能錯(cuò)過(guò)了提高用戶滿意度并擴(kuò)大受眾范圍的機(jī)會(huì)。

不過(guò)在設(shè)計(jì)階段實(shí)施一些簡(jiǎn)單的原則就可以改善交互和整體用戶體驗(yàn),極限設(shè)計(jì)可以為所有人帶來(lái)價(jià)值,我們稱之為“包容性設(shè)計(jì)”。

一、什么是包容性設(shè)計(jì)?

包容性設(shè)計(jì)考慮了盡可能多的人的需求和能力,而不僅僅是針對(duì)殘疾人。它認(rèn)識(shí)到我們的需求會(huì)隨著時(shí)間和環(huán)境的變化而變化,因此它會(huì)預(yù)測(cè)錯(cuò)誤,掙扎和不同的交互方式。它的目的是在問(wèn)題發(fā)生之前解決問(wèn)題,提高標(biāo)準(zhǔn)并改變良好產(chǎn)品設(shè)計(jì)的標(biāo)準(zhǔn)。

包容的用戶界面是善解人意,有意識(shí)且可訪問(wèn)的。年齡、性別、教育程度,財(cái)富和能力等不同特征,在不同環(huán)境中生活或工作,獲得技術(shù)水平不同的不同人群可以舒適地使用它。我們將使用POUR作為在用戶與界面之間創(chuàng)建簡(jiǎn)單、輕松、快速交互的參考。

超全面!「無(wú)障礙設(shè)計(jì)」指南

POUR代表

  • 可以理解:數(shù)字內(nèi)容可以輕松地以不同方式進(jìn)行解釋或處理嗎?
  • 可操作:數(shù)字產(chǎn)品能否輕松自如地進(jìn)行功能和控制?
  • 可以理解:用戶可以理解界面的功能和內(nèi)部信息嗎?
  • 健壯性:數(shù)字產(chǎn)品是否與不同的輔助技術(shù)和設(shè)備兼容?

二、設(shè)計(jì)師如何提供幫助

作為設(shè)計(jì)師,我們當(dāng)然不能控制以上所有要求都能做到。但是我們應(yīng)該承認(rèn),人們遇到的許多可訪問(wèn)性問(wèn)題是由設(shè)計(jì)階段未做過(guò)的決定引起的。

因此,設(shè)計(jì)師有很多機(jī)會(huì)可以有所作為。僅通過(guò)做出更明智的設(shè)計(jì)決策,我們就可以影響(改進(jìn)或協(xié)助)四種經(jīng)驗(yàn)。

  1. 視覺(jué)體驗(yàn):這包括形狀、顏色、對(duì)比、文本樣式-產(chǎn)品界面的所有圖形元素。
  2. 聽(tīng)覺(jué)體驗(yàn):這是指與產(chǎn)品互動(dòng)時(shí)產(chǎn)生的聲音、音量和清晰度。
  3. 認(rèn)知經(jīng)驗(yàn):這描述了用戶花費(fèi)在解釋界面上的時(shí)間,以及使用界面需要多少注意力和精力。
  4. 運(yùn)動(dòng)體驗(yàn):這包括執(zhí)行任務(wù)或與產(chǎn)品交互所需的所有動(dòng)作和動(dòng)作。

通常,可訪問(wèn)性被認(rèn)為是對(duì)創(chuàng)造力的挑戰(zhàn);但是,如果我們認(rèn)為這是一個(gè)創(chuàng)造性的挑戰(zhàn),那么我們會(huì)開(kāi)辟全新的可能性領(lǐng)域。真正好的可訪問(wèn)性的訣竅不是在功能或功能上進(jìn)行折衷,也不是在美學(xué)上取舍,而是使功能和創(chuàng)意體驗(yàn)也可以訪問(wèn)。

1. 改善視覺(jué)體驗(yàn)

超全面!「無(wú)障礙設(shè)計(jì)」指南

1)顏色

① 對(duì)比度

對(duì)比度是亮度或顏色的差異,使物體從周圍環(huán)境中脫穎而出,并可能對(duì)清晰度產(chǎn)生顯著影響。高對(duì)比度使視覺(jué)元素從背景中脫穎而出,更加引人注目。

超全面!「無(wú)障礙設(shè)計(jì)」指南

專家提示:純粹的#000000黑白色會(huì)給眼睛帶來(lái)強(qiáng)烈的對(duì)比度,甚至?xí)绊戦喿x障礙者。這就是為什么我們傾向于避免使用它,而是選擇深灰色的原因。

② 亮度

亮度描述從光源發(fā)出的照明水平或從表面反射的光量。明亮的顏色反射更多的光線,并會(huì)干擾我們閱讀和處理信息的能力。

超全面!「無(wú)障礙設(shè)計(jì)」指南

避免在背景或較大表面上使用鮮艷的顏色。請(qǐng)勿在文本上或文本附近使用鮮艷的顏色,以免干擾文本。

如果品牌要求特定的高亮度顏色,請(qǐng)嘗試建議使用飽和或較深的顏色。如果你絕對(duì)必須使用明亮的顏色,則應(yīng)將其用于突出顯示動(dòng)作的方法最小化,并將其與較深的色相搭配以達(dá)到平衡和高對(duì)比度。

專家提示:任何含有超過(guò)50%黃色的顏色都會(huì)自然反射更多的光。這意味著黃色,橙色,綠色和藍(lán)綠色是高風(fēng)險(xiǎn)顏色,應(yīng)謹(jǐn)慎使用。

③ 色盲

色盲是無(wú)法區(qū)分特定顏色(通常是紅色和綠色,偶爾是藍(lán)色)的一種,它比你想象的要常見(jiàn)。

超全面!「無(wú)障礙設(shè)計(jì)」指南

專家提示:不要僅僅依靠顏色;顏色不應(yīng)該是傳達(dá)重要信息的唯一方法。您可以執(zhí)行以下操作:

  • 使用下劃線表示鏈接和斜體,或使用粗體突出顯示文本;
  • 將圖標(biāo)與文本一起使用可傳達(dá)成功或失敗的信息;
  • 使用紋理或圖案作為圖表;
  • 為按鈕或明顯的通知使用清晰的視覺(jué)樣式,針對(duì)焦點(diǎn)或活動(dòng)狀態(tài)使用不同的字體樣式。

2)版式

① 字體選擇

通信是每個(gè)數(shù)字產(chǎn)品的首要目標(biāo),可以借助印刷術(shù)及其正確應(yīng)用來(lái)實(shí)現(xiàn)。內(nèi)容應(yīng)清晰易讀,這意味著易于識(shí)別和解釋,輕松閱讀和處理。

超全面!「無(wú)障礙設(shè)計(jì)」指南

簡(jiǎn)潔明了對(duì)于快速閱讀和解釋至關(guān)重要,請(qǐng)避免使用復(fù)雜的字體,因?yàn)樗鼈冎粫?huì)增加視覺(jué)干擾。選擇正確的字體家族,針對(duì)那些具有清晰定義和獨(dú)特形狀的字符,因?yàn)橐暳φ系K或閱讀障礙的人可能會(huì)因某些字符或其組合而感到困惑。

② 字體樣式

字體樣式還會(huì)影響弱視或閱讀障礙者的閱讀性能。我們應(yīng)該注意并謹(jǐn)慎使用字體樣式(如斜體,下劃線和大寫)的頻率和位置。

超全面!「無(wú)障礙設(shè)計(jì)」指南

根據(jù)“英國(guó)閱讀障礙協(xié)會(huì)”的規(guī)定,應(yīng)避免使用斜體,特別是對(duì)于較大的副本塊或較小的字體。這是因?yàn)樗鼈兪棺帜竷A斜,顯得更加尖銳,因此更難以閱讀。

正文也應(yīng)避免使用帶下劃線的字體樣式。給長(zhǎng)的段落加下劃線會(huì)增加視覺(jué)噪音,從而降低閱讀性能,而給短的句子或單詞加下劃線會(huì)與活動(dòng)鏈接相關(guān)聯(lián),并可能引起混亂。粗體是添加對(duì)比度和強(qiáng)調(diào)的更好選擇。

盡管沒(méi)有確鑿的研究,但有一些證據(jù)支持也應(yīng)避免主要針對(duì)正文使用大寫字母。似乎所有大寫字母的統(tǒng)一外觀會(huì)降低單詞形狀的對(duì)比度,從而使掃描變得不那么容易。此外,大寫看起來(lái)有點(diǎn)緊張,可能感覺(jué)好像有人在向您大喊大叫。

專家提示:平衡是關(guān)鍵。謹(jǐn)慎使用每個(gè)樣式并賦予其含義甚至可以提高可讀性。

③ 字體大小

您知道絕大多數(shù)人戴眼鏡或隱形眼鏡嗎?實(shí)際上,十分之六以上!此外,約有62%的人通過(guò)手機(jī)訪問(wèn)互聯(lián)網(wǎng),這還不包括應(yīng)用程序的使用情況。當(dāng)視力不佳的人在旅途中在小屏幕上使用技術(shù)時(shí),可能會(huì)出什么問(wèn)題?

超全面!「無(wú)障礙設(shè)計(jì)」指南

使用較大的字體。通常,16px被認(rèn)為是最具有包容性的,但是請(qǐng)注意,字體可以以不同的比例站立,并且字體的大小可以相差很大。切勿低于14px,事實(shí)上,大多數(shù)現(xiàn)代網(wǎng)站的正文都使用18px字體,而標(biāo)簽,標(biāo)題或工具提示僅使用14px或16px。

專家提示:此外,避免使用薄而輕的字體,因?yàn)閷?duì)于較小的字體或在明亮的光線下可能難以閱讀。

④ 段落格式

幫助人們輕松瀏覽內(nèi)容應(yīng)該是我們的首要目標(biāo),因?yàn)橹挥?0%的人可以閱讀內(nèi)容,其中55%的人可以快速瀏覽內(nèi)容。我們的工作是通過(guò)使用舒適的段落格式來(lái)盡可能地支持人們。

超全面!「無(wú)障礙設(shè)計(jì)」指南

研究表明,用于支持可讀性的平均在線行長(zhǎng)(包括空格)約為70個(gè)字符。標(biāo)題,字幕和項(xiàng)目符號(hào)點(diǎn)將有助于掃描,而左段對(duì)齊將使文本更易于閱讀。

較長(zhǎng)的文字墻使人們參與的機(jī)會(huì)大大減少。成功的段落長(zhǎng)度不超過(guò)5到6個(gè)句子。

空格將幫助患有認(rèn)知和注意力障礙的人,保持閱讀重點(diǎn)。對(duì)于其余的內(nèi)容,它只會(huì)使閱讀更加愉快和流暢。根據(jù)WCAG,最佳做法是將行高(行之間的間距)設(shè)置為相對(duì)于該類型大小的1.5相對(duì)值。段落之間的間距也至少應(yīng)比行間距大1.5倍,因此必須明確定義。

提示:行距不應(yīng)超過(guò)2.0,因?yàn)樗赡墚a(chǎn)生相反的效果并分散讀者注意力。

⑤ 復(fù)制版面

作為設(shè)計(jì)師,我們經(jīng)常陷入過(guò)度設(shè)計(jì)布局的陷阱,以使它們看起來(lái)引人注目或獨(dú)特,從而將可用性放在一邊。這就是為什么我們看到諸如文本的一部分之類的趨勢(shì)在彩色或帶紋理的背景上重疊圖像或文本的趨勢(shì)。只要我們知道如何以及何時(shí)使用它們,我們?nèi)匀豢梢韵硎芷渲械囊恍┶厔?shì)。

超全面!「無(wú)障礙設(shè)計(jì)」指南

當(dāng)在彩色或帶紋理的背景上使用文本時(shí),我們需要確保它們之間的色彩對(duì)比度足夠高,同時(shí)在整個(gè)重疊區(qū)域都保持一致-意味著在副本下沒(méi)有較淺和較暗的區(qū)域,也沒(méi)有過(guò)多的細(xì)節(jié)干擾。較大的字體大小和較重的字體粗細(xì)也會(huì)提高對(duì)比度。

專家提示:一如既往地“了解您的用戶”。時(shí)髦的布局并不適合所有人。

2. 改善聽(tīng)覺(jué)體驗(yàn)

您可能在想,視覺(jué)設(shè)計(jì)如何影響聽(tīng)覺(jué)體驗(yàn)?因此,想象一下您正在與一個(gè)俱樂(lè)部的朋友交談。我敢打賭,您只能聽(tīng)見(jiàn)她說(shuō)的話的一半,但是您可以通過(guò)看著她的嘴唇移動(dòng),肢體語(yǔ)言和面部表情來(lái)保持對(duì)話的進(jìn)行。

由于視覺(jué)效果的支持增強(qiáng)了模棱兩可的聲音,因此您最終可以理解它們。在用戶界面中,聲音對(duì)于不同的人可能意味著各種各樣的事情。它們也很容易在嘈雜的背景中丟失,因此最好以視覺(jué)提示來(lái)支持它們。

超全面!「無(wú)障礙設(shè)計(jì)」指南

我們的目標(biāo)應(yīng)該是提供聽(tīng)覺(jué)和視覺(jué)提示的反饋,支持錯(cuò)誤,通知以及與相關(guān)和鄰近圖形元素的重大交互。我們還必須確保視覺(jué)線索保持足夠長(zhǎng)的活動(dòng)時(shí)間,以使人們能夠看到和閱讀,同時(shí)又不隱藏任何重要的內(nèi)容。

一個(gè)好的做法-不限于支持聲音輔助技術(shù),是在UI元素中添加描述性標(biāo)簽,并在圖像中添加標(biāo)題,以便于在屏幕閱讀器中輕松導(dǎo)航。為視頻使用字幕是改善聽(tīng)力體驗(yàn)的另一種方法,對(duì)非母語(yǔ)人士也有幫助。

最后,我們不應(yīng)該忽略聲音是問(wèn)題的情況,這就是為什么我們需要視覺(jué)替代的原因。有些人可能對(duì)特定的聲音敏感,或者處于聲音可能引起干擾的情況下。然后,這是一個(gè)好習(xí)慣,讓人們可以選擇關(guān)閉聲音而不必調(diào)低揚(yáng)聲器音量,從而使此功能清晰可見(jiàn)。

專家提示:避免使用不必要的自動(dòng)播放聲音和音樂(lè),因?yàn)樗鼈儠?huì)打擾甚至驚嚇別人。

3. 改善認(rèn)知體驗(yàn)

超全面!「無(wú)障礙設(shè)計(jì)」指南

1)知覺(jué)

① 視覺(jué)清晰度

清晰度是用戶界面中的第一個(gè)也是最重要的屬性。成功的用戶界面使用戶能夠識(shí)別和解釋他們所看到的內(nèi)容,了解產(chǎn)品的價(jià)值和所要采取的行動(dòng),預(yù)測(cè)使用產(chǎn)品時(shí)會(huì)發(fā)生什么以及與產(chǎn)品成功交互。

超全面!「無(wú)障礙設(shè)計(jì)」指南

形式跟隨功能是一項(xiàng)原則,指出對(duì)象應(yīng)反映其預(yù)期的功能或目的。為了在用戶界面中實(shí)現(xiàn)此目的,我們使用了附加功能,附加到UI的視覺(jué)提示/屬性,以顯示用戶與其交互的可能方式。

支付能力取決于用戶的身體能力、目標(biāo)、過(guò)去的經(jīng)驗(yàn),當(dāng)然還取決于他們認(rèn)為可能的情況。按鈕應(yīng)該看起來(lái)像按鈕,就像鏈接、菜單標(biāo)簽、表單等一樣。使用清晰的符號(hào)/功能可以幫助用戶識(shí)別或解釋界面,并輕松進(jìn)行交互。

在用戶界面中使用熟悉的和已建立的設(shè)計(jì)解決方案將幫助用戶預(yù)測(cè)結(jié)果并自信地采取行動(dòng)。因此,使用設(shè)計(jì)模式來(lái)解決常見(jiàn)問(wèn)題是一個(gè)好習(xí)慣,該設(shè)計(jì)模式是經(jīng)過(guò)測(cè)試、優(yōu)化和可重用的解決方案。

設(shè)計(jì)模式建立在過(guò)去的經(jīng)驗(yàn)和可能性的基礎(chǔ)上,并附加到特定的目標(biāo)上。為避免眼前的問(wèn)題,選擇正確的設(shè)計(jì)模式應(yīng)該是我們避免混淆或壓力大的交互的第一要?jiǎng)?wù)。

建立一致的視覺(jué)語(yǔ)言是獲得更全面界面的關(guān)鍵。具有相同功能和/或重要性的重復(fù)交互式UI組件應(yīng)始終以相同的方式外觀和操作。因此,導(dǎo)航、按鈕、鏈接、標(biāo)簽、錯(cuò)誤等元素應(yīng)在整個(gè)產(chǎn)品中具有一致的樣式,顏色和動(dòng)畫。

值得注意的是,一致的視覺(jué)語(yǔ)言不僅可以通過(guò)附加含義和減少視覺(jué)噪音來(lái)幫助互動(dòng),而且還可以增強(qiáng)產(chǎn)品的個(gè)性,提升品牌知名度,建立情感聯(lián)系和信任。

② 層次結(jié)構(gòu)

視覺(jué)層次結(jié)構(gòu)是指圖形元素的視覺(jué)重量及其排列方式,使用戶可以輕松地探索和發(fā)現(xiàn)內(nèi)容。通過(guò)為頁(yè)面元素分配不同的視覺(jué)權(quán)重,我們可以對(duì)內(nèi)容進(jìn)行分組并影響人們感知信息和瀏覽產(chǎn)品的順序。

超全面!「無(wú)障礙設(shè)計(jì)」指南

顏色是第一大關(guān)注焦點(diǎn)。彩色元素將脫穎而出,因此在層次結(jié)構(gòu)中位于較高位置。明亮的顏色會(huì)更加突出,因此,考慮到這一點(diǎn),我們應(yīng)該仔細(xì)安排和分配顏色,以將眼睛引導(dǎo)至正確的位置。

視覺(jué)元素的大?。ɡ缬∷ⅰ粹o、圖標(biāo)和圖像)在確定重要性方面幾乎與顏色一樣強(qiáng)大。較大的圖形吸引了用戶的注意,并且顯得很重要。對(duì)于排版,明顯不同的尺寸縮放比例可以幫助建立內(nèi)容層次結(jié)構(gòu),并使內(nèi)容掃描變得輕松而輕松。

輔助視覺(jué)層次結(jié)構(gòu)的另一種方法是通過(guò)設(shè)計(jì)一致性和例外。一致對(duì)齊,外觀相似,重復(fù)或相鄰的元素給人的印象是它們是相關(guān)且同等重要的,而偏離元素以及不尋常的形狀和有趣的紋理或樣式將更加顯著。太多的設(shè)計(jì)例外會(huì)引起人們的關(guān)注,并會(huì)增加復(fù)雜性,因此,謹(jǐn)慎使用它們是一個(gè)好習(xí)慣。

專家提示:研究格式塔原理及其在UI設(shè)計(jì)中的應(yīng)用將有助于我們理解視覺(jué)感知和分組以改善視覺(jué)層次。

③ 色彩應(yīng)用

顏色不應(yīng)該是傳達(dá)信息或增加意義的唯一方法,但它仍然有用且很有影響力,因此不應(yīng)將其視為裝飾性元素。顏色具有含義,盡管沒(méi)有硬性規(guī)定,但是太多的顏色會(huì)導(dǎo)致信息疲勞,并且不一致地使用顏色會(huì)導(dǎo)致混亂。

超全面!「無(wú)障礙設(shè)計(jì)」指南

避免使用太多顏色。通常,三種顏色足以描述頁(yè)面的所有重要視覺(jué)元素。60–30–10規(guī)則可以幫助我們建立完美的和諧。其中60%的彩色項(xiàng)目由原色組成,以創(chuàng)建統(tǒng)一的產(chǎn)品主題,具有30%的輔助顏色增強(qiáng)含義和/或創(chuàng)建引人注目的效果,以及10%的強(qiáng)調(diào)色,以補(bǔ)充和輔助主顏色和輔助顏色。

此外,我們需要確保為消息使用正確的色調(diào)。除了美學(xué),顏色還可以創(chuàng)造情感和無(wú)意識(shí)的聯(lián)系。特定陰影的含義會(huì)因我們所處的文化和環(huán)境而異,并且顏色通常具有不同的含義-在西方世界,錯(cuò)誤是紅色,成功是綠色,信息是藍(lán)色等。

專家提示:可以將我們自己的含義分配給顏色,只要它們不與既定規(guī)范重疊,并且我們?cè)谡麄€(gè)產(chǎn)品中使它們保持一致。

④ 符號(hào)學(xué)

符號(hào)學(xué)是對(duì)符號(hào)/圖標(biāo)及其含義的研究。它著重于人們?nèi)绾涡纬珊徒忉屵@些含義,這取決于人們所看到的上下文。在用戶界面中,圖標(biāo)是可視語(yǔ)言的一部分,用于表示功能、功能或內(nèi)容。符號(hào)學(xué)可以幫助我們?cè)O(shè)計(jì)立即被識(shí)別和理解的圖像。

超全面!「無(wú)障礙設(shè)計(jì)」指南

盡管這些年來(lái),我們已經(jīng)開(kāi)發(fā)出具有大多數(shù)人接受和理解的含義的圖標(biāo)。用戶還習(xí)慣于使用特定于平臺(tái)的圖標(biāo),并且可以輕松地進(jìn)行解釋。在可能的情況下,最好遵循這些既定的解決方案,以獲得熟悉和流暢的體驗(yàn)。

當(dāng)然,在某些情況下,我們需要設(shè)計(jì)具有特定功能的自定義產(chǎn)品特定圖標(biāo)。這些圖標(biāo)必須盡可能簡(jiǎn)單明了,以確保清晰度。它們還應(yīng)該具有一致的視覺(jué)樣式,以傳達(dá)其功能或與其他非功能性元素區(qū)分開(kāi)。

最后,我們不應(yīng)該僅僅依靠視覺(jué)隱喻來(lái)傳達(dá)含義,因?yàn)槟承╆P(guān)聯(lián)可能并不那么明顯。如果圖標(biāo)需要標(biāo)題來(lái)描述其含義,則可能不合適。如果不確定,請(qǐng)與實(shí)際用戶一起測(cè)試我們的設(shè)計(jì)會(huì)有所幫助。

專家提示:圖標(biāo)不僅易于解釋,而且還可以具有多種含義。因此,將標(biāo)記與功能圖標(biāo)結(jié)合使用是一種很好的做法。

2)互動(dòng)

記憶

許多心理學(xué)實(shí)驗(yàn)表明,健康個(gè)體的處理能力非常有限。在我們的短期記憶中,我們大多數(shù)人平均可以保留7項(xiàng),具體取決于個(gè)人。我們的大腦并未針對(duì)數(shù)字產(chǎn)品所需的抽象思維和數(shù)據(jù)記憶進(jìn)行優(yōu)化,因此良好的設(shè)計(jì)會(huì)有所作為。減少頁(yè)面上可用選項(xiàng)和信息的數(shù)量,以及使用清晰的標(biāo)題,面包屑和“后退”選項(xiàng)來(lái)訪問(wèn)以前的內(nèi)容,將幫助用戶記住或提醒自己他們?cè)谀睦?,打算做什么或要做什么?

交互元素上或附近的清晰可見(jiàn)副本將幫助用戶在整個(gè)交互過(guò)程中保持知情和自信。例如,表單標(biāo)簽應(yīng)始終可見(jiàn),動(dòng)作不應(yīng)隱藏在懸停后面,按鈕應(yīng)提供目標(biāo)位置的上下文,并且各節(jié)的標(biāo)題應(yīng)明確。

專家提示:通過(guò)稱為“塊”的過(guò)程可以增加我們的短期記憶和處理能力。這是我們?cè)谝曈X(jué)上將項(xiàng)目分組以形成更容易記住的較大項(xiàng)目的地方。

超全面!「無(wú)障礙設(shè)計(jì)」指南

3. 改善運(yùn)動(dòng)體驗(yàn)

1)菲茨法

菲茨法則為人類的運(yùn)動(dòng)和互動(dòng)提供了一個(gè)模型。它指出,將指針(光標(biāo)或手指)快速移動(dòng)到目標(biāo)區(qū)域所需的時(shí)間是其距目標(biāo)的距離除以目標(biāo)大小的函數(shù)。意味著較小的目標(biāo)會(huì)增加互動(dòng)時(shí)間。

超全面!「無(wú)障礙設(shè)計(jì)」指南

根據(jù)Fitts法則,我們旨在減小用戶與目標(biāo)之間的距離,同時(shí)增加其尺寸。該法律主要適用于導(dǎo)航和按鈕。菜單和子菜單元素應(yīng)在附近,而按鈕,鏈接和分頁(yè)應(yīng)在較大區(qū)域上單擊,以實(shí)現(xiàn)更快更準(zhǔn)確的交互。

專家提示:根據(jù)可用性最佳實(shí)踐,按鈕/鏈接的最小尺寸為42×42像素(重?fù)舫叽纾?

2)獎(jiǎng)勵(lì):提高績(jī)效

到目前為止,我們已經(jīng)建立了包容性設(shè)計(jì),旨在讓盡可能多的人訪問(wèn)并實(shí)現(xiàn)他們的目標(biāo)或解決他們的問(wèn)題,盡管他們有自己的情況。

我們可能很幸運(yùn),可以使用最先進(jìn)的設(shè)備或超高速互聯(lián)網(wǎng),但是當(dāng)我們的信號(hào)不太好時(shí),我們會(huì)感到掙扎。對(duì)于大多數(shù)人來(lái)說(shuō),老式設(shè)備和糟糕的互聯(lián)網(wǎng)已成為常態(tài),因此,為獲得最佳性能而設(shè)計(jì)是一件大事。

超全面!「無(wú)障礙設(shè)計(jì)」指南

極簡(jiǎn)主義是關(guān)鍵。如果我們打算創(chuàng)造一種可以被盡可能多的人使用的產(chǎn)品,那么我們就應(yīng)該擺脫不必要的一切。圖形,圖像或動(dòng)畫是有價(jià)值的,還是增加了視覺(jué)噪音和加載時(shí)間?如果是的話,那就必須走了。

圖像優(yōu)化是幫助提高數(shù)字產(chǎn)品性能的另一個(gè)標(biāo)準(zhǔn)。通過(guò)將圖像調(diào)整為合適的大小,然后通過(guò)諸如ImageOptim和TinyPNG之類的工具運(yùn)行它們,可以節(jié)省寶貴的千字節(jié)和實(shí)際的加載時(shí)間。

開(kāi)發(fā)人員通常使用的一種提高性能的技術(shù)是“延遲加載”模式,其中圖像的加載是異步的,并延遲到需要時(shí)才加載。

例如,如果您快速滾動(dòng)到頁(yè)面底部,則在網(wǎng)站完全加載之前,您可能會(huì)看到類似網(wǎng)站線框的內(nèi)容?!皾u進(jìn)圖像加載”的一種替代方法是“漸進(jìn)圖像加載”,其中我們顯示一個(gè)空的占位符框<div>,然后用小的低質(zhì)量模糊圖像填充它,最后用所需的高質(zhì)量圖像替換它。

超全面!「無(wú)障礙設(shè)計(jì)」指南

在每個(gè)數(shù)字產(chǎn)品中都遵循上述最佳實(shí)踐,這是高可訪問(wèn)性標(biāo)準(zhǔn)的良好起點(diǎn)。但是總會(huì)有改進(jìn)的余地,并且更好地了解我們的用戶可以揭示提高無(wú)障礙標(biāo)準(zhǔn)的新方法。

因此,有必要花費(fèi)一些時(shí)間和金錢來(lái)更多地了解我們的不同類型的用戶,因?yàn)樗麄兛梢越虝?huì)我們很多有關(guān)使包容性體驗(yàn)成為現(xiàn)實(shí)的知識(shí)。了解我們的用戶將幫助我們練習(xí)同理心。

“賦權(quán)”不是偶然的設(shè)計(jì)思維過(guò)程的第一步。在移情階段,我們的目標(biāo)是加深對(duì)我們正在設(shè)計(jì)的人員及其獨(dú)特視角的了解,因此我們可以在進(jìn)行任何設(shè)計(jì)決策時(shí)與他們認(rèn)同并代表他們。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼ben_lanlan,報(bào)下信息,會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

文章來(lái)源:人人都是產(chǎn)品經(jīng)理   作者:Ella

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔