作为深耕 UI/UX 全案设计的团队，兰亭妙微始终坚持持续拆解主流产品交互细节，沉淀可落地的设计思考。长期复盘各类产品体验，既能补齐设计逻辑短板，也能跳出模板化思维，真正做到以用户情绪、操作路径为核心做设计。本文选取餐饮、招聘、地图、短视频、电商直播五大赛道产品，结合竞品对比，拆解细节背后的设计策略。

语言学习向来枯燥、易半途而废，但多邻国仅凭一套贴合人性的 UX 设计，积累超 5 亿全球用户。兰亭妙微深耕用户体验设计多年，结合行为心理学拆解这款产品背后 9 个核心设计技巧，拆解可复用的用户留存思路，为教育、工具类产品提供落地参考。

兰亭妙微ui设计公司分享：Widget 是一个被全球生态验证了二十多年的成熟载体，却在旅行场景中一直“存在感不足”。这背后，不是技术或载体本身的问题，而是我们对旅行体验的理解还未真正延伸到桌面这一层。

本次分享以 Trip Widget 的设计实践为例，聊聊如何以 Widget 为智能载体，把“行前—行中—行后”的完整旅程整合进一个桌面组件，让服务真正适应场景，而不是让用户去管理碎片。

01.旅行类 Widget 使用率为何偏低？

1) Widget 作为成熟载体的现状

Widget 已有二十多年发展历史。

1998 年诞生于桌面端，2008 年进入移动端，覆盖海量设备。

2020 年 iOS 14 将 Widget 提升为系统级核心功能，相关数据显示，iOS 14 后 Widget 使用显著增长。

作为信息触达载体，Widget 的价值已经被反复验证——它可以让信息更主动、更及时地触达用户。

2) 在旅行场景中的“错配”

尽管如此，在旅行场景下，Widget 的实际使用却远不如预期，我们看到两层问题：

1. 市场认知缺位：部分主流 OTA 尚未系统化提供 Widget 能力，或仅覆盖单端。用户缺乏对“旅行类桌面组件”的清晰认知和使用习惯。
2. 现有方案与旅行需求的结构性错配：许多 Widget 仍停留在“功能单一、信息静态”的形态，更像一块“会更新的壁纸”。部分方案按行前、行中、行后拆分成多个独立组件，用户需要为不同环节反复添加和管理多个 Widget，导致体验被割裂。

而旅行本质上是一个多场景、连续动态的体验流程：从灵感激发 → 行程规划 → 出行途中 → 目的地体验 → 行后总结。当前“单一功能、场景割裂”的 Widget，与“多场景、动态演进”的旅行需求存在根本性错配。

02.让 Widget 真正“理解旅程”

1) 设计问题的提出

依托一站式旅行生态，我们提出了一个核心问题：

能否以 Widget 为智能载体，深度整合生态能力，让它主动感知并响应动态旅程中的每一个场景？

换句话说：

能否打造一个真正理解用户旅行状态的 Widget，而不是一个只会展示静态信息的组件？

2) 设计答案: Trip Widget — 你的一站式随身旅行伙伴

它具备以下特征：

• 根据用户的旅行状态主动感知并切换模式。
• 在不同阶段整合展示最关键的信息与功能。
• 将“桌面组件”进化为“持续陪伴旅行流程的场景化服务入口”。

下面，我们用四个典型场景来说明这一范式转变。

03.场景拆解：从灵感到工具的全流程陪伴

场景一：行前没有规划 —— 灵感激发模式

用户状态

• 时间：慵懒的周日下午。
• 心理：想去旅行，但还没有确定目的地和方案。
• 核心问题：“上哪儿能找到优惠又靠谱的旅行灵感？”

Widget 行为

• 主动切换为「灵感激发模式」。
• 展示精选特价机票与热门目的地。
• 通过 TG 智能推荐，提供个性化旅行灵感（例如“周末短途”“亲子友好”“海岛度假”等）。

体验变化

• 用户不需要主动打开 App、搜索和筛选。
• 在桌面即可获得可能的旅行方案，实现从“自己找”到“被推荐到”的转变。

场景二：已有行程 —— 行程规划助手模式

用户状态

• 已经预订了前往某城市的机票。
• 核心问题：“还需要预订哪些项目？那里有什么值得体验的乐趣？”

