很多人在暗部选色时，就容易选的很脏，尤其是黄色，比如下面这种：
如果暗部颜色本身就选脏了，拿出来的最终质感就是这样的：
但如果你选择色相本身没那么脏：
这时候出来的效果就是这样的：
你可以对比下，脏不脏，一目了然：
这里选黄色暗部颜色的时候，有个小技巧，如果你实在不知道怎么选，你可以将亮部的颜色直接再叠加一层，把新的一层变成正片叠底模式，出来的新颜色，就可以作为暗部的颜色！
是不是非常简单，这样你就不用自己去选颜色了，在这个颜色基础上，微调就可以了！
可以看下面两个黄色暗部的对比，很明显左侧的就很脏，右侧就很通透：
有时候如果我们增加暗部颜色，加过了，导致整体质感有点脏，这个时候，你只需要加一层边缘光，就会提亮不少，减少脏感。
哪怕是刚才那么脏的暗黄色，增加边缘光之后，都会好很多：
其实原理就是在边缘打了个灯光，你想想，那能不亮堂点吗！
实在案例中，也是非常好用，像这个左侧不加边缘光，就显得很脏，加了之后就清透很多：
再比如下面这个，加了边缘光，包括头部，手指等地方，也会通透很多：
所以，加边缘光真的可以减弱很多脏感！
左侧为什么那么显脏，其实除了颜色用的脏以外，很重要的是右侧除了红色和少量绿色，大部分面积都是黑色！
而左侧的图几乎没有黑白灰，连面部都是肉色。
当然，倒不是说颜色用多种就一定脏，而是容易用脏，所以我们现在会很好的控制黑白灰的面积。
你仔细观察，其实我们做的很多画面，都融入了大量的黑白灰，所以颜色就不容脏：
反倒是刚毕业的时候，不知道这个窍门，不管是做平面海报、吉祥物还是图标，都是各种颜色搭配，完了还用不好，最终显脏：
希望大家现在都能记住这个点！
总结起来，我认为减少颜色脏的技巧有3点：
第一，选色时就不能在颜色中融入过多的黑色，不然你选的颜色就很脏了。
第二，利用边缘光去提亮整体的亮度，减少脏感
第三，多增加黑白灰的面积比例，而不是多彩色去搭配，因为黑白灰比较保险，这样可以减少颜色用脏的风险！
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
该平台是面向企业品牌营销、内容创意团队的AIGC一站式生产SaaS，分为PC网页端可视化工作流操作台、手机移动端轻量化创意引擎两大端口，打通视觉概念输入、AI模型调度、素材渲染、视频产出、品牌资产存储全链路，支持接入GPT、Gemini多类大模型，通过连线拓扑可视化完整创意生产流程，批量生成广告图文、短视频营销素材，适配办公室批量策划、外出临时调参预览双场景。
营销团队AI创作四大行业痛点
1. 创作流程黑盒不可视：传统AI工具仅提供输入框，完整创意链路无可视化图谱，团队无法追溯提示词、模型、素材之间的关联；
2. 电脑手机数据割裂：办公室搭建完整工作流后，外出无法随时调整提示词、预览生成视频，修改链路繁琐；
3. AI模型配置分散：大模型接入、采样参数、迭代步数、素材风格调参分散在多层子页面，批量调整效率极低；
4. 品牌素材管理混乱：生成广告素材、品牌模板无统一云端素材库，复用、筛选、二次编辑成本高。
## 二、产品完整AI创意生产闭环
PC与移动端数据实时同步，形成流程搭建→AI参数调优→素材生成预览→资产云端归档完整闭环
1. PC可视化工作流层：中心连线拓扑图谱串联视觉概念、AI处理内核、创意图像引擎、输出媒体四大模块，直观展示各节点数据流转，支持拖拽搭建完整营销内容生产线；
2. AI模型配置层：独立面板设置大模型接入API、迭代步数、采样器、画面强度等专业生成参数，精细化控制广告成片质感；
3. 素材生成预览层：短视频播放器实时预览AI产出广告画面，支持放大、 upscale画质、收藏优质素材；
4. 移动端轻量化创意引擎：简化流程图谱，保留提示词输入、模型快速切换、视频预览、素材库浏览核心功能，户外随时微调创意方案；
5. 云端资产库管理层：分类存储项目素材、品牌模板、AI人物设定，一键复用历史视觉概念，缩短二次创作周期。
三、核心页面模块设计拆解
模块1：PC端可视化流程工作台
深色科技基底+节点卡片连线拓扑核心布局，左侧常驻功能导航
1. 顶部全局栏目：总览、营销活动、流程管线、内容、自动化流程、数据洞察六大业务入口；
2. 中心流程拓扑画布：蓝色流线连接所有AI工作节点，每个模块独立悬浮卡片承载参数、预览素材，自由拖拽调整链路顺序；
3. 四大核心功能节点：视觉概念素材库、OpenAI处理内核、创意图像引擎、输出媒体文件夹，互相联动传递提示词与画面素材；
4. 底部全局输入面板：统一输入营销场景提示词，一键同步至整条工作流，快速迭代画面风格；
5. 右侧成品预览卡片：短视频播放器实时展示AI生成广告大片，配套收藏、高清放大功能。
模块2：移动端创意引擎双核心页面
1. 流程调参页：简化拓扑结构，分上下双卡片展示AI处理内核、风格细化模块，底部提示词输入框快速修改创意方向；
2. 素材资产库页面：文件夹分层管理项目、广告素材、人物人设，快速调取历史模板复用，搭配Gemini快捷对话入口。
模块3：AI模型独立配置面板
极简深色卡片分组，区分API连接、模型选择、采样强度、迭代次数专业参数，数值下拉框直观调节生成效果，适配专业创意从业者精细化调参需求。
四、视觉设计体系：深空蓝深色科技AIGC商务风
1. 色彩系统
- 基底底色：纯黑深空深色基底，降低多卡片、多图表强光反射，长时间策划内容不易视觉疲劳；
- 品牌主色：通透科技浅冰蓝，用于流程连线、功能按钮、模块高亮边框，塑造干净前沿科技感；
- 辅助区分色：浅橙、浅灰区分不同AI工作节点，清晰划分概念、模型、渲染、输出模块；
- 素材预览底色：低透渐变深蓝，衬托生成广告视频画面，突出视觉成品。
2. 图形与可视化规范
1. 流线拓扑流程连线：细柔蓝色曲线串联全部AI节点，直观展示内容数据流走向，实现工作流可视化；
2. 极简悬浮圆角卡片：低柔内阴影、窄边框，大量留白弱化拥挤感，适配多模块同屏排布；
3. 写实电影感广告素材：高质感人像、动态短片预览，贴合高端品牌营销广告场景；
4. 纤细线性科技图标：文件夹、AI模型、播放、设置统一轻量线性图标，全端视觉统一。
3. 文字层级规范
硬朗无衬线科技字体，三层清晰信息层级：超大标题提示词/视频时长→模块节点标题→专业参数辅助小字，远距离也能快速识别流程节点功能。
五、产品商业与团队落地价值
1. 流程可视化降低团队沟通成本：拓扑图谱直观展示完整AI创作链路，策划、设计团队快速对齐创意逻辑；
2. PC手机双端同步适配全场景：办公室搭建完整自动化管线，外出随时微调提示词、预览成片，不中断创意工作；
3. 多AI模型统一调度：GPT、Gemini等大模型集成在同一后台，无需切换多个AI工具完成广告创作；
4. 统一云端资产库提升复用效率：品牌广告素材、视觉模板云端归档，大幅缩短新品营销内容产出周期；
5. 深色专业科技视觉精准匹配B端营销团队审美，区别于轻量化C端AI工具，强化专业商用SaaS产品定位。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
AURA是面向Web3算力节点运维者的全链路硬件监控管理平台，分为PC网页管理后台与手机移动端APP两大端口，依托硬件3D数字孪生可视化载体，整合实时硬件遥测数据、算力波动曲线、散热温控参数、网络流量、挖矿收益资产、全球节点地图六大核心模块，解决分布式算力机房远程运维需求，支持远程诊断、冷却参数调节、节点重启、资产质押提现等操作，统一整合多设备、多指标分散数据，为节点运营者提供单一可视化管控入口。
Web3算力硬件运维四大行业痛点
1. 硬件数据极度碎片化：温度、风扇转速、算力、带宽、收益分散在多款工具，运维人员需要切换多个系统查看指标，故障预警存在延迟；
2. 专业硬件晦涩难懂：电路板、水冷、算力参数纯数字堆砌，无可视化硬件模型，新手运维无法直观定位故障部件；
3. 缺少随身移动端管控：机房运维依赖固定PC，外出无法实时监控节点状态、接收高温宕机预警；
4. 业务数据割裂：硬件性能监控与代币收益、质押资产管理分属两套系统，无法联动分析算力产出收益效率。
二、产品完整运维业务闭环
整套产品PC+移动端双端打通，形成硬件监控→故障诊断→远程调控→收益管理一体化闭环
1. PC总览仪表盘层：3D拆解式硬件数字孪生作为视觉核心，一站式展示温度、负载、算力、流量、冷却系统全局指标，多图表实时展示24小时波动趋势；
2. 硬件远程诊断层：读取风扇、水冷、芯片负载实时参数，一键执行全设备诊断，识别高温降频、网络卡顿等隐患；
3. 全球节点管理层：点阵地图可视化全球分布节点，统一查看在线数量、网络延迟、总流量；
4. 资产收益管理层：实时统计挖矿产出代币、质押周期收益，支持质押、提取、查看历史收益流水；
5. 移动端随身管控层：复刻PC核心监控功能，户外随时查看硬件状态、接收故障推送、远程调节冷却参数。
三、核心页面模块设计拆解
模块1：PC端硬件总览Dashboard（核心运维页面）
左侧固定功能导航栏+右侧多卡片数据网格布局，平衡科技专业感与数据可读性
1. 侧边完整功能导航：总览、硬件中心、AI任务、全球地图、财务钱包、质押、治理、诊断、设置、支持，覆盖全运维需求；
2. 3D数字孪生主视觉卡片：透明拆解式硬件模型，光纤、水冷管路霓虹线条可视化硬件结构，直接标注温度、风扇转速核心参数；
3. 多维度硬件指标卡片：核心负载、在线节点总数、网络延迟、总流量、水冷冷却效率独立轻量化卡片，超大粗体展示关键数值；
4. 算力趋势分层折线图：区分活跃算力、硬件上限、温控降频三条曲线，直观查看全天算力波动；
5. 水冷系统可视化模块：3D水冷设备搭配流速、进出口温度参数，支持一键增强冷却调节。
设计价值：运维人员打开首页即可完整掌握单台节点全部硬件健康状态，无需逐层翻阅子页面定位故障。
模块2：移动端硬件监控首页
单列垂直轻量化卡片布局，适配手机窄屏单手操作
1. 顶部节点状态栏：设备名称、在线状态、运维用户头像；
2. 缩小版3D硬件数字孪生缩略图，直观展示设备整体；
3. 核心健康指标卡片：设备在线率、芯片温度、风扇转速简洁陈列；
4. 核心行动按钮：一键硬件诊断，快速排查硬件隐患；
5. 底部五宫格常驻导航：硬件、算力、资产、全球地图、个人中心。
模块3：移动端算力&收益专项页面
1. 算力监控页：完整复刻PC端算力折线图表，实时记录算力波动、后台运行任务日志，展示芯片负载、带宽参数；
2. 资产收益页：总代币余额、当日收益、周期奖励进度条，质押、提现两大核心操作按钮，历史挖矿收益流水列表；
3. 全球节点地图页：点阵分布图展示全球节点分布，汇总在线总量、网络延迟、流量数据。
模块4：用户调研推导页面
纯白极简信息卡片，量化行业运维痛点，用调研数据支撑产品设计逻辑，分为用户痛点占比图表、运维人员访谈语录两大板块，清晰展现碎片化数据、高温延迟预警两大核心行业矛盾。
四、视觉设计体系：浅白极简赛博科技算力风
1. 色彩系统
- 基底底色：纯净哑光浅灰白基底，长时间查看大量数据图表无视觉疲劳，适配机房暗光、户外强光多场景；
- 科技主色：电光绿、冰蓝霓虹，用于3D硬件光纤、水冷管路、正向增长数据，代表正常运行、算力收益；
- 警示区分色：浅红线条用于算力上限、温控降频预警曲线，直观提示硬件负荷临界值；
- 行动按钮色：深紫渐变深色按钮，用于诊断、质押、提现等高权重操作，视觉层级突出。
2. 图形与可视化规范
1. 拆解式3D数字孪生硬件模型：半透明电路板、水冷、风扇立体建模，霓虹管线区分电路与冷却回路，将抽象硬件参数可视化；
2. 轻量化分层折线图表：细线条低饱和度配色，多曲线同屏对比无视觉杂乱；
3. 极简圆角功能卡片：低弱柔和阴影，模块分区干净利落，无厚重边框压抑感；
4. 线性极简图标：芯片、风扇、网络、钱包统一线性科技图标，视觉体系高度统一。
3. 文字层级规范
无衬线现代工业字体，三层清晰信息层级：超大粗体核心硬件/收益数值→模块标题→参数辅助小字，远距离快速抓取关键运维数据。
五、产品商业与用户落地价值
1. 数字孪生降低运维门槛：3D拆解硬件模型搭配实时标注参数，零基础运维人员也能看懂硬件故障位置；
2. 双端数据完全同步：PC机房深度管控+手机随身预警，外出实时接收高温、掉线故障提醒，减少算力停机损失；
3. 全业务数据统一整合：硬件监控、算力统计、代币资产三大业务合并一套系统，无需切换多款工具；
4. 量化行业痛点的产品逻辑：基于真实运维人员访谈数据设计页面，精准解决数据碎片化、预警滞后核心痛点；
5. 轻量化界面适配长时间办公：浅白低饱和基底，机房长时间盯屏幕不易视觉疲劳，数据分区清晰降低信息负担。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
在日常工作中我发现，很多刚接触工业 HMI 设计的新手和自动化工程师，在界面布局上很容易陷入误区：按钮、数据、导航随意堆砌，要么界面拥挤信息杂乱，要么元素摆放缺乏逻辑，不仅给一线工人带来操作负担，也难以满足工业场景下的规范性与实用性要求。
今天给大家分享一套工业从业者高频使用的实用布局技巧——三区布局法，一步步拆解每区的实操规范，搭配案例参考和可直接复用的模板，新手也能轻松上手，高效搞定工业HMI布局难题。
工业 HMI 的布局逻辑，和互联网 App、B 端后台有明显区别——它不追求花哨的个性化、情感化设计，核心诉求是“高效、规范、无干扰”，毕竟工业场景中，操作效率和生产安全才是核心。三区布局法能成为工业HMI的主流通用模板，核心原因大致有3个：
三区布局法的核心逻辑是“顶区定状态、中区做核心、底区保便捷”，每一个区域都有明确的功能定位和设计规范，不能随意混淆，下面逐一拆解细节，附可直接套用的实操要点。
1. 顶区：状态/报警区——一眼掌握设备核心状态
顶区是操作员打开界面后第一眼看到的区域，核心功能是展示设备运行状态和报警信息，让操作员快速判断设备是否正常、有无紧急情况，这也是工业场景“安全优先”原则在布局上的直接体现。
「实操规范」：
2. 中区：核心监控/操作区——操作和监控的核心区域
中区是整个 HMI 界面的核心区域，占比最高，核心功能是整合设备监控与核心操作，也是操作员日常操作最频繁的区域，其布局合理性直接决定操作效率，与工业 HMI“极简高效”的核心设计原则高度契合。
「实操规范」：
首页关键参数预览，工艺流程显示
工艺流程及核心参数显示
大家在核心区域设计时，如果无从下手，可以使用栅格系统进行辅助，利用模块化理念进行设计。
快速画面框架搭建
3. 底区：导航/常用操作区——便捷切换，高效操作
底区的核心功能是实现界面快速导航与常用操作便捷调用，方便操作员快速切换不同功能界面，同时放置高频使用但非核心的操作按钮，不占用中区核心空间，兼顾操作便捷性与界面整洁度。
「实操规范」：
需要注意的是“上-中-下”结构是最常见也是最通用的一套布局结构，根据不同触摸屏的尺寸、画面比例、核心区域具体内容等可以对布局结构进行调整。
西门子在《HMI Template Suite》中制定了一套导航设计指南，在指南中一级导航采用了从顶栏中点击汉堡菜单展开的形式，此形式在较小尺寸的触摸屏上，可以通过隐藏导航的形式让核心区域显示更多的内容，但同时提高学习成本和增加交互步骤，所以我们在以往的项目实践中会更偏向直观的将导航区域显示出来。
HMI Template Suite中的多级导航系统
除非项目内容非常复杂，否则不建议使用超过 2 级以上的导航系统，多级的导航系统会导致工人在使用是无法快速定位功能参数所在的页面位置，降低操作效率和增加学习成本。
三区布局法并非“一成不变”，需根据不同工业场景（小屏机床、大屏中控）灵活调整细节，核心逻辑保持不变，适配具体使用需求。
比较遗憾的是，工业 HMI 项目大多应用于工厂内部场景，受保密协议限制，且项目均围绕企业实际工况、工艺流程深度定制开发，因此我负责的实际项目均不便对外展示。目前文章中用到的项目图片，均来自国外专业 HMI 设计公司公开分享的案例。后续我也会选取部分典型工艺流程，重新设计成可公开的演示案例进行分享。
值得庆幸的是，目前海外已有多家专注于 HMI 设计的专业机构，在设计理念、行业痛点解决方案等方面均处于前沿水平，其落地案例与项目实践具备极高的研究与参考价值。不少国内同赛道设计机构，即便仅通过借鉴、整合这些成熟思路，也能实现可观的商业收益。
下面结合几种最常见的工业场景举例，可直接参考。
案例 1：强力空气压缩机 HMI（小屏）
在小尺寸触摸屏上，可以将状态/报警区与导航/操作区合并，并且结合西门子《HMI Template Suite》中的一级导航形式，尽可能的将显示区域留给核心内容。
案例 2：颗粒泡沫生产 HMI（标准屏）
这个项目为典型的三段式布局结构，底部区域的设计非常值得参考，将导航、常用操作按钮这些位置比较固定的内容整合到底部区域。
案例 3：大屏产线中控 HMI（复杂内容）
大屏产线中控 HMI，丰富中区监控内容，展示产线工艺流程可视化界面，同时展示整条产线的整体运行状态、所有设备的报警信息、生产进度，可按模块分区域展示。
三区布局法是工业 HMI 设计的基础，也是最实用、最易落地的布局技巧，无论是新手设计师，还是有一定经验的从业者，都能通过这套方法快速搭建规范、高效的工业 HMI 界面，避开布局混乱的常见误区。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
这款智能出行APP是面向城市通勤人群的综合打车工具，支持即时快车、摩托车代步、长时包车多类出行服务，以3D立体城市地图为核心视觉载体，完整覆盖首页点位预览、起点终点规划、车型比价选择、司机信息对接全流程操作页面，兼顾日常短途通勤、定点长时包车两类使用场景，用轻量化柔和界面降低用户操作学习成本，地图可视化直观展示路线、车辆、取送点位信息。
传统打车出行APP四大行业痛点
1. 平面地图辨识度低：传统2D扁平化地图线条繁杂，新手难以快速分清路线、建筑与上车点位，找取车点耗时久；
2. 车型比价流程繁琐：不同车型价格、时长、载客量分散展示，用户切换多页面才能对比，决策效率低；
3. 界面信息过载拥挤：首页堆砌大量广告、弹窗、冗余功能按钮，路线、价格核心信息被遮挡；
4. 包车与即时打车界面割裂：短时通勤、长时包车两套业务逻辑分开入口，用户需要多次切换页面才能找到对应服务。
二、产品完整出行业务闭环
整套APP围绕点位预览→路线规划→车型选择→司机对接搭建一站式出行闭环
1. 首页点位预览层：首页展示附近热门点位、包车单价、预估接送时长，快速浏览就近出行资源，一键跳转路线规划页；
2. 起止路线规划层：3D立体城市地图可视化展示出发地、目的地、行驶路线，直观呈现沿途建筑与车辆位置；
3. 车型比价选择层：分推荐、更快、更经济三类标签，罗列Mini轿车、摩托、经典家用车三种车型，清晰标注载客数、预估时长、单价；
4. 司机对接详情层：确认订单后展示司机头像、车型、车牌、评分、起止点位，提供一键通话、在线消息沟通入口。
三、四大核心页面模块设计拆解
模块1：首页点位预览页面
轻量化卡片分层布局，优先展示就近出行点位信息
1. 顶部个人中心区：用户头像、专业账号标识、搜索、消息快捷图标；
2. 核心点位卡片：展示周边热门场所名称、距离、小时包车价格，附带室内、24小时营业、新能源配套标签；
3. 时长快捷分区：Pickup即时接送、Express快速快车双卡片，标注各自预估等待时长；
4. 底部常驻导航栏：首页、行程、日历、个人中心四大高频功能，单手即可点击切换。
设计价值：用户打开首页就能快速掌握周边出行资源，无需手动输入地址，短途临时出行一键直达规划页面。
模块2：起止路线3D地图页面
等距3D城市建筑地图作为视觉核心，弱化繁杂线条，强化点位辨识度
1. 全屏立体地图承载层：淡浅蓝简约3D楼宇、道路、车辆插图，彩色定位标记区分起点与终点，蓝色虚线标注行驶路线；
2. 上下分栏信息结构：地图占据页面上半区，下半区承载司机、点位、价格全部文字信息，不遮挡路线视图；
3. 清晰点位信息块：分取车点、目的地两行展示详细地址，搭配互换点位快捷按钮。
模块3：车型比价选择页面
标签分组+单列车型卡片，比价逻辑清晰直观
1. 顶部筛选标签栏：推荐、更快、更便宜三种排序模式，适配用户不同出行需求；
2. 标准化车型列表：每款车型统一包含车辆缩略图、载客人数、预估时长、单价四项信息，横向对比无信息差；
3. 底部固定确认按钮：高饱和度紫色行动按钮，视觉突出，下单操作路径短。
模块4：司机对接详情页面
极简纯白卡片设计，聚焦沟通与行程核心信息
1. 司机信息头部：头像、姓名、车辆型号、车牌、综合评分集中展示；
2. 点位地址分区：独立区块收纳取车、目的地详细地址；
3. 双功能操作按钮：一键通话、在线消息左右分布，方便用户提前和司机沟通上车细节。
四、视觉设计体系：浅蓝柔和轻量化城市出行风
1. 色彩系统
- 基底底色：纯净浅灰白基底，长时间浏览地图不刺眼，适配户外通勤强光环境；
- 主行动色：柔和紫罗兰紫，用于确认下单、导航核心按钮，醒目但不刺眼；
- 地图主题色：低饱和浅冰蓝，用于3D建筑、道路、路线线条，营造干净清爽城市氛围；
- 区分标记色：紫、橙、绿三色定位标点，快速分辨起点、终点、周边点位。
2. 图形与可视化规范
1. 等距3D简约城市插画：低复杂度立体楼宇、车辆，抛弃写实厚重建模，轻量化不占用页面加载资源；
2. 圆角柔和功能卡片：低弱阴影、细分割线，模块分区干净整洁，无厚重边框压抑感；
3. 极简线性图标：汽车、摩托、定位、消息统一线性图标风格，视觉统一协调。
3. 文字层级规范
无衬线简约字体，三层清晰信息层级：大额单价数字→页面模块标题→地址、时长辅助小字，通勤途中远距离也能快速抓取关键出行信息。
五、产品商业与用户落地价值
1. 3D地图降低识别门槛：立体楼宇地图让新手快速定位上车点位，减少用户找路沟通成本；
2. 统一比价页面提升转化：多车型同屏横向对比，用户快速匹配符合预算、时长需求的出行方案；
3. 轻量化界面适配通勤场景：浅色系、简约布局，户外阳光直射下屏幕内容清晰可读；
4. 双业务场景一体化：短时快车、长时包车整合在一套界面，不用切换多个APP满足不同出行需求；
5. 操作链路短，留存更高：首页预览、路线规划、选车、对接四步完成完整下单，减少用户流失节点。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
GeneX是面向高净值人群的基因长寿管理综合平台，融合科研研究院、私人医疗中心、营养补剂商城三大业务板块，打造一体化数字化体系：品牌官网用于品牌科普、业务展示、客户引流；PC健康仪表盘供用户查看基因检测、生理指标、衰老评分、诊疗预约；移动端自适应页面实现随时随地查看健康数据、选购定制营养产品、预约专家问诊，依托基因检测、生物年龄测算、靶向抗衰干预，提供循证医学个性化长寿管理方案。
医疗行业四大核心痛点
1. 专业可信度难以传递：市面上大量养生类平台充斥营销化话术，高净值客户难以区分真正有科研背书的专业机构，页面视觉缺少科研严谨氛围；
2. 线上线下业务割裂：科研展示、诊疗预约、营养产品购买分散在不同渠道，没有统一线上载体承接全流程服务；
3. 健康数据可视化缺失：基因、心率、激素、生物年龄等复杂医学指标堆砌纯文字表格，普通人难以读懂自身衰老状态；
4. 客户留存链路断裂：客户完成首次咨询后无持续数字化陪伴，缺少长期健康追踪工具，复购与续单转化率低。
二、产品完整全链路业务闭环
整套设计覆盖公域引流官网、私域个人健康后台、移动端全适配三大端口，形成完整业务闭环
1. 官网公域引流链路：品牌首页科研实力展示→研究院/医疗中心业务介绍→科研数据实力背书→专家团队展示→用户真实案例→营养产品商城→线上预约咨询；
2. PC端健康管理后台链路：用户登录总览仪表盘→生物年龄、长寿评分核心指标查看→心率、压力、基因分项数据可视化→诊疗预约管理→定制补剂方案管理；
3. 移动端轻量化链路：自适应官网浏览、手机端健康数据看板、线上课程/抗衰套餐选购、消息问诊、营养订单管理，适配碎片化随身健康查看场景。
三、核心页面模块设计拆解
模块1：品牌官网PC首页，品牌信任建立核心页面
分层模块化布局，平衡高端简约质感与科研专业氛围
1. 首屏视觉区：深蓝色渐变DNA分子科技背景，超大标题点明长寿研究院定位，搭配统一品牌导航栏，区分研究院、医疗中心、商城、博客等业务入口；
2. 业务分区卡片：左右双卡片清晰拆分Research Institute科研实验室、Medical Center私人医疗两大核心业务，搭配显微镜、DNA生物配图强化行业属性；
3. 科研数据实力区块：用大号数字直观展示服务患者数量、科研年限、合作高校、学术论文数量，用客观数据建立客户信任；
4. 个性化方案板块：图文结合拆解基因抗衰六大核心服务逻辑，搭配医师诊疗实拍图传递医疗专业度；
5. 科研、专家、用户评价板块：科研课题科普、医师团队头像矩阵、真人客户视频评价，多层背书打消客户疑虑；
6. 营养产品商城入口：定制抗衰胶囊产品展示，分层呈现产品功效、科研背书、价格套餐，实现流量转化。
模块2：PC端个人健康数据仪表盘（核心私域工具）
深色侧边导航+浅白主内容区的双栏专业医疗后台布局，兼顾数据专业度与阅读舒适感
1. 顶部用户问候区：绑定用户姓名，直观点明专属长寿管理计划正在运行；
2. 核心健康指标卡片：生物年龄、综合长寿评分两大核心数值优先展示，搭配简约折线趋势图；
3. 多维度数据分区：心率压力实时监测、靶向营养补充进度、近期专家预约列表、长期健康分析曲线；
4. 侧边完整功能导航：总览、健康概览、数据分析、基因报告、检测结果、营养方案、预约、设置，覆盖全维度健康管理需求。
模块3：移动端自适应全套页面
轻量化简约卡片设计，适配手机窄屏浏览，完整复刻官网与后台核心功能
1. 移动端官网：压缩导航为顶部简易栏，区块纵向堆叠，简化大图尺寸，保留数据卡片、业务介绍、产品购买全部转化模块；
2. 移动端健康仪表盘：单列垂直排布各项健康指标，简化复杂图表，优先展示当日关键数据、预约提醒、营养计划；
3. 产品&套餐页面：分层展示基础诊断、完整长寿、VIP高端三档服务套餐，清晰标注适配人群、包含服务、年度定价，一键预约咨询。
四、视觉设计体系：深蓝极简高端生命科学医疗风
1. 色彩系统
- 主品牌色：深海静谧藏蓝，代表科研、基因、生命医学，塑造沉稳、严谨、高端的专业调性，区别普通浅色系养生医美平台；
- 辅助科技色：浅冰蓝、淡渐变紫，用于DNA分子、数据图表、高亮按钮，增添生物科技未来感；
- 基底底色：纯白浅灰页面基底，深色侧边导航形成轻重对比，长时间浏览无视觉疲劳，同时区分公域官网与私域后台视觉层级。
2. 图形与可视化规范
1. 生物科技可视化元素：粒子DNA分子、微观细胞、显微镜器械插图，弱化花哨装饰，仅用作页面氛围点缀，突出医疗科研属性；
2. 极简轻量化数据图表：单线条折线图、简约进度条、圆角指标卡片，无厚重阴影，保证医学数据干净清晰；
3. 实拍写实素材：实验室科研实拍、医师问诊实拍、胶囊产品实物图，替代抽象插画，增强真实专业信任感。
3. 文字层级规范
无衬线现代极简字体，三层清晰信息层级：超大粗体核心数据数字→板块大标题→辅助说明小字，高端克制排版，留白充足，契合高净值用户审美偏好。
五、产品商业与用户落地价值
1. 差异化品牌视觉壁垒：深蓝科研风区分市面上浅粉、浅绿同质化医美养生平台，一眼建立专业基因医学认知；
2. 全渠道业务打通：官网引流、后台留存、移动端随身管理三位一体，完整承接从陌生访客到长期付费客户的全链路；
3. 复杂医学数据通俗化：可视化图表拆解晦涩基因、衰老指标，普通客户能自主看懂自身健康状态，提升产品粘性；
4. 多层信任背书设计：科研数据、学术论文、医师团队、真实客户评价多层模块叠加，大幅降低高净值客户决策顾虑，提升预约转化率；
5. 多端统一品牌识别：PC官网、PC后台、手机自适应页面视觉规范完全统一，强化品牌记忆点。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
Ponteo是面向口腔行业的灵活用工智能SaaS平台，搭建三层独立用户体系：诊所PC运营管理端、牙科医师移动端工作台、平台总控Admin运维后台，打通诊所发布临时诊疗工单、医师就近接单、线上排班沟通、营收自动结算、全平台数据监控全业务链路，适配独立牙科诊所、连锁口腔机构、自由执业牙医三类使用人群，实现人力、财务、运维数据一体化可视化管控。
牙科灵活用工四大核心行业痛点
1. 供需匹配低效：诊所急诊、临时缺岗只能线下电话邀约医师，闲置牙医无法精准匹配就近工单，沟通成本极高；
2. 财务对账繁琐：医师出诊收入、诊所营收、平台手续费、退款调整数据分散，人工统计易出错；
3. 排班工单管理混乱：根管治疗、正畸咨询、常规洁牙等订单无统一可视化日程，易出现时段冲突、漏单；
4. 平台运维无集中监控：服务器性能、用户资质核验、订单报错、合规风险分散，故障排查耗时漫长。
二、产品完整分层业务闭环
整套系统按照三类使用者搭建闭环业务流程，数据互通、界面独立互不干扰：
1. 医师移动端链路：资质视频认证→浏览附近工单（列表/地图双视图）→接单预约日程→线上和诊所沟通诊疗信息→钱包查看实时收入与业绩分析；
2. 诊所PC端链路：发布临时用工需求→系统智能推荐匹配医师→查看医师工时利用率、排班日历→统一查看收款流水、月度经营报表；
3. Admin总控后台链路：全局汇总平台订单、活跃诊所、注册医师数据→多维度财务营收拆解报表导出→服务器性能实时监控→异常工单、合规风险统一预警。
三、三大角色核心模块设计拆解
模块1：诊所PC Practice Dashboard 经营总览看板
模块化网格复合布局，一屏整合诊所全部经营维度，兼顾数据可读性与操作便捷度
1. 顶部导航区分首页、医师、订单、消息、数据、财务六大业务入口，支持全局搜索、明暗模式切换；
2. 核心可视化区块：周度营收柱状图表，标注单日峰值收益，直观展示门店业务波动；
3. 关键指标卡片组：本周总营收、接诊患者总量、在岗专科医师数量，同步展示同比增减幅度；
4. 辅助业务分区：医师工时利用率环形进度条、近期收款流水、日程推荐医师板块，同时满足人力调度与财务对账需求。
设计价值：诊所管理者无需切换多个页面，单次浏览即可掌握营收、人力、订单三大核心经营板块，大幅降低管理时间成本。
模块2：牙科医师移动端工作台
轻量化移动端分层页面，适配医师碎片化户外查看场景，四大核心功能分区
1. 个人首页：展示医师资质、用户评分、当日可接单时段、实时预估当日收入；
2. Jobs工单市场：列表/地图双浏览模式，可按距离、薪资、紧急程度筛选根管、洁牙、正畸类工单；
3. 日历排班模块：可视化展示已承接订单时段，区分急诊加急与常规诊疗项目；
4. 钱包财务页面：环形收入进度图表，统计单均出诊收入、最佳营收日期、月度业绩趋势，直观追踪收入目标完成进度。
模块3：Admin平台总控后台，分为两大核心面板
1. 全局业务数据Dashboard：汇总平台总订单、活跃诊所、注册医师、整体营收，多层环形饼图拆分营收构成（诊所分成、医师佣金、平台手续费、退款调整），支持按年/周/月筛选、一键导出经营报表；
2. 系统性能Performance监控页：实时展示服务器响应速度、CPU占用、缓存命中率、在线服务稳定时长，配套独立错误日志控制台，同步同步失败、字段缺失等系统报错预警，运维人员可快速定位故障根源。
四、视觉设计体系：柔和轻量化医疗商务风格
1. 色彩系统
- 基底底色：纯白低饱和浅灰基底，长时间办公无视觉压迫，适配医疗行业温和严谨调性；
- 主视觉品牌色：渐变紫蓝，用于核心图表、操作按钮、高亮关键数据，代表盈利、活跃正向状态；
- 辅助功能色：浅绿标识完成/稳定状态、浅紫区分工单卡片层级、浅灰代表闲置次要数据，色彩语义统一无冲突。
2. 组件与可视化规范
1. 轻量化圆角卡片：低柔和阴影、纤细分割线，模块分区干净清爽，摆脱传统工业后台厚重压抑的视觉感受；
2. 分层数据图表：柱状图展示时间维度趋势、环形进度条展示工时利用率、环形饼图拆分营收占比，图表样式统一简约，无多余装饰元素；
3. 医师信息卡片：真人头像搭配专科资质标签，直观区分正畸、牙周、全科牙医，快速匹配对应诊疗工单。
3. 文字层级规范
全平台统一无衬线字体，三层清晰信息层级：超大粗体核心营收数字→模块标题文字→辅助说明小字，电脑大屏、手机移动端均可快速抓取关键经营指标。
五、产品商业与用户落地价值
1. 供需匹配效率提升：线上工单智能推荐机制，省去诊所与医师线下反复电话沟通，人力调度效率提升60%；
2. 财务对账轻量化：全链路营收自动统计，分层自动拆分各方分成，大幅减少人工记账、核对账单的时间；
3. 全角色数字化隔离管理：医师、诊所、平台三方拥有独立可视化操作面板，业务边界清晰，互不干扰；
4. 平台运维可视化管控：业务经营数据与服务器性能双维度监控，业务故障、服务器异常提前预警，降低运维人力成本；
5. 低学习门槛柔和界面：轻量化浅色系设计，无数字化操作基础的医护、诊所管理者均可快速上手操作。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
在 UI 设计行业，很多团队做视觉定稿时，常陷入 “主观审美之争”：有人认为配色高级，有人觉得缺少品牌感，设计师仅凭个人感受敲定方案，上线后却出现用户找不到核心按钮、页面转化低迷、专业软件学习门槛陡增等问题。深耕 UI/UX 全链路设计十六年的兰亭妙微（蓝蓝设计）提出核心观点：视觉设计属于完整用户体验闭环，美感只是基础，必须依靠标准化测试验证效果，区分态度型测试与行为型测试两大维度，用可量化数据替代主观臆断，让视觉好看、好用、能支撑业务目标。
商品卡片是一个广泛存在于电商产品中的组件，不管是狭义上的商品，还是广义上的所有可交易产品 (包括课程、服务、游戏等虚拟商品)，都需要商品卡片来承载它们的关键信息，以方便用户快速了解商品的核心属性。
常见的商品卡片有两种形式，也是电商 App 普遍使用的两个视图，即：网格视图和列表视图，卡片在这两种视图中有着不同的布局，其信息包含能力也有所差异。
1. 两种布局
如 Part.1 种所说，商品卡片通常有两种布局形式，分别是网格布局和列表布局。
①网格布局
网格布局可以使用瀑布流，图片的尺寸相对来说会更单一一些，因为需要严格控制卡片的错落程度，不至于过于杂乱。
当然，并不是只能做成瀑布流，完全对齐的网格布局也很常见，只需要严格限制图片和字段的高度，且为有高度差异的字段 (一般是标题) 留出空间即可。
②列表布局
列表布局通常也会保持所有图片尺寸一致，但文本区域需不需要与图片等高，得看具体项目中商品需要露出的信息多寡，像京东这种信息非常多的，文本区域就可以超出图片的高度范围。而如果信息量中等，那么等高是一种比较好的选择。
但如果信息比较少，强行把某一字段与图片底对齐的做法会导致组件内的间距比组件间的更大，从而影响亲密性识别。
这时候可以在两个商品之间加分割线。
2. 卡片样式
主要有三种样式，我称之为有全包、半包和开放式。
全包：有明确的卡片背景，将图片和文本全部包括在内部，比较不常见。
半包：图片部分会撑满卡片的边界，而文本依然在卡片内部，比较常见。值得注意的是如果卡片需要做圆角，图片朝内的两个角不需要给圆角。
开放式：没有明确的卡片背景，图+文本自成卡片区域，在设计上通常会让文本两侧较之图片稍微向内缩进一些距离，在让亲密性表现得更舒适。可以两侧缩进，也可以只缩进右侧。
3.卡片内容
不同类型的商品、不同需求的产品所需要表达的信息是不同的，但总结来说有以下这几类：
其中，图片、标题和价格，这三个是最基础的信息，几乎每个商品卡片都必不或缺。其余的信息则并不一定每个都要包含在内，不同的 App 会根据自己的展示需求挑选其中几类排布在卡片内。
信息展示的顺序、和权重对比，都会根据实际情况略作调整。例如一些国外的电商 App，会把价格的权重做得比标题更大。而对于网格布局和列表布局，所展示的信息尽可能保持一致。但因为网格视图不适合展示的过长，所以如果信息真的非常多，那么网格视图可以适当省略。例如小米有品是一个典型的例子，网格视图相比列表视图只少了商品规格表，因为这个字段实在不适合放在网格视图展示。
4. 不同的使用场景
之所以会把使用场景放在这里，是因为商品卡片的使用场景会影响它所展示的信息类型。举个例子，淘宝首页推荐内的商品卡片内所包含的信息，就比搜索出来的完整商品卡片少了一些。
这是因为推荐中的商品信息务求直击要害，其导购需求远远强于展示需求，同时也考虑到推荐页应同屏展示更多商品，所以会把其他可能会影响用户获取核心信息，且可能造成卡片过长的字段全部隐去了。
同理，商品卡片在购物车中的信息也不一样，考虑到存在于购物车中的商品都是用户已经了解过大部份信息的商品，所以设计时要抓住用户在这种场景下最关注的内容——价格和规格，所以购物车中的卡片会多出一些价格变动、规格重选、数量修改等信息。
总之，商品的使用场景很大程度上会影响展示信息的选择，最核心的要点是一定要考虑用户在不用的场景下，最核心的信息诉求是什么，不同 App 对此可能有不同的做法，我在这里也无法一概而论。
5. 不一样的商品卡片
①Asos/Massimo Dutti
国外的电商 App，尤其是品牌自己的 App，总是会做得非常极简，一个标题一个价格一张图片，几乎做到了商品卡片最简洁的状态，这是品牌气质决定的，也是产品定位决定的。所以国内走出海路线的 App 大多也会是这个风格，比如 Shein。
②马蜂窝/飞猪
举这两个例子并不是因为两者的组件设计得有多精妙，而是因为它们有着另一种不同的商品，以及所呈现出来的不同的组件——酒店。
我在这里想要说明的是，不同的商品类型可能也会有其特有的字段类型，尤其是服务型商品，不同的服务所呈现出来的组件会有很大不同。
这里收集了一些商品卡片的线上案例，也可以作为设计时的参考：
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
分别站在整个产品设计研发流程中各个角色的不同角度，在工作中可能会有以下“抱怨时刻”：
由此，体现出搭建设计规范的作用和意义：
搭建设计规范的意义
产品侧：⼀个产品不同分支多个团队完成的时候，可以保证产品团队使用同一份设计规范快速完成产品原型设计。保证可复用模块的交互体验的⼀致性。
设计侧：通过设计规范去解决大部分需求，极大提高效率解放双手，让设计师能去做一些更发挥创意和想象力的设计。
开发侧：形成开发资产，可以提升研发效率，降低维护成本。开发工程师无需再重复开发同⼀个组件，只需要去组件库里调用即可，配合业务逻辑，高效完成界面开发，做到开箱即用。
测试侧：标准化的设计规范，是测试人员最喜欢看到的。例如，设计规范规定弹窗 footer 区按钮组居右，那么测试人员只要测到不居右，就可以给产品提优化建议了。
设计规范中具像化的环节是设计组件化，最早可以追溯到工业革命时期，福特创造的流水线生产方式。福特将汽车分解成零部件，再把零部件模块化组装，这⼀创举极大的提高了生产效率。
根据资料显示，T型车是世界第一款大量使用通用零部件，并进行大规模流水线装配的汽车。这种方式极大地提高了T型车生产效率，降低了生产成本。1914年，福特已经可以做到93分钟生产一辆汽车，而同期其他所有汽车厂商的生产能力总和也不及于此。到了1920年代，T型车的价格甚至降到300美元一辆（问世之初T型车的售价仅需850美元，而同期的竞争对手则通常为2000-3000美元一辆）。
原子设计理论最初来源于化学领域，这一点从名字可以听出来。在化学中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。
2013年前端工程师BradForst将此理论运用在界面设计中，形成一套设计系统，包含5个层面：原子、分子、组织、模板、页面。
当公司的业务产品逐渐扩大时，我们就需要制定一套完整的设计系统，提升设计和开发的协作效率，统一所有设计师的输出物。
总之，将设计拆分成一些基本元素，例如一个按钮、一个弹窗，再根据业务需求、产品逻辑重新组装，形成最终的产品，这就是原子设计理论（组件化设计），区别于整体设计制造的一种新的工作流程。
1. 设计系统搭建—原子
原子是物质的基础组成部分，是构成设计系统的最基础元素。
在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线、间距、圆角、阴影等。
2. 色彩体系
中后台产品的色彩体系主要分为3类：品牌色、功能色、中性色。
色彩体系
3. 文字体系
B端产品的文字系统设计目标：增强阅读体验、提升信息获取效率，字体是体系化界面设计中最基本的构成之一。
字体的大小、字重、色彩区分体现界面信息的层级关系。
文字体系
4. 阴影、圆角、线条
阴影：在B端界面中，有些特殊的元素会使用到阴影，从阴影中我们可以看出物体距离平面的高度，距离平面越高的物体阴影越大；
圆角：从直角到圆角给人带来从严谨冰冷到柔和亲切的心理感受，在B端界面中，常用2-8px圆角；
线条：分割模块及辅助定位。
5. 后台设计系统搭建—分子
在界面中，分子是按照规律组合起来的元素，如：按钮、搜索框、选择器等。
以按钮为例，文字、色块、图标和间距这些抽象的原子产生关联组合成分子：图标、文字传达含义；颜色、圆角传递特性；间距、尺寸定义规范。
6. 后台设计系统搭建—组织
分子+原子组合成更复杂和可拓展的组织（区块组件），如搜索区、卡片列表区、表单区、数据统计区等。
7. 后台设计系统搭建—模板
由原子+分子+组织构成的更复杂更专注页面底层架构，并非具体页面。
8. 后台设计系统搭建—页面
带业务逻辑的场景案例，如标注场景、权限管理、详情设置等，将页面模板填充真实的文字、图片后形成页面，即带交互逻辑的高保真原型图，真实内容使设计系统有了“生命”。
虽然通过设计规范可以对产研流程提效，但在开发还原中还是会经常遇到一些棘手的问题。
为了解决和优化上述的问题，DesignToken应运而生。它可以解决产品设计和开发过程中的细节、变更和风格一致性的问题，有效提高产研团队设计质量和协作效率。
1. Design Token 介绍
“Token”原本的意思是“令牌，指令”，与Design连在一起指“设计变量”。在工程逻辑中用于用户身份与服务器端进行验证，而在设计体系中，DesignToken则可以简单理解为封装的视觉样式参数。它通过规定样式参数，并通过一套符合设计师、工程师理解的统一的命名规则，为这些样式参数的定义名称。
2. Design Token 优势
① 设计语义更易理解
帮助设计师和开发建立统一语言，设计方案更加一致。
从下到上的Design Token 命名思路
②主题皮肤一键替换
主题皮肤的替换可以用在两个维度，一是浅色模式和暗色模式的替换，二是不同品牌色之间的替换。我们可以将不同主题的同一个场景下的颜色使用同一个Token命名，达到一键换肤的效果适配不同客户方案。
③设计变更高效维护
替代传统工作流一键替换效果。例如修改二级文本的颜色，传统工作流需要先修改设计规范，修改设计稿，然后输出给开发，开发逐一更新代码，完成后提交给设计师进行走查验收。而当使用Token之后，只需要更新Token参数，就可以直接导出JSON给开发，一键自动更新。提高效率不止一点点。
④设计效果精准还原
代码编辑器自动化提示颜色选择，如不正确则产生报错。
使用Token开发和传统开发的对比
总结一下使用 Token 开发的优势：
3. Design Token 应用流程
第一步：提炼 token 元素；第二步：定义命名规则；第三步：整理 Design Token 资产表；第四步：开发与应用。
Design Token 应用实践
接下来具体说说如何为 Design Token 命名，命名方式目前并没有绝对统一的要求，不过有一定的逻辑规则，可以由设计师找前端开发一起商量出一个都能通俗易懂便于理解的命名规则，举个例子：
命名规则示意
为了更好的统一规范，应用 Token，建议成熟的互联网公司设计团队搭建自己的低代码平台。一键更换主题，尽在指尖。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com