iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
1
自我挑戰組

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

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

昨天我們了解到 Platform guidance 平台指導,Android 系統的圖示、介面導覽、通知,在圖示的章節中把圖示細分為四層元素,在每一層元素上依照準則去設計視覺效果及圖形遮色片。在介面導覽時用戶從一個應用程式因為任務而開啟另一個應用程式,在不同應用程式間建立連貫的操作體驗。通知簡短得傳達重要訊息,通過視覺顯示聲音或震動來通知用戶,透過通知類型分類用戶可以設定通知的開關及優先等級,在鎖定螢幕上顯示的通知需要注意到用戶的隱私,提供不同的樣式呈現,也可以再通知視窗中提供用戶常用的操作按鈕,提升用戶體驗。

今天我們進入到 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 permissions / Android 權限

權限請求應該簡單、透明且易於理解。

預設情況下 Android 應用程式各自具有權限,如果應用程式選擇使用 "標準" 的權限,系統會自動授予這些應用程式權限而無需用戶登入。對於超出標準權限範圍的權限需求,用戶必須明確授權。

權限分類為九組,用戶可以將各種權限群組後,對群組權限進行授權。例如:提供用戶查看、編輯和增加聯繫人的權限,將這些權限組合為一個聯絡人權限群組,群組化後的權限比單獨提出各個權限請求更為有效率。下列提供權限群組的九種分類及其描述:

  1. 日曆:管理日曆
  2. 相機:拍照和錄製影片
  3. 聯絡人:管理聯絡人
  4. 位置:裝置目前位置
  5. 麥克風:聲音錄製
  6. 電話:撥打通話和管理通話
  7. 人體感應器:心率和生理數據
  8. 簡訊:發送和查看訊息
  9. 儲存:瀏覽照片、媒體和文件

本圖片截取自 Material Design。

用戶的行動清楚地表明了自己的意圖,在對話框中通知用戶執行應用程式需要權限或授權許可。下列舉例用戶執行的操作:

  • 拍照
  • 選擇一個聯絡人
  • 撥打電話或發簡訊

詳細分析權限通知

  1. 權限群組圖示
  2. 應用程式名稱
  3. 提供 "不再詢問" 的複選框(如果用戶拒絕兩次授權,顯示此對話框)
  4. 多個對話框的項目
  5. 操作

權限策略取決於您請求的權限類型是否明確和重要,每種策略可以向用戶提供介紹權限的不同方法。當應用程式提出請求後,用戶仍不清楚應該提供什麼權限,可以提供情境教育幫助用戶決策。

關鍵權限應事先請求。
次要權限可以在區塊中請求。

詢問前先教育:如果您的應用程式提供 "入門指南",請使用它來解釋應用程式的功能以及需要的權限。

事先詢問:僅在首次啟動時要求關鍵和明確的權限。由於用戶需要傳遞訊息,所以應用程式需要請求傳遞訊息的權限,請求權限的前提是有道理的。

在對話框中詢問:等待用戶許可請求權限。當用戶想要使用應用程式內的功能時,更有可能允許權限。

情境教育:在對話框中解釋權限,有助於評估用戶的興趣並提高對權限的理解。

提供即時益助:在操作應用程式時提供即時的幫助(但需要請求權限),讓用戶對於允許權限感到合理。

只請求相關權限:當一項功能需要多個權限時,僅要求需要的權限。

應用程式可能會在安裝後請求提供訊息或使用設備功能的權限,當用戶需要在應用程式中執行操作(例如:使用相機鏡頭)時,此時應用程式可能會提出請求。

應用程式安裝後,用戶可以隨時透過 " Android 設定 " 允許或拒絕任何應用程式的權限。在用戶拒絕權限時提供回饋。由於拒絕權限可能會阻止某些功能運作,因此每當用戶拒絕權限時,都應向用戶說明可能會發生的情況。

產生拒絕權限的狀態:

  • 權限請求被用戶拒絕
  • 對於用戶已經拒絕過的請求並且設定為 " 不再詢問 " 時,當下一次請求產生時會默默拒絕權限而不提出警告

為了確保需要許可的功能可以執行,應用程式應聲明需要許可並提供允許方式。如果拒絕了關鍵權限而導致應用程式無法執行,請說明為什麼必須允許權限,並提供一個按鈕可以打開 "設定",提供用戶允許關鍵權限。

Android settings / Android 設定

應用程式通過 "設定" 提供用戶調整所有設定。請勿使用 "選項" 或 "偏好" 之類的詞彙來表示設定。可以在介面中的側拉式選單放置 "設定" 選項。如果畫面中沒有導覽列表可以放置,則在其他選項內放置 "設定" 選項。

