兰亭妙微ui设计公司分享：坐标系是能够使每个数组在维度空间内找到映射关系的定位系统，更偏向数学/物理概念。在数据可视化中，最常用的坐标西分为笛卡尔坐标系和极坐标系，本文介绍的坐标轴设计主要也是围绕直角坐标系展开，enjoy~

什么是坐标轴

在说坐标轴之前先来介绍下什么是坐标系。坐标系是能够使每个数组在维度空间内找到映射关系的定位系统，更偏向数学/物理概念。

维基百科对坐标系的定义是：对于一个n维系统，能够使每一个点和一组n个标量构成一一对应的系统，它可以用一个有序多元组表示一个点的位置。

数据可视化中，最常用的坐标系有两种：笛卡尔坐标系和极坐标系，均为二维坐标系。

• 笛卡尔坐标系即直角坐标系，是由相互垂直的两条轴线构成。
• 极坐标系由极点、极轴组成，坐标系内任何一个点都可以用极径和夹角（逆时针）表示。用到直角坐标系的常见图表有柱状图、折线图、面积图、条形图等。

下文介绍的坐标轴设计主要也是围绕直角坐标系展开，用到极坐标系的图表有饼图、圆环图、雷达图等。

坐标轴是坐标系的构成部分，是定义域轴和值域轴的统称。系的范围更大，而轴包含在系的概念里。由于可视化图表绘制的数据大部分都有一定的现实意义，因此我们可以根据坐标轴对应的变量是连续数据还是离散数据，将坐标轴分成连续轴、时间轴、分类轴三大类。轴的类型不同在设计处理上也有差异。

坐标轴的构成要素

介绍坐标轴设计前，我们先将坐标轴拆分成“原子”要素，具体分为轴线、轴刻度、轴标签、轴标题/单位、网格线。

坐标轴易被忽视的设计细节

根据坐标轴的构成，分类讨论下每个构成要素容易被忽视的设计细节。

轴线一般只考虑是否显示，例如柱状图、折线图等，在有背景网格线的情况下，会隐藏y轴线，条形图则是隐藏x轴线，以达到信息降噪，突出视觉重点的目的。

轴刻度通常不显示，只有在肉眼无法定位到某个标签对应的数据点时，会显示刻度线，辅助用户定位，比如折线图，或抽样显示的柱状图。

网格线用于定位数据点的值域范围，跟随值域轴的位置单向显示，柱状图采用水平网格，条形图采用垂直网格。样式为虚实线的最多，斑马线由于感知过强，一般不用。

轴标题/单位主要用于说明定义域轴、值域轴的数据含义。当可视化图表标题、图例、轴标签已经能充分表达数据含义，无需单独显示标题/单位，“如无必要，勿增实体”。

轴标签的设计就比较复杂，涉及到的细节点很多，而且对于定义域轴和值域轴上的标签和单位设计要考虑的细节点还有差异。下文将定义域轴和值域轴看成x轴和y轴，便于说明。

1. x轴标签设计

x轴标签的设计重点在显示规则上，不同的坐标轴类型有不同的处理方式。

1.1 连续轴/时间轴的标签显示

连续轴/时间轴，是由一组前后包含同等差值的等差数列组成，缺少几个数值也能明显看出中间的对应关系。当多个标签在容器内全显示发生重叠，我们可以利用抽样显示的手段来避免这种情况。这里不推荐使用旋转，一方面从美观度上，旋转可能会破坏界面整体协调，另一方面，连续/时间轴非必须显示所有轴标签，抽样标签已经能满足用户对当前数组定义域的理解。

介绍一种常见的抽样方式：等分抽样。

当多个标签在x轴无法完全显示，优先保留首尾标签，其余标签按同等步长间隔显示。间隔等分的前提是间隔数是合数，能被1和其本身以外的数整除。如果间隔数为质数，就需要“-1”转成合数。

举个例子：11个标签，间隔数是10，能被2和5整除，即分成2等分和5等分。12个标签，间隔数是11，无法等分，需要在间隔数基础上再“-1”，转成合数10后再等分，此时最后一个标签显示在倒数第二个数据点上。

有人会问了，能被那么多数等分，到底该选哪个呢？这就要根据标签长度来定，选择能放下最多标签的等分值。由于连续轴/时间轴，一般是数值、日期、时间等，字符长度有限，即使抽样后也能保证显示出一定数量的标签。

等分抽样不太适用于表达某个时间周期内的走势折线图，因为最后一个标签不一定对应最后一个数据点。对于这类折线图，能清除表明起始时间和末尾时间相比显示更多时间标签重要性来的更高。设计上可以只显示首尾标签，或首尾+中间值。

1.2 分类轴的标签显示

分类轴是由几组离散数据组成，相互之间独立存在，无紧密逻辑关联。若采用抽样规则，隐藏一些标签，用户对图表认知就会有困难，违背了数据可视化清晰、有效的设计原则。分类轴最佳处理方式是标签旋转45度，若45度仍显示不下，继续旋转90度。如果90度还是放不下就要考虑结合图表交互或反转图表。

标签旋转方向也有讲究，因为人的视觉习惯是从左到右，从上到下，标签顺时针旋转45度更符合用户的浏览动线。

