兰亭妙微ui设计公司分享：看似简单的投影，背后藏着大量容易被忽略的细节。

在界面设计中，投影的应用越来越普遍，不管是商业项目，还是 Dribbble 上的概念作品，随处可见各式各样的阴影效果。用好投影，是 UI 设计师必须掌握的核心视觉能力。可即便设计软件的可调参数并不复杂，依旧有很多设计师无法借助投影提升作品质感。本篇将从原理出发，完整讲透 UI 投影的设计逻辑与实操方法。

一、有光，才有影

光影是绘画、摄影的底层基础。

如果没有系统了解光影知识，很容易陷入认知误区：误以为投影只是把物体轮廓直接复刻投射到另一个平面，一个光源只生成单一的影子。但现实世界的投影，虚实层次并不均匀，明暗也存在丰富变化。

光学原理中，不透明物体遮挡光源，影子分为本影与半影（伪本影可合并理解）。本影是阴影最深处，颜色最深；外围逐步变淡、向外弥散的部分，就是半影。

现实环境的光源普遍存在散射特性，光线照射物体时会产生多角度漫射光。重叠最多的光线区域形成本影，光线的极限切线区域，则生成半影。

物体、光源、承接阴影的平面，三者之间距离发生改变，本影、半影占比也会随之变化。反过来，我们可以依靠本影、半影的形态，直接读取画面的空间信息：阴影范围越大、半影占比越高，代表物体悬浮高度越高。

同时，投影也会直接交代光源方向。光源在左侧，阴影就向右侧延展；观察阴影的朝向，就能反推主光源位置与光照强度。

除此之外，投影还能传递更多三维线索：判断元素是贴于平面，还是悬浮空中，感知物体自身的厚度。我们的大脑早已习惯这套现实世界的视觉逻辑，会下意识根据阴影解读界面层级。一旦投影违背光影规律，界面就会产生违和感，直接拉低整体质感。

二、从拟物到 Material Design：投影的回归

扁平化盛行的阶段，投影曾一度被大量舍弃，很多人将它视作拟物风格的遗留，担心使用阴影会让设计显得过时复古。

直到 Material Design 推出，谷歌引入了Z 轴的概念：给二维界面赋予虚拟三维空间，元素可以定义和底层平面的垂直距离，而投影，就是用来表达 Z 轴高度的视觉语言。元素 XY 坐标不变，Z 轴数值越大，代表离底层平面越远，悬浮感越强，这份立体感受全部来自投影的暗示。

谷歌官方的 UI 组件参数并非随意设定。拆解源文件可以发现，MD 的阴影由两层叠加而成，对应现实的本影与半影，也常被称作上层阴影（top shadow）、底层阴影（bottom shadow）。

这里有一个关键细节：投影深浅和物体悬浮高度属于非线性关系，阴影由中心向边缘衰减速度逐步加快。但绝大多数设计软件自带投影，只支持线性衰减；在常用平面工具中，只有 Photoshop 可以借助「等高线」功能，复现这种真实的非线性阴影衰减效果。

除了黑白灰阴影，当下设计里彩色投影也十分常见，摄影创作同样会用彩色阴影烘托氛围。但彩色投影不完全是单纯阴影效果，还混杂折射、漫反射色光。做简化理解：可以看作光线穿透半透明物体，投射出带有物体固有色的影子，就像撑开一把绿色遮阳伞，伞下空间会笼罩一层淡淡的绿色。

核心原则：优秀的投影，是能让你感知到它的存在，却不会抢夺视觉焦点。

三、投影实操：常规与非常规效果

设计软件自带投影功能，本质是在元素底层复制一份相同轮廓的图形，通过 XY 轴控制偏移，模糊参数实现弥散效果。 物理规律：物体距离承载平面越近，阴影偏移量越小，模糊程度越低；悬浮越高，阴影偏移、模糊数值越大。

3.1 常规投影（卡片 / 组件悬浮）

假设光源来自顶部，参考 Material Design 双层阴影思路搭建效果：