設定的規劃應有條不紊、可預測,包含可管理的選項數量。用戶應該能夠快速查看重要設定或經常使用的設定值。

如果設定項目很多,請優先考慮用戶最有興趣的設定,不太重要的設定,可以分組並移動到自己的畫面。

設定應該:

  • 儲存用戶的選項
  • 很少被使用
  • 可供所有用戶使用
  • 提供少數用戶使用來滿足他們的需求

設定不應該:

  • 被經常使用(將其移至工具欄)
  • 包含有關應用程式的資訊,例如:版本編號或權限資訊(將它們移至 "幫助" 畫面)
  • 管理用戶帳號(在應用程式的主流程中顯示這些帳號,例如:側拉式選單)

本圖片截取自 Material Design。

每個設定的預設值應該:

  • 代表大多數用戶會選擇的預設設定
  • 對用戶保持中立避免風險
  • 使用少量的電池或行動網路
  • 僅在緊急時中斷用戶

優先顯示最重要或最常用的設定。使用分隔線將相關設定擺放在一起,不要在每個單獨的設定之間加入分隔線。

章節標題(可選則是否加入),設定分組可以加入章節標題,章節標題應該是特定的項目名稱,避免使用"其他"或"各種"模棱兩可的名稱。

當設定超過 15 種以上時,將設定分門別類,類似的設定放置於分組織下的子項目,並使用與標題一致的用詞。

使簡短而有意義的標題,如果標題文字過長文字可以換行。標題應該:

  • 將專有名詞和標題的第一個單字大寫
  • 從最重要的文字開始
  • 避免使用"不要"或"從不"之類的否定用詞,應該使用"阻止"之類的中性詞語
  • 使用"通知"的非個性化標題,而不是"通知我"(例外:如果需要使用戶稱謂說明設定,請使用第二個人稱"您"而不是第一個人"我")

標題不應該:

  • 使用通用術語,例如:設定、更改、編輯、修改、管理、使用、選擇或挑選
  • 重複標題中的用詞
  • 使用技術術語,除非您的目標用戶廣泛理解您使用的術語

所有標題與輔助文字應靠左對齊,表現簡單且統一的外觀。在說明設定時可以選擇是否要加入輔助文字,輔助文字可幫助用戶了解設定目前的狀態,如果標題能夠說明設定,就不需要增加輔助文字。

需要準確描述的開關和複選框設定時,可能會在標題下增加單行描述,使用動詞進行描述,當開關的描述內容較長時可能會顯示在另一個分頁中。對於非開關模式的其他設定,只顯示設定目前狀態的輔助文字。

說明應該:

  • 傳達設定狀態或狀態的訊息
  • 說明開啟設定後會發生什麼

設定選擇模式分為下列幾種方式。

單選設定:使用單選模式進行選擇或取消選擇的設定。

多項選擇設定:提供一組含有多種選項的設定,用戶只能選擇一個項目設定。

拉霸設定:使用拉霸模式進行設定,並且沿著系統範圍拖移。

日期和時間設定:需要請求用戶提供日期或時間的設定。

列表畫面設定:項目列表的設定或設定類別。設定標題項目的名稱,並且使用輔助文字表現狀態,狀態透過圖示增強含意,與同一個列表設定相關的操作都與顯示在同一列中,而不是顯示在列表區塊。

總開關設定:需要關閉整個設定類別時,請使用總開關設計。
在設定畫面上將總開關放置於畫面最上方,當總開關被關閉時,列表設定的所有子項目被隱藏,只顯示群組列表的項目標題。如果用戶的操作需求在被關閉的項目中,則該操作無法實行。也可以在子項目中提供開關讓用戶選擇只開啟或關閉某些功能,這類設定用於用戶對設定的需求較低的應用程式。

單獨的開關設定:對於需要提供詳細說明的各別設定項目,請使用單獨的開關,開關出現在詳細說明的畫面中,用戶閱讀文字說明後可以選擇是否開啟或關閉開關。輔助文字出現在設定的標題下方,表示目前用戶的選擇。

相依性設定:主要依據其他設定值的設定。相依性的設定顯示在目前操作項目的設定下方。相依性設定如果可以顯示狀態,則應顯示 "禁用"。如果無法清楚表現狀態可以在狀態中增加簡短的說明。如果一個設定有三個或三個以上的相關設定,則帶有主開關的子項目會減少關閉項目引起的應用程式錯誤,並且可以提供用戶更細節的開關設定。

寫作風格應該直接了當,易於理解(例如:"觸摸震動",不應該寫"使用觸覺反饋")。透過下拉式選單或在螢幕上單獨調整的設定,請在標題下方的文字中傳達的當前狀態。

