首页

兰亭妙微UI设计公司:有温度的品牌节日营销设计

清阳 平面设计

兰亭妙微UI设计公司:互联网时代,品牌的节日营销是重要的传播节点之一。

从520、七夕到中秋、圣诞、元旦、春节,用户情绪在节日中被自然放大,也为品牌提供了集中触达用户、强化品牌认知的重要窗口。

在百度品牌营销中,节日营销已经成为高频且稳定的投放节点。

品牌通过开屏、信息流、品专等多触点场景,在短时间内形成曝光,快速放大声量。

随着营销环境的变化,用户的注意力愈发稀缺,节日营销的定义也在发生变化。

节日营销从单一的品牌曝光、信息触达,逐渐走向情绪沟通和心智的建立。

节日正在从一个传播节点,转变为品牌进入用户情绪的入口。

这也是我们重新思考品牌节日营销设计的起点。

节日营销设计为什么升级

当前节日设计越来越多趋同,问题也开始显现:

用户看到了节日,却没有记住品牌。

中秋是月亮、圣诞是雪花、春节是红色。这些符号足够“像节日”,但不再够打动人。

image.png

过去的节日营销设计,本质是一种标准化程序化的换肤,

在已有样式的基础上替换为颜色、叠加元素、快速形成节日版本。

这种方式高效,但是有明显的局限:

用户看到,但没有情绪共鸣;品牌出现,但是没有留下记忆;

当品牌开始从「曝光」走向「心智」,

设计,不再只是做节日视觉设计,而是要承担新的角色,

通过节日,帮助品牌与用户建立一次情绪的链接。

image.png

设计的角色,正在发生变化

在品牌营销体系中,设计的角色正在从“视觉执行”走向“情绪表达”。

过去,设计解决的是好不好看;现在,设计需要回答的是能不能被感知、能不能被记住、能不能触发行动;

这种角色的变化本质来自两个点:

1.用户从接受信息到情绪共鸣,用户不再被信息打动,而更容易被情绪打动;

2.品牌从曝光到转化,品牌不仅需要被看到,更需要被记住、被选择;

image.png

因此,设计的价值也在升级,从“表达节日”升级到“激活情绪”。

尝试让节日、文化、品牌营销进行融合。通过设计,让节日设计不仅被看见,而是被感受到被记住。

image.png

从节日元素,到节日情绪

在过去一年的实践中,我们形成了一个清晰的设计路径,

不再思考“用什么元素”,而是优先回答“表达什么情绪”,

整体设计流程我们拆分成四步:

1.文化分析,找情绪;

2.元素提炼,确定表达;

3.情感叙事,建立引导;

4.商业场景,承接转化;

最终形成一套设计方法:先定义情绪,再选择表达,最终通过场景完成转化。

设计的不只是画面,而是一段完整的情绪体验。

image.png

下面围绕中秋、圣诞、春节三个典型节日展开,

案例一|中秋:让月色承载情绪

在中秋节的设计中,我们先思考中秋的情绪是什么?

中秋节更偏向安静与温暖,它是一种关于思念和团圆的情绪。

image.png

在设计中,我们没有强调元素的丰富性,而是让月光成为画面的核心情绪来源。

整张画面被橙色的月色包裹,品牌礼盒作为视觉中心,灯笼与窗棱构建远近景的空间层次,让情绪在画面中缓慢铺开。

用户感受到的,不只是节日,而是一种被传递的心意。

不是月亮本身,而是月光下的情绪。

 
 

image.png

image.png

案例二|圣诞节:用星光建立引导

与中秋节这种传统节日不同,圣诞节则是一种外放型的节日情绪,它的文化核心是惊喜和给予。

在众多圣诞符号中,我们选择了一个更具文化指向的元素:圣诞星(伯利恒之星)。

在圣诞文化中,这颗星象征着“指引与希望”——它引导人们找到方向,也成为光明与祝福的象征。

因此,圣诞星光不仅是装饰元素,而是承载节日意义的核心符号。

image.png

基于这一语义,我们让“星光”成为整个画面的视觉起点与叙事线索。

画面中,星光从上方落下,形成一条清晰的视觉路径,最终聚焦品牌产品。

用户的视线随着星光的轨迹移动,从节日氛围自然过渡到品牌信息。

深色的夜空与雪景构建静谧的节日空间,而星光成为画面中最有温度的存在。

image.png

image.png

我们以星光为核心视觉线索,让星光轨迹贯穿整个设计场景。

从开屏的星光破窗,到信息流的星轨延展,再到品专的星光汇聚,用户在浏览过程中被星光自然引导,完成从视觉吸引到情感共鸣的转化。

星光不只是点缀,而是连接节日与品牌的路径。

 

image.png

案例三|春节:让节日流动起来

春节的复杂性,不在于元素的丰富,而在于情绪的多样。

它既有热闹的年味,也有现实的消费动机,还有天然的互动氛围。

因此我们不再堆叠符号,而是将春节拆分为三种情绪的表达。

image.png

基于春节用户三类核心情绪,我们将方案聚焦为三个方向,表达春节文化温度的流动,

年味:通过传统节日元素构造氛围,让品牌自然进入节日语境;

好礼:强化商品表达,让内容本身成为转化入口;

趣味:结合生肖与互动玩法,提升参与和传播;

image.png

通过传统节日元素营造氛围,帮助品牌营造节日氛围和加深品牌记忆;

我们选取了福字、生肖、红包等高认知度的春节元素,帮助品牌快速进入春节语境,快速建立春节氛围,帮助品牌进入春节语境。

 
 

春节期间,用户对送礼买礼品的接受程度是全年最高。

因此在「好礼」这个方向中,我们尝试打破传统按钮形式,让商品本身成为入口。

在开屏、信息流、品专、品牌百看中,品牌商品都可以以更直观、更强势曝光的样式出现。

 

春节期间,用户更愿意停留、互动,也更容易参与轻量玩法。

我们通过生肖IP的设计,并结合简单的游戏化互动,让品牌在春节期间不只是被看见,而是被“玩起来”。

 
 

image.png


 

最终让春节不只是被看见,而是让用户感受到一种正在发生的热闹。

当节日设计开始有温度

在过去一年品牌广告打造了七夕、中秋、圣诞、元旦、马年CNY等节日营销包,

在节日营销方案上线前后,我们从用户、客户、品牌资产三个维度进行了对比,结果呈现出清晰的增长趋势:

  • 节日营销方案上线后,用户对内容的关注度显著提升,点击率提升48%;

  • 设计价值的前置,也带来了客户决策方式的变化,客户样式复购率提升71%;

  • 设计资产复用率达到90%,多行业多节点快速适配,支撑节日营销规模化扩展。

image.png

节日,从来不只是营销节点,它是文化的缩影,是情绪的放大器,

更是品牌与用户之间,最自然的一次链接机会。

当设计能够阐述节日背后的文化语义,并用合适的方式将情绪传递出去,

品牌就不再只是出现,而是真正被用户感知、记住,甚至产生链接。

image.png

未来,品牌营销设计不再只是追求样式的创新,

而是回到一个更本质的问题:

品牌,如何被用户感受到。

而“有温度”的设计正是这个问题的答案。

转载:IXDC

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

 

image.png

兰亭妙微UI设计公司:插图在产品中的应用

清阳 设计资源

一、背景概述

插图的使用已有 10,000 年的历史。最早的图画之一是西班牙发现的手部轮廓图,距今已有 66,000 多年历史。随着互联网的出现,大约在 1997 年,插图的使用逐渐增多,谷歌的每日涂鸦和红牛能量饮料就是其中的典型例子,包括国内的百度,它们都在将具有特殊意义的插图融入产品中。

image.png

image.png

 

image.png

 

在过去插图通常使用铅笔、粉笔、钢笔、蚀刻画和颜料完成,但现在经过技术的发展我们可以通过更智能的方式来呈现插图;

一个好的插图还可以更好地生动地传达信息,我们如何确定最合适的插图风格?插图怎么才能体现品牌感?怎么能引起用户群体的共鸣?对于内容,哪种类型的插图最能强调产品特性,本篇内容分享了相关的案例,并解析如何针对不同用户群体确定产品插图风格;

 

1、当代产品设计中插图的战略价值

品牌差异化

以互联网产品为例,现在市场上随便拿出来个产品都会有一堆竞品出现,那如何在众多产品中体现自己产品的特性呢,除了功能层的差距外,无非就是“看和用”这个方面了,我们以看为例,像Ant Design的「科技温度」风格、Discord的「夜光贴纸」风格,都展现了产品的个性化,甚至说从插图风格就能get到产品是做什么行业的;

image.png

image.png

信息传达

当情况挺复杂的时候,要是全靠大段大段的文字去讲清楚,用户可能得费不少劲才能弄明白。这时候,要是有插图来帮忙,往往就能直接把意思给展现出来,让用户能更快地抓住信息的核心意思,例如医疗类APP用插图替代专业术语;

image.png

情感化连接量化

好的插图不仅起到美化视觉信息传达的作用,也能够对业务起到数据方面的提升,例如多邻国的插图表情,他们在2023年的调研数据上显示ip系统提升用户学习时长28%,Headspace冥想插图动效减少用户焦虑指数;

image.png

二、如何设计出好的插图

2.1 受众群体

不同的群体对于认知和喜好不同,首先就要明确是给谁做,每个产品都有自己用户画像,拿到用户画像去进行拆解设计目标,例如年龄在18-25岁,这就决定了设计风格偏年轻化,女性用户群体占比70%,决定了色系不能使用过多的冷色系(产品主色如果不是按照群体来的,那当我没说),在例如是一线还是二线三线,职业分布如何,这些拆解出来后,方向不就确定了吗,无非就是通过受众群体做减法,减少无用的脑暴;

用户特征

设计切入点

18-25岁

年轻化风格、新颖、趣味性

男性70%

减少暖色使用,冷色为主

一线城市居多

避免营销化、低端风格

对科技、技术感兴趣

冷色系、极客风、极简...

2.2 设计原则体系

搭建插图系统和设计规范流程是一致的,都需要在最基础的设计原则框架下完成,否则就脱离了基本的体验;

信息传达的精准性

  • 视觉降噪原则:构图简单,突出核心表达信息,避免过渡装饰干扰用户

  • 语言符号化:使用行业共识的符号做为基础形象进行设计,降低认知成本以及适配国际化,例如网络中断使用wifi、球形网络;

情感共鸣的层次化

  • 场景关联:除了基础的插图,在特定场景下的插图也要预判用户在当前场景下的情绪变化,通过插图来提升用户情绪峰值,例如社区产品中,用户成功发布一个帖子,给用户反馈的插图应当是开心、活跃让用户感受到产品的情绪价值;

  • 动态情感曲线:在新手引导中通过每一步的交互流程来变化插图表达的情绪,例如开始引导时突出表达信息,在一个流程结束时强化氛围鼓励用户,用户情绪进度期待→奋斗→高昂,促进用户进一步操作;

品牌基因渗透

  • 视觉原子构建:提取品牌色彩、标志性符号,形成基础的插图基因库;

  • 品牌故事元素贯穿全场景,例如茶颜悦色将古风和现代插图风格结合,创造了独特的品牌调性,并且每个插图场景都在传达品牌故事;

image.png

 

适配原则

  • 多端一致性:能够三端自适应适配尺寸,在小尺寸屏幕下插图的识别性是否会出现问题;

  • 扩展性:在各大节日时插图是否能够结合当前节日扩展,例如春节时插图是否可以添加灯笼烟花相关元素;

