iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
1
自我挑戰組

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

# UI / UX 設計白皮書 / Material Design 導讀_Day26 Platform guidance 平台指導

  • 分享至 

  • twitterImage
  •  

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

今天我們進入到 Material Design 中 Platform guidance 平台指導的章節,由於內容涵蓋的範圍較多較廣,我們會分成五天來介紹,今天會先了解關於 Android 狀態欄、Android 指紋和 Android 觸覺這三個部分,讓我們繼續看下去吧。


Platform guidance 平台指導

Android bars / Android 狀態欄
Android fingerprint / Android 指紋
Android haptics / Android 觸覺
Android iconss / Android 圖示
Android navigating between apps / Android 在介面之間導覽
Android notifications / Android 通知
Android permissions / Android 權限
Android settings / Android 設定
Android slices / Android 片段
Android split-screen / Android 子母畫面
Android swipe-to-refresh / Android 滑動刷新
Android text selection / Android 文字選擇工具欄
Android widget / Android 小工具
Cross-platform adaptation 跨平台適應

※ 請注意以下指南僅適用於 Android ※

Android bars / Android 狀態欄

在 Android 上狀態欄包含通知圖示和系統圖示。Android 預設狀態欄高度為:24dp。

本圖片截取自 Material Design。

而在 Android 導覽列則包含設備導覽操控元件,例如:返回、首頁、摘要。除此之外它還顯示 Android 2.3 或更早版本編寫的應用程式的選單,導覽列可以根據主題色系是暗色配色還是亮色配色顯示。

Android fingerprint / Android 指紋

指紋檢測可用於解鎖設備、登入及驗證購買。

指紋解鎖畫面解析:

  1. 標題:標題描述了正在執行的操作,標題不應該用於提示使用指紋。
  2. 用戶身份
  3. 輔助文字:輔助文字的功能是請求用戶使用指紋授權。要與 Android 設定保持一致,就可以更改輔助文字。
  4. 指紋圖示
  5. 指紋說明文字
  6. 操作

本圖片截取自 Material Design。

當用戶沒有看到指紋圖示時,用戶可以觸摸裝置感測器檢測指紋。傳達需要觸摸裝置感測器檢測指紋的訊息,請使用沒有圓形外框的指紋圖示,也不要傾斜或扭曲指紋圖示。指紋圖示應以標準系統圖示大小 64dp 顯示。

當在螢幕上顯示指紋圖示時,表示用戶可以觸摸螢幕(在每個裝置指示的位置)檢測指紋。指紋圖示影顯示於 64dp 圓圈內以標準系統圖標大小 36dp 顯示,可以自訂指紋圖示周圍圓圈的顏色,並挑選足夠的對比顏色。在色彩主題上,淺色背景上選用深色的圓圈顏色,而在深色背景上則相反。

界面設計上要求用戶觸摸感測器檢測指紋,在檢測錯誤時顯示錯誤圖示(可以同時使用狀態消息傳達)清楚的表達指紋無法被識別,並且請用戶再次嘗試。

在規範中定義了使用顏色顯示故障狀態或使用 Deep Orange 600(#F4511E)顏色來表現,失敗狀態應避免顯示精細的動畫轉場,而是讓用戶快速了解發生錯誤的狀態。在失敗狀態畫面提供取消指紋檢測的方式,並提供可以關閉檢測的元件。例如: 取消按鈕。

指紋不應該是唯一驗證用戶身分的方法,可以提供其他驗證方法,例如:

在使用指紋進行身份驗證之前,必須獲得用戶的同意,在應用程式設定提供打開或關閉指紋辨識的方式,讓用戶可以開啟設定選項使用指紋辨識登入或驗證購買。設定開啟指紋辨識後,每當需要指紋辨識時,畫面應該顯示對於當前操作進行 "指紋辨識身份驗證" 的需求。

本圖片截取自 Material Design - 指紋辨識畫面設計說明。

指紋辨識畫面排版間隔設定:

  • 畫面左右留白:24dp
  • 畫面頂端留白:24dp
  • 標題底部留白:8dp
  • 用戶資料底部留白:8dp
  • 輔助文字底部留白:48dp
  • 指紋圖示底部留白:16dp
  • 指示文字底部留白:24dp
  • 按鈕區塊高度:72dp

Android haptics / Android 觸覺

觸覺增強了互動並通過觸覺向用戶傳達訊息。觸覺是指通過觸摸介面元件傳遞給用戶的感覺,觸覺可以通過傳達和加強信息來增強整體用戶體驗,觸覺經常與聲音和視覺元素結合表現互動。

使用以下方式提供觸摸回饋:

  • 點選並單擊
  • 長按

觸覺通過以下方式提供注意提示:

  • 警報和提醒
  • 通知事項
  • 來電
  • 錯誤和成功狀態

觸覺與音頻和視頻

觸覺可以與其他聲音和及視覺元素配對,也可以單獨使用。例如: 當裝置關閉聲音時觸覺可能是唯一提供回饋的方式。觸覺與其他元素配對時,觸覺應該創造讓人愉悅的回饋感受。觸覺可以使用多種方式達成,一種方法是通過手持設備上常用的裝置振動,因此觸覺會受限於技術和設備。

本圖片截取自 Material Design。

觸覺應該謹慎使用,如果過度使用觸覺可能會引起用戶反感。只在用戶開啟觸覺功能的系統設定時才提供觸覺回饋。

使用觸覺功能時應注意下列項目:

  • 遵循系統模式: Android 觸覺回饋數設值
  • 關注用戶需求: 只在用戶尚未定義系統模式時使用,並限制新的觸覺和獨特的觸覺數量。
  • 整體設計: 選擇適合使用互動的模式、畫面區塊、環境模式。
  • 結合觸覺與聽覺: 觸覺技術傳達簡單的訊息,不傳達複雜的訊息。
  • 避免令人反感的觸覺: 使用簡單的觸覺模式,避免長時間的震動。
  • 可預測的使用模式: 以預期的方式提供用戶使用標準模式,用戶在操作時不會感到困惑。

今天我們了解到 Platform guidance 平台指導,Android 系統的狀態欄、指紋及觸覺設計指南,在狀態欄內應顯示的圖示及功能,還有區塊的建議尺寸及高度,在指紋辨識上可用於可用於解鎖設備、登入及驗證購買,指紋驗證上保障了用戶的資料安全及操作的便利性。在觸覺的部分增強了介面與用戶之間的互動關係,提供了更多的回饋並藉由回饋向用戶傳達訊息。

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

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


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

尚未有邦友留言

立即登入留言