信息獲取與適老化系統(tǒng)體驗(yàn)升級(jí)

2022-1-5    資深UI設(shè)計(jì)者


前言:

鑒于老年人一次次在“數(shù)字圍城”中遭遇的困境,2020年11月,國(guó)務(wù)院辦公廳印發(fā)《關(guān)于切實(shí)解決老年人運(yùn)用智能技術(shù)困難實(shí)施方案》的通知,2021年1月起,工信部將在全國(guó)范圍內(nèi)開(kāi)展為期一年的“互聯(lián)網(wǎng)應(yīng)用適老化及無(wú)障礙改造專(zhuān)項(xiàng)行動(dòng)”,要求各地區(qū)、各部門(mén)建立工作臺(tái)賬,明確時(shí)間表和路線圖,推進(jìn)互聯(lián)網(wǎng)網(wǎng)站和移動(dòng)互聯(lián)網(wǎng)應(yīng)用(APP)適老化及無(wú)障礙改造。



此政策一出,引發(fā)了資管行業(yè)針對(duì)金融產(chǎn)品適老化改造的積極探索與思考,同時(shí)各金融機(jī)構(gòu)研究團(tuán)隊(duì)也相應(yīng)推出互聯(lián)網(wǎng)金融產(chǎn)品適老化改造的改進(jìn)方向和原則,信息無(wú)障礙理念是近年國(guó)家推進(jìn)可持續(xù)發(fā)展的一項(xiàng)重要工作。在此也引發(fā)了我針對(duì)互聯(lián)網(wǎng)金融產(chǎn)品適老化改造的深入探索。

本篇調(diào)研報(bào)告由以下五大部分構(gòu)成:


- 行業(yè)分析—探討適老化改造趨勢(shì)背景

- 用戶(hù)分析—研究用戶(hù)對(duì)象習(xí)慣特征及需求痛點(diǎn)

- 改造方向—總結(jié)改造方向和部分具體措施

- 信息獲取—以證券交易為例的信息列表優(yōu)化

- 完成效果—分析目前各家產(chǎn)品適老化改造成果




一、適老化改造趨勢(shì)背景


截至2019年年末,我國(guó)65周歲及以上人口1.76億人,占總?cè)丝?2.6%;至2024年,65歲及以上人口將突破2億;若以60歲作為老年標(biāo)準(zhǔn),至2050年,老年人口將達(dá)5億。中高收入老年家庭數(shù)持續(xù)增加,金融服務(wù)需求將顯著增長(zhǎng),2017年家庭月收入逾4000元的老人已超過(guò)1.06億人,其中1600萬(wàn)老人的家庭月收入逾10000元。和許多無(wú)房無(wú)車(chē)年輕人相比,絕大多數(shù)老年人擁有一套或多套住房。



新生事物的發(fā)展也潛移默化的影響著老年人的消費(fèi)思維方式。在如今互聯(lián)網(wǎng)不斷發(fā)展的今天,老年人的觸網(wǎng)熱情也不斷提高。根據(jù)CNNIC發(fā)布的《中國(guó)互聯(lián)網(wǎng)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》,截至2019年6月,我國(guó)50-59歲網(wǎng)民群體占比達(dá)到6.7%,較2016年12月的5.4%提升了1.3個(gè)百分點(diǎn);60歲及以上網(wǎng)民群體占比6.9%,較2016年12月的4.0%上升了2.9個(gè)百分點(diǎn)



二、老年人使用互聯(lián)網(wǎng)產(chǎn)品存在的問(wèn)題


從根本上分析,為什么老年人“不會(huì)用”,最根本的原因就是身體機(jī)能的衰弱。這是我們無(wú)法抗拒和改變的自然生理現(xiàn)象。



「適老化及無(wú)障礙改造」其實(shí)包括2個(gè)方面。

一方面是「適老化」,對(duì)老年人的關(guān)懷。另一方面是「無(wú)障礙改造」,針對(duì)殘障人士,比如視力障礙、聽(tīng)力障礙、肢體障礙人士的關(guān)懷。

這兩方面的改造,也統(tǒng)稱(chēng)為「信息無(wú)障礙改造」,需要過(guò)信息化手段彌補(bǔ)身體機(jī)能、所處環(huán)境等存在的差異,使任何人(無(wú)論是健全人還是殘疾人,無(wú)論是年輕人還是老年人)都能平等、方便、安全地獲取、交互、使用信息。

整體來(lái)看,當(dāng)前我國(guó)公共服務(wù)類(lèi)網(wǎng)站及移動(dòng)互聯(lián)網(wǎng)應(yīng)用(APP)無(wú)障礙化普及率較低,適老化水平有待提升。比如:

- 多數(shù)存在界面交互復(fù)雜、操作不友好等問(wèn)題,使得老年人不敢用、不會(huì)用、不能用

- 普遍存在圖片缺乏文本描述、驗(yàn)證碼操作困難、相關(guān)功能與設(shè)備不兼容等問(wèn)題,使得殘疾人等群體在使用互聯(lián)網(wǎng)過(guò)程中遇到多種障礙。

- 當(dāng)前互聯(lián)網(wǎng)應(yīng)用中強(qiáng)制廣告較多,容易誤導(dǎo)老年人,特別是有些付款類(lèi)操作的誘導(dǎo)式按鍵