在鎖定螢幕上控制是否顯示所有通知內容,或只顯示不敏感內容還是不顯示通知。

在文字撰寫時如果沒有更好的選擇,請使用單字的首字母縮寫。傳達設定存在於用戶不熟悉的使用方式和原因(例如:"NFC 手機觸摸其他裝置時允許傳送資料",不應該寫"NFC 靠近周圍信讀取和交換標題")。

Android slices / Android 片段

組件可以顯示搜尋結果的一小部分,可以制定的搜尋內容稱為片段,片段顯示對於組件的操作和豐富的內容,片段顯示在 Google 搜尋應用程式的搜尋結果中,可以顯示各種內容,例如:文字、圖片和動作。

專心:片段聚焦於一個任務或一組相關任務,顯示最重要的訊息。
有關:片段表現應用程式中的內容或功能。
相關的:片段只提供完成任務所需的訊息和操控元件。

本圖片截取自 Material Design。

片段導覽:片段可導覽到應用程式中的特定功能或內容。

完成片段任務:片段提供用戶完成任務連結,例如:顯示開關或拉霸之類的操控元件。

發現片段內容:片段會提醒用戶過去使用應用程式的內容和功能。例如:影片。

何時使用:Android’s Presenter 根據內容區塊確定要顯示的片段類型,


片段包含標題和一行或多行互動式內容。各種元件組合在一起以建立片段,例如:列表、網格或圖片。

詳細分析片段

  1. 標題-片段的標題
  2. 副標題-補充文字
  3. 標題動作-操作
  4. 圖片(可選擇增加)- 與內容相關的圖片
  5. 項目標題-項目說明
  6. 項目副標題-補充項目說明
  7. 項目動作-項目的操作

內容:使每個片段內容與用戶相關,不要在一個片段中同時顯示多種目的,而是為每個目的建立單獨的片段。也不要將不相關的文字或內容放在片段中。

動作:片段顯示與任務相關的一組動作或操作,不要顯示沒有相關的操作選項。

組件類型:片段可以根據用法和顯示方式以不同大小顯示。

大片段:大片段由標題和一個或多個內容項目(具有相關的操作)組成。

小片段:小片段的大小尺寸等於大片段的標題尺寸。標題區域(用於大片段副標題)可以改為摘要。

片段行為

捲動:片段可能會有超出畫面的內容,通過點擊 "更多內容" 按鈕瀏覽更多內容。

敏感動作:對於敏感任務或個人任務,片段可以在用戶界面中執行連結操作,但不應在片段中進行確認,片段應該提供前往應用程式進行確認的連結。

放置:片段顯示 Android 中搜尋結果的一部分,片段的位置由搜尋排名的演算法決定。

搜尋建議:搜尋可以在搜尋中包含一個建議查詢片段。

片段顯示預設的系統 UI 樣式,使用強調色突出顯示重要訊息或加強品牌,不要一次強調太多項目或一次使用太多顏色突顯多種元素,會讓畫面顯得雜亂沒有一致性。

片段設計說明

頁眉 Header

本圖片截取自 Material Design。

段落 Row

本圖片截取自 Material Design。

格線 Grid

本圖片截取自 Material Design。

圖片 Image

本圖片截取自 Material Design。

拉霸 Slider

本圖片截取自 Material Design。

進度條 Progress Bar

本圖片截取自 Material Design。

今天我們了解到 Platform guidance 平台指導,在應用程式中許多的操作需要權限許可,透過入門指南說明權限、或是事先詢問、在消息通知中顯示請求、透過情境教育說明向用戶請求,可以向用戶說明每種權限的需求用途,用戶可以選擇同意或是拒絕權限請求,用戶拒絕權限時可能會導致某些操作無法執行,都應向用戶說明可能會發生的情況並且提供設定讓用戶允許權限。

應用程式在主選單項目內提供用戶調整 "設定" ,在設定中優先顯示最重要或最常用的設定,可以將相關的設定群組化,設定可以多元化的顯示為單選、多選、拉霸、開關、日期時間、列表畫面、主開關、相依性設定等等,也可以設定在鎖定螢幕上顯示的內容,使用簡短易懂的文字傳達設定說明,提供用戶快速查看或是修改設定項目。

畫面中的片段可以根據內容區塊確定要顯示的片段類型,提供用戶導覽、任務連結、功能及內容,不要再同一個片段中表達多種目的,片段可以根據用法和顯示方式以不同大小顯示,表現出介面中各種應用的局部片段,拿捏好片段展現的方式,可以更快速提供用戶部分訊息。

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

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


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

尚未有邦友留言

立即登入留言