Widget 行为

• 自动切换为「行程规划助手模式」。
• 提供接送机、租车等周边产品的快捷预订入口。
• 展示目的地热门景点等入口，帮助用户发现地道体验。
• 通过 TG 专业指导，给出必游景点的个性化推荐。

体验变化

• Widget 不再只是信息展示，而是行程规划的关键入口之一。
• 用户在桌面即可完成行程的补全与深化，减少频繁切 App 的负担。

场景三：赶飞机途中 —— 出行掌控模式

用户状态

• 正在乘车匆忙赶往机场。
• 核心问题：“我的航班号是多少？该去哪个登机口？会不会延误？”

Widget 行为

• 进入「出行掌控模式」。
• 实时展示航班时间、登机口信息与状态（值机、登机、延误等）。
• 提供一键查看后续行程的入口，高效管理当日行程。

体验变化

• 用户无需打开 App 深层页面查找信息。
• 在桌面就可以完成航班确认与行程检查，显著降低出行焦虑。

场景四：目的地餐厅 —— 即时工具助手模式

用户状态

• 坐在异国餐厅，面对一份看不懂的菜单。
• 核心问题：“这道菜是什么？这瓶酒大概要花多少钱？我会不会点错？”

Widget 行为

• 切换为「即时工具助手模式」。
• 提供菜单翻译与菜品介绍，帮助跨越语言障碍。
• 提供实时汇率换算，辅助价格判断和决策。
• 通过 AI 智能推荐当日人气餐厅，引导用户发现更地道的选择。

体验变化

• 用户从“临时抱佛脚查资料”变为“随时有工具在身边”。
• 桌面组件成为真正的场景工具，而不仅是静态信息面板。

04.设计方法沉淀：从功能堆叠到场景范式

1) 以“旅行流程”为主轴重构结构

传统做法

• 按功能点/场景拆分为多个独立组件，用户需要为不同环节反复添加和管理。
• 导致体验割裂，信息分散，缺少贯穿旅程的整体感知。

我们的做法

• 以旅行全流程为主轴进行重构：行前：灵感激发 → 行程规划。行中：出行掌控 → 即时工具。行后：总结与分享（作为未来扩展方向）。
• Widget 通过场景识别和状态切换，将这些环节整合进同一个体验框架。

用户感知的是“一个能跟着旅程变化的桌面伙伴”，而不是多个分散的功能入口。

2) 场景化的 Modern Design 视觉语言

在有限的 Widget 空间内，我们为不同场景设计了差异化视觉策略：

1）行程场景：信息优先

强化时间、航班号、登机口等关键数据的可读性。使用清晰的层级和对比，减少装饰性元素，以效率优先。

2）AI 场景：智能感

沿用TripGenie 的品牌色彩与视觉语言，让 Widget 在桌面上与站内智能助手保持一致的识别度。

3) 信息聚焦：每个场景只保留最关键的 3–5 个信息点

挑战

Widget 空间极为有限，容易成为“信息堆砌”的重灾区。

策略

• 针对每个场景，我们先梳理用户任务，再反推最关键的信息点。
• 以“完成任务必须看懂的内容”为标准，控制在 3–5 个核心信息。
• 其他信息通过“进入详情页”等延伸交互承载。

4) 交互创新：内部场景的无缝切换

目标

希望一个组件就能承载旅程内的多重需求。

具体实践

• 在同一个 Widget 中，通过点击等轻量交互实现模式切换。
• 保持操作成本极低，同时提高用户对“Widget 会主动变化”的心理预期。

05.用户反馈

上线后，用户行为给出了清晰的肯定：

• Widget 日均曝光显著提升。
• 周留存率保持在较高水平，证明用户愿意长期保留并使用 Widget。
• 每日为站内带来可观的活跃访问量，成为有效的站内流量入口。
• Widget 用户的站内复访率明显高于整体大盘用户，呈现出更高的粘性。

最后，用一句话总结这次实践：

我们完成了一次从「让用户管理碎片」到「让服务适应场景」的范式转变。

• 不再把复杂性留给用户，让他们在多个 App、多个页面、多个组件之间反复切换。
• 而是让服务主动理解旅程，在合适的场景、合适的时机，把关键信息与功能送到用户面前。

