老齡化產品設計(二):老年人產品的顏色、圖像、排版、交互、導航設計

2020-12-06 人人都是產品經理

老年人群體和年輕人群體有很多的不同,在產品設計上也需要有很多區別。之前有分析過老年人的用戶群體特徵,這篇文章我們來看看如何針對老年人群體做產品設計。

年輕人焦慮時間飛逝,搬不完的磚、加不完的班、學不完的Knowledge、趕不完的Deadline。聊微信刷微博玩抖音看知乎,在碎片化的時間中刷微博。

老年人感嘆生活平淡,親人遠隔萬裡相聚難,網絡繁華複雜騙子多,下象棋打麻將看電視廣場舞,被邊緣化的網絡下尋開心。

生活太苦太乏味,每個人都要含塊糖。

筆者在《老齡化產品設計(一):老人的身體機能有哪些改變》一文分析了老年人視覺、聽覺、觸覺等感官特徵的一些變化,總結了注意、記憶、思維等認知特徵的一些特點。本文與大家一起探討下老齡化產品設計有哪些關注的點。

文章較長,先把總結的設計關注點置前:

重要元素避免使用藍色保證良好的顏色對比度使用容易閱讀的字體家族文字越大越好字高5.62mm左右讓用戶自行調節字號大小使用簡單有意義的圖標提供圖形的名稱信息架構儘量不改變多任務時要聚焦當前任務手勢動作簡單觸摸目標尺寸間距足夠大互動時間要長

一、顏色Color

隨著年齡的增長,角膜、瞳孔括約肌、晶狀體和視網膜等生理調節力下降,影響到視覺的靈敏度、明暗、空間、顏色和信息加工的變化。

1. 重要元素避免使用藍色

界面設計上可以使用老年人喜愛的中性色,避免顏色純度、明度過高造成對眼睛的刺激;可以使用對比強烈的互補色突出重要元素的信息內容和功能位置。

但由於晶狀體變黃變渾濁,會選擇性的吸收藍光,從而導致老年人對藍色的鑑別能力比對紅、綠色鑑別能力下降更明顯,所以界面上的重要元素要避免使用藍色。

2. 保證良好的顏色對比度

Human Interface Guidelines: Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.

良好的對比度一直是Material Design 和 Human Interface Guidelines 中著重強調的。在WCAG 2.0 (Web Content Accessibility Guideline,Web內容無障礙指南)中給出了顏色對比度的指導意見:

對比度(AA 級):文本的視覺呈現以及文本圖像至少要有 4.5:1 的對比度;大號文本(字重為 Bold 時大於 18px,字重為 Regular 時大於 24px )以及大文本圖像至少有 3:1 的對比度;對比度(AAA 級):文本視覺呈現以及文本圖像至少有 7:1 的對比度;大號文本(字重為 Bold 時大於 18px,字重為 Regular 時大於 24px )以及大文本圖像至少有 4.5:1 的對比度。