分类轴标签字段有长有短，长文本标签直接旋转不仅影响美观，而且也不利于用户阅读。如果数据量比较少只有2~4个，长文本标签更适合水平展示，显示不下省略即可；如果数据量比较多，就限定字符数后旋转。

2. y轴标签设计

y轴标签的设计重点在标签数量、取值范围和数据格式上。标签显示区域一般根据最长标签宽度自适应缩放。如果数组是固定的，就写成固定宽度，节省图表计算量，提高渲染速度。

2.1 y轴标签数量

标签数量不建议过多，太多的标签必定导致横向网格线变多，造成元素冗余，干扰图形信息表达。根据7±2设计原则，y轴标签数量最多不超过这个范围。

2.2 y轴标签取值范围

y轴标签的取值范围决定了图形在整个绘图区域的显示高度。

折线图y轴标签取值一般保证图形约占绘图区域的2/3，以更有效的传达数据波动幅度，避免掩盖和夸大变化趋势。2/3即斐波那契数列第二位起，相邻两数之比，也是黄金分割最简单的计算方法。

柱状图的y轴标签取值应从0基线开始，以恰当反应数值。如果展示被截断的柱状图，可能会误导观众做出错误的判断。

2.3 y轴标签数据格式

y轴标签的数据格式在ant.vision写的比较详细，重复内容不在此说明，重点讲下一些特殊的设计细节。标签保留的小数位数保持统一，不要因为某些轴标签是整数值，就略去小数点。

正负向的y轴标签，由于负值带“-”符号，整个y轴看起来会有视觉偏差，特别是双轴图的右y轴更明显。这里建议正负向y轴给正值标签带上“+”，以达到视觉平衡的效果。

总结

写了那么多关于坐标轴的设计，你是不是恍然大悟，原来小小的坐标轴还有如此之多的细节。往常我们做图表设计，可能只是用网上自动生成的图表简单调整下，或者按照通用样式来设计。然而，通用样式虽然能表达数据意义，但也缺少了对图表细节的把控，失了精致优雅的感觉。

作为数据可视化设计的一小部分，就是这些设计细节，决定了图表最终的传达效果。

转载：人人都是产品经理

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

一、前言

兰亭妙微ui设计公司分享：真实 C 端产品改版实战，本次优化对象是国内头部证券 App—— 同花顺核心高频使用模块：自选板块。 文末附全文逻辑速览图，方便快速梳理整体设计脉络。

二、同花顺自选模块现状与用户底层需求拆解

自选是承载用户收藏个股、实时查看行情数据的核心页面，用户可自主创建分组收纳不同标的，覆盖 A 股、港股、美股等多市场股票。 收藏分组是互联网产品通用功能，短视频、电商、资讯 App 均有同类设计，但证券类产品的收藏逻辑和使用场景存在本质区别：

1. 普通 App 收藏仅作内容归档，用户低频回访，核心诉求是 “事后查找内容”；
2. 同花顺自选属于高频刚需功能，用户打开的核心目的不是找单只股票，而是批量监控一整组标的实时行情，页面本质是可横向滑动的数据表格，无需点进个股详情即可快速对比涨跌。

除此之外，分组本身对资深投资者具备极强决策价值： 多数股民习惯自建自定义分组替代官方行业板块，按照科技、有色、消费、化工等赛道划分，分组会自动计算组内个股平均涨跌幅，用来判断整体板块行情。 官方自带板块个股繁杂、标的关联度低，无法贴合个人交易逻辑，自定义分组是短线、波段交易者的核心看盘工具。

基于高频交易场景，原版自选模块存在三大致命体验痛点，直接干扰看盘、选股效率：

痛点 1：分组切换操作成本极高

原有分组仅靠页面顶部窄标签栏承载，触控区域狭小、点击容错率低；分组数量多时横向滑动距离过长。即便打开侧边分组列表，展示空间有限，需要反复滚动才能定位目标分组，切换流程繁琐。

痛点 2：分组行情数据隐藏太深

分组平均涨跌幅是板块判断关键指标，但原版必须展开侧边栏才能查看；侧边栏弹出后会锁定页面，无法同步操作个股列表，打断连续看盘流程。

痛点 3：分组无层级管理能力，分类混乱

仅支持一级分组，不支持父级分类。以金属赛道举例，投资者需要拆分铜、铝、贵金属、稀有金属等细分赛道，单层列表会造成分组泛滥、杂乱无章。 用户只能手动添加标题 + 分割线勉强区分大类，属于治标不治本的补救方式，管理效率极低。

以上问题看似不多，但对短线高频交易者影响显著：频繁切换分组、查看板块数据会增加操作步骤，错失行情判断时机，直接影响交易决策。下文将围绕痛点，完整还原整套优化设计落地思路。

三、自选页面完整优化方案推演

（一）优化核心目标

结合用户刚需与现存缺陷，本次改版锁定三大核心目标：

1. 重构分组展示形式，降低分组查找、切换成本；
2. 分组行情数据默认外露，无需弹窗即可直观查看板块涨跌；
3. 支持多级分组架构，实现大类 - 细分赛道分层管理。

在此基础上深挖股民深层诉求：看盘既要盯个股分时，也要同步追踪全赛道板块走势，页面承载的有效行情信息越多，越便于快速判断交易机会。 但移动端改版存在三大天然约束，需要在设计中平衡取舍：

