iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
1
自我挑戰組

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

UI / UX 設計白皮書 / Material Design 導讀_Day22 Machine learning 機器學習

昨天我們了解到 Machine learning 機器學習模式能提供用戶更完善的人機介面指南,在操作機器中達成最好的互動體驗,物體檢測中看似簡單的即時攝影操作,卻可以細分成多項的步驟, 並預先想好流程中可能會遇到的問題,在使用者無法完成操作時提供幫助,保持任務的進行,在找尋過程中提供用戶搜尋時間回饋,讓用戶了解搜尋在持續狀態,在結果出爐後也提供符合程度的排序,確保用戶能得到最符合的結果。

今天我們將繼續完成 Material Design 中 Machine learning 機器學習的物體檢測:靜態圖像及條碼掃描的章節,就讓我們繼續看下去吧。


Machine learning 機器學習

Understanding ML patterns 了解機器學習模式
Object detection: live camera 物體檢測:即時攝影
Object detection: static image 物體檢測:靜態圖像
Barcode Scanning 條碼掃描

Object detection: static image 物體檢測:靜態圖像

使用機器學習,可以從用戶提供的圖片中搜尋物體。通過執行視覺搜尋(使用圖片進行查詢搜索)照片可用於檢測和識別物理世界中的目標對象。透過機器學習模組進行視覺查詢,查詢結果可以告訴用戶關於目標對象的更多訊息,無論查詢對象是植物還是要想要購買的商品。

ML Kit 的目標檢測和追蹤 API 的 "靜態" 模式可讓您在提供的圖片中搜尋五個項目,使用圖片分類模組顯示搜尋結果。

為了協助在拍攝時畫面清晰易於辨認,在設計相機介面時把元件放置於畫面的頂部或底部對齊邊緣,確保文字和圖示在相機開啟時仍然清晰可見。即時攝影介面中所有不可操作的元件都應該設計為半透明的,減少對畫面產生干擾。

使用圖片進行搜尋時可能會發生目標重疊或是被裁切的狀況,進而導致搜尋變得困難。在傳達搜尋失敗的錯誤狀態時,可以藉由組件及動畫來傳達,包含幫助用戶改進搜尋的說明。

本圖片截取自 Material Design。

靜態圖片搜尋功能使用現有的 Material Design 組件和特定與圖像互動的新元素。有關新元素(例如: 目標標記)的程式碼示範例,請查看 Android 上的 ML Kit Material Design 展示的應用程式 的程式碼。

頂端應用列永遠需要提供以下操作:

  • 退出或離開的按鈕
  • 提高亮度的開關 ( 手電筒或是提供閃光燈補光 )
  • 對於搜尋問題進行幫助

目標物體標記是當檢測到拍攝物體時,螢幕中心顯示圓形標示,一個畫面最多同時可以檢測五個物體,在畫面中搜尋完成會顯示結果預覽在畫面底部的擴展視窗區塊,視窗中顯示每個搜尋結果的預覽,並依據搜尋結果排列在可以水平滑動的畫面區域,每個搜尋結果都可以與一個目標對象配對,選取搜尋結果時對應的物體圓形標示尺寸會變大。觸碰圓形標示 ( 或是搜尋結果縮圖 ) 可以打開底部擴展視窗,顯示出完整的搜尋結果。

消息提示可以向用戶提供文字提示,通常表示 "正在搜索..." 或是 "請對焦物體" 的消息,或是提示用戶進行到下一個步驟。請不要在消息提示中添加動詞 ( 例如: 點擊搜索 ),因為消息提示無法進行操作。

底部可擴展模組提供了視覺搜尋結果的預覽及連結,他們的排版和內容取決於搜尋目標、數量及結果項目符合度。底部可擴展模組可以顯示單個結果,也可以點選結果後以全螢幕顯示。