2.3 风格系统构建

风格定位

插图风格系统是品牌视觉语言的延伸,需通过基因提炼-规则制定-动态迭代的三层框架实现规模化应用;提到喜茶能想到的是描边黑白风格插图,茶颜悦色就能想到古风,而提到飞书我们就能想到极简具有规则的形状插图,这就是通过插图风格提升用户对产品认知;

风格系统四个纬度

前面每一步的分析都是为执行辅助

品牌基因提取

从品牌色、logo中提取颜色标志性符号,上面提到过

用户认知匹配

例如年轻用户偏高饱和,小众独特风格,但银行类的产品就需要体现出权威、安全、稳重的风格

组件化拆解

代入组件化思维,从小到大进行搭建,例如原子层→分子层→模块,也可以根据场景搭建基础层→装饰层→插图

情感化分类

按照场景情绪进行分类,成功、错误、失败

三、插图应用场景

3.1 核心功能

通过视觉表达降低用户认知负荷,引导用户关注或操作核心功能;

新手引导

这个比较常见,很多产品在新功能或者复杂功能的时候会建立新手引导的流程,这时候使用单一的箭头引导会比较单一,就需要添加一些插图做为情绪化引导,提升用户趣味性;

image.png

状态可视化

在一些上传、加载的场景其实也可以融入插图来缓冲用户焦虑,现在大多产品都是使用比较简单的加载方式,实际上可以将品牌插图融入进去;

image.png

3.2 品牌价值传达层

将品牌DNA转化为可感知的视觉叙事,建立情感化认知锚点

超级符号ip渗透

在登录页/加载页/404页等全链路重复品牌标志性元素,提升用户对品牌的记忆;

image.png

价值观场景化表达

用插图隐喻传递品牌主张(如环保产品用树木生长插图替代口号式文案)

节日仪式感表达

在特殊节日叠加一些装饰元素,提升仪式感,上面有提到融入节日元素;

3.3 用户体验优化层

解决体验断点,通过情感化设计提升用户容忍度与愉悦感

负向场景安抚设计

出现bug的页面通过插图传递「可控感」,用修复工具插图+明确解决步骤缓解用户焦虑;

降低学习成本

在新功能上线时或者改版功能时,用插图对比新旧流程差异,这个主要在b端场景使用会比较多

image.png

情感峰值制造

在用户完成某项任务或完成某个阶段流程时给用户反馈出高成就感的插图,例如keep的成就解锁,学习软件种每日学习打卡成功等;


image.png

四、案例分析

分析三个不同行业的插图,来看看他们的插图差异化

4.1 金融类APP的信任感构建

首先看看金融类产品如何在专业与用户情感传递之间进行平衡

image.png

符号系统化

颜色方面围绕稳重复合色(深蓝+浅金),避免高饱和色彩带来的廉价感;

image.png

场景克制表达

仅在低风险场景(如教育科普页)使用轻度拟人化角色,而核心功能涉及到数据方面的则使用抽象的数据的可视化插图;

image.png

文化兼容

在出海的一些国家涉及到文化冲突,例如在中东区域就删除了动物形象用植物和建筑符号代替;

image.png

4.2 社交产品的年轻化表达

小红书通过潮流涂鸦的风格建立z时代圈层共鸣,为用户提供固定的模板,降低用户创作成本,提升产品的品牌主张,同时能够营造出社区统一的氛围感。

image.png

视觉特点

以线稿为主,为用户提供自由创意的涂鸦玩法。

五、未来趋势

实时渲染的个性化插图

动态生成:根据实时数据改变插图元素,如不同的天气、心率的高低、运动的步数等等;

天气软件中可以根据不同的天气变化背景,当然这个目前已经广泛应用了,但未来也是不变的一个趋势;

image.png

AI效率性插图

可通过ai流程来制作统一的插图风格进行应用,并且风格的局限性相较于之前也更灵活了,在前几年只能通过mj喂图抽卡来生成统一的插图,并且时间成本非常高;

在前两年只能通过训练大模型的方式训练具有产品特点的模型,并且训练周期非常长,配置要求高,随着现在的技术更新,线上出现了很多训练模型的方式,不在依赖本地配置,通过线上训练的lora模型,内存比较小也方便调用,时间上相对之前大大提高;

image.png

 

转载:防脱发药水

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

 

image.png

长文干货!从零搭建「用户行为分析」完整指南

清阳 用户研究

一、为什么设计师必须懂用户行为分析

 
兰亭妙微UI设计公司,当下互联网产品日趋成熟精细化,行业竞争从功能比拼转向细节体验与服务能力内卷。产品改版、功能优化再也不能只靠产品经理、设计师主观经验,或是盲目对标竞品;用户行为分析作为用户洞察的核心手段,成为产品决策、体验优化的重要依据。
 
对体验 / 交互设计师而言,用户体验设计本身就是精细化工作,全程需要用户研究、数据洞察做支撑。掌握用户行为分析搭建逻辑,不仅能提升设计决策的科学性,更是职业能力进阶、适配行业职能发展趋势的必备技能。即便当下暂未用到,提前了解储备,也能应对后续工作需求。
 

二、用户行为分析核心定义与价值

 
用户行为分析是数据分析的核心分支,聚焦数字化服务行业。核心逻辑是深挖用户流量走向、操作习惯、交互特征,理清用户与产品的关联度、使用效果、行为趋势,最终落地到产品设计优化、用户体验提升、业务战略决策。
 
通俗解读:实时监测用户在产品内的所有操作行为,判断行为是否符合预期、挖掘用户特征与产品现存痛点,以此针对性调整产品设计、贴合用户偏好,为业务决策提供数据支撑。
 

三、用户行为分析四大核心优势

image.png

1. 客观真实,规避主观偏差

 
行为数据属于被动采集,相比用户问卷口述反馈更具真实性,能规避用户心理设防带来的霍桑效应
 
例:问卷询问爱看什么书籍 / 视频,用户常刻意美化回答;而后台行为浏览、下单记录,能真实还原用户实际喜好。
 

2. 群体大数据,兼具代表性与准确性

 
依托海量用户群体数据,结论更具普适代表性;且为实时自动记录,避免人工记忆偏差,数据精准度更高。
 
  • 代表性:大量用户种草某帖子后均下单同款商品,可据此精准推荐商品,兼顾用户预期与商业转化;
  • 准确性:后台操作日志可精准追溯员工仓库补货流程,无需主观回忆核实。
 

3. 持续可追溯,适配产品长期迭代

 
依托数字化技术可伴随产品全生命周期持续采集数据,随时调取历史数据做纵向对比、溯源分析。
 
  • 可持续:通过长期数据观测,可清晰发现服饰品类从冲锋衣热销转向瑜伽服领跑的趋势变化;
  • 可追溯:一键查询历史消费金额、下单品类,精准复盘个人或群体消费习惯。
 

4. 不可被 AI 完全替代

 
AI 可实现数据自动化采集、清洗与治理,但用户行为背后关联人文心理、业务场景、用户诉求,最终的深度解读、策略决策仍需人工介入分析,无法完全依赖机器。
 

四、用户行为分析标准搭建流程

image.png

完整落地链路:业务目标→需求拆解→界定分析范围→数据采集→数据治理→指标构建→行为分析→用户画像→结论落地应用→数据持续维护
 
流程核心要点:
 
  1. 聚焦核心不求全覆盖,优先锁定高价值业务场景;
  2. 清洗过滤异常、无效、爬虫测试脏数据,关联业务数据库;
  3. 搭建可视化数据报表,完善指标运算规则;
  4. 开展用户分层、异常行为复盘,输出产品优化、定制营销方案;
  5. 进阶搭建行为预测、喜好推荐等分析模型,持续维护画像与埋点、指标体系。
 

五、核心关键节点深度拆解

image.png

(一)目标需求拆解:找准方向再落地

image.png

  1. 启动时机

    image.png

    产品具备基础流量,且有明确的用户行为分析诉求时再启动:如流量分布调研、功能使用频率统计、转化漏斗分析、用户偏好挖掘、用户画像搭建等。无流量、无明确业务目标盲目搭建,只会事倍功半。
     
  2. 合理界定范围

    image.png

    用户行为分析体系搭建是长期工程,切忌追求一步到位全盘布局。建议小步迭代、针对性搭建,从表层问题逐步深入,打好基础再扩容,降低后续维护迭代难度。
     
  3. 自上而下拆解逻辑

    image.png

    从顶层业务目标(商业转化、活跃留存、任务通过率)向下拆解,锁定核心业务场景、关键任务路径;穷举核心功能入口与操作链路,避免数据断层、异常问题无法溯源。
     
    核心原则:贴合业务价值,聚焦核心指标与场景,拒绝无效全面化建设。
     
 

(二)读懂数据埋点:行为采集的核心工具

 

1. 埋点是什么

image.png

数字化产品的界面交互会产生大量用户操作行为,数据埋点就是将页面交互、按钮点击、区块浏览等行为日志,实时上报至产品后台。
 
可分为三大类:页面访问(PV/UV)、区块曝光(区域浏览、停留时长)、按钮操作(点击动作、状态变化),同时附带用户属性、渠道、设备、身份类型等参数,完整还原用户使用全路径,支撑业务分析决策,且可跟随产品迭代持续维护采集。
 

2. 埋点适用场景

image.png

服务于业务洞察分析需求,相比传统业务日志,能采集更全面的界面交互数据,还原真实使用场景;
 
埋点数据与业务数据独立存储,不影响产品访问性能,适用于产品迭代新旧数据对比、营销活动效果评估、用户行为偏好识别等场景。
 

3. 埋点需求提报技巧

image.png

无固定文档格式,可依托第三方平台可视化埋点、全埋点、无埋点功能减少开发成本;
 
提报逻辑自上而下:从业务目标、核心指标拆解,绑定核心任务流程,无需单页面全量埋点,只聚焦关键路径与核心操作即可。
 

4. 业务扩参解析

image.png

扩参即扩展参数,将页面可获取的用户属性、业务属性、设备属性、网络环境等数据,绑定埋点日志同步上报。通过扩展参数可实现多维度数据筛选、分层分析,提升分析精细化程度。
 

(三)数据治理:保障数据质量的基石

 

1. 数据治理的必要性

image.png

海量原始数据中存在缺漏、冗余、漏报乱报问题,还有测试数据、爬虫脚本产生的脏数据。若不治理,数据映射关系混乱,统计的指标、趋势会完全失真,无法支撑商业决策。简言之:元数据治理不准,所有数据分析都失去实用价值
 

2. 数据治理落地方式

 
核心是查缺补漏、过滤无效脏数据、修正错误数据;梳理数据参数含义,建立数据与业务指标的映射关系,为后续指标计算、行为分析打底。
 
治理多由 BI 数据建模人员负责,设计师、产品只需按需提出埋点、报表需求,发现数据异常推动修复即可。
 

3. 数据长期维护

 
日常需做好数据治理、报表问题修复;产品每次版本迭代,同步更新维护埋点配置,保障指标统计、推荐算法、业务决策的数据准确性,避免连锁偏差。
 

六、三大核心分析内容产出逻辑

 

1. 内容产出优先级

 
先建核心指标→再做行为链路分析→最后完善用户画像
 
  • 核心指标(转化率、留存率、活跃度)是业务高层首要关注重点,优先落地;
  • 行为链路、漏斗分析从微观视角挖掘体验卡点、流量问题,支撑产品优化;
  • 用户画像数据收集周期长,需逐步沉淀完善,不适合作为初期搭建重点。
 