• 第一层：XY 偏移为 0，仅设置模糊，透明度压低，对应柔和弥散的上层阴影；
• 第二层：保持同等模糊，增加 Y 轴向下偏移，透明度适当提高，对应底层实体阴影。

  

直接照搬 MD 原始参数，很容易让界面显得脏乱拥挤。非 Material 体系的设计，需要整体降低阴影透明度。纯黑色做阴影，透明度建议不超过 20%，常规区间 5%‑15%。

除了直接调用图层投影，也可以手动复制图层做高斯模糊实现双层阴影：把底层阴影单独拎出来，适当缩小轮廓再向下位移，效果会更加贴近真实光影。

想要彩色投影，直接修改阴影颜色即可；不同色相视觉刺激强度不一样，需要对应微调透明度。如果阴影效果偏弱，可以提高元素 Z 轴（悬浮高度），放大阴影的偏移与模糊。

如果是渐变、图片类元素，手动复制图层的优势会进一步体现：底层阴影图层不填充纯色，直接复用原图或者渐变，再做模糊、透明度处理，得到更通透的彩色投影。

3.2 非常规创意投影

我们不必局限于顶光垂直照射的模式，可以改变光源与平面夹角，模拟更多真实光照场景。

当光源角度压低，阴影会被拉长，投射到物体下方的地面上；搭配透视地面，就可以实现长投影效果。也可以模拟聚光灯，得到轮廓收缩变形的阴影。

还可以模拟实体形变，例如卡片边角翘起，对应位置阴影会随之改变形态。

把现实生活里观察到的光影逻辑迁移到设计中，可以极大丰富视觉表达，这类投影同样适用于作品集样机包装。很多样机高级的氛围感，正是依靠这套自定义阴影逻辑；如果只使用软件自带单层投影，最终效果会显得单薄生硬。

四、重要的落地提醒

设计稿中调试完成的阴影，交付开发时务必注意：Android、iOS 平台的阴影渲染逻辑，和 Figma、PS 等设计软件输出效果并不完全对等，参数不能直接照搬，需要设计师和开发协同调试适配。

转载：站酷

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

一、产品定位：先回答系统替谁解决什么问题

• 移动端：作为核心交互载体，承接高频的转账、消费记录查看与语音指令，强调“Track it. Manage it. Own it.”的掌控感。
• AI核心：AI不仅仅是后台算法，更是前台的交互界面（如Voice Analysis），被安排在财务诊断、自动换汇与支出预测等关键决策点。
• 核心价值：通过“Still banking manually?”的反问，直击传统 banking 痛点，利用 AI-first 理念将复杂的金融决策简化为自然的对话与直观的图表。

二、信息架构：把功能转译为用户的资产视角

• 首页层级：以“Available Balance”（可用余额）为绝对视觉中心，下方紧接着“Add/Send/Request/Scan”四大高频操作入口，符合用户打开 App 的第一直觉。
• 模块化分区：将“People”（常用联系人）、“Recent Transaction”（最近交易）和“Smart Analytics”（智能分析）分层展示。特别是分析模块，不仅展示总数，还通过“Essentials/Lifestyle/Fats”等细分维度，让用户一眼看清钱花哪儿了。
• 管理视图：在卡片管理页面，采用堆叠式卡片设计，清晰展示卡号、有效期及状态（Active），并将“Limit/Freeze”等风控操作置于底部，既方便操作又防止误触。

三、关键交互：从手动输入走向自然语言驱动

• Voice Analysis（语音分析）：这是最具突破性的交互设计。用户无需点击多级菜单，只需说出“Exchange 500 USD to EUR...”，系统即可通过波形图反馈识别状态并执行复杂任务。这将“查找-输入-确认”的三步操作压缩为一步。
• 动态筛选器：在交易记录页面，筛选器采用胶囊式标签（Sent, Received, Cards...）与状态标签（Pending, Completed）的组合，支持多选并实时显示选中数量（Apply 3），极大提升了数据检索效率。
• 可视化反馈：支出概览不使用枯燥的表格，而是采用柱状图与进度条结合的方式，配合紫色的动态光效，让数据变化具有“流动感”。

四、视觉系统：深色模式下的科技信任感