目前國(guó)內(nèi)「老年人」相比「殘障人」的用戶(hù)群體大很大,并且「適老化」和「無(wú)障礙改造」屬于兩個(gè)完全不同的改造方向,加上「適老化」改造難度低,普適性更強(qiáng)。所以目前國(guó)內(nèi)的互聯(lián)網(wǎng)產(chǎn)品,主要從「適老化」入手進(jìn)行改造,「無(wú)障礙改造」開(kāi)展的工作還非常有限。



三、3個(gè)方面著手,針對(duì)性提出建議


產(chǎn)品如何進(jìn)行「適老化」改造?

首先我們可以看看,老年用戶(hù)的幾個(gè)特點(diǎn):

1、視覺(jué)、聽(tīng)覺(jué)能力變差

2、記憶力、注意力下降

3、身體機(jī)能下降,對(duì)互聯(lián)網(wǎng)認(rèn)知不足



同時(shí),工信部工信部「行動(dòng)方案」中,對(duì)「適老化和無(wú)障礙改造」提出了幾個(gè)基本要求:

1、大字體、大圖標(biāo)、高對(duì)比度文字。 2、操作簡(jiǎn)單、界面簡(jiǎn)潔,實(shí)現(xiàn)一鍵操作、文本輸入提示等多種無(wú)障礙功能

3、提升方言識(shí)別能力,方便不會(huì)普通話的老人使用智能設(shè)備   4、 去廣告,禁止誘導(dǎo)

從老年人的特點(diǎn)、工信部要求、以及當(dāng)前互聯(lián)網(wǎng)產(chǎn)品適老化實(shí)踐中,我總結(jié)了3大產(chǎn)品「適老化」設(shè)計(jì)要點(diǎn)。



3.1視覺(jué)、聽(tīng)覺(jué)退化導(dǎo)致信息獲取障礙

實(shí)驗(yàn)心理學(xué)家赤瑞特拉一項(xiàng)關(guān)于人類(lèi)獲取信息的來(lái)源顯示,人類(lèi)獲取信息的83%來(lái)自視覺(jué),11%來(lái)自聽(tīng)覺(jué),3.5%來(lái)自嗅覺(jué),1.5%來(lái)自觸覺(jué),1%來(lái)自味覺(jué)。


1. 字體選擇

那么在獲取信息的來(lái)源時(shí)文字,是產(chǎn)品界面中最重要的一個(gè)元素,當(dāng)產(chǎn)品中的文本字號(hào)很小、文字辨認(rèn)不清的時(shí)候,用戶(hù)想閱讀的意愿就會(huì)降低。產(chǎn)品的信息傳達(dá)的目標(biāo)就無(wú)法完成。所以在標(biāo)準(zhǔn)的文本傳遞信息的時(shí)候推薦使用非襯線體


襯線指的是字母結(jié)構(gòu)筆畫(huà)之外的裝飾性筆畫(huà)。有襯線的字體叫襯線字體(serif)中文比較常見(jiàn)的如宋體、明體、白體;沒(méi)有襯線的字體,則叫做無(wú)襯線體(sans-serif)。簡(jiǎn)單的理解就是非襯線體(例如黑體等)就是沒(méi)有裝飾性筆畫(huà)的末尾,無(wú)襯線體則更統(tǒng)一、時(shí)尚、簡(jiǎn)約,中文常見(jiàn)的如黑體、微軟雅黑。這種無(wú)襯線體也被廣泛應(yīng)用網(wǎng)頁(yè)端或手機(jī)端的產(chǎn)品,所以非襯線字體有醒目而且輪廓清晰的特點(diǎn),是提升屏幕可讀性的首選。


*需要注意的是,在常規(guī)頁(yè)面的設(shè)計(jì)過(guò)程中避免使用多種字體或者精心設(shè)計(jì)的造型字體,因?yàn)檫@可能會(huì)造成用戶(hù)混淆。營(yíng)銷(xiāo)頁(yè)面不在此列



2、字號(hào)大小

根據(jù)Ant Design設(shè)計(jì)語(yǔ)言中講到關(guān)于計(jì)算最小字體的方法,通過(guò)肉眼到物體之間的距離、物體的高度以及人的最小可接受視角,構(gòu)成的三角函數(shù)關(guān)系進(jìn)行計(jì)算。

普通用戶(hù)的最小視角為0.3度時(shí)閱讀效率最好,一般眼睛距離電腦屏幕為50cm。有學(xué)者研究表明,老年人由于視覺(jué)能力下降,最小可接受視角為0.75度,視距為43cm,換算之后相當(dāng)于字高為5.62mm,經(jīng)過(guò)換算為16px。

在JIS規(guī)格對(duì)于印刷品等反射原稿中《不同年紀(jì)最小可閱讀文字大小》的建議中,60歲以上的老年人,最小可接受的字體大小的絕對(duì)高度是4.9mm,經(jīng)過(guò)換算為14px。


考慮針對(duì)老年人的應(yīng)用使用的文字越大越好,建議最小使用16px字號(hào)。為什么文本字號(hào)要設(shè)計(jì)為16像素呢?有研究表明在我們屏幕上 16 像素的文本大小與印刷在書(shū)籍或雜志上的文本大小相同,這很符合人的閱讀習(xí)慣。但是人閱讀還有一個(gè)因素是不能忽視的,就是人和屏幕之間的距離。


換算網(wǎng)站:https://www.gaitubao.com/tools/pixel2cm.html