2. 基础指标构建

image.png

指标就是业务核心成绩单,如同餐饮门店统计销量、品类爆款、利润营收。
 
构建逻辑简单易懂:多以占比、求和、周期变化等基础运算即可实现,关键依托真实有效的底层数据。
 

3. 行为链路分析

image.png

用户行为路径是数字化产品的用户旅行地图,场景纯粹、意图清晰、数据采集便捷,核心价值:
 
  1. 梳理用户活动范围、页面流转关系,掌握流量分布与走向;
  2. 定位任务流程漏斗卡点、跳失节点,优化体验、提升转化;
  3. 依据路径特征做用户分层、偏好预测,赋能内容推荐与精准营销。
 
按业务类型可划分为浏览、消费、互动三大行为:电商侧重浏览、加购、下单链路;社交产品侧重内容访问、点赞评论、关注分享等互动行为。
 
常用可视化图表:漏斗图、桑基图、雷达图、散点图等,直观呈现数据特征与问题。
 
进阶应用:从触点场景识别用户意图,匹配核心行为路径,根因分析后更新用户画像,反哺算法推荐与广告投放优化,形成完整用户增长闭环。
 

4. 用户数据画像

image.png

核心作用:读懂用户群体、划分人群圈层、挖掘偏好特征,落地精准营销、产品迭代、体验优化
 
  1. 偏好细分:兴趣偏好、行为偏好、消费偏好,通过标签化实现个性化内容推荐;
  2. 基础画像指标:地域、年龄、性别、设备类型、活跃度,依托后台数据即可简单加工生成;
  3. 进阶画像指标:交叉分析年龄段消费能力、教育背景与兴趣关联等复合型特征;
  4. 用户分层应用:按闲逛浏览、精准采购、活动参与等行为分层,提供差异化服务与运营策略;用户规模较小时无需急于分层,避免投入与收益不匹配。
     
    ⚠️ 画像数据采集全程需严守用户隐私安全、合规合法原则。
 

七、分析结论落地应用

 
用户行为分析不只是简单的行为数据统计,更涵盖全维度业务指标、用户特征数据。搭建核心原则:目标先行、问题导向,针对性采集数据、搭建指标体系。
 
数据报表、可视化图表只是数据的呈现形式,无需追求花哨炫酷,优先适配企业报表平台、Excel 等现有工具,兼顾落地成本与实用性(可参考 AntV 图表官方示例选型)。
 
整套搭建流程、核心要点与落地思路已完整梳理,无需复杂手把手教程,按本文框架落地即可规避核心坑点;埋点平台、分析工具可根据企业自身规模与业务需求灵活选择。若上手遇到难题,多依托官方教程、搜索引擎即可解决,多数难点本质是工具不熟导致。
 
转载:优设
 

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

 

image.png

兰亭妙微UI设计公司:这种全新的交互方式,会成为未来AI应用的标配吗?

清阳 行业趋势

前 Meta AI 团队创立的 Hero 公司,推出专利技术 AI Autocomplete SDK,能实时预测任务所需全部参数,输入 “订机票” 即刻呈现所有选项,让交互速度提升 10 倍、成本大降。这篇文章深入解析这项革命性技术的工作原理、应用场景与商业价值,探讨它能否成为未来 AI 应用的标配,带你看懂人机交互的下一场变革。

你有没有想过,为什么和 AI 聊天总感觉像在玩猜谜游戏?你说想订机票,AI 问你去哪儿。你说去纽约,它问什么时候出发。你说下周三,它又问几点。你说早上,它接着问要直飞还是转机,经济舱还是商务舱,要不要托运行李。这种来回问答的过程让人抓狂,就像是在玩一场永无止境的”二十个问题”游戏。更糟糕的是,有时候你都不知道 AI 需要什么信息,只能等它一个一个问。这种交互方式看似自然,实则效率低下,完全违背了 AI 应该让我们生活更简单的初衷。

前 Meta AI 团队成员创立的 Hero 公司刚刚发布了一项专利技术,可能会彻底改变这种局面。他们推出的 AI Autocomplete SDK 不是简单的自动补全功能,而是一个能够实时预测并呈现完成任务所需全部信息的系统。想象一下,当你开始输入”订机票”的时候,屏幕上立刻出现所有相关参数:出发地、目的地、日期、时间、航空公司、座位偏好、行李选项等等,你只需要填写或选择就好,不需要等 AI 一个一个问你。这听起来像是一个小改进,但实际上它可能会让 AI 交互速度提升 10 倍,成本降低 10 倍,并且为未来的增强现实设备奠定基础。

Hero 不仅将这项技术用在自己的助手应用中,还通过 SDK 向其他公司开放。这意味着我们可能很快就会在各种应用中看到这种全新的交互方式。而且,他们刚刚获得了 Forerunner Ventures 领投的 300 万美元追加投资,这是在去年 400 万美元种子轮之后的又一次资本认可。我深入研究了这项技术后发现,它的影响远比表面看起来要深远得多。

提示词工程为什么会成为一个职业

这个现象背后反映的是当前 AI 交互方式的根本缺陷。大语言模型虽然能理解自然语言,但它们并不知道用户想要完成什么任务需要哪些具体信息。就像 Hero 的 AI 工程师 Saharsh Vedi 说的:”现在的问题是,负担都在用户身上,他们需要思考 AI 需要什么信息。”这完全颠倒了技术服务人类的关系。

我自己在使用 AI 工具时也深有体会。比如用 AI 生成图片,我经常需要反复调整提示词,尝试不同的描述方式,才能得到满意的结果。有时候我花在琢磨提示词上的时间,比直接用传统工具做图还要长。更令人沮丧的是,即使你精心设计了提示词,AI 也可能遗漏某些重要细节,导致结果不符合预期。然后你又得重新生成,这不仅浪费时间,对于按次收费的服务来说,还意味着额外的成本。

当前主流的 AI 应用都试图通过各种方式解决这个问题。有些添加了建议按钮,提供预设的提示词模板。有些使用引导式问答,一步步收集用户需求。还有些像 Adobe 的 Firefly 应用,把提示词拆分成多个部分,比如创作音乐时分别输入情绪、风格和用途。这些方法都在一定程度上改善了用户体验,但都没有从根本上解决问题:用户仍然需要主动思考和输入信息,AI 仍然处于被动等待的状态。

Hero 的方法则完全不同。他们不是让 AI 更聪明地问问题,而是让系统主动预测并呈现完成任务所需的全部信息。这种思路的转变看似简单,实则颠覆了整个交互范式。就像创始人 Brad Kowalk 说的:”我们基本上意识到,你在互联网上能做的任何事情,都只是一系列参数。一旦你看到了这一点,就很难再忽视它。”这句话听起来简单,但它揭示了一个深刻的洞察:无论多么复杂的任务,本质上都可以分解为一组参数,而这些参数是可以预测和呈现的。

AI Autocomplete 如何工作

AI Autocomplete 的核心理念是前置加载所有必要信息,而不是通过反复问答来收集。当你开始输入或说话时,系统会实时更新界面,显示完成这个动作所需的所有参数。这不是简单的文本补全,而是一个理解任务结构、预测所需信息、动态呈现选项的智能系统。

拿订机票这个例子来说。在传统的 AI 助手中,你可能需要经历这样的对话:你说”我想订机票”,AI 问”您要去哪里?”,你说”纽约”,AI 问”什么时候出发?”,你说”下周三”,AI 问”您希望几点的航班?”,你说”早上”,AI 问”经济舱还是商务舱?”,你说”经济舱”,AI 问”需要托运行李吗?”,以此类推。整个过程可能需要十几轮对话,每次都要等待 AI 的回应。如果你在某个环节说得不够清楚,或者 AI 理解错了,还得重新来过。

但在 Hero 的 AI Autocomplete 系统中,当你输入”订机票”的瞬间,屏幕上就会出现所有相关字段:出发地、目的地、出发日期、出发时间、航空公司偏好、返程日期、座位类型、行李选项等等。你可以随时停下来,只填写你知道的信息,然后发送查询。系统会根据你已经提供的信息,智能地建议或填充其他字段。你不需要等待 AI 一个一个问你,所有信息都在你眼前,你完全掌控着交互的节奏。

这种方法的优势是多方面的。第一,速度快。Hero 声称可以让操作速度提升 10 倍,因为省去了大量来回对话的时间。第二,成本低。每次 AI 的响应都需要服务器计算,减少对话轮次意味着大幅降低运营成本。Kowalk 特别强调了这一点:”因为涉及的消息更少,规模化运营的公司可以节省服务器成本。”第三,用户体验更好。你不会感觉自己在被 AI 审问,而是在一个清晰的框架内主动提供信息。

我特别欣赏 Hero 工程师 Vedi 说的那句话:”希望我们回头看时,几乎不记得’提示词’这个概念。”这体现了他们的雄心:不是改进提示词,而是让提示词成为历史。在他们的愿景中,未来的 AI 交互应该是结构化的、可预测的、高效的,而不是开放式的、充满不确定性的对话。

这项技术能用在哪些场景

AI Autocomplete 的应用场景远比订机票更广泛。Hero 在发布时特别强调了几个重要领域,每个都有可能被这项技术彻底改变。

搜索和电商是最直接的应用场景。现在在电商平台搜索商品,你需要输入关键词,然后在成百上千的结果中筛选,使用各种过滤器来缩小范围。这个过程既费时又费力。但如果有了 AI Autocomplete,当你输入”咖啡”时,系统立刻显示出品牌、烘焙程度、包装规格、配送时间、订阅频率等参数。你可以快速选择你想要的选项,甚至可以设置”每月配送”这样的重复订单。Hero 展示的咖啡订购例子就很好地说明了这一点:不仅可以快速完成当前订单,还能轻松设置定期订购,就像你说”每个月”一样简单。

媒体生成是另一个会被改变的领域。我之前提到过用 AI 生成图片时需要反复调整提示词的痛苦。AI Autocomplete 可以在你开始输入时就实时展示各种参数:主体、动作、风格、光线、相机角度、分辨率等等。你可以从这些选项中选择,而不是试图用文字准确描述你想要的效果。这不仅能激发创意,让你看到自己可能没想到的选项,还能显著减少生成次数,从而降低服务器成本。对于视频生成这种计算密集型任务来说,减少迭代次数的意义更加重大。

客户服务和企业表单填写也是重要应用场景。现在的客服聊天机器人通常需要通过一系列问答来收集信息,比如你的订单号、问题类型、联系方式等等。这个过程对用户来说很繁琐,对企业来说也低效,因为经常需要后续跟进来补充缺失的信息。有了 AI Autocomplete,聊天机器人可以根据用户的初始问题,立即呈现所有相关字段,引导用户一次性提供完整信息。这既节省了用户时间,也降低了企业的运营成本。

我认为这项技术最具潜力的应用可能还没有被充分认识到。比如在教育领域,AI Autocomplete 可以帮助学生构建更好的学习查询,展示他们可能没想到的相关主题和角度。在医疗领域,它可以帮助患者更准确地描述症状,提供结构化的问诊表单。在法律、金融等专业服务领域,它可以帮助非专业人士更有效地表达需求,获取更精准的服务。这些场景的共同点是:专业性强、信息复杂、普通用户难以准确表达需求。AI Autocomplete 恰好可以弥合这个知识鸿沟。

