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