北方华创芯片工业软件界面设计
发表于：
01
项目背景
北方华创致力于加快推进北方华创向新型制造业的战略转型；致力于成为半导体基础产品领域值得信赖的引领者；致力于提升人类智能生活品质；致力于实现中国“智造强国”的梦想蓝图。未来的北方华创，将以半导体基础产品领域先进企业的姿态登上世界舞台，深耕发展，引领未来，坚持以客户为中心，以价值创造者为本，持续创新，推动产业进步，创造无限可能。
北方华创一期所托工业刻蚀软件界面设计与 WPF 开发项目，随着公司标准化软件平台在事业部产品上的推广，二期的软件应用逐渐拓展到了刻蚀、薄膜多个事业部。兰亭妙微设计师团队于前期展开深度沟通，广研相关竞品，构建全面设计思路。一期开发进程中运用WPF定制控件开发技术，二期对新增需求进行界面设计，对已实现功能进行优化完善，精修交互细节。通过效果优化迭代，使界面渲染、交互效果精益求精。
02
项目概述
产品定位
刻蚀工业软件，作为高精度微纳加工领域的核心工具，致力于提供全面、高效、精确的刻蚀过程模拟与优化解决方案。软件结合了先进的物理模拟技术、化学刻蚀模型和数据分析功能，帮助用户精确控制刻蚀过程，实现高质量、高精度的微纳结构制造。
目标用户
刻蚀、薄膜多个事业部的主要用户是各类制造业企业和研发机构，包括半导体、电子器件、光电子器件、集成电路、微纳加工等领域。需要进行精确的刻蚀工艺来制造各类产品或开展研究，并能够根据不同材料和需求进行刻蚀工艺参数的优化和调整。
设计风格
在设计过程中尝试了九种不同的布局导航方式和深浅的蓝色及风格，软件主要功能是操作部分居多，用户希望尽量减少颜色的使用以达到整体界面简洁、易用清晰的目的，所以整体的设计风格采用北方华创有特色的蓝色、简洁，扁平化的设计。
03
设计思维
信息化与工业化深度融合
作为中国高端制造企业的先行者，立足于电子产业链上游，凭借精良品质和卓越服务，为电子信息产业提供发展的源动力，助推产业链的健康发展，托起人类智能生活的明天。
现有设备控制平台客户端框架，已经发布 10 余年，界面框架分发给不同产品系独立维护，导致公司界面框架没有形成统一风格标准，很多控件被重复开发。随着时间推移，华创客户端应用与现有其它公司产品相比，在 UI 渲染效果，用户体验，客户端应用稳定性等诸多方面都出现了明显的技术差距和用户体验差距，迫切需要在新一代控制平台设计的初期，规范 UI 设计标准，向行业领先技术发展趋势看齐。
现有设备控制平台客户端框架，已经发布 10 余年，界面框架分发给不同产品系独立维护，导致公司界面框架没有形成统一风格标准，很多控件被重复开发。随着时间推移，华创客户端应用与现有其它公司产品相比，在 UI 渲染效果，用户体验，客户端应用稳定性等诸多方面都出现了明显的技术差距和用户体验差距，迫切需要在新一代控制平台设计的初期，规范 UI 设计标准，向行业领先技术发展趋势看齐。
原产品痛点分析
原产品痛点分析
布局混乱，导致用户难以理解和找到所需功能,过多的窗口、菜单和选项可能会给用户造成困惑，降低使用效率。
缺乏一致性
功能模块之间缺乏一致性，导致用户需要重新适应每个模块的界面和操作方式。增加学习成本和误操作的风险。
交互不合理
操作流程繁琐、重复性操作过多、输入数据要求不清晰等，这些都会增加用户的工作负担和错误率。
缺乏美观性
页面风格过于老旧，不符合现代用户的审美和使用习惯，会给用户造成不适和困惑。导致使用体验差。
重点功能不突出
不能直接让用户了解操作信息，可预知性较弱。降低用户的使用效率，增加用户使用软件的难度和烦恼。
用户痛点
首页机械工艺信息过多无法全部展示
菜单层级布局不太友好
图形分析和数据分析没进行对比展示
机械工艺状态不够明显
工艺流程动画数量不确定
表格种类过多，使用场景不明确、wpf开发实现困难
软件界面元素，图片设计粗糙、使用不便
解决方案
将不常看信息进行缩略展示，点击查看详情
设计多个版本，进行分析，选择最优方案
增加表格和不同图形切换展示
通过图像和颜色结合形成统一规范
进行定制化显示，目前有的情景都进行设计
进行场景分类，规范表格样式,实现定制化控件
提升软件的美观性, 提高用户体验
设计原则和理念
页面布局
进行 UI 设计时需要充分考虑布局的合理化问题。
控件规范
控件样式，提示措辞、系统颜色、窗口布局，要遵循统一的标准。
品牌一致
整体风格以北方华创的品牌色蓝色为主，突出品牌性。
直观展示
界面直观、对用户透明，无需过多培训，可直接使用系统。
元素分布
通过界面元素布局，颜色，字体呈现给用户综合体验。
便于操作
界面的设计满足功能需求的同时，注重用户的使用习惯
过程稿（已脱敏）首页共设计九个方案 （因为保密性，这里展示的不是最后确定的方案）
方案一 浅色极简风
界面在设计过程中遵循“少即是多”的设计原则，尽量删除用户操作时不必要的内容，以实现接口界面的单纯化。不使用其他纹理，模块仅以色块/大间距/分割线进行区分，保证界面的干净整洁。
界面在设计过程中遵循“少即是多”的设计原则，尽量删除用户操作时不必要的内容，以实现接口界面的单纯化。不使用其他纹理，模块仅以色块/大间距/分割线进行区分，保证界面的干净整洁。
方案二 稳健高效风
界面整体以中色调为基础，状态区和一二级菜单为蓝色背景，内容区为淡蓝色背景，页面的各个功能区很清晰。界面采用上下布局，内容区采用左右布局，顶部为三级导航区，采用信息流设计方式，信息浏览高效。
界面整体以中色调为基础，状态区和一二级菜单为蓝色背景，内容区为淡蓝色背景，页面的各个功能区很清晰。界面采用上下布局，内容区采用左右布局，顶部为三级导航区，采用信息流设计方式，信息浏览高效。
方案三 深色科技风
页面整体加入光线，线条，炫酷背景等科技风的元素，使页面看起来复杂精密，具有科技感。深色的配色可以让用户获得更沉浸的体验，集中用户的注意力不容易被其他元素干扰，提高用户的办公效率。
页面整体加入光线，线条，炫酷背景等科技风的元素，使页面看起来复杂精密，具有科技感。深色的配色可以让用户获得更沉浸的体验，集中用户的注意力不容易被其他元素干扰，提高用户的办公效率。
04
设计亮点
盒子思维
充分利用盒子思维，通过建立区域在盒子中的准确元素定位，将页面进行组件化设计，既减少了设计过程中的标注误差，也方便后期开发有效还原设计稿。
充分利用盒子思维，通过建立区域在盒子中的准确元素定位，将页面进行组件化设计，既减少了设计过程中的标注误差，也方便后期开发有效还原设计稿。
机械手不同状态绘制，动画效果的设计制作
右边是工作流程中的机械臂，机械臂设计了不同的臂状态，以便用户后期进行替换和复用，整个设计风格也迭代了好几版，风格需要和界面保持统一，同时还需要体现工业风的特点和机械臂金属材质的坚硬特点。机械的的不同动作构成了丰富的动画效果。
右边是工作流程中的机械臂，机械臂设计了不同的臂状态，以便用户后期进行替换和复用，整个设计风格也迭代了好几版，风格需要和界面保持统一，同时还需要体现工业风的特点和机械臂金属材质的坚硬特点。机械的的不同动作构成了丰富的动画效果。
精益求精
下图机械臂操作过程图的迭代版本的一个过程，整个软件在设计过程中，很多细节都是通过不断推敲，版本对比，最终得出最优方案。
下图机械臂操作过程图的迭代版本的一个过程，整个软件在设计过程中，很多细节都是通过不断推敲，版本对比，最终得出最优方案。
多维推演与体系化沉淀 —— 以全链路考量驱动最优决策
在北方华创设备控制平台软件界面设计过程中，团队始终以 “思虑周全、文档齐备” 为核心准则，构建了从风格探索到方案落地的全流程规范化体系。
为实现界面设计与工业刻蚀场景的深度适配，团队首先展开多维度风格推演：从轻拟物风格的质感表达、浅色极简风的 “少即是多” 理念，到契合工业属性的蓝绿色科技风（兼顾故障场景下的情绪舒缓需求）、以及最终选定的浅色扁平风（以蓝白为主色调，强化 “所见即所得” 的直观性），每种风格均结合产品定位制作完整设计 demo，并配套风格适配性分析文档，明确其在信息密度、操作效率、行业适配度等维度的优劣。
同时，针对竞品布局的借鉴与创新，团队系统梳理了半导体设备控制软件领域的主流界面架构 —— 包括模块化布局、层级导航模式、数据可视化呈现逻辑等，形成《竞品分析报告》，涵盖 12 类典型布局的优缺点对比及适配场景建议。在此基础上，结合北方华创 “减少页面层级、轻量化体验” 的核心需求，衍生出 9 版差异化布局方案：方案一以色块与间距实现模块区隔，方案二通过半透明背景增强空间感，方案三以科技风元素强化精密感…..，最终通过《方案评估矩阵》,确定最优方向。
整个过程中，所有设计决策均以文档为支撑：从初期的《风格推演手册》《竞品分析报告》，到中期的《版本迭代记录》（含每次修改的逻辑说明与效果对比），再到后期的《方案定稿说明》，累计形成20余份相关文档，既确保了设计逻辑的可追溯性，也为后续开发与版本迭代提供了清晰依据。这种 “先发散探索、再聚焦落地” 的模式，不仅让最终方案兼具创新性与实用性，更构建了可复用的设计决策体系。
设计体系建立
设计落地后，团队同步构建了覆盖 “设计 - 开发 - 复用” 全链路的统一设计体系规范。该体系不仅为开发环节提供了精准的视觉还原依据 —— 从控件样式到交互逻辑均形成标准化指引，更通过组件化架构打破产品线壁垒，使设计资产能无缝复用于同系列其他产品，从根源上解决了此前 “各产品系独立维护、界面风格零散” 的问题。体系搭建以原子设计理论为核心框架，结合北方华创的业务场景特性，将设计资产按颗粒度划分为三级：
基础组件：如单选框、输入框、反馈提示等最小功能单元，统一控件样式、配色及交互规则；
业务组件：基于基础组件组合而成的场景化模块，例如工艺流程进度条、设备状态监控卡片等，贴合刻蚀设备的操作需求；
典型页面组件：作为最高层级的复用单元，整合基础组件与业务组件形成完整页面框架（如 “左树右表” 布局、数据监控看板等）。这类组件不仅明确了内容呈现逻辑，更预设了核心操作路径 —— 以 “左树右表” 为例，左侧设备层级树与右侧参数表格的联动规则、数据筛选交互均形成标准，既保证了不同产品线的体验一致性，也大幅降低了新页面的设计与开发成本。
