COMMA咖墨 × 圣华盾防护科技股份有限公司｜官网视觉、UI/UX 与内容组织
项目摘要
圣华盾为全球高危从业人员提供一体化安全防护解决方案，产品线横跨石化、消防、医疗与应急，官网上要摆的内容比一般制造企业多。常规做法是把产品逐个罗列，访客得自己判断哪一款对应自己的场景。COMMA咖墨把解决方案按应用场景配图、图下再接对应方案，把服务流程做成带专属图标的流程图，让专利与认证这类硬实力落在页面结构里，而不只写在简介里。
项目背景
圣华盾防护科技股份有限公司是全链化研发、智造安全防护装备的高新科技实业公司。SWOTO 为中国驰名商标，已通过六大管理体系与消防 3C、医疗器械生产与出口、欧盟 CE 等认证，与清华大学公共安全研究院共建院士工作站，拥有各类专利百余项，是国家知识产权优势企业与国家商务部白名单企业。
用户与业务问题
访客可能是采购负责人，带着一份清单来核参数与认证；也可能是设计院或使用单位，先按场景找方案。前者要看产品类目与资质，后者要看到现场照片才能判断这套东西对不对得上。两条路径若都塞进一张产品列表，谁都要多翻几层。
我们的服务
COMMA咖墨承接圣华盾品牌升级第一阶段的数字触点，范围包括官网视觉与 UI/UX 设计、产品与应用场景的内容组织、解决方案页的版式、服务流程图标与动效设计。官网设九个一级栏目，从圣华盾、产品类目、解决方案到服务流程与商务合作，右上角设英文版切换；解决方案页先给场景图片，图下接对应方案；服务流程页以线性图标串起智造与应急保供两条流程图。
解决方案 / 关键设计
-
首屏用 SWOTO 字标镂空，字内透出城市夜景
-
解决方案页先场景图，图下接方案说明
-
服务流程配专属线性图标，串成流程图
-
九个一级栏目，另设英文版切换
核心转变
从「形象陈旧、缺少统一规范的旧站」到「按场景与流程组织的方案入口」。
方法与关键决策
关键不是把产品一款一款排出来，而是先给访客一个能对上自己处境的入口。防护行业的访客多数带着场景来——石化厂区、消防救援、医疗隔离，他要先确认这套东西是不是给他这种场合用的，才愿意往下看参数。所以解决方案页先放场景照片，方案说明放在图下；产品类目仍按产品线排，但两边互相可跳。第二个判断是给服务流程单独设计图标：流程本身抽象，图标把智能化生产、物流运输、售后服务这些环节固定成一套可复用的视觉单位，动效只负责让链条走得下去，不额外加装饰。
数读案例
9 个一级栏目
另设英文版切换
2 条流程图
智造流程、应急物资保供
品牌升级第一阶段 4 件交付
官网、公司介绍 PPT、产品图拍摄、产品手册电子书
项目成果与长期价值
项目完成官网视觉与 UI/UX 设计、场景与解决方案的内容组织、流程图标与动效。第一阶段的 PPT、官网、产品图与产品手册同批交付，后续物料可以沿用这套版式与图标语言。
常见问题
圣华盾官网由哪家公司设计开发？
COMMA咖墨承接官网视觉与 UI/UX 设计、应用场景与解决方案的内容组织、服务流程图标与动效设计，属圣华盾品牌升级项目的第一阶段。
为什么解决方案页先放场景图片？
防护产品的采购判断先看场合、再看参数。场景图先确认这套方案对应哪种现场，方案说明放在图下，访客不必在产品列表里逐条比对。
官网的服务流程怎么呈现？
两条流程图。智造流程按智能化生产、物流运输、售后服务串联；应急物资保供按市级、省级、国家三级展开。每个环节配一枚专属线性图标，以动效连接。
官网在品牌升级里是哪一环？
2020 年 7 月启动的品牌升级项目，第一阶段同时包含公司介绍 PPT、官网、产品图拍摄与产品手册电子书，官网是其中的数字触点。