这正是我们希望交付的新旅行体验范式，也是 Trip Widget 未来持续演进的方向。

转载：优设

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

一、组件基础认知：什么是商品卡片

兰亭妙微ui设计公司分享：商品卡片是电商类 C 端产品的核心基础组件，适用范围不局限于实物商品，课程、旅游服务、游戏道具、会员套餐等全部可交易虚拟 / 实体品类，都依靠它承载核心信息，帮助用户快速抓取商品关键属性、完成浏览决策。

电商 App 内通用两套卡片展示视图，二者布局逻辑、信息承载上限存在明显差异，也是我们设计时需要重点区分的核心形式：网格视图、列表视图。

下文将拆解两种视图的排版规则、视觉规范、信息取舍逻辑，帮你标准化落地商品卡片组件。

二、核心设计要点（全文重点）

1. 两大基础布局：网格布局 & 列表布局

（1）网格布局

网格布局分为等距规整网格、瀑布流网格两类，二者都需要统一商品主图尺寸，避免画面杂乱无序。

• 瀑布流网格：允许卡片高度错落，但图片长宽比例需统一，错落幅度严格控制，视觉更轻盈；排版细节可参考往期《UI 组件瀑布流设计科普》。

  

• 规整对齐网格：行业最常用方案，固定图片、文本区域高度；针对标题长短不一的问题，提前预留多行文本空间，保证整行卡片视觉对齐。

网格视图受屏幕宽度限制，展示空间紧凑，不适合堆砌大量文字信息，复杂规格、长标签类内容建议省略。

（2）列表布局

列表采用「左图右文」横向排版，图片宽度统一，右侧文本区域高度灵活，分 3 种适配方案：

1. 大信息量等高方案（京东类） 文本区域高度可超出图片高度，容纳规格、评价、店铺、满减等全量信息，适合搜索结果、商品分类页。

   

2. 中等信息量等高方案（主流电商） 图文区域底部对齐，信息精简，视觉整洁均衡，是淘宝、拼多多搜索页通用规范。

   

3. 极简短信息方案 仅保留图、标题、价格，强行对齐底部会造成卡片内部留白远大于卡片间距，破坏视觉亲密性；优化方案：卡片之间增加分割线，弱化对齐约束。

   

2. 卡片 3 种基础视觉形态

根据边框、背景、图片裁切规则，分为全包式、半包式、开放式，覆盖市面 99% 电商产品：

① 全包式（低频使用）

完整底色容器包裹商品图与全部文字，卡片四周统一圆角，整体感强，但视觉厚重，多用于品牌专题、活动会场。

② 半包式（行业主流）

商品图顶边、左右撑满卡片边界，仅底部文字区域在底色容器内；圆角规范重点：图片下方两个内角不做圆角，仅卡片外框设置圆角，避免视觉断层。

③ 开放式（轻量化首选）

无独立卡片底色，图片 + 文字自成一组信息单元；文字区域左右向内缩进，和图片形成层次区分，可单侧缩进、也可双侧缩进，清爽简约，适合极简风、出海电商。

3. 卡片标准信息层级（8 类模块）

不同品类、不同平台可按需删减模块，但商品主图、商品标题、售价是三大必选基础元素。

1. 商品主图：视觉第一优先级，吸引用户点击
2. 主标题：活动标签 + 商品全称，核心识别信息
3. 辅助副标题：销量榜单、好评率、用户评价数
4. 价格模块：现价、划线原价、已售人数
5. 优惠标签：运费险、7 天无理由、满减、分期免息、优惠券
6. 规格参数：尺寸、材质、型号、适配人群（网格布局优先删减）
7. 店铺信息：自营 / 旗舰店标签、店铺名称、进店入口
8. 交互按钮：收藏、加入购物车、快速购买

信息权重设计技巧

• 国内电商：价格、标题权重最高，优惠标签作为强视觉辅助；
• 海外品牌电商（ASOS、SHEIN）：放大价格字号，弱化标题，突出品牌简约调性；
• 网格 / 列表信息统一原则：两套视图核心字段保持一致，网格视图仅删减长文本规格类内容（如小米有品）。

4. 场景决定信息取舍：4 类高频场景差异化设计

