# 工業產品人機介面（Human Machine Interface)：五大設計要點與心法 - UX Insight - Medium By [Sinya Hung](https://paragraph.com/@sinya-hung) · 2021-11-11 --- ![](https://storage.googleapis.com/papyrus_images/bcbc34cbe863d36ee4a7cae28ce250ca9e701ced9fafb8ecc5da0ee2a1fe0d00.png) 本文目錄1.前言 2.工業產品存在於混亂複雜的工廠環境 3.工業產品的多元使用者與利害關係人 4.人機介面 HMI 五大設計要點 5.其他考量因素-產品藍圖（Product Roadmap）迭代版本的擴充性 6.Key Takeaways 7.參考資料 前言 -- 我目前擔任遊石設計的 UX 研究員，去年接手了很特別的介面設計需求：工業用噴碼機的介面改版設計與研究。相比於我們平常生活中常會使用到的消費性產品介面，如使用手機 APP 或電腦網頁買網拍、看影集、聽音樂、傳訊息，工業用產品的介面設計比較少被討論。 > **但在看似複雜的工業生產環境中，其實同樣是以「人」來控制機器作業，故同樣須考量到使用者如何有效和機台互動，如何透過更好、更易用的介面幫助操作人員完成工作任務。** 以下就來和大家分享我們在這個專案中的研究發現和設計考量，如何讓工業操作產品的「人機介面 」（Human Machine Interfaces, HMIs）設計的更加友善和符合需求。 工業產品存在於混亂複雜的工廠環境 ---------------- 工廠環境基本上是個混亂的世界（幾乎不如我們想像中、電視廣告上展示的樣子），為了進行研究，我們前往了台灣南部的食品工廠進行田野訪查，發現原來中南部大多廠房都是用鐵皮屋搭建而成，幾條生產線佈滿整個工廠環境，容納了各式各樣的產線機器，如填料機、殺菌機、包裝機、開箱機等，這些機器來自不同家廠商也有各自不同的系統介面和操作邏輯，幾乎沒有任何一家廠商可以包辦所有機台，故各個機器之間會盡量設計成能與其他機器設備互通或協同作業。 > **因此我們在進行工業用機器介面設計時，也必須要考量使用者每日要面對多種機台、介面、系統組合這樣的操作環境。** 而通常在工廠的作業環境下，工廠人員和管理階層最大的目標即是能讓生產線運作順利，因每天都有緊湊的製作排程或包裝任務必須完成，如何能夠運用最少時間、最有效率方式指派機器工作，隨時掌握機台的運作狀況並在意外發生前就能提早警告、解決，避免停機或其他麻煩的事件發生，這即是我們在進行介面設計時最需要考量的使用者目標！ ![](https://storage.googleapis.com/papyrus_images/e89b28a6e2224a1d40d7948a1b296f25e03c4e52f5afe6ce4bdfb783c0d3a2bc.jpg) ![](https://storage.googleapis.com/papyrus_images/1ffb3cc376dc75741b49d253d9e270667dadebcda2b59d5013c5ffc9920723a1.png) 想像中的工廠（圖片來源：Uplash）/ 遊石實際走訪的南部工廠 工業產品的多元使用者與利害關係人 ---------------- 工業機台由於硬體生產量大、服務的產業類別多，使用者可能散佈在世界各地且非常多元，如我們這次接觸到的噴碼機使用者和利害關係人就非常多種，這邊主要整理成三個類別： **1\. 工業產品開發商內部人員** ------------------- 包含行銷業務團隊、軟硬體工程師、售後服務工程師（FAE）、測試與維修人員等，負責確保機器品質與協助客戶解決問題，期望提供更易用、更具有市場競爭力的機器來滿足客戶的使用需求。 **2\. 委外銷售代理商人員** ----------------- 世界各地都有負責銷售的代理商，負責販售產品給終端客戶、協助安裝和解決使用上遇到的問題，也會因地制宜提供不同的服務，如台灣代理商因地狹人稠重服務會親自到工廠安裝和排解疑難雜症、澳洲代理商則因所在地幅員廣大只能和客戶做電話或視訊溝通培訓使用者。總歸來說，代理商希望介面好上手、少出錯，能盡量減少培訓和售後服務的成本。 **3\. 終端使用者工廠內部人員** ------------------- 主要包含管理階層和生產線上的作業員，工廠的產業類別從高科技、木材原料、食品、塑膠到化妝品都有，機器應用的情境多種多樣，而第一線作業人員通常教育背景較低、流動率較高，故管理階層需要控管人員避免發生錯誤操作造成損失，也要負責各條生產線上產品生產的高品質和高效率。 人機介面 HMI 五大設計要點 --------------- 在此專案的過程中，我們運用使用者訪談和易用性測試方法，去確認改版的設計介面是否更貼近使用者需求、變得更加友善，在此幫大家整理了工業機台介面設計的五大設計要點： 1\. 避免過多的複雜絢麗的圖像設計 ------------------ 雖然圖像化有助於使用者理解，但當沒有增加任何價值的設計被放入機台的介面當中，反而會造成閱讀上過多的視覺雜音和不必要的理解障礙，尤其是大部分工廠內操作機台的功能已經非常多元、複雜了。 > **當加入更多擬真、3D、漸層、過飽和顏色甚至動畫的介面設計，這些不必要的功能和裝飾反而會增加使用者的認知負荷，讓需要每日長時間輪班工作的操作人員更快工作疲乏。** 若以下圖為例，最左邊的蓄電池圖形較擬真、設計樣式也較好看，但展現的資訊卻最少；反而是最右邊的圖示看似扁平單調只有外觀與蓄電池相似，但卻能清晰呈現電量的上限與下限、歷史使用數據趨勢、時間單位等，能操作人員快速判別，增加閱讀效率。 ![](https://storage.googleapis.com/papyrus_images/fe3342a52cf1a10c00379935fa94817f5275b1b8a2ac0ebeac37221e782832df.png) [_資料來源：The High Performance HMI Handbook, by Bill Hollifield, Eddie Habibi, Dana Oliver, and Ian Nimmo_](https://www.uxmatters.com/mt/archives/2017/11/ux-for-the-industrial-environment-part-3.php) 2\. 顏色使用需考量使用情境、硬體限制、慣用顏色，並納入無障礙顏色設計 ------------------------------------ > **考量使用情境決定介面背景用色** 一開始在顏色部分我們首先要決定使用深色或淺色作為介面底色，於是想先工廠的光線來決定介面用色，但發現不同產業的工廠環境差異實在太大，從明亮到陰暗的工廠環境都可能存在，故才決定捨棄環境影響因子，而改以使用者的情境做為優先考量，像是在使用過程中通常會花最多時間的即是文字訊息編輯或參數設定，故此相關設定的介面我們皆選擇淺色背景，以提供更清楚的編輯畫面，讓使用者操作設定上更精準。 > **考量機台螢幕顯色限制、工廠慣用警示顏色決定用色** 我們還遇到另一個狀況是此噴碼機的顯示螢幕和一般常見的手機、電腦顯色機制相反，當背景顏色越黑反而會消耗越多 CPU 的運算資源，造成運作不順暢甚至停機發生，故考量到此硬體限制我們須避免使用大色塊的黑色背景。另外，工廠已有運行已久的通用顏色規範，包含綠色代表安全、紅色代表危險、黃色代表警戒等，設計需要依循工廠的顏色規範才不至於混淆使用者。 > **考量無障礙顏色設計** 最後，由於使用者非常多元，且可能包含高齡者或是色弱人士，在設計上我們也採用國際通用的「網頁內容無障礙指南」（WCAG 2.0）規範，將背景和顯示內容的「對比值」調整至超過 4.5 : 1 ，確保使用者能夠清楚、快速的辨識顏色與介面呈現內容。 ![](https://storage.googleapis.com/papyrus_images/ac5429b1d256273cd9b195d66d4fd793722ad937b879f5016c13762d8fd46624.jpg) 工廠常見的是警示三色燈，紅色、黃色、綠色各有不同的代表含義（[圖片來源](https://www.digitimes.com.tw/iot/article.asp?cat=158&id=0000552974_vyz8g4qc8le84t3bxubv5)） 3\. 盡量降低使用者操作與學習的門檻 ------------------- 重新設計資訊架構階層（階層是指功能類別，同階層的功能應要互斥，上階層也要能涵蓋下階層）時要盡量簡化操作流程，並採用使用者普遍能理解的由上而下的階層方式（Top-Down Approach），方便使用者從大分類往下找且不需多次點擊才能找到目標功能。 > **另外，也應避免使用工程術語來命名而是用清楚且貼近使用者的命名體系，也增加導覽列和快捷鍵、減少功能之間的超連結，以避免造成使用者在頁面之間迷失方向。** ![](https://storage.googleapis.com/papyrus_images/25be37f84b25d87ff8e321c301ecf130f9f9285d02da42faebab5d062b96f2cf.png) 競品M牌噴碼機的資訊架構堪稱清楚明瞭 4\. 加強警示功能與防止錯誤 --------------- 在工廠高速生產的環境中若發生機器故障，造成產線停擺是非常嚴重的事情，再加上工廠環境通常吵雜難以使用蜂鳴器做警報，幫助產線人員在巡邏或操作是能快速判別是否有錯誤發生非常重要。 > **需要在介面上呈現明顯的正常、異常等警示，也要加強減少誤觸、防呆機制、撤銷功能、排除故障的功能，幫助機器在產線上能24小時不間斷的高效運作。** ![](https://storage.googleapis.com/papyrus_images/ae00c4e13831babdbeab0596fe03abaa4b1dc7f6b1a0db8d71316b351abe50d9.png) 競品M牌噴碼機介面以紅色警告產線停止，並出現「故障排除」按鈕幫助使用者立即解決 5\. 多以圖文並列展示，並考量元件的適應性與通用性 -------------------------- 由於使用者來自世界各個角落，其年齡、語言、文化、知識水平、科技熟悉程度、甚至手指粗度都不相同，還有部分操作人員不識字、或來自殖民國家而無法理解官方語言，故介面設計時要考量多個面向，也盡量讓圖示和文字並列，讓不同的使用者能更加理解使用介面。可思考的面相舉例如下： > **文字和圖示的選用是否足夠通用讓不同文化背景的使用者都能了解？** > > **多國語言該如何呈現不同的方向和文字長度？** > > **按鈕是否夠大讓白人或戴手套的人員也能方便操作？** > > **字體是否夠大夠清晰讓高齡者，甚至戴面罩的操作員都能看到？** > > **顏色是否清晰和符合網頁內容無障礙指南WCAG 2.0對比值？** ![](https://storage.googleapis.com/papyrus_images/aad4af78b395976630c30620424fcab8da8bf56efe29661a5def707ac9365b14.png) 我們參考[Google Material Design Icons](https://material.io/resources/icons/?style=baseline)的icons和用字來選取用更具通用性的圖示 其他考量因素 — 產品藍圖（Product Roadmap）迭代版本的擴充性 -------------------------------------- 工業產品的軟體介面會受到硬體規格蠻大的影響，像是我們這次專案就遇到因硬體 CPU 規格不足而無法支援多功作業，要到下一代產品的硬體規格才可以支援，但本次所設計出來的軟體系統和介面也須同時考量未來硬體升級後更多整合設備或加入相關功能的狀況。 > **在介面上應考量未來方便系統擴充的彈性，也須要考量到過去機台使用者對於前一代使用介的熟悉感，以及軟體上面操作的延續性，甚至能帶入使用者熟悉的消費性產品思維來進行介面設計，都可以幫助產品更符合客戶的產品發展規劃，以及使用者的使用習慣。** Key Takeaways ------------- 1. **考量工廠環境的限制和規範，避免過於複雜的介面設計造成使用者的認知負荷，顏色選用上也須考量顏色在工廠脈絡下的代表意義** 2. **透過重整資訊架構、設計導覽系統、注意用字命名來降低介面的學習的門檻；並增加警示和提示，以減少錯誤發生的機會** 3. **考量多元的使用者需求，盡量做到使用上的通用性並以能適應最大使用族群為目標** 4. **工業產品需考量前一代和未來升級版本的功能延伸性與擴充性，更可以把消費性產品的思維帶入，幫助使用者更快上手** --- *Originally published on [Sinya Hung](https://paragraph.com/@sinya-hung/human-machine-interface-ux-insight-medium)*