iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
1
自我挑戰組

UI / UX 設計白皮書 - Material Design 導讀系列 第 25

UI / UX 設計白皮書 / Material Design 導讀_Day25 Usability 易用性

  • 分享至 

  • xImage
  •  

昨天我們了解到 Usability 易用性中輔助功能,無障礙設計提供更多幫助,通過螢幕閱讀器、放大工具和助聽器等設備幫助用戶用戶可以在 "觸摸瀏覽" 和 "線性瀏覽" 兩種模式之間切換,輔助功能透過改善問題讓用戶了解和使用產品並提高產品可用性。

今天讓我們繼續完成 Usability 易用性章節的雙向性,讓我們繼續看下去吧。


Usability 易用性

Accessibility 輔助功能
Bidirectionalit 雙向性

Bidirectionalit 雙向性

從左到右和從右到左語言文字撰寫之間的主要區別是顯示內容的方向:

  • left-to-right (LTR) 語言從左到右顯示內容
  • right-to-left (RTL) 語言從右到左顯示內容

從右向左讀取的語言(例如: 阿拉伯語和希伯來語)的介面排版時應保持內容易於理解。右到左顯示的內容還會影響圖示和圖片的顯示方向,尤其是描述一系列事件的圖示和圖片。

對於左到右語言,表現時間的方向描述為從左到右,對於右到左語言,表現時間的方向描述為從右到左。

本圖片截取自 Material Design。

當介面從左到右顯示改為右到左顯示時(反之亦然),通常稱為 mirroring 鏡射。右到左顯示佈局是左到右顯示的排版鏡射,顯示方向會影響排版、文字和圖形。當介面顯示方向從更改時,下列項目不會被鏡射:

  • 號碼
  • 未翻譯的文字(即使是句子的一部分)

文字依照語言保持正確的顯示方向。例如: 任何左到右顯示單詞將繼續以左到右格式顯示,即使介面的其餘部分為右到左顯示。

鏡射介面時會發生以下更變:

  • 文字段落圖示顯示在段落的另一邊
  • 導覽按鈕以相反的順序顯示
  • 反映方向的圖示(如箭頭)被鏡射
  • 文字(如果已翻譯為右到左語言)則向右對齊

以下這些項目不會鏡射:

  • 無法傳達方向的圖示,例如: 相機
  • 數字,例如: 時鐘上的數字和電話號碼
  • 圖表

本圖片截取自 Material Design。

左圖為從左到右顯示畫面,右圖為從右到左顯示,可以看到畫面,標題、圖示和介面元素都從右到左顯示。

從右到左顯示的介面元件

  1. 返回按鈕指向右側
  2. 文字靠右對齊
  3. 主按鈕和輔助按鈕配合閱讀方向鏡射元件
  4. 複選框出現在右側而文字出現在複選框左側
  5. 沒有方向性的圖示不會更改
  6. 單位的位置會因語言而不同
  7. 進度條顯示方向會與讀取內容相同

當畫面中的元件被鏡射支援從右到左排列時,任何與時間相關的事物都應從右向左移動。鏡射圖表最重要的改變是方向性圖示會進行反向指示。例如: 在從右到左排版中,下一步指向左側,返回則指向右側。

與拉霸功能一起出現的圖示會與畫面一同鏡射,例如: 音量圖示右側為調整音量的拉霸,在右到左顯示時,音量圖示會靠右排列而拉霸則顯示在音量標示左方。

有時同一個圖示會包含方向、形狀和時間。例如: Google 指南中的重複和返回按鈕同時具有方向性和圓形方向。在左到右排列中,它們在方向、形狀和時間都是相同的方向。但在右到左排列時,方向性還是圓形方向的圖示擇一顯示。

在圖示內包含文字顯示的圖示,在鏡射需要仔細檢查運用於不同語言的文字對齊方向,尤其圖示段落末端有零散文句的方向。

鏡射

本圖片截取自 Material Design - When not to mirror。

需要表現時間可以使用帶有箭頭的圖示,不要使用圓形圖示,因為圓形圖示沒有辦法表現方向。對於從右到左顯示的語言,時鐘仍然沿順時針方向旋轉。不應鏡像時鐘圖示或圓形順時針箭頭的刷新圖示或進度指示器。

還有一些圖示不需要進行鏡射,比如本來就是對稱圖形的圖示、某些是固定方向的圖示 ( 搜索圖示 )、或是常用右手習慣的圖示 ( 咖啡杯 )。搜索圖示通常握把會放置於右下角,因為大多數用戶是慣用右手的。而右到左編寫的國家或地區中的大多數用戶也是慣用右手,因此不需鏡射這類圖示。

要注意的是大多數國家不鏡射帶有斜槓 ( 顯示為禁止 ) 的標示,按照原始樣式使用圖示。例如: 靜音、靜止觸摸。

任何表示時間流逝的事物都應該鏡射。但要注意不要鏡射媒體播放按鈕和媒體播放進度指示器,因為它們是指正在播放的進度指示,而不是時間的方向。

不同國家必須使用在地化的文字及數字的圖示。例如: 孟加拉語、馬拉地語、尼泊爾語和一些阿拉伯語言環境中使用不同形式的數字。

當用戶在編輯從左到右顯示的文件段落時,可能會在段落中加入不同國家的語言文字或是從右到左顯示的文字段落,而右到左顯示的文件編輯器中應包含右到左顯示的工具欄按鈕。

目前支援雙向性的平台有 Android 、 iOS 、 Web 、 Flutter,基本上是全數支援,所以設計用於多語言國家時,要注意排版方向性的用戶體驗。


今天我們了解到 Usability 易用性,需要根據不同國家顯示的語言方向進行排版,依照用戶的使用慣性排列出易於用戶操作的畫面,當產品支援多國語系時排版可能需要具備雙向性排列,版面設計上也需要注意不同語言可能會增加的文字大小及文字方向,因此需要預留區塊間隔,確保設計提供更多不同語言切換的空間。

明天讓我們繼續完成 Platform guidance 平台指導,每天一點一點的逐個擊破,找出那些藏在細節中的魔鬼,不要讓大魔王有機會可以捉弄我們,迎向更美好的介面設計吧(握拳)!

如果您喜歡這篇文章或是這篇文章有幫助到您,歡迎按讚鼓勵,我們明天見囉~


上一篇
UI / UX 設計白皮書 / Material Design 導讀_Day24 Usability 易用性
下一篇
# UI / UX 設計白皮書 / Material Design 導讀_Day26 Platform guidance 平台指導
系列文
UI / UX 設計白皮書 - Material Design 導讀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言