北方華創(chuàng)芯片工業(yè)軟件界面設(shè)計(jì)
發(fā)表于：
01
項(xiàng)目背景
北方華創(chuàng)致力于加快推進(jìn)北方華創(chuàng)向新型制造業(yè)的戰(zhàn)略轉(zhuǎn)型；致力于成為半導(dǎo)體基礎(chǔ)產(chǎn)品領(lǐng)域值得信賴的引領(lǐng)者；致力于提升人類智能生活品質(zhì)；致力于實(shí)現(xiàn)中國(guó)“智造強(qiáng)國(guó)”的夢(mèng)想藍(lán)圖。未來的北方華創(chuàng)，將以半導(dǎo)體基礎(chǔ)產(chǎn)品領(lǐng)域先進(jìn)企業(yè)的姿態(tài)登上世界舞臺(tái)，深耕發(fā)展，引領(lǐng)未來，堅(jiān)持以客戶為中心，以價(jià)值創(chuàng)造者為本，持續(xù)創(chuàng)新，推動(dòng)產(chǎn)業(yè)進(jìn)步，創(chuàng)造無限可能。
北方華創(chuàng)一期所托工業(yè)刻蝕軟件界面設(shè)計(jì)與 WPF 開發(fā)項(xiàng)目，隨著公司標(biāo)準(zhǔn)化軟件平臺(tái)在事業(yè)部產(chǎn)品上的推廣，二期的軟件應(yīng)用逐漸拓展到了刻蝕、薄膜多個(gè)事業(yè)部。蘭亭妙微設(shè)計(jì)師團(tuán)隊(duì)于前期展開深度溝通，廣研相關(guān)競(jìng)品，構(gòu)建全面設(shè)計(jì)思路。一期開發(fā)進(jìn)程中運(yùn)用WPF定制控件開發(fā)技術(shù)，二期對(duì)新增需求進(jìn)行界面設(shè)計(jì)，對(duì)已實(shí)現(xiàn)功能進(jìn)行優(yōu)化完善，精修交互細(xì)節(jié)。通過效果優(yōu)化迭代，使界面渲染、交互效果精益求精。
02
項(xiàng)目概述
產(chǎn)品定位
刻蝕工業(yè)軟件，作為高精度微納加工領(lǐng)域的核心工具，致力于提供全面、高效、精確的刻蝕過程模擬與優(yōu)化解決方案。軟件結(jié)合了先進(jìn)的物理模擬技術(shù)、化學(xué)刻蝕模型和數(shù)據(jù)分析功能，幫助用戶精確控制刻蝕過程，實(shí)現(xiàn)高質(zhì)量、高精度的微納結(jié)構(gòu)制造。
目標(biāo)用戶
刻蝕、薄膜多個(gè)事業(yè)部的主要用戶是各類制造業(yè)企業(yè)和研發(fā)機(jī)構(gòu)，包括半導(dǎo)體、電子器件、光電子器件、集成電路、微納加工等領(lǐng)域。需要進(jìn)行精確的刻蝕工藝來制造各類產(chǎn)品或開展研究，并能夠根據(jù)不同材料和需求進(jìn)行刻蝕工藝參數(shù)的優(yōu)化和調(diào)整。
設(shè)計(jì)風(fēng)格
在設(shè)計(jì)過程中嘗試了九種不同的布局導(dǎo)航方式和深淺的藍(lán)色及風(fēng)格，軟件主要功能是操作部分居多，用戶希望盡量減少顏色的使用以達(dá)到整體界面簡(jiǎn)潔、易用清晰的目的，所以整體的設(shè)計(jì)風(fēng)格采用北方華創(chuàng)有特色的藍(lán)色、簡(jiǎn)潔，扁平化的設(shè)計(jì)。
03
設(shè)計(jì)思維
信息化與工業(yè)化深度融合
作為中國(guó)高端制造企業(yè)的先行者，立足于電子產(chǎn)業(yè)鏈上游，憑借精良品質(zhì)和卓越服務(wù)，為電子信息產(chǎn)業(yè)提供發(fā)展的源動(dòng)力，助推產(chǎn)業(yè)鏈的健康發(fā)展，托起人類智能生活的明天。
現(xiàn)有設(shè)備控制平臺(tái)客戶端框架，已經(jīng)發(fā)布 10 余年，界面框架分發(fā)給不同產(chǎn)品系獨(dú)立維護(hù)，導(dǎo)致公司界面框架沒有形成統(tǒng)一風(fēng)格標(biāo)準(zhǔn)，很多控件被重復(fù)開發(fā)。隨著時(shí)間推移，華創(chuàng)客戶端應(yīng)用與現(xiàn)有其它公司產(chǎn)品相比，在 UI 渲染效果，用戶體驗(yàn)，客戶端應(yīng)用穩(wěn)定性等諸多方面都出現(xiàn)了明顯的技術(shù)差距和用戶體驗(yàn)差距，迫切需要在新一代控制平臺(tái)設(shè)計(jì)的初期，規(guī)范 UI 設(shè)計(jì)標(biāo)準(zhǔn)，向行業(yè)領(lǐng)先技術(shù)發(fā)展趨勢(shì)看齊。
現(xiàn)有設(shè)備控制平臺(tái)客戶端框架，已經(jīng)發(fā)布 10 余年，界面框架分發(fā)給不同產(chǎn)品系獨(dú)立維護(hù)，導(dǎo)致公司界面框架沒有形成統(tǒng)一風(fēng)格標(biāo)準(zhǔn)，很多控件被重復(fù)開發(fā)。隨著時(shí)間推移，華創(chuàng)客戶端應(yīng)用與現(xiàn)有其它公司產(chǎn)品相比，在 UI 渲染效果，用戶體驗(yàn)，客戶端應(yīng)用穩(wěn)定性等諸多方面都出現(xiàn)了明顯的技術(shù)差距和用戶體驗(yàn)差距，迫切需要在新一代控制平臺(tái)設(shè)計(jì)的初期，規(guī)范 UI 設(shè)計(jì)標(biāo)準(zhǔn)，向行業(yè)領(lǐng)先技術(shù)發(fā)展趨勢(shì)看齊。
原產(chǎn)品痛點(diǎn)分析
原產(chǎn)品痛點(diǎn)分析
布局混亂，導(dǎo)致用戶難以理解和找到所需功能,過多的窗口、菜單和選項(xiàng)可能會(huì)給用戶造成困惑，降低使用效率。
缺乏一致性
功能模塊之間缺乏一致性，導(dǎo)致用戶需要重新適應(yīng)每個(gè)模塊的界面和操作方式。增加學(xué)習(xí)成本和誤操作的風(fēng)險(xiǎn)。
交互不合理
操作流程繁瑣、重復(fù)性操作過多、輸入數(shù)據(jù)要求不清晰等，這些都會(huì)增加用戶的工作負(fù)擔(dān)和錯(cuò)誤率。
缺乏美觀性
頁面風(fēng)格過于老舊，不符合現(xiàn)代用戶的審美和使用習(xí)慣，會(huì)給用戶造成不適和困惑。導(dǎo)致使用體驗(yàn)差。
重點(diǎn)功能不突出
不能直接讓用戶了解操作信息，可預(yù)知性較弱。降低用戶的使用效率，增加用戶使用軟件的難度和煩惱。
用戶痛點(diǎn)
首頁機(jī)械工藝信息過多無法全部展示
菜單層級(jí)布局不太友好
圖形分析和數(shù)據(jù)分析沒進(jìn)行對(duì)比展示
機(jī)械工藝狀態(tài)不夠明顯
工藝流程動(dòng)畫數(shù)量不確定
表格種類過多，使用場(chǎng)景不明確、wpf開發(fā)實(shí)現(xiàn)困難
軟件界面元素，圖片設(shè)計(jì)粗糙、使用不便
解決方案
將不常看信息進(jìn)行縮略展示，點(diǎn)擊查看詳情
設(shè)計(jì)多個(gè)版本，進(jìn)行分析，選擇最優(yōu)方案
增加表格和不同圖形切換展示
通過圖像和顏色結(jié)合形成統(tǒng)一規(guī)范
進(jìn)行定制化顯示，目前有的情景都進(jìn)行設(shè)計(jì)
進(jìn)行場(chǎng)景分類，規(guī)范表格樣式,實(shí)現(xiàn)定制化控件
提升軟件的美觀性, 提高用戶體驗(yàn)
設(shè)計(jì)原則和理念
頁面布局
進(jìn)行 UI 設(shè)計(jì)時(shí)需要充分考慮布局的合理化問題。
控件規(guī)范
控件樣式，提示措辭、系統(tǒng)顏色、窗口布局，要遵循統(tǒng)一的標(biāo)準(zhǔn)。
品牌一致
整體風(fēng)格以北方華創(chuàng)的品牌色藍(lán)色為主，突出品牌性。
直觀展示
界面直觀、對(duì)用戶透明，無需過多培訓(xùn)，可直接使用系統(tǒng)。
元素分布
通過界面元素布局，顏色，字體呈現(xiàn)給用戶綜合體驗(yàn)。
便于操作
界面的設(shè)計(jì)滿足功能需求的同時(shí)，注重用戶的使用習(xí)慣
過程稿（已脫敏）首頁共設(shè)計(jì)九個(gè)方案 （因?yàn)楸Ｃ苄裕@里展示的不是最后確定的方案）
方案一 淺色極簡(jiǎn)風(fēng)
界面在設(shè)計(jì)過程中遵循“少即是多”的設(shè)計(jì)原則，盡量刪除用戶操作時(shí)不必要的內(nèi)容，以實(shí)現(xiàn)接口界面的單純化。不使用其他紋理，模塊僅以色塊/大間距/分割線進(jìn)行區(qū)分，保證界面的干凈整潔。
界面在設(shè)計(jì)過程中遵循“少即是多”的設(shè)計(jì)原則，盡量刪除用戶操作時(shí)不必要的內(nèi)容，以實(shí)現(xiàn)接口界面的單純化。不使用其他紋理，模塊僅以色塊/大間距/分割線進(jìn)行區(qū)分，保證界面的干凈整潔。
方案二 穩(wěn)健高效風(fēng)
界面整體以中色調(diào)為基礎(chǔ)，狀態(tài)區(qū)和一二級(jí)菜單為藍(lán)色背景，內(nèi)容區(qū)為淡藍(lán)色背景，頁面的各個(gè)功能區(qū)很清晰。界面采用上下布局，內(nèi)容區(qū)采用左右布局，頂部為三級(jí)導(dǎo)航區(qū)，采用信息流設(shè)計(jì)方式，信息瀏覽高效。
界面整體以中色調(diào)為基礎(chǔ)，狀態(tài)區(qū)和一二級(jí)菜單為藍(lán)色背景，內(nèi)容區(qū)為淡藍(lán)色背景，頁面的各個(gè)功能區(qū)很清晰。界面采用上下布局，內(nèi)容區(qū)采用左右布局，頂部為三級(jí)導(dǎo)航區(qū)，采用信息流設(shè)計(jì)方式，信息瀏覽高效。
方案三 深色科技風(fēng)
頁面整體加入光線，線條，炫酷背景等科技風(fēng)的元素，使頁面看起來復(fù)雜精密，具有科技感。深色的配色可以讓用戶獲得更沉浸的體驗(yàn)，集中用戶的注意力不容易被其他元素干擾，提高用戶的辦公效率。
頁面整體加入光線，線條，炫酷背景等科技風(fēng)的元素，使頁面看起來復(fù)雜精密，具有科技感。深色的配色可以讓用戶獲得更沉浸的體驗(yàn)，集中用戶的注意力不容易被其他元素干擾，提高用戶的辦公效率。
04
設(shè)計(jì)亮點(diǎn)
盒子思維
充分利用盒子思維，通過建立區(qū)域在盒子中的準(zhǔn)確元素定位，將頁面進(jìn)行組件化設(shè)計(jì)，既減少了設(shè)計(jì)過程中的標(biāo)注誤差，也方便后期開發(fā)有效還原設(shè)計(jì)稿。
充分利用盒子思維，通過建立區(qū)域在盒子中的準(zhǔn)確元素定位，將頁面進(jìn)行組件化設(shè)計(jì)，既減少了設(shè)計(jì)過程中的標(biāo)注誤差，也方便后期開發(fā)有效還原設(shè)計(jì)稿。
機(jī)械手不同狀態(tài)繪制，動(dòng)畫效果的設(shè)計(jì)制作
右邊是工作流程中的機(jī)械臂，機(jī)械臂設(shè)計(jì)了不同的臂狀態(tài)，以便用戶后期進(jìn)行替換和復(fù)用，整個(gè)設(shè)計(jì)風(fēng)格也迭代了好幾版，風(fēng)格需要和界面保持統(tǒng)一，同時(shí)還需要體現(xiàn)工業(yè)風(fēng)的特點(diǎn)和機(jī)械臂金屬材質(zhì)的堅(jiān)硬特點(diǎn)。機(jī)械的的不同動(dòng)作構(gòu)成了豐富的動(dòng)畫效果。
右邊是工作流程中的機(jī)械臂，機(jī)械臂設(shè)計(jì)了不同的臂狀態(tài)，以便用戶后期進(jìn)行替換和復(fù)用，整個(gè)設(shè)計(jì)風(fēng)格也迭代了好幾版，風(fēng)格需要和界面保持統(tǒng)一，同時(shí)還需要體現(xiàn)工業(yè)風(fēng)的特點(diǎn)和機(jī)械臂金屬材質(zhì)的堅(jiān)硬特點(diǎn)。機(jī)械的的不同動(dòng)作構(gòu)成了豐富的動(dòng)畫效果。
精益求精
下圖機(jī)械臂操作過程圖的迭代版本的一個(gè)過程，整個(gè)軟件在設(shè)計(jì)過程中，很多細(xì)節(jié)都是通過不斷推敲，版本對(duì)比，最終得出最優(yōu)方案。
下圖機(jī)械臂操作過程圖的迭代版本的一個(gè)過程，整個(gè)軟件在設(shè)計(jì)過程中，很多細(xì)節(jié)都是通過不斷推敲，版本對(duì)比，最終得出最優(yōu)方案。
多維推演與體系化沉淀 —— 以全鏈路考量驅(qū)動(dòng)最優(yōu)決策
在北方華創(chuàng)設(shè)備控制平臺(tái)軟件界面設(shè)計(jì)過程中，團(tuán)隊(duì)始終以 “思慮周全、文檔齊備” 為核心準(zhǔn)則，構(gòu)建了從風(fēng)格探索到方案落地的全流程規(guī)范化體系。
為實(shí)現(xiàn)界面設(shè)計(jì)與工業(yè)刻蝕場(chǎng)景的深度適配，團(tuán)隊(duì)首先展開多維度風(fēng)格推演：從輕擬物風(fēng)格的質(zhì)感表達(dá)、淺色極簡(jiǎn)風(fēng)的 “少即是多” 理念，到契合工業(yè)屬性的藍(lán)綠色科技風(fēng)（兼顧故障場(chǎng)景下的情緒舒緩需求）、以及最終選定的淺色扁平風(fēng)（以藍(lán)白為主色調(diào)，強(qiáng)化 “所見即所得” 的直觀性），每種風(fēng)格均結(jié)合產(chǎn)品定位制作完整設(shè)計(jì) demo，并配套風(fēng)格適配性分析文檔，明確其在信息密度、操作效率、行業(yè)適配度等維度的優(yōu)劣。
同時(shí)，針對(duì)競(jìng)品布局的借鑒與創(chuàng)新，團(tuán)隊(duì)系統(tǒng)梳理了半導(dǎo)體設(shè)備控制軟件領(lǐng)域的主流界面架構(gòu) —— 包括模塊化布局、層級(jí)導(dǎo)航模式、數(shù)據(jù)可視化呈現(xiàn)邏輯等，形成《競(jìng)品分析報(bào)告》，涵蓋 12 類典型布局的優(yōu)缺點(diǎn)對(duì)比及適配場(chǎng)景建議。在此基礎(chǔ)上，結(jié)合北方華創(chuàng) “減少頁面層級(jí)、輕量化體驗(yàn)” 的核心需求，衍生出 9 版差異化布局方案：方案一以色塊與間距實(shí)現(xiàn)模塊區(qū)隔，方案二通過半透明背景增強(qiáng)空間感，方案三以科技風(fēng)元素強(qiáng)化精密感…..，最終通過《方案評(píng)估矩陣》,確定最優(yōu)方向。
整個(gè)過程中，所有設(shè)計(jì)決策均以文檔為支撐：從初期的《風(fēng)格推演手冊(cè)》《競(jìng)品分析報(bào)告》，到中期的《版本迭代記錄》（含每次修改的邏輯說明與效果對(duì)比），再到后期的《方案定稿說明》，累計(jì)形成20余份相關(guān)文檔，既確保了設(shè)計(jì)邏輯的可追溯性，也為后續(xù)開發(fā)與版本迭代提供了清晰依據(jù)。這種 “先發(fā)散探索、再聚焦落地” 的模式，不僅讓最終方案兼具創(chuàng)新性與實(shí)用性，更構(gòu)建了可復(fù)用的設(shè)計(jì)決策體系。
設(shè)計(jì)體系建立
設(shè)計(jì)落地后，團(tuán)隊(duì)同步構(gòu)建了覆蓋 “設(shè)計(jì) - 開發(fā) - 復(fù)用” 全鏈路的統(tǒng)一設(shè)計(jì)體系規(guī)范。該體系不僅為開發(fā)環(huán)節(jié)提供了精準(zhǔn)的視覺還原依據(jù) —— 從控件樣式到交互邏輯均形成標(biāo)準(zhǔn)化指引，更通過組件化架構(gòu)打破產(chǎn)品線壁壘，使設(shè)計(jì)資產(chǎn)能無縫復(fù)用于同系列其他產(chǎn)品，從根源上解決了此前 “各產(chǎn)品系獨(dú)立維護(hù)、界面風(fēng)格零散” 的問題。體系搭建以原子設(shè)計(jì)理論為核心框架，結(jié)合北方華創(chuàng)的業(yè)務(wù)場(chǎng)景特性，將設(shè)計(jì)資產(chǎn)按顆粒度劃分為三級(jí)：
基礎(chǔ)組件：如單選框、輸入框、反饋提示等最小功能單元，統(tǒng)一控件樣式、配色及交互規(guī)則；
業(yè)務(wù)組件：基于基礎(chǔ)組件組合而成的場(chǎng)景化模塊，例如工藝流程進(jìn)度條、設(shè)備狀態(tài)監(jiān)控卡片等，貼合刻蝕設(shè)備的操作需求；
典型頁面組件：作為最高層級(jí)的復(fù)用單元，整合基礎(chǔ)組件與業(yè)務(wù)組件形成完整頁面框架（如 “左樹右表” 布局、數(shù)據(jù)監(jiān)控看板等）。這類組件不僅明確了內(nèi)容呈現(xiàn)邏輯，更預(yù)設(shè)了核心操作路徑 —— 以 “左樹右表” 為例，左側(cè)設(shè)備層級(jí)樹與右側(cè)參數(shù)表格的聯(lián)動(dòng)規(guī)則、數(shù)據(jù)篩選交互均形成標(biāo)準(zhǔn)，既保證了不同產(chǎn)品線的體驗(yàn)一致性，也大幅降低了新頁面的設(shè)計(jì)與開發(fā)成本。