自然语言广告的新时代

Hero 的 AI Autocomplete 不仅改变了用户体验,还开创了一种全新的广告模式。这让我感到特别兴奋,因为它解决了自然语言界面商业化的一个核心难题:如何在对话式交互中自然地融入广告,而不破坏用户体验?

传统的搜索广告模式是基于关键词和搜索结果的。你在 Google 搜索”咖啡机”,顶部会显示付费广告。这种模式在图形界面中运作良好,但在纯对话界面中却很难实现。你总不能让 AI 助手在回答问题的中途突然推销产品吧?那会让对话变得非常生硬和令人反感。

Hero 的方法则巧妙得多。在 AI Autocomplete 系统中,品牌可以通过三种方式出现:第一,类似 Google Ads,品牌可以付费成为决策过程中的优先建议选项。比如在订咖啡的例子中,Peet’s Coffee 可以付费让自己出现在品牌选择列表的前面。第二,品牌可以建议互补产品,添加到当前订单中。比如在你订咖啡时,建议搭配某款点心或咖啡杯。第三,品牌可以从更高的重复购买率中受益,因为在 AI Autocomplete 系统中,设置定期订单就像说”每个月”一样简单。

我认为这种广告模式的天才之处在于,它不是打断用户的决策过程,而是增强这个过程。当你在选择咖啡品牌时,看到各种选项本来就是决策的一部分,付费推广的品牌只是在这个自然的选择过程中获得了更显眼的位置。这和传统搜索广告的逻辑一致,但执行方式更自然、更不突兀。

Hero 目前正在与 AI 广告平台 Koah Labs 讨论合作,将这种新广告形式推向市场。我觉得如果这种模式成功,它可能会成为自然语言界面商业化的标准模式。想想看,未来所有 AI 助手、AI agent 和对话式应用都可能需要这样一种不破坏用户体验的广告模式。Hero 作为先行者,有机会定义这个新兴市场的规则。

更重要的是,这种广告模式对小企业也很友好。不像传统的品牌广告需要巨额投入,自然语言广告可以非常精准地针对特定需求。一家本地咖啡烘焙商可以选择在用户搜索”小批量手工烘焙咖啡”时出现,而不需要和星巴克竞争”咖啡”这样的大词。这种精准性和可负担性可能会让更多中小企业进入数字广告市场。

为增强现实铺路

AI Autocomplete 的诞生其实源于增强现实的需求,这是我觉得最有远见的部分。Hero 的联合创始人 Brad Kowalk 和 Seung Woo Lee 都曾在 Meta 工作,参与 AR 相关项目。离开 Meta 后,他们一直在思考 AR 大规模普及面临的一个核心问题:当 AR 设备的屏幕空间远小于智能手机时,如何让它同样有用?

这是一个很多人没有深入思考过的问题。我们习惯了智能手机的大屏幕、复杂菜单、多层导航。但 AR 眼镜不可能有那么大的显示空间,也不适合复杂的触摸操作。那么,如何在有限的界面上提供丰富的功能呢?

大公司的思路通常是将移动端的界面缩小,配合手势控制。但 Hero 认为这不是正确的方向。Kowalk 和 Lee 的洞察是:AR 设备需要的不是缩小版的图形界面,而是基于意图的交互系统。用户应该能够用自然语言表达意图,系统通过 AI Autocomplete 这样的技术引导用户提供必要信息,然后直接执行任务。整个过程不需要复杂的 UI,只需要清晰的参数呈现和简单的选择机制。

我觉得这个思路非常前瞻。它不是试图把现有的交互模式搬到新设备上,而是为新设备设计全新的交互范式。这种轻量级但强大的 AR 操作系统,可能会成为下一代计算平台的基础。就像触摸屏为智能手机带来的革命一样,基于意图的自然语言交互可能会为 AR 设备带来类似的变革。

Hero 三年前就开始申请这项技术的专利,说明他们很早就看到了这个方向。现在专利已经获批,技术已经成熟,时机也恰到好处。大语言模型的进步让自然语言理解变得可靠,AR 设备开始进入消费市场,用户对新交互方式的接受度也在提高。所有这些因素结合在一起,为 AI Autocomplete 这样的技术创造了完美的时间窗口。

虽然 Hero 现在主要在移动和 Web 应用中推广这项技术,但他们的长远目标显然是 AR。这也解释了为什么他们选择以 SDK 的形式开放技术,而不是只在自己的应用中使用。他们希望建立一个标准,一个未来 AR 交互的基础协议。如果成功,Hero 可能不只是一家应用公司,而是下一代计算平台的基础设施提供者。

SDK 策略的深远意义

Hero 选择以 SDK 形式开放 AI Autocomplete 技术,这是一个非常聪明的战略决策。CTO Seung Woo Lee 解释说:”我们三年前就意识到,AI agent 的瓶颈不会是 AI 浏览互联网和完成任务的能力,而是用户知道该说什么的能力。所以,我们不是再造一个玩’十个问题’游戏的聊天界面,而是推出一个让用户能一次性完成任何多步骤动作的系统。我们相信我们的技术有能力增强今天所有使用自然语言输入的产品。”

这段话揭示了他们的雄心:不是造一个更好的聊天机器人,而是改变整个行业的交互方式。这就需要让其他公司也能使用这项技术,而不是把它封闭在自己的应用中。从商业角度看,这是一个高风险高回报的策略。风险在于,开放技术意味着竞争对手也能使用,可能会削弱自己的差异化优势。回报在于,如果技术被广泛采用,Hero 就能成为这个新交互范式的标准制定者和基础设施提供者。

我认为这个选择体现了创始团队的格局。他们在 Meta 工作过,见识过平台级技术的威力。他们知道,真正改变世界的不是一个优秀的应用,而是一个被广泛采用的标准。就像 HTTP 协议定义了网页浏览,触摸屏定义了智能手机交互,AI Autocomplete 有潜力定义自然语言交互的标准。

SDK 策略还有助于快速验证技术价值和收集反馈。通过让不同行业、不同应用场景的公司使用这项技术,Hero 可以快速发现技术的优势和局限,找到最有价值的应用场景,并根据实际使用情况不断改进。这比自己闷头做一个应用要高效得多。

从生态系统角度看,SDK 策略有助于建立网络效应。使用 Hero AI Autocomplete 的应用越多,用户就越熟悉这种交互方式。用户越熟悉,新应用采用这种交互方式的价值就越大。这种正反馈循环一旦启动,会形成很强的护城河。就像用户习惯了触摸屏之后,任何新的移动设备都必须支持触摸,未来用户习惯了 AI Autocomplete 之后,任何新的自然语言应用可能都需要支持这种交互方式。

这对整个 AI 行业意味着什么

Hero 的 AI Autocomplete 让我重新思考了当前 AI 交互的发展方向。整个行业似乎都在朝着”更自然的对话”这个方向努力,让 AI 更像人类一样交流。但 Hero 提出了一个反直觉的观点:也许最好的交互方式不是完全模拟人类对话,而是结合对话的自然性和表单的结构性。

人类之间的对话之所以高效,是因为双方共享大量背景知识和语境。你和朋友聊天时,可以用很简短的话表达复杂意思,因为你们互相了解。但人和 AI 的对话不一样,AI 不知道你的偏好、习惯和当前情境。如果完全模拟人类对话,就会导致大量不必要的来回确认。

Hero 的方法是承认这个差异,利用 AI 的优势来弥补。AI 可以快速分析任务结构,预测所需信息,实时更新界面。这些都是人类做不到的。通过展示结构化的参数,AI Autocomplete 实际上是在利用机器的优势,而不是试图完全模仿人类。

我认为这种思路会影响整个 AI 产品设计领域。未来我们可能会看到更多混合式交互:既有自然语言的灵活性,又有结构化界面的清晰性。这不是倒退到传统 GUI,而是在更高层次上综合了两种交互方式的优点。

从技术架构角度看,AI Autocomplete 也提出了新的要求。它需要 AI 模型不仅能理解用户意图,还要能预测任务结构和参数需求。这可能会推动一类新的 AI 模型发展,专门用于任务分解和参数预测。Hero 提到他们使用了一系列模型来预测用户可能输入的内容,说明这不是单一模型能解决的问题,而需要专门的技术栈。

对于正在开发 AI 产品的团队来说,Hero 的成功提供了重要启示:不要只关注 AI 的智能程度,还要关注交互设计。最聪明的 AI 如果交互方式糟糕,用户体验也会很差。反过来,即使 AI 能力有限,如果交互设计得当,也能提供很好的用户体验。Hero 的技术本质上是通过更好的交互设计,最大化了现有 AI 能力的价值。

我也在思考这项技术可能的局限性。它适合参数化的、结构化的任务,但对于真正开放式的、需要创造性的对话可能不太适用。比如你和 AI 讨论一个哲学问题,或者寻求情感支持,这种场景下强行展示参数就会显得生硬。所以 AI Autocomplete 可能不会取代所有类型的 AI 交互,而是在特定场景下提供更优选择。

另一个值得关注的是隐私和数据安全。AI Autocomplete 需要理解任务结构和预测用户需求,这意味着它需要访问相当多的上下文信息。如何在提供个性化服务和保护用户隐私之间找到平衡,将是这类技术普及过程中必须解决的问题。

我对 Hero 未来的期待

Hero 目前正在自己的助手应用中测试这项技术,计划在几个月内向用户发布。他们重点展示的功能是帮助用户通过自动补全提示词找到会议时间或和朋友见面的时间。这是一个很实用的场景,也是一个很好的切入点。安排会议往往需要考虑多个人的时间、地点偏好、会议时长等因素,用自然语言描述清楚并不容易。有了 AI Autocomplete,这个过程会简化很多。

但我更期待看到 Hero 在更广泛场景中的应用。比如在旅行规划、购物、客户服务等领域,AI Autocomplete 的价值可能更加明显。Hero 的 SDK 策略意味着我们不需要等 Hero 自己去开发所有应用场景,而是会看到各行各业的公司将这项技术集成到自己的产品中。

从融资角度看,Hero 去年获得了 400 万美元种子轮,现在又获得了 Forerunner Ventures 领投的 300 万美元追加投资。Kowalk 表示,根据应用和 SDK 的增长情况,他们计划在未来几个月筹集更大一轮融资。我认为如果 SDK 能够吸引到一批有影响力的客户,证明技术价值,那么 A 轮融资应该不成问题。这项技术的潜在市场非常大,任何使用自然语言输入的应用都可能是潜在客户。

我也在想,Hero 会不会成为下一个 Twilio 或 Stripe 那样的基础设施公司?Twilio 让每个应用都能方便地集成短信和电话功能,Stripe 让每个应用都能方便地接入支付。Hero 有潜力让每个应用都能方便地提供优秀的自然语言交互体验。如果真的走到这一步,Hero 的价值将远超一个普通的应用公司。

但挑战也是存在的。技术再好,也需要市场教育和生态建设。开发者需要理解这项技术的价值,学会如何集成和使用。用户需要适应这种新的交互方式,培养新的使用习惯。这些都需要时间和持续投入。Hero 团队有 Meta 的背景,应该对这些挑战有充分认识。

我特别欣赏 Hero 团队的一点是,他们在三年前就开始布局这个方向,提前申请了专利。这种前瞻性在快速变化的 AI 领域特别难得。很多公司都在追逐最新的热点,而 Hero 则在思考更根本的问题:人机交互的本质是什么?未来的交互应该是什么样子?这种长期思维是真正有影响力的公司的特质。

