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