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

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

01 設(shè)計(jì)亮點(diǎn)

用戶(hù)體驗(yàn)友好

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

國(guó)際化風(fēng)格2.5D插畫(huà)

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

品牌融合度高

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

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

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

成本低

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

02 設(shè)計(jì)思考

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

功能布局

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

使用環(huán)境

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

交互方式

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

行業(yè)屬性

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

分區(qū)

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