有一些在線工具可以幫助我們測試對比度是否滿足 WCAG 2.0 AA 的「色彩無障礙設計」標準,比如WebAIM`s Color Contrast Checker、Contrast-ratio、EightShapes Contrast Grid、Color Tool等網站。

二、排版Typography

為了給用戶帶來良好的閱讀體驗,需要考慮設計的易讀性。易讀性是指人們能否看見、區分、認出你所提供的文本裡的文字。

1. 使用容易閱讀的字體家族

據不完全統計,英文字體已有幾萬種,中文字體也有幾千種,但大部分都是垃圾。

英文主要有襯線字體 Serif 和無襯線字體 Sans-Serif 兩種類型,中文主要有宋體、黑體、楷體等,若用西方的字體分類,宋體可以列為襯線字體,黑體為無襯線字體,楷體介於兩者之間。

在屏幕界面上,無襯線字體看起來比較醒目,輪廓清晰,因此可以避免視覺疲勞。所以iOS和Android等系統的默認字體都是無襯線字體,如San Francisco、Robot、微軟雅黑、思源黑體等。

但是也有觀點認為:襯線字體可以增加人們閱讀時的視覺參考,在文章篇幅較長的情況下,能夠提高正文閱讀肯辨認的連續性,則襯線體的可讀性更強。

同時也可以提高字重,加粗文字使輪廓更加清晰。一般情況下我們使用regular肯medium兩種字重,對於老齡化產品,可以再提高一個等級。

2. 文字越大越好字高5.62mm左右

在Ant Design設計語言中有講到確認最小字體的方法,通過肉眼到物體之間的距離、物體的高度以及人的最小可接受視角,構成一個三角函數關係。

ANSI/HFS 認為:對於普通用戶,最小視角0.3度時的閱讀效率最好,一般眼睛距離電腦屏幕為50cm,根據三角函數公式能算出合適的字高。對於不同PPI的屏幕可以通過兩輪換算(cm到inch,inch到pixel)得出最小字號。

有一個叫」Visual Angle Calculator」的網站有個程序可以直接計算,建議使用。

老人視覺能力下降,有學者研究表明老人偏好的最小可接受視角是0.75度,而視距是43cm,換算之後相當於字高5.62mm。而在JIS規格中的《不同年齡最小可讀文字大小》也有記載,希望可供參考,如下圖:

3. 讓用戶自行調節字號大小

對於一個系統來說標準方案並不一定能夠滿足所有人,老人隨年齡增加,視力障礙愈發嚴重,讓用戶自行調節字號大小,可以滿足不同時期的需求,如iOS系統中總共有12種尺寸可以選擇。

三、圖像Iconography

這裡的圖像主要代指圖標,在GUI設計中,圖標的基本功能是迅速傳遞信息,同時也可以區分內容層次,增加界面的韻律。

1. 使用簡單有意義的圖標

Material Design:System icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics.

Human Interface Guidelines: Create recognizable, highly-simplified designs. Too many detials can make an icon confusing or unreadable. Strive for a simple, universal design that most people will recognize quickly and won`t find offensive.

Ant Design: 圖標應該是簡單的圖形語言以及高辨識度。清晰、直觀的圖標更能明確指代含義便於識別記憶。

各大廠的設計規範都指明圖標設計需要簡單友好和高辨識度。邏輯推理和概括抽象等思維能力越老越喪失,在圖標上的設計更應該注意,符合自然感知,能準確的表達含義,避免過度抽象。

2. 提供圖形的名稱

是否給圖標加上標籤文字一直是個爭論不休的話題。有人認為「只要對圖標的熟悉程度夠高,圖標的含義便會烙印在用戶的記憶中」,而在《About Face》中也說到「使用圖標能提高中間級用戶的使用效率;而使用文字,對於新手用戶更適合。」在網頁端可以有滑鼠懸浮到圖標上再顯示標籤文字的解決方法,而在手機端就尷尬了。

對於老齡用戶,或許有部分用戶是沒接觸過網際網路產品的,或許有部分用戶是從門戶網站就開始接入網際網路的,20年變遷逐漸變老。但我們不能對用戶的知識儲備做任何假定,還是儘量提供標籤文字為好。

四、導航Navigation

1. 信息架構儘量不改變

搖一搖、朋友圈、公眾號、微信支付、看一看、小程序,無論添加了多少新功能,微信能夠始終保持底部四個標籤欄,這樣的產品不多的。

可見設計產品初期,好的信息架構是多重要。

用戶在產品上完成一個任務,必然會從一個地方探索著到達目的地,就像去超市購物,一個好的導航系統能夠指引我們很快的找到想買的商品,則在產品中清晰的UI導航是非常重要。

固定不變的導航系統能讓用戶記憶路徑,進入超市知道去哪裡買洗漱用品,去哪裡買水果,不看導航指引牌就可以徑直走過去。固定的UI導航系統可以使用戶依靠肌肉記憶使用產品,效率更高。長期程序性記憶不會隨年齡增加而衰減,但短期的情景記憶會損失,這就意味著老人學習新概念的能力較差,更改了導航系統,可能又得花很大的成本去學習。