3、顏色選擇

建議使用相對(duì)融合的中性色;使用對(duì)比強(qiáng)烈的互補(bǔ)色來(lái)突出重要元素信息內(nèi)容和功能位置。同時(shí)要符合WCAG 2.0(Web Content Accessibility Guideline,Web 內(nèi)容無(wú)障礙指南)中對(duì)顏色對(duì)比度的指導(dǎo)意見(jiàn):


- 對(duì)比度(AA級(jí)):文本的視覺(jué)呈現(xiàn)以及文本圖像至少7:1的對(duì)比度;大號(hào)文本(字重為Bold時(shí)大于18px,字重為Regular時(shí)大于24px)以及大文本圖像至少有4.5:1的對(duì)比度。


- 對(duì)比度(AAA級(jí)):文本的視覺(jué)呈現(xiàn)以及文本圖像至少要有4.5:1的對(duì)比度;大號(hào)文本(字重為Bold時(shí)大于18px,字重為Regular時(shí)大于24px)以及大文本圖像至少有3:1的對(duì)比度。


可以通過(guò)WebAIM`s Color Contrast Checker、Contrast-ratio、EightShap es Contrast Grid、等網(wǎng)站點(diǎn)擊進(jìn)行測(cè)試對(duì)比查看是否滿(mǎn)足 WCAG 2.0 AA 的「色彩無(wú)障礙設(shè)計(jì)」標(biāo)準(zhǔn)。


避免使用藍(lán)色和紫色

由于老年人的晶狀體變黃、變渾濁,會(huì)選擇性的吸收藍(lán)光,從而導(dǎo)致老年人對(duì)藍(lán)色的鑒別能力比紅、綠色的鑒別能力下降的更明顯,因此頁(yè)面中的重要元素要避免使用藍(lán)色或不同深淺的紫色。




4、聽(tīng)力和身體機(jī)能的退化

聽(tīng)覺(jué)也是我們獲取信息的重要來(lái)源,可以考慮使用語(yǔ)音通道獲取信息。但隨著年齡的增長(zhǎng),人的大腦聽(tīng)覺(jué)中樞開(kāi)始退化,腦皮質(zhì)逐漸萎縮,耳蝸的基底膜、聽(tīng)覺(jué)細(xì)胞及聽(tīng)神經(jīng)也開(kāi)始老化,導(dǎo)致老年人出現(xiàn)聽(tīng)力下降甚至“老年性耳聾”,主要表現(xiàn):

1、聽(tīng)到聲音,但聽(tīng)不清內(nèi)容; 

2、正常語(yǔ)速的音/視頻無(wú)法全部接收;

3、低頻段聲音聽(tīng)不到(如鼓聲),高頻段聲音受不了(如尖細(xì)的刮擦聲),立體聲成為噪音;


因此在進(jìn)行語(yǔ)音通道設(shè)計(jì)時(shí),需要考慮:

1、加大音量,老年人聽(tīng)覺(jué)平均感知音量在67.5~75.3分貝之間,因此在視頻開(kāi)始播放時(shí),我們對(duì)低于設(shè)定值的音量適當(dāng)增加到約44%。同時(shí)處理掉環(huán)境聲音,使內(nèi)容聲音更清晰。


2、為了保證老年人有效的接收到聲音信息并進(jìn)行理解,音/視頻的播放速度也需要適當(dāng)下降。因此,我們減少了高檔位語(yǔ)速,并提供了高、中、低3檔語(yǔ)速,使老年人選擇適合自己的速度,更有效的獲取聲音信息。同時(shí)加入字幕等實(shí)時(shí)信息,實(shí)時(shí)播放雙層保障老年人的信息獲取


3、使用語(yǔ)音交互形式,幫助老年人更方便的進(jìn)行信息輸入及獲取,如百度大字版的語(yǔ)音搜索功能及“今日要聞”點(diǎn)擊播放功能、酷狗音樂(lè)大字版聽(tīng)歌識(shí)曲功能、支付寶關(guān)懷版客服語(yǔ)音功能等。



3.2記憶力、注意力下降


1、簡(jiǎn)化交互操作

人在手機(jī)上的交互手勢(shì)會(huì)有很多種,根據(jù)不同的業(yè)務(wù)場(chǎng)景,我們使用的交互手勢(shì)也不相同。

大致分為四類(lèi):?jiǎn)螕簦╰ap);長(zhǎng)按(long press);雙擊(Double Tap);長(zhǎng)按&拖拽(long press & Drag)。

這么多交互手勢(shì),甚至還有組合手勢(shì)。老年人在使用過(guò)程中會(huì)顯的很煩索。所以操作手勢(shì)盡量簡(jiǎn)單、符合人的常規(guī), 以“點(diǎn)擊、滑動(dòng)” 為主?;蛘呤且环N切換支持2種手勢(shì)切換頁(yè)面。

老年人除了生理上的手指偏大,身體機(jī)能退化引起控制能力下降、行動(dòng)遲緩,動(dòng)脈硬化、震顫麻痹、帕金森等疾病導(dǎo)致手部抖動(dòng),使得老年人無(wú)法進(jìn)行精確、復(fù)雜的操作手勢(shì);因此針對(duì)老年人應(yīng)用的操作手勢(shì)應(yīng)該注意:


- 簡(jiǎn)化操作手勢(shì):?jiǎn)沃覆僮鞯氖謩?shì)比雙指和多指手勢(shì)更易用(比如電腦觸控板的多指手勢(shì));

- 盡量使用單擊:?jiǎn)螕羝聊槐入p擊、多擊更易用。老年人手指不靈活無(wú)法在指定時(shí)間內(nèi)完成連續(xù)點(diǎn)擊屏幕兩次。

- 大的點(diǎn)擊熱區(qū):在移動(dòng)端,按鈕尺寸根據(jù)手指觸摸屏幕的最小點(diǎn)觸區(qū)域,平均長(zhǎng)度在10-14mm之間,指尖的長(zhǎng)度為8-10mm,所以10mm x 10mm就是一個(gè)最小觸摸目標(biāo)尺寸。按鈕高度35px-50px之間,字號(hào)13pt-17pt,圓角4-8·web端:按鈕高度24px-48px,字號(hào)12-18,圓角6-10。



2、精減功能、減少信息干擾

內(nèi)容可以多,內(nèi)容要做好清晰分類(lèi),清晰易懂。信息導(dǎo)航不要多個(gè)維度嵌套,不要讓長(zhǎng)輩暈頭轉(zhuǎn)向。信息層級(jí)不宜過(guò)深,2-3層為宜,不要讓長(zhǎng)輩迷路。

要考慮哪些功能該提供,哪些不該提供?是否要針對(duì)老人提供一些專(zhuān)屬的功能或服務(wù)?

如果可以,結(jié)合自己的業(yè)務(wù),提供老年群體的針對(duì)性?xún)?nèi)容和服務(wù)。比如:如果你是做資訊的,內(nèi)容推薦符合老年人口味,視頻、音頻形式,就很重要。如果你是做醫(yī)療健康的,老年人慢病管理,用藥提醒,就比較貼心。


如高德地圖長(zhǎng)輩版:減少了很多不必要的功能,附近、消息、我的、打車(chē)等等。只保留首頁(yè)而且把長(zhǎng)輩會(huì)關(guān)心的公共廁所、醫(yī)院、銀行、公園等目的地列出。方便快速出行。做好了一個(gè)地圖工具箱的職責(zé)。不去做干擾的信息。美團(tuán)長(zhǎng)輩版也是只保留核心的點(diǎn)餐功能。把更多的頁(yè)面空間都留給了餐廳的信息展示。方便長(zhǎng)輩點(diǎn)餐。



3、流程明確化、減少每屏信息密度

能懂會(huì)用,可以有效減少老年人在使用線上產(chǎn)品時(shí)焦慮感和挫敗感。讓老年人知道看到的是什么,正在做什么,接下來(lái)要這么做,可以達(dá)成什么目標(biāo),這是在使用線上產(chǎn)品進(jìn)行一切操作的基礎(chǔ)條件。

如做一件事情共需要幾步,當(dāng)前是百分之多少,還需要多少才能完成,在過(guò)程中少一些選擇,多一些指引,將容易混淆的內(nèi)容進(jìn)行提示,告訴你應(yīng)該如何操作,減少判斷和操作失誤。在長(zhǎng)任務(wù)中,給出明確的反饋和最終目標(biāo)的提醒



3.3認(rèn)知能力、身體機(jī)能退化


1、理解能力

更易辨識(shí)的圖標(biāo)、提供圖標(biāo)名稱(chēng)。由于在互聯(lián)網(wǎng)時(shí)代、年輕人接受的信息非常多,日新月異比如我們現(xiàn)在流行的矢量化圖標(biāo)、線條極簡(jiǎn)風(fēng)格的圖標(biāo),對(duì)于老年人來(lái)說(shuō),存在認(rèn)知障礙。他們可能并不理解這些圖標(biāo)代表著什么意思。學(xué)習(xí)需要過(guò)程,因此,在老年人未熟悉我們的常用圖標(biāo)前,可適當(dāng)調(diào)整圖標(biāo)的設(shè)計(jì)方向,更加“擬物化”,符合他們的認(rèn)知。消除認(rèn)知水平帶來(lái)的差距



2、提示反饋

例如在一些需要精確移動(dòng)的操作,而這個(gè)功能又必不可少的情況下。應(yīng)該怎么解決??梢酝ㄟ^(guò)線性的視覺(jué)提示,加上每一個(gè)顆粒度的移動(dòng)都給到振動(dòng)反饋,加強(qiáng)長(zhǎng)輩用戶(hù)的感知。而不是所有的提示都通過(guò)界面單一展示。也是可以在資訊版塊加入語(yǔ)音播放的功能,通過(guò)聲音來(lái)告知信息。



四.信息獲取優(yōu)化—以證券交易為例的信息展示優(yōu)化



1、信息展示的重要性

新聞資訊和行情列表展示的字段很大程度上決定著用戶(hù)對(duì)行情的了解。是否做出交易的行為。行情列表閱讀的現(xiàn)狀:在一些產(chǎn)品中,基于閱讀模塊的相關(guān)設(shè)計(jì)在關(guān)注度和方法論上都有所欠缺。線上的行情列表閱讀版式(參考同花順、東方財(cái)富)處理較陳舊,視覺(jué)體驗(yàn)較差,用戶(hù)在使用過(guò)程中障礙較多。歸根究底,由于整體的設(shè)計(jì)思路缺失,表面的調(diào)整一直是修修補(bǔ)補(bǔ)狀態(tài),沒(méi)有根本解決閱讀體驗(yàn)的問(wèn)題。


因此在信息展示上,需要加強(qiáng)邏輯與秩序,在易認(rèn)性和可讀性上優(yōu)化信息傳達(dá)和記憶質(zhì)量,最終給用戶(hù)打造0干擾的閱讀體驗(yàn)。

這里解釋下幾個(gè)概念:

易認(rèn)性:(Legibility)針對(duì)文字,能準(zhǔn)確無(wú)誤的讓讀者閱讀,不因?yàn)檫^(guò)于接近帶來(lái)困惑。

可讀性:(Readability)針對(duì)版式,閱讀的容易程度,文字的組合呈現(xiàn)。

0干擾:能將自己的設(shè)計(jì)不動(dòng)聲色的隱藏起來(lái),不以設(shè)計(jì)本身分散人的注意力,達(dá)到閱讀的沉浸狀態(tài)。



2、目前證券交易產(chǎn)品列表存在的問(wèn)題,總結(jié)與分析

基于此現(xiàn)狀,分析了幾個(gè)頭部證券交易產(chǎn)品的頁(yè)面,梳理目前存在的一些問(wèn)題,每個(gè)列表的盒子寬度不一致,有的寬有的窄,導(dǎo)致在整體閱讀時(shí)跨越度比較大。盒子的寬度不同對(duì)字段數(shù)據(jù)范圍理解不清晰,導(dǎo)致同一頁(yè)面數(shù)據(jù)字體大小不統(tǒng)一。展示的信息過(guò)多,密度高、信息過(guò)載出現(xiàn)視覺(jué)疲勞。又或者間隔太大顯示的太松散



通過(guò)各個(gè)維度的對(duì)比,總結(jié)出這個(gè)表格

一、字體分析

1、字體iOS端文字基本以蘋(píng)方為主,數(shù)字字體以din為多數(shù)(部分調(diào)整)2、字號(hào)整體以32-34居多。4個(gè)平臺(tái)文字與數(shù)字字號(hào)相同常規(guī)狀態(tài)下)

3、字重以中文常規(guī)體,數(shù)字中黑體為主

二、盒子分析

1、固定盒子間距,盒子寬度根據(jù)字段調(diào)整

2、固定盒子寬度,間距。字體大?。ㄅE#?

3、盒子間距不固定,超過(guò)盒子部分縮小字體

三、適老/大號(hào)字體調(diào)節(jié)

1、牛牛/騰訊自選股/同花順:字體大小5檔,可以全局調(diào)整,也可以分區(qū)調(diào)整,牛牛:行情、交易、資訊、聊天室、其他(同花順有長(zhǎng)輩模式)

2、東方財(cái)富/新浪財(cái)經(jīng):支持全局字號(hào)的修改,但是支持的檔位有所不同有2檔3檔5檔

3、老虎:不支持調(diào)整/雪球:只支持調(diào)整資訊部分字體



3、確認(rèn)展現(xiàn)形式,并驗(yàn)證可行性

經(jīng)過(guò)總結(jié)各家產(chǎn)品的體驗(yàn)分析,開(kāi)始了設(shè)計(jì)方案的嘗試。首先考慮了字段數(shù)據(jù)高頻出現(xiàn)的范圍、考慮極限值情況,確定字體大小在32-38之間比較合適。第一屏內(nèi)僅展示最新價(jià)、和漲跌幅即可。同時(shí)把對(duì)比表中出現(xiàn)的高頻率行高、字號(hào)。統(tǒng)一進(jìn)行對(duì)比,產(chǎn)生問(wèn)卷調(diào)研進(jìn)行盲試,選擇覺(jué)得最舒服的列表方式。最終34號(hào)字體/104列表高度被最多的人選擇。


在確定字號(hào)大小和列表高度之后,開(kāi)始設(shè)計(jì)驗(yàn)證,把要展示的字段和常規(guī)、極限狀態(tài)的數(shù)據(jù)放入盒子模型內(nèi)。確保在不改變字號(hào)大小和盒子間隔的的情況下都能完整展示。最后在適配泛金融交易的,A股、港/美股、期貨、外匯等列表信息。在標(biāo)題、或者數(shù)據(jù)達(dá)到8個(gè)-9個(gè)的情況下依然能完整展示。



最后在進(jìn)行字號(hào)大小的調(diào)整,適合長(zhǎng)輩用戶(hù)使用。在保障展示完整的情況下,同時(shí)調(diào)整字號(hào)和列表高度,字號(hào)以2個(gè)字號(hào)為一檔支持5檔調(diào)節(jié),最大支持44號(hào)120行高。同時(shí)在漲跌幅處用色塊做視覺(jué)吸引,增強(qiáng)漲跌感知。詳情頁(yè)內(nèi)也是全局調(diào)整,不能像某些產(chǎn)品一樣只是單純的形式上的做“適老化”


開(kāi)發(fā)實(shí)現(xiàn)與落地,在和開(kāi)發(fā)同事了解相關(guān)背景后,相當(dāng)于是皮膚系統(tǒng)對(duì)應(yīng)不同字號(hào)擁有不同的UI展示。由于不是時(shí)實(shí)展示,實(shí)現(xiàn)難道不大。全局調(diào)整字體,可以實(shí)現(xiàn)。但是具體效果不好確定。主要是自適應(yīng)布局方式產(chǎn)生的問(wèn)題。面臨部分頁(yè)面需要重新編寫(xiě)。由于目前使用的是frame布局方式需要調(diào)整成和Auto Layout(自動(dòng))布局才能比較好的適應(yīng)效果。



4、文章資訊展示優(yōu)化與落地

屏幕閱讀與紙質(zhì)閱讀不同

人的閱讀習(xí)慣會(huì)根據(jù)閱讀環(huán)境而改變,包括文本的書(shū)寫(xiě)格式、文本的媒介、語(yǔ)言符號(hào)等?;谄聊坏拈喿x行為,往往表現(xiàn)了如下特征:很少人會(huì)一字一句閱讀頁(yè)面,更多的是在瀏覽、關(guān)鍵詞確認(rèn)、非線性閱讀、有選擇性的閱讀。因此文章的間距非常影響閱讀體驗(yàn)。文字的間距包括兩部分,第一是橫向字與字的間距;其次是縱向行與行的間距。



1. 頁(yè)面版式留白探索(行間距,段落間距等)

行間距是決定版面中的欄寬是否具有閱讀性的重要因素。許多平面大師都非常注重行距,段落間距的設(shè)置。過(guò)窄與過(guò)寬的行距會(huì)有意識(shí)或無(wú)意識(shí)的讓讀者困惑,造成某種心理障礙。


行距過(guò)大會(huì)打破文本連續(xù)性,每一行會(huì)被孤立,缺乏緊湊感,會(huì)降慢閱讀速度。行距太小會(huì)讓頁(yè)面灰度過(guò)重,讀者眼睛承受過(guò)多的負(fù)擔(dān),無(wú)法集中閱讀單獨(dú)一行,時(shí)間久了會(huì)增加疲勞感。



根據(jù)當(dāng)前現(xiàn)狀,再結(jié)合行業(yè)設(shè)計(jì)經(jīng)驗(yàn),我們選擇了字號(hào)與行高倍數(shù)組合的一系列方案,進(jìn)行了眼動(dòng)實(shí)驗(yàn)和用戶(hù)訪談,確定用戶(hù)可接受的行間距為1.50-1.70的范圍,再通過(guò)對(duì)比不同機(jī)型下的屏幕顯示效果,以及不同檔位字體顯示效果、閱讀效率,最后確定了圖文落地頁(yè)正文文字,擴(kuò)大行間距1.65倍行號(hào)的設(shè)計(jì)方案。



2. 對(duì)齊方式研究

研究完行間距顯示,段落里文字對(duì)齊的研究也很重要。

文字對(duì)齊方式有:左對(duì)齊,右對(duì)齊,左右對(duì)齊,居中對(duì)齊這幾種,大段落文字閱讀右對(duì)齊或者居中對(duì)齊幾乎沒(méi)有,所以這里我們對(duì)比左對(duì)齊和左右對(duì)齊的優(yōu)劣。來(lái)看下優(yōu)劣對(duì)比:

左右對(duì)齊的優(yōu)勢(shì)較多,主要體現(xiàn)在視覺(jué)感受舒服(規(guī)規(guī)整整的版式),更主要是眼睛在固定位置換行,在易讀性上做得比較好。

缺點(diǎn)也是有的,文章存在2種字間距,而左對(duì)齊優(yōu)勢(shì)在于只有一個(gè)固定字間距。好在新聞閱讀文章長(zhǎng)度并沒(méi)有特別長(zhǎng),篇幅受限,影響也就不會(huì)擴(kuò)大,且2個(gè)間距尺寸也是在可接受范圍里。


綜上對(duì)比,我們認(rèn)為左右對(duì)齊的版式在新聞?lì)愰喿x里,是明顯優(yōu)于左對(duì)齊版式。



3.引入概念—「垂直韻律」

「垂直韻律」是閱讀節(jié)奏感的重中之重,打造一切視覺(jué)閱讀節(jié)奏。行距,是垂直韻律的基礎(chǔ)屬性(同版式中的網(wǎng)格概念接近)。

版式規(guī)范中,中文漢字1.5~2倍的行距是最為適合的。整體來(lái)說(shuō),字號(hào)越小,行間距應(yīng)該相對(duì)越大,反之亦然。

確定1.65倍行距最符合各項(xiàng)指標(biāo)行距確定完后,基礎(chǔ)間距就有了數(shù)值a,之后頁(yè)面相關(guān)的元素縱向之間間距都依賴(lài)這個(gè)數(shù)值(a的n倍)。



倍數(shù)間距的引用,整體頁(yè)面來(lái)看,所有的留白都有規(guī)律可循,形成自己的韻律感。

這么做的好處就是用戶(hù)對(duì)規(guī)律間隔的理解度更高,有節(jié)奏的留白除了滿(mǎn)足了它本身需要的功能屬性,用戶(hù)閱讀過(guò)程中不容易受到來(lái)自間隔過(guò)多的干擾,這樣易讀性就提升了。同時(shí)由于字號(hào)大小的不同,行間距相應(yīng)的調(diào)整。展現(xiàn)的效果也不一樣

來(lái)看下我們看看不同字號(hào)版式頁(yè)面樣子,自帶韻律感~



4.字體、字重選擇

我們除了需要選擇無(wú)襯線字體,更應(yīng)該選擇字重更全的字體我們發(fā)現(xiàn)目前在一些安卓手機(jī)上,一些字體在增加字重后出現(xiàn)沾粘情況,不能保證可讀性。

字重,即字形的重量,字重的等級(jí)用來(lái)標(biāo)明同一字體家族不同粗細(xì)筆畫(huà)的字形。

但通常一個(gè)特定的字體家族僅會(huì)包含少數(shù)的可用重量。若一個(gè)指定的字重不存在時(shí),CSS會(huì)就近匹配其他字重:較重的字重映射到更重的重量、較輕的字重會(huì)映射到更輕的重量。

目前落地頁(yè)代碼中字體的設(shè)置,安卓使用的第一順位的字體字重僅2檔字重,所以在小字場(chǎng)景和分辨率較低的安卓機(jī)型上,會(huì)匹配到更粗的字重,出現(xiàn)文字沾粘的情況。




這里插入一件趣事,當(dāng)時(shí)我走查安卓UI頁(yè)面時(shí),發(fā)現(xiàn)粗體字體比設(shè)計(jì)稿上粗很多,又對(duì)比了一下ios的粗細(xì),就讓他們改細(xì)一點(diǎn)。

他們表示:“沒(méi)問(wèn)題”啪一下,我一看發(fā)現(xiàn)加粗完全沒(méi)有了,變成常規(guī)體了。就說(shuō)“在加粗一點(diǎn)啊”。

開(kāi)發(fā)小哥看了我一眼“行”啪一下,又回到那么粗壯的狀態(tài)。

就問(wèn)“為什么加粗會(huì)這么粗,iOS沒(méi)有這么粗啊,不要這么粗,要細(xì)一點(diǎn)的那種粗!”

他白了我一眼說(shuō):因?yàn)槭窍到y(tǒng)字體不一樣的原因,iOS 用的是Helvetica,安卓字體是Roboto,其字體本身就設(shè)計(jì)加粗效果就是這么粗。沒(méi)有辦法了!

我:……暫時(shí)受挫,退去了!回去之后我越看越不行,就選擇查找解決方案,最終在csdn論壇找到了方法。并且發(fā)現(xiàn)了相同遭遇的設(shè)計(jì)師與開(kāi)發(fā)小哥。果然這個(gè)粗細(xì)問(wèn)題都讓設(shè)計(jì)師無(wú)法接受!




最終通過(guò)找到的方案化解了這個(gè)問(wèn)題,不過(guò)我們還是調(diào)整了font-family中的字體適配順位,在安卓端優(yōu)先適配字重更全的字體,保證安卓端加粗字體的展現(xiàn),優(yōu)化內(nèi)容可讀性。



五、各家產(chǎn)品適老化改造成果

如今已經(jīng)到2022年的年初,各家app適老化做的怎么樣。是應(yīng)付要求,還是真的為老年人打造適合他們用的產(chǎn)品呢?接下來(lái)我那幾個(gè)正反面案例給大家分析一下。誰(shuí)才在真正用心做產(chǎn)品


反面教材 :

支付寶

辨識(shí)度:支付寶僅在辨識(shí)度上還比較可觀,字體、圖標(biāo)的色彩對(duì)比度都可以較好的辨識(shí)。但是在易懂方面,支付寶做的比較差勁,整體的交互依舊沿用普通版的,沒(méi)有對(duì)于理解性做調(diào)整,對(duì)于老人來(lái)說(shuō)操作比較復(fù)雜,難以學(xué)會(huì)。而且支付寶的老年版并沒(méi)有很用心的去精簡(jiǎn)功能,比如這個(gè)個(gè)人中心頁(yè)面,對(duì)于老人來(lái)說(shuō),支付寶會(huì)員、余利寶、螞蟻寶、相互寶這些幾乎沒(méi)有用處,存在于頁(yè)面中只會(huì)讓老人誤觸,支付類(lèi)軟件對(duì)于老人來(lái)說(shuō)核心功能就是支付、收款、查余額、查賬單,類(lèi)似于工具類(lèi)的產(chǎn)品。在首頁(yè)部分還是保留了螞蟻森林的部分,一方面是基于公益的性至,另外一方面還是需要用戶(hù)的活躍度、留存率。理財(cái)頁(yè)面功能布局上是保留了穩(wěn)健的、較安全的債券產(chǎn)品,以及保險(xiǎn)產(chǎn)品。相對(duì)來(lái)是比較合理,但是進(jìn)入到下一級(jí)頁(yè)面后,又回歸了正常模式。


而支付寶的口碑頁(yè)在老年版中應(yīng)該直接拿掉,口碑里的每個(gè)業(yè)務(wù)單拿出來(lái),體量都不亞于一個(gè)大型APP,而且每個(gè)業(yè)務(wù)的內(nèi)頁(yè)都并沒(méi)有去適配老年化,點(diǎn)進(jìn)去依然是普通版的,這樣的頁(yè)面存在于老年版的業(yè)務(wù)中,只會(huì)分散老人的注意力,加大老人的誤觸率與學(xué)習(xí)成本。在新版本中加入的生活模塊,更是連字體大小都沒(méi)有改變,完全沒(méi)有適配。如果是沒(méi)有時(shí)間加入適配,不如在老年版不上這個(gè)功能反而更加干爽。


雖然適老化涉及的頁(yè)面可能很多,資源成本很大回報(bào)率低,但是作為國(guó)內(nèi)首屈一指的金融產(chǎn)品,立足于全球化的目標(biāo)。格局也可以大一點(diǎn),并且未來(lái)隨著中國(guó)老齡化人口越來(lái)越多,老年人掌握的財(cái)富會(huì)越來(lái)越多。針于他們做優(yōu)化也不一定是“虧本買(mǎi)賣(mài)”




同花順

作為頭部的證券交易產(chǎn)品,適老化做的可以用災(zāi)難來(lái)形容了。本來(lái)主要的用戶(hù)人群就是中老年較多,界面風(fēng)格也偏沉穩(wěn),結(jié)果在適配上做的像是在應(yīng)付交作業(yè)。首頁(yè)上半部分是加大了的圖標(biāo),選項(xiàng)欄也是加大字號(hào)。但是下面資訊的部分似乎和上半部分圖標(biāo)分割了一樣毫無(wú)關(guān)系,依然是正常大小,詳情頁(yè)中也是如此。行情列表頁(yè)中一級(jí)頁(yè)面是老年版的放大效果,點(diǎn)擊查看更多時(shí),列表又回到正常狀態(tài)。列表頁(yè)的適配難度是最小的,并且外面一層已經(jīng)有了,結(jié)果還做的如此糟糕。并且在長(zhǎng)輩模式中,字體大小調(diào)整也暫停生效了,也無(wú)法調(diào)節(jié)長(zhǎng)輩模式效果不好的字號(hào)大小。



正面教材今日頭條大字版 :

今日頭條

是國(guó)內(nèi)最具影響力的綜合類(lèi)資訊平臺(tái),內(nèi)容五花八門(mén),涵蓋的分類(lèi)眾多,但是今日頭條的老年版(今日頭條大字模式)卻適配的非常好,進(jìn)入個(gè)人中心,把老人不常用的功能收攏起來(lái),給人感覺(jué)就沒(méi)有過(guò)多的冗余元素,把每個(gè)模塊的字號(hào)與間距都做了適當(dāng)?shù)恼{(diào)整,整體非常易于閱讀。首先在圖標(biāo)顏色上,調(diào)整成對(duì)比度強(qiáng)的顏色,同時(shí)今日頭條的老年版了解老人喜歡熱鬧與分享的心理,將頭條分享做的更加突出,便于老人方便的把喜歡的資訊轉(zhuǎn)發(fā)到“姑舅一家親”中。1、首先在圖標(biāo)顏色上,調(diào)整成對(duì)比度強(qiáng)的顏色,增強(qiáng)識(shí)別度。

2、圖形化圖標(biāo)改成文字按紐,單一的圖標(biāo),因?yàn)檎J(rèn)知方面的差異,老年入無(wú)法理解。改用文字形式方便老年人理解涵意。

3、在交互方面的調(diào)整,比如暫停、全屏的調(diào)整外置,更加方便操作。

4、信息布局適應(yīng)調(diào)整,重點(diǎn)需求突出,優(yōu)化不常用入口。圖標(biāo)與文字相結(jié)合強(qiáng)化提示。

5、字體變大的同時(shí),行間距離也做了想應(yīng)的調(diào)整。


綜合來(lái)說(shuō)今日頭條的老年版的適老化是非常成功的,不論從辨識(shí)度,易學(xué),易操作上,都針對(duì)老年群體做了專(zhuān)門(mén)的優(yōu)化 ,這樣的產(chǎn)品才是更適合老人使用的。而不像某些產(chǎn)品的只是單純的大、大、大而已。




寫(xiě)在最后

其實(shí)通過(guò)總結(jié)經(jīng)驗(yàn) ,結(jié)合案例來(lái)看,做適老化不只是將一個(gè)產(chǎn)品的字體放大了,而是根據(jù)老人的生理與心里特性將APP重新設(shè)計(jì)了一番,做一款更適合老年人使用的產(chǎn)品,讓老人更加容易的學(xué)習(xí)并使用。


互聯(lián)網(wǎng)產(chǎn)品的適老化之路道阻且長(zhǎng),做適老化可能會(huì)影響企業(yè)的利益,也可能會(huì)增加產(chǎn)品的維護(hù)成本,受制于某些原因,推動(dòng)解決老年人面對(duì)智能技術(shù)的問(wèn)題解決也是重中之中。但是設(shè)計(jì)師也需要運(yùn)用自己的專(zhuān)業(yè)性,來(lái)幫助目標(biāo)人群融入數(shù)字化的生活中去。

因?yàn)樵诓痪玫膶?lái),我們也會(huì)變成這個(gè)群體,當(dāng)我們面對(duì)這些束手無(wú)策時(shí),那時(shí)的設(shè)計(jì)又會(huì)是如何適老的呢?適老化設(shè)計(jì)是適合所有人的設(shè)計(jì),所有的設(shè)計(jì)師都應(yīng)該密切關(guān)注。我們也應(yīng)該讓老人群體更好的體驗(yàn)互聯(lián)網(wǎng)帶來(lái)的便捷,享受中國(guó)科技騰飛所帶來(lái)的福利,這也是我門(mén)后一代人應(yīng)盡的責(zé)任。


文章來(lái)源:站酷   作者:楓楓楓楓鋒 

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

免責(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 )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



分享本文至:

日歷

鏈接

個(gè)人資料

存檔