产品定位
为提供高精度的刻蚀解决方案，适用于多个行业和领域，如半导体、光电子、生物医学等。可以满足不同行业的刻蚀需求，并提供相应的定制化功能和参数设置。
北方华创致力于加快推进北方华创向新型制造业的战略转型；致力于成为半导体基础产品领域值得信赖的引领者；致力于提升人类智能生活品质；致力于实现中国“智造强国”的梦想蓝图。未来的北方华创，将以半导体基础产品领域先进企业的姿态登上世界舞台，深耕发展，引领未来，坚持以客户为中心，以价值创造者为本，持续创新，推动产业进步，创造无限可能。
北方华创委托蓝蓝设计负责一款工业刻蚀软件的界面视觉设计和wpf前端开发。蓝蓝设计人员通过前期详细沟通，参考大量相关竞品。在设计过程中双方保持高效沟通，整个软件有50页左右，采用分批设计的模式，在设计过程我们还对过程版本进行保留，不断推敲打磨最后确定一个最优方案。开发过程中我们也运用到了控件的WPF定制开发。好的产品是需要双方建立同理心的基础上共同创作出来的。
目标用户
刻蚀软件的主要用户是各类制造业企业和研发机构，包括半导体、电子器件、光电子器件、集成电路、微纳加工等领域。需要进行精确的刻蚀工艺来制造各类产品或开展研究，并能够根据不同材料和需求进行刻蚀工艺参数的优化和调整。
设计风格
界面整体采用蓝和白两个色系，页面整体给人以干净整洁的感觉，在设计过程中遵循“所见即所得”的设计原则，通过扁平的设计方式，将信息更扁平、直接地呈现在客户面前。同时最大化地减少页面层级，使用户产生轻量化的使用感受。
项目背景
北方华创始终秉承“推动产业进步，创造无限可能”的企业使命，立足半导体基础产品领域，深耕半导体装备、真空及锂电装备和精密电子元器件等业务领域，产品广泛应用于集成电路、先进封装、半导体照明、第三代半导体、新能源光伏、新型显示、真空热处理、新能源锂电等领域，致力于成为半导体基础产品领域值得信赖的引领者。 现有设备控制平台客户端框架，已经发布 10 余年，界面框架分发给不同产品系独立维护，导致公司界面框架没有形成统一风格标准，很多控件被重复开发。随着时间推移，华创客户端应用与现有其它公司产品相比，在 UI 渲染效果，用户体验，客户端应用稳定性等诸多方面都出现了明显的技术差距和用户体验差距，迫切需要在新一代控制平台设计的初期，规范 UI 设计标准，向行业领先技术发展趋势看齐。
痛点分析
-
复杂混乱的布局
布局混乱，导致用户难以理解和找到所需功能,过多的窗口、菜单和选项可能会给用户造成困惑，降低使用效率
-
缺乏一致性
功能模块之间缺乏一致性，导致用户需要重新适应每个模块的界面和操作方式。增加学习成本和误操作的风险。
-
交互不合理
操作流程繁琐、重复性操作过多、输入数据要求不清晰等，这些都会增加用户的工作负担和错误率。
-
缺乏美观性
页面风格过于老旧，不符合现代用户的审美和使用习惯，会给用户造成不适和困惑。导致使用体验差。
-
重点功能不突出
不能直接让用户了解操作信息，可预知性较弱。降低用户的使用效率，增加用户使用软件的难度和烦恼。
场景挑战
复杂性：刻蚀软件通常需要处理非常复杂的图像和模型，因此软件界面的设计需要能够清晰展示所有相关信息，并让用户能够快速、准确地获取需要的信息。这意味着需要设计出简单直观、易于理解的界面，同时尽可能避免让用户感到不适或疲劳。
动态性：刻蚀软件在操作过程中可能会出现许多动态变化，例如，加工进度的实时更新、图形模拟效果等等。这就要求软件界面需要能够快速响应并展示这些动态变化，同时保证界面的稳定性和流畅性。
多平台适配：刻蚀软件在不同的平台和设备上运行时，需要保证用户体验的一致性和稳定性。因此，软件界面设计需要考虑多个平台上的不同分辨率、不同屏幕尺寸和不同操作系统的差异，并确保软件能够适配不同的设备。
方案价值
提升软件的美观性：美观的软件界面可以提供更愉悦的用户体验。清晰、直观的布局、合适的颜色搭配和美观的图标可以帮助用户更容易地理解和使用软件，减少学习成本和操作困难，从而提高用户满意度。
提高用户体验：通过提升用户体验，用户更容易学习和使用软件，减少操作困难和学习成本。他们能够更快速地完成任务，获得预期的结果。这样可以提高用户的满意度，使其更愿意长期使用和推荐该软件。
- 首页机械工艺信息过多无法全部展示
- 菜单层级布局不太友好
- 图形分析和数据分析没进行对比展示
- 机械工艺状态不够明显
- 工艺流程动画数量不确定
- 表格种类过多，使用场景不明确
- wpf开发，多个控件需要自定义，实现困难
- 将不常看信息进行缩略展示，点击查看详情
- 设计多个版本，进行分析，选择最优方案
- 增加表格和不同图形切换展示
- 通过图像和颜色结合形成统一规范
- 进行定制化显示，目前有的情景都进行设计
- 进行场景分类，规范表格样式
- 实现定制化控件
-
页面布局
进行 UI 设计时需要充分考虑布局的合理化问题，
-
品牌一致
整体风格以北方华创的品牌色蓝色为主， 突出品牌性。
-
元素分布
通过界面元素布局，颜色，字体呈现给 用户综合体验。
-
控件规范
控件样式，提示措辞、系统颜色、窗口 布局，要遵循统一的标准。
-
直观展示
界面直观、对用户透明，无需过 多培训， 可直接使用系统。
-
便于操作
界面的设计满足功能需求的同时，注重用 户的使用习惯
设计原则和理念
过程稿
在设计初期我们从不同的风格和布局考虑做了很多版本的设计，这是其中的三个方案。
方案一 界面在设计过程中遵循“少即是多”的设计原则，尽量删除用户操作时不必要的内容，以实现接口界面的单纯化。不使用其他纹理，模块仅以色块/大间距/分割线进行区分，保证界面的干净整洁。
方案二 页面整体采用蓝绿色，用户使用软件的场景一般是出故障时，而蓝绿色可以缓解用户焦躁烦闷的情绪。页面加入透视感背景图，内容区以半透明状透出背景使页面显得更有空间感。
方案三 页面整体加入光线，线条，炫酷背景等科技风的元素，使页面看起来复杂精密，具有科技感。深色的配色可以让用户获得更沉浸的体验，集中用户的注意力不容易被其他元素干扰，提高用户的办公效率。
方案亮点
盒子思维
充分利用盒子思维，通过建立区域在盒子中的准确元素定位，将页面进行组件化设计，既减少了设计过程中的标注误差，也方便后期开发有效还原设计稿。
机械手不同状态绘制
右边是工作流程中的机械臂，机械臂设计了不同的臂状态，以便用户后期进行替换和复用，整个设计风格也迭代了好几版，风格需要和界面保持统一，同时还需要体现工业风的特点和机械臂金属材质的坚硬特点。
版本迭代
下图机械臂操作过程图的迭代版本的一个过程，整个软件在设计过程中，很多细节都是通过不断推敲，版本对比，最终得出最优方案。在主要界面的设计工作中，双方在三个月期间基本上每晚8-10点讨论2个小时，白天工作，晚上沟通。
机械手不同状态绘制
右边是工作流程中的机械臂，机械臂设计了不同的臂状态，以便用户后期 进行替换和复用，整个设计风格也迭代了好几版，风格需要和界面保持统 一，同时还需要体现工业风的特点和机械臂金属材质的坚硬特点。
设计体系UI规范的建立
设计完成后我们还制定了统一的设计体系规范，UI规范不仅可以帮助开发人员更好的的还原设计图样式，还便于用户在同一系列的其它产品线上应用。 结合实际业务场景和原子设计理论，将组件划分为不同颗粒度：基础组件、业务组件、典型页面组件，以适用于不同研发场景使用。梳理具有业务特点的典型页面，相比基础组件和业务组件，典型页面更加具体，为用户提供具有代表性的内容和框架，并准确描述用户最终看到的内容。如列表和左树右表典型页面组件，作为最为常见的页面结构，各业务场景可复用页面组件，保证了页面组件内各基础组件的一致性，最大程度的实现不同的产品线产品中页面体验的一致性。
设计作品物流信息化设计
设计作品应急大屏设计
设计作品应急大屏设计
设计作品应急大屏设计
设计作品大屏设计
