北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套美食配送App的ui设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
一、项目基础概述
1.1 项目背景与核心用户痛点
7Krave 是一站式本地生活美食配送 App，同时服务 C 端点餐消费者、线下餐饮商户两大群体，本次项目为产品整体视觉与交互全面改版升级。
旧版产品长期存在多重使用短板：
普通消费者端：首页板块堆砌杂乱，美食分类、优惠活动、推荐餐厅信息混杂，找餐路径冗长；页面视觉色块生硬、图片排布拥挤，长时间浏览易产生视觉疲劳；缺少特色点餐功能，小众门店无法下单，订单追踪、钱包积分体系分散，多页面跳转操作繁琐；同时缺少深色模式适配，夜间点餐刺眼。
餐饮商户 & 平台运营端：首页流量引导逻辑弱，优惠活动曝光效率低；功能模块割裂，用户留存、复购激励体系不完善；界面组件不统一，新增菜品、活动页面开发成本高；缺少差异化特色功能，和市面同类外卖平台无竞争壁垒。
本次改版以「清爽轻量化视觉 + 全流程简化点餐链路 + 独家差异化点餐功能」为核心思路，从消费者点餐体验、平台商业运营收益双向优化，解决传统外卖软件信息杂乱、操作繁琐、同质化严重的行业痛点。
1.2 项目核心改版设计目标（以用户真实需求为核心）
简化用户点餐全流程：首页功能分层清晰，搜索、美食分类、优惠推荐、附近餐厅层级分明，减少页面跳转，3 步内完成选店、加购、下单；
打造独家差异化产品功能：上线「愿望点餐（Hanker Order）」，支持下单平台未入驻的线下门店，拓宽用户点餐选择；配套订单实时追踪，全流程可视化配送进度；
完善用户留存激励体系：整合个人账户、钱包余额、礼品卡、积分奖励、会员权益，集中收纳个人资产，提升用户复购与长期留存；
双模式视觉体系搭建：全新清新浅色主视觉，同步配套深色夜间模式；统一全套标准化 UI 组件，全页面交互逻辑、视觉风格连贯统一，兼顾美观度与长期迭代效率；
优化商业转化路径：优惠 Banner、折扣门店卡片前置曝光，购物车、结算、支付流程轻量化，提升下单转化率，助力平台与商户增收。
1.3 完整用户点餐使用闭环
产品覆盖从注册到售后全链路：启动引导页→登录 / 多渠道快捷注册→首页搜索 & 美食分类筛选→店铺菜品浏览加购→购物车结算填写配送信息→支付下单→实时订单追踪 / 特色愿望点餐→订单历史查询→个人账户钱包积分管理。
二、全链路用户使用体验拆解
2.1 首页全新改版：分层轻量化布局，信息清晰不拥挤
对比旧版杂乱堆砌的绿色分区板块，新版首页重新梳理信息优先级，自上而下分层排布核心功能：
顶部固定模块：配送地址选择框 + 全局搜索栏，用户可快速切换收货位置、搜索菜品 / 餐厅；
流量转化核心区：全屏优惠活动 Banner，直观展示门店大额折扣，搭配一键下单按钮，最大化活动曝光；
快捷分类栏：横向滚动美食品类图标（早餐、健康餐、中餐、披萨、本地特色餐等），图标简约直观，一键切换对应品类餐厅列表；
推荐分区：分为「热门推荐商户」「附近全部餐厅」两大模块，商户卡片统一展示门店实拍图、折扣标签、评分、配送时长，信息精简无冗余；
页面大量留白，弱化大块纯色分区带来的压抑感，视觉干净清爽；同时配套深色模式，夜间点餐柔和护眼，适配全天使用场景。
2.2 搜索 & 品类筛选页面：精准快速匹配用餐需求
搜索框支持菜品、餐厅关键词检索，检索结果区分「餐厅」「菜品」双标签；对应品类筛选页统一标准化商户卡片，门店资质、配送时长、营业状态、折扣标签一目了然。
卡片支持黑白双模式自动适配，浅色模式干净通透，深色模式降低屏幕反光，所有文字、按钮对比度统一，无论白天夜间都清晰可读。
2.3 独家特色 Hanker Order 愿望点餐功能，打造产品差异化壁垒
市面普通外卖平台仅能下单入驻商家，本产品新增独家愿望点餐模块：
用户可手动填写线下未入驻餐厅名称、地址、想要购买的菜品；
系统自动预估配送总价、服务费，提交后平台骑手线下到店采购配送；
配套完整订单详情页，实时追踪骑手位置、配送进度，展示骑手信息、费用明细、电子收据；
该功能大幅拓宽用户点餐选择，解决小众门店、线下特色小店无法线上点单的痛点，形成和其他外卖平台的核心差异化优势。
2.4 下单结算 & 支付流程：极简操作减少下单流失
菜品详情页支持增减份数、自定义口味；购物车一键跳转结算页，页面集中收纳配送地址、配送时段选择、骑手备注、小费、优惠券抵扣、支付方式；
所有填写项分区清晰，核心支付按钮使用高辨识度绿色，突出引导下单；支付完成后弹出积分奖励反馈弹窗，即时给予用户正向激励，提升复购意愿。
2.5 个人中心资产整合：统一管理钱包、积分、会员权益
个人账户页面整合全部用户资产功能：钱包余额、绑定银行卡、礼品卡、积分奖励、会员等级、历史订单、评价、消息通知全部集中收纳；
不再分散在多个页面，用户可统一管理个人权益，清晰查看消费优惠与积分福利，持续刺激用户长期留存与重复下单。
2.6 登录注册 & 启动引导页：降低新用户上手门槛
全新轻量化启动插画引导页，搭配极简注册表单；支持邮箱、苹果、谷歌、Facebook 多渠道快捷登录，减少账号注册繁琐步骤；新增银行卡安全验证引导，保障支付资金安全，兼顾易用性与账户安全性。
三、视觉与标准化组件系统：清新简约双端适配体系
3.1 色彩视觉体系（适配本地生活餐饮轻松氛围）
主色调：柔和薄荷绿，作为下单、登录、筛选等正向操作按钮，传递新鲜、安心的餐饮氛围；
基底双模式：日常浅色纯白基底，清爽明亮；深色深灰基底，夜间柔和不刺眼；
辅助区分色：暖橙、红棕用于优惠折扣标签，灰色作为辅助说明文字，黑白用于店铺基础信息，色彩克制不杂乱；
图片规范：统一圆角美食、门店实拍卡片，柔和渐变 Banner 弱化强光刺激，提升页面高级感。
3.2 全场景可复用标准化组件库
整套 App 搭建完整统一组件体系，覆盖地址栏、搜索框、美食分类图标、商户推荐卡片、折扣标签、加减购菜控件、结算表单、订单进度条、弹窗、底部导航栏等全部基础元素。
统一组件带来双重价值：
C 端消费者：全页面操作样式统一，新手、中老年用户无需反复适应页面，上手门槛低；
平台运营迭代端：新增门店、活动、菜品分类可直接复用组件，大幅降低设计、开发人力成本，产品迭代速度更快。
四、交互与用户体验核心亮点
首页信息分层减法设计，砍掉旧版冗余色块板块，主次信息清晰，找餐厅、看优惠无需反复滑动；
独家愿望点餐功能填补行业空白，拓宽点餐场景，构建平台核心竞争优势；
黑白双模式完整适配，白天、夜间点餐均拥有舒适视觉体验；
资产功能集中收纳，钱包、积分、会员统一管理，提升用户留存与复购；
极简下单链路，搜索 - 选店 - 加购 - 支付全程无多余弹窗拦截，降低下单流失率；
全流程订单可视化追踪，实时查看骑手进度、完整费用明细，提升消费安全感。
五、项目商业落地价值
提升平台下单转化：首页优惠前置、结算流程简化，有效减少用户中途放弃订单，提升商户线上订单营收；
构建差异化竞争壁垒：独家愿望点餐功能区别于普通外卖平台，吸引更多追求丰富用餐选择的用户，拓宽用户群体；
提升用户长期留存：整合积分、钱包、会员激励体系，持续刺激用户重复下单，提升平台用户生命周期价值；
适配全时段使用场景：深浅双模式覆盖白天、夜间点餐需求，扩大产品适用场景；
降低平台迭代成本：全套标准化组件库，后续拓展商超、生鲜等本地生活业务可快速复用，拓展业务边界。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
Neemo Project 企业AI项目管理后台全案运营价值解析
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套企业AI项目管理后台的ui设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
一、项目基础概述
1.1 项目背景与核心用户痛点
Neemo Project 是搭载 AI 辅助能力的企业级项目管控后台，核心服务两类人群：企业项目管理者、跨部门协作执行团队成员。
传统项目管理工具普遍存在运营与使用痛点：
管理者视角：项目工时、任务完成率、周期进度数据分散，需要手动汇总多表格统计，无法实时全局把控项目风险与交付节点；多团队协作成员、会议、截止任务分散在不同页面，统筹效率低下；
执行团队视角：任务缺少清晰时间规划，到期提醒滞后，流程重复工作占用大量人力，缺少自动化辅助工具简化重复性工作；
界面体验痛点：多数传统管理后台布局拥挤、深色界面色彩杂乱，数据图表层级混乱，长时间办公浏览极易视觉疲劳，缺少标准化状态区分体系，任务进度难以快速识别。
本产品以「AI 自动化赋能 + 全维度数据可视化 + 轻量化任务协同」为核心设计思路，从管理层全局管控、执行层高效落地两个维度，解决企业项目协同低效、数据统计繁琐、节点管控缺失的行业痛点。
1.2 项目核心设计目标（以企业真实运营需求为核心）
全局数据直观可视化：整合工时、任务完成量、周期活跃度、团队协作信息，首页一站式呈现，管理者无需多页面跳转即可掌握项目全貌；
AI 自动化降本增效：内置 AI 辅助模块，自动简化常规流程、分析项目绩效、动态管控任务截止时间，减少人工重复操作；
标准化任务协同体系：统一任务状态标识、日历排期、会议管理、截止预警模块，跨团队成员快速看懂任务优先级与进度；
统一高端深色专业视觉体系：搭建完整组件库，深色基底搭配高区分度功能色，兼顾长时间办公护眼需求与 B 端产品专业科技感，全页面操作逻辑、视觉语言高度统一。
1.3 完整企业项目管理闭环
产品覆盖完整项目全生命周期管理：项目总览数据大盘 → AI 绩效分析辅助 → 月度日历任务排期管理 → 截止节点风险监控 → 团队协作人员管理 → 会议日程统筹 → 任务状态动态更新与自动提醒。
二、全链路企业使用体验拆解
2.1 项目总览首页：一站式全局管控大盘
页面左侧固定侧边导航栏，收纳全部一级功能入口，便于管理者随时切换模块；页面顶部为项目基础信息栏，展示总投入工时、进行中 / 已完成任务总量、协作人员头像组，配套独立 AI 助手快捷入口，一键调用智能分析功能。
页面核心区域分层排布多维度可视化图表：长条柱状图展示项目全周期每日任务活跃度，环形进度环直观呈现整体任务完成率；右侧分区独立卡片承载截止任务清单、团队会议日程两大核心模块，卡片内自带进度条清晰展示各子任务交付进度，主次信息层级分明，管理者打开页面即可快速定位风险滞后任务。
2.2 日历任务排期模块：清晰规划每日执行工作
首页下方嵌入月度日历视图，按日期纵向排布当日全部待执行任务；不同状态任务采用标准化色块区分：绿色代表已核验完成、橙色代表进行中、紫色代表待启动规划、红色代表风险逾期任务。
单条任务卡片精简展示任务名称、归属模块，鼠标悬浮可展开详情弹窗，支持快速筛选任务状态、自定义视图排序，团队成员可快速认领、查看自身负责工作，管理者可直观查看每日团队负载，合理分配工作量。
2.3 AI 绩效分析与截止管控模块：自动化降低管理成本
独立 AI 绩效分析模块自动测算流程简化效率，量化 AI 为团队节省的工作量；截止管控功能实现全自动化管理：系统自动识别变更交付节点，推送到期提醒，任务逾期时自动重新分配对接人员，无需管理者手动跟进督促。
整套状态标签组件统一规范，Active、In Progress、Validation 三类核心进度标识色彩固定，全页面通用，团队成员无需额外学习即可快速分辨任务阶段。
2.4 团队协作与会议管理模块：打通跨部门信息同步
页面右上角聚合全部项目协作人员头像，点击可快速查看成员分工、在线沟通；独立会议卡片统一记录会议主题、时间段、会议规划内容，区分「已规划 / 进行中 / 已结束」状态，自动留存会议记录，避免跨部门信息断层，减少线下同步沟通成本。
三、视觉与标准化组件系统：高端深色 B 端专业体验
3.1 色彩视觉体系（适配企业长时间办公场景）
基底主色：低饱和深紫深色背景，弱化屏幕强光刺激，长时间办公不易视觉疲劳，塑造科技感专业企业氛围；
数据高亮色：明黄色用于整体进度环形图、绩效重点数据，紫色作为 AI 功能、待启动任务主色，绿色代表完成 / 核验状态，橙色代表进行中任务，四色形成强区分度，快速识别数据与任务状态；
文字层级：纯白色大号数字展示核心指标，浅灰色小字承载辅助说明，高对比度保障深色界面文字清晰可读；
操作功能色：白色作为按钮、弹窗基础底色，与深色背景形成柔和对比，不刺眼。
3.2 全场景可复用标准化组件库
整套后台搭建完整统一组件体系，覆盖：侧边导航、数据柱状图、环形进度指标、任务日历卡片、截止任务卡片、会议日程卡片、任务状态标签、弹窗浮窗、AI 功能按钮、人员头像组件等全部页面基础元素。
统一组件带来双重企业使用价值：
管理 & 执行端：全页面视觉、交互逻辑统一，新入职团队成员快速上手系统，降低工具学习成本；
产品迭代端：新增项目模块、AI 功能、管理报表可直接复用现有组件，大幅缩减设计、开发人力成本，系统拓展性更强。
3.3 品牌视觉体系配套
项目配套专属点状抽象品牌 Logo，以圆点阵列构成字母 M 图形，简约几何风格和后台科技极简视觉完全统一，线上后台、宣传物料视觉语言贯通，强化企业项目管理工具专属品牌记忆点。
四、交互与企业管理体验核心亮点
全局信息前置设计：首页聚合工时、进度、任务、会议、协作人员全部核心数据，减少多层级页面跳转，提升管理者统筹效率；
AI 自动化全流程赋能：自动绩效分析、到期提醒、任务重分配，替代大量人工统计、跟进工作，压缩管理人力成本；
标准化色彩状态体系：任务、数据、功能通过固定色彩区分，无需阅读文字即可快速抓取核心信息；
轻量化悬浮弹窗交互：任务详情、人员信息、操作菜单均采用浮窗展示，无需新开页面打断当前工作流；
多模块分区独立卡片设计：截止任务、会议、周期数据分区隔离，信息互不干扰，逻辑清晰不杂乱。
五、项目商业落地价值
提升企业项目交付效率：全局可视化管控 + AI 自动化工具，提前识别项目滞后风险，降低延期交付概率，提升项目交付质量；
缩减企业管理人力成本：自动统计、智能提醒、任务重分配功能，减少项目专员、行政跟进、数据统计的人工工作量；
差异化市场竞争力：市面多数项目管理工具缺少内置 AI 辅助模块，深色高端可视化界面精准面向中大型企业、科技团队，形成独特产品优势；
可持续业务拓展：模块化组件架构可后续拓展多项目台账、财务工时统计、客户对接模块，满足企业长期数字化管理升级需求。
六、全案设计总结
双人群需求平衡设计：同时兼顾企业管理者全局数据统筹、一线执行团队轻量化任务操作两类核心诉求；
B 端深色数据界面分层设计，核心指标放大前置，辅助信息收纳至次级区域，解决海量数据阅读困难问题；
AI 功能深度融入产品全流程，用自动化设计解决企业重复性管理工作痛点；
全组件化界面搭建，统一视觉与交互标准，兼顾团队使用流畅度与产品长期迭代拓展能力。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
线上医疗问诊预约 App 全案用户体验价值解析
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套线上医疗问诊预约 App 的ui设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
一、项目基础概述
1.1 项目背景与核心用户痛点
本项目是一站式线上医生预约诊疗 App，核心覆盖两类使用人群：有问诊、复诊需求的普通就医用户、多科室私立诊所 / 综合医疗机构运营方。
传统线下就医与老旧医疗预约产品存在多重体验短板：
用户端：挂号流程繁琐，科室查找复杂，医生资质、出诊时间、收费标准信息分散，预约操作步骤冗长；无法直观查看患者真实评价，难以快速匹配适配自身需求的医师；
机构运营端：多科室数据分散，预约、改期、取消流程依赖人工客服，人力成本高，缺少统一的患者管理与线上获客渠道；
界面体验：多数医疗软件色调沉闷、信息堆砌，页面层级混乱，中老年用户操作门槛高，缺乏安全感与专业舒适感。
本产品以「简化全流程预约、透明化医疗信息、轻量化多科室管理」为核心设计思路，从患者就医体验、机构运营效率两大维度解决行业现存痛点。
1.2 项目核心设计目标（以用户真实需求为核心）
降低用户就医操作门槛：科室分类直观，预约链路极简，全年龄段用户均可独立完成挂号；
医疗信息透明化：集中展示医师从业年限、接诊人数、收费、出诊时段、真实患者评价，帮助用户快速决策；
优化机构运营效率：线上自助改期、取消预约，减少客服接待压力，打通多科室统一管理后台；
统一专业温和的视觉体系：医疗向低饱和蓝为主色调，搭建标准化组件库，全页面视觉、操作逻辑连贯，塑造安心可靠的医疗品牌感知。
1.3 完整用户使用闭环
产品覆盖完整就医线上流程：科室快速筛选 / 搜索 → 医师列表浏览对比 → 医师详情资质查看与评价查阅 → 选择就诊日期时段 → 一键完成预约 → 预约单管理、线上改期取消、就诊后评价反馈。
二、全链路用户使用体验拆解
2.1 首页科室筛选页：快速定位就诊需求
页面顶部设置全局搜索框，支持医生、病症、科室关键词检索；下方以统一图标色块分区展示全科室入口，心内科、牙科、妇科、心理科等八大常见科室一目了然，无需多层菜单查找。
下方医师推荐卡片集中展示核心信息：医师姓名、所属医院科室、综合评分、每日出诊时段，底部放置醒目黑色预约按钮，用户无需进入详情页即可快速发起挂号，大幅缩短操作路径。同时支持收藏心仪医师，方便后续复诊快速查找。
2.2 医师详情页：完整透明展示医疗信息
点击医师卡片跳转详情页，分层陈列全部决策所需信息：
基础资质：从业年限、累计接诊患者数量、每小时诊疗费用；
就诊预约模块：下拉选择就诊月份、具体日期，多时段分时选择框清晰区分可预约档期；
患者真实评价板块：拆分接诊沟通、院内环境两大评价维度，星级直观展示医师服务水平。
全部信息分区清晰，主次分明，用户无需反复翻页即可完整了解医师情况，减少决策顾虑。
2.3 预约与订单管理页：自助化降低人工成本
预约成功后生成专属就诊订单卡片，清晰标注就诊医师、时间、地址；支持用户线上自主更改就诊时间、取消预约，全部操作无需联系客服。
订单配套核对清单，区分线上问诊、线下到院诊疗两类服务，就诊前自动留存预约凭证，方便到院核验，同时减少机构前台核对工作量。
2.4 就诊评价页面：完善双向反馈体系
就诊结束后用户可提交多维度星级评价，分别针对医师沟通服务、医院环境两大板块打分，评价数据实时同步至医师主页，为后续患者提供真实参考，同时帮助机构优化服务短板。
三、视觉与组件系统：塑造专业安心的医疗氛围
3.1 色彩视觉体系（适配医疗行业信任感需求）
主色调：干净柔和的深海蓝，医疗行业通用信任色，低饱和度不刺眼，弱化就医焦虑感；
基底色：纯白 + 浅灰页面底色，弱化视觉压迫，长时间浏览无疲劳感；
功能区分色：纯黑色作为主行动按钮（预约、提交），高对比度突出核心操作；浅灰用于次要标签、辅助文字；红色爱心作为收藏标识，轻微点缀提升页面活力。
3.2 标准化可复用组件库
整套 App 统一标准化组件，覆盖科室图标按钮、医师信息卡片、星级评分模块、日期时段选择器、评价表单、底部操作按钮等全部基础元素。
统一组件带来双重用户价值：
患者端：全页面操作样式、交互逻辑一致，老人、新手无需反复学习页面操作；
机构运营 & 迭代端：新增科室、活动页面可直接复用组件，大幅降低开发与设计成本，系统扩展性更强。
四、交互与用户体验核心亮点
需求前置筛选：首页直接展示全科室入口 + 热门医师推荐，用户打开 App 即可完成核心操作，减少跳转层级；
信息分层减法：医师卡片只保留关键决策信息，详细资质、评价收纳至详情页，首页不堆砌冗余文字；
全自助预约管理：支持自主改期、取消预约，减少机构人工客服压力，提升用户自主操作便捷度；
透明化评价体系：多维度星级评价直观展示医师服务水平，消除用户线上挂号信息不对称的顾虑；
极简预约链路：从选科室到完成挂号仅 3 步核心操作，无多余弹窗、表单拦截。
五、项目商业落地价值
提升患者留存与转化：简化挂号流程、信息透明化，降低用户就医决策成本，提升线上预约转化率，为医疗机构拓宽线上获客渠道；
降低机构运营人力成本：线上自助改期、取消、评价全流程自动化，大幅减少客服、前台接待工作量；
打造差异化线上医疗品牌：温和简约专业的视觉风格，区别于市面上杂乱繁杂的医疗 App，塑造安心可靠的品牌形象；
可持续业务增长：模块化系统架构支持后续拓展会员套餐、线上问诊、治疗套餐等增值业务，帮助机构提升长期营收。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
Dorun Dorun 结伴跑步社交 App 全案体验价值解析
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套结伴跑步社交 App 的ui设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
Dorun Dorun 是一款主打「结伴慢跑、运动社交」的轻量化跑步记录 App，核心服务两类人群：日常慢跑爱好者、想要养成运动习惯却难以独自坚持的普通用户。传统运动类产品普遍存在用户体验短板：
1. 独自运动缺少陪伴与正向激励，用户极易放弃打卡，运动留存率低；
2. 运动页面数据繁杂冰冷，纯数字图表枯燥，缺少情绪共鸣；
3. 社交链路薄弱，无法实时查看好友运动状态，运动分享形式单一；
4. 界面视觉生硬严肃，长时间使用容易产生疲惫感。本项目通过「陪伴式 IP + 实时社交 + 轻量化运动记录」的设计思路，从情绪、功能、视觉三层解决用户坚持运动难、社交互动弱的核心痛点。
1. 降低运动门槛：新手引导清晰易懂，操作步骤极简，零基础用户也能快速上手；
2. 打造陪伴式情绪体验：专属卡通 IP 贯穿全流程，消解独自运动的孤独感，持续给予运动激励；
3. 完善运动社交闭环：实现好友实时位置 / 运动状态查看、运动成果个性化分享、长期运动数据沉淀；
4. 统一全页面视觉语言：搭建标准化组件库，保证从引导页、运动页到个人中心，操作逻辑、视觉感受连贯统一。
产品完整覆盖运动全生命周期：新手引导 →运动前好友状态查看→运动中轨迹实时记录→运动后个性化打卡分享→个人长期运动数据存档，形成完整的“运动—社交—复盘”闭环。
开屏三页引导完全站在用户视角，直白展示三大核心功能：结伴跑步、查看好友实时运动、打卡分享运动日常。页面搭配治愈 IP 形象，文字简短易懂，底部统一行动按钮，无多余信息干扰，用户 3 秒就能明白产品能为自己带来什么，大幅降低新用户认知成本。
运动前页面：社交激励唤醒运动动力
用户进入 App 首页即可实时查看全部好友运动动态：包含好友跑步距离、上次运动时间、在线状态。配套暖心唤醒通知机制：针对 3 天以上未运动的好友推送提醒，通过社交督促激发用户运动意愿，解决 “独自运动没动力” 的核心痛点。页面信息分层清晰：好友动态列表为核心区域，底部放置一键开启跑步的主按钮，用户无需多次跳转就能快速开启运动。
跑步过程页面摒弃繁杂数据堆砌，只保留用户最关心的 4 项核心信息：实时距离、运动时长、配速、步频；搭配彩色渐变地图轨迹，直观展示跑步路线，视觉柔和不刺眼；全程仅保留 “暂停记录”“结束跑步” 两个核心操作按钮，避免多余功能分散用户运动注意力，适配户外跑步单手简易操作的使用场景。
跑步结束后支持两种打卡展示形式：标准轨迹地图、自定义实景照片背景；用户可自由替换背景图，搭配运动数据生成专属运动动态，丰富分享素材，提升用户主动分享至社交平台的意愿。极简一键发布按钮，完整打通 “运动完成 - 分享互动” 的社交链路。
个人主页分为两大模块：打卡相册、月度运动记录清单。打卡相册以日历图文形式留存每一次运动瞬间，月度清单清晰展示每日跑步数据，让用户直观看见长期运动收获，强化坚持运动的成就感，提升用户长期留存。
项目打造专属蓝色软萌球形 IP，覆盖全套情绪表情：开心奔跑、疲惫低落、加油鼓励、心动点赞等，适配 App 全部使用场景。核心设计逻辑：将冰冷的运动数据赋予情绪温度，用户运动时、懈怠时、完成目标时都有对应 IP 形象陪伴，消解独自运动的枯燥感，建立情感联结。IP 统一应用在弹窗、气泡提示、卡片、引导页，品牌记忆点极强。
· 主色调：柔和浅天蓝色，低饱和度不刺眼，适配长时间户外、室内看手机场景，传递轻松治愈的运动氛围；
· 辅助色：浅灰、纯白作为页面基底，深蓝色作为主操作按钮，区分主次操作；
· 状态色：火焰橙、爱心粉、星星浅黄作为情绪点缀色，仅用于 IP、标签小元素，不破坏整体干净清爽的视觉基调。
整套 App 搭建完整可复用 UI 组件库，覆盖按钮、输入框、列表、卡片、弹窗、底部导航、标签气泡等全部基础元素。统一组件带来两大用户优势：
1. 全页面操作逻辑一致，用户切换页面无需重新适应操作方式；
2. 界面整洁统一，无杂乱视觉元素干扰，查找功能、阅读信息效率更高。
1. 实时好友同步机制：无需主动刷新，一键查看好友当前跑步位置与进度，实现“线上结伴跑步” 的陪伴感；
2. 轻量化信息减法：运动页面只保留刚需数据，非必要功能全部收纳至次级页面，适配户外单手操作；
3. 情绪化反馈设计：所有弹窗、通知、结果页面搭配对应 IP 表情，运动完成给予正向鼓励，懈怠时给予温柔提醒；
4. 多形式分享载体：支持地图轨迹、实景照片双模式打卡，满足不同用户的社交分享喜好；
5. 数据可视化沉淀：日历相册 + 月度清单双重形式记录运动成果，直观强化用户运动成就感。
1. 提升用户留存：依靠陪伴 IP + 社交激励双设计手段，解决运动类 App 普遍存在的 “三分钟热度” 流失问题，拉长用户使用周期；
2. 降低用户获客成本：丰富个性化打卡素材，驱动用户自发向外分享传播，实现自然流量裂变；
3. 差异化市场竞争力：市面上多数跑步软件偏向专业硬核数据，本产品主打治愈陪伴社交，精准切入普通休闲慢跑人群空白赛道；
4. 低研发迭代成本：全套标准化组件库，后续新增活动、功能页面可快速复用，降低产品迭代开发成本。
1. 以用户情绪需求为底层逻辑，不止做运动数据工具，更打造陪伴式运动社交空间；
2. 全流程轻量化信息设计，区分运动前 / 中 / 后不同场景的用户操作需求，精准简化页面信息；
3. 专属 IP 贯穿全场景，建立独特品牌情绪记忆点，和同类运动产品形成明显视觉差异化；
标准化组件系统统一全端体验，兼顾用户使用流畅度与产品长期迭代效率。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
Voltera 新能源停车充电系统 UI 全案深度拆解
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套双端停车充电系统的ui设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
Voltera 是一套服务于新能源停车场的一体化智能管控系统，主要面向两大使用群体：停车场运营管理人员、新能源车主。
在传统模式下，双方都存在明显使用困扰：车场管理者无法直观查看车位状态、充电桩使用数据，场地利用率难以把控；新能源车主寻找空闲充电车位费时费力，充电进度、能耗情况也无法实时了解，双方使用体验都大打折扣，信息不通畅成为最大问题。
1. 面向车场运营者：把繁杂的运营数据简化呈现，支持全天候实时监控、数据趋势查看、车位预约管理，让管理工作更高效；
2. 面向新能源车主：简化操作步骤，快速找到合适的充电车位，实时查看充电状态与能耗，打造便捷的用车体验；
3. 全场景视觉与体验统一：电脑管理后台、手机 App、线下广告屏保持体验一致，线上线下服务无缝衔接。
系统支持多设备使用，包含 PC 端管理后台、苹果移动端 App、户外立式信息屏，全面适配不同场景下的使用需求。
整套系统根据两类人群的使用习惯，规划了专属操作流程：车主可完成登录、查找车位、在线预约、实时查看充电状态等操作；车场管理人员可查看全场车位数据、统计使用趋势、管理充电订单。
使用优势：
1. 功能分区明确：系统划分为登录首页、全场数据总览、车位筛选、充电数据查看、系统设置几大板块，功能划分清晰，上手零门槛；
2. 体验持续优化：结合大量真实用户的使用反馈反复调整流程，规避操作卡顿、查找困难等问题，适配不同年龄、操作习惯的使用者；
3. 人群需求区分：管理端侧重全场宏观数据，车主端聚焦个人用车需求，功能不冗余，每个人都能快速找到自己需要的内容。
电脑端专为车场管理人员打造，布局规整合理：左侧为常用功能入口，中间展示车位信息，右侧搭配全场停车场全景视图，底部呈现各类运营数据。
使用特点：
1. 信息主次分明：首页优先展示空闲车位、占用车位、充电车位等核心数据，再延伸至车位详情、月度 / 周度使用率等辅助信息，查看逻辑循序渐进；
2. 操作灵活便捷：支持全景地图缩放、鼠标悬停查看车位详情，还可自由切换年、周、日不同时间维度的数据，满足多样化管理需求，适配长时间办公查看的使用场景。
（2）手机 App：轻量化设计，随手即用
手机屏幕空间有限，系统遵循 “核心功能优先展示” 的原则，打造极简使用体验：
1. 底部设置固定导航栏，将充电这一高频功能放在核心位置，点击即可直达；
2. 首页优先展示停车场全景与推荐车位，充电页面重点突出充电进度，能耗数据也以简易图表呈现，一目了然；
3. 全设备体验统一：手机端沿用电脑端的信息展示样式，仅精简内容，用户切换设备使用时，无需重新适应，学习成本极低。
整套界面采用简约商务风格，以易用性为核心打造视觉体验：
· 整体以白色、浅灰色为基底，色调柔和，长时间查看屏幕也不易产生视觉疲劳；
· 用不同颜色区分设备与车位状态：绿色代表车位空闲、充电运行正常，蓝色专属标识新能源充电桩，橙色提示使用高峰，黑色按钮标注主要操作选项，无需阅读文字，仅凭颜色就能快速判断状态；
· 品牌视觉统一：简约品牌标识贯穿所有设备，线下宣传物料也保持同款风格，整体观感整洁专业。
文字大小区分明确，核心数据放大展示，辅助说明文字简洁精炼；页面预留充足留白，内容排布疏密得当，不会出现信息拥挤的情况。
系统搭配实景图片、简易图表辅助展示：用车场、车辆实拍图让场景更直观；用折线图、柱状图展示数据变化；用彩色区块区分不同车位类型，告别密密麻麻的文字描述。
系统将各类信息整合为标准化展示模块，分类清晰：
1. 车位信息模块：清晰标注车位位置、步行距离、收费标准、充电标识与预约按钮，电脑端多列展示、手机端单列排布，查阅方便；
2. 数据统计模块：突出核心数据，搭配简易图表，使用率、能耗等数据直观可见；
3. 充电详情模块：整合车辆状态、充电功率、剩余时长等信息，电脑端、手机端均可灵活查看。
规整的展示形式，让信息查找更快捷，大幅提升使用效率。
1. 重点数据放大呈现，车位占用率、充电进度、使用涨幅等核心信息第一眼就能捕捉；
2. 支持多维度数据对比，管理人员可清晰区分普通车位与充电车位的使用差异，为运营决策提供参考；
3. 悬浮提示功能：鼠标点击或悬停即可查看数据解读，不用反复跳转页面，查看数据更省心。
1. 智能推送贴心便捷：车主打开 App，系统会自动推荐距离最近的空闲充电车位，省去手动筛选的麻烦；车场管理后台首页直接展示全场运营数据，无需层层点击查找；
2. 数据实时同步：电脑后台与手机 App 数据实时联动，车位状态、充电进度毫秒级更新，信息零延迟；
3. 操作流程极简：从找车位、预约、充电到结束订单，全程仅需几步核心操作，无多余弹窗与繁琐表单，使用流畅；
4. 线上线下体验联动：线下户外信息屏与手机 App、电脑后台使用同款视觉与内容，服务体验保持统一。
1. 兼顾管理与使用双重需求：一套系统同时满足车场运营的大数据管理需求，和车主轻量化的用车需求，帮助停车场降低运营成本，提升整体服务效率；
2. 用数据赋能智慧运营：系统将车位空置率、充电桩使用率等运营数据直观呈现，帮助车场管理者合理调整定价、规划充电桩布局，实现精细化运营；
3. 贴合新能源行业调性：整体风格简约大气，契合新能源汽车科技、高端的行业定位，区别于传统老旧的停车系统，提升车场整体形象。
1. 多设备无缝适配：电脑、手机、线下屏体验统一，不同场景使用都顺手；
2. 数据展示通俗直观：不管是管理人员还是普通车主，都能轻松看懂各类数据；
3. 流程前置优化：结合真实使用习惯规划操作路径，从源头减少操作麻烦；
4. 精准区分人群需求：针对管理者、车主打造专属功能，各司其职，实用性拉满。
转载自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
现在 AI 产品这么多，作为 UIUX 设计师，我到底应该使用哪一款？
Figma Make、Gemini、Claude Code、Codex，每一款产品看上去都能生成内容、写代码、做页面。
但真正深度使用过后，你会发现：它们擅长解决的问题并不相同。
兰亭妙微UI设计：今天，我们就站在 UIUX 设计师的真实工作流程中，聊聊每一款产品的能力边界，以及究竟应该如何选择。AI 产品更新很快，后续能力仍然会不断变化。
在对比之前，我们需要先明确一件事：
AI 产品不是功能越多越好，而是要看它能否进入你的真实工作流程。
比如，我要写一篇公众号文章、整理用户访谈，这和我要搭建一个复杂的页面 Demo，完全是两种任务。
如果没有理解差别，我们就很容易陷入一个误区：
今天看到别人用 Claude Code，我就去折腾 Claude Code；明天发现 Figma Make 更新了，又把所有流程搬回 Figma。
工具收藏了一堆，最后真正工作时依旧不知道应该打开哪一个。
那对于 UIUX 设计师而言，我们应该重点关注哪些问题？
接下来，我们逐个拆解。
如果你本身就在使用 Figma，又不想折腾复杂配置，那么 Figma Make 应该是最容易开始的工具。
它最大的优势在于：距离设计师原本的工作环境足够近。
你只需要在 Figma Make 中通过对话，就可以创建交互原型、Web 页面和功能 Demo。
同时，它支持将现有设计稿、竞品截图、产品文档和图片素材作为参考内容。比如，你可以丢给它一张竞品截图，让它参考页面布局、颜色和内容结构，生成一个相近的页面。
如果公司已经有相对成熟的设计系统，还可以通过 Make Kits 引入组件、变量、样式和使用规则，让生成结果更接近团队规范。
不过，这里大家需要留意：
接入设计系统，不代表生成结果一定正确。
特别是复杂业务页面，仍然需要设计师反复检查信息结构、组件使用和交互逻辑。竞品截图也只能作为参考，并不等于可以像素级还原。
这里稍微多说一点，现如今很多设计师都非常依赖 AI 工具，根本不用自己去做设计，但从来没有思考过 AI 生成的结果是否正确。比如今天有同学来咨询一个小的问题，在AI生成的页面中，他没有做任何的思考，直接使用结果导致提案失败，所以我们现在是需要具备判断能力的。
所以，Figma Make 更适合：
在我的日常使用中，Gemini 更多承担的是“内容助手”的角色。
它支持较长的上下文，也具备文本、图片、音频和视频等多模态理解能力。
因此，无论是阅读行业报告、分析竞品资料、整理访谈记录，还是拆解一段视频内容，它都非常合适。
在我自己的工作流里，无论是视频文案、公众号文章，还是课程资料，我都会使用 Gemini 做初步整理和润色。
从个人体验来看，它在表达层面会更自然一些，也更适合处理较长的文本内容。
不过，如果你的目标是直接修改 Figma 页面，或者搭建一套完整的设计工程化流程，它并不是第一选择。
Gemini 更适合：
Claude Code 的定位相对明确：
它首先是一款面向工程任务的代码智能体。
如果你需要理解复杂项目、梳理代码结构、定位 Bug，或者将一个页面 Demo 做得更加稳定，那么 Claude Code 会是非常不错的选择。
它能够读取项目文件、执行命令、修改代码，也可以通过 MCP 连接 Figma、Google Drive、Slack 等外部工具。
所以，Claude Code 并不是不能接入 Figma，而是它的重心依旧偏向工程实现。
在我的使用体验中，如果任务涉及复杂代码逻辑、项目级修改和稳定落地，我会优先考虑 Claude Code。
但如果目标是生成图片素材、调整视觉风格，或者希望在设计工具之间快速往返，它就不是我的第一选择。
Claude Code 更适合：
最后，我们来聊聊 Codex。
目前在日常辅导中，我更建议 UIUX 设计师重点尝试 Codex。
原因不是它在每一个单点能力上都绝对领先，而是：
它能够把设计师原本割裂的工作流程串联起来。
首先，Codex 可以通过 Figma MCP 读取组件、变量、布局和设计上下文，也可以将代码页面重新传回 Figma，生成可编辑的设计图层。
这就意味着，设计稿与真实页面之间不再是单向交付，而是能够反复往返。
其次，Codex 支持图片生成和迭代修改。
比如页面缺少图标、插画、背景图或者产品素材，你可以直接让它生成，再根据页面效果反复调整。
然后，它还支持 Computer Use、应用内浏览器和插件。
这就让设计师可以进一步串联：
需求梳理 -> 页面生成 -> 素材补充 -> 浏览器验证 -> 设计走查 -> 继续优化
比如我们之前讲过的设计验收，就可以让 Codex 通过浏览器查看真实页面，再对照设计稿检查问题。
当然，功能多也意味着使用时需要先想清楚任务。
Codex 并不是一个“一句话解决所有问题”的魔法工具。你依旧需要明确自己的目标，逐步搭建适合自己的工作流。
Codex 更适合：
如果你只是想快速生成原型，可以优先使用 Figma Make。
如果你需要整理资料、理解长文本和润色表达，可以优先使用 Gemini。
如果你要处理复杂代码和工程逻辑，可以使用 Claude Code。
如果你希望进一步串联设计、代码、素材和验收流程，可以重点尝试 Codex。
其实在我看来，设计师不需要强行选择唯一一款 AI 产品。
我自己更常用的方式是：
工具永远会不断更新。
我们真正需要掌握的，不是某一个软件的固定操作，而是理解它们的能力边界。
当你面对一个新任务时，能够快速判断应该使用什么工具，把想法真正落地，这才是 AI 带给 UIUX 设计师最重要的价值。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
UI 设计中依旧有很多装饰图标要使用偏拟物的设计风格，虽然很多人以为可以通过 AI 来生成，但实际上真正符合页面需要的设计很难通过 AI 来获得，所以我们依旧要自己来绘制。
这类轻拟物图标画起来并不难，只需要掌握一定的规律以及几个基本操作技巧即可。而最好的入门方式，就是从“画圆”开始，就像学素描时最开始画的圆形石膏，用它来认识光影的效果。
设计中对拟物效果的实现，就是对三个基本要素的塑造，形体、光影、材质。
形体就是物体本身的外轮廓和外形样式，不同的风格和设计标准会对外形有不同的绘制要求，比如有的复杂写实有的简约随意。除了外形复杂度外，还有个关键的知识点，即 —— 透视关系。
透视关系就是现实世界物体在人眼中成像的一种模式，离得越近的东西越大，越远的东西就越小，也就是我们所说的近大远小。用一个正方体来解释，就是当它摆出不同角度时，那么侧边的面会朝远端逐渐缩小。
如果不带透视关系，那么它的不同面就没有缩小的效果，上下边平行处于等高的状态。
设计师输出图形，就要正确的反映空间关系，加或不加都可以，但不能出现两种混用的冲突，那就是没想好要怎么表现。同时就是元素本身角度的控制会对下一步光影的应用产生巨大的影响，因为不同的角度就会形成不同的光影关系，而之所以素描最喜欢从圆开始练起，就是因为圆形 “只有一个” 角度。
第二个光影要素，就是物体在接受光照后呈现出来的高光反射与遮挡光源后形成的投影。如果只有一个圆，在接受一个光源的照射后就会形成下面这样的光影关系。
也只有在光照的影响下，物体的表面才不会是纯色的，也才能反应本身的弧度。所以每次绘制拟物图形我们都要确定它的光源在哪，决定受光面和投影的方向。
最后一点则是材质，也就是物体表面使用哪种材料，这不仅会决定它使用哪种肌理纹路，也会决定它面对光影的效果。比如一个镜面材质，表面就是光滑且高反光度的，而磨砂玻璃材质，则是弱反光且具有透明模糊的效果。
上面三个就是拟物图标绘制最核心的知识点，也是最基础的美术专业知识，虽然它们还有很多细节可以拓展和学习，但所幸我们今天设计的质感图标不再是追求高度还原的拟物，而是经过简化的 —— 轻拟物。
虽然那些知识不能被忽视，但因为我们要设计的东西也简单，所以可以在一边实践中一边学习，效果会更好。
接着我们就开始来画圆，掌握拟物效果的实操方式，在这里我们演示用的软件还是 Figma，只用到最基础的矢量、填充、描边、图形效果等基础功能。不管你用 Sketch 还是即时设计、Mastergo 都一样。
第一步就是创建画布后画个圆，这个圆用 100-200px 大小就行，然后给圆填充一个基础的颜色。
然后我们确定这个圆是镜面材质的，光源是从正上方往下打。所以圆应该上方比下方颜色亮，且因为这是球体有弧度，所以添加的是 “径向渐变”。通过这个渐变的添加为整个圆的色彩定调，确定明暗关系。
接着添加高光和投影，高光在顶部呈现不规则的椭圆状，然后使用垂直透明度渐变向下逐渐消失。高光是种折射是会受到反射对象色彩影响的，所以高光也不可能是纯白，而要使用和圆一样色相的高明度色彩。
然后就是下方投影，这里一定要明白投影会反映空间的关系。如果使用默认图层效果中的投影，它只能表现环境中的背景和我们的视线垂直，光源也是从视线这侧来的。而我们现在希望塑造的是背景是在底部，且光源是从上打下来的，那么软件自带的投影模式就不适用。
软件自带投影的方向
我们希望创建的投影方向
想实现这个效果就要独立绘制投影，最简单的方式就是先画个小点的深色投影轮廓，然后为它添加图层模糊效果。
到这里图形基本的状态和光影效果都有了，但这看起来太粗糙了，想让它更细腻更生动，就看我们怎么理解光影并为它添加更多细节进去了。
首先作为一个有颜色的玻璃球体，虽然会形成投影但也有光穿过它投射到背景上，那么这些穿过的光线就可以被表现出来，也就是底部要再叠加一层有色的投影。
同时因为光穿透到底部会再往回折射，所以球体底部实际上是会“积累”光线的，这不是明暗交界线，而是玻璃材质本身的一种特性，所以这个积累亮度的底部就要单独画出来，然后添加渐变和模糊效果。
而光在打到顶部时高光的形成是在表面之下（这个大家可以观察玻璃珠），那么表层也有受光面，我们就可以再做个表面的椭圆模糊叠加到上方，让它的高光面更自然。
最后，就是为圆添加一个描边，这个描边还有渐变色，来表现球体边缘的厚度。而这个厚度在顶部是远处不是受光位置所以较深，而底部在反光处所以有高亮。
完成上面的效果这个案例就做完了，要想做细节还可以再往下做。我们可以简单在上面添加图标，那么就是一个玻璃质感的按钮。
做拟物类图标的内核，就是你想表现什么样的结果，要让它的细节呈现到什么地步。复杂和极简没有对错，关键的是你添加的每个细节都能有真实的物理特性去支撑，那么它们看起来才是合理的。
学习拟物就是认识美术的基本原理的过程，再学习不同细节呈现的软件操作方式。
软件是次要的，理解才是最重要的。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
商品卡片是一个广泛存在于电商产品中的组件，不管是狭义上的商品，还是广义上的所有可交易产品 (包括课程、服务、游戏等虚拟商品)，都需要商品卡片来承载它们的关键信息，以方便用户快速了解商品的核心属性。
常见的商品卡片有两种形式，也是电商 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。
1. 初识B端产品和C端产品
C端 Consumer，表示为消费者、个人用户或终端用户设计，直接面向普通用户提供服务来帮助他们实现个人需求。B端 Business，它面对商业和企业，是为帮助企业集团等实现商业目的而设计的软件、工具或者平台。
在我们日常生活中，在手机上使用的大多是 C 端产品，单一的 C 端产品通常是为了实现单一的需求。比如看网红的抖音、听音乐的酷狗、买车票的12306、社交的微信等，这些产品有自己的核心功能，其他的功能则是附加的，倘若没有这些附加功能，虽然用户体验感会降低，但并不会影响产品的核心功能。
而面向 B 端的产品，我个人称之为「暗渡陈仓」，当个人用户为实现个人需求产生了一系列动作，往往伴随着该需求的另一端也会反馈一系列动作，即 C 端产品的后台产品线（BtoC），比如淘宝卖家平台、饿了么商家版等。除此之外，还有面向商家、企业、业务部门提供的企业级服务产品，以及面对企业或者个人提供的平台级工具产品等。
虽说我们日常使用的更多是 C 端产品，但是 B 端产品对我们的影响也是时时刻刻存在着。C 端产品在明，逐渐改变着现代人的生活方式，B 端产品在暗，间接服务于用户，让一切流程化秩序化，并且具有多个主要功能点。
2. B端和C端产品的区别
在我看来，C 端产品以消费互联网为主，B 端产品以产业互联网为主，C 端更感性，而B 端更理性。
从使用者的角度来说：
从开发的角度来说：
3. 后台产品常见分类
后台产品按其作用可大致分为两类，一是支撑前台产品，二是管理各种资源。我认为后台产品应当是囊括在 B 端产品的范围之内的，常见的类型包括：
1. 初识后台产品设计
说起后台产品，很容易想到复杂、庞大、逻辑缜密，而作为设计师，则苦于竞品短缺、架构复杂，设计的前期工作比设计本身要复杂得多等问题。
后台产品不同于普通用户所使用的 APP，它在用户初次使用和短暂时间内的认知成本是较高的。当用户用惯了一个音乐类的 app，再给他几个其他的音乐 APP，用户是可以迅速上手并且轻易解决自己的需求的。而后台产品则不然。
对于后台产品来说，它并不是随随便便就可以下载使用的，即便你在使用的过程中，也因角色不同而受到权限限制，一般来讲很难像超级管理员一样接触到整体功能；其次，门槛之高，后台产品的使用者一般都是在该行业沉淀了很久，所以要对后台产品进行设计就需要同样了解该行业，甚至更能洞察该行业，业务本身的复杂性质决定了后台产品架构也会比较庞大；然后，无论是工厂商家的进销存管理，还是政府医院的工作流和业务流，乃至企业内部的产品，除了不同行业都有门槛外，对信息和产品也有「保密协议」的使命感，所谓「隔行如隔山」，在后台产品更是如此；最后，后台产品设计往往没有固定的功能架构和商业模式，对于产品经理的逻辑思维能力要求更高，设计师不仅仅是做界面、优化流程，也要主动和产品经理沟通交流，并对产品进行思考和探索。
2. 后台UI设计工作流程
后台 UI 设计的工作，大体分为三个部分：需求分析、设计执行、数据分析。
在需求分析阶段，要对产品本身和行业本身有一些基本的认知。要了解产品的基本情况，比如产品目标、用户人群、产品定位、需求分析、功能模块、主要竞品和产品特色。做这个产品是为了解决什么问题？想实现什么目标？使用这个系统的用户有哪些？不同角色的用户有哪些具体的权限？是否需要对每一个用户的行为都生成操作日志？产品有哪些主要的功能模块？产品的业务流程是怎样的？有哪些同类型的产品？和他们相比我们的产品有什么特色和特点？成功地做出大而全的后台产品，是整个设计团队和开发团队能力的体现，而对很多小团队来说，只能做一些大团队不愿去做的产品，或另辟蹊径在某些方面做专做精。
在设计执行阶段，参照 PM 给出的功能清单做原型和流程的梳理，需要关注的有当前版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等，交互原型则伴随着功能描述、规则判定条件、触发条件等内容。原型设计完成，开始做 UI 视觉方面的设计，而这时后端同步构思需求的实现方案。UI 设计师向前端了解实现框架，方便交接和沟通。当界面实现，UI 设计师应该是最早进行测试的，力求视觉设计和代码实现无误差。在完成设计执行后，从信息层级、文字、图标、图片等方面进行设计走查，进行多次设计验证与测试。
数据分析是产品优化迭代的重要依据。进行多番测试和评审后交付客户（或内部）使用，根据产生的具体问题进行不断迭代，且观察产品能否通过准确的数据反映问题、体现能力，应虚心接纳使用者的使用建议并严谨思考其合理性，用户的使用和反馈是优化产品的重要途径。只有达到了管理和运营的指标，后台产品才是真正产生了价值。
3. 制定设计规范的作用
为后台产品制定设计规范有哪些作用和好处呢？简单来说就是对产品好、对自己好、对团队好、对客户好。
以下数值为参考，请结合特定产品灵活运用。
统一尺寸
据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。
适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。
页面框架
页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。
栅格布局
栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。
谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。
尺寸设定
一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度 200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。
相对间隔
定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。
颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。
品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。
辅助色用于提示其他场景，比如成功、失败、警告、无效等。
中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。
其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。
后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。
后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。
行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。
图标是 UI 设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。
除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较高效方便的方法是在 iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。
按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。
按钮的交互状态包括默认、悬停、点击和不可用。
按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。
规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。
填充按钮之间间距最小为 10px。
导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。
各类导航中的字体大小可进行统一设定。
顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。
侧栏菜单为垂直导航菜单，可以内嵌子菜单。
下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。
步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。
分页的高度设定为 24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。
面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。
徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。
表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。
字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合 PC 端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。
输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。
输入框的尺寸可按照8的倍数进行设定，比如 24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为 30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为 20px，有错误提示时候竖向增加 10px 或横向显示在输入框右侧（预留出位置）。
表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体 14px，文字和左右两边边框的边距 10px。
选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。
搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮 4px，内部文字 14px。
单选多选框尺寸 16*16px，多个选项横向排列间距 16px，纵向排列间距 8px。
开关按钮外框 40*20px，内部圆形 16*16px。
表格在后台产品 UI 设计中占比非常大，用来展示数据、统一管理、作为详情入口，是最清晰、高效的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。
表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。
表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。
行高
表格行高可设置为表格内字体高度的 2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。
行数
表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。
列宽
列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「...」展示，鼠标悬停出现完整内容（比如详情、描述）。
列数
表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
对齐方式
表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1 虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。
详情入口
表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。
包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。
弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。
弹框
弹框出现时，主题内容增加一层遮罩 #000，透明度 50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。
侧滑框
侧滑框又称抽屉，出现在右侧，固定宽度 400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。
骨架屏
为某些特定数据提供数据加载等待时的占位图形组合。
全局提示
建议停留时间 3s，可根据文字字数调整停留时间，文字内容限制在 30 以内。
警告提示
用不同颜色和样式展示需要关注的信息。
通知提醒
消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。
绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。
页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。
数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。
功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。
考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。
不管是做 C 端产品还是 B 端产品，都是为了实现用户的需求、帮用户解决问题。
刚接触后台产品的时候，最希望能把产品做的炫酷、美观，工作中慢慢地发现项目的背后思考更为重要，产出的设计成果也应该有理有据、支撑整个设计体系。网上供大家使用和学习的资源非常多，对一些公司来说、专门去制定一套自己的后台设计规范不免显得费时费力，合理引入 antdesign 和 element 等开源的设计组件，会使得设计师以及前端事半功倍，有助于设计师把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上。
在后台产品的设计过程中，更应该把宝贵的时间用在更值得关注的事物上，让设计师能够辅助业务挖掘，从趋于相同的表象中找到产品独有的闪光点，从而切实解决问题和实现价值。
兰亭妙微（蓝蓝设计）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