首页

兰亭妙微ui设计公司分享:UI设计师必看!5个章节教你系统掌握顶部导航栏设计

清阳 设计资源

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

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

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

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

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

image.png

 

二、别人是怎么做的?

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

image.png

 

TDesign

image.png

 

Ant Design Mobile

三、NavBar是什么?‍‍‍‍‍‍‍

定义

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

作用

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

image.png

 

四、场景复杂,如何简化?

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

image.png

 

找共性 — 打地基

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

image.png

 

找特性 — 搭建基础变体

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

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

Left(左侧容器):

  1. Logo
  2. IconButton

Center(中间容器):

  1. SearchBar
  2. Tabs
  3. Text

Right(右侧容器):

  1. Button
  2. IconButton

增加底层灵活性

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

image.png

 

Navigation Bar 组件结构层级

五、食用指南

NavBar 基础变量

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

image.png

 

Left 容器

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

image.png

 

Center 容器

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

image.png

 

Right 容器

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

image.png

 

结语

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

 

 

转载:优设

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

 

image.png

 

兰亭妙微设计分享:Sightsee Holidays一站式旅行社预订管理仪表盘整套设计拆解

之晨 交互设计及用户体验

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


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

截屏2026-06-30 11.25.17.png

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

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

截屏2026-06-30 11.25.25.png

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

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

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

截屏2026-06-30 11.25.34.png

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

截屏2026-06-30 11.25.51.png

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

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

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

截屏2026-06-30 11.25.38.png

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

 

图片来自Behance

 

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

 

image.png

AI 产品 UX 体验设计实战:兰亭妙微拆解智能产品指标优化设计技巧

涛涛 行业趋势

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

B 端 UI 标准化落地指南:兰亭妙微详解设计原则与全品类组件体系

涛涛 设计思维

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

刷短视频停不下来?兰亭妙微拆解成瘾式交互设计背后的底层套路

涛涛 交互设计及用户体验

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

打破色彩对比度迷思:兰亭妙微解析 UI 无障碍设计五大常见误区

涛涛 设计管理与成长

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

兰亭妙微实战总结:一套标准化、可落地的完整 UI 设计工作流程

涛涛 设计思维

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

兰亭妙微ui设计公司分享:Figma 的更新,我们该如何读懂底层逻辑?

清阳

兰亭妙微ui设计公司分享:如今 Figma 又迎来大规模更新,不少设计师第一反应是:又要重新适应、学习成本又变高了?今天抛开表层功能,拆解这次更新背后的产品逻辑,换个长线视角看懂工具迭代。

一、本次更新核心:打造「一核心、多产品线」设计生态

本轮更新覆盖 Draw、Sites、Make、Buzz 等多款配套工具,不再只局限 UI 绘图,而是持续拓宽产品边界,搭建完整闭环式设计商业版图,下面分模块拆解核心更新点:

1. Draw Mode:补齐矢量绘图短板

image.png

Draw Mode 是嵌入 Figma Design 的全新矢量绘图模式,直击软件长久以来的痛点:原生矢量图形处理能力薄弱,绘制图标时导出极易出现像素、路径错乱等问题。
本次更新完整重构矢量底层能力:新增钢笔套索选区、图形布尔运算快捷操作,原生支持路径文字,彻底告别依赖插件实现文字绕排的时代;同时配套多款手绘笔刷,可直接手绘、手写创作。

image.png

 
目前暂不清楚该功能对 iPad 端的适配优化程度,若能实现平板端流畅联动,手绘、插画设计场景会迎来大幅提升。
 
此前有第三方客户端工具可弥补同类短板,但 Draw Mode 作为官方原生功能,稳定性与适配性更有优势;整体来看,该功能优化对常规 UI 工作流影响有限,插画、图标设计师感知会更强。

2. Sites:一站式设计建站,打通设计到落地闭环

image.png

这是我本次最期待的更新模块。此前试过 Framer 等建站工具,从视觉设计到页面部署的操作链路繁琐,学习成本居高不下。
现在 Figma 内置建站能力,设计师可直接在画布内完成页面设计与网页配置,实现「设计即建站」的完整闭环。美中不足的是现阶段暂不支持 CMS 内容管理系统,海量图文内容场景下,后续批量维护、更新效率会受限。

image.png

做个预判:半年内国内会涌现大量基于 Figma Sites 搭建的线上作品集,设计师会开始探索多版式、多交互形态的在线个人展示页。

3. Buzz:轻量化品牌资源库,面向营销人群降本增效

image.png

Buzz 本质是轻量化品牌素材资源中台,打通设计「创作」到「复用落地」的链路,主打面向品牌、市场运营人员使用。

image.png

 
无需掌握专业绘图能力,就能一键调用品牌标准化模板、素材,快速产出宣传物料,相当于把品牌物料生产能力从设计师延伸至全业务团队。