最后,我想说的是,Hero 的 AI Autocomplete 提醒我们,AI 革命不只是关于更强大的模型,也关于更好的交互设计。技术进步和设计创新同样重要,甚至在某些场景下,好的设计比更强的模型更有价值。这也是为什么我对 Hero 的未来充满期待。他们不是在和其他公司比谁的模型更强,而是在重新定义人机交互的方式。这种创新往往更持久,也更有影响力。

我相信,几年后回头看,我们会惊讶地发现自己曾经需要花那么多时间和 AI 来回对话,就像我们现在回想起曾经需要记住各种命令行指令一样。AI Autocomplete 可能就是推动这个转变的关键技术之一。‍

转载:人人都是产品经理

 

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

 

image.png

表单设计:基于选择的输入

清阳 设计思维

兰亭妙微UI设计公司分享:在设计学校文艺汇演报名表单时,如何有效地实现基于选择的输入?本文探讨了隐藏非活动选项与显示非活动选项的设计方案,分析了页面级选项、水平Tab、垂直选项等多种形式的优劣及适用场景。

 

进入正题之前,大家可以先思考一下,以下情形大家会怎么做?

学校组织文艺汇演,老师、学生、家长可以任意组队报名表演节目。组队后,每个队伍都需要在学校教务系统上录入信息进行报名。

假如你是教务系统的设计师,你会怎么设计这个报名表单?

一、什么是基于选择的输入

在上述案例中,对于“参与人员”这个信息,首先需要确定有哪几类人参加?其次再具体录入每一类的具体人员名称。比如:“三年5班队”表演的节目有40个人参加,其中只有老师和学生参加,那么老师分别是哪几位?学生又是哪几位?

那么根据对初始问题“有哪几类人参加?”的回答,要求继续回答“这几个人分别是谁?”,就是基于选择的输入。

组成部分

基于选择的输入内容大体上可以分为两个部分:初始的选择、选择之后需要输入的内容,如下所示。

表单中基于选择的输入类型可选择的交互形式有很多种,那么在需求过程中,如何选择最适合的方式去进行设计?

二、基于选择的输入设计方案

表单基于选择的输入场景在B端产品中尤为多见。由于B端产品多为Web端,所以下列分析暂不考虑移动端的情况。

如果把基于选中的内容需要输入的选项称为活动的选项,那大致可分为两大类:隐藏非活动的选项、显示非活动的选项。以上三个案例均为隐藏非活动的选项类型。

1.显示非活动的选项

显示所有未被选中选择的选择输入内容,会导致表单中出现大量无需用户处理的内容。除非用户需要这部分信息去辅助判断选择选项,否则不建议使用此类方法。

2.隐藏非活动的选项

大部分设计方式都会通过隐藏非活动的选项,来降低输入过程中无效信息对用户的干扰。具体如何处理初始的选择和活动选项之间的关系,又可以分为以下几类:页面级选项、水平Tab、垂直选项、下拉选择、单选按钮下方显示、单选按钮内显示。

(1)页面级选项

把过程明确分为两步,这可能是解决表单中选择性输入问题最简单的方法。最常见的做法是采用不同的步骤进行表单内容的填写,如下:

对多数用户而言,初始选择和相关输入之间的关系明确,但一旦做出初始的选择,两者之间的联系会变得微弱。在第二步进行相关输入时,无法查看先前进行的初始选择。看上去这种方案比在当前页面完成所有输入任务的方式更慢。

但在实际测试中,通过该方案设计的表单,用户填写错误比较少,眼动测试参数表现也比较好(主要是眼睛固定的次数、总固定时长以及平均固定时长)。

(2)水平Tab

通过Tab的形式进行初始选择的区分,用户可以浏览表单的Tab,进入对应的Tab中进行选择输入的部分。例如:飞书的登录页。

Tab不仅作为一组筛选功能,还对选择之后输入的内容起到一个明显标题的作用。但大部分人都熟悉Tab作为导航的概念,对于Tab在表单中的应用可能会存在一定的歧义。比如Tab之间是否互斥?提交选择是针对表单中所有Tab还是当前选中的Tab?

对比以上两种设计形式,如果只从结果考虑用户的使用情况,水平Tab在测试过程中基本没有用户出错,并且可以快速完成任务。但根据页面级选项案例的眼动测试数据中会发现,用户浏览整个表单相比上面的方案所需要耗费更多的努力。

(3)垂直选项

从水平Tab方案中表现出来的眼动测试结果可以发现,其不符合用户自上而下的阅读模式。而垂直选项的方案则弥补了这一缺陷。如下图所示。

在选择选项之后,眼睛不需要做太多的移动,设计更有效率,如下方案例眼动数据所示。

(4)下拉选项

相比水平Tab和垂直选项,下拉选项在视觉上没那么独特。每一个选项对应一个初始选项,如下图所示。

下拉选项的解决方案利用选择后,输入的内容在下方特定的位置进行展示。所选选项可作为标题,更好的传达初始选项的范围和影响(看具体业务是否需要在表单中映射这个关系),上方案例中的映射关系就比较弱。

(5)单选按钮下方显示

展示所有选项,根据用户选择情况在下方显示具体需要选择输入的内容,如下图所示。

(6)单选按钮内显示

与单选按钮下方显示的办法类似,在初始选项内显示额外的输入内容。

三 、各方案的优劣及适用场景

四、写在最后

基于选择的输入,在设计方案的选择中,需要考虑各个方面。

如果每个初始选项的额外输入选项数量很多,且同时存在其他需录入的信息时,那么页面级选项可能是最佳方案。虽然需要两个网页来拆分表单,但至少不会让用户产生困惑,也无需怀疑选项之间是否互斥。

垂直选项和水平Tab两个方案需要通过交互设计或者视觉设计来规避其互斥问题。

如果初始选项列表较长(4或者5个以上),并且每个选项都自带一套基于选择的输入,在设计时最好能针对额外选项采用下拉列表和视觉分组。

如果每个初始选项只有几个额外的输入选项,单选按钮下方显示或者单选按钮内显示是最佳的方案。但容易出现因选项切换而造成的页面跳动问题。

就整体而言,隐藏无关的输入项,可以减轻用户对表单的负担,帮助用户更快的完成表单内容。

最好能清晰的显示选项与基于选择的输入项之间的关系。

转载:人人都是产品经理

 

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

 

image.png

2026 年必关注的 8 大 UX/UI 设计新趋势

清阳 行业趋势

设计师真正迎来了站上行业主角位的黄金时代。我们终于跳出只纠结产品颜值与基础易用性的固有框架,回归设计本质 —— 用心洞察用户界面使用感知,自主构建产品体验、主导产品商业价值落地。
 
兰亭妙微ui设计公司始终坚信:每一次行业效率的飞跃,都源于新工具的诞生与普及。当下设计行业亦是如此,率先吃透 AI 设计工具的从业者,早已切身感受到技术带来的效率革新,同时也直面着行业变革带来的挑战。
 
当下设计师更需要跳出专业工具的舒适圈,主动涉猎跨领域工具,打破能力边界,重新定位 AI 时代设计师的核心价值。
 
随着 AI 技术深度赋能设计赛道,设计迭代效率大幅提速,视觉表现力实现质的飞跃,既能瞬间抓取用户注意力,也让产品视觉层次更丰富、交互逻辑更流畅、触控反馈更具真实质感。AI 普惠设计能力,也让超级个体成为设计圈热词。
 
如今的 AI,早已进阶为设计师具备深度洞察力的智能伙伴。任务自动化只是初级形态,现阶段 AI 已具备情绪、场景、用户意图理解能力,未来更将为用户打造高度个性化、自然无感的沉浸式体验。
 
即便 AI 工具能实现超乎想象的设计效果,但最终呈现上限,始终受制于使用者的认知格局与审美素养。
 
下面为大家拆解 2026 年 8 大 UX/UI 核心设计新趋势,也是当下留住用户、打造深度体验的核心方法论。
 

2026 UX/UI 设计趋势总览

 
AI 重构设计师角色,从视觉美化转向情感共鸣 + 商业主导;依托 AI 技术打造自然个性化沉浸式体验,八大趋势涵盖:
 
  1. 触觉极致主义:打造柔软治愈感界面,聚焦数字纹理拟物按压反馈
  2. 科幻赛博渐变:暗黑未来风,深色模式叠加霓虹全息潮流配色
  3. 交互叙事卷轴:滚动即叙事,页面元素随滑动动态演绎沉浸式体验
  4. 动态字体排版:文字承载情绪,随滚动形变演绎情感表达
  5. 便当网格 2.0:模块化有序排布,实现「有序的混乱」视觉美感
  6. 涂鸦与人为瑕疵:融入手绘随性质感,用不完美营造真实烟火气
  7. AI 智能角色适配:读懂用户心境,界面氛围随情绪场景实时切换
  8. 沉浸式 3D 购物:虚拟交互赋能,3D 模型预览 + 虚拟空间实景体验
 

一、触觉极致主义:打造柔软拟物的治愈界面

image.png

扁平化极简设计热潮逐渐褪去,2026 年 UI 设计将数字纹理作为核心发力点。
 
行业将涌现大量果冻、黏土、合金质感的拟物化按钮,不再局限于单一点击交互,按压后可实现物理级挤压、回弹动态反馈,高度还原现实触感。
 
设计风格:高光泽 3D 视觉、充气软糯质感图标,拟物化肌理复刻现实材质
 
典型案例:Blinkit 节日专属图标,Q 弹通透的视觉质感,仿佛可直接从屏幕中触摸拿捏。
 

二、动态字体排版:让文字成为情绪载体

image.png

静态文字已无法满足当下体验需求,2026 年动态字体成为设计标配:页面标题可随屏幕滚动实现扭曲、弹跳、消融等动态效果,以文字形态传递情绪,让文字不止于信息表达。
 
设计风格:适配拇指滑动操作,文字动态响应交互,灵动有温度
 
典型案例:CRED 率先落地动态字体设计,Zomato 等热门 APP 相继跟进,应用在订单追踪等场景,让信息展示更活泼生动。
 

三、便当网格 2.0:模块化布局,有序的视觉美学

image.png

苹果将在 2026 年前持续完善并普及便当网格设计风格。
 
以平滑圆角矩形卡片为基础,模块化组合各类内容,适配当代用户碎片化、短时注意力浏览习惯,兼顾整洁性与视觉层次感。
 
设计风格:模块化排布、简约耐看、信息层级清晰,兼具美感与实用性
 
典型案例:Myntra FWD 摒弃传统单调产品列表,依托便当网格打造产品情绪板,视觉呈现高级且浏览体验极佳。
 

四、AI 智能角色主导:千人千面的情绪化定制设计

image.png

标准化通用 UI 设计已成过去,2026 年产品界面将随用户状态自适应变化:用户高效办公时段,界面自动切换简约清爽模式;夜间休闲、情绪亢奋时,一键切换霓虹渐变潮流风格。
 
设计风格:情绪感知、场景适配、高度定制化,读懂用户潜在需求
 
典型案例:印度版 Spotify 小众精选板块已落地试用,平台整体界面布局、色彩风格均可根据用户实时情绪自动适配切换。
 

五、科幻赛博渐变:暗黑未来感潮流配色

image.png

淡雅柔和配色逐渐退场,赛博朋克风成为 2026 年主流视觉趋势。
 
