昨天我們了解到 Communication 通訊中，快速入門流程可以幫助用戶快速熟悉應用程式，從啟動到操作特定目標的過程一一給予用戶引導。離線狀態允許用戶無需開啟網路即可與應用程式互動。介面中的文字應清晰、準確和簡潔，可以增加介面可用性並建立信任，錯誤的撰寫方式容易造成用戶混淆。
今天我們進入到 Material Design 中 Machine learning 機器學習的章節，由於內容涵蓋的範圍較廣，我們會分成兩天來介紹 Machine learning 機器學習，今天會先了解機器學習模式和物體檢測：即時攝影，讓我們繼續看下去吧。
Understanding ML patterns 了解機器學習模式
Object detection: live camera 物體檢測：即時攝影
Object detection: static image 物體檢測：靜態圖像
Barcode Scanning 條碼掃描
機器學習（ML）使電腦能夠進行預測和執行任務，不需要特定的說明。
電腦通過分析大型數據和複雜數據，整合當中的趨勢，在通過多種方式運用機器學習，例如: 使用圖片搜尋、識別音樂及個性化的聊天軟體。
透過類似 ML Kit 之類的產品，越來越容易獲得以機器學習主的技術，這類產品可以用來檢測和識別文字等任務提供應用程式介面 ( API )。通過這些 API 可以將機器學習運用到產品上。
隨著機器學習提供的功能增加也影響更多的產品體驗，設計模式可以幫助使這些體驗變得好用、美觀和容易理解。 Material Design 與 ML Kit 合作，解決如何在視覺搜尋中運用機器學習。雖然無法運用單一的設計模式來展現機器學習的技術潛力，但視覺搜索技術為設計指南提供了，幫助用戶了解如何與 ML 技術進行最佳互動的機會。
物體檢測的準則涵蓋了一次檢測單個對象的過程。設備的即時攝影鏡頭可用於機器學習檢測環境中的對象。攝影機的即時畫面可用於識別物體。使用即時攝影機進行搜尋可以幫助用戶了解周圍物體的更多信息，無論是博物館中的文物還是要購買的物品。
使用 ML Kit 的 "對象檢測和追蹤" API 的 "streaming 即時觀看" 模式，提供即時攝影用來檢測物體並將檔案存檔，提供後續應用程式進行分類，在需要時提供用戶進行視覺搜索。( 使用圖片進行搜索查詢。)
物體檢測的設計基於以下原則：
使用設備攝影機觀看畫面，不需要輸入文字搜尋才能搜尋，而是將設備攝影機當成搜索器來查看畫面中想要搜尋的物體。需要教導用戶如何使用攝影機進行搜尋，請提供入門指南和永久性說明。( 例如: 簡短的動畫入門指南可以幫助用戶了解如何移動和放置攝影鏡頭進行搜尋。)
為用戶提供最大的觀看可視範圍，在設計界面時請將 UI 組件對齊畫面頂部和底部，並確保文字及圖示在即時攝影畫面中仍然清晰易讀。在介面中所有不可操作的元件都應該設計為半透明的，減少對畫面產生干擾。
將攝影機當成搜索工具時需要注意，相機的影像解析度必須足夠不會模糊，用戶需要學習調整光線及遠近，避免拍攝時物體距離太遠而導致搜尋失敗。在發生錯誤或是搜尋失敗時，需要設計提示錯誤 ( 例如: 通知組件或動畫 )，或是提供用戶如何改善搜尋的說明。
即時攝影機檢測功能使用現有的 Material Design 組件和特別用於攝影機互動的新元素。有關新元素（例如: 標線片）的碼範例，請查看 ML Kit Material Design 提供的 Android 和 iOS 程式碼。
頂端應用列永遠需要提供以下操作:
攝影十字線是一種視覺指示器，為用戶提供了一個目標，讓用戶在使用相機時可以對準聚焦在物體上 ( 可以在攝影機取景框中看到 )。當攝影機瞄準物體時十字線會轉為綠色表示已對焦物體。十字線應具有不同的設計和動畫效果，傳達介面應用的各種狀態，例如: 在照相機尋找對象時或發生錯誤時。
十字線的狀態：
ML Kit 對象檢測和追蹤 API 包含用於檢測 "突出對象" 的選項。可以檢測並追蹤畫面中心附近的最大物體。檢測到物體後使用矩形邊框標記目標對象。如果您的搜尋功能有要求搜尋圖片的尺寸大小，畫面中的對象標記應改為顯示對角框線，當用戶靠近物體直到滿足尺寸大小後，填滿矩形框線表示可以提供搜尋。
工具提示可以向用戶提供文字提示，通常表示 "正在搜索..." 或是 "請對焦物體" 的消息，提示用戶進行到下一個步驟。( 請不要將錯誤消息放在工具提示中，錯誤消息應放在可以吸引焦點的提示框中。 )
拍攝完圖片後， ML Kit 的物體檢測和追蹤 API 會建立圖片裁切，使用圖片分類模組進行視覺搜索。將拍攝完的照片縮圖放在搜尋畫面中的一角，可以幫助用戶識別最相關的搜尋結果。
裁切後的圖片顯示為：
底部模組列表提供了對視覺搜尋結果的連結。列表或圖片排列可以顯示多個視覺搜索結果。可以將底部模組表格擴展到全螢幕的高度提供用戶查看其他結果。底部模組表格也可以顯示單個結果，並根據查詢結果內容調整排版。
即時攝影機將視覺搜尋分為三個階段：
打開視覺搜尋功能後，將開始目標搜尋。"傳感" 是指攝影機在即時攝影中尋找目標。在此階段應用程式應：
向用戶提供有關相機遠距搜索目標對象的說明，並通過快速入門和幫助來描述操作流程。不要使用過於冗長的快速入門描述未來可能會發生錯誤的狀態，而是在用戶遇到問題時顯示。在幫助中提到可以搜尋到的對象種類，如何獲得最佳搜尋結果以及如何使用圖片的訊息。
當攝影機搜尋時，十字線會顯示圓圈向外擴散表示攝影機 "搜尋目標"，工具提示會提醒用戶將攝影機瞄準對象。
有時環境條件會使尋找物體變得困難，例如：
在尋找到對象之前已經過了很長時間，請停止顯示十字線顯示幫助並指導用戶進行搜尋。
當相機對焦到物體後，應用程式應：
要標示相機找到對象，請停止十字線動畫並用對角邊框標記對焦到的對象。提示用戶將對焦到的物體保持在相機中央。在開始搜尋之前，請增加短暫的搜尋動畫 ( 您可以自定搜尋時間的長度 )，並在十字線上顯示進度表。這時用戶可以執行以下一個操作：
搜尋開始後，將停止相機對焦物體，即時攝影鏡頭也會暫停拍攝，可以防止進行新的搜尋（ 用戶此時可以將設備移至更舒適的位置 ）。搜尋進度可用圓弧曲線不斷旋轉來表示正在搜尋，或是使用工具提示來顯示進度。
在搜索階段，可能會影響搜尋結果的兩個可能：
網絡連接：如果您的圖片分類模組在雲端上，就會需要穩定的網路連接。如果網路連接失敗，則需要在畫面上顯示標語，指示用戶需要網路連接才能繼續搜尋動作，再連接上網路後提供重新查詢的操作。
可視搜尋結果顯示在畫面底部擴展視窗。此時應：
您的應用程式應設計圖片搜索結果的符合程度。"信賴度" 是指 ML 模組預測的準確性的評估。對於視覺搜尋的每個結果，用信賴度表示模組認為的相似度，確保用戶會先看到最符合的搜尋結果，當搜尋要求完全符合時，只顯示最相似的搜尋結果。提供拍攝的對象和搜尋結果進行比較，請在畫面中顯示拍攝到的縮圖。
觀看結果後，用戶可以採取不同的操作：
在以下情況下，圖片搜尋結果可能無法找到符合項目而返回：
顯示提示視窗說明無法找到符合項目，並將用戶引導到 "幫助" 的部分，提供有關如何改進搜尋的訊息。如果搜尋的結果只有低符合的結果，則可以詢問用戶是否再次進行搜尋，或是提供有關改進搜尋的提示。
您可以藉由設計使物體檢測的介面具有品牌風格， Shrine 應用程式 的購買流程中使用了即時攝影機進行圖片搜尋，在畫面設計上運用了菱形表現十字線，並特別規劃了文字樣式及顏色，在畫面上強調品牌風格。
今天我們了解到 Machine learning 機器學習模式能提供用戶更完善的人機介面指南，在操作機器中達成最好的互動體驗，物體檢測中看似簡單的即時攝影操作，卻可以細分成多項的步驟， 並預先想好流程中可能會遇到的問題，在使用者無法完成操作時提供幫助，保持任務的進行，在找尋過程中提供用戶搜尋時間回饋，讓用戶了解搜尋在持續狀態，在結果出爐後也提供符合程度的排序，確保用戶能得到最符合的結果。
明天讓我們繼續完成 Machine learning 機器學習的章節，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！
如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~
iThome鐵人賽
看影片追技術