1. 手机屏幕尺寸有限，页面承载信息容量受限；
2. 移动端触控交互远不如电脑端便捷，无法大幅增加操作步骤；
3. 页面除分组模块外，还需保留个股行情、指标等基础字段，空间资源紧张。

明确约束与目标后，进入原型迭代推演，完整还原真实设计师方案打磨全过程：

版本 1：分组宫格卡片基础形态

先尝试两种主流宫格布局：3 列、4 列卡片排布，将每一个自定义分组转化为独立可视化卡片。 基础交互逻辑：点击分组卡片，页面下方弹出局部滚动区域展示个股列表，板块卡片区与个股列表区分上下两层，均可独立滚动；支持新增分组、添加分类标题、折叠 / 编辑分组栏。

版本 2：优化滚动误触，重构个股展开逻辑

初代分层滚动结构极易发生上下滑动误触，因此调整交互逻辑：点击分组卡片后，下方铺满全屏个股列表；顶部保留同级分组卡片栏，支持左右横向滑动切换其他分组；再次点击卡片即可收起列表，回到全分组宫格视图，规避多层滚动冲突。

版本 3：差异化卡片尺寸，强化行情信息展示

纯统一尺寸卡片视觉单调，信息承载不足，新增大尺寸 2×2 行情卡片，卡片内直接展示分组走势折线图，一眼看懂板块近期趋势。 3 列布局无法兼容大尺寸卡片并排展示，因此最终选定 4 列宫格方案：

• 4 列布局容纳更多分组卡片，适配手机竖屏空间；
• 支持自由缩放卡片大小，逻辑接近手机桌面小组件，兼顾极简浏览与深度行情查看。

版本 4：完善编辑、自定义交互体系

宫格布局参考系统桌面交互逻辑，补充批量管理能力：

1. 长按卡片进入编辑模式，支持多选批量删除、重命名分组；
2. 长按拖拽自由调整卡片排序，自定义分组展示优先级；
3. 开放卡片自定义配置：可自主选择展示组内领涨股、涨跌数值、分时 K 线等信息，适配短线、长线不同用户需求。

版本 5：沉浸式看盘模式 + 大屏设备适配

1. 全屏专注模式：一键隐藏顶部标题栏、底部全局导航栏，清除页面冗余元素，打造无干扰看盘界面；
2. 折叠屏 / 平板宽屏适配：利用横向大屏优势，常态展示更多分组卡片；点击分组后，页面左右分栏，左侧分组宫格、右侧个股列表，无需来回切换页面，大幅提升多板块对比效率。

至此整套优化方案框架搭建完成，还可延伸更多细节迭代，重点平衡普通散户与专业短线交易者的使用差异，设计师可结合自身理解补充细化。

四、设计复盘：改版背后的产品与设计思维

本次自选模块优化不只是视觉、交互微调，是完整的产品功能重构流程。 成熟团队中 UI/UX 设计师的核心价值，不是单纯落地产品给出的需求，而是主动挖掘用户隐性痛点，产出完整、大胆、可落地的解决方案，补足产品视角的盲区；方案能否最终上线落地，取决于设计评审中能否完整论证价值、说服团队。

五、结尾感悟

产品改版是锻炼产品思维、用户体验分析能力最好的方式：日常使用 App 时，把所有别扭、低效的设计拿出来自主推演优化方案，长期积累能快速建立完整的设计思考框架，这套完整的推导逻辑，是 AI 无法替代的设计师核心竞争力。

下篇内容再见～

转载：优设

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

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

兰亭妙微ui设计公司分享：很多设计师用 AI 生成插画、图标、场景图后，总觉得画面自带廉价 “AI 味”，明明构图、造型没问题，却一眼就能看出是 AI 产物。我实操 AIGC 绘图三年，总结出画面显假的三大根源：画面发平、整体泛黄、暗部油腻，配套可直接落地的调色优化方案分享给大家。

一、画面扁平单薄，像纸片无立体感

问题表现

AI 生成的画面明暗层次缺失，尤其是大面积白色物体，没有深浅明暗区分，整体轻飘飘，缺乏体积感，典型案例就是纯白晴天娃娃形象，看上去像二维贴纸。

核心成因

画面缺少深色暗部做对比，明暗反差不足，光影逻辑不完整。

优化方法

在生成提示词内增加「强化光影层次、加重暗部、增加明暗对比、塑造立体体积」描述；后期修图时加深物体阴影、闭塞区域重色。 调整前后对比效果直观：原本单薄扁平的纸片形象，补足暗部重色后，形体饱满扎实，真实立体感立刻显现。

二、整体色调发黄，画面浑浊廉价

问题表现

AI 生成画面普遍自带黄调，无论是绿植、白色图标、浅色物体，都会蒙上一层灰蒙蒙的黄，复古失真感严重，AI 痕迹格外突出。

核心成因

模型默认色温偏暖，画面缺少冷色平衡，白色、浅色系物体极易偏黄。

优化方法

通过色彩平衡工具，给画面统一加入蓝色冷调对冲黄感：

1. 绿植类画面：黄绿调加入蓝调，转为通透干净的蓝绿色；
2. 白色图标 / 浅色系元素：高光、中间调少量加蓝，中和泛黄浑浊感。 微调后画面通透干净，色彩质感高级，复古泛黄的廉价感完全消失。