以纯黑深色模式为基底,叠加霓虹电光色、日落珊瑚色、全息银色等高饱和撞色,打造极具冲击力的暗黑未来感,适配年轻用户审美偏好。
 
设计风格:深色基调为主,霓虹光影叠加,复古未来感拉满
 
典型案例:Pocket FM、Jar 等平台大量运用赛博霓虹光影元素,精准吸引年轻夜间用户群体。
 

六、交互叙事卷轴:滑动即观影,沉浸式叙事体验

image.png

区别于普通页面滑动,卷轴叙事是全新的交互叙事形式:用户滑动屏幕时,页面元素自动渐入、变色、形变,无需额外操作,仅凭拇指滑动即可体验沉浸式故事感,如同掌上动态影片。
 
设计风格:沉浸式场景演绎,虚拟开箱感拉满,交互代入感极强
 
典型案例:Tata Neu 新品发布页面采用滚动叙事设计,为用户打造全虚拟沉浸式开箱体验。
 

七、涂鸦与人为瑕疵:褪去完美,回归真实质朴

image.png

AI 打造的极致规整设计大行其道时,随性不完美的真实质感反而更具温度。
 
手绘涂鸦、随性下划线、丑萌趣味贴纸等元素广泛应用,刻意保留人为设计瑕疵,摆脱工业设计的刻板感,拉近品牌与用户距离。
 
设计风格:质朴接地气、随性手绘感、小众个性,自带生活化烟火气
 
典型案例:Cult Fit 旗下 Curo 品牌 UI 设计,以涂鸦和随性瑕疵元素塑造古怪鲜活的品牌人设,像个性十足的亲密好友。
 

八、沉浸式 3D 购物:打破平面局限,虚拟实景消费

image.png

2026 年 3D 产品预览设计再度爆发,彻底打破传统平面商品展示模式。用户可 360° 实时旋转产品模型,放大查看材质、细节;更可通过虚拟技术,实现虚拟试衣、实景家装预览等体验。
 
设计风格:可交互实时 3D 模型,虚拟空间沉浸式漫游,所见即所得
 
典型案例:Pepperfry 等平台上线 3D 虚拟体验功能,支持用户虚拟进入居家空间、实景预览商品搭配效果。
 

设计趋势总结

 
未来,数字设计不再只是产品体验的附属支撑,设计本身就是核心体验
 
AI 时代下,用户对产品的期待,早已超越基础功能与视觉美观,更追求情绪响应、个性化适配与情感共鸣。而平衡用户个性需求与产品商业定位,将成为每一位产品设计师的核心必备能力。
 
转载:优设
 

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

 

image.png

兰亭妙微UI设计公司,深度拆解飞书聊天窗口

清阳 交互设计及用户体验

一、前言

今天兰亭妙微UI设计公司将带大家沉浸式拆解飞书聊天窗口的产品设计与交互逻辑,深挖隐藏在日常使用里的设计巧思与办公效率底层逻辑,不管是 UI / 交互设计师、产品从业者,还是职场办公人,都能从中收获实用洞察。如果你觉得内容有价值,欢迎转发分享!
 

二、飞书品牌定位

 
飞书是字节跳动旗下新一代一体化企业协作平台,2016 年正式诞生。平台秉持All-in-One产品理念,将即时通讯、日历、在线文档、云盘、OKR、流程审批等核心能力深度融合,跳出传统办公工具的单一功能局限。
 
不同于普通即时通讯软件,飞书以沟通为核心,打造一站式工作操作系统,打破企业信息孤岛,从底层重构团队协作模式,让办公沟通、业务推进更高效流畅。
 

三、飞书聊天窗口八大核心设计亮点

image.png

亮点一:多维沉浸协作|会话界面变身微型协作工作台

 
飞书彻底打破传统 IM 聊天窗口的功能边界,在会话顶部嵌入自定义标签页,把普通对话框升级为轻量化协作工作台。用户无需跳转 APP、切换页面,在聊天上下文内就能快速切换云文档、多维表格、网页链接、核心任务,实现信息流与任务流无缝衔接
 

设计优势

 
  1. 工作流横向集成:除默认消息、文件标签外,支持自定义添加云文档、多维表格、第三方网页为常驻标签,让聊天不再是孤立沟通,直接绑定办公生产力工具。
  2. 个性化自由配置:标签页支持自由排序、自定义命名、置顶 Pin 收藏,可按项目优先级排布核心资源,打造贴合个人使用习惯的操作路径。
 

体验洞察

 
作为使用飞书 3 年的用户,此前一直把它当作普通沟通工具,直到深度拆解才发现标签页自定义功能的强大。
 
传统办公软件将聊天沟通与文档、任务割裂,用户频繁跨应用跳转,效率大打折扣。而飞书把核心生产力资产直接聚合在会话层,精准契合 B 端办公沟通围绕具体目标展开的协作本质,用减少操作跨度的设计,直接提升团队办公生产力。
 
对比企业微信传统聊天模式(复刻微信基础聊天逻辑),飞书的设计优势尤为突出。同时该功能完美践行渐进式披露自我决定理论:不向普通用户堆砌复杂功能,将高阶协作能力隐藏在标签切换中;赋予用户自主配置权限,满足使用掌控感与个性化需求。
 
知识科普
 
  1. 渐进式披露:按需展示高阶复杂功能,不一次性堆砌全部信息,降低用户认知负荷,适配新手渐进学习。
  2. 自我决定理论:产品设计满足用户自主性、胜任感、归属感三大心理需求,提升使用意愿与粘性。
 
 

亮点二:全维度即时触达|多模态通讯一站式整合

image.png

飞书在聊天窗口顶部搭建全场景通讯矩阵,将语音通话、视频会议、运营商电话深度整合为统一入口。除基础文字沟通外,全覆盖语音、视频、离线电话三大沟通形式,且音视频通话支持模式自由切换、临时拉人建会,内置屏幕共享、录制纪要、倒计时、直播等工具,重构职场沟通体验。
 

设计优势

 
  1. 通话模式无缝切换:语音、视频通话可一键互切,无需中断会话进程,适配不同沟通场景需求。
  2. 实时会议动态扩张:单聊通话中可随时添加成员,点对点沟通秒升多人群组会议,快速解决复杂协作问题。
  3. 原生协作工具箱:音视频窗口内置屏幕共享、妙记录制、会议倒计时、直播等进阶功能,通讯界面直接变身办公协作工作台。
  4. 全渠道兜底触达:兼顾网络音视频与运营商电话,网络卡顿、好友离线时,仍能保障重要业务沟通畅通。
  5. 会议轨迹自动沉淀:通话时长、录制纪要、参会人员信息自动同步至聊天记录,形成完整协作轨迹,方便后续复盘溯源。
 

体验洞察

 
深度使用飞书协作后,才读懂专业办公协作软件的核心价值。传统微信等社交软件存在明显痛点:单人通话拉新人需重建群聊,投屏共享要额外打开会议软件。
 
而飞书实现沟通即协作、语音即会议,从单纯的沟通媒介升级为全场景协作载体。同时将转瞬即逝的语音沟通,转化为可检索、可引用、可复盘的数字资产,彻底告别无效沟通。
 

亮点三:结构化信息检索|从大海捞针到精准资产调取

image.png

飞书聊天窗口的搜索,早已超越简单关键词检索,是一套精细化结构化过滤系统。将聊天记录拆解为消息、云文档、文件、图片 / 视频、链接五大维度,叠加发送人、时间范围双重筛选,海量碎片化信息可秒级精准定位,把低效试错式搜索,升级为确定性的办公资产调取。
 

设计优势

 
  1. 资产属性维度切片:搜索页按五大类型划分标签,贴合职场用户 “先定类型、再找内容” 的检索习惯。
  2. 多重嵌套精准筛选:支持分类下叠加发送人、时间范围过滤,可精准检索 “上周某同事发来的所有 PDF 文件”,快速缩小检索范围。
  3. 实时意图智能反馈:输入关键词实时高亮匹配内容,同步展示发送时间与上下文片段,无需点开详情即可确认信息有效性。
 

体验洞察

 
飞书搜索深度绑定会话上下文,完成了从文本检索到办公资产管理的思维跃迁。传统 IM 仅支持纯文字搜索,而飞书把聊天中的文档、链接、素材全部定义为数字资产,可按类型、时间、发送人多维筛选。
 
同时解决三大办公痛点:降低回忆成本,无需记忆信息格式;减少无效滑动,替代耗时的时间线翻找;强化内容资产属性,让聊天记录从一次性信息,变成可反复复用的工作素材。
 

亮点四:无界沟通中枢|跨语言实时翻译打破协作壁垒

image.png

实时翻译是飞书聊天窗口的惊喜级核心功能,彻底抹平国际化团队协作的语言鸿沟。内置翻译助手不仅支持接收消息自动翻译,更创新推出边写边译模式,把翻译从被动查阅升级为主动表达,无需借助第三方翻译工具,即可实现跨国团队无障碍原生对话。
 

设计优势

 
  1. 双向自动化翻译闭环:接收消息自动译、输入消息边写边译,全程以用户母语完成读写沟通,消除语言理解障碍。
  2. 轻量化微交互体验:输入框实时同步展示翻译结果,支持一键插入译文,输入中文即可生成地道外文表达,降低外语沟通焦虑。
  3. 自定义展示自由度:可自主选择仅显示译文、原文 + 译文对照两种模式,兼顾快速读信息、学习外语表达双重需求。
  4. 快捷入口低门槛设置:翻译功能常驻聊天窗口快捷入口,可一键切换英、日、泰等多语种,适配不同国别沟通对象。
 

体验洞察

 
飞书免费的实时翻译功能,完全可满足职场外语沟通、日常语言学习需求。既解决了跨国业务对接的语言痛点,也能在真实工作场景中积累外语表达,即便对接海外客户,也能从容沟通,彻底摆脱跨语言协作的表达焦虑。
 

亮点五:从聊天到创作|IM 输入框进化为富文本生产力工具

image.png

职场办公常需要发送长文、结构化文案,传统 IM 单行输入框无法满足排版需求。飞书创新实现输入框一键变身富文本编辑器,打破即时通讯碎片化表达局限,无需跳转文档页面,在聊天窗口内就能编辑排版长文,实现沟通与内容创作无缝衔接。
 

设计优势

 
  1. 输入形态自由切换:通过全屏扩展按钮,实现单行线性聊天输入与全屏面性文案编辑平滑切换,兼顾日常短句沟通与长篇逻辑创作。
  2. 移动端专业排版工具:扩展编辑界面内置加粗、序号列表、插图、文档引用等高频排版功能,把 PC 端文档编辑能力适配到手机端,随时随地处理复杂文案。
  3. 结构化内容原生渲染:消息流可直接展示标题层级、清单、多维表格卡片,重要信息在聊天记录中视觉突出,不易被闲聊信息淹没。
 

体验洞察

 
富文本编辑器完美解决 “发长文必须跳转文档” 的办公痛点,同时通过引导用户规范排版、突出重点,强制信息结构化,提升团队信息分发效率,让核心工作指令精准触达,不被碎片化闲聊覆盖。
 

亮点六:原子化工具矩阵|聊天窗口变身全能协作中心

image.png

飞书聊天窗口底部工具栏,是一套多元化原子化办公工具矩阵。除表情、图片、语音等基础社交功能外,深度嵌入任务创建、云文档、日程、定位、红包等生产力组件。沟通全流程可随时调取办公工具,实现所聊即所得,形成完整协作闭环。
 