卡片展示页面不同，用户核心诉求完全不同，信息模块需要针对性增减：

1. 首页推荐流卡片 用户浏览目标泛、需要一屏展示更多商品，仅保留图、标题、价格、1 个核心活动标签，删除规格、店铺、评价等次要信息，降低单张卡片高度。
2. 搜索结果 / 分类页卡片 用户有明确购买意向，信息完整展示，包含评价、销量、店铺、满减、规格，辅助用户对比筛选。
3. 购物车卡片 用户已认知商品基础信息，核心需求：核对规格、修改数量、查看实付差价；新增规格选择器、数量加减框、单品优惠、凑单提示模块。
4. 服务类商品（酒店、旅游） 区别实物电商，新增评分、距离、配套设施、入住日期、房型等专属字段，代表产品：马蜂窝、飞猪酒店列表。

5. 差异化商品卡片案例参考

（1）海外极简服饰电商：ASOS / Massimo Dutti / SHEIN

品牌调性克制高级，卡片极度轻量化，仅保留主图、售价、短标题、收藏按钮，无多余营销标签，适合出海国货 App 参考。

（2）本地生活服务卡片：马蜂窝、飞猪

服务类商品和实物商品字段体系完全区分，核心展示评分、地理位置、配套权益、起售价，是虚拟服务类组件的典型参考。

三、样式拓展：线上实战案例汇总

市面上成熟电商的商品卡片都基于以上规则做变体设计，可根据产品定位、运营需求调整圆角、留白、标签样式、色彩权重，搭建专属组件库。

结语

商品卡片是电商 C 端复用率最高的 UI 组件，设计核心逻辑永远围绕用户场景 + 信息优先级展开：先确定展示视图，再选择卡片视觉形态，最后根据页面场景增减信息模块。掌握这套标准化设计思路，就能快速完成全平台统一、可复用的商品卡片组件规范。

转载：优设

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

前言

兰亭妙微ui设计公司分享：当下国内 C 端产品竞争白热化，为抢夺用户注意力，界面视觉愈发繁复花哨，极简设计仅少量头部工具类产品在用。这套审美倾向也直接影响设计师求职评审 —— 作品集更偏爱能驾驭复杂视觉的方案，简约风格反而不占优势。

配色是 UI 设计的核心难点，也是初级设计师最容易卡壳的环节。本文抛开晦涩理论，用落地化、标准化的完整逻辑，拆解一套可直接复用的 UI 配色全流程，从色彩底层原理到完整落地案例一次性讲透。

一、先搞懂色彩基础：RGB/CMYK/HSB 适用场景

想要做好配色，第一步要分清三种主流色彩模式的用途，UI 设计优先掌握HSB。

1. RGB（屏幕显色模式） 屏幕由像素发光成像，依靠红 (R)、绿 (G)、蓝 (B) 三种光源混合出万千色彩，手机、电脑、APP 界面全部使用 RGB。 三色数值区间为 0-255，组合逻辑抽象，肉眼很难预判混合后的最终色彩，不适合手动选色调试。
2. CMYK（印刷实物模式） 用于纸质印刷、物料喷绘，依靠青 (C)、品红 (M)、黄 (Y)、黑 (K) 四色颜料叠加显色。 屏幕自发光与印刷颜料反光视觉差异极大，VI 印刷色不能直接照搬给 UI 界面使用。
3. HSB（UI 设计师首选调色逻辑） 将色彩拆解为三大维度：色相 H、饱和度 S、明度 B，是所有设计软件取色面板的底层逻辑，也是 UI 配色的核心工具。

• 色相 H：360° 环形色环，取色面板横向色条就是色环拉直后的形态，首尾均为红色；
• 饱和度 S：色彩纯净度，S=0 时无彩色倾向，只剩黑白灰中性色；
• 明度 B：明暗深浅，B=0 纯黑、B=100 纯白，数值越低颜色越深。

实操建议：打开 Figma/PS/ Sketch，优先把取色面板切换为 HSB 模式，调色遵循「先定色相→再微调饱和度、明度」的顺序，拒绝随机拖拽取色。

二、UI 界面五大色彩体系（新版标准化分类）

传统设计只划分主色、辅助色、中性色，无法适配当下复杂运营、多内容场景，现统一分为品牌色、功能色、中性色、装饰色、内容色五大类，覆盖界面全部用色场景。