五、交互Interaction

人和系統如何「對話」,簡單直接是有效法則。在老齡化產品設計時,還是有很多交互方面的注意點。

1. 多任務時要聚焦當前任務

隨著年齡增長,工作記憶有所衰退,記一件事情需要更長的時間,存儲新的記憶比年輕人差。在生活中老年人經常會用紙筆記錄來輔助記憶,我爺爺就列印了一張待辦事項的紙,每天在紙上劃掉吃過的藥。所以在產品設計中要注意的是,需要逐步介紹產品功能,防止認知過載;由於記憶差,則儘量避免跨屏任務;在長任務中,給出明確的反饋和最終目標的提醒。

2. 手勢動作簡單

從電腦端「單擊、雙擊、拖拽」等,到如今手機端「單擊、長按、3D touch、雙指捏合」等交互動作,用戶可以操作的手勢動作越來越多。隨著年齡增大,人們的運動控制能力退化,對於老年人固然不會進行比較複雜的手勢動作,還是以「點擊、滑動」為主。

綜上,本文從顏色、排版、圖像、導航、交互等界面設計的基礎內容,對老齡化產品設計提供了幾點建議,皆在提高產品使用的可用性和易用性,滿足老年人的使用需求,體現出科技產品對老年人的關懷,能夠繼續享受數字科技生活。

本文由 @舟航 原創發布於人人都是產品經理。未經許可,禁止轉載

題圖來自 Unsplash ,基於 CC0 協議