三、暗部饱和度过高，画面油腻刺眼（80% AI 感的核心来源）

这是 AI 绘图最致命的通病，也是绝大多数画面一眼显假的关键。

问题逻辑

写实画面光影逻辑遵循「亮部鲜艳突出，暗部低饱和弱化」，但 AI 会无差别拉高暗部、投影饱和度，深色区域色彩浓烈扎眼，视觉重心错乱，整体油腻违和。

典型案例

陶瓷水杯原图，杯身暗面、底部投影饱和度严重超标，本该弱化的阴影反而抢了视觉焦点，塑料廉价感拉满。

优化方法

单独降低暗部、投影区域饱和度，往暗部叠加中性灰，压暗同时弱化色彩浓度。 处理后暗部沉稳柔和，光影主次分明，突兀的 AI 油腻感大幅减弱，画面真实度显著提升。

总结：消除 AI 味三大核心口诀

1. 平 —— 缺层次：加重暗部、拉大明暗对比，塑造立体体积；
2. 黄 —— 色温偏暖：全图加蓝色冷调，中和泛黄浑浊；
3. 油 —— 暗部高饱和：暗部叠加灰色、降低饱和度，弱化阴影色彩。

掌握这三组调色逻辑，不管是 UI 图标、插画还是场景效果图，都能快速弱化 AI 生成痕迹，做出接近手工手绘的高级质感。

转载：站酷

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

引言：金融配色，从来不止 “好看” 这么简单

兰亭妙微ui设计公司分享：不同于电商、文娱类产品，金融界面承载用户资金交易、风险判断、资产决策，色彩是传递安全感、专业度、可信度的隐性语言。一处配色疏漏，不止拉低视觉质感，更会造成用户误操作、信任崩塌、跨区域市场舆情危机，甚至触碰无障碍合规红线。

本文梳理金融 UI 设计中最高发的五大配色雷区，拆解失误背后的底层逻辑，配套可直接落地的标准化解决方案，帮助设计师在视觉创新、品牌表达、交易安全三者间找到平衡，打造兼顾专业、易用、合规的金融色彩体系。

一、雷区一：设计师主观审美凌驾用户认知

金融色彩设计的核心是用户思维，而非个人艺术创作。若一味追求设计师偏好，无视不同人群的色彩认知习惯，极易造成信息读取障碍，削弱产品专业公信力。

（一）问题拆解

1. 个人审美主导界面，功能性让步风格 不少设计师为追求 “高级质感” 滥用低饱和莫兰迪色系、大面积纯黑暗黑模式，直接抹平页面信息层级；也有人盲目堆砌荧光绿、高饱和紫等强冲击色，让银行、理财界面显得廉价、娱乐化，消解金融行业稳重底色。
2. 用户分层匹配错位，视觉适配严重失衡 面向中老年理财客群的产品，大量使用低透明度渐变、浅淡抽象色块，账户余额、收益数字模糊难辨；主打年轻群体的基金、证券 APP，跟风酸性霓虹、故障艺术特效，花哨视觉冲淡专业属性，用户不敢放心投入资金。

（二）标准化落地解法

1. 搭建分人群用户色彩认知基线

先通过用户画像分层锁定色彩偏好与敏感阈值：

• 中老年用户：优先暖调、高对比配色，规避暗底色、冷灰弱文字；
• 高净值客户：偏好低饱和中性色系，排斥高饱和花哨视觉；
• Z 世代年轻投资者：接纳渐变、轻量化动态效果，但核心交易区仍需保留传统金融安全色。

同步开展色彩语义认知测试，重点验证涨跌、风险、确认等关键功能色的大众联想，避免出现 “绿色代表亏损” 这类认知错位。

2. 按业态划定金融配色红线

针对不同金融品类设立禁用色彩规范，从源头规避风险：

• 银行 / 保险：禁用荧光色、高饱和霓虹渐变、全屏黑色；
• 证券 / 基金：主色避开红、绿两大涨跌标识色，防止行情视觉混淆；
• 支付工具：支付、确认、退款等核心操作按钮，严格遵循大众通用色彩心智。

3. 用 A/B 测试量化配色效果

配色方案上线前必须完成对照测试，两类核心观测指标：

• 功能指标：按钮点击率、表单完成率、交易误操作频次；
• 情感指标：NPS 净推荐值、用户访谈中 “安全”“靠谱” 等正向关键词提及率。

二、雷区二：功能色与品牌色边界模糊，引发交易误判

金融色彩具备强指令属性：颜色直接告诉用户 “确认、警告、亏损、盈利”。若品牌色随意侵占功能色场景，色彩语义彻底混乱，轻则操作犹豫，重则造成资金误操作，同时无视色盲群体还会触犯无障碍法规。

（一）问题拆解

1. 品牌色入侵功能场景，语义完全混淆 功能色是具备通用指令含义的专用色彩：红色 = 风险 / 警示 / 撤销，绿色 = 确认 / 成功，蓝色 = 进度 / 说明；品牌色仅用于 Logo、装饰、次要模块，不可替代功能色。 典型误区：品牌主色为红色，同时用红色标注风险弹窗、确认买入按钮，用户无法区分 “警示” 和 “操作入口”，关键交易时极易判断失误。
2. 单一色彩传递信息，无视色觉障碍人群 仅依靠红、绿区分涨跌行情，无文字、符号辅助，红绿色盲用户完全无法分辨盈亏；该设计缺陷不仅伤害用户体验，在多地还违反无障碍访问相关规范。

   