设计优势

 
  1. 多模态消息无缝切换:工具栏聚合表情、图片、语音、红包等高频入口,丰富办公沟通的信息形式与情感表达。
  2. 生产力工具就近部署:任务、日历、Pin 标注等核心办公功能收纳在二级菜单,无需退出聊天窗口,即可快速分配任务、核对日程。
  3. 场景化交互降压设计:语音实时转文字、消息稍后处理、快捷标注等功能,适配多任务并行场景,缓解信息过载带来的职场焦虑。
 

体验洞察

 
传统 IM 工具栏以社交娱乐为核心,而飞书工具栏以工作任务为驱动。聊天框不再只是文字传输通道,更成为 OA 审批、任务管理、业务协作的统一分发入口。同时采用常用功能前置、小众功能收纳的设计,兼顾普通聊天的轻量化体验,与专业协作的高阶需求,实现双场景心流切换。
 

亮点七:会话直达执行|聊天一键发起会议、分配任务

image.png

飞书在聊天窗口菜单栏深度嵌入日程预约、任务创建核心入口,无需退出会话、无需切换会议 / 任务面板,聊天沟通的同时,就能即时发起线上会议、分配工作任务。
 
把临时沟通想法,一键转化为确定性工作行动,打通从实时对话到落地执行的全流程闭环。
 

设计优势

 
  1. 上下文智能带入:创建任务时自动同步当前聊天对象、对话核心内容,无需重复编辑信息,快速完成任务下发。
  2. 协作痕迹自动沉淀:会议妙记摘要、任务截止提醒、进度反馈,均以结构化卡片自动回填聊天记录,协作过程可追溯、可复盘。
 

体验洞察

 
飞书脱胎于字节跳动内部办公体系,深谙大厂高效协作的核心需求。它没有把会议、任务当作外置插件,而是作为 IM 原生内生能力,几秒内就能避免办公效率流失。看似普通的聊天窗口,实则是全能任务分发中枢,早已超越社交工具属性,成为线上数字办公室。
 

亮点八:极致结构化分发|消息从杂乱堆砌到有序看板

 
飞书在聊天窗口外围搭建精细化消息过滤体系,将杂乱的信息流拆解为未读、标记、单聊、群组、云文档、任务等多维度标签。把无序刷消息的低效模式,升级为精准定向的任务处理模式,让核心工作信息在海量闲聊中始终保持视觉焦点。
 

设计优势

 
  1. 多维度标签快速切换:消息列表顶部可滑动分类标签,一键隔离未读消息、任务通知、文档协同消息,实现信息精准分流。
  2. 重要信息独立沉淀:标记、Pin 置顶的关键消息独立成专属标签,长周期核心指令不会被新增消息淹没,随时可快速调取。
  3. 人、事场景精准剥离:按单聊、群组拆分消息看板,可按需选择一对一沟通、项目群跟进场景,降低认知切换成本。
  4. 资产消息独立汇总:云文档批注、任务进度等协同消息单独分发,无需翻阅聊天上下文,直接进入业务处理流程。
 

体验洞察

 
随着职场群组、联系人增多,消息信息熵增不可避免。飞书的标签分类本质是一套动态降噪系统,通过筛选切换,一键简化界面,只保留待办事项与核心工作信息,缓解信息焦虑,大幅提升办公专注力与消息处理效率。
 

四、全文总结与设计启发

 

1. 拆解聊天窗口的核心意义

 
使用飞书 3 年,一直习惯性把它当作普通聊天工具,直到深度拆解才发现:高频使用的聊天窗口,藏着整套高效办公的设计逻辑
 
多数人沿用传统 IM 使用习惯,仅用飞书发消息、聊日常,却忽略了它的核心定位。飞书将聊天窗口打造成协作工作台中枢,把文档、任务、会议、翻译、搜索等所有生产力能力收拢在同一界面。
 
沟通不再局限于信息往来,讨论、决策、分配任务、沉淀资料全流程闭环落地,重新定义了办公聊天窗口的价值边界。
 

2. 飞书聊天窗口的产品设计启发

 
飞书把以场景为中心的 B 端设计逻辑发挥到极致:不照搬 C 端社交产品逻辑,深度聚焦职场高频协作场景,以聊天沟通为主载体,自然串联文档、会议、任务、翻译等功能。
 
围绕 “当下讨论的工作内容” 主线,无缝推进后续落地动作,大幅降低应用切换成本与用户认知负担;同时完整沉淀团队协作轨迹,便于长期复盘、经验复用。
 
小小的聊天窗口,浓缩了飞书整体设计精华,既践行沟通即协作的品牌价值主张,也精准洞察真实办公痛点与用户底层需求,是 B 端产品交互设计与场景化落地的标杆案例。
 

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

 

image.png

兰亭妙微ui设计公司:来看看有效的改版设计思路!

清阳 移动端UI设计文章及欣赏

又到了分享界面改版优化的时候了,这次是近期C端学员做的体育场馆预约平台,主要用于在线预约羽毛球、网球、篮球等场馆。

下面是目前的设计图例:

image.png

 

学员作业

还是老规矩,我们从原设计的问题入手,然后逐步完成对它的改版优化。

问题分析:

问题的分析从不同维度入手,这里分享个最简单的分析方式,先从基础样式分析,再分析组件设计。

基础样式包含规范、字体、色彩、图片四个要素的分析,而组件设计则是检查样式的合理性为主。

一、基础样式分析

首先基础样式的规范应用上,顶部状态栏和底部指示器、导航是没有太大问题的,所以我们可以直接进入下一个环节。

在字体应用上,问题就多起来了,主要还是特殊标题使用太多,且广告中的标题也和下方 UI 元素标题没有拉开差距,看起来就很别扭。而且大粗黑字体使用过多,使得信息权重被分散掉,没有对比性。

image.png

 

有问题的部分截图

在色彩层面,蓝色虽然是主色,但是使用过于频繁,且其它色彩的应用数量也过多,画面充斥了让人眼花缭乱的色彩,尤其色彩多的情况下图片色彩也丰富,外加一系列渐变色块,让场面变得更“错综复杂”。

image.png

 

使用的色彩过多

最后图片应用上,主要问题出在广告图里,图例和文字排版看起来很有年代感,加上瓷片区内的素材用图,和整体主体的关联性并不好。这里着重强调, 3D 拟人类图片素材的使用最好局限在特定运营活动物料里,不要作为正式的 UI 元素进行引用,怎么做效果都不会好。

image.png

 

二、组件样式分析

接着分析组件样式,因为这次案例框架很简单,我们不用太多考虑组件排序依据还是产品问题,只需要每个组件孤立出来分析即可。

1 .首页顶部组件

主要问题就是广告图的设计,不符合当前应用的设计标准,字体用图排版都很简单。

image.png

 

2.快速入口组件

快速入口上下两排权重完全不同,虽然有大小的差异但依旧对比不够强烈,且色彩使用混乱。

image.png

 

3.瓷片区应用

两个页面都有瓷片区,布局过于接近,且没有实质性的内容全是装饰素材,非常影响点击欲望和观感。

image.png

 

4.常去场馆卡片

属于问题相对较小的模块,但标签的应用色彩不合理,而且标题也露不全,实际空间利用率没有必要的低。

image.png

 

5.列表卡片

列表卡片的主要问题还是和主色按钮有关,过于强调按钮的同时又要突出其它信息元素,就让卡片看起来非常聒噪,信息之间是会起冲突的。

image.png

 

6.底部导航

底部导航设计过于普通,且一般选项选中凸起只适合在首页选项中使用。中间添加按钮的尺寸过小,和两侧选项看起来不对齐,重心偏移。

image.png

 

以上就是对问题的简单总结,实际上改版就是围绕这些问题做出调整,你先分析得出问题,才能聚焦到具体设计的过程和细节。

三、开始界面优化

基础规范是整体,而我们设计过程中大多从细节出发,所以我们对优化的内容解释就要反过来从组件开始。

1.顶部模块设计

首先调整顶部模块的设计,优化图例,使用比较突出的字体标题和更有冲击力的配图,符合运动类应用的主基调。同时因为之前主色用太多,这次顶部直接不加主色类背景。

image.png

 

2.快速入口的设计

快速入口设计上使用两种图标体系,上方用偏扁平插画型的风格(素材示意),下方用面性图标风格,弱化它们的权重。同时第二个页面的快速入口使用摄影图型图标,避免一直出现不同风格的图标。

image.png

 

3.瓷片区设计

瓷片区做大就需要有内容展示,但这些主体值得展示的内容并不是太多且需要那么大空间,所以缩小尺寸不会让设计那么难处理,也让画面更精致一点。

image.png

 

4.其它模块设计

因为首页上方已经有很花哨的模块了,所以常去场馆就不应该再花哨下去,可以务实点的设计,不再用复杂的外边框套娃。

第二个页面其它模块相对简单,拼团功能又重要所以可以突出它用包边型的组件设计。

image.png

 

5.列表模块设计

两个页面下方的列表模块,都移除原来主色的按钮,只保留关键信息,让卡片视觉看起来更简约和谐一点。

image.png

 

6.底部导航栏设计

放大中间的按钮,同时优化第一个选项选中的设计,可以更突出(时间够就做LOGO进去了)更强调选中。

image.png

 

完成这些处理以后,最后合并起来可以整体再调整一番进行最终输出。我们可以看看下面改版前后的对比,你们可以自己感受是否有差异:

image.png

 

 

这是纯视觉方向的优化,在新手阶段,不要过度去使用色彩和字体,实现样式的落差要通过组件样式和图片、素材应用的差异来塑造。

转载:优设

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

 

image.png

《同样是切换组件,开关 / 单选按钮 / 复选框该用哪个?》

清阳 设计资源

做 UI/UX 设计,几乎天天都要和开关、复选框、单选按钮这三类切换组件打交道。但很多设计师经常用错场景,不仅打乱用户认知逻辑,还容易造成操作误解、交互失误。
 
苹果 HIG 人机界面指南,早已把这三者统一归为切换类基础组件,核心作用都是让用户在对立状态中做选择,靠差异化视觉区分选中 / 未选中。今天就从定义用法、结构规范、核心区别、避坑误区全方位拆解,兰亭妙微UI设计公司,帮你彻底搞懂什么时候该用哪一个。
 

一、全文核心速览

 
  1. 开关(Switch):单个独立功能开 / 关二元切换,操作立即生效,只适配单独设置项。
  2. 复选框(Checkbox):一组关联选项支持多选、可全不选,拥有全选、半选交互状态。
  3. 单选按钮(Radio):一组选项互斥唯一选择,有且只能选一个,选新自动取消旧选项。
  4. 选型原则:先看使用场景、再定语义逻辑,不凭颜值随意替换组件。
image.png

二、开关(Switch):单功能即时开 / 关

 

开关对标物理电灯开关,专门用于单个功能、单独设置的开启 / 关闭切换,用户能一眼直观看清当前生效状态。

image.png

1. 核心组成结构

 
  • 轨道(背景):手柄滑动路径,用色彩区分开启 / 关闭状态,直观展示激活与否;
  • 手柄:可点击、拖动的交互主体,可搭配对勾、圆圈等极简辅助图标;
  • 辅助图标(可选):强化状态识别,仅用二元对立、表意清晰的图标。
 

2. 设计与交互规范