• 色彩语义：全黑背景（#000000）奠定高端、神秘的基调；电光紫（Electric Purple）作为品牌主色，贯穿图标、按钮、波形图和强调文字，象征智慧与未来感；绿色仅用于表示收入或正向增长，红色用于支出，符合金融用户的心理模型。
• 网格系统：基于5 Point Grid System构建，确保了在不同尺寸屏幕上的布局严谨性。393px的设计宽度与20px的边距，保证了内容在小屏手机上的呼吸感。
• 图标语言：图标采用线性与面性结合的风格，圆角处理柔和，既保留了金融产品的严谨性，又通过发光的边缘效果增添了科技活力。

五、面向产品与设计团队的可复用价值

六、专业审视：仍需补齐的体验边界

• 可读性风险：在大面积黑色背景上使用高饱和度的紫色文字或图表，在低亮度环境下可能导致眩光或阅读困难，需增加对比度调节选项。
• 语音交互的容错：Voice Analysis 界面虽然酷炫，但如果识别失败或环境嘈杂，缺乏明显的文本修正入口或备选方案，容易导致用户挫败感。
• 信息密度平衡：首页虽然突出了余额，但下方的“Smart Analytics”摘要如果数据过多，可能会挤占交易列表的空间，建议增加折叠/展开机制，让用户自定义首页的信息密度。
• 

结语：设计的最终判断标准是掌控感

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

将速度、网络信息、路由与跨设备监测组织为专业工具体验

面向产品经理与资深设计师的案例研究

导读｜将速度、网络信息、路由与跨设备监测组织为专业工具体验。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位：先回答系统替谁解决什么问题

Netti是一款面向普通用户与技术用户的网络性能工具，提供测速、Ping、网络信息、路由追踪和历史数据，并扩展到Apple Watch等设备。产品需要同时满足一键测试与专业诊断两种深度。

图1  项目界面与设计细节

二、信息架构：把功能转译为用户的工作顺序

首页以速度测试为第一任务，网络信息、路由和Ping作为并列工具；测试结果保留下载、上传、丢包、延迟、服务器和历史。信息架构从简单入口到专业详情逐层展开，避免初次用户直接面对参数墙。

图2  项目界面与设计细节

三、关键交互：从浏览信息走向完成任务

大尺寸START按钮建立明确主动作，测试过程用动态仪表和状态文本持续反馈。完成页将结果、趋势和再次测试放在同一视图；网络详情采用分组字段，便于复制与诊断。手表端只保留Ping和关键结果，符合短时查看场景。

四、视觉系统：品牌表达必须承担信息语义

深色界面适合技术工具和长时间观察，多色渐变环把不可见的网络性能转化为具有能量感的视觉对象。橙、紫、绿既用于品牌，也区分不同指标；等宽数字和终端信息强化专业感，黑色背景则保证图表和仪表聚焦。

图3  项目界面与设计细节

五、面向产品与设计团队的可复用价值

工具型产品的专业度来自数据定义与结果解释。产品经理应明确测试方法、服务器、时间和网络环境，设计师要为结果提供正常区间、影响说明和下一步建议，让非专业用户也能理解“这个数字意味着什么”。

图4  项目界面与设计细节

六、专业审视：仍需补齐的体验边界

渐变仪表视觉强，但不能替代精确数字与无障碍编码。结果页应说明Wi-Fi、VPN和后台流量对测试的影响，并提供测试隐私政策。专业字段可支持复制、分享和导出，同时避免默认暴露公网IP等敏感信息。

图5  项目界面与设计细节

结语：设计的最终判断标准是业务与使用价值

Netti在“一键可用”与“参数可深挖”之间建立了良好层级。网络工具不需要复杂故事，只需要可靠过程、清楚结果和可执行解释；视觉应增强理解，而不是把测量变成表演。

兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

用任务型Agent重构预约、分诊、外联与患者沟通

面向产品经理与资深设计师的案例研究

导读｜用任务型Agent重构预约、分诊、外联与患者沟通。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位：先回答系统替谁解决什么问题