（二）标准化落地解法

1. 色彩分层隔离：功能色优先级高于品牌色

建立强制规则：交易、风险、确认等核心功能区，优先使用通用标准功能色，即便和品牌主色冲突也不可替换。品牌色仅允许用于页面装饰、头部 Logo、次要营销模块，绝不干扰决策类操作。

2. 多维信息叠加，不单独依靠颜色表意

所有依靠色彩区分的信息，配套多重视觉辅助：

• 涨跌数据：上涨配↑、+ 号，下跌配↓、- 号；
• 风险等级：除红色警示外，加粗提示文案、增加边框标识；
• 按钮状态：可点击 / 置灰状态，同步区分形状、描边粗细，不只用颜色区分。

3. 内置无障碍高对比度模式

产品设置中心增加一键切换高对比模式，采用黑白灰强对比 + 粗边框设计；设计阶段借助色盲模拟工具校验界面，保证色觉障碍用户完整获取全部金融数据。

三、雷区三：忽视地域文化色彩禁忌，全球化布局踩舆情雷

跨境金融出海时，语言翻译易被重视，但色彩背后的文化、宗教、政治象征极易被忽略。同一种颜色在不同国家、地区褒贬含义完全相反，微小配色失误会引发大规模市场负面舆论。

（一）问题拆解

1. 色彩象征跨地域完全对立 最典型案例：红绿色涨跌语义冲突。国内市场红色代表上涨、喜庆；欧美证券市场红色代表下跌、亏损。若直接复用国内配色出海，海外用户会完全读反行情数据。 中东市场随意搭配绿色 + 星月元素，易被误认为专属伊斯兰金融产品，无关业务使用会被视作冒犯宗教。
2. 触碰历史、政治敏感色彩组合 东欧市场避免红白黑组合，易关联纳粹历史符号；曾被殖民的南亚区域，慎用殖民国家国旗配色，极易触发民众抵触情绪。
3. 区域通用警示色不统一 国际通用橙色代表警告，但日本金融产品习惯用黄色做风险标识，直接照搬国际配色会造成本地用户看不懂风险提示。

   

（二）标准化落地解法

1. 分区域建立本地化色彩库

提前调研目标市场文化、宗教、民俗，整理各地区友好色系、禁忌色、功能专用色，为不同国家版本输出独立配色规范，拒绝一套配色全球通用。

2. 本地化三重审核流程

1）文化顾问初审：筛查配色、图形是否存在宗教、政治敏感元素； 2）本地用户焦点小组测试：收集大众对色彩的第一联想； 3）色彩语义校准：修正涨跌、风险、警示等功能色，贴合当地使用习惯。

3. 搭建色彩危机应急机制

面向高敏感海外市场，预留全局一键换色功能；若配色引发文化争议，可快速替换主色调；涉及易产生歧义的色彩场景，增加说明文案，标注 “配色无宗教、政治指向”。

全球化金融配色的核心不是统一视觉，而是 “一地一策” 的文化尊重，避开色彩认知盲区，才能真正建立海外用户信任。

四、雷区四：一味追求视觉高级，牺牲基础信息可读性

金融界面第一要务是清晰可读，账户余额、持仓金额、手续费、风险提示都是用户核心关切。很多设计师为极简氛围感，刻意压低对比度，导致强光、暗光、老年用户都无法正常读取数据，再精致的视觉设计也失去使用价值。

（一）问题拆解

1. 低对比度设计，文字、按钮识别困难 浅灰文字搭配纯白背景、同色系灰色按钮 + 灰色边框，看似简约高级，实际弱光、户外强光下几乎看不清；中老年视力退化人群查看资产数字时障碍极强，直接降低产品使用意愿。
2. 深色模式粗暴反色，未做专业校准 多数深色模式仅简单反转浅色页面黑白，没有重新校准色相、对比度，纯白文字在深色底上刺眼疲劳，行情图表、数字辨识度大幅下降，违背深色模式护眼的初衷。

    

   

3. 未考虑多场景光线适配 设计仅在室内柔光屏幕调试，忽略户外日光反光场景，深色界面在阳光下数据完全看不清。

（二）标准化落地解法

1. 严格遵循 WCAG 2.1 AA 无障碍对比度标准

落地硬性数值规范：

• 正文文本与背景对比度≥4.5:1；大号标题文字≥3:1；
• 按钮、图表等功能性色块对比度≥3:1； 设计全流程使用 WebAIM Contrast Checker、Figma 对比度校验插件，所有页面批量检测，不达标配色直接驳回。

2. 多场景视觉适配方案

• 强光户外：提供高对比度浅色主题一键切换；
• 深色模式：重新调和文字灰度，避免纯白刺眼文字，平衡清晰度与视觉舒适度；
• 进阶功能：增加自适应亮度调节，根据环境光线自动调整页面色彩明度。

3. 多群体可用性测试

上线前分层模拟真实使用场景校验： 1）50 岁以上中老年用户，模拟 300-500lux 户外强光环境测试； 2）色盲模拟工具全页面扫描，确认图表、盈亏数字无识别障碍； 3）灰度模式预览，仅依靠明暗层级也能分清页面功能模块。

