原文鏈接：https://mp.weixin.qq.com/s/m-PPSQe4mLYKTysxcOT81A
此刻如果閉上眼睛，請問——你還能流暢地使用手機嗎？
對屏幕前的你來說，這可能是個無厘頭的問題；但對視覺障礙者來說，這是每天要面對的現(xiàn)實——明眼人日常使用的手機圖形界面，視障者是難以直接使用的。
過去一年，小紅書體驗設(shè)計團隊在無障礙設(shè)計領(lǐng)域完成了從0到1的實踐。團隊在打造多元社區(qū)的過程中意識到，包容更廣泛的用戶，就需要關(guān)注障礙人群的需求，讓產(chǎn)品更完善。
現(xiàn)在的小紅書App，在無障礙能力上已經(jīng)邁出了堅實的第一步，讓障礙用戶能夠通過社區(qū)看見世界，和被世界看見。
-01-
在展開對無障礙設(shè)計的討論之前，我們需要對障礙群體有一個客觀認(rèn)知。《2022年無障礙白皮書》顯示：中國有 8500 萬殘疾人和 2.64 億 60 歲以上老年人，其中視障人口已經(jīng)超過 1700 萬，老齡人口與聽讀寫障礙人口總占比全部人口 20% 以上。
由此看來，視障者并不是孤零零的個例，他們廣泛地生活我們周圍，只是因為沒有充足的無障礙設(shè)施和服務(wù)，所以難以廣泛地參與到社會生活中。
手機的操作系統(tǒng)，作為當(dāng)代可能最為高頻使用的服務(wù)，也致力于提供無障礙解決方案，其中 “屏幕閱讀器”就是用來幫助視障者使用手機的輔助功能。該功能在iOS系統(tǒng)中被稱為旁白（Voice Over） ，在 Android 系統(tǒng)中被稱為 Talk Back。屏幕閱讀器支持將屏幕上的文本、圖像和按鈕等內(nèi)容轉(zhuǎn)換為語音輸出，并提供觸覺反饋。用戶通過特定手勢來控制操作，例如“雙擊屏幕”觸發(fā)”選擇一個項目“，“三指滑動”觸發(fā)”翻頁“等，屏幕閱讀器也支持多語言。除了“屏幕閱讀器”，系統(tǒng)輔助功能還有語音識別、放大鏡和輔助鍵盤等，雖然不在本文的探討范圍，但是感興趣的朋友可以嘗試使用。
你可能會認(rèn)為，只要有了“屏幕閱讀器”，視障用戶就能輕松使用手機應(yīng)用了？
但實際情況是，由于大部分App在開發(fā)過程中沒有規(guī)范地適配無障礙標(biāo)準(zhǔn)，因此其無障礙體驗存在缺陷。常見情況包括：沒有正確的標(biāo)記控件，導(dǎo)致“屏幕閱讀器”無法識別；使用不符合標(biāo)準(zhǔn)的用戶界面元素，導(dǎo)致用戶無法正確的操作......
這也正是小紅書在 2022 年底所面臨的無障礙狀況。
-02-
故事起源于2022年底，小紅書受邀參加手機廠商的“無障礙功能開發(fā)者交流活動”。在活動現(xiàn)場，我們與視障用戶進行了深入交流，并體驗了“ iOS 旁白”開啟后小紅書 App 存在的問題。
現(xiàn)場的視障用戶“寅青”告訴我們：在日常生活中，她的女性朋友經(jīng)常會分享小紅書上的穿搭與美妝筆記，但是因為小紅書沒有進行適配，每次嘗試小紅書 App 都被糟糕的體驗勸退，所以她的“愛美之心”只能干著急。
小紅書團隊第一次與視障用戶深入交流?
活動結(jié)束后，為了滿足視障用戶的需求，我們開始著手調(diào)研與改進我們的產(chǎn)品設(shè)計：
- 前期組織視障用戶訪談、專家訪談和產(chǎn)品體檢，對產(chǎn)品現(xiàn)狀和方向進行明確的界定；
- 項目實施期間制定無障礙的原則、規(guī)范和標(biāo)準(zhǔn)，進行設(shè)計、開發(fā)與測試，保證功能按時、高質(zhì)量地上線；
- 后期與廠商、媒體、公益機構(gòu)共同發(fā)起線上線下的合作宣發(fā)，來傳播無障礙的公益價值。
截至日前，小紅書已經(jīng)前后上線適配 iOS、Android 與鴻蒙操作系統(tǒng)。視障用戶可以無障礙注冊小紅書、瀏覽筆記內(nèi)容、與其他用戶交流并發(fā)布筆記。
產(chǎn)品上線后，我們與 Apple、華為、Google Android 等伙伴合作宣發(fā)，在線上渠道、線下門店與行業(yè)大會中介紹小紅書的無障礙能力。與深圳信息無障礙、上海新華書店（逆光226）等機構(gòu)合作舉辦線下活動，近距離接觸用戶。受到北京殘聯(lián)等官方組織的肯定和廣泛的媒體報道。我們也在小紅書社區(qū)內(nèi)長期運營“我身邊的無障礙”等專題活動，將無障礙介紹給更多的小紅薯們！該項目也是小紅書公司 2023 年度 Extra Mile 年度冠軍項目！
-03-
下文將聚焦體驗設(shè)計，重現(xiàn)小紅書設(shè)計師在無障礙讀屏功能中所做的工作，探討無障礙設(shè)計過程中得失。需要提前說明：以下內(nèi)容落腳團隊工作經(jīng)驗，完整指南請見附錄。
一、深度理解操作系統(tǒng)的規(guī)則
正如前文所言，iOS 和 Android 等手機操作系統(tǒng)都提供了完整的能力接口，幫助開發(fā)人員更輕松地實現(xiàn)無障礙功能，所以做無障礙讀屏設(shè)計的第一件事就是“學(xué)習(xí)”，需要了解的基礎(chǔ)概念有：
- 開啟方式：通過語音對話（以 iOS 為例，Hey Siri 開啟旁白）或特定按鍵（以 iOS 為例，點按3次鎖屏鍵）開啟；
- 操作手勢：可視界面的操作在讀屏模式下都有對應(yīng)的手勢，例如：可視界面的讀取，在讀屏模式下需要單指輕點；可視界面的單指滑動，在讀屏模式下需要多指操作。除了對應(yīng)可視化界面的操作，屏幕閱讀器還有基于手勢操作的高階功能，比如雙指轉(zhuǎn)動喚出標(biāo)準(zhǔn)菜單等。
- 焦點指在屏幕上由開發(fā)者設(shè)置的特定區(qū)域，當(dāng)用戶在這些區(qū)域內(nèi)進行手勢操作時，屏幕會朗讀該區(qū)域的內(nèi)容；
- 焦點的讀區(qū)順序按照Z字順序讀取，用戶也可以通過特定手勢快捷定位到特定區(qū)域，比如iOS中可以在底部四指點按定位到底部最后一個焦點。
- 屬性是對控件的描述，通過標(biāo)簽、屬性、狀態(tài)和提示組合，將信息完整、準(zhǔn)確地傳遞給用戶；
- 屬性對于無障礙設(shè)計極為重要，且由多種概念構(gòu)成，筆者將在下文中結(jié)合小紅書App展開講解。
4、屏幕閱讀器在不同平臺（iOS、Android）上的異同
- 屏幕閱讀器在不同平臺上有著一致的使用邏輯，但是具體的操作、焦點、標(biāo)簽均有區(qū)別，設(shè)計工程中需要根據(jù)官方指南梳理異同點。
二、基于平臺定制無障礙原則
操作系統(tǒng)為無障礙定義了最基礎(chǔ)的規(guī)則，然而每個應(yīng)用程序都有自己的特色和用戶群體，因此需要根據(jù)自身特點來設(shè)置于調(diào)整。
在小紅書的無障礙設(shè)計中，我們結(jié)合產(chǎn)品特性、用戶群體及中文語境，制定了自己的的設(shè)計原則和標(biāo)準(zhǔn)，確保產(chǎn)品能滿足小紅書用戶的需求和操作習(xí)慣。
1、小紅書無障礙屬性讀屏原則
- 拆分元素的每個屬性，通過精準(zhǔn)地描述屬性并組合，來保證標(biāo)簽的語義清晰地傳遞給用戶；
- 完整的屬性包括：label（標(biāo)簽）、value（狀態(tài)）、 trait（類型，包含部分狀態(tài)）和hint（說明）。其中l(wèi)abel和value，系統(tǒng)根據(jù)不同類型的控件會匹配相應(yīng)的讀法（或在前，或在后）；value（狀態(tài)），在iOS中是字符串類型（accessibilityValue:String），支持開發(fā)者自定義。對于自定義的控件，一般value在label之后，但也可以根據(jù)實際使用場景放置在label之前。
- 文字，標(biāo)簽直接播報文本，不增加定義與其他文本。視障者聽到的播報內(nèi)容，即明眼人者看到的內(nèi)容；
- 圖形，icon類的圖形除了需要表意準(zhǔn)確和簡短，還需要保證同一圖形的文本統(tǒng)一，比如所有的搜索icon均播報為“搜索”，從而降低用戶理解成本和記憶負擔(dān)；
- 元素之間無連接詞，例如頭像的讀屏為“用戶昵稱，頭像”，而不是“用戶昵稱的頭像”。
- 焦點起點交由系統(tǒng)自動識別，從左至右、從上至下Z字型切換焦點順序閱讀；
- 除特殊情況外不需要標(biāo)注焦點起點。若不可避免可逆向標(biāo)注序號，如-1；
- 頁面層級明確，App 底部一級導(dǎo)航不點擊則不讀。
- 元素盡可能保證彼此獨立，間距適當(dāng)；
- 為了避免熱區(qū)重疊，當(dāng)容器中的按鈕為結(jié)果頁中的快捷操作時，可考慮合并熱區(qū)。
- 同一類元素指向同一個結(jié)果時，使用完整且連續(xù)的熱區(qū)。
- 交互元素處于容器中，最大熱區(qū)不超過容器本身。如果整個容器指向同一個結(jié)果，按壓區(qū)域為容器本身；
- 元素較大時（寬高均至少≥40pt）且有清晰邊界的元素不必增加熱區(qū)（如大按鈕、大頭像）；
- 無容器的文本（文字、鏈接） 和 高寬≤ 20PT的極小元素（ 標(biāo)簽、icon、頭像)周圍添加4px的擴展熱區(qū)；若擴展熱區(qū)后熱區(qū)重疊時，均分間距；按鈕默認(rèn)無需擴寬熱區(qū)。
- 彈窗與浮層上劃定熱區(qū)，必須有退出方式，若沒有需補充。
3、小紅書無障礙設(shè)計稿交付規(guī)范
為了幫助產(chǎn)研更好地協(xié)同，我們還制定了“設(shè)計交付規(guī)范”。
通過制定小紅書 App 自己的無障礙設(shè)計原則和標(biāo)準(zhǔn)，我們能更好地滿足小紅書用戶的使用習(xí)慣，更方便地使用我們的產(chǎn)品。
同時，設(shè)計和開發(fā)的規(guī)范也能推動整個組織更高效和可持續(xù)地適配無障礙。
三、為小紅書用戶的設(shè)計升級
以上工作幫助小紅書將無障礙能力達到了行業(yè)標(biāo)準(zhǔn)。
在此基礎(chǔ)之上，基于對小紅書特色體驗設(shè)計的理解，我們利用系統(tǒng)能力，針對性地進行了設(shè)計升級，以幫助用戶更方便地瀏覽和使用。
筆記卡片信息流是小紅書最具標(biāo)志性的UI設(shè)計之一，其幫助用戶快速瀏覽與發(fā)現(xiàn)感興趣的內(nèi)容。
面對整屏豐富的信息，明眼人在瀏覽過程中可以做到以圖片和標(biāo)題為線索，有主次地一目十行。然而，對視障用戶來說，卡片中的信息是線性平鋪出來的，只有順序，并無主次；如果所有元素都依次讀出，首頁瀏覽效率是極低的。
為了讓視障用戶也能夠快捷瀏覽，我們對卡片內(nèi)的信息進行了重組。具體來說，將卡片內(nèi)的信息（筆記類型、圖片、推薦理由、標(biāo)題、作者、發(fā)布時間、互動數(shù)據(jù)）提取出來，再用一個有對話邏輯的方式重組，便于屏幕閱讀器更好地讀取和呈現(xiàn)，同時對卡片內(nèi)的圖片標(biāo)注trait，便于屏幕閱讀器能夠自動進行圖片識別。
以下面這張卡片為例，最終組合的結(jié)果是“視頻，與XX合作，夏天蜜桃女孩的小秘密日常放飛自我，臉頰出汗也不怕，來自君君大人，697贊，系統(tǒng)讀圖”
通過這種組合的方式，用戶可以通過一次操作讀完全部內(nèi)容，同時將重點信息前置的方式幫助用戶更快進行判斷，如果不感興趣可以跳過。
2、利用“轉(zhuǎn)子”來提供既簡潔又豐富的評論能力
如果說筆記卡片只是信息的聚合，那么評論，則除了信息之外還聚合了多個操作，這些操作不能僅僅通過“讀”的方式展示，也要保證每個功能子項都可以操作。那么評論如何提供既簡潔又豐富的體驗?zāi)兀?/span>
我們的解決方案是使用無障礙操作中一種高階的操作方式——轉(zhuǎn)子。轉(zhuǎn)子指在視障用戶使用設(shè)備時，通過特定的手勢（iOS在屏幕上轉(zhuǎn)動雙指，就像轉(zhuǎn)動撥號盤一樣）或語音指令，喚出一個類似于滾輪的控件，讓用戶通過手勢或者語音指令進行選擇。這個功能幫助視覺障礙用戶在需要功能菜單時，主動進行選擇操作。（在Android的TalkBack中，轉(zhuǎn)子功能被稱為“菜單”，通過三指輕觸屏幕喚出）。
在我們的設(shè)計中，當(dāng)用戶通過滑動屏幕聚焦到評論時，會首先組合讀出屏幕內(nèi)容；這時如果用戶想要操作評論，可以通過喚起“轉(zhuǎn)子”進行下一步操作，選擇前往個人主頁、點贊、回復(fù)作。這樣既不打擾用戶瀏覽，又可以保證操作完整。
在第一版本的內(nèi)測中，我們出于“好意”自作主張屏蔽了未適配的“關(guān)注”“購物”“發(fā)布”等功能，在測試中被專家用戶提醒：
屏蔽功能雖然在當(dāng)下可以幫助用戶跳過不友好的體驗，但這不僅使得視障用戶無法使用部分功能，也不利于在實際使用過程中發(fā)現(xiàn)問題反饋問題與無障礙功能的持續(xù)優(yōu)化。
相反，產(chǎn)品應(yīng)該在能夠保證可以順利退出前提下，盡可能地提供全部功能。讓視障用戶用起來，開發(fā)者才可以在這個過程中收集用戶的反饋，為后續(xù)的改造和優(yōu)化提供依據(jù)。
-04-
無障礙能力作為一項基建，無法立竿見影地獲得短期收益。為了這個專項在組織內(nèi)可持續(xù)地發(fā)展，獲取更多的支持，就更需要走進用戶，聽取真實的需求和建議。
1. 組建專家組織，包括平臺技術(shù)支持（Apple、華為和 Android 等）和行業(yè)專家。專家組織可以提供專業(yè)科學(xué)的意見和建議，甚至提供豐富的資源，幫助團隊更好地了解專業(yè)知識和解決方案。
2. 組建普通用戶反饋群，收集用戶反饋。所有加入內(nèi)測反饋群的用戶可以隨時提出問題，團隊來收集整理，完成優(yōu)化升級后給到反饋。幫助團隊更好地了解用戶需求和使用情況。一方面，用戶的真實反饋代表了需求的優(yōu)先級，可以幫助團隊聚焦到用戶更高頻使用的功能；另一方面，用戶通過群聊了解小紅書最新的無障礙功能能力，在更廣泛的社群中口碑傳播，提高可用戶滿意度和忠誠度。
3. 借助廠商觸達更廣泛的用戶。在不同系統(tǒng)上線時，我們會和系統(tǒng)廠商深度合作，通過廠商的渠道和用戶交流溝通。2023 年 5 月的“國際無障礙宣傳日”我們和 Apple 在上海門店舉辦 Apple Day，向 Apple 用戶推薦小紅書旁白適配成果；2023 年 10 月的“國際盲人日”我們和華為在全國多家門店組織了多樣化的用戶社團活動來推薦小紅書的無障礙能力；2024年1月的“Google Play Greater China Gathering”受邀參展并向全世界 Android 開發(fā)者講述了小紅書無障礙的開發(fā)者故事。
-05-
小紅書作為一個內(nèi)容社區(qū)，產(chǎn)品能力的建設(shè)只是基石。利用內(nèi)容社區(qū)的經(jīng)驗和優(yōu)勢，讓視障者看見小紅書，也讓小紅書社區(qū)的用戶看見視障者，建立積極可持續(xù)的關(guān)系才是更長期的命題。去年幾次無障礙公益領(lǐng)域的重大節(jié)點，小紅書和公益機構(gòu)組織了線上線下的活動，旨在通過社區(qū)傳播，泛化無障礙設(shè)計的公益價值。
1、我身邊的無障礙——熱心群眾都來參與其中的無障礙活動
在 2023 年國際無障礙宣傳日我們舉辦了一場名為“我身邊的無障礙”的活動，在本次活動中講述了殘障人士在小紅書的生活，包括盲人鋼琴師、盲人的日常、導(dǎo)盲犬科普等。但其視角依然處在“科普”的觀察視角，在活動過程中，用戶反饋很想支持但不知道如何參與。
所以在第二次舉辦專題活動時，我們改變了思路，弱化“科普”的觀察視角，轉(zhuǎn)而聚焦到“附近”的體驗視角。在 2023 年國際盲人日，我們從社區(qū)中挖掘了北上廣深等城市提供無障礙服務(wù)的小店，讓所有人都可以用實際行動去體驗和支持無障礙的創(chuàng)作者。不僅僅局限于公益，更聯(lián)動家居、藝術(shù)、設(shè)計等多個垂類官方賬號，挖掘這些領(lǐng)域的無障礙精品內(nèi)容，真正做到走進用戶的生活半徑，連接明眼人與視障者，讓公益輕松可參與！
從開始這個項目，小紅書就在持續(xù)運營“我身邊的無障礙”這個話題，時至今日已有超過2400萬瀏覽。很多明眼人也身體力行地參與到無障礙公益中，比如有一位上海創(chuàng)作者邀請他的殘障朋友帶他使用輪椅在城市生活一天，去測評城市的無障礙設(shè)施；比如創(chuàng)作者記錄如何為盲人講解電影的經(jīng)歷......
小紅書不止步于線上傳播，也在線下和“信息無障礙協(xié)會”聯(lián)動，作為“特別合作伙伴”，在深圳南頭古城這個創(chuàng)新社區(qū)中，聯(lián)合舉辦“第二屆無障礙生活節(jié)”。從線上到線下，走近障礙群體，邀請小紅書達人參與宣傳，建聯(lián)更多企業(yè)和組織機構(gòu)，了解市場動向，收集障礙用戶反饋，反哺項目成長。
在無障礙生活節(jié)上，我們認(rèn)識了很多用商業(yè)力量支持無障礙的伙伴，比如深圳首家無聲咖啡館“吉吉熊掌咖啡”，這家咖啡店雇傭殘障者，提供無障礙服務(wù)，通過小紅書舉辦的活動和平臺，他們向更多潛在的伙伴介紹了自己。
本次“無障礙生活節(jié)”曝光覆蓋了 3220 萬人次，線下參與 1 萬人次，50多個品牌參與了活動及聯(lián)合傳播，讓更多人因此開啟了無障礙生活之路，通過此次活動在社會組織中為小紅書樹立了良好的口碑。
在小紅書公司內(nèi)部，也和視障者一起組織公益活動。其中，黑暗工作坊是一種視障體驗活動，由視障專業(yè)人士擔(dān)任導(dǎo)游和講解員，帶領(lǐng)參與者通過模擬視障者的生活環(huán)境，進行觸摸體驗、聽聲完成任務(wù)體驗、導(dǎo)盲犬導(dǎo)航體驗等活動，讓參與者切身體會視障者的生活。
-06-
小紅書作者”寅青看世界“是一個視障者，同時也是一個愛美的花季女生，她興致勃勃地規(guī)劃去參加博覽會，卻被告知無法攜帶導(dǎo)盲犬，導(dǎo)盲犬的缺席也意味著寅青這樣的視障者很難自主地行動。她帶著遺憾的心情將這個結(jié)果發(fā)布在了小紅書上，沒想到小紅書的網(wǎng)友為她出謀劃策，在社區(qū)的力量下，主辦方主動出來溝通，更正了導(dǎo)盲犬不得入內(nèi)的不合理規(guī)定。對于這個結(jié)果，出乎寅青意料之余，她也表達了對支持她的小紅書網(wǎng)友的感謝——
“真的超感動，我是真沒想到會有這么多人關(guān)注，非常感恩大家”
這個故事就是我們無障礙工作的意義所在——讓彼此看見彼此，讓包容化解偏見！不僅是視障者被社會看見，也為那些還未了解無障礙知識的明眼人提供了一個了解無障礙和傳遞善意的機會。
無障礙設(shè)計直至今日依然是一個相對被忽視的設(shè)計領(lǐng)域，推進無障礙工作不僅需要設(shè)計師的智識和自覺，更需要團隊的共識和決心，但這不代表推動無障礙是一件困難的事，恰恰相反，了解基本的規(guī)則，在設(shè)計與開發(fā)中遵循系統(tǒng)的標(biāo)準(zhǔn)，就能夠適配到60分。
這篇文章亦想要通過回顧小紅書團隊“為何開始”和“有何收益”，設(shè)計團隊完成的“基本工作”與“升級打怪”，讓從業(yè)者有體感地了解無障礙設(shè)計工作，這也是一種“看見”。
最后，如果你有對小紅書無障礙的反饋、建議與想法，歡迎在評論區(qū)留言交流，感謝大家閱讀！
??將“UXD筆記”設(shè)為??星標(biāo)，然后在后臺回復(fù)以下關(guān)鍵詞，即可實現(xiàn)無套路領(lǐng)取本期資源。
【1】回復(fù)“無障礙”——領(lǐng)官方權(quán)威發(fā)布的Web內(nèi)容無障礙設(shè)計指南2.1（中文版）， UX/交互設(shè)計師必備設(shè)計指南。
【2】推薦一本用戶體驗與交互設(shè)計書籍，含C端、B端產(chǎn)品設(shè)計策略，讀書就贈精選的UX面試應(yīng)知應(yīng)會100題，點擊查看??《交互設(shè)計師的用戶體驗策略》
【3】加入大廠內(nèi)推群和設(shè)計交流群，不定期獲取求職面試資料，及最新內(nèi)推信息。掃描下方二維碼加小編，進大廠內(nèi)推群備注“內(nèi)推”；進設(shè)計交流群備注“交流”。
與86263位讀者一起成長
??溫馨提示：因公眾號消息推送機制改版，如果你沒有給我們加??星標(biāo)，可能無法及時收到我們的干貨推送。
為防止走失，邀請你做一個小小的動作，給 UXD筆記 公眾號加個??星標(biāo)，避免在繁雜的信息流中錯過精彩的大廠UX知識推送。