Transform9面向医疗机构提供AI语音代理，覆盖预约、分诊导航、患者与医生消息、回访外联等任务。其设计目标是把复杂的AI能力转译为医疗团队能够理解、采购并信任的具体工作角色。

图1  项目界面与设计细节

二、信息架构：把功能转译为用户的工作顺序

官网按Scheduling Agent、Tasking Agent、Navigator Agent和Outreach Agent拆分能力，使产品矩阵与实际岗位任务直接对应。行业专科入口、合规说明、案例和预约演示构成完整转化链，移动版保持核心任务与安全承诺。

三、关键交互：从浏览信息走向完成任务

每个Agent页面都从典型来电或消息场景切入，再说明自动化步骤与人工衔接。任务型命名降低技术门槛，也方便客户按优先问题选择试点。预约Demo与直接电话入口并列，符合医疗机构不同采购习惯。

图2  项目界面与设计细节

四、视觉系统：品牌表达必须承担信息语义

黑色基底、亮蓝渐变和荧光绿色构成强烈的AI医疗品牌。大字号瑞士风排版与模块化色块表达效率，真实医患人物剪影提供人感。安全盾牌、24/7和70%等证据被视觉化，但仍保持相对克制。

图3  项目界面与设计细节

五、面向产品与设计团队的可复用价值

医疗AI产品必须把能力边界设计得与能力本身同样清楚。产品经理要明确哪些任务可自动完成、何时转人工、如何记录和追责；设计团队应在每个场景中展示同意、身份验证、紧急升级和消息留痕。

六、专业审视：仍需补齐的体验边界

效率数据应注明样本与计算口径，避免营销数字替代证据。强烈视觉可能掩盖临床和合规细节，建议增加实施流程、失败处理和人工监督说明。面向患者的语音体验还需考虑口音、听力和语言差异。

图4  项目界面与设计细节

结语：设计的最终判断标准是业务与使用价值

Transform9的优势在于用“角色”而非“模型”销售AI。任务边界越具体，医疗团队越容易评估收益与风险。真正成熟的AI代理体验，必须让自动化与人工责任无缝衔接。

兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

用自然品牌语言解释API支付、薪资与应付账款产品

面向产品经理与资深设计师的案例研究

导读｜用自然品牌语言解释API支付、薪资与应付账款产品。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位：先回答系统替谁解决什么问题

Crezco为企业和平台提供嵌入式支付、薪资与应付账款能力。品牌官网需要同时服务业务决策者、产品团队和开发者，因此既要解释商业价值，也要证明接入成本、合规与技术能力。

图1  项目界面与设计细节

二、信息架构：把功能转译为用户的工作顺序

首页以“Build better payment products”为总价值主张，随后介绍产品矩阵、嵌入式能力、工作方式、合规与客户证言。移动端保持同一叙事顺序，开发者内容和代码示例被放在足够靠前的位置，避免网站只停留在品牌传播。

三、关键交互：从浏览信息走向完成任务

产品模块采用清晰的行动按钮和分步说明，帮助不同角色进入构建、了解或联系路径。移动端把复杂产品矩阵改为纵向卡片和简化导航。案例、合规和集成优势作为转化前的证据，减少B2B购买中的不确定。

图2  项目界面与设计细节

四、视觉系统：品牌表达必须承担信息语义

深绿、米白和田野摄影构成“金融基础设施像土地一样可靠”的品牌隐喻，区别于常见蓝紫科技风。线性插画解释API与支付流程，珊瑚色按钮提供清晰行动焦点。品牌质感与产品理性之间保持了良好平衡。

图3  项目界面与设计细节

五、面向产品与设计团队的可复用价值

复杂B2B产品的官网不是作品集，而是一条认知与转化路径。产品经理和市场团队应共同定义不同角色需要的证据：决策者看收益和风险，产品经理看能力边界，开发者看文档和示例。设计则需要让这些内容共享同一信息体系。

六、专业审视：仍需补齐的体验边界

自然摄影虽有辨识度，但需确保不稀释支付产品的专业属性。建议进一步突出定价、上线周期、支持地区与API可用性。合规信息不应只是视觉图标，还应链接到具体认证、数据处理与服务等级说明。