五、雷区五：盲目跟风流行趋势，品牌色彩辨识度彻底流失

金融赛道产品同质化严重，色彩是用户区分品牌的第一道视觉记忆点。一味照搬头部产品配色、追逐短期潮流，会让品牌失去专属视觉标签，在用户心中留下 “仿品、不够专业” 的负面印象。

（一）问题拆解

1. 照搬头部竞品配色，陷入同质化内卷 大量理财、信贷 APP 直接复制头部平台标志性色彩（支付宝蓝、微信绿），用户难以区分品牌，甚至误以为是山寨产品；盲目套用欧美冷灰极简风，又和国内用户传统金融审美脱节。
2. 潮流设计与金融属性严重冲突 跟风酸性霓虹、玻璃拟态、赛博渐变等潮流风格，视觉花哨但信息层级混乱；金融产品核心需求是稳重可信，过度潮流化会消解专业感。
3. 品牌色彩频繁迭代，视觉记忆断裂 短期内多次更换主色（蓝→紫→橙渐变），用户无法形成稳定品牌色彩记忆；传统保险、银行产品强行套用加密平台潮流配色，业务调性与视觉完全割裂，信任感大幅下滑。

（二）标准化落地解法

1. 挖掘品牌原生色彩 DNA

回溯品牌历史 LOGO、线下网点视觉、传统 VI 系统，保留用户已形成认知的基础色系，在原有色彩框架内微调创新，维持视觉记忆连续性；色彩调性贴合业务定位：养老理财柔和暖调、青年理财活力低饱和渐变、对公金融沉稳深中性色。

2. 潮流趋势三重筛选机制

所有流行设计落地前，依次过滤三层标准： 1）功能性过滤：优先保留能提升可读性、操作效率的趋势，舍弃干扰数据展示的花哨特效； 2）本土化适配：国际潮流结合本土传统色彩改良，不直接照搬； 3）渐进迭代原则：每年品牌主色调整幅度控制在 10% 以内，避免用户认知断层。

3. 差异化色彩战略打造竞争壁垒

跳出行业通用蓝、灰体系，适度融入地域文化特色色彩建立专属视觉符号；针对不同客群推出细分色彩方案，用色彩传递产品定位，形成竞品无法复制的视觉记忆点。

结语：搭建金融配色不可突破的安全底线

综合五大配色雷区可以发现，金融色彩设计始终需要平衡三大核心维度：功能安全、品牌识别、用户认知，三者缺一不可，其中功能安全是不可动摇的底层底线。

1. 金融配色三大核心挑战

• 功能安全为根基：配色失误会直接造成交易误判、资金损失，是所有设计的前置约束；
• 品牌差异为竞争力：独特稳定的色彩体系，是同质化市场中抢占用户心智的核心武器；
• 用户认知为标尺：所有色彩设计必须贴合大众使用习惯、适配全年龄段、跨地域人群。

2. 配色安全三大核心原则

1. 功能表意优先，杜绝色彩误导 风险、确认、盈亏等关键功能严格使用通用语义色，配套文字、符号多重辅助；全页面对比度达标，兼顾色觉障碍、老年、强光场景用户。
2. 品牌色彩稳中迭代，拒绝频繁大变 保留品牌原生色彩记忆点，年度微调幅度可控；潮流风格仅做轻量化点缀，不破坏金融稳重专业的核心调性。
3. 尊重人群与地域差异，前置测试验证 国内分层适配不同年龄用户，海外市场分区域定制色彩库；所有配色方案上线前完成用户测试、文化审核、无障碍校验。

3. 行业未来配色发展趋势

随着 AIGC 设计工具成熟，智能配色系统将成为金融设计标配：依托海量用户数据自动生成兼顾合规、可读、品牌调性的色彩方案，大幅降低试错成本。 同时，个性化自适应配色、区域文化定制色彩、多光线智能适配深色模式，会成为金融产品的基础标配。

金融色彩设计，是理性规范与人文体验的结合。守住可读性、交易安全、文化合规的底线，再适度做品牌视觉创新，才能长久留住用户信任，打造有记忆点、零风险的金融视觉体系。

转载：站酷

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

前言

兰亭妙微ui设计公司分享：当下，优质用户体验设计已经成为互联网产品构建差异化竞争力的核心抓手。在海量出行住宿类产品中，Airbnb 对用户体验的打磨堪称教科书级别，极少有品牌能像它一样，把线上预订流程转化为一段充满情绪、建立信任的完整旅程。

究竟是什么让 Airbnb 的设计成为业内公认的黄金标准？在深度体验、拆解这款 App 后不难发现，它的成功并非偶然 —— 整套产品体系牢牢锚定品牌使命与用户设计两大核心，从情绪、行为、交互全维度贴合用户真实需求。

下文结合产品实际表现，拆解 Airbnb 设计体系的五大核心巧思：

一、引导随心探索，而非强制用户决策

市面上绝大多数旅游 App 打开首页，第一句弹窗或搜索框都会直白提问：“你想去哪里？”，一上来就逼迫用户明确出行计划。 Airbnb 则反其道而行，首页放弃硬性提问，直接铺陈一批氛围感十足、极具吸引力的目的地与房源实拍。不催促用户立刻下定计划，而是用场景画面勾起好奇心，邀请用户自由探索旅行的无限可能性。

