拯救HMI第2期—常見的工業(yè)觸摸屏設(shè)計(jì)問題，避坑自查指南 ...

毛屌屌

朋友們～大家好
恍如隔世，這個(gè)專欄起初是2017年弄的，本來想著記錄自己工作中的一些關(guān)于hmi設(shè)計(jì)的一些思考，雖然我不是一個(gè)職業(yè)的ui設(shè)計(jì)師，也不是一個(gè)職業(yè)的電氣工程師。但是自己對HMI設(shè)計(jì)很熱愛，也很有興趣?？上н@幾年工作確實(shí)比較忙。這里也和大家簡單的介紹一下自己。
16年大學(xué)本科畢業(yè)，很榮幸當(dāng)時(shí)進(jìn)了西門子的培訓(xùn)生項(xiàng)目，培訓(xùn)1年半之后，進(jìn)去了銷售崗位，沒錯(cuò)，我就是一個(gè)銷售。這幾年在西門子摸爬滾打，做個(gè)大項(xiàng)目，拿下過大客戶，做銷售2年也被promote到帶團(tuán)隊(duì)，負(fù)責(zé)12人的銷售團(tuán)隊(duì)。對一個(gè)93年的小伙子來說，是難得的機(jī)會(huì)。去年年底因?yàn)槁殬I(yè)發(fā)展考慮，現(xiàn)在在SAP工作，從我熱愛的工業(yè)自動(dòng)化領(lǐng)域，轉(zhuǎn)到了我一直想去學(xué)習(xí)了解的企業(yè)管理信息化領(lǐng)域，從底層的數(shù)字化，賺到企業(yè)層次的數(shù)字化學(xué)習(xí)工作中。所以這也是這個(gè)專欄一直難產(chǎn)的原因。一直忙于工作，但是以后不會(huì)啦。這個(gè)專欄我會(huì)堅(jiān)持學(xué)下去。
因?yàn)槲铱吹胶芏嗟乃叫藕忘c(diǎn)贊，大家很關(guān)心這個(gè)專欄和HMI設(shè)計(jì)，希望自己的一些見解能夠幫助到大家。
好了，開始正文，設(shè)計(jì)HMI有時(shí)候和做PPT是一樣的，在做HMI設(shè)計(jì)之前，其實(shí)我們有很多的前置步驟需要做，
設(shè)計(jì)流程
1-項(xiàng)目調(diào)研，了解客戶設(shè)備工藝、現(xiàn)有控制畫面、痛點(diǎn)、目標(biāo)和要求等
2-繪制項(xiàng)目框架圖，梳理清楚客戶需要做的所有畫面清單，要求等，確定功能和流程，確定還缺失哪些材料，畫出系統(tǒng)的結(jié)構(gòu)樹，基本的畫面切換關(guān)系、存在的各個(gè)畫面等
3-繪制草圖【利用模版，通過描繪標(biāo)題、畫布、功能、不同元素、考慮相關(guān)性和實(shí)用頻率】，先確定主要畫面的草圖，然后做原型溝通，確認(rèn)客戶可以接受
4-概念化交互，邏輯交互，以及信息提示等
5-測試原型
6-最后潤色，圖標(biāo)，顏色等
設(shè)計(jì)工具
嚴(yán)格的遵照設(shè)計(jì)流程，不要直接上手就開始畫圖，也不要一開始就在觸摸屏組態(tài)軟件去做畫面，你可以用一些ui設(shè)計(jì)工具去幫助你最前期的整體布局和思路，最后的最后才是去組態(tài)軟件去實(shí)施，常用的ui設(shè)計(jì)軟件有很多，不過在這里，為了避免大家走彎路，我推薦1個(gè)我很喜歡的工具，當(dāng)然了，還有很多，比如：Sketch、Figma

登錄/注冊后可看大圖

強(qiáng)烈推薦-墨刀

這個(gè)工具界面比較簡單，大致就長這樣，一用就會(huì)！好用！3個(gè)項(xiàng)目以內(nèi)是免費(fèi)，多了就要收費(fèi)，我本人是個(gè)極致的知識(shí)付費(fèi)支持者，花小錢辦大事，你的時(shí)間和效率最重要！所以項(xiàng)目不多的情況，先用免費(fèi)版本就可以啦，多的話就支持一下開發(fā)者～

登錄/注冊后可看大圖