1. 品牌色：产品视觉识别核心

品牌色是区分产品的视觉锚点，分为品牌主色与品牌辅助色。

• 品牌主色：一款产品仅设 1 个核心主色，绑定品牌记忆点。例：美团黄、肯德基红、星巴克绿；多用于按钮、导航、LOGO、核心弹窗、重点标签等高频视觉位置。 选色规律：成熟互联网产品主色普遍落在 HSB 面板「高饱和、高明度」的右上区域，鲜亮通透，屏幕显示不发灰，更容易抓住用户视线、加深品牌记忆。
• 品牌辅助色：搭配主色丰富视觉层次，可设 1 个或多个；如麦当劳主色金拱门黄，搭配红色强化识别。 避坑提醒：无成熟 VI 规范的新产品，不建议新增辅助色，容易稀释主色权重，造成视觉杂乱。

2. 功能色：传递信息的标准化语义色

功能色承载明确信息语义，用户已形成固有色彩认知，设计时优先顺应大众习惯：

• 电商：红色代表优惠、降价、活动价；
• 工具类：绿色代表成功、完成、通过；
• 国内金融：红涨绿跌；数字货币行业相反，绿涨红跌。

实用技巧：若品牌主色刚好匹配功能语义，可直接复用品牌色，无需新增色值。例：京东优惠价、支付宝确认按钮均直接使用品牌主色，减少色值冗余。

3. 中性色：界面视觉骨架（占比最高）

中性色即黑白灰，是整套界面的基底，页面背景、正文、次要文字、分割线、图标全部依赖中性色，整体页面中性色占比远高于品牌色。

中性色落地规范

1. 分级阶梯：一套 UI 至少设置 5 档以上灰度，依靠明度 B 值区分信息层级；数值统一取 5 的倍数（10/20/40/60/80/90），方便团队统一规范。
2. 拒绝纯黑：避免 B=0 的纯黑色，OLED 屏幕下纯黑与周边色彩反差极强，视觉割裂、刺眼。
3. 微色相优化：专业项目的灰度不会是完全无倾向的纯灰，会混入极淡蓝色相，弱化生硬感；颜色越浅，混入的色相饱和度越低，肉眼几乎察觉不到。

4. 装饰色：运营 / 组件专属灵活用色

品牌色、功能色、中性色属于项目固定规范色，装饰色是脱离规范的补充色彩，多用于运营活动页、装饰图标、营销瓷片区。

• 痛点：运营场景为适配节日、专题需求大量新增装饰色，极易和产品基础色冲突，导致整体界面割裂；作品集评审中，装饰色杂乱是扣分重灾区。
• 作品集优化方案：装饰色优先选取和主色色相差异大的色系，避免同色系混淆，提升页面丰富度且不破坏品牌统一感。

5. 内容色：图文素材的可控配色

内容色指商品图、用户头像、广告 banner、资讯封面等素材自带色彩，分为两类场景差异化处理：

1. 大图场景（占页面 1/2 以上）：大图直接决定页面整体色调，优先选用底色干净单一的素材，画面主色调和产品品牌色协调，避免高饱和杂色堆砌。
2. 列表小图（多图平铺）：弱化图片色彩存在感，优先白底、低饱和背景素材；高饱和、色彩杂乱的小图大量堆叠，会让页面廉价、刻意，是 “飞机稿” 典型特征。

补充：美妆、服饰、茶饮等自有内容素材的品牌，会统一规范拍摄、修图色彩标准，从源头保证页面配色统一。

三、UI 配色 vs 平面配色：三大核心区别（很多设计师踩坑）

不少设计师照搬平面配色逻辑做 UI，最终效果违和，二者底层逻辑完全不同，核心差异分为三点：

1. 载体：静态固定 VS 动态可变

平面海报、包装定稿后画面永久固定，设计师能完整把控所有色彩搭配； UI 页面内容、模块会持续迭代更新，动态内容极易破坏原有配色平衡，设计时必须预留容错空间。

2. 显色原理：反光印刷 VS 屏幕自发光

