北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套博客广告投放B端管理后台的ui设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
一、项目基础概述
1.1 项目背景与两类核心用户痛点
Wildcast 是 Anoda 旗下专注播客商业合作的一站式广告投放管理后台，同时服务品牌广告投放方、播客创作者 / 媒介运营两大核心角色。
传统播客广告管理工具普遍存在多重运营短板：
品牌广告主痛点：无法直观统筹多渠道播客投放数据，听众转化、下载量、预算消耗、类目分布数据分散，需要手动汇总表格；新建投放活动流程繁琐，素材上传、类目筛选、效果复盘割裂，无法批量管理多场次广告计划；缺少标准化数据看板，投放效果好坏难以快速定位。播客媒介 / 创作者痛点：合作邀约、广告素材、结算排期、听众反馈通知分散在多个页面，批量管理品牌合作效率低下；商品分销（联盟好物）无统一陈列管理页面，兑换、删除、排序操作繁琐；各类确认、删除、审批弹窗样式不统一，操作学习成本高。界面体验痛点：市面上同类音频广告后台多采用深色厚重风格，数据卡片拥挤、色彩杂乱，长时间办公浏览易视觉疲劳；缺少完整标准化组件库，新增活动、商品、报表页面开发周期长；信息层级混乱，核心经营数据藏在次级页面，管理者无法一眼掌握全盘投放情况。
本项目以「轻量化浅白简约视觉 + 全链路投放数据可视化 + 双角色分层功能架构」为核心设计思路，同时满足品牌方投放统筹、播客媒介合作管理两大运营需求，一站式打通活动创建、数据复盘、素材管理、商品分销、消息通知全流程。
1.2 项目核心设计目标
全局数据看板前置：首页聚合全部核心经营指标，听众总量、投放匹配度、播客数量、下载趋势、类目分布、预算消耗同屏展示，管理者无需多层跳转即可全盘把控投放效果；
双角色分层功能架构：区分品牌投放、播客媒介两套操作逻辑，品牌侧重活动创建与数据复盘，媒介侧重合作邀约、联盟商品管理；功能模块按需拆分，无冗余无关功能干扰；
完整标准化组件与弹窗体系：统一图表、数据卡片、表格、上传控件、审批弹窗、筛选下拉框，全页面交互逻辑、视觉样式统一，降低新员工上手门槛，同时缩短产品迭代开发周期；
轻量化柔和浅紫视觉体系：以低饱和淡紫色作为品牌功能主色，纯白页面基底，大面积留白弱化 B 端后台压抑感，长时间数据分析不易视觉疲劳；
闭环商业运营流程：搭建从新建投放活动→素材上传审批→实时数据监控→联盟商品分销→消息通知反馈的完整业务闭环，覆盖播客广告全生命周期管理。
1.3 完整商业运营使用闭环
全局数据总览看板 → 新建 / 批量管理投放活动 → 单活动详情素材上传与类目配置 → 联盟分销商品管理 → 实时通知消息处理 → 数据筛选导出复盘 → 审批 / 删除 / 排期弹窗操作。
二、全链路运营使用体验拆解
2.1 首页数据大盘：一站式全盘掌握投放经营数据
左侧固定侧边导航，划分数据总览、投放活动、广告位、联盟商品、消息支持五大一级模块，角色可快速切换功能区；
页面顶部核心指标卡片横向排布：投放匹配度、确认收听用户总量、合作播客数量三大核心经营数字放大突出；下方分区承载多维度可视化图表：环形图展示播客类目投放占比、折线图展示 24 小时下载波动、进度条看板展示广告位投放状态占比；右侧独立通知卡片实时推送播客合作确认、活动更新提醒。
顶部提供时间筛选、数据导出、一键新建活动快捷按钮，运营人员无需进入次级页面，即可快速发起新投放计划、导出报表复盘，大幅提升日常统筹效率。
2.2 投放活动管理页面：批量管控多场次广告计划
活动列表采用标准化数据表格，清晰陈列活动名称、运行状态、预算、广告素材、适配播客类目，支持多维度筛选、批量导出数据；单场活动聚合六大关键运营维度：总广告位数量、预估触达听众、月度预算使用占比，数据卡片轻量化排布，直观展示投放成本与受众规模。
点击单条活动进入详情页，分双标签页管理：活动基础投放信息、细分属性详情；内置拖拽上传模块，支持批量上传 PDF 广告素材，清晰标注文件大小与数量，素材管理流程简洁直观。
2.3 联盟分销商品管理模块：统一打理音频带货好物资源
独立页面陈列全部可分销音频周边商品（耳机、音频设备、显示器等），统一商品卡片规范：实拍图、商品简介、删除 / 兑换操作按钮；顶部排序下拉框支持按时间升降序筛选，媒介可快速上新、下架、调整合作商品，打造播客带货统一管理入口，补齐平台商业变现链路。
2.4 标准化弹窗与反馈交互体系，统一全页面操作逻辑
项目配套全套统一交互弹窗：活动审批、删除播客、素材上传表单、咨询联系表单、日期选择、放弃合作、消息发送成功提示等；
所有弹窗遵循统一规范：白色基底、淡紫色主操作按钮、红色危险操作按钮，文字层级、输入框尺寸、留白间距完全统一，运营人员无论处理审批、删除、上传、咨询哪类操作，都拥有一致的操作认知，降低误操作概率。
2.5 适配双角色差异化需求的功能分区
品牌广告主侧重：数据大盘、活动创建、预算管控、投放效果导出；
播客媒介 / 创作者侧重：合作通知处理、联盟商品兑换管理、素材上传确认、合作邀约审批；
同一套后台通过导航模块权重区分两类人群核心功能，不用开发两套独立系统，节约产品研发成本。
三、视觉与标准化组件系统：轻量化柔和 B 端简约体系
3.1 色彩视觉体系
基底底色：纯净纯白页面底色，大面积留白，弱化传统 B 端后台密集压抑感；
品牌功能主色：低饱和柔和淡紫色，用于新建、确认、兑换、下一步正向操作按钮，辨识度高且不刺眼；
状态区分色：绿色代表活动运行中、紫色代表待投放、红色用于删除 / 放弃等危险操作、浅灰作为辅助文字与未选中标签；
图表色彩：全套淡紫渐变色系绘制环形图、折线图、进度条，同色系深浅区分数据维度，视觉统一协调。
3.2 全场景可复用标准化组件库
整套后台搭建完整统一组件体系，覆盖侧边导航、数据指标卡片、环形 / 折线可视化图表、数据表格、拖拽上传框、商品陈列卡片、下拉筛选框、多类型弹窗、日期选择器、底部操作按钮等全部基础元素。
统一组件带来双重商业价值：
运营使用者：全页面操作样式、弹窗逻辑完全统一，新入职媒介、品牌运营 10 分钟即可熟练上手系统；
产品迭代开发：新增活动类型、商品类目、数据报表、弹窗流程可直接复用现有组件，大幅缩短设计与开发周期，降低长期维护成本。
四、交互与商业运营体验核心亮点
核心经营数据首页前置，多维度图表同屏展示，运营管理者打开页面即可快速判断投放效果，减少多页面跳转统计工作量；
双角色功能分层设计，一套后台同时满足品牌投放、播客媒介两类用户，降低平台研发成本；
完整闭环商业链路，从广告投放、素材管理、带货分销、消息通知到数据复盘一站式完成，无需跨多个工具协作；
全套标准化弹窗与控件体系，操作逻辑统一，减少误操作，降低团队培训成本；
轻量化浅白柔和视觉，长时间查看海量投放数据不易视觉疲劳，适配职场全天办公场景。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套A 智能旅行规划系统的ui设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
一、项目基础概述
1.1 项目背景与核心用户痛点
TripAI 是一套覆盖平板、手机、网页端的 AI 驱动一站式旅行规划系统，同时服务个人自由行游客、企业差旅管理团队两大核心人群。
传统出行工具普遍存在多重体验短板：
个人游客视角：做行程需要跨平台搜集酒店、机票、景点信息，手动拼凑路线耗费大量时间；无法根据出行人数、出行偏好、预算自动生成专属方案；行程、预算、天气、景点地图信息分散在不同页面，统筹查看效率低；缺少智能语音问答工具，出行疑问需要手动检索。
企业差旅负责人视角：员工出行机票、酒店、行程台账无法统一汇总，人工核算成本繁琐；没有轻量化多端同步工具，电脑、手机数据不同步，外出办公无法随时调整行程；普通旅行工具缺少团队协作、多行程归档功能，不适合商务出行管控。
界面体验痛点：多数旅行软件信息堆砌严重，风景大图与数据卡片混杂，视觉厚重压抑；AI 功能入口隐蔽，需要多层点击才能唤起；移动端、平板端、网页端视觉、交互逻辑割裂，跨设备使用需要重新适应。
本产品以「AI 智能生成行程 + 三端数据实时同步 + 一体化出行信息聚合」为核心设计思路，从个人游客自助出行、企业团队差旅管控两大维度，解决传统旅行工具规划繁琐、信息分散、多端不互通的行业痛点。
1.2 项目核心设计目标
AI 全链路简化行程规划：内置智能语音文字双模式 AI 助手，基于用户预算、出行天数、游玩偏好自动生成完整行程，一键匹配酒店、航班、当地游玩项目；
三端统一协同体验：网页、平板、手机移动端共享一套标准化组件体系，行程、预算、景点收藏实时云端同步，随时随地修改查看出行方案；
一体化信息聚合页面：目的地首页集中收纳景点介绍、实时气温、一周出行预算、人流淡旺时段、本地点位地图，无需跳转多页面完成出行评估；
轻量化治愈简约视觉体系：低饱和柔和风景基底搭配浅白页面底色，高识别度荧光黄作为 AI 功能专属标识，弱化旅行工具厚重繁杂的视觉感受；配套完整品牌视觉系统，Logo、图标、卡片规范全端统一；
兼顾个人休闲出行与企业差旅需求：支持单人行、多人团队行程归档，新增多标签行程分类、多人协作查看功能，适配个人度假、商务出差两类场景。
1.3 完整出行规划使用闭环
产品覆盖旅行全周期：目的地检索 → AI 助手生成个性化行程方案 → 酒店 / 航班 / 景点信息统一查看 → 预算、气温、人流数据可视化展示 → 地图点位标记收藏 → 语音 / 文字调整行程 → 多端云端同步归档 → 团队多人协同查看行程。
二、全链路出行使用体验拆解
2.1 目的地总览首页：一站式聚合全部出行参考信息
平板与网页端首页采用大图沉浸式目的地风景 Banner，顶部展示目的地名称与简介，下方横向标签栏快速切换总览、酒店、行程、航班四大板块；
页面下方分区排布可视化数据卡片：实时当日气温、一周出行预算区间、淡旺季人流提示、本地景点点位地图，每张卡片轻量化圆角设计，信息主次分明。
左侧固定侧边导航栏收纳收藏、消息、行程文件夹、个人资料入口，支持多行程标签页同时打开，适合同时规划多条旅行线路；AI 助手悬浮弹窗常驻页面，随时唤起智能规划功能，不用多层菜单查找。
2.2 AI 智能助手核心模块：语音文字双交互自动生成行程
产品核心差异化功能 ——AI 出行助手采用荧光黄渐变悬浮弹窗承载，支持文字输入、麦克风语音提问两种交互方式；
弹窗内快捷分区提供酒店查询、行程生成、本地游玩项目三类快捷入口，用户输入出行天数、预算、偏好（休闲 / 徒步 / 美食），AI 自动输出整套可调整旅行方案；支持随时修改行程细节、增减景点、调整住宿预算，全程自然对话式交互，降低规划门槛。
移动端同步保留同款 AI 弹窗，三端交互逻辑完全一致，手机外出途中也能语音调整出行计划。
2.3 多端同步行程与地图点位模块：随时随地调整出行方案
手机、平板、网页端行程数据云端实时同步，地图页面标记全部酒店、景区点位，支持收藏、添加到行程；地图搭配淡旺人流柱状图，直观展示目的地出行最佳时段，帮助用户错峰游玩；
气温数据采用柔和渐变环形可视化卡片，仅展示当日核心温度，弱化繁杂气象参数，一眼判断穿搭需求。
2.4 品牌统一视觉与多端适配体系
专属双圆点联动 Logo，寓意两地往返、出行联结，配套多尺寸规范适配桌面图标、页面标识；全套图标、按钮、卡片组件在网页、平板、手机端保持统一尺寸、圆角、色彩规范，跨设备切换无割裂感；
页面大面积留白，弱化多余装饰元素，以目的地自然风光作为柔和背景，营造松弛治愈的出行氛围，缓解用户做行程的焦虑感。
2.5 企业差旅适配功能：多行程归档与团队协同
系统支持新建多行程标签文件夹，商务出差、个人度假分类归档；多人可共享同一份行程，查看统一预算、航班与酒店信息，差旅负责人无需反复转发截图，线上统一管控团队出行方案。
三、视觉与标准化组件系统：松弛简约轻量化出行视觉
3.1 色彩视觉体系（适配旅行松弛治愈氛围）
基底主色：低透明度风景图 + 米白浅灰页面底色，柔和不刺眼，营造轻松度假氛围；
功能识别色：柔和荧光黄作为 AI 助手、核心操作按钮专属色，和页面浅底色形成温和对比，快速识别智能功能入口；
辅助区分色：浅灰用于次要文字、未选中标签，深灰用于标题核心文字，绿色标记推荐点位、舒适出行时段，色彩克制无高饱和刺眼色块。
3.2 全场景可复用标准化组件库
整套三端系统搭建统一组件体系，包含侧边导航、行程标签页、AI 悬浮弹窗、气温可视化卡片、预算图表、地图点位标签、酒店 / 景点卡片、底部操作栏、移动端图标等全部基础元素。
统一组件带来双重用户价值：
出行用户端：网页、平板、手机操作样式完全一致，出差、旅途途中切换设备无需重新学习操作；
产品运营迭代端：新增目的地、出行套餐、企业差旅模块可直接复用组件，大幅降低设计、开发迭代成本。
四、交互与出行体验核心亮点
AI 助手常驻悬浮设计，全页面随时唤起行程规划，省去多层级菜单跳转，大幅缩短规划耗时；
三端云端实时数据同步，电脑做行程、手机外出查看修改、平板居家统筹，全场景无缝衔接；
首页一体化信息聚合，气温、预算、人流、地图、酒店入口同屏展示，一站式完成出行评估；
轻量化松弛视觉设计，大面积留白 + 柔和风景背景，缓解用户规划行程的繁琐焦虑；
语音文字双模式 AI 交互，中老年、不擅长文字操作的用户也能轻松生成专属旅行方案；
兼顾个人休闲与企业差旅双场景，行程归档、团队协同功能满足商务出行管控需求。
五、项目商业落地价值
打造差异化 AI 旅行核心壁垒：市面多数旅行工具仅提供信息查询，本产品 AI 自动生成完整行程，精准抓住用户做攻略耗时的核心痛点，提升产品用户吸引力；
覆盖 C 端游客 + B 端企业差旅双重市场，拓宽产品营收渠道，同时面向个人度假人群、企业采购客户；
三端统一组件架构，后续可拓展机票酒店预订、本地导游、旅行团购等增值业务，产品拓展性强；
松弛简约治愈视觉形成独特品牌记忆点，和市面上厚重繁杂的传统旅游平台形成明显差异化，提升用户留存与口碑传播。
六、全案设计总结
双人群需求平衡设计：同时解决个人游客自助规划繁琐、企业差旅统筹低效两大核心痛点；
跨端统一交互视觉体系，实现电脑、平板、手机三端无缝协同，适配全场景出行；
AI 智能功能深度前置，作为产品核心亮点直观呈现，降低用户做攻略的时间成本；
轻量化治愈视觉语言，弱化工具冰冷感，贴合旅行放松愉悦的情绪需求。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 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。
蓝蓝设计的小编 http://www.lanlanwork.com