智能制造工藝流程線路界面設(shè)計優(yōu)化 發(fā)表于:2024-04-20

html前端 | 交互設(shè)計 | UI設(shè)計

01 設(shè)計亮點

用戶體驗友好

根據(jù)用戶的閱讀以及使用習(xí)慣,將功能點重新布局,保證清晰順暢的操作以及交互反饋

國際化風(fēng)格2.5D插畫

采用符合當(dāng)下審美潮流,保證視覺效果美觀的同時降低了成本,方便復(fù)制及拓展、修改,提升設(shè)計效率,技術(shù)實現(xiàn)便捷

品牌融合度高

遵循VI手冊規(guī)范,融入品牌基因,重點交互以及提示采用品牌色,保證頁面的清新簡潔,操作一目了然。

業(yè)務(wù)表現(xiàn)力強

工控產(chǎn)品重視安全及監(jiān)控,設(shè)計聚焦核心業(yè)務(wù)報警異常情況和數(shù)值的閱讀,將來以局部的小動效使場景更靈動,創(chuàng)造驚喜。

成本低

2d插畫方便拓展、修改,提升設(shè)計開發(fā)效率,技術(shù)實現(xiàn)便捷,落地成本低。

02 設(shè)計思考

突出常用按鈕操作方便 報警信息明確 美觀有條理

功能布局

界面整體是一個畫板,信息本身是無序的,想要傳達(dá)給用戶有效的信息,必須對信息進(jìn)行結(jié)構(gòu)化的組合和分類,并在合適的地方,合適的時間準(zhǔn)確傳達(dá)給客戶。用戶使用場景、使用習(xí)慣、交互方式、行業(yè)屬性都是決定信息排布的決定性影響因素,也是體現(xiàn)軟件專業(yè)性的前置條件

使用環(huán)境

工廠環(huán)境內(nèi)使用,環(huán)境干擾因素多

交互方式

信息查看為主,觸摸屏操作

行業(yè)屬性

制造業(yè),強調(diào)安全和信息傳達(dá)準(zhǔn)確性

分區(qū)

依據(jù)行業(yè)屬性和交互方式,使用環(huán)境的分析結(jié)果,對界面區(qū)域進(jìn)行了相應(yīng)的劃分,通過區(qū)域的大小和顏色區(qū)分信息的重要程度,主要信息+輔助信息,以結(jié)構(gòu)化的方式像用戶輸出多維信息,讓用戶直觀全面獲取信息,為決策和操作提供依據(jù)。

高效

提示層

展示次要信息和必要的輔助信息和提示信息,增強用戶體驗感,避免用戶再界面中迷失

信息層

展示最主要數(shù)據(jù)信息

彈出層

用于強提示,并打斷當(dāng)前信息展示和操作流程,強制提醒用戶,避免發(fā)生一些嚴(yán)重的錯誤

按鈕層

提供交互入口,是人機交互高頻點擊區(qū)

04 界面欣賞