相關焦點

  • 從互動設計到產品設計到服務設計,變遷是怎麼發生的?
    2009-2018這十年間,我們經歷了互動設計熱、產品設計熱以及近兩年的服務設計熱。這些變遷背後的原因是什麼?一、互動設計1. 互動設計的時代特點互動設計在國內的興起應該要從十年前說起,也就是2009年。其實互動設計並不是什麼新詞,在國外已經存在了幾十年了。為什麼2009年突然火了呢?因為移動網際網路出現了。
  • 在設計過程中,有哪些不容忽視的互動設計要點?
    當人們開始觀察外界物體時,視覺系統將剌激以圖像的方式傳遞到大腦,並通過大腦的視覺皮層區域控制人眼的運動來表達對圖像的興趣,這一過程被稱為視覺感知過程。在人機互動界面中我們希望能產生儘可能多的深度信息,因為在人機互動界面中圖像是眼睛和大腦的注意焦點。如果破壞了深度信息,也就喪失了真實感。在界面的設計過程中,亮度是一個決定視覺感知效果的因素,因此對象的明暗變化成為判斷對象遠近的依據。此外,利用光與影的變化、內容的重疊與幹涉以及細節與空中透視產生的立體效果。
  • 對啊網設計學院:用戶體驗——設計的一致性
    這意味著該產品以相同或相似的方式與用戶進行交流,無論交流的點或渠道如何。就用戶體驗而言,這意味著相似的元素在外觀和功能上都相似,從而減輕了認知負擔,並使交互更加流暢和直觀。考慮到當今人們信息過多的事實,他們傾向於選擇易於理解和交互的產品。此外,一致性在產品外觀和工作方式上為和諧的感覺奠定了可靠的基礎。和諧永遠是我們擁有的任何經驗中不可或缺的一部分。
  • iOS 12 人機互動指南(六):圖標圖像(Icons and Images)
    嘗試對每個圖像進行壓縮設置,以找到產生可接受結果的最佳值。(5)為圖像和圖標提供替代文本標籤替代文字標籤在屏幕上不可見,但它們讓VoiceOver可聽見地描述屏幕上的內容,使視力障礙人士更容易導航。二、應用圖標每個應用都需要一個精美、令人印象深刻的圖標,能在蘋果商店和主屏幕奪人眼球。
  • 關於交互Demo設計的一些建議
    為方便產品經理、設計師、開發及項目相關人員能夠看到直觀的效果,進行更有效的溝通;提供直觀的產品設想,說明用戶將如何與產品進行交互,在互動設計的過程中一定會產出各種各樣的產出物,如流程圖、思維圖、紙上的草稿、甚至高保真演示稿。這裡簡單分享下自己在項目過程中的交互Demo設計的一些心得。
  • 2020年設計趨勢最全攻略
    這些風格是值得一提的,因為它們總是最新的,遵循它們所規定的規則幾乎不可能在設計中犯錯誤。總的來說,這些運動強調排版,無襯線字體 ( Helvetica 是1957年在包浩斯的舞臺上創造的) 幾何形狀,簡單的線條,體積和顏色。
  • 後臺產品經理的原型設計規範
    後臺產品的框架結構相當於它骨架,對於原型設計來說是同樣的原理,當框架確定之後再填充完善裡面的功能模塊就會輕鬆很多了。 ▲圖片來自網絡 上圖中的1為一級導航區域、2為功能區域、3為二三級導航區域
  • 如何讓你的平面設計作品高大上之 排版的運用
    你以為排版只是左對齊、右對齊、左右對齊、居中對齊那麼簡單嗎?你以為的知識你以為的,今天就是帶著大家遠離排版誤區,了解排版在平面設計中的運用。所有的平面設計都離不開版式,包括網頁設計、互動設計和UI設計。但是排版是一門很深也很難掌握的學問,有簡簡單單對齊就很好看的,也有看似亂七八糟但不明覺厲的。
  • 三種界面交互類型,四種隱喻設計方法
    本文將常見的隱喻元素按照視覺、聽覺、觸覺三種界面交互類型分類,並整理了四種隱喻設計方法,以供大家參考。一. 界面隱喻的類型1. 視覺隱喻 – 靜態1.1 文字隱喻界面中常見的文字隱喻可以分為兩種,一種是功能命名類語言,另一種是產品定義類語言。常見的功能命名類語言有:「解鎖、導航、登錄」等等。
  • 趕快收藏,2020年設計趨勢總結!
    一個好的故事可以幫助用戶更輕鬆地了解產品。為了講述一個故事,我們可以使用一個特別創建的角色,將這個角色賦予他個性,我們創建一個故事和一個衝突,最終由我們的產品(UI設計)解決。 這是產品設計中講故事的基礎。講故事在UI和UX中都使用,並且基於相同的原理,但實現方式有所不同。
  • 以在線協作文檔為例的情境交互體驗淺析與設計實例 - 人人都是產品...
    當一個產品能夠反映並且能夠增強用戶對自己的認同感時,用戶會覺得這個產品很酷,對他們而言很重要;而當一個產品與用戶自己的身份元素相違背時,產品就會失去用戶的信任。所以為了可以設計出能夠觸動用戶核心動機的用戶體驗,了解這些身份元素是非常有必要的。
  • 概念設計和細節設計為什麼在產品設計中都很重要?
    在產品設計開發過程中,工業設計公司的設計團隊可以進行概念設計和詳細設計。了解兩者之間的差異及其在產品設計中的作用對於成功實現任何產品概念至關重要。為什麼兩者在產品設計中都很重要呢?我們一起來看看。它提供了對所提議產品的描述,描述了它應該做什麼,應該如何使用,以及從幫助用戶理解的一組集成思想和概念中看起來是什麼樣子。它是交互,體驗,流程和策略的設計。它是實現人員,知識,產品,服務,流程和盈利能力的願景和無限可能性的關鍵。每個人都在設計師的圖紙上顯示不同的顏色。它基於更抽象的思維,直到您準備好創建詳細設計。2.什麼是細節設計?
  • 東莞平面設計全科班學費_平面設計培訓價格_東莞市石碣振華電腦...
    課程介紹:平面設計課程包含PS、Ai、CDR、品牌電商設計、品牌logo設計、品牌物料、Dw、網頁設計、電商設計、Icon、Axure交互等學習內容:PS1.介紹軟體(應用領域、優勢)/軟體界面與設置/視圖縮放與移動/選擇工具/屏幕顯示模式/包裝效果圖/選區自由變換/保存格式/
  • 產品CMF設計 | 100例優秀產品配色設計
    這種情況下,CMF就獨立出來成為一個專門的研究領域,其中顏色(Color)佔有核心和主導地位。而針對不同行業的產品外觀設計,也有著不同的配色設計要求。 設備產品設計過程中的色彩搭配既要體現顏色對比又要滿足協調統一、顏色有視覺的節奏與韻律感,體現產品的穩定和安全等。
  • 心理學+產品設計,會碰撞出很多有趣的方法論
    心理學+,也是一樣一樣的道理,將心理學與網際網路產品設計相結合,也會碰撞出很多有趣的方法論。一. 反饋反饋即用戶在與人、動物、程序等進行交互時得到的響應。反饋的精準性交互的本質是為了得到滿意的響應結果,反饋也是如此,反饋的精準性是反饋體驗非常重要的因素,假想我在淘寶搜索「衣櫃 北歐」時,搜索結果都是歐式各種大花紋裝飾或是紅木顏色的衣櫃,那會很快讓用戶失去耐心的,而實際情況淘寶的這一點確實表現的也不好,見下圖。
  • 深圳UI設計師培訓班課程包上崗含大專學歷學費_UI設計培訓價格...
    /智能濾鏡9.濾鏡(下)扭曲,渲染10.圖層樣式內陰影,斜面與浮雕,顏色,漸變,圖案疊加11.UI介紹/網頁設計基礎/網頁banner的設計/網頁切片工具12.對齊與分布//網頁設計製作13.動畫製作(把靜態網頁稍加動畫)/軟體互導性(二)ID模塊:1.介紹軟體/新建畫布/頁面認識/軟體優化
  • 關於徵集積極應對人口老齡化優秀研究成果的啟事
    (四)稿件格式按照本次徵集活動排版要求(附件2)排版三、相關說明(一)徵集時間:即日起-10月31日。(二)提交方式:電子郵件Word或WPS文稿,投稿郵箱:business@xieli.org.cn。郵件題目請表明:地區(省-市-縣)+第一作者姓名+論文題目。
  • 5個層次分析:產品設計中的「借鑑」思想如何運用?
    在工作中應用到的數據統計工具有:金牌令箭、顯微鏡、CNZZ統計等,通過這些統計工具可以方便的進行數據的收集,同時互動設計師也要與前端保持溝通,了解數據統計的方法,適時添加統計的維度,請前端同學幫忙埋統計代碼。以上是人人都是產品經理中一篇文章寫到的,關於設計師如何進行數據分析。那麼,如何通過競品的數據分析從而得出結論應用到自己產品設計中去?
  • 不斷增強的科技創新硬實力 這些產品設計獎拿到手軟
    作為美國主持的唯一一項世界性工業設計大獎,每年由美國工業設計師協會從特定的工業領域選出頂級的產品設計,授予工業設計獎(IDEA),並公布於當期的商業周刊雜誌。 你可能發現了近幾年有越來越多的廠商,會在新品海報比較顯眼的位置,印上相關的獎項,這也是對產品設計的認可。隨著不斷增強的科技創新硬實力,這些產品都獲得了知名設計大獎的青睞。
  • 產品設計專業推薦院校-美國羅德島設計學院
    某些作品的其他角度或細節鏡頭可以作為單個圖像或視頻上傳來提交,也可以上傳包括最多三張圖像的複合圖像。編輯是策劃作品集的重要組成部分。您可能需要設計創造性的解決方案,以在提交準則的範圍內最好地展示您的工作。我們推薦的文件格式為:jpeg,png,gif,mp4和mov。這些格式與SlideRoom最兼容。不建議使用Google雲端硬碟或壓縮文件來共享您的作品。