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

一、全文速览图

二、先看调用图标库前后的差别

这个页面 Codex 已经能做出来。

但你看截图时，可以重点看图标，粗的细的面性的...会感觉有点乱。

不指定图标库时，AI 一般会默认用 Lucide 图标库。不是说它丑，但会让页面一眼有「AI 生成」的味道，就像Ai同样喜欢生成蓝紫色渐变的页面。

同样的页面，只是统一了图标，精致感就会上一个台阶。

三、让 AI 出图标更专业的方法

这件事可以分两种情况：还没生成页面时，先把图标规则写进去；页面已经生成后，再用一条 prompt 把图标统一回来。

方法一：页面生成前，把图标规则写进主 prompt

如果你还没开始生成页面，可以把规则直接写进主 prompt 里：

图标使用要求
界面中的图标默认使用 [Hugeicons] 图标库：
[https://hugeicons.com]
请优先选择与参考图含义和视觉风格最接近的图标。
如 [Hugeicons] 中没有完全匹配的图标，可以选择语义接近、风格一致的替代图标，但需要保持整体图标线宽、圆角和视觉统一性。
这就是最常用的调用方式。

核心不是让 Codex「推荐图标」，而是提前告诉它：图标从哪里选、怎么替代、线宽圆角和颜色要怎么统一。

方法二：页面生成后，追加一条替换图标的 prompt

如果页面已经生成好了，可以直接补这一句：

请检查当前 Dashboard 页面里的所有图标。
统一改成 [Hugeicons] 图标库，请优先从 [https://hugeicons.com/] 里选择语义最接近的图标。
所有图标保持线性风格，尺寸按使用场景统一：导航图标约 20px，数据卡片图标约 24px，消息提醒图标约 16px。
图标颜色跟随文字或卡片主色，不要混用其他图标库，也不要手写 raw SVG。

这一步做完，页面的变化会更明显。

图标会被拉回同一套视觉语言里。线条、圆角、粗细都统一以后，页面会少很多临时拼的感觉。

方法三：用企业自己的图标库

如果企业有自己的图标库，可以这么用：

帮我安装 @our-company/icons，这个项目所有导航和按钮图标都使用公司图标库。请从包里引入 React 组件，不要临时手写 SVG。
最后小一句话：别让 AI 自己猜图标。
你给它一个图标库、一条选择规则、一组样式约束，它做出来的页面就会少很多临时拼的味道。

四、哪些图标库适合让 AI 调用

选图标库时，不要只看数量多不多。

如果你真的在意外观，我建议先避开两个“坑”。

四、哪些图标库适合让 AI 调用

选图标库时，不要只看数量多不多。

如果你真的在意外观，我建议先避开两个“坑”。

lucide-react：太容易有 AI 味

它确实轻、稳、好调用，和 Shadcn UI、Tailwind 这些 AI 常用组合也很顺，所以模型特别爱用。

但也正因为太常见，那种细线、圆角、默认尺寸组合已经很容易被识别成「AI 默认图标」。如果你想要你的图标有特色一点，我不建议选它。

react-icons：方便，但容易风格杂

它把很多流行图标库都封装在一起，选择面很大。

问题是，AI 一旦从大集合里自由挑，可能这个来自 Feather，那个来自 Material，另一个来自 Font Awesome。语义对了，视觉语言却散了。

我的建议是：先选一个主风格库，再允许 AI 在找不到时做语义接近的替代，但必须保持线宽、圆角和视觉统一。

Hugeicons — 想提升质感，可以先试它

如果你想找一个覆盖面广、视觉质量也比较稳的图标库，Hugeicons 是很适合先试的一套。

它的优势是场景覆盖比较全，风格也适合拿来做完整界面：Dashboard、SaaS、产品官网、移动端页面，都比较容易找到合适的图标。

Heroicons — Tailwind 项目可以用，但别滥用

Tabler Icons — 后台系统菜单多的时候好用

Tabler 的优势是数量多。

做 ERP、数据平台、管理后台时，菜单经常一排十几个：订单、库存、客户、财务、权限、日志、工单……这时候大多数小型图标库会不够用，Tabler 更容易补上。

它个性不算强，但很适合「东西很多、还要整齐」的项目。

Phosphor Icons — 想做层级，可以选它

Phosphor 比较适合你想控制视觉层级的时候。

同一个图标有 Thin、Light、Regular、Bold、Fill、Duotone 等版本。比如普通状态用 Regular，重点入口用 Fill，空状态插画旁边用 Duotone，页面会有更细的层次。

这种库适合有一点设计控制欲的人。你愿意多说几句规则，它回报你的细节也更多。

Radix Icons — 小尺寸组件更稳

Radix Icons 数量不算最多，但它在小尺寸 UI 里很舒服。

按钮、弹窗、表单、Dropdown、Toast 这种组件里，图标太花反而烦。Radix 的 15×15 网格很规整，适合做设计系统里的小图标。

如果你的项目偏组件库、B 端工具、内部系统，它会比很多大而全的库更稳。

补充选择：Remix Icon / Material Symbols / Feather

Remix Icon — 企业工具和通用 Web 产品可以用

Remix Icon 很中性，适合企业工具、内容平台、通用 Web 产品，所有图标均免费供个人和商业使用。

Material Symbols — 做 Google / Android 风格时再用

Material Symbols 更适合 Google / Android / Material Design 体系，普通项目不要为了「看起来专业」硬上，参数太多会增加控制成本。

Feather — 干净经典，但别默认选

Feather 很经典，也很干净，但数量相对少一点。它和 Lucide 的视觉气质很接近，如果你已经觉得 Lucide 有 AI 味，Feather 也要谨慎使用。

五、如果你平时用 Figma 做设计，也可以这样用

Step 1：准备图标库

在 Figma 社区 找个图标库，或者把自己画的图标整理成组件页，顺手把名字改成 icon-home、icon-message 这种语义名称。

Step 2：整理到同一个区域

把这一页要用的图标放到同一个 frame 或组件区里，别让 Codex 在一堆图层里乱找。

Step 3：把链接交给 Codex

把 Figma 链接交给 Codex 的 Figma 插件，并补一句：

[figma链接] 请优先使用这个 Figma 图标区里的图标。如果没有完全匹配的图标，可以选择语义接近、风格一致的替代图标。

转载自优设网

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

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

 一、项目定位与行业现存痛点
产品简介
Sightsee Holidays是面向旅行社运营、商旅管家的一站式旅游资源管理Web后台，统一整合酒店预订、多品类交通（出租车/航班/大巴/火车）、旅游套餐三大核心业务板块，配套预订日历、预算环形数据图表、当日特惠房源、目的地推荐、在线AI客服、优惠活动推广模块，依托规整12列栅格系统保证全站视觉统一，兼顾日常房源上架、订单查询、客户出行规划、成本预算核算多重办公场景。

 传统旅行社后台行业痛点
1. 页面布局杂乱无规范：多数旅游后台无统一栅格，房源、日历、数据图表排版失衡，视觉割裂，长期办公阅读疲劳；
2. 酒店、交通、旅游套餐多业务分散：需要切换多个系统分别管理房源、车票、线路，无法一站式统筹；
3. 预算与订单数据无可视化图表：成本、支出全为纯文字数字，无法直观看清酒店/交通开销占比；
4. 缺少实时客服沟通渠道：客户咨询预订问题需跳转第三方聊天工具，响应流程繁琐流失客源。

二、产品完整旅游运营业务闭环
整套后台单页面打通资源展示→出行预订→预算核算→客户咨询完整运营闭环
1. 首页总览仪表盘层：一站式聚合当日特惠酒店、热门目的地、预订日历、月度预算环形图表，运营人员打开首页掌握全部核心经营数据；
2. 酒店预订管理页：批量展示带价格、评分的房源卡片，快速查看折扣活动，筛选对应目的地房型；
3. 交通票务预订页：分出租车、航班、大巴、火车标签，统一填写上下车/起降点位、时间、人数完成预约，搭配限时优惠横幅；
4. 预算数据分析模块：环形分层饼图直观展示酒店、交通、其他开销占比，辅助运营控制旅游套餐定价成本；
5. 侧边常驻AI客服窗口：页面右侧悬浮在线机器人，随时响应客户出行、预订相关咨询，提升转化效率。

三、核心页面模块设计拆解
模块1：全站统一12栅格规范体系
采用12列拉伸式栅格，边距30px、模块间距20px，左侧固定侧边导航栏，右侧内容区自适应排布卡片、图表、表单，保证首页、酒店、交通全页面对齐统一，提升专业精致度。

模块2：首页综合总览Dashboard
左侧固定功能导航，右侧多卡片轻量化网格布局，低饱和浅白基底搭配品牌蓝高亮按钮
1. 顶部全局搜索栏、用户头像、消息、收藏快捷入口；
2. 当日特惠房源横向滚动卡片，标注原价折扣、星级评分；
3. 大图旅游宣传Banner，快速跳转套餐预订；
4. 预订日历组件：可视化当月出行预约日期，高亮已锁定订单；
5. 预算环形图表：分层区分酒店、交通、其他开销占比，直观掌握经营成本结构；
6. 底部热门目的地横向推荐卡片，拓展线路销售渠道。

模块3：交通票务预订专项页面
1. 顶部四分类标签：大巴、出租车、航班、火车快速切换；
2. 标准化起止点表单：城市、日期、时间、乘车人数、车型筛选输入框；
3. 限时折扣活动横幅，刺激客户下单；
4. 底部FAQ折叠问答面板，解决常规出行疑问；
5. 右侧常驻AI客服对话卡片，无需切换页面即时沟通。

模块4：左侧全局侧边导航栏
分层两大区域：主业务菜单（首页、交通、旅游套餐、酒店预订）、偏好设置（设置、帮助中心、深色模式切换），选中项使用品牌蓝色填充高亮，层级清晰操作高效。

四、视觉设计体系：清爽浅白轻商务文旅风
 1. 色彩系统
- 基底底色：纯净哑光浅灰白基底，长时间浏览大量房源、表单无视觉疲劳；
- 品牌主色：柔和中度商务蓝，用于导航选中、主操作按钮、图表高亮，干净清爽不刺眼；
- 辅助区分色：浅灰用于次要表单、边框，红色小标签标注限时折扣活动，快速抓取优惠信息；
- 深色模式配套深色基底，适配夜间办公场景。

2. 图形与可视化规范
1. 规整12栅格布局体系，所有卡片、图表、表单严格对齐，视觉整洁统一；
2. 环形分层饼图轻量化数据可视化，分层色块区分不同出行开销类目；
3. 圆角房源卡片搭配实景旅游酒店实拍图，贴合文旅行业场景；
4. 极简线性导航图标：酒店、交通、套餐统一纤细线性图标，全站视觉体系统一。

3. 文字层级规范
无衬线简约商务字体，三层清晰信息层级：房源价格/预算占比大数字→板块标题→地址、日期、辅助说明小字，远距离快速抓取经营与预订核心信息。

五、产品商业与旅行社落地价值
1. 标准化栅格打造专业品牌质感：全站布局统一规整，区别于杂乱廉价的传统旅游后台，提升旅行社专业形象；
2. 多旅游业务一站式整合：酒店、交通、线路套餐单后台统一管理，减少运营人员多系统切换成本；
3. 预算可视化辅助定价决策：环形图表直观展现成本结构，方便运营调整套餐售价控制利润；
4. 内置AI客服减少客户流失：页面常驻聊天窗口，即时解答出行预订疑问，提升订单转化率；
5. 浅白柔和轻量化界面适配长时间办公，文旅实景卡片提升页面亲和力，降低后台工具冰冷生硬感。

图片来自Behance

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

人工智能技术全面渗透政企、消费、工业等赛道，超九成头部企业持续加码 AI 数字化布局，智能工具、智能后台、AI 生成类产品成为市场主流。但大量 AI 产品存在技术能力强、用户体验薄弱的矛盾：复杂算法藏于黑盒，用户上手门槛高、长期留存偏低，技术优势无法转化为产品竞争力。兰亭妙微深耕 AI UX 设计多年，落地百余款智能系统项目，深刻意识到 UI/UX 是衔接 AI 技术与普通用户的核心桥梁，既能降低智能工具使用门槛，也能通过精细化设计拉动核心数据指标增长。本文结合团队实战经验，拆解 AI 产品体验设计三大核心要点，配套可落地的数据优化思路。

随着政企管理系统、后台平台的工程化开发普及，传统零散的 UI 设计文档已难以适配前端自动化开发流程，设计产出与代码落地之间长期存在还原偏差、沟通低效、视觉不统一等痛点。兰亭妙微深耕 B 端系统设计多年，服务金融、政务、制造类后台项目时发现，一套完整、可落地、可机器解析的标准化规范，是打通设计与开发链路的核心抓手。本文结合团队自研《B 端 UI 设计规范 V1.0》，从六大底层设计原则、栅格布局、字体色彩、通用组件四大维度完整拆解，搭建一套适配 UI、产品、前端、测试多岗位协同的统一设计标准。

相信不少人都有这样的经历：本只想打开短视频快速浏览几条，一晃一两个小时悄然流逝；刷资讯、逛平台时手指无意识反复滑动，明明计划结束操作，却始终难以退出。各类 APP 层出不穷的沉浸交互设计，悄悄抓住用户心理，延长停留时长。今天兰亭妙微结合短视频、社交产品典型交互，拆解背后成瘾逻辑，并结合养护大屏、政务管理后台场景，区分 “诱导套路” 与 “良性高效交互”，给出政企系统专属设计准则。

随着无障碍体验成为 UI 设计的硬性考核标准，色彩对比度检测早已是设计输出前的必备流程。但在兰亭妙微多年政企系统、移动端界面项目落地中发现，大量设计师对 WCAG 对比度规范存在片面认知，机械套用数值反而做出观感差、适配性弱的界面。无障碍设计的核心是服务全人群视觉感受，而非单纯满足检测工具数值，今天我们梳理行业内最普遍的五大对比度误区，结合落地案例拆解正确设计思路。

不同企业、外包团队的 UI 工作环节会存在细微差异，但一套成熟、能减少返工、适配多人协作的标准化流程逻辑高度统一。兰亭妙微常年承接 APP、小程序、Web 后台、政企数字化项目，沉淀出覆盖需求调研、原型交互、视觉落地、规范搭建、开发交付、上线迭代六大完整阶段的标准工作流，规避设计跑偏、对接矛盾、还原失真等常见项目问题，下文结合真实项目经验拆解全流程细节。

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

转载：优设

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