cover色块承托
- 用于
- 封面、首屏、活动主视觉
- 做法
- 色块 1/4，连结形按上一节的规则放在外角。
- 限制
- 一份物料只用在第一页
第一部分
品牌基础
宣传物料、展会、包装和所有对外视觉。图形和版式按比例缩放。
三句话，同一个姿态
德昌的使命、愿景和价值观，最后都落在一个动作上：承托。这是整套视觉的出发点。
德昌是托住这个关系的底座。
不是卖产品，是承载整个救治体系。
在生死面前，负责二字是托举起来的。
形：连结形
两个方块一上一下、彼此支撑，是「承托」动作的图形化。
则：1/4 法则
圆角为边长的 1/4，色块占版面的 1/4。精准的比例秩序，是「承托」分寸感的量化。
黑色版，用于浅色背景
反白版，用于深色和品牌蓝背景
合作品牌
小于最小尺寸时，「医软智能」的笔画和 ® 标会糊在一起。空间不够时不放 Logo，改用文字「德昌科技」。
不拉伸变形
不改颜色
不倾斜
不放在复杂背景上
四个核心图形，各管一件事
图形都由圆角方块组合而成，圆角等于边长的四分之一。每个图形有固定的用途，不混用。本页的开篇、目录标记、旁注和页脚底纹，分别用了这四个图形。放进色块时的尺寸和位置，见「版式网格」。
连结形强化识别
封面、主视觉等需要突出品牌的场景。
导引形引导视线
卖点列表、目录，带着视线往下走。
承托形承托内容
标题容器和版式的结构骨架。
聚合形补充空白
底纹平铺、背景纹理。
两级圆角
色块比例
13
13
色块占 1 份，内容占 3 份，横版竖版都适用。只用于封面、首屏和章节页。
裁切
色块里：角落溢出露出的方块三边留白相等
窄条里：完整内置四周留白相等，反白
完整居中呆板，失去张力
贴边无留白和边缘、内容挤在一起
德昌蓝，唯一的品牌主色
宣传物料、展会、包装和产品界面都用这一个蓝。点击色块可复制色值。
旧版 VI 中的其他蓝色和青绿色，只用于已有的印刷物料，新设计统一使用德昌蓝。
印刷：同一个蓝，在纸上也一样
德昌蓝在不同纸张上会偏深或偏灰。下面是常见医疗品牌的通用做法，首批印刷前请与印刷厂打样确认。
- 专色
- 大面积德昌蓝优先用专色印刷。涂布纸对照 Pantone C 色卡，非涂布纸对照 U 色卡，以打样为准。
- 四色
- 不用专色时按 CMYK 84 44 0 33 输出。同一批物料用同一家印刷厂，减少色差。
- 黑字
- 正文黑字用单色 K100，不用四色叠黑，小字才不会套印发虚。
- 文件
- 交付 PDF/X-4，出血 3 mm，图片 300 dpi，字体转曲或嵌入。
常用纸张和工艺
| 物料 | 纸张 | 克重 | 工艺 |
|---|---|---|---|
| 名片 | 哑粉纸或白色特种纸 | 300–350 g | 哑膜；Logo 可局部 UV |
| 彩页、折页 | 哑粉纸 | 157–200 g | 折页先压痕再折 |
| 画册 | 封面哑粉纸，内页哑粉纸 | 250 g / 157 g | 封面哑膜，胶装或骑马钉 |
| 海报 | 哑粉纸 | 157–200 g | 不覆膜或哑膜 |
| 易拉宝、展板 | PP 合成纸或相纸 | — | 哑面，背胶 |
| 包装盒 | 白卡纸或灰底白板纸 | 300–350 g | 哑膜，不烫金 |
| 说明书 | 双胶纸 | 80–105 g | 不覆膜，方便书写和翻阅 |
为什么优先哑面医院灯光强，亮膜反光会盖住文字。哑面更稳重，也更符合医疗产品克制可信的气质。烫金、镭射等装饰工艺不用。
宣传物料用两种字体
标题用阿里巴巴普惠体，粗体有力量，适合远看。正文和说明书用思源黑体，长段落读起来不累。两种字体都可以免费商用。
图片：真实、克制、有温度
德昌的图片只拍三类：临床场景、产品、人。每一张都要真实可信，让医护人员看到时觉得「这就是我的工作现场」。
临床场景
真实的 ICU、急诊和病房，设备在用、有人在工作。自然光或柔和的室内光，画面整洁。
产品
白底或浅灰底，三分之二侧视角，阴影柔和。屏幕亮起并显示示例数据，去掉表面反光和指纹。
人
医护人员专注工作的瞬间，不看镜头、不摆姿势。服装和操作符合临床规范。
这样拍
- 色调偏冷的中性白，和德昌蓝协调
- 画面留出放标题的干净区域
- 一张图只讲一件事
- 出镜人员签署肖像授权
不这样拍
- 血迹、伤口、手术特写和痛苦表情
- 能认出患者的面部、姓名、病历和屏幕上的患者信息
- 一看就是图库的摆拍和夸张笑容
- 暖黄滤镜、重度修图、和产品无关的装饰
患者隐私优先医院现场拍摄前取得院方同意。画面里只要出现患者，就不露正脸，并遮挡监护屏、腕带和床头卡上的个人信息。
看得清›认得出是德昌›版面好看三者冲突时按这个顺序取舍。我们的读者多是 35 岁以上的医护人员和管理者，标题要一眼看清。
- 切出色块大幅面占 1/4，手机物料占 1/8，贴边出血。只有封面、首屏和章节页需要这一步，内页直接从第 2 步开始。
- 留边距内容区四周留 短边 ÷ 16。
- 分 4 栏排内容栏间距是边距的一半。内容多的彩页可以细分成 8 栏。
大幅面PPT、彩页、折页、海报、易拉宝。会停下来看，品牌比例完整保留。
- 色块
- 1/4，只用于封面、首屏和章节页
- 主标题
- 短边 ÷ 12
- 正文
- 按观看距离设下限，见尺寸表
手机物料公众号头图、朋友圈图。一划而过，标题优先。
- 色块
- 底部 1/8 窄条
- 主标题
- 手机上不小于 24 号
- 字数
- 每行不超过 6 个字，最多两行
- Logo
- 朋友圈图放在窄条里；公众号头图不放
大幅面
色块里的辅助图形用连结形，从色块的外角溢出。露出的方块到色块三条边的距离都等于页面边距，和内容区的边距是同一个数。
- 大小
- 图形边长 = 2 ×（色块短边 − 2 × 边距）
- 溢出
- 向两条外边各溢出：色块短边 − 3 × 边距
- 位置
- 离内容最远的外角：左侧色块放左下，顶部色块放右上，底部色块放右下
- 颜色
- 蓝 70，比色块深一级
- 窄条
- 不裁切：图形完整放在窄条内，高度为窄条一半，右侧和上下留白相等，反白
手机物料
蓝色虚线框是分享卡片的范围：文章转发时，头图会被裁成正方形，默认取中间一块。标题整块放进这个框里。
边距栏转发时的显示区
常用物料尺寸表
PPT 的数值已换成 PowerPoint 里的单位，可以直接输入。三折页按每一折计算，内折页的宽度以印刷厂刀版为准。
排版细则改一次就长期有效，也是检查稿子时最先看的几项。
- 断行
- 标题一律手动断行，按意思断，不允许最后一行只剩一个字
- 字体
- 对外物料只用阿里巴巴普惠体和思源黑体，不用微软雅黑（商业印刷有授权风险）
- PPT
- 发给客户前嵌入字体，或把封面标题转成图片
- 二维码
- 白底黑码，四周留白；扫码距离约为码边长的 10 倍
先看内容，再选版式
4 种基础版式，加上章节页、数据页和金句页的 8 种，共 12 种，都用同一套网格，换的只是构图。按「我的内容是什么」来选，不按好不好看来选。每种版式有固定代号，和同事、AI 沟通时用这个代号。
在 Figma 中查看| 页面 | 你的内容是 | 用这个 | 代号 | 不适用时 |
|---|---|---|---|---|
| 基础 | 封面、首屏、活动主视觉 | 色块承托 | cover | 一份物料只用在第一页 |
| 产品图、会场照片、客户现场 | 整版大图 + 窄条 | photo | 照片太亮太杂时，标题移到窄条上方的白底区 | |
| 卖点、目录、服务清单 | 导引形列表 | list | 超过 5 项改用 grid 的表格 | |
| 参数表、正文、说明 | 纯网格内页 | grid | — | |
| 章节页 | 长篇 PPT、手册的章节页 | 章节导航 | chapter-nav | 超过 6 章改用 list 做目录页 |
| 数据页 | 只有一个要记住的数字 | 一个数字 | data-single | 一份 PPT 最多用 2～3 页 |
| 一个当前值，加上它的历史变化 | 数字加走势 | data-trend | 少于 4 个点改用 data-single | |
| 一个比例，比如"10 家里有 9 家" | 重复图形比例 | data-ratio | 化不成整数的比例改用 data-single 或 data-trend | |
| 两个数字并列对照 | 两个数字 | data-pair | 3 个以上数字改用 grid 的参数表 | |
| 金句页 | 使命、观点、总结的一句话 | 一句话 | quote-plain | 不加照片和底纹 |
| 句子里有一个 2～4 个字的关键词 | 关键词放大 | quote-keyword | 需要设计师确认 | |
| 活动开场、使命页，需要品牌感 | 品牌金句 | quote-brand | 一份物料最多用一次 |
所有数据页都要写数据来源。涉及疗效、有效率的数字，对外发布前先过合规。图中数字、章节名和照片都是示例占位。
基础版式
章节页
数据页
金句页
放到物料上的标准做法
按上面的网格和版式排出的三种常用物料。每张图下面列出用到的规则。图中文案仅作示例。
急危重症医学解决方案产品介绍
帮助医务人员
挽救病人生命 急危重症医学解决方案
挽救病人生命 急危重症医学解决方案
学术交流会
2026.11 · 广州
急危重症
医学解决方案
医学解决方案
- 重症监护病床
- 微循环监测
- 医软智能
二维码扫码了解更多
常见的走样
一张图里堆多个图形，没有主次
每一页都放大色块，内容被挤到角落
新品上市
签名色做底再压白字，看不清用旧版青绿色做新物料
动效：平稳，可预期
动效只用来说明「发生了什么」：东西从哪来、到哪去、状态变了。不用来炫技。界面、网页和视频用同一套节奏。
微交互160 ms
面板展开280 ms
页面转场480 ms
- 缓动
- 统一用 cubic-bezier(.2,.7,.2,1)：起步快、落地稳，不回弹。
- 时长
- 按钮和开关 150–200 ms，面板 250–300 ms，页面 400–500 ms。
- 报警
- 闪烁只留给设备报警，每秒不超过 3 次。其他场景不闪烁、不抖动。
- 减少动效
- 用户在系统里关闭动效后，界面立即切换，不做过渡。
视频
| 位置 | 做法 | 时长 |
|---|---|---|
| 片头 | 德昌蓝底，连结形两个方块依次滑入，组合后出现 Logo | 2–3 s |
| 字幕 | 思源黑体 Medium，白字加半透明深色底，放在下方安全区内 | — |
| 转场 | 直接切或淡入淡出，不用旋转、翻页和闪白 | 0.3–0.5 s |
| 片尾 | 反白 Logo 加使命「帮助医务人员挽救病人生命」，静止停留 | 3 s |
画面四周留 5% 安全区。横版 16:9，竖版 9:16 用于视频号和抖音。
第二部分
界面规范
德昌产品的软件界面。尺寸是固定数值，开发可以直接实现。
每一秒都要用在病人身上
四条原则按顺序取舍：安全第一，看得清第二，效率和美观排在后面。
在 ICU 和抢救床旁，医护人员常常隔着几步远看屏幕，在报警声里几秒钟内做出判断。界面上任何一处看不清、点错、读错，都会把时间从病人身上拿走。
安全
防误触，防误读。危险操作必须二次确认。
触屏按钮不小于 44 像素，ICU 重要操作 48 像素。清晰
隔着几步远也能一眼看清，疲劳时不会看错数字。
设备屏正文不小于 16 号，监测数值用等宽数字对齐。可信
同一种状态在所有德昌设备上是同一个样子，医护人员不必重新学习。
8 种设备状态固定颜色、文字和图形。克制
颜色和装饰越少，真正需要注意的信息越醒目。
一个品牌主色，状态色只在需要提醒时出现。心率78次/分
血氧饱和度98%
血压120/80mmHg
体温36.5°C
点右侧的条件，看看哪些信息还能读出来。
换一种条件看这块屏幕
一个主色，让状态色说话
界面里，德昌蓝分成 10 级，用在按钮、选中和链接上，悬停和按下逐级加深。其余颜色只在需要提醒时出现。一般信息提示也用德昌蓝，不另设蓝色。
交互色阶
提示色
设备运行状态
设备就绪运行中待机已暂停连接中断维护中故障安全联锁
为什么状态要配图形色觉障碍、屏幕反光、远距离观看，都可能让颜色失效。每种状态同时有文字和图形，只看形状也不会认错。设备故障和一般的操作错误，也用两种不同的红色区分。
两种字体，一个看字，一个看数
界面文字用鸿蒙黑体，监测数值用等宽字体。只用常规和中粗两种字重，层级靠字号和颜色拉开，画面更安静。
样张是字体轮廓，没装字体也能看到真实效果。改动文字后，用本机已安装的字体显示。
为什么数值用等宽字体监测数值会不停跳动。等宽字体让每一位数字宽度相同，数值变化时不会左右晃动，读数更稳。
两种场景，两套尺寸
办公室里用鼠标操作的管理后台，和床旁用手指操作的设备触屏，对尺寸的要求不一样。
顶部栏高 64
24栏栅格
1440设计稿宽度
64顶部栏高度
200/80侧边栏展开/收起
栅格与断点采用业界通用的 Ant Design 规则，开发可以直接使用。
控件高度
323640
364448
圆角
常用操作，统一的样子
下面的组件都可以直接操作。按钮文字一律用动词，比如「保存」「导出报表」，让人一眼知道点下去会发生什么。
按钮
默认
悬停
按下
焦点
不可点
开关
切换后立即生效，不能用来远程控制医疗设备。
输入框
编号为 11 位，请检查后重新输入
输入 11 位编号试试。出错时同时给出红框和文字，告诉用户怎么改。
标签
ICU重症护理急危重症
标签用来分类，不表达关键状态。
确认弹窗
- 停用、删除、恢复出厂这类操作，必须先弹窗确认。
- 标题直接问要做的事，并写出操作对象，比如设备编号。
- 危险按钮用红色，文字和标题里的动词一致。默认焦点在「取消」上，误按回车也不会执行。
表格
| 设备编号 | 型号 | 科室 | 设备状态 | 最后在线时间 | 操作 |
|---|---|---|---|---|---|
| DC-20260902 | TC-B300 | 重症医学科 | 设备就绪 | 2026-09-02 17:05 | 查看 |
| DC-20260815 | TC-B300 | 急诊科 | 运行中 | 2026-09-02 16:58 | 查看 |
| DC-20260731 | TC-B300 | 心外科 ICU | 连接中断 | - | 查看 |
文字左对齐，数字右对齐，没有数据时显示「-」。
11个基础组件按钮输入框下拉选择复选框单选框开关标签设备状态信息提示表格确认弹窗
图标统一用线性风格
界面图标采用 IBM Carbon 开源图标库。基础尺寸 16 像素，触屏可放大到 20、24 或 32。医疗设备专用图标按同样的线宽和圆角绘制，不混用面性图标。
没有找到这个图标。可以在下方的完整图标库里搜索。
这里收录了 47 个常用图标，点击即可复制 SVG 代码，可直接粘贴到 Figma 或代码里。完整图标库有 2000 多个，许可证为 Apache 2.0，可商用、可改色。
打开 IBM Carbon 图标库第三部分
工具与资源
源文件、模板和设计助手，以及这份规范的版本记录。
拿去就能用的源文件
做物料时直接从这里取，不要从旧文件或截图里复制。
装上设计助手，AI 按德昌规范出稿
topchance-brand 是一个 Claude skill。装好后，说「做一张展会海报」「把这篇稿子排成公众号文章」「帮我看看这张海报有没有问题」，它会按本页的颜色、字体、Logo 和辅助图形来生成、优化或检查物料。
topchance-brandv1.0.0 · 79 KB
下载 skill 压缩包
- 开启代码执行Claude 设置 → Capabilities（功能），打开代码执行。
- 上传压缩包Customize → Skills，点「+」→ Create skill → Upload a skill，选择下载的 ZIP，不用解压。
- 确认已开启在 Skills 列表里确认 topchance-brand 是开启状态，然后直接对 Claude 说你要做什么。
它不会替代审核不会编造产品参数、注册证号和临床数据，缺的信息会标成「【待补充】」。对外发布前仍需市场部审核，文案合规以公司法务意见为准。源文件和更新记录在仓库的 skills/topchance-brand 文件夹里。
版本记录
规范每次修订都在这里留记录。发现问题或需要新增规范，请联系市场部。
- 1.02026-10-26首个完整版本
品牌基础、界面规范、工具与资源三部分。包含 Logo、辅助图形、色彩、印刷、字体、图片、版式、动效，11 个界面组件和 47 个图标，以及 PPT 模板和 Logo 矢量稿。
- 计划中下一步
病床、微循环等产品主题定稿后加入。英文版规范。海报、易拉宝、折页和视频模板。
1.0.x修正错字和数值
1.x新增规范或模板
2.0结构或品牌调整