昨天我們了解到 Machine learning 機器學習模式能提供用戶更完善的人機介面指南，在操作機器中達成最好的互動體驗，物體檢測中看似簡單的即時攝影操作，卻可以細分成多項的步驟， 並預先想好流程中可能會遇到的問題，在使用者無法完成操作時提供幫助，保持任務的進行，在找尋過程中提供用戶搜尋時間回饋，讓用戶了解搜尋在持續狀態，在結果出爐後也提供符合程度的排序，確保用戶能得到最符合的結果。
今天我們將繼續完成 Material Design 中 Machine learning 機器學習的物體檢測：靜態圖像及條碼掃描的章節，就讓我們繼續看下去吧。
Understanding ML patterns 了解機器學習模式
Object detection: live camera 物體檢測：即時攝影
Object detection: static image 物體檢測：靜態圖像
Barcode Scanning 條碼掃描
使用機器學習，可以從用戶提供的圖片中搜尋物體。通過執行視覺搜尋（使用圖片進行查詢搜索）照片可用於檢測和識別物理世界中的目標對象。透過機器學習模組進行視覺查詢，查詢結果可以告訴用戶關於目標對象的更多訊息，無論查詢對象是植物還是要想要購買的商品。
ML Kit 的目標檢測和追蹤 API 的 "靜態" 模式可讓您在提供的圖片中搜尋五個項目，使用圖片分類模組顯示搜尋結果。
為了協助在拍攝時畫面清晰易於辨認，在設計相機介面時把元件放置於畫面的頂部或底部對齊邊緣，確保文字和圖示在相機開啟時仍然清晰可見。即時攝影介面中所有不可操作的元件都應該設計為半透明的，減少對畫面產生干擾。
使用圖片進行搜尋時可能會發生目標重疊或是被裁切的狀況，進而導致搜尋變得困難。在傳達搜尋失敗的錯誤狀態時，可以藉由組件及動畫來傳達，包含幫助用戶改進搜尋的說明。
靜態圖片搜尋功能使用現有的 Material Design 組件和特定與圖像互動的新元素。有關新元素（例如: 目標標記）的程式碼示範例，請查看 Android 上的 ML Kit Material Design 展示的應用程式 的程式碼。
頂端應用列永遠需要提供以下操作:
目標物體標記是當檢測到拍攝物體時，螢幕中心顯示圓形標示，一個畫面最多同時可以檢測五個物體，在畫面中搜尋完成會顯示結果預覽在畫面底部的擴展視窗區塊，視窗中顯示每個搜尋結果的預覽，並依據搜尋結果排列在可以水平滑動的畫面區域，每個搜尋結果都可以與一個目標對象配對，選取搜尋結果時對應的物體圓形標示尺寸會變大。觸碰圓形標示 ( 或是搜尋結果縮圖 ) 可以打開底部擴展視窗，顯示出完整的搜尋結果。
消息提示可以向用戶提供文字提示，通常表示 "正在搜索..." 或是 "請對焦物體" 的消息，或是提示用戶進行到下一個步驟。請不要在消息提示中添加動詞 ( 例如: 點擊搜索 )，因為消息提示無法進行操作。
底部可擴展模組提供了視覺搜尋結果的預覽及連結，他們的排版和內容取決於搜尋目標、數量及結果項目符合度。底部可擴展模組可以顯示單個結果，也可以點選結果後以全螢幕顯示。
運用圖片進行視覺搜尋分為三個階段：
當用戶選擇圖像進行視覺搜尋，為了增加搜尋成功的機會，請提供簡短的解釋向用戶建議最適合搜尋的圖片類型。( 例如: 在適合的距離拍攝清晰可見的圖片。 )
從圖片中檢測到一個或多個目標對像，畫面應該：
將 ML Kit 目標檢測和追蹤 API 檢測到的目標，與 圖片分類模組 的圖片進行比較，這些圖片模組用於快速查尋目標。從照片中搜尋到目標，也無法保證會找到完全符合的結果，因此提供符合的搜索結果前，不應將檢測到的物體放置標示。
以下列舉幾項會影響是否檢測和識別對象的因素：
透過以下方式向用戶表示搜尋結果：
您的應用程式應設計圖片搜索結果的符合程度。"信賴度" 是指 ML 模組預測的準確性的評估。對於視覺搜尋的每個結果，用信賴度表示模組認為的相似度。如果圖片中有一個或多個目標具有搜尋結果，則使用圓形標記和搜尋結果區塊來預覽目標對象的搜尋結果。觸摸標記或結果區塊將開啟底部擴展模組區塊，顯示搜尋到的結果。
運用互動式動畫來顯示搜尋結果與目標對象的關聯，當點選搜尋結果時目標對象的圓形標紀將會放大，當點選目標對象則底部預覽會自動顯示該結果預覽。
在以下情況下，圖片搜尋結果可能無法找到符合項目而返回：
顯示提示視窗說明無法找到符合的項目，並將用戶引導到 "幫助" 的部分，提供有關如何改進搜尋的訊息。
如果搜尋的結果只有低程度的符合目標，可以詢問用戶是否再次進行搜尋，或是提供有關改進搜尋的提示。
Shrine 應用程式 提供視覺搜索的購買流程，讓用戶可以使用照片進行搜尋，Shrine 在畫面設計上運用了淺粉色背景和菱形表現搜尋狀態，並特別規劃了文字樣式及顏色，在畫面上強調品牌風格。
在搜尋結果的狀態顯示，Shrine 運用了具有品牌風格的雙色菱形標記來顯示目標對象，未被選擇的目標則顯示白色菱形。
設備的即時攝影機可以讀取大多數條碼格式編碼的數據。條碼是將復雜或結構化的數據傳輸到設備的一種便捷方式。 ML Kit 的條碼掃描 API 可以讀取大多數標準條碼格式，無需用戶切換到單獨的條碼讀取軟體。
掃描條碼可以幫助用戶完成識別和查看內容，例如: 查詢要購買的產品、查看詳細信息或填寫表格。使用即時攝影機進行條形碼掃描解決上述需求。條碼掃描為用戶提供了手動搜索產品訊息或輸入數據的便利選擇。
將設備鏡頭作為掃描條形碼的 "控制器"，使用時要教育用戶如何使用相機掃描條碼，請提供快速入門指南和永久性說明。
在設計界面時請將 UI 組件對齊畫面頂部和底部，並確保文字及圖示在即時攝影畫面中仍然清晰易讀。在介面中所有不可操作的元件都應該設計為半透明的，減少對畫面產生干擾。
使用相機掃描條碼時常見的使用需求，相機的影像解析度必須足夠不會模糊無法辨識物體，用戶需要學習調整光線及遠近，避免掃描時物體距離太遠而導致掃描失敗。在發生錯誤或是掃描失敗時，需要設計提示錯誤 ( 例如: 通知組件或動畫 )，或是提供用戶如何改善搜尋的說明。例如: 畫面出現對角框線提示用戶將條碼放置區塊內掃描，對準後框線填滿顯示為矩形框線。
即時攝影條碼掃描使用現有的 Material Design 組件和特定於攝影機交互的新元素。有關新元素（例如: 條碼框架）的程式碼範例，請查看 Android 上 ML Kit Material Design 應用程式的程式碼範例。
頂端應用列永遠需要提供以下操作:
條碼框顯示於畫面中央區域，預設框架為正方形，用戶可以在框線內掃描條碼。在應用上應調整掃描框大小和寬高比，以支援更多條碼類型，並指示目前掃描狀態。
條碼框顯示目的：
條碼框的狀態：
工具提示可以向用戶提供文字提示，通常表示 "正在搜索..." 或是 "請對焦物體" 的消息，提示用戶進行到下一個步驟。
用戶在掃描條碼功能時，可在底部模組讀取條碼訊息，底部模組列表的排版和內容取決於條碼的內容類型，例如 :
如果用戶直接在畫面上完成掃描條碼，則直接在螢幕上顯示掃描結果，而不使用底部模組，請參考 Material 體驗區 介紹如何傳達條碼訊息。文字段落非常適合在底部模組中顯示結構化資料。每個文字標籤和輸入都可以設計 "按鈕" 及 "項目"，例如: Wi-Fi 網路的名稱。
即時攝影機將視覺搜尋分為三個階段：
打開視覺搜尋功能後，將開始目標掃描。"傳感" 是指在應用程式打開掃描功能掃描條碼。在此階段應用程式應：
例如:
環境條件太亮或太暗可能導致掃描條碼變得困難，顯示 "幫助" 提示可以幫助用戶解決掃描相關的問題，"幫助" 可以提供有關相機角度、距離和環境條件等幫助。
相機檢測到條碼後：
條碼從相機掃描經由 API 讀取時則暫停相機動作，防止相機繼續掃描其他條碼。 API 識別 的資料表格（例如: 坐標和行事曆）的條碼可以立即顯示給用戶。如果條碼的數據不是資料表格類型，則會從資料庫中提供查看詳細訊息，查看詳細訊息時應顯示讀取進度狀態。
條形碼的掃描不能保證會找到結果。可能會發生以下問題：
條碼掃描的結果顯示方式：
掃描條碼後搜尋結果出現的方式建議:
Shrine 應用程式 提供條碼搜索的購買流程，讓用戶可以使用相機進行掃描條碼，Shrine 在畫面設計上運用了白色背景和黑色條碼來強調對比，在搜尋結果以品牌顏色表現，並特別規劃了文字樣式及顏色，在畫面上強調品牌風格。
在掃描框外部顯示半透明灰色，掃描框則使用方形尖角來表現品牌標誌的幾何形狀，使用淡粉色搭配排版及顯示位置來強調提示消息。
今天我們了解到 Machine learning 機器學習模式能提供用戶使用圖像進行搜尋及條碼掃描，看似簡單的操作步驟，在每項操作時預先想好流程中用戶可能會遇到的問題，在用戶無法完成操作時提供幫助，保持任務的進度，在搜尋過程中提供用戶搜尋時間回饋，搜尋也可能因為環境因素造成掃描失敗，藉由提示幫助建議用戶更好的操作方式，讓用戶能持續完成動作。
終於完成 Material Foundation 基礎中的所有章節啦！讓我們為努力不懈的自己喝采，保持動力進入新的篇章。
明天讓我們從 Material Guidelines 準則開始，繼續完成 Material Theming 主題的章節，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！
如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~
iThome鐵人賽
看影片追技術