这套设计巧妙运用登门槛效应，大幅降低用户上手门槛：不靠冰冷的筛选逻辑绑架操作，而是唤醒人本能的好奇与想象。 设计底层逻辑完全贴合品牌内核：平台的目标不是催促用户完成下单交易，而是帮用户萌发出行灵感、找到心中向往的目的地。Airbnb 首页的核心定位，是灵感发现页，而非预订工具页。

二、售卖旅行情绪体验，而非单纯出租房间

传统住宿预订平台的筛选逻辑极度功能化，只会围绕 “大床房、距市中心距离、房型面积” 等硬件参数划分房源。 Airbnb 彻底重构选择逻辑，把选择权交还用户的情绪需求：首页设置「迷你小屋、山野美景、临海房源」等场景化分类标签，提供情感导向选择，而非冰冷的功能筛选。

用户打开 App 不再是 “找一个过夜的房间”，而是挑选一段专属的旅行体验。这种以个性化情绪体验为核心的产品思路，完美呼应 Airbnb 自身定位 —— 它是承载旅行情绪的生活平台，不只是解决住宿刚需的工具。

这一切设计的根源，来自 Airbnb 的核心品牌使命：Belong Anywhere（四海皆有家）。这份超越交易的品牌愿景，为平台所有产品设计提供统一底层逻辑，所有细节最终都落脚于 “归属感” 的打造。

三、弱化冰冷房源，强化人与人的温度联结

Airbnb 最打动人心的设计决策之一，是主动放大房源背后真实的房东形象，区别于酒店标准化、无具象人格的客房。

任意房源详情页都会清晰展示房东头像、个人简介、经营年限、超房东认证，搭配过往住客真实评价。当用户预订房源时，感知到的不再是一笔线上交易，而是去到一个陌生人的家做客。

通过突出人与人之间真实的社交联结，Airbnb 落地了 “四海皆有家” 的品牌承诺，让旅行脱离单纯的住宿消费，变成一段有温度、有记忆点的私人情感经历。

四、共情旅行者真实心态，包容无目的浏览行为

并非所有打开 App 的用户，都已经敲定出行日期与目的地。Airbnb 精准捕捉到用户 “随便逛逛、种草旅行” 的轻需求，并针对性落地适配设计：

1. 无需填写出行日期，就能随意浏览全球各地全部房源，不设置操作门槛；
2. 顶部搭载「自由浏览」功能，支持无压力随心翻阅，不强制固化出行计划。

这套充满共情力的设计，充分接纳用户 “无心种草、随意浏览” 的行为，而非只服务有明确下单需求的用户。这种读懂用户潜在心理的情感化设计，不断拉近用户与平台之间的距离。

五、克制精致的细节交互，每一步都松弛舒适

如今大量 App 堆砌浮夸动效、冗余操作，反而加重用户负担；Airbnb 的交互设计始终遵循三大原则：简洁自然、易懂直观、高效达成目标。

细节处藏着满满的巧思：

• “稀缺房源（Rare Finds）” 标签、报价提示搭配轻量化微动效，温和突出关键信息；
• 一键收藏心愿单、日历选择日期过渡顺滑流畅；
• 页面转场柔和舒缓，没有突兀跳转。

所有交互细节最终服务统一情绪：让用户全程感到自在、放松，拥有完全掌控行程的安全感，持续强化 “到家一般自在” 的品牌感受。

总结：好设计，传递可感知的情绪与归属感

Airbnb 能成为全球设计黄金标准，不在于界面极致复杂、视觉奢华，也不是单纯极简，核心优势是高度人性化、情感化，且全程与品牌使命自洽统一。

它向所有产品设计者证明：一款产品想要跳出工具属性、建立长久竞争力，只需抓住四件事： 包容用户的探索欲、搭建人与人的情感联结、打磨克制舒适的交互、通过细节建立信任，最终传递 “归属感”。

在同质化严重的 App 赛道里，Airbnb 给出了最珍贵的启示：设计从来不止是产品的外观样貌，更是用户使用全程真切感受到的情绪与体验。

转载：站酷

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

兰亭妙微ui设计公司分享：作为产品体验的“第一道门”，顶部导航栏（Navigation Bar）的设计直接影响用户对产品的使用效率和品牌感知，基于我们产品的使用场景，Navigation Bar 呈现出多样的组合方式来表达不同的页面层级及内容，由于没有统一的设计规范，因此出现了细节混乱不一致等问题。同时，为了适应产品的不断迭代更新，提高设计和开发的效率，保证产品体验的一致性，需要设计组件库有更具自由度、灵活拓展性的表现以及规范指引。

那么如何拆解复杂场景，收敛结构，搭建出灵活、易用、好维护、可拓展的 Navigation Bar 设计组件呢？请跟随本文的脚步一起看一看具体的实践思路吧。

一、怎么个事‍‍‍‍‍‍‍

通过App和小程序的场景收集，我们发现目前线上的 Navigation Bar 可总结出10+种不同的样式，由于各部分元素没有统一规范，出现了各种不同的问题，急需对组件库重新进行收敛和升级：