平面 CMYK 依靠颜料反光显色，高饱和荧光色大面积使用也不会刺眼； UI 屏幕 RGB 自发光，高饱和、强对比色大面积使用会造成视觉疲劳，部分艳丽色彩直接需要舍弃，因此行业老话 “没有丑颜色，只有烂搭配” 不适用于 UI 设计。

3. 品牌目标：长线渗透 VS 瞬时记忆

传统品牌 VI 通过门店、包装、物料长期渗透，色彩调性温和舒缓； 互联网产品依靠手机小屏幕和海量竞品争夺注意力，品牌色需要视觉冲击力更强，快速让用户形成记忆。

四、标准化 UI 配色落地流程（分五步操作，高效不出错）

不建议边画界面边填色，配色独立作为完整设计阶段，按「中性色→品牌色→功能色→内容色→装饰色」分层填充，每一步可单独校验调整。

Step1：搭建中性色灰度阶梯（第一步！基底优先）

完成页面原型后，先定义全套中性色分级，用灰度区分标题、正文、辅助文字、分割线、卡片背景，搭建完整信息层级。 优势：提前理清页面轻重关系，后续叠加彩色不会出现层次混乱。

Step2：填充品牌主色 + 辅助色

中性色基底稳定后，再铺品牌色，品牌色是整套配色的约束标准，后续所有色彩都要和它和谐适配。

• 成熟品牌：基于官方 VI 色微调明度、饱和度，适配屏幕 RGB 显色；
• 全新产品：在 HSB 面板高饱和高明度区域选定主色，无 VI 规范不额外加辅助色。

Step3：梳理并填充功能色

梳理页面内所有特殊语义模块（价格、收藏、成功提示、警告、会员标签等），主色无法承载语义时，新增独立功能色，数量尽量精简。

Step4：置入内容配图

根据图片占比选择适配素材，大图协调品牌色调，列表小图弱化色彩冲击，规避杂乱色块。

Step5：点缀装饰色

最后补充图标、运营模块装饰色，此时中性色、品牌、功能色已全部定型，装饰色可选范围被大幅缩小，更容易搭配和谐。

五、进阶：设计风格前置 —— 配色的底层方向指引

熟练掌握五步基础配色流程后，想要方案具备深度，需要在配色前先确定整体设计风格，情绪版是前期核心工具。

1. 新手阶段：优先吃透标准化配色流程，保证色值层级不出错，方案自然具备基础品牌调性；
2. 进阶阶段：先通过情绪版定义产品风格（简约 / 活力 / 轻奢 / 商务），再反向约束色相、饱和度、明度取值，让配色贴合品牌定位，设计方案拥有完整逻辑，不再单纯堆砌颜色。

很多初级设计师认为情绪版、品牌分析只是作品集包装，实则是专业团队统一视觉语言的核心环节；积累足够实操经验后，才能理解风格分析对配色的指导价值。

六、完整实操案例演示（捷安特品牌 APP）

项目原有问题

1. 自定义主色和捷安特官方 VI 严重不符，品牌识别断裂；
2. 内容配图色彩杂乱，和界面基础色冲突；
3. 选用深色模式，明暗对比度把控难度高，不适合新手练习。

浅色模式分步优化

1. 中性色搭建：重构页面原型，优化布局结构，设置 6 档灰度阶梯，区分导航、标题、正文、辅助文字、分割线、卡片背景；
2. 品牌色适配：沿用捷安特官方深蓝色为主色，浅蓝为辅助色；主色用于 LOGO、底部选中导航、核心按钮、重点标签，辅助色点缀次要操作组件；

   

3. 功能色填充：单独区分价格、评分、收藏、热门标签等特殊模块，使用低饱和语义色，不抢品牌主色视觉重心；

   

4. 内容配图替换：首页大图选用带浅蓝底色的产品图，贴合品牌色；商品列表小图统一白底，降低杂色干扰；

   ,

5. 装饰色收尾：瓷片区、装饰图标选用和蓝系反差较大的低饱和彩色，丰富视觉且不破坏整体统一。

   

    

补充深色模式说明

深色模式中性色逻辑相反，底色使用高灰度，文字用浅灰；品牌色需要同步降低饱和度，避免屏幕高亮度刺眼，明暗对比度严格遵循无障碍阅读规范，新手不建议优先尝试。

七、文末总结