图4  项目界面与设计细节

结语：设计的最终判断标准是业务与使用价值

Crezco证明企业金融品牌可以摆脱同质化科技视觉。更重要的是，它用产品结构、技术证据和合规内容支撑品牌承诺，让设计不只“看起来可信”，而是能够被验证。

兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

在高风险暗环境中组织态势、载具、任务与告警信息

面向产品经理与资深设计师的案例研究

导读｜在高风险暗环境中组织态势、载具、任务与告警信息。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位：先回答系统替谁解决什么问题

Vantary是一套面向海事无人载具与任务控制的概念平台，覆盖任务地图、载具状态、扫描、周界安全和移动指挥。它需要在高信息密度、高风险和低光环境中帮助操作人员快速理解态势。

图1  项目界面与设计细节

图2  项目界面与设计细节

二、信息架构：把功能转译为用户的工作顺序

主控制台以任务场景为中心，左侧载具与任务列表、中央地图或3D态势、底部控制参数和右侧告警形成稳定布局。移动端则压缩为快速查看与简单控制，强调跨设备连续而非完整功能复制。

图3  项目界面与设计细节

三、关键交互：从浏览信息走向完成任务

热点、目标和载具状态通过空间位置直接关联，点击对象后出现任务卡、潜在范围和操作入口。橙色警戒区、扫描范围和任务进度为操作员建立即时反馈。高风险动作应采用两阶段确认，并持续显示通信质量与控制权状态。

图4  项目界面与设计细节

四、视觉系统：品牌表达必须承担信息语义

深蓝黑环境贴合夜间海上控制场景，橙色用于目标、威胁和关键行动，形成强烈但有语义的视觉焦点。半透明面板保留背景态势，微弱网格与细线增强技术感；摄影与界面叠加帮助解释实际应用环境。

图5  项目界面与设计细节

图6  项目界面与设计细节

五、面向产品与设计团队的可复用价值

安全关键系统要优先设计态势感知，而不是追求单页功能丰富。产品经理应定义告警等级、控制权限和失联策略；设计师必须验证远距离视认、色觉差异、压力状态和误触防护，并为每个自动化动作提供可解释依据。

图7  项目界面与设计细节

图8  项目界面与设计细节

六、专业审视：仍需补齐的体验边界

当前概念图的对比度偏低，真实海上环境下可能影响快速识别。半透明层和小字号需要显著增强；通信中断、GPS漂移和载具故障等异常状态应拥有独立模式。移动控制尤其需要限制危险操作并显示明确接管状态。

图9  项目界面与设计细节

结语：设计的最终判断标准是业务与使用价值

Vantary最有启发性的地方，是用统一空间语言连接任务、设备和风险。但在安全关键产品中，视觉沉浸必须让位于可读、可控和可恢复，任何模糊都可能变成操作成本。

兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

连接症状入口、医生发现、预约支付与远程问诊的连续体验

面向产品经理与资深设计师的案例研究

导读｜连接症状入口、医生发现、预约支付与远程问诊的连续体验。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位：先回答系统替谁解决什么问题

CareHub面向需要在线寻找医生、预约、支付和视频问诊的用户。产品把医疗服务拆解为更容易理解的消费路径，同时保留专业信息、保险与处方等必要环节，目标是在便利性和医疗信任之间取得平衡。

图1  项目界面与设计细节

二、信息架构：把功能转译为用户的工作顺序

首页从症状分类、最近问诊和推荐医生进入，搜索页支持专科与医生筛选，医生详情承担资质、时间和评价，预约流程则连接时段、患者信息、保险与支付。问诊记录和处方在个人区域持续沉淀。

图2  项目界面与设计细节

三、关键交互：从浏览信息走向完成任务

症状图标降低用户对专业科室名称的依赖，医生卡片同时展示专科、评分和可预约状态。预约采用分步确认，支付与保险信息在提交前汇总；视频问诊保持通话控件熟悉，并提供消息、文件与结束确认。

四、视觉系统：品牌表达必须承担信息语义

白底、浅灰和高饱和蓝色构成清洁可信的医疗体验，圆润头像与真实医生照片增加人感。蓝色在按钮、状态和品牌中保持一致，红色仅用于重要医疗或结束通话操作，避免制造不必要焦虑。

图3  项目界面与设计细节

五、面向产品与设计团队的可复用价值

医疗产品必须把信任设计成可验证信息：医生执业资质、服务边界、费用、隐私和紧急情况说明都应在关键节点出现。产品经理要与合规和医疗团队共同定义流程，设计师则负责让风险提示清楚但不过度阻断。

图4  项目界面与设计细节

六、专业审视：仍需补齐的体验边界

症状入口不能暗示自动诊断，应在紧急症状时明确引导线下急救。评分需要解释来源和样本量。预约失败、医生迟到、退款与处方不可用等服务边界必须完整。隐私授权应按数据用途细分，而不是一次性同意。

图5  项目界面与设计细节

结语：设计的最终判断标准是业务与使用价值

CareHub的成熟方向是把线上医疗当作完整服务，而不是视频通话功能。只有发现、预约、支付、问诊和随访连续，用户才会把便利转化为长期信任。

兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

从车辆状态到充电网络，建立可执行的出行能源体验

面向产品经理与资深设计师的案例研究

导读｜从车辆状态到充电网络，建立可执行的出行能源体验。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位：先回答系统替谁解决什么问题

BlueDot围绕智能汽车日常使用构建移动服务，覆盖车辆状态、续航、充电、地图、历史记录与账户。产品试图把车辆数据和充电基础设施连接起来，让用户在出发前、途中和充电后都能获得连续反馈。

图1  项目界面与设计细节

二、信息架构：把功能转译为用户的工作顺序

首页优先显示车辆、续航、电量和环境状态，底部导航连接地图、扫描、记录与设置。充电场景中，站点、接口、费用和启动控制被组织在同一流程；历史记录与帮助中心则作为低频但重要的信任支撑。

三、关键交互：从浏览信息走向完成任务

充电流程应从发现站点、确认接口、扫码或连接、开始充电到支付结束形成闭环。圆形进度和实时功率表达过程状态，地图与站点卡片帮助用户比较距离和可用性。车辆首页采用模块化卡片，使重要状态可快速扫描。

图2  项目界面与设计细节

四、视觉系统：品牌表达必须承担信息语义

黑色和深灰形成车机级科技感，电蓝色承担主交互与能量语义，局部绿色表示成功或可用。汽车3D图、能量光效和线缆场景图强化硬件连接感；圆角卡片与底部大按钮保证夜间和单手操作的清晰度。

图3  项目界面与设计细节

五、面向产品与设计团队的可复用价值

汽车与充电产品最重要的是状态真实、失败可恢复。产品经理需要覆盖站点被占用、扫码失败、支付中断和网络离线等边界；设计师应持续显示当前阶段、预计时间和可联系支持，避免用户在物理设备旁陷入不确定。

六、专业审视：仍需补齐的体验边界

深色界面需要验证户外强光下的可读性。首页信息较多，可根据出行前、充电中等情境动态排序。地图和车辆数据涉及位置隐私，应提供明确授权与历史删除。关键操作应支持大触控区和无障碍语音反馈。

图4  项目界面与设计细节

结语：设计的最终判断标准是业务与使用价值

BlueDot说明，出行能源体验不是一个漂亮的仪表盘，而是一套跨越数字界面与真实设备的服务流程。每一次状态反馈都必须可靠，每一次失败都要有明确出口。

兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

用地图、时间轴和收益提示支持实时路线优化决策

面向产品经理与资深设计师的案例研究

导读｜用地图、时间轴和收益提示支持实时路线优化决策。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位：先回答系统替谁解决什么问题

Terenzo面向公路货运调度与车队运营，通过地图、车辆状态、订单和优化建议帮助团队提升准时率与单车收益。产品核心不是简单追踪车辆，而是在约束条件下持续给出可解释的路线与装载决策。

图1  项目界面与设计细节

二、信息架构：把功能转译为用户的工作顺序

主工作台以地图为中心，车辆、订单和路线作为可叠加对象；下方时间轴表达行程进度与预计到达，侧边卡片则展示优化收益、异常和订单明细。这样的结构符合调度员从全局态势进入具体车辆或任务的工作方式。

三、关键交互：从浏览信息走向完成任务

地图节点、路线和车辆卡片之间应保持双向联动：选中车辆后突出相关订单与时间线，接受优化建议前展示里程、时间、成本和风险变化。亮黄色建议卡把机会直接量化为额外收益，有助于快速判断，但仍应允许比较与撤销。

图2  项目界面与设计细节

四、视觉系统：品牌表达必须承担信息语义

界面采用大面积白色和极浅地图，降低地理底图对业务信息的干扰；荧光黄色突出优化机会，蓝色表示关键位置和主状态。真实公路与车辆摄影强化行业语境，使抽象数据与实体运输建立联系。

图3  项目界面与设计细节

五、面向产品与设计团队的可复用价值

物流产品设计需要理解“时间、空间、资源、约束”四种变量。产品经理必须定义算法建议的输入与边界，设计师则将多变量结果压缩为可比较的行动信息。对调度员而言，可解释性和撤销机制往往比算法的炫技更重要。

六、专业审视：仍需补齐的体验边界

低对比地图在强光和大屏环境中可能难以识别，建议提供运营模式与告警模式。收益提示应同时显示潜在代价，如司机工时、风险或服务等级影响。移动端要聚焦司机可执行动作，避免暴露调度端的全部复杂性。

图4  项目界面与设计细节

结语：设计的最终判断标准是业务与使用价值

Terenzo的设计价值在于把优化算法放进真实调度节奏：发现机会、比较影响、确认调整、持续追踪。只有当算法结果以业务语言被解释，智能调度才会真正被一线团队采用。

兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

以空间化信息组织和情境化提醒重塑企业合规体验

面向产品经理与资深设计师的案例研究

导读｜以空间化信息组织和情境化提醒重塑企业合规体验。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位：先回答系统替谁解决什么问题

Egis聚焦企业合同、审计与合规材料管理。项目通过时间轴、文档堆叠和空间化界面表达大量文件之间的关系，试图把传统文件列表升级为可理解风险、期限和责任人的工作空间。

图1  项目界面与设计细节

二、信息架构：把功能转译为用户的工作顺序

核心界面围绕文档集合、关键日期、合规活动和团队协作展开。桌面端提供全局时间与文件关系视图，移动端突出近期活动、快速添加和审核状态；这种分工符合桌面研究、移动处理的真实使用场景。

三、关键交互：从浏览信息走向完成任务

可展开的文档堆叠让用户在概览与细节之间切换，时间轴帮助理解合同周期和到期风险。活动卡片将文件、负责人、会议和时间绑定，减少合规信息散落在邮件与文件夹中的问题。新建工作区流程则通过少量步骤建立组织边界。

图2  项目界面与设计细节

四、视觉系统：品牌表达必须承担信息语义

黑色背景与半透明绿色面板构成高度识别的合规科技形象。绿色既指向通过、安全和控制，也形成空间层次；文档的透视叠放与柔光营造数据“可被操控”的感受。整体视觉表达强，但功能区域仍需保持清晰对比。

图3  项目界面与设计细节

五、面向产品与设计团队的可复用价值

合规产品的核心对象不是文件，而是义务、证据、期限和责任。产品经理应围绕这些关系建模；设计师则需要在视觉创新与可审计性之间保持平衡，确保用户始终知道当前文档版本、审批人和风险状态。

六、专业审视：仍需补齐的体验边界

空间化叠层适合展示，但在大量文档的日常工作中可能降低扫描效率，建议提供列表、时间轴和关系视图的切换。半透明层需要验证对比度。所有AI归类或摘要应可追溯到原文，并明确不可替代法律审查。

图4  项目界面与设计细节

结语：设计的最终判断标准是业务与使用价值

Egis证明合规系统可以拥有更具情境感的交互，但视觉突破必须服务于关系理解。只要对象模型、版本和责任链足够坚实，空间化表达才不会变成一次性的概念展示。

兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。