HMI畫面分類
設(shè)計(jì)工作的系統(tǒng)化中，我們的畫面類型實(shí)際上就那么幾類，沒有很復(fù)雜，常見的按照下列的類型去對照自己的：
1-開機(jī)登陸頁面：提供用戶登陸
2-主頁面: 這是用戶進(jìn)入控制系統(tǒng)后看到的第一個(gè)頁面，通常包含控制系統(tǒng)的主要功能和導(dǎo)航菜單，例如開關(guān)機(jī)、調(diào)整參數(shù)、選擇模式等
3-自動(dòng)運(yùn)行畫面：用于自動(dòng)連續(xù)生產(chǎn)模式下的控制
4-手動(dòng)運(yùn)行畫面:這種頁面通常包含機(jī)器的各種操作控制，例如啟動(dòng)、停止、調(diào)節(jié)轉(zhuǎn)速、改變方向等。用戶可以在操作頁面上進(jìn)行各種機(jī)器操作。
5-參數(shù)工藝設(shè)置畫面：這種頁面通常用于工藝生產(chǎn)過程控制，例如化工生產(chǎn)過程中的流程控制、機(jī)械加工生產(chǎn)中的工藝參數(shù)控制等。
6-IO和運(yùn)行狀態(tài)監(jiān)控畫面:這種頁面通常顯示與機(jī)器相關(guān)的監(jiān)控?cái)?shù)據(jù)和狀態(tài)信息，例如溫度、壓力、電流、電壓、轉(zhuǎn)速等。用戶可以通過監(jiān)控頁面了解機(jī)器的運(yùn)行情況，并及時(shí)處理異常情況。
7-報(bào)警畫面:這種頁面會(huì)顯示機(jī)器的故障信息和報(bào)警信息，幫助用戶及時(shí)處理機(jī)器的異常情況。
8-設(shè)備維護(hù)：這種頁面通常包含機(jī)器的維護(hù)信息和操作
9-統(tǒng)計(jì)和流程頁面：這種頁面會(huì)顯示機(jī)器的數(shù)據(jù)統(tǒng)計(jì)信息，例如工作時(shí)間、產(chǎn)量、效率等，幫助用戶進(jìn)行生產(chǎn)計(jì)劃和管理，或者某個(gè)訂單的執(zhí)行進(jìn)度
流程
10-幫助畫面：包含設(shè)備的一些操作信息等幫助，可以考慮添加二維碼的方式引導(dǎo)客戶用手機(jī)查看幫助信息
11-設(shè)備和廠商信息：描述設(shè)備型號(hào)、功能、以及生產(chǎn)商的聯(lián)系方式和介紹等
頁面分區(qū)
1. 標(biāo)題欄：設(shè)備、當(dāng)前畫面標(biāo)題、時(shí)間
2. 狀態(tài)欄：核心狀態(tài)顯示，如通訊情況、是否存在報(bào)警等【根據(jù)需要1和2可以合并】
3. 內(nèi)容區(qū)：根據(jù)當(dāng)前畫面主要顯示區(qū)域，如自動(dòng)操作、手動(dòng)操作、參數(shù)設(shè)置等頁面
4. 導(dǎo)航欄（底部/頂部/彈出式）：導(dǎo)航功能，用于切換畫面
5. 彈出對話框或畫面區(qū)域：根據(jù)需要彈出
當(dāng)然了，從上往下分解，接下來我們也要了解我們的畫面都是由哪些控件和元素組成，這一點(diǎn)非常重要
1. 狀態(tài)指示燈：用于顯示機(jī)器的運(yùn)行狀態(tài)、故障信息等，例如綠色表示正常、紅色表示故障。
2. 文本標(biāo)簽：用于顯示文字信息，例如標(biāo)題、操作說明、狀態(tài)提示等。
3. 按鈕：用于執(zhí)行操作，例如啟動(dòng)、停止、重置、確認(rèn)等。
4. 滑塊條：用于設(shè)置參數(shù)值，例如速度、溫度、壓力等。
5. 復(fù)選框：用于選擇多項(xiàng)操作或設(shè)置選項(xiàng)，例如多選、單選、開關(guān)等。
6. 輸入框：用于用戶輸入信息，例如密碼、用戶名、文本等。
7. 圖標(biāo)：用于表示機(jī)器或設(shè)備的功能或狀態(tài)，例如電機(jī)、傳感器、閥門等。
8. 圖形：用于顯示機(jī)器或設(shè)備的結(jié)構(gòu)或布局，例如機(jī)器圖、平面圖、三維圖等。
9. 警報(bào)：用于顯示機(jī)器的警報(bào)信息或提示信息，例如警告、錯(cuò)誤、成功等。
10. 進(jìn)度條：用于顯示機(jī)器的運(yùn)行進(jìn)度或任務(wù)進(jìn)度，例如下載進(jìn)度、生產(chǎn)進(jìn)度等。
11. IO輸出域
好了，這一期線介紹這么多，主要是一些系統(tǒng)分析和總結(jié)的，這些我認(rèn)為遠(yuǎn)比個(gè)別技巧重要。
下一期，我會(huì)就如何開始畫面布局做一些分析～幫你一步步實(shí)現(xiàn)設(shè)計(jì)審美在線。最后分享一個(gè)幫朋友做的案例吧～

登錄/注冊后可看大圖

登錄/注冊后可看大圖

祝大家愉快～

-----------------------------