運用圖片進行視覺搜尋分為三個階段:

  1. 輸入:選擇要搜尋的照片
  2. 識別:檢測並識別物體
  3. 交流:找到符合的目標,顯示符合項目

當用戶選擇圖像進行視覺搜尋,為了增加搜尋成功的機會,請提供簡短的解釋向用戶建議最適合搜尋的圖片類型。( 例如: 在適合的距離拍攝清晰可見的圖片。 )

從圖片中檢測到一個或多個目標對像,畫面應該:

  • 表示應用程式正在進行搜尋
  • 顯示搜尋進度

將 ML Kit 目標檢測和追蹤 API 檢測到的目標,與 圖片分類模組 的圖片進行比較,這些圖片模組用於快速查尋目標。從照片中搜尋到目標,也無法保證會找到完全符合的結果,因此提供符合的搜索結果前,不應將檢測到的物體放置標示。

以下列舉幾項會影響是否檢測和識別對象的因素:

  • 圖片品質較差
  • 圖片中的物體太小
  • 物體與背景無法區別
  • 從無法識別的角度拍攝
  • 沒有網路連線可進行搜尋

透過以下方式向用戶表示搜尋結果:

  • 在每個搜尋到的目標上方放置圓形標示
  • 在搜尋結果區塊顯示每個搜尋結果預覽(搜尋結果可以設定區塊輪播)

您的應用程式應設計圖片搜索結果的符合程度。"信賴度" 是指 ML 模組預測的準確性的評估。對於視覺搜尋的每個結果,用信賴度表示模組認為的相似度。如果圖片中有一個或多個目標具有搜尋結果,則使用圓形標記和搜尋結果區塊來預覽目標對象的搜尋結果。觸摸標記或結果區塊將開啟底部擴展模組區塊,顯示搜尋到的結果。

運用互動式動畫來顯示搜尋結果與目標對象的關聯,當點選搜尋結果時目標對象的圓形標紀將會放大,當點選目標對象則底部預覽會自動顯示該結果預覽。

在以下情況下,圖片搜尋結果可能無法找到符合項目而返回:

  • 搜尋對象不在已知資料庫內或是資料庫無任何資料相似
  • 拍攝的角度無法識別物體
  • 圖片物體太小無法辨識物體的細節

顯示提示視窗說明無法找到符合的項目,並將用戶引導到 "幫助" 的部分,提供有關如何改進搜尋的訊息。

如果搜尋的結果只有低程度的符合目標,可以詢問用戶是否再次進行搜尋,或是提供有關改進搜尋的提示。

Shrine 應用程式 提供視覺搜索的購買流程,讓用戶可以使用照片進行搜尋,Shrine 在畫面設計上運用了淺粉色背景和菱形表現搜尋狀態,並特別規劃了文字樣式及顏色,在畫面上強調品牌風格。

在搜尋結果的狀態顯示,Shrine 運用了具有品牌風格的雙色菱形標記來顯示目標對象,未被選擇的目標則顯示白色菱形。

Barcode Scanning 條碼掃描

設備的即時攝影機可以讀取大多數條碼格式編碼的數據。條碼是將復雜或結構化的數據傳輸到設備的一種便捷方式。 ML Kit 的條碼掃描 API 可以讀取大多數標準條碼格式,無需用戶切換到單獨的條碼讀取軟體。

掃描條碼可以幫助用戶完成識別和查看內容,例如: 查詢要購買的產品、查看詳細信息或填寫表格。使用即時攝影機進行條形碼掃描解決上述需求。條碼掃描為用戶提供了手動搜索產品訊息或輸入數據的便利選擇。

tags: ML Kit API 檔案

將設備鏡頭作為掃描條形碼的 "控制器",使用時要教育用戶如何使用相機掃描條碼,請提供快速入門指南和永久性說明。

在設計界面時請將 UI 組件對齊畫面頂部和底部,並確保文字及圖示在即時攝影畫面中仍然清晰易讀。在介面中所有不可操作的元件都應該設計為半透明的,減少對畫面產生干擾。