4. 其余配套工具

image.png

Grid、Make 等辅助工具同步迭代,但偏向细分小众场景,对绝大多数设计师日常工作影响不大,感兴趣可自行上手体验。

二、跳出当下,用长线视角看懂迭代意图

image.png

回看 2024 年争议满满的 UI3 改版,如今再看就能读懂官方的长远布局:统一全局交互布局,是为后续多工具拓展预留底层架构空间。
做 B 端产品时我们常说,导航、底层框架的核心优先级是业务拓展性,体验细节次之,Figma 的改版逻辑完全同理:先统一底层交互规范,再逐步微调不合理操作,整体交互底层逻辑不会大幅推翻,才有空间孵化 Sites、Buzz、Slide 等全新产品线。
很多人只吐槽改版带来的短期不适,却忽略产品迭代是为未来 3-5 年的生态铺路。

三、工具类产品通用迭代逻辑:以核心为根基,向外拓展用户圈层

image.png

在我看来,Figma 本质是一款面向设计人群的 B 端工具产品,这类工具的核心发展逻辑始终是:一个核心主干功能,搭配多类辅助场景工具协同
Figma 的主干是 UI 界面设计,在此基础上先后延伸 FigJam 协作白板、Slide 演示文稿、Buzz 品牌物料、Sites 建站等产品线,一步步拓宽用户群体。
 
不少人调侃,这套全方位扩张,像是 2023 年 Adobe 收购失败后的差异化突围。补充客观背景:当年收购终止源于海外反垄断监管限制,Adobe 并非主动放弃,还为此赔付了 10 亿美元违约金。

image.png

矢量绘图、品牌物料、网页建站,恰好都是 Adobe 生态的核心赛道。而 Figma 依托网页端轻量化优势,正在吸引 PPT 制作、平面、品牌营销等从业者脱离笨重的本地 Adobe 套件,转向云端一站式设计工具。现阶段我个人的全流程设计工作,已经全部在 Figma 内完成。
除此之外,工具产品迭代必须兼顾分层用户:使用者分为新手、进阶设计师、资深专家三类。

image.png

 
产品设计需要平衡两难选择:是新增高阶功能、拔高专业上限,还是简化操作、降低新手入门门槛?这套分层用户的平衡思路,也是所有 B 端工具设计师需要持续思考的核心命题。
 

转载:站酷

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

 

image.png

兰亭妙微ui设计公司分享:5步学会UI控件分类!照着iOS26组件库快速入门(上)

清阳 设计资源

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

image.png

image.png

image.png

image.png

image.png

image.png

 

image.png

 

 

转载:优设

 

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

 

image.png

 

别再写小作文了!OpenAI 最新官方提示词指南

之晨 行业趋势

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

一、全文速览图

image.png

大家是不是越来越觉得写 Prompt 就像在做法?

每次写提示词,我们都恨不得写上一篇小作文,生怕它漏掉一丁点细节。结果跑出来的东西依然毫无灵气,甚至让人血压飙升。

这几天,OpenAI 发布了一份官方 Prompt 指南。

image.png

作者是 Eric Provencher,熟悉开发圈的朋友可能知道,这位大佬之前打造过口碑极佳的 RepoPrompt,如今在 OpenAI 专门负责 Codex 的开发者体验。

看完之后,我有种醍醐灌顶的感觉,咱们一直以来的焦虑,其实完全找错了方向。

官方给出的结论非常反直觉:AI 表现不好,还真就是因为咱们的提示词写得太长、管得太宽了。

二、提示词这样写!

在这份指南背后的内部测试里,OpenAI 发现,把一套原本冗长的提示词精简之后,不仅总 Token 消耗暴降了 41% 到 66%,成本直接砍半。

最离谱的是,模型跑出来的任务评分竟然还提升了 10% 到 15%,少说废话,AI 反而干得更漂亮。

image.png

回想一下我们以前是怎么写提示词的。

为了防范模型犯错,总在不断地给 AI 打补丁。

它啰嗦,我们就加上“必须绝对简洁”。

风格不对,我们又补上五条语气要求。

调用工具卡壳,我们就干脆把每一步的操作流程写在里面。

遇到模型升级,我们还习惯性地把旧模型时代的规则原封不动地继承过来。

时间一长,提示词就变成了互相打架的规则垃圾场。

当一段话里包含了几十个互相冲突的指令,别说是模型了,就算是个大活人看了也会当场宕机。

指南明确建议,千万别再像对待没经验的实习生那样,试图控制 AI 的所有操作。

提示词的真正价值,在于让 AI 清晰地看到你要交付的终点。

至于用什么姿势走到终点,请放手让它自己去搜集、比较和决定。

这份新指南抛弃了过去那些玄之又玄的咒语学,回归到一个朴素但杀伤力极强的原则:结果优先。

image.png