UI 配色逻辑相比平面设计更加标准化、模块化，五大色彩各司其职，选色区间存在清晰规律，依靠固定流程就能稳定输出合格方案。

1. 基础阶段：牢记五步配色流程，先中性、后品牌、再功能、内容、装饰，分层管控色彩；
2. 进阶阶段：前置风格定位，用情绪版约束整体色调，让配色贴合产品品牌定位；
3. 作品集避坑：严控装饰色、素材内容色，避免多色堆砌导致视觉割裂；新手优先做浅色模式，降低明暗把控难度。

配色没有玄学，本质是给不同界面元素匹配对应规范色值，结合大量案例临摹与落地实操，就能快速形成成熟的色彩审美与搭配能力。

转载：站酷

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

不少设计师都会陷入同一个困境：界面流程通顺、视觉层级完整，可新功能上线后使用率低迷，活动转化惨淡。反复复盘交互与视觉却找不到症结，核心问题往往被忽略 —— 我们并没有完成有效的用户教育。兰亭妙微深耕多年 ToB、ToC 界面全案设计，结合大量落地项目，从底层逻辑、两大经典模型、落地实践三方面拆解，教设计师用设计手段完成用户引导，赋能业务增长。

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

 一、项目定位与行业现存痛点
 产品简介
BRIX是一站式整合数字营销服务商，官网作为品牌线上获客核心阵地，用乐高积木作为品牌核心视觉隐喻，象征营销策略模块化搭建、层层组合实现增长目标。官网覆盖首页、服务体系、成果数据、案例展示、团队介绍、FAQ咨询、底部转化表单全页面，完成从UX调研、受众定位、低保真原型、视觉设计、动画交互到开发上线的全流程，同时完成1920px桌面端与375px移动端的双端适配。

 传统营销 agency 官网四大行业痛点
1. 品牌视觉无统一记忆符号：多数营销官网设计同质化严重，没有专属视觉隐喻，访客看完难以留下品牌印象；
2. 业务展示零散杂乱：营销服务、案例成果、数据背书分散排布，访客无法快速感知机构专业能力；
3. 移动端适配体验粗糙：只重视PC端效果，手机端排版拥挤、交互卡顿，移动端流量转化流失严重；
4. 转化路径不清晰：缺少分环节咨询入口、FAQ打消顾虑模块，访客浏览后很难完成留资动作。

二、完整设计落地闭环
项目遵循标准化六步设计流程，形成前期调研→原型规划→视觉落地→动效优化→开发上线→双端适配完整闭环
1. UX研究阶段：梳理行业商业环境、用户行为与竞品情况，搭建界面设计底层逻辑；
2. 受众定位阶段：锁定企业主、市场管理者、电商扩张品牌三类核心目标客群；
3. 原型搭建阶段：规划首页、服务页、作品集、关于我们、评论区五大核心页面的跳转逻辑与转化场景；
4. UI视觉阶段：确立浅灰白基底+暖橙品牌主色，积木3D模型作为视觉核心，搭建模块化规范设计体系；
5. 动画交互阶段：页面滚动微交互、积木动效、卡片过渡动画提升浏览沉浸感；
6. 开发适配阶段：输出响应式代码，完成桌面与移动端布局优化，保证多设备浏览体验一致。

三、核心页面模块设计拆解

模块1：首屏品牌主场区
顶部简洁导航栏包含首页、服务、作品集、关于我们、评论区，右上角放置「获取咨询」高转化按钮；主视觉用超大标题「FROM STRATEGY TO CUSTOMERS」搭配堆叠透明积木3D模型，右侧陈列已落地项目、营销活动、行业深耕年限三大数据背书，下方设置查看案例入口，首屏就完成品牌定位与实力传递。

 模块2：全品类服务板块
用大面积品牌暖橙色块做分区，从上到下依次陈列社媒内容营销、定向广告、效果营销、场景广告、邮件营销、PR传播、创意视频全业务线，每一项服务都配套简介与独立咨询按钮，访客可按需跳转对接对应业务。

模块3：实力背书两大核心板块
1. 数据成果区：用ROI提升、成本下降、落地项目数量三组醒目数据，直观展示过往投放效果，强化专业可信度；
2. 案例展示区：搭配时尚品牌真实营销案例，标注线索涨幅、CPA降幅、ROI倍数具象成果，用真实场景打动潜在客户。