使用相機掃描條碼時常見的使用需求,相機的影像解析度必須足夠不會模糊無法辨識物體,用戶需要學習調整光線及遠近,避免掃描時物體距離太遠而導致掃描失敗。在發生錯誤或是掃描失敗時,需要設計提示錯誤 ( 例如: 通知組件或動畫 ),或是提供用戶如何改善搜尋的說明。例如: 畫面出現對角框線提示用戶將條碼放置區塊內掃描,對準後框線填滿顯示為矩形框線。

本圖片截取自 Material Design。

即時攝影條碼掃描使用現有的 Material Design 組件和特定於攝影機交互的新元素。有關新元素(例如: 條碼框架)的程式碼範例,請查看 Android 上 ML Kit Material Design 應用程式的程式碼範例

頂端應用列永遠需要提供以下操作:

  • 退出或離開的按鈕
  • 提高亮度的開關 ( 手電筒或是提供閃光燈補光 )
  • 對於搜索問題進行幫助

條碼框顯示於畫面中央區域,預設框架為正方形,用戶可以在框線內掃描條碼。在應用上應調整掃描框大小和寬高比,以支援更多條碼類型,並指示目前掃描狀態。

條碼框顯示目的:

  • 確認:外框形狀適合單一條碼尺寸,一次只能掃描一個條碼。
  • 易讀性:雖然可以從遠處讀取快速的條碼格式,但是比較複雜的條碼格式(例如: PDF417)可能需要進行準確的掃瞄。通過在畫面中心設計條碼框,提示用戶靠近物體條碼直到填滿條碼框後執行掃描。
  • 活動:"感應" 階段中條碼框顯示應用程式正在執行掃描的條碼框動畫。

即時攝影

本圖片截取自 Material Design - Barcode frame。

條碼框的狀態:

  1. 條碼框使用動畫來表現應用程式正在尋找條碼
  2. 在條碼框上顯示部分邊框(以及工具提示)提示用戶需要靠近物體掃描
  3. 通過條碼框動態動畫來表示正在執行搜尋
  4. 當無法執行掃描時,使用深色虛線圓點框來表示錯誤或無法搜尋。

工具提示可以向用戶提供文字提示,通常表示 "正在搜索..." 或是 "請對焦物體" 的消息,提示用戶進行到下一個步驟。

用戶在掃描條碼功能時,可在底部模組讀取條碼訊息,底部模組列表的排版和內容取決於條碼的內容類型,例如 :

  • 可以在文字段落中顯示具有結構的數據(例如: 聯絡訊息)進行掃描和編輯。
  • 內容類型會有所不同,資料庫內容應使用適合閱讀的方式顯示。例如: 社群媒體的內容會與零售產品內容不同。

如果用戶直接在畫面上完成掃描條碼,則直接在螢幕上顯示掃描結果,而不使用底部模組,請參考 Material 體驗區 介紹如何傳達條碼訊息。文字段落非常適合在底部模組中顯示結構化資料。每個文字標籤和輸入都可以設計 "按鈕" 及 "項目",例如: Wi-Fi 網路的名稱。

即時攝影機將視覺搜尋分為三個階段:

  1. 感覺:使用相機尋找目標
  2. 識別:檢測並識別條碼
  3. 交流:顯示掃描結果

打開視覺搜尋功能後,將開始目標掃描。"傳感" 是指在應用程式打開掃描功能掃描條碼。在此階段應用程式應:

  • 描述功能如何運作
  • 傳達應用程式的操作
  • 指導用戶如何控制相機並建議如何調整

例如:

  • 通過快速入門指導用戶如何移動設備進行掃描
  • 顯示條碼框表示正在搜尋條碼,並提示用戶將物品對準條碼框

環境條件太亮或太暗可能導致掃描條碼變得困難,顯示 "幫助" 提示可以幫助用戶解決掃描相關的問題,"幫助" 可以提供有關相機角度、距離和環境條件等幫助。