掌握这四个词,就足以应对绝大多数场景:Goal(目标)、Context(上下文)、Output(输出)、Boundaries(边界)。

第一是 Goal(目标)。你最终要拿到什么东西?比如“我要为一款冥想 App 做一个首页的改版方向”。

第二是 Context(上下文)。有哪些会影响它判断的硬核资料?把真实的用户访谈记录、品牌规范文档直接喂给它,这比你费尽口舌描述半天管用得多。

第三是 Boundaries(边界)。有什么事情是绝对不能碰的?直接划红线,比如“千万别动旧版的 Logo”。

第四是 Output(输出格式)。交稿的时候长什么样?告诉它“给我 3 套视觉方向,每一套都要带上情绪板和配套文案”。

假设你需要优化一个 App 首页的文案和信息架构。

过去我们可能会这么写:

“你是一位资深的用户体验专家和增长黑客,精通消费者心理学。请你严格遵守以下 10 条原则对这个页面进行分析。第一,所有标题必须充满吸引力;第二,所有按钮文案必须具备强烈的行动号召感;第三…第四…第五…第六……同时绝对不要出现拼写错误,请一步一步仔细分析并说明理由。”

在 GPT-5.6 眼里,这简直是一堆充满噪音的废话。

现在,我们可以换成官方推荐的精简版:

“Goal:基于附件里的 PRD 和当前页面的截图,重写首页的区块结构和文案,核心目标是提升新用户的注册转化率。

Context:以 PRD 中的功能描述为唯一事实来源,截图仅供布局参考。

Output:输出一个分区结构文档。每个区块包含:大标题、副标题、主要按钮文案。字数控制在 800 字以内。

Boundaries:必须使用 PRD 里明确提到的产品卖点,遇到缺失的卖点请在文档末尾提示我补充,不要自行虚构任何功能。”

只要把这四点交代清楚,这个提示词就已经很棒了。

image.png

三、放下完美提示词的执念

大家千万别有一个执念,总觉得第一条提示词必须完美无缺。

一旦 AI 没做好,马上暴躁地推翻重写。

现在优秀的提示词全是聊出来的。

image.png

很少有设计师能靠最初的一页 Brief 就产出定稿。大家都是先拉个大方向,看着草图一遍遍磨出来。

写提示词也一样,你完全可以补充新资料、改变关注点、甚至半路调整,根本不需要重新起一个对话从头再来。

这就像你和身边的设计搭档过方案,一步步打磨,出来的东西才会真正契合你的心思。

image.png

结合咱们设计师的日常,我发现大家写提示词最容易在3个地方踩坑。

1. 戒掉堆砌形容词的毛病。

“帮我设计一个高级、简约、有质感、年轻化、符合当下审美的网页。”

听起来很丰满,但 AI 根本不知道这是在说什么,它只能去互联网的海量数据里找个最平庸的平均值敷衍你。

换一种接地气的说法:“为一个面向 25 至 35 岁都市白领的高端香氛品牌,设计官网首屏。目标是让人一打开就有一种‘安静但有辨识度’的第一印象。排版去参考那种高视角的编辑感杂志,避开传统电商满屏促销的套路。最后给我 3 个差异明显的视觉方向。”
感受一下,第二种说法有明确的用户画像,有非常具体的参考方向。

官方也特别强调,从你需要的结果开始写,只补充那些真正会改变产出方向的细节。

2. 别再当保姆去规定具体步骤。

老派的写法喜欢手把手教 AI 做事:第一步去分析竞品,第二步去提炼关键词,第三步去做情绪板,第四步再输出配色方案。

但现在是 GPT-5.6 了,它比咱们想象的聪明得多。

过度规定步骤,是在压缩它自主推理的空间。

现在只需要把话撂下:“基于附件里的品牌资料,给我 3 个官网改版方案。必须重点解决‘品牌价值表达模糊’的问题,别单纯去追求视觉上的新鲜感。”

你定义什么是好方案,AI 跑腿填坑,就这么简单。

3. 能上图就坚决别废话。

语言在视觉面前常常是苍白的。

写五百字去描述一个“带点呼吸感的高级布局”,绝对比不上直接甩给它一张带有红框标注的竞品截图。

配合图片的提示词只需要一句话:“参考附件这张截图的排版节奏,保留这种大面积留白和左侧的窄栏导航。避开它的灰褐色配色。结合我们自己的品牌,给出一个首屏方案。”

一张带标注的图,胜过千言万语 。

image.png

以前咱们写提示词喜欢像防贼一样,试图堵住每一个可能出错的漏洞。

官方的建议现在更新了:挑出一两个真正致命的边界就行了。

比如“不要动现有的核心信息架构”,或者“涉及开发成本高的地方一定要标记出来”。
把这几根高压线拉好,AI 就能在安全区里尽情释放它的创造力。

转载自优设网

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

 

image.png

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档