模块4：流程、团队与咨询转化板块
1. 营销执行流程：用拆解的机械积木可视化从需求简报、策略制定、广告投放、优化迭代到数据复盘的全链路步骤；
2. 团队介绍区：展示核心岗位成员形象，传递靠谱的团队配置；
3. FAQ答疑区：针对企业自建团队的常见疑问做折叠解答，打消客户合作顾虑；
4. 底部表单区：复用积木品牌视觉，设置留资表单，完成最终获客转化。

 四、视觉设计体系：暖橙模块化商务创意风
 1. 色彩系统
- 基底底色：纯净浅灰白基底，弱化营销行业浮夸感，营造专业稳重氛围；
- 品牌主色：温暖活力橙，用于按钮、板块分区、标题高亮，提升品牌活力与识别度；
- 辅助色：深灰用于正文文本、深色背景模块，黑白平衡页面轻重节奏；
- 视觉符号色：半透明黑、暖橙渐变的3D积木，贯穿全站形成强品牌记忆点。

 2. 图形与可视化规范
1. 积木模块化视觉隐喻：3D乐高积木、拆解机械积木呼应品牌名BRIX（砖块），完美契合模块化营销策略的业务内核；
2. 规整响应式栅格：桌面端1920px、移动端375px两套栅格规范，保证多端排版对齐整齐；
3. 实景商业素材：品牌门店、时尚客户案例、团队实拍图增强真实信任感；
4. 折叠面板、卡片式布局，让长页面分层清晰，浏览节奏舒适。

 3. 文字层级规范
无衬线商务字体，三层清晰层级：大标题品牌slogan→板块二级标题→业务详情、参数辅助小字，重点增长数据放大加粗，访客一眼抓取核心优势。

五、商业落地价值
1. 专属视觉符号打造差异化：积木隐喻把抽象营销策略具象化，和同行形成明显区隔，加深访客品牌记忆；
2. 全链路清晰的转化体系：首屏、服务页、底部多处咨询入口+FAQ前置答疑，大幅提升线索留资率；
3. 双端精细化适配：PC端展示完整品牌气场，移动端优化触控布局，覆盖不同渠道的访客流量；
4. 专业内容分层排布：从品牌定位→业务范围→数据成果→案例→团队→答疑→表单循序渐进，符合客户决策路径；
5. 可拓展模块化设计体系：后续新增业务、案例可沿用现有视觉规范，低成本完成页面迭代更新。

图片来自Behance

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

兰亭妙微深耕 B 端政企、能源、工业数字化 UI 设计多年，服务大量后台管理、监控大屏、移动端办公系统。在项目落地中我们发现，不少设计师习惯照搬竞品页面，只复刻视觉样式，却忽略设计背后的底层逻辑；尤其新人设计师容易遗漏交互、排版、色彩、层级等细节，最终产出界面粗糙、操作繁琐、适配性差。结合团队海量政企项目实操经验，整理 12 套通用 UI 落地技巧，覆盖 PC 与移动端界面，优化视觉质感、降低用户操作成本，打造兼顾合规、高效、美观的专业界面。

兰亭妙微深耕政企、能源、军工、工业数字化界面设计十六年，服务数百套后台管理、数据大屏、管控系统项目。在长期落地中我们发现，多数项目出现方案反复修改、上线体验不达预期，根源是缺少一套完整机制校验设计合理性，仅凭设计师主观经验输出方案。一套经得起业务、技术、用户三重检验的合理设计，需要贯穿需求、分析、执行、评审、验证、迭代全流程管控，本文结合团队实战经验拆解完整落地体系。

兰亭妙微（蓝蓝设计）深耕政企、能源、军工、工业 B 端界面设计十六年，服务数百套后台管理、监控大屏系统。在长期项目落地中我们发现，多数设计师习惯被动接收产品需求文档，仅聚焦视觉与交互细节，忽略需求底层业务逻辑，最终方案脱离业务痛点、反复修改返工。想要做出适配企业业务的优质设计，设计师必须前置介入需求环节，穿透表面诉求挖掘真实问题。本文结合团队实战经验，梳理一套完整、可落地的需求挖掘流程。