1. Image尺寸和圆角未统一
2. icon颜色、大小、样式不一致
3. 元素间距、对齐方式不一致
4. 标题文字字号不一致
5. 标题文字字数限制未规定，出现两行展示的情况
6. 部分图标被截断，显示不完整
7. App和小程序同一场景样式未对齐

二、别人是怎么做的？

在主流的大厂组件库中，我们发现 NavgationBar 都单独提取出了左侧区域及右侧区域，在命名上也看不到难以理解的业务属性命名，这也让我们意识到了要转变搭建 NavgationBar 组件的逻辑，跳出复杂的业务场景，从结构入手，形成容器思维，提升组件的包容性。

TDesign

Ant Design Mobile

三、NavBar是什么？‍‍‍‍‍‍‍

定义

顶部导航栏（Navigation Bar）位于屏幕的顶部，状态栏的正下方，主要用于帮助用户明确页面位置、层级等，导航栏包含了一些控件，用来在应用里不同的视图中导航，同时还承载了针对当前页面全局性的操作。

作用

1. 导航：提供离开当前页面的出口，即返回上级（适用于非一级页面）
2. 定位：告知用户当前所在位置
3. 提供全局操作：一般是以图标、文字、按钮或组合的形式存在
4. 增加品牌曝光：例如品牌Logo、容器品牌色、图标品牌色等
5. 搜索：方便用户快速查找内容
6. 分类整理：以分类tab为代表，本质是将多个相关的同级页面聚合在一起
7. 用户账户相关：如登录、注册、个人中心等，通常结合用户头像或特定图标表示
8. 动作指引：基于当前页面动作指引下一步去向

四、场景复杂，如何简化？

我们的业务场景丰富，还需要同时兼顾 App 和小程序，以及正常模式和Ghost模式，在这个基础上，我们的NavgationBar 样式能枚举出 25+ 种，这么多场景，总不能全部做成组件母版吧，那么应该如何简化呢？

找共性 — 打地基

首先，从基础结构上看， Navigation Bar 都包含了3个部分，可以归纳为Left（左侧容器）、Center（中间容器）、Right（右侧容器），容器之间互相适应。

找特性 — 搭建基础变体

基于业务诉求，各部分容器生成了各式各样的类型和组合方式，但是在组件设计中，需要避免把所有的情况枚举成选项，否则会丧失组件使用时的灵活性，并且难以应对后期的拓展需求，这就需要我们在众多情况中先找出特性，并抽象化的表示。

通过总结各部分容器的作用及场景，可得出其各自包含的基础组件类型变体（Variants）如下：

Left（左侧容器）：

1. Logo
2. IconButton

Center（中间容器）：

1. SearchBar
2. Tabs
3. Text

Right（右侧容器）：

1. Button
2. IconButton

增加底层灵活性

再拓展开来，每个基础类型组件还有不同的结构性需求，这需要组件具备底层的灵活性，以适应多种状态切换。可以抽象地理解为，为一个小组（基础组件类型）设置一定的成员名额（Swap 槽位），基于不同的需求可选择成员（原子）单独上岗，或者合作共同上岗，随着小组的发展，需要的时候也持续支持加入新成员。

Navigation Bar 组件结构层级

五、食用指南

NavBar 基础变量

为 NavBar 的基础变量（Variant）设置了App / 小程序的平台切换，以及适应深浅色模式背景的色彩切换，同时可自由控制 Left、Center、Right 容器的开关。

Left 容器

Left 容器的作用包括展示品牌LOGO、页面主题以及提供离开当前页面的出口，即返回上级（适用于非一级页面），通过 Instance Swap，我们可以在组件的属性面板中快速替换原子组件的样式，这种方式能省去组件搭建和修改过程中的重复操作，支持直接的无限拓展。

Center 容器

在Center 容器中，基于业务场景的需求，提供搜索（Search）、分类（Tabs）、文字标题（Text）三种基础类型组件。其中 Text 类型能够结合不同的原子形成多种组合，通过赋予每个原子组件属性（Property），可以在 Text 子组件中灵活控制其开关组合，例如这里我们涉及到了 Text 排版的切换、前置图片（Lead_Img）、后置标签（Trailing_Tag）、后置箭头（Trailing_Arrow）、背景（Bg）等。

Right 容器

Right 容器一般包括全局的操作控件，其中最常见的就是按钮（Button），向下拆分还包括了Text Button、Icon Button 等，在实际应用场景中，由于 IconButton 的基础原子组件本身自带边距，因此在页面中所需预留的间距（Padding） 与 Button 不同，同时我们还会遇到 Button 与 Icon Button 组合使用的情况，因此在 Right 容器的 Button 子组件中，我们预留了四个 Swap 槽位，并赋予了 TextButton 单独的 Padding，这样在使用组件时，能够降低解绑率，通过开关即可随意组合，同时也无需手动再调整间距（Padding），易于设计组内统一设计规范。

结语

在 NavigationBar 设计组件的升级过程中，我也深刻意识到了怎样才能叫“好的设计组件”，我们不能将眼光局限于现有的业务场景当中，需要在我们收集出所有场景之后深入的分析，建立容器思维，寻找底层结构的共性和逻辑，搭建坚固的基底之后，再一层一层往下拆分、嵌套，保证组件的灵活性、可拓展性。

转载：优设

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