image.png

  1. 辅助图标禁用模糊无正反属性的样式(如月亮、编辑图标),避免用户无法识别状态;
  2. 交互逻辑:点击切换立即生效,无需额外确认,可通过手柄微动效增加操作反馈;
  3. 文案搭配:必须外置功能标签,文字不内嵌在开关内,精简表述、降低用户识别成本。
 

3. 适用场景

image.png

通知权限、夜间模式、自动备份、消息推送等独立单一功能设置
 

三、复选框(Checkbox):关联选项自由多选

 
复选框定位同维度一组关联选项,支持单选、多选,也可以全部不选,是多选项场景的专属组件。
 

1. 核心组成结构

image.png

选择容器 + 选中标识图标,依靠勾选 / 未勾选的视觉差异,清晰呈现用户选择结果。
 

2. 设计与交互规范

image.png

  1. 长列表可增设全选父复选框,遵循行业标准交互:
    • 父框全选 → 所有子项自动勾选;
    • 父框取消 → 所有子项自动取消;
    • 子项部分勾选 → 父框显示半选状态,点击半选父框可一键全选。
     
  2. 一组关联多选项,优先用复选框,不堆砌独立开关:既体现选项关联性,又节省页面空间、排版更整洁。
 

3. 适用场景

 
兴趣爱好、功能权限勾选、服务协议同意、标签选择等可多选场景。
 

四、单选按钮(Radio Button):组内互斥唯一单选

 
核心属性强互斥、只能选一个,同组选项中选定新选项,自动取消原有选择,语义直白:必须且仅能选其一
 

1. 核心组成结构

image.png

选中 / 未选中状态图标 + 选项标签,通用视觉规范:实心圆点为选中、空心圆圈为未选中,识别度极高。
 

2. 设计与交互规范

image.png

  1. 坚守互斥单选逻辑,禁止修改为多选模式,不做布局重叠,避免颠覆用户固有认知;
  2. 选项过多、页面空间有限时,可用下拉菜单替代;但选项较少时优先单选按钮,无需展开、一眼看全,交互成本更低;
  3. 排版优先垂直排列,不建议水平排布:图标与标签对应更清晰、可读性更强,适配响应式布局更稳定,避免页面拥挤混乱。
 

3. 适用场景

image.png

出行舱位(经济舱 / 商务舱 / 头等舱)、性别选择、支付方式、版本类型等二选一 / 多选一互斥场景。
 

五、三者快速选型对照表

 
表格
 
 
 
组件 选择逻辑 核心特点 生效方式 最佳使用场景
开关 二元独立切换 单功能、无关联 操作立即生效 单独功能开启 / 关闭
复选框 可多选、可全不选 同组关联、支持全选半选 多为统一确认生效 关联选项批量勾选
单选按钮 互斥单选、必选其一 组内唯一、排他选择 选定即锁定选项 多选项只能选一个
 

六、高频误区答疑(设计师必避坑)

 

误区 1:二元切换,能用单选按钮代替开关吗?

image.png

坚决不建议
 
开关是单功能即时开 / 关,语义直白、状态一眼识别;单选按钮是组内选项排他选择,二者语义、交互逻辑完全不同。
 
替换使用会让用户疑惑是否有隐藏选项、不确定是否需要确认,违背使用习惯。
 

误区 2:把单选按钮改成多选,替代复选框?

image.png

绝对不行
 
单选按钮的用户固有认知就是「只能选一个」,强行改成多选,直接打破组件底层语义,造成严重认知混乱,极易选错、漏选,拉垮产品体验。
 

误区 3:多选场景,能用一堆开关代替复选框吗?

image.png

不推荐
 
  1. 语义差异:开关代表独立无关联功能,复选框代表同组关联选项,用开关表意模糊;
  2. 视觉与效率:开关占用空间更大,列表排版杂乱,复选框更精简整洁、交互效率更高;
  3. 场景适配:服务条款、权限勾选等场景,复选框的文案搭配更贴合用户选择意图。
 

七、总结

 
开关、复选框、单选按钮是 UI 最基础的底层组件,不要凭审美随意混用
 
设计牢记逻辑:先判场景→再定语义→匹配对应组件

image.png

部分系统特殊设计(如 iOS 深色模式用圆形复选框替代常规单选),多为品牌设计语言统一或特殊产品考量,切勿盲目照搬。吃透基础组件的可用性逻辑,才是做好 UI 交互设计的根本。
 

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

 

image.png

兰亭妙微分享:高手设计登录页的12种切入点

清阳

登录页不只是入口,更是认知与信任的第一触点。本文系统梳理12种登录页设计切入点,从色彩、构图到情绪表达,揭示如何通过界面设计实现用户引导、品牌传达与转化效率的协同优化,是一次关于“界面战略”的深度解析。

我们设计师是不是最害怕众口难调,今天兰亭妙微UI设计公司,跟大家分享登录页的12种设计切入点,相信总有一款会入甲方爸爸的心。

作为设计师,我们常常面临一个窘境:要面对各式各样客户审美的挑剔,有时候被虐的都怀疑人生。

但找参考时,思维又容易被局限在常见的几种形式里,我通过分析大量优秀的登录页,总结了12个高级的设计切入点,希望能为你打开新思路。

01 以纯色背景+品牌符号为出发点的登录页设计

设计解析:

  • 形式:两者都采用纯色作为底色,底色配几个跟系统主题相关的元素。
  • 色彩:上图的配色冷静、柔和,突出专业与宁静;下图则大胆使用高对比度色彩,充满能量与动感。
  • 构图:两者均采用经典的左右分割构图,这是登录页最稳健高效的布局之一。

02 以用户画像为出发点的登录页设计

设计解析:

  • 形式:两个都采用了扁平插画的表现形式,并且将产品的目标用户投射到页面上,产生强烈的身份认同感。
  • 色彩:上图采用高饱和度渐变背景,色彩大胆、鲜明,传递出年轻、潮流的品牌性格;下图色调冷静,应用场景比较普适。
  • 构图:两者均采用稳健的左右分割构图,它更像是一个价值宣言页面,极大地降低了新用户的认知门槛,提升了注册的意愿。

03 以场景沉浸为出发点的登录页设计

设计解析:

  • 形式:两个都通过高质量摄影图来营造独特氛围;上图传递大自然、自由等意象;下图则传递温馨、舒适、有温度的服务感。
  • 色彩:两者的色彩都源于背景图片本身,登录框的配色和背景融合的无比自然、舒适。
  • 构图:两者均采用全屏背景+中心卡片的经典构图,它通过真实的场景,绕过生硬的文字说明,直接与用户进行情感对话。

04 以人物放大展示的登录页设计

设计解析:

  • 形式:都使用了人物放大展示的表现手法,上图通过多位儿童看书传递阅读氛围;下图则通过虚拟角色传递潮流与个性。
  • 色彩:上图使用高饱和度的童话色彩,营造温馨、快乐的感受;下图采用灰色调搭配霓虹黄绿渐变,营造酷炫、动感的氛围。
  • 构图:两者均采用左右分割构图,但侧重点不同,上图插画重在营造氛围和讲述故事;下图则重在角色与表单平衡,突出个性。

05 以简约几何造型的登录页设计

设计解析:

  • 形式:均是几何造型为主的表现手法,上图采用冷紫渐变,传递出专业、稳定;下图采用暖黄渐变,散发出活力、乐观。
  • 色彩:色彩是这里唯一的变量,但效果截然不同,它完美验证了色彩在塑造品牌感知和影响用户情绪上的决定性作用。
  • 构图:两者都采用了清晰有力的左右分割构图,左侧是强有力的品牌口号,右侧是功能清晰的白底登录框。

06 高对比的登录页设计

设计解析:

  • 形式:都使用了风景摄影图,且都内嵌在一个异形容器里,打破了传统的方形容器造型,比较新颖。
  • 色彩:色彩运用非常克制且有目的性,左侧功能区使用无彩色,这种强对比确保了功能区域的操作清晰。
  • 构图:采用了最经典且不易出错的左右分割构图,左侧是纯功能性的白色表单区域,右侧是激发用户情感的场景化背景图。

07 以全屏插画风格的登录页设计

设计解析:

  • 形式:都采用全屏插画为核心视觉,上图使用色彩鲜明的城市插画,营造活力都市氛围,下图采用紫色调山林夜景,传递出神秘气质。
  • 色彩:色彩在这里是品牌情绪本身,这种设计强项在于通过视觉瞬间建立情感连接,让登录体验超越功能层面,成为一种品牌体验。
  • 构图:采用中心构图法,这种设计的视觉记忆点和品牌辨识度非常高,非常适合需要快速建立独特品牌形象的创新型产品。

08 打破边界方式的登录页设计

设计解析:

  • 形式:上下两个案例都巧用了打破造型边界的方式,每个页面元素都特意打破传统的容器边界,给人布局灵动的感觉。
  • 色彩:色彩都使用了低饱和度的色彩,给人高级、稳重、大气的感觉。
  • 构图:采用了经典的左右构图,打破边界的图形方向直指登录表单,极大地引导了用户完成注册和登录。

09 玻璃质感的登录页设计

设计解析:

  • 形式:这是最常见的B端登录页表现方式,设计师都喜欢用这种玻璃质感去表达产品内涵。
  • 色彩:色彩使用比较干净、轻盈,给人一种轻松、舒适的治愈感。
  • 构图:采用了经典的左右构图,打破边界的图形方向直指登录表单,极大引导了用户完成注册和登录。

10 以小范围2.5D插画的登录页设计

设计解析:

  • 形式:这是前几年非常流行的2.5D插画风格,通过一些2.5D元素的简单组合,精准的传递平台属性。
  • 色彩:两者都采用了蓝色主色调,但表达了不同的情感;上图的浅蓝色更具科技感;下图的深蓝色则更显沉稳、庄重。
  • 构图:两者均采用最经典、易用的左右分割构图,确保功能表单区域的清晰可读。

11 强质感的蓝色科技登录页设计

设计解析:

  • 形式:两个案例都运用具象的形式将抽象的业务进行了很好的展示,科技感满满。
  • 色彩:主色调采用体现科技感的深蓝/黑色,关键元素则使用亮蓝色和橙色作为点缀,打破了深色的沉闷,创造了视觉焦点。
  • 构图:两者都采用中心聚焦式构图,将最具科技感的可视化元素置于画面中央,登录框作为功能面板悬浮其上。

12 以安全信任、金融科技为出发点的登录页设计

设计解析:

  • 形式:两个案例都通过核心视觉符号高效传达了产品属性,质感比较强烈。
  • 色彩:深蓝色电路板背景营造出科技氛围,金色则提升了页面的品质感,发光效果和悬浮质感增强了元素的现代感和数字感。
  • 构图:左右构图营造出严谨、平衡、可信赖的感受,登录面板位于黄金视觉区域,确保了功能优先级。

总结

通过以上12个案例的系统性拆解,我们发现B端登录页的设计可以有如此丰富的切入点。

它绝不仅仅是摆放表单的简单任务,而是一个融合了品牌战略、用户体验、视觉营销和技术表达的综合性设计挑战。

希望这10个切入点的详细分析,能成为您应对登录页设计挑战的灵感源泉和实用工具箱。

一个高级的设计,其最高境界是让用户感觉不到“设计”的存在,却能高效、愉悦地完成目标,并对品牌留下积极而深刻的印象。

转载:人人都是产品经理

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

 

image.png

日历

链接

个人资料

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

存档