2021-6-17 ui設(shè)計(jì)分享達(dá)人
前不久看了阿里巴巴的設(shè)計(jì)周，其中有一個(gè)話題引起我注意“適老化”設(shè)計(jì)，今天就來(lái)聊一聊適老化設(shè)計(jì)的注意點(diǎn)。*文章末尾我會(huì)把阿里巴巴的演講ppt分享出來(lái)，如果這篇文章能幫助到你，還請(qǐng)點(diǎn)贊、分享。
據(jù)《世界人口展望：2019年修訂版》的數(shù)據(jù)顯示，到2050年，全世界每6人中，就有1人年齡在65歲（16%）以上，而這一數(shù)字在2019年僅為11人（9%）。
再來(lái)看看我國(guó)情況：因中國(guó)的人口基數(shù)龐大，中國(guó)目前老齡化進(jìn)程是世界第一。我國(guó)的網(wǎng)民除了地域呈現(xiàn)從一線城市向四、五線城市的遷移之外，也呈現(xiàn)出偏向老齡化的特征。
前不久國(guó)務(wù)院發(fā)布國(guó)家開(kāi)放了“三孩政策”也看出來(lái)國(guó)家針對(duì)人口老齡化表現(xiàn)所作出的國(guó)家方針的決策?；貧w我們所在的互聯(lián)網(wǎng)行業(yè)，也許慢慢的互聯(lián)網(wǎng)的原住民不再是z時(shí)代的年輕群體，他會(huì)慢慢的向中年、老年人所遷移。
今年1月份國(guó)家也開(kāi)始重視了關(guān)于老年人互聯(lián)網(wǎng)生活感受，先后頒布了《關(guān)于切實(shí)解決老年人運(yùn)用智能技術(shù)困難的實(shí)施方案》。通知在全國(guó)范圍內(nèi)組織了為期一年的互聯(lián)網(wǎng)應(yīng)用適老化及無(wú)障礙改造專項(xiàng)行動(dòng)， 專項(xiàng)行動(dòng)方案針對(duì)老年人、視障聽(tīng)障人士、肢體障礙人士使用app需求，進(jìn)行改造要求，并且列出43個(gè)手機(jī)APP的適老化改造產(chǎn)品清單。
我體驗(yàn)了百度、支付寶、喜馬拉雅、滴滴打車這四款app針對(duì)適老化項(xiàng)目的改版。
老年版還有一個(gè)特殊的名稱，就是精簡(jiǎn)版。從產(chǎn)品的功能上進(jìn)行了大量的精簡(jiǎn)，比如支付寶在老年版的模式中只提供了使用頻次比較高的功能健康碼、結(jié)賬付款、充話費(fèi)等功能，做到了功能上的精簡(jiǎn)。
我相信在未來(lái)的幾年，我們的產(chǎn)品會(huì)有適老化的改版需求。聽(tīng)完我說(shuō)這么多大家心中都會(huì)有一個(gè)疑問(wèn)：哪些群體屬于老年群體？生活中老年人用戶數(shù)量比較少不了解他們的需求？針對(duì)適老化項(xiàng)目我們應(yīng)該怎么改?
各國(guó)對(duì)老年人口的年齡界限的規(guī)定各不相同，有的國(guó)家規(guī)定為65歲以上，有的規(guī)定為60歲以上。 我國(guó)《老年人權(quán)益保障法》第2條規(guī)定老年人的年齡起點(diǎn)標(biāo)準(zhǔn)是60周歲，即凡年滿60周歲的中華人民共和國(guó)公民都屬于老年人。
身邊的人肯定會(huì)有上了年紀(jì)的人，回答這個(gè)問(wèn)題前，咱們先說(shuō)老年人和我們有什么不同， 其實(shí)當(dāng)人類的生理年齡超過(guò)20歲，人類的老化過(guò)程就可以開(kāi)始，老年用戶最大的特點(diǎn)就是其五力—視力、聽(tīng)力、表達(dá)力、行動(dòng)力和認(rèn)知力的弱化，導(dǎo)致產(chǎn)品的可讀性和體驗(yàn)型低，造成用戶對(duì)我們的產(chǎn)品失望更有甚者認(rèn)為我們的產(chǎn)品是一個(gè)糟糕的產(chǎn)品。
如果把這些需求進(jìn)行整理，就會(huì)發(fā)現(xiàn)多數(shù)情況是用戶的聽(tīng)力、視力和手部敏捷度下降造成用戶的可讀性下降，從而導(dǎo)致用戶產(chǎn)生了不理解、犯錯(cuò)的操作。歸根到底我們可以把用戶的需求分為兩種類型“服務(wù)需求”和“生理需求”。
人的眼球就像是一部精密的照相機(jī)，眼之所以能看見(jiàn)物體，是因?yàn)檎赵谖矬w上的反射光線，經(jīng)過(guò)眼球的角膜、晶狀體及玻璃體等屈光間質(zhì)折射后，成像在視網(wǎng)膜上。
隨著年齡增長(zhǎng)人的晶狀體會(huì)出現(xiàn)硬化、睫狀肌衰弱的情況出現(xiàn)，造成物體不能很好地成像在視網(wǎng)膜上，具調(diào)查反饋在 40 歲時(shí)，只有一半的光線像 20 歲時(shí)一樣進(jìn)入視網(wǎng)膜。對(duì)于 60 歲的人來(lái)說(shuō)，只有 20%。正是因?yàn)橐陨系脑?，?dǎo)致老年人的視覺(jué)分辨物體的敏感度、明暗感覺(jué)、空間感覺(jué)、色彩感覺(jué)的能力下降，有看不清楚的情況出現(xiàn)。
設(shè)計(jì)師是團(tuán)隊(duì)中唯一站在用戶的角度考慮問(wèn)題的人員，我們不應(yīng)該只把適老化設(shè)計(jì)變成只是“大字版”的解決方案——加大字號(hào)、加大音量、加大屏幕尺寸這么簡(jiǎn)單。
凸顯我們?cè)O(shè)計(jì)的專業(yè)程度應(yīng)當(dāng)站在用戶同理心的角度，針對(duì)的為自己用戶的群體設(shè)計(jì)一份專業(yè)化的設(shè)計(jì)思路，把需要解決分問(wèn)題點(diǎn)都一 一梳理清楚，再動(dòng)手制作設(shè)計(jì)圖紙。
老年人眼睛最常見(jiàn)的問(wèn)題是視力障礙，俗稱“老花眼”，影響用戶進(jìn)行閱讀。 如果老年人不會(huì)閱讀它，或者如果他們無(wú)法閱讀或理解它，那么擁有它又有什么意義呢？
我歸納出4種方法，大家可以按照以下歸納的設(shè)計(jì)方法和設(shè)計(jì)技巧來(lái)做適老化的設(shè)計(jì)改版。
ui中的文字是產(chǎn)品界面中最重要的一個(gè)元素，我們先來(lái)看看關(guān)于字體的一些技巧。當(dāng)產(chǎn)品中的文本給用戶很難閱讀的感覺(jué)，用戶想閱讀的意愿就會(huì)降低，還有一個(gè)場(chǎng)景細(xì)心的同學(xué)不難發(fā)現(xiàn)，當(dāng)用戶閱讀時(shí)間變長(zhǎng)了之后就會(huì)彎腰駝背，甚至瞇起眼閱讀，如果發(fā)現(xiàn)產(chǎn)品的用戶出現(xiàn)這樣的情況，那就要注意以下幾點(diǎn)。
襯線指的是字母結(jié)構(gòu)筆畫之外的裝飾性筆畫。有襯線的字體叫襯線字體（serif）；沒(méi)有襯線的字體，則叫做無(wú)襯線體（sans-serif）。
簡(jiǎn)單的理解就是非襯線體(例如黑體等)就是沒(méi)有裝飾性筆畫的末尾，這種無(wú)襯線體也是被廣泛應(yīng)用網(wǎng)頁(yè)端或手機(jī)端的產(chǎn)品，所以非襯線字體有醒目而且輪廓清晰的特點(diǎn)，是提升屏幕可讀性的首選。
*注意的是在設(shè)計(jì)過(guò)程中避免使用多種字體或者精心設(shè)計(jì)的造型字體，因?yàn)檫@可能會(huì)造成用戶混淆。
隨著年齡的增大，老年人可看到的視野也是變化的他會(huì)越來(lái)越小，所以在設(shè)計(jì)多字文本場(chǎng)景時(shí)候我們要注意以下兩點(diǎn)。
有資料顯示12像素的字體可以正常閱讀文本了，但是對(duì)于大多數(shù)讀者來(lái)說(shuō)，12 像素仍然太小了。即使是 15 像素也會(huì)讓原本可能會(huì)轉(zhuǎn)換的訪問(wèn)者望而卻步。
為什么文本字號(hào)要設(shè)計(jì)為16像素呢？有研究表明在我們屏幕上 16 像素的文本大小與印刷在書籍或雜志上的文本大小相同，這很符合人的閱讀習(xí)慣，但是人閱讀還有一個(gè)因素是不能忽視的，就是人和屏幕之間的距離。
舉一個(gè)例子，我們讀書都是手捧著書，印刷字體通常設(shè)置在 10 點(diǎn)～12點(diǎn)左右，考慮到用戶距離屏幕的距離其實(shí)和顯示器上16像素的字體大小相同的。（一般前端開(kāi)發(fā)會(huì)使用em單位進(jìn)行字體大小開(kāi)發(fā)，這個(gè)可以保證在不同分辨率上字體的比例，設(shè)計(jì)師只需要了解即可。 ）
*瀏覽器的默認(rèn)字體高都是16像素，除非特殊情況，通常情況下字體不建議使用10 像素。
*任何閱讀類或點(diǎn)擊類的內(nèi)容都應(yīng)該按一定比例放大，尤其是在設(shè)計(jì)按鈕上面的字號(hào)，應(yīng)該盡量保持較大，不少于16像素。
說(shuō)一個(gè)有趣的事情，我發(fā)現(xiàn)在印刷中小至 8 像素的字體是可讀性和成本之間的理想折衷方案，我查閱了相關(guān)文章，是因?yàn)檫^(guò)大的字號(hào)會(huì)浪費(fèi)紙張?jiān)斐捎∷⒊杀驹黾印Ｔ?Web 上，不需要為更多空間而支付任何費(fèi)用，考慮的是給用戶高效的傳達(dá)文本信息。
現(xiàn)在很多系統(tǒng)中都會(huì)有調(diào)節(jié)字號(hào)的功能，如果在資源條件充沛的情況下可以開(kāi)發(fā)類似的功能，方便用戶自己進(jìn)行設(shè)置調(diào)節(jié)。下圖是蘋果系統(tǒng)自定義文字大小功能。
任何設(shè)計(jì)都是離不開(kāi)色彩的那么接下來(lái)讓我們看看在顏色的選擇上要注意那些情況。
老年人通常會(huì)用經(jīng)驗(yàn)去判斷一個(gè)事物，尤其是與外國(guó)人相比中國(guó)人更習(xí)慣以經(jīng)驗(yàn)來(lái)思考問(wèn)題，所以我們?cè)谧鲈O(shè)計(jì)時(shí)候要盡量降低老年人的學(xué)習(xí)成本。比如我們生活中常常會(huì)見(jiàn)到十字路口的紅綠燈，綠色代表通行，黃色代表等待，紅色代表禁止，我們?cè)谠O(shè)計(jì)重要提示時(shí)候也可以借鑒這種方式去設(shè)計(jì)，保持和老年人現(xiàn)實(shí)生活對(duì)色彩的認(rèn)知是一致的。
前面已經(jīng)說(shuō) 老年人對(duì)對(duì)比度差異的敏感度降低、區(qū)分相似顏色方面變得更差。尤其是無(wú)法分辨藍(lán)色和紫色之間的區(qū)別，對(duì)綠色鑒別能力下降更明顯。
考慮到老年人眼睛對(duì)藍(lán)顏色的陰影不敏感，那么就要降低設(shè)計(jì)中使用藍(lán)色和紫色相互配合的場(chǎng)景，比如背景、文字、圖標(biāo)、圖片等模塊。
使用具有高對(duì)比度級(jí)別的配色方案使頁(yè)面更具可讀性在顏色的對(duì)比度上，可以根據(jù)WCAG2.1（Web Content Accessibility Guideline，Web內(nèi)容無(wú)障礙指南）設(shè)計(jì)顏色的對(duì)比，比如把重要的文字信息的對(duì)比度設(shè)計(jì)到AAA,次級(jí)的文字信息的對(duì)比度設(shè)計(jì)到AA。
在適老化設(shè)計(jì)中，色彩對(duì)比度要在4.5:1之上，即對(duì)比度達(dá)到 AAA級(jí)和AA級(jí)，讓界面中的信息與其背景間的關(guān)系對(duì)比度較大，才能足以讓老年人看清信息。
如果不了解怎么判斷對(duì)比度是什么級(jí)別，我建議大家可以收藏下面的網(wǎng)站。只需要把色紙?zhí)钊氲杰浖?，就可以看到兩個(gè)顏色關(guān)系的對(duì)比度。
人在手機(jī)上的交互手勢(shì)會(huì)有很多種，根據(jù)不同的業(yè)務(wù)場(chǎng)景，我們使用的交互手勢(shì)也不相同。 大致分為四類：?jiǎn)螕簦╰ap）；長(zhǎng)按（long press）；雙擊（Double Tap）；長(zhǎng)按&拖拽（long press & Drag）。
這么多交互手勢(shì)，機(jī)器需要先判斷你是什么手勢(shì)再根據(jù)手勢(shì)指令給出相應(yīng)的反饋。
當(dāng)手指貼合上屏幕的時(shí)候，反饋的熱區(qū)，并不是均勻向四周擴(kuò)散的，而是向下的擴(kuò)散。對(duì)于觸摸中心點(diǎn)，在觸摸的過(guò)程中，就會(huì)有向下的一個(gè)偏移，如圖：
例如在iOS內(nèi)的手勢(shì)識(shí)別，有一個(gè)專門的接口來(lái)做識(shí)別：PanGestureRecognizer，這個(gè)接口會(huì)在10px內(nèi)先判定手指移動(dòng)的方向和距離，再對(duì)具體觸發(fā)的手勢(shì)來(lái)做定義。
在移動(dòng)端，按鈕尺寸根據(jù)手指觸摸屏幕的最小點(diǎn)觸區(qū)域，平均長(zhǎng)度在10-14mm之間，指尖的長(zhǎng)度為8-10mm，所以10mm x 10mm就是一個(gè)最小觸摸目標(biāo)尺寸。在iOS 人機(jī)交互規(guī)范里面的 44*44 point是Apple HIG建議的手指點(diǎn)觸最小點(diǎn)觸面積。所以我們可以在不同設(shè)備不同 PPI 時(shí)處理尺寸，在移動(dòng)端設(shè)定點(diǎn)觸尺寸的最小點(diǎn)觸區(qū)域大小來(lái)設(shè)置按鈕尺寸的大小。
·移動(dòng)端：按鈕高度35px-50px之間，字號(hào)13pt-17pt，圓角4-8
·web端：按鈕高度24px-48px，字號(hào)12-18，圓角6-10
因?yàn)槔夏耆说氖种钙?，反映變慢，就要需要把相關(guān)按鈕的大小、組合的間距等設(shè)計(jì)的足夠?qū)挻?，方便用戶點(diǎn)擊；一些操作反饋的時(shí)長(zhǎng)也需要拉長(zhǎng)，給老年人足夠的反應(yīng)時(shí)間。建議至少保持在8像素以上的間距。
基于以上因素考慮，對(duì)于老年人群，選擇類的交互和輸入類的交互相比，用戶的效率會(huì)大大提高，所以點(diǎn)擊類交互要好于輸入類交互。
這里我列舉一個(gè)蘋果的案例，蘋果在設(shè)計(jì)積極按鈕的時(shí)候通常會(huì)放到布局的最右側(cè)，舉個(gè)例：
這里有“取消”和“確認(rèn)”兩個(gè)按鈕，對(duì)于業(yè)務(wù)方來(lái)說(shuō)判斷“確定”是積極按鈕，所以在設(shè)計(jì)這樣的彈窗時(shí)候 會(huì)把“確定”放在最右側(cè)。
老人對(duì)設(shè)計(jì)師的樣式判斷不是那么清晰和明顯，設(shè)計(jì)師尤其是在制作活動(dòng)banner場(chǎng)景中，使用具象的圖像往往會(huì)比插畫的圖像信息傳達(dá)更為直接。
人與人之間的認(rèn)知水平是存在差距的，老年人的認(rèn)知水平相對(duì)較低。比如在圖標(biāo)的設(shè)計(jì)方向，可能一個(gè)通話的圖標(biāo)會(huì)有手提電話和座機(jī)電話兩種表現(xiàn)方式，但是真正使用那種圖標(biāo)就會(huì)給用戶產(chǎn)生誤區(qū)，最好的解決辦法是用“純文字加圖標(biāo)”的形式表達(dá)是最為合理的一種方式。
對(duì)于部分的用戶來(lái)說(shuō)，有好的色彩更能增加信息傳達(dá)的辨識(shí)度。比如我們?cè)诎褕D標(biāo)雖然加上了文案，用戶第一眼看上去還是撞色處理的方式更好。
對(duì)于老年人，我們可以運(yùn)用潛意識(shí)作為界面中的隱形向?qū)?，確保視覺(jué)提示清晰，幫助產(chǎn)品順利完成目標(biāo)行為。
老年人的理解能力也會(huì)比常人要弱一些，對(duì)于一些文案或者專有名詞要描述具體，便于用戶進(jìn)行理解和做出選擇。研究發(fā)現(xiàn)帶有目的性的行動(dòng)文案要好于描述類的文案。
語(yǔ)音功能也是輔助老年人的一項(xiàng)功能點(diǎn)，通過(guò)語(yǔ)音搜索直達(dá)某個(gè)功能等。比如在搜索場(chǎng)景、客服場(chǎng)景、查詢場(chǎng)景等等。
值得注意的是在設(shè)計(jì)之初要考慮以下幾個(gè)場(chǎng)景：
·適當(dāng)?shù)卦龃笠袅?、使接收的聲音更加清晰?/strong>
·添加聲音反饋機(jī)制，如果聲音發(fā)送成功，應(yīng)該給予正確的聲音提示。
其實(shí)驗(yàn)證設(shè)計(jì)是否成功和我們正常做項(xiàng)目的思路大致相同，無(wú)外乎從比如產(chǎn)品體驗(yàn)，用戶服務(wù)，產(chǎn)品功能這三個(gè)層面進(jìn)行跟蹤反饋。
任務(wù)成功率：用戶能否順利的完成任務(wù)，解決用戶需求。
任務(wù)完成率：用戶多快能完成任務(wù)，耗費(fèi)時(shí)間多久，多數(shù)情況用于衡量效率。
任務(wù)出錯(cuò)率：在用戶完成任務(wù)的路徑出，用戶出錯(cuò)幾次，用于衡量出錯(cuò)頻率。
用戶滿意度：用戶完成任務(wù)后，用戶對(duì)產(chǎn)品的功能進(jìn)行打分，用戶衡量用戶的滿意程度。
其實(shí)國(guó)家提倡的適老化設(shè)計(jì)，我們可以設(shè)想另外一個(gè)話題——為老年人做設(shè)計(jì)等于為更多的人做設(shè)計(jì)。
如果你使用的是蘋果MacOS系統(tǒng)的操作系統(tǒng)，你可以看到蘋果在這種老年人（無(wú)障礙）設(shè)計(jì)中的功能設(shè)計(jì)，比如蘋果的輔助功能中的設(shè)計(jì)選項(xiàng)，有興趣的同學(xué)可以體驗(yàn)一下。
其實(shí)在國(guó)內(nèi)的互聯(lián)網(wǎng)產(chǎn)品公司也有做過(guò)無(wú)障礙的設(shè)計(jì)，比如小米發(fā)布的MIUI系統(tǒng)中的無(wú)障礙觸感設(shè)計(jì)，有興趣的小伙伴可以自己下載去體驗(yàn)。
其實(shí)網(wǎng)上有很多關(guān)于無(wú)障礙設(shè)計(jì)可以借鑒的參考文獻(xiàn)，比如W3C無(wú)障礙指南（WCAG 2.1）就是其中一款，WCAG是Web Content Accessibility Guidelines 即web內(nèi)容無(wú)障礙指南有興趣的同學(xué)可以查詢一下。
很多設(shè)計(jì)規(guī)范網(wǎng)站都會(huì)有關(guān)于無(wú)障礙設(shè)計(jì)的介紹，有興趣的同學(xué)也可以查看。
藍(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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
文章來(lái)源：站酷 作者：斜杠7濕兄
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn