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

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

• 核心痛点解决：针对传统音乐 App 推荐算法过于机械、无法捕捉用户当下微妙情绪（Mood/Context），以及用户在只记得旋律却想不起歌名时的挫败感，Aura 提出了“The Sentient Audio Experience”（有感知力的音频体验）。
• AI 赋能：AI 不仅仅是后台的推荐引擎，更是前台的交互界面。它被安排在“Mood Calibration”（情绪校准）、“Hum to Search”（哼唱搜索）以及“Lyric Translation”（歌词翻译）等关键决策点，让音乐发现变得 effortless（毫不费力）。
• 核心价值：通过理解用户的“Musical Aura”（音乐光环），将听歌从被动的接收转变为主动的情感共鸣，解决“不知道听什么”和“听不懂外语歌”的双重障碍。

二、信息架构：把功能转译为情绪的流动

• 首页（Home Screen）：摒弃了复杂的分类导航，采用“Play Flow”作为核心视觉锚点。巨大的播放按钮悬浮于抽象流体之上，下方直接展示“More of what you like”和“Recently Played”，确保用户打开 App 的第一秒就能进入心流状态。
• 播放器（Player）：不仅是控制条，更是情感画布。界面将专辑封面、波形图与翻译后的歌词深度融合。特别是“Translate”功能的显性化，让跨语言欣赏成为默认体验而非隐藏彩蛋。
• 设置与偏好：将复杂的算法参数转译为用户可感知的标签。在“Recommendations settings”中，用户不需要调整权重滑块，而是选择“Happy/Sad/Active”等情绪标签，以及“Familiar/New”等探索维度，降低了认知负荷。

• Mood Calibration（情绪校准）：这是最具差异化的 Onboarding 设计。系统不强迫用户选择流派，而是通过一系列流动的抽象视觉和短音频片段，让用户凭直觉选择，从而建立初始的“Sonic Profile”（声音画像）。
• Hum to Search（哼唱搜索）：针对“耳虫效应”（脑子里有旋律但不知歌名），提供了“Don't know the name? Just hum.”的入口。这种交互极大地缩短了从“想起旋律”到“听到原曲”的路径。
• 实时歌词翻译：在播放界面，歌词不再是静态文本，而是支持“Show original”与“Translate”的一键切换，且译文与原文同步高亮，打破了语言壁垒带来的情感隔阂。

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

• 流体形态：界面中大量使用的流体渐变（Fluid Gradients）不是装饰，而是情绪的外化。不同的颜色组合暗示不同的音乐氛围（如深蓝代表忧郁，暖紫代表浪漫）。
• 玻璃拟态：卡片采用半透明的磨砂玻璃效果，让背景的流动感若隐若现，保持了界面的通透性，避免了深色模式下的压抑感。
• 人像摄影：选用高对比度、富有张力的人物摄影作为视觉辅助，传递出音乐带来的专注与陶醉感，与抽象的 UI 元素形成虚实对比。

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

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

• 情绪识别偏差：如果“Mood Calibration”推荐的歌曲连续不符合用户预期，用户会产生强烈的挫败感。建议增加显性的“不喜欢/换一种情绪”的快速反馈机制。
• 哼唱识别率：哼唱搜索对音准和环境噪音敏感，需在交互上给予充分的容错提示或加载反馈，避免用户等待过久。
• 隐私顾虑：收集用户的“情绪基线”和“哼唱录音”涉及高度隐私，需在 Onboarding 阶段清晰告知数据用途，并提供本地化处理选项以建立信任。

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

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

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

登录界面，大概是每个产品里最 "不起眼" 却又最关键的页面之一。说它不起眼，是因为几乎每个 APP 都有，设计师往往照着竞品抄一个就完事；说它关键，是因为它是用户进入产品的第一道门 —— 登录体验差，用户可能连门都不想进。

做中后台和移动端设计的人，对导航栏再熟悉不过了 —— 顶部那一条，放标题、放返回、放操作按钮，似乎是天经地义的事。但兰亭妙微在项目中发现，很多设计师把导航栏当成了一个 "必须存在的静态容器"，不管什么页面都原样套上去，结果该沉浸的不沉浸、该突出的不突出。

前言

兰亭妙微ui设计公司分享：在 B 端业务场景中，官网承载着企业行业解决方案对外输出的核心使命。相比后台产品高频迭代组件、页面的模式，B 端官网更多改动来自运营侧的内容调整，很难直接套用组件库快速沉淀一套标准化设计方法论，这也是很多设计师做官网时的困惑。

经过大量项目实践与复盘，我梳理出一套可落地的 B 端官网设计思路。本文结合行业案例，从心流体验视角拆解 B 端官网完整设计逻辑，希望能给各位设计师带来参考与启发。

一、什么是 B 端官网

B 端官网是集产品展示、资讯动态、线上获客于一体的商业平台，也是企业对接潜在客户最重要的沟通窗口。它不仅对外输出企业形象，还承接产品体验入口、表单留资、客服咨询等自助服务，在降低企业人力成本的同时，为客户提供一站式信息获取渠道。

二、B 端官网的设计目标

当下 B 端赛道同质化严重，官网早已不止 “展示企业、介绍产品” 这么简单，塑造差异化品牌认知成为核心诉求。

但差异化不等于盲目猎奇。过度追求个性、形式大于内容的页面，会严重损害浏览体验，反而阻碍信息传递。

因此 B 端官网设计需要把握平衡：兼顾品牌独特性与用户浏览体验，用设计讲好产品价值，抓住潜在客户注意力，最终实现从访客到注册、付费客户的转化闭环。

三、借助心流理论，理解 B 端官网设计逻辑

1. 心流的定义

心流由心理学家米哈里・契克森米哈伊 1975 年提出，属于认知心理学范畴，指人在投入某件事时完全沉浸、高度专注，忽略外界干扰，甚至忘记时间流逝，在能力与任务难度匹配的状态下获得愉悦感。

放到 B 端官网场景：心流就是潜在客户浏览页面时高度专注，高效获取有效信息，顺利找到注册、试用等转化入口的状态。

2. 心流模型

心流模型横轴代表用户认知 / 技能水平，纵轴代表任务挑战难度。二者高低组合，会生成觉醒、心流、控制、厌倦、放松、担忧、冷漠、焦虑 8 种用户情绪：

• 挑战过高、用户认知不足 → 焦虑，用户难以理解内容；
• 挑战过低、用户认知很高 → 厌倦，页面信息对访客没有价值；
• 挑战、认知双低 → 冷漠，访客直接离开页面；
• 高认知匹配高挑战，才更容易触发心流沉浸体验。

3. 心流体验三大核心维度

Novak 和 Hoffman 将心流 9 大特征归纳为三类因素：条件因素、体验因素、结果因素。这套框架刚好可以直接指导官网设计：

1. 条件因素（可控）：建立清晰目标。内容层面信息饱满易懂，目标入口直观明确；
2. 体验因素：打造沉浸式浏览感受。视觉保持整体统一的前提下适度做差异化，把控阅读节奏，留住用户注意力；
3. 结果因素：交付符合预期的服务。转化链路简洁高效，引导用户完成后续操作，完成心流闭环。

四、条件因素：搭建官网的底层框架

条件因素是触发心流的前提，核心做好两件事：信息分层、明确转化目标。

1. 信息分层：顺着用户思考路径完成需求转化

信息分层是对页面信息做归类、权重排序，把庞杂业务信息拆解成模块化内容。

B 端官网经典模块顺序：导航栏→首焦→核心优势→产品介绍→业务数据→客户案例→售后服务→品牌背书→免费试用 CTA→页脚 Footer。

这套排布逻辑贴合 B 端客户决策路径：

1. 首焦快速抓住眼球，建立产品第一印象；
2. 核心优势板块输出产品价值，加深理解；
3. 通过产品详情、业务数据、服务说明、客户案例、权威背书，层层建立信任，消解客户顾虑；
4. 最后抛出试用、咨询按钮，推动用户完成转化动作。

2. 直观目标：用好 CTA 提升转化效率

CTA（Call‑to‑Action，行为召唤），即引导用户行动的按钮，B 端官网常见文案：免费体验、注册账号、申请演示。依靠高对比度视觉，吸引访客点击，直接影响留资、注册转化率。

优化 CTA 按钮的实操要点：

1. 样式符合大众认知，保证识别度；
2. 文案直白有价值，优先用「注册、领取」，少用模糊的「提交、发送申请」；
3. 借助圆角、渐变增加质感，强化点击暗示；
4. 扩大点击热区，降低误触，提升点击容错。

五、体验因素：维持用户浏览专注力

完成底层信息架构后，需要通过视觉与交互维持用户沉浸，分为形式节奏、互动感知两大板块。

1. 形式节奏：设计的 “立” 与 “破”

「立」：建立统一设计规范，是官网的骨架

“立” 代表整套视觉体系，包含布局、内容密度、色彩、字体系统。B 端官网主流布局共三类，各有优劣，需要结合业务调性选型：

表格

不同行业也适配不同视觉语言：云产品多用 3D 渲染元素；数码硬件偏向实景摄影；OA 协同工具偏好简约线稿，凸显高效干练。

「破」：适度差异化，制造视觉节奏

统一之上做变化，避免页面单调疲劳，通过破形、破色、破域、破静四种手法制造差异化：

• 破形：打破规整排版，塑造空间层次感，植入品牌符号，加深记忆；
• 破色：模块内部使用对比色，高亮重点信息、按钮，牵引视线；
• 破域：模块之间制造轻重、虚实变化，梳理浏览次序，降低长页面阅读负担；
• 破静：关键位置增加适度动态效果，提升页面活力，直观传递核心价值。

2. 互动感知：用微交互锁住注意力

细微的微交互，是 “触发‑反馈” 的组合。用户操作界面后获得即时反馈，就像界面在和用户对话，强化掌控感。

官网合理运用微交互有两个价值：

1. 调动用户参与意愿，聚焦当下任务；
2. 串联海量页面内容，保证操作流畅连贯，避免注意力被打断。

六、结果因素：闭环心流，降低转化门槛

当用户被内容吸引、持续浏览之后，最后一步就是顺畅完成注册 / 留资，完成完整心流闭环。

冗长复杂的表单是 B 端官网流失用户的重灾区，优化方向有两点：简化表单 + 优化文案。

1. 降低填写门槛：精简表单字段，只保留必填项，减少用户输入成本，避免流程繁琐劝退访客；
2. 文案友好共情：措辞尊重用户，减少填写过程中的挫败与困惑，提升表单提交意愿。

参考 Teambition、Miro 等产品的设计：首页直接露出核心转化入口，仅保留少量必填项，点击 CTA 直接跳转流程，最大程度提升最终转化率。

写在最后

本文借助心流理论，从条件、体验、结果三个维度完整拆解 B 端官网设计。在商业环境快速变化的当下，设计出能够引导用户进入心流状态的官网，既是业务获客的需要，也是体验设计师的专业追求。心流不仅提升用户满意度，更能助力业务目标落地。

设计之路漫漫，期待和大家一起交流、共同成长。

转载：优设

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

兰亭妙微ui设计公司分享：不少团队低估了产品文案的价值，误以为文案只要没有错别字就足够。但实际上，文案是产品与用户直接对话的媒介，直接决定用户体验的好坏。

掌握下面 6 个核心原则，帮你避开 UX 文案设计的常见问题： ① 清晰简洁：表达直白易懂，降低用户阅读与理解成本 ② 可访问性：兼顾不同用户群体，做到人人都能读懂 ③ 实用性：直面用户诉求，给出准确有效的信息反馈 ④ 真实性：拒绝误导与套路，如实传递产品能力 ⑤ 一致性：全产品文案口径统一，保障跨页面体验连贯 ⑥ 品牌感：用文案传递调性，落地真实可感知的品牌形象

标签：产品文案｜UX 文案｜用户体验设计｜文案设计｜设计技巧

版本二｜拓展完整版（适合公众号 / 专栏正文，增加解读，可读性更强）

6 个核心原则，写出清晰优质的产品 UX 文案

很多产品团队对待界面文案常常比较随意，抱有一个误区：文案不出错别字即可。

但产品文案并非简单的文字堆砌，它是产品和用户之间最直接的对话窗口。晦涩、误导、前后矛盾的文字，会直接拉高用户的使用门槛，破坏整体体验。做好 UX 文案，可以参考这六大设计原则：

1. 清晰简洁 摒弃冗余修饰，语言直白通俗。让用户一眼读懂含义，不用花费额外精力揣摩文字，减轻认知负担。

2. 可访问性 考虑多元的用户人群，避免专业黑话、隐喻化表达。保证不同认知、不同背景的使用者，都能够理解文案信息。

3. 实用性 文案要解决用户实际问题。无论是提示、报错还是引导，都要提供准确有效的信息，给到用户明确的参考和行动指引。

4. 真实性 坚守信息真实，不做夸大宣传，不设置文字套路。如实告知产品的功能、限制与结果，建立用户对产品的信任感。。

5. 一致性 保持全产品口径统一：用词、语气、术语、格式在各个页面保持一致，让用户形成稳定的使用预期，体验不会割裂混乱。

6. 品牌表达 文案也是品牌的载体。不止传递功能信息，更要贴合品牌的语言调性，让抽象的品牌形象，通过文字真实落地，被用户感知。

转载：优设

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

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

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

• 移动端（App）：作为核心交互载体，承接高频的控车指令（如空调、解锁）、行程规划与充电管理，强调“A new classic for city life”的生活化融入。
• Web端/营销页：承担品牌叙事与深度技术解析，通过高精度的渲染图解释“Series hybrid technology”（串联混动技术）等复杂概念，建立用户对新技术的信任。
• 核心价值：通过“Comfort for everyone on board”的理念，解决电动车用户在续航焦虑、充电繁琐及车内舒适度控制上的痛点，利用可视化手段让复杂的机械状态变得直观可控。

二、信息架构：把功能转译为车主的感知逻辑

• 全局层（首页）：摒弃了传统的列表式菜单，采用3D 数字孪生车模作为视觉锚点。车辆模型不仅是装饰，更是状态的实时反馈器（如充电时显示绿色流光）。下方直接罗列 Interior（内饰温度）、Charge（电量）、Range（续航）三大核心卡片，层级极高。
• 执行层（控车页）：在 Climate（气候）和 Parking climatization（停车温控）页面，将复杂的空调参数简化为直观的滑块与预设模式。特别是“停车预热”功能，直接显示“Heating to 72°F”及剩余时间，符合用户出发前的心理预期。
• 拓展层（补能与规划）：地图模块不仅显示位置，更深度整合了充电桩生态（Plugs），支持按接口类型（NACS, CCS等）筛选。行程规划则结合了语音助手 Alice，将目的地搜索与沿途补能建议融为一体。

三、关键交互：从抽象数据走向具象反馈

• 拟物化反馈：在温控界面，气流的方向、座椅加热的区域都通过动态图形直接展示，用户无需阅读文字即可理解当前设置。
• 场景化任务流：充电页面不仅仅是显示进度，而是提供了“What to do while waiting?”（等待时做什么？）的建议，如附近的咖啡馆或博物馆，将枯燥的等待时间转化为生活体验。
• 语音与触控融合：强调“Voice control with Alice”，在地图搜索和复杂设置中引入语音交互，减少驾驶或移动场景下的屏幕操作负担。

四、视觉系统：科技感必须服务于可读性

• 色彩语义：绿色作为核心操作色（如充电图标、启动按钮），代表能量与通行；白色用于主要文字，保证高对比度；灰色用于背景层级区分。
• 排版与留白：Web端采用杂志级的排版风格，大图与留白结合，传递出“Luxury”与“Calm”的品牌气质；App端则采用大圆角卡片设计，手指热区充足，兼顾美观与实操性。
• 跨端一致性：从手机屏幕到网页海报，UMO 的字体、图标风格及车辆渲染角度保持高度一致，强化了品牌的整体感。

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

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

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

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

做交互设计久了，你会发现所有具体的设计决策 —— 按钮放哪、弹窗什么时候弹、动效用多长 —— 背后都有一套更底层的判断标准。兰亭妙微在项目评审时，经常搬出三条 "试金石" 式的法则来检验方案靠不靠谱。它们最早来自设计师 Raskin 对阿西莫夫机器人三定律的致敬，我们结合多年实践重新理解后，奉为团队的设计基石。

在所有互联网产品中，"等待" 大概是最让人憋屈的体验之一：点开一篇文章，转圈加载；上传一张照片，进度条慢吞吞地爬；打开一个 App，启动页半天不消失。兰亭妙微在做用户体验走查时发现，很多产品功能本身没问题，却因为等待体验做得粗糙，硬生生把用户等走了。

兰亭妙微ui设计公司分享：不少设计师交付的界面，常会被甲方评价 “看着像交互线稿”。明明已经完成信息布局，只是普通文字列表卡片，无论怎么调整，总摆脱不出原型稿的朴素感。那如何给卡片列表赋予高级的视觉质感？下面结合实操案例完整拆解优化思路。

一、确立设计方向，寻找优质参考

原页面头部卡片样式单薄，视觉表现力不足。结合当下流行的设计趋势，我们选定毛玻璃质感卡片作为优化方向，搜集成熟参考，以此为基础落地质感改造。

二、分步打磨卡片细节，打造通透玻璃质感

1. 构建基础通透质感

想要实现 “上部通透、底部厚重” 的玻璃视觉，给卡片填充透明度渐变底色；同时为描边设置反向透明渐变，模拟玻璃折射带来的厚度层次，奠定毛玻璃的基础基调。

2. 叠加多层细节，强化光影与层次

• 在卡片底部叠加低饱和度的模糊蓝色图层，适度透出背景色调，强化半透明的通透特质；
• 添加柔和内阴影，塑造卡片边缘圆润的玻璃厚度感；
• 底层叠加一层低明度模糊外阴影，模拟玻璃反光，拉开卡片和背景之间的空间距离。

完成多层光影细节之后，把卡片组件放回整体界面，校验初步视觉效果。

3. 搭配适配的渐变背景

毛玻璃的轻盈质感需要合适背景来衬托。结合产品定位，选用清透的蓝调渐变作为页面背景，最大化凸显卡片半透明的材质特质。

4. 完善信息文字排版

材质效果调试完毕后，再填入业务信息，做好层级化文字排版，完成整套头部卡片设计。

完成全部调整后，对比优化前后效果，可以直观看到：卡片不再是单调的信息容器，材质光影、空间层次全部拉满，摆脱交互稿感。

写在最后

以上就是毛玻璃风格卡片列表的完整实操技巧，善用渐变、多层阴影与半透明属性，就能快速为普通卡片提升设计表现力。

转载：优设

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

兰亭妙微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。