二、生成前的预处理

1. 给素材进行预处理（加一个素材没有的颜色作为背景），这里进行预处理是为后期在AE中进行抠像处理做准备

2.把首尾帧的参考图给 AI，生成适配的动态提示词。因为要做 “从无到有” 的动效，推荐用首尾帧生成，在提示词里写清楚首尾帧的画面和运动过程即可

这是AI给到我的提示词

三、生成视频

1. 选择「首尾帧生成」模式，首帧上传纯蓝色图片，尾帧上传花朵碰到一起，花瓣爆开的图片。

首帧：

尾帧：

2. 查看生成的视频

现在生成的视频，在碰撞后有很多杂线飞出，整体太乱了，我们修改提示词，让他不要有杂线飞出。

我们直接描述问题发给AI，让AI给我们修改提示词。

这是AI给到我的提示词：

3. 把新的提示词给到AI，让AI重新生成视频。

4. 现在生成的动画是没有杂线飞出了，但是节奏不对，两朵花碰到一起后，延迟了一会花瓣才爆发出来，我希望他是两朵花碰到一起后花瓣就直接爆发出来，那我们就继续描述问题，让AI给我们修改提示词。

https://image.uisdc.com/wp-content/uploads/2026/07/cf7774965441bbe94e0bbe8dd1bf35ba.webp

四、AE实操

1. 素材导入AE，通过颜色范围，快速获取透明底视频（这里可以使用颜色范围一键吸取背景色是因为我们在最开始进行了预处理，添加了一个素材没有的颜色做背景）

2. 把透明背景的素材放到界面里面看一下效果：

https://image.uisdc.com/wp-content/uploads/2026/07/d4294b34e241951ec3215266d234cb91.webp

3. 现在看起来边缘有点生硬，我们给他加一个边缘虚化的效果，让边缘柔和一点。这里我们添加一个蒙版，调整蒙版的蒙版羽化就可以啦，这是调整好的效果：

https://image.uisdc.com/wp-content/uploads/2026/07/fb6a63beef359221e470b3592bf16158.webp

最后，来看下这个动效在其他页面的效果：

https://image.uisdc.com/wp-content/uploads/2026/07/d6078bbcf165cd0b62ce884c03ac1488.webp

转载自优设网

兰亭妙微（蓝蓝设计）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设计公司分享：作为产品体验的“第一道门”，顶部导航栏（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。

兰亭妙微ui设计公司分享：在学习 UI 初期，除了学会软件要还要了解我们设计界面时都在设计什么，而 UI 控件就是首当其冲的设计对象。
UI 控件是一个统称，在下级还包含不同的控件类型，而这些控件类型是今天实现界面展示和交互的必要元素。虽然控件的外观在不同项目中样式各异，但控件本身的类型却是非常固定的。
学习控件最佳方式，就是先从 iOS 官方组件库中提供的控件开始学起，然后再拓展到一些特殊的样式和类型中。
所以下面，我们会以 iOS26 规范的组件库为标准，来对 UI 的控件类型做一个详尽的说明，帮助大家快速理解行业对控件的最新定义。

转载：优设

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

•  

  组件改了，旧项目还在用旧的，新项目又用新的，最后一套系统里跑着好几套逻辑；
•  

  产品线各自扩展，各产品线自己搞分支组件，都说我这个按钮特殊；
•  

  还有就是压根没人维护，设计系统变成设计组的私活儿，不是团队资产。

转载：站酷

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