相機檢測到條碼後:

  • 暫停相機讀取條碼
  • 如果是資料表格則立即顯示數值
  • 如果需要查詢條碼的數值,則顯示正在搜尋的進度

條碼從相機掃描經由 API 讀取時則暫停相機動作,防止相機繼續掃描其他條碼。 API 識別 的資料表格(例如: 坐標和行事曆)的條碼可以立即顯示給用戶。如果條碼的數據不是資料表格類型,則會從資料庫中提供查看詳細訊息,查看詳細訊息時應顯示讀取進度狀態。

  • 顯示已掃描到的條碼時,條碼邊框從透明變為不透明。
  • 如果您的應用程式需要查詢條碼數值,請顯示進度動畫和消息提示告訴用戶等待查詢。

條形碼的掃描不能保證會找到結果。可能會發生以下問題:

  • 沒有相關結果:成功掃描的條碼可能不包含相關訊息,例如: 從不相關的來源掃描條碼。
  • 沒有網絡連線:如果在需要連網的資料庫中查尋條碼,在沒有網路連接的情況下可能無法連接資料庫。
  • 最小條碼尺寸:雖然可以從遠處讀取簡單的條碼格式,但是複雜的條形碼格式(例如: PDF417)需要接近目標掃描條碼。為了提示用戶靠近掃描條碼,在介面設計可接受的條碼最小掃描尺寸,並提供多種提示(例如: 條碼框和消息提示 ) 用戶靠近條碼進行掃描。

條碼掃描的結果顯示方式:

  • 用相機掃描時出現(在擴展底部模組或對話框中)
  • 在螢幕上顯示條碼訊息,離開條碼掃描功能畫面後開啟詳細訊息。

掃描條碼後搜尋結果出現的方式建議:

  • 在掃描商店中的商品時,條碼保留在畫面中而搜尋結果出現於底部模組。
  • 在增加聯絡人時條碼保留在畫面中直到完成掃描,而掃描結果出現於底部模組或全螢幕視窗。
  • 在填寫表格時隱藏完成掃描的條碼,而掃描結果則呈現表格提供用戶填寫,填寫畫面提供存檔及退出的功能。

Shrine 應用程式 提供條碼搜索的購買流程,讓用戶可以使用相機進行掃描條碼,Shrine 在畫面設計上運用了白色背景和黑色條碼來強調對比,在搜尋結果以品牌顏色表現,並特別規劃了文字樣式及顏色,在畫面上強調品牌風格。

在掃描框外部顯示半透明灰色,掃描框則使用方形尖角來表現品牌標誌的幾何形狀,使用淡粉色搭配排版及顯示位置來強調提示消息。


今天我們了解到 Machine learning 機器學習模式能提供用戶使用圖像進行搜尋及條碼掃描,看似簡單的操作步驟,在每項操作時預先想好流程中用戶可能會遇到的問題,在用戶無法完成操作時提供幫助,保持任務的進度,在搜尋過程中提供用戶搜尋時間回饋,搜尋也可能因為環境因素造成掃描失敗,藉由提示幫助建議用戶更好的操作方式,讓用戶能持續完成動作。

終於完成 Material Foundation 基礎中的所有章節啦!讓我們為努力不懈的自己喝采,保持動力進入新的篇章。

明天讓我們從 Material Guidelines 準則開始,繼續完成 Material Theming 主題的章節,每天一點一點的逐個擊破,找出那些藏在細節中的魔鬼,不要讓大魔王有機會可以捉弄我們,迎向更美好的介面設計吧(握拳)!

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


上一篇
UI / UX 設計白皮書 / Material Design 導讀_Day21 Machine learning 機器學習
下一篇
UI / UX 設計白皮書 / Material Design 導讀_Day23 Material Theming 主題
系列文
UI / UX 設計白皮書 - Material Design 導讀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言