首页

设计如何为用户「节省时间」?兰亭妙微UI设计公司总结了这 5 个高效方法

清阳

在交互设计里,帮用户省时间是提升体验与留存的核心逻辑。好的设计不是让用户多操作,而是用最少步骤、最低成本完成目标。结合主流产品实战案例,兰亭妙微ui设计公司,整理出 5 个最实用的省时设计方法,直接可落地。

一、高效信息抓取:让系统替用户 “读” 与 “填”

 

主动抓取关键信息,减少用户手动查找、输入、核对的成本。
 
  • 钉钉代办:自动识别文本中的时间,一键完成日程设置

    image.png

  • 微信图片文字识别:指尖滑动即可选中、复制、转发,告别手动打字

    image.png

  • 闲鱼 × 淘宝:订单数据互通,一键同步已购商品,自动给出估价

    image.png

  • 支付宝绑卡:拍照识别卡号与开户行,免去逐位输入

    image.png

 
核心思路:把信息提取权交给系统,用户只做确认
 

 

二、避免重复阅读与操作:跳过无效流程

 
用户最烦重复看、重复点,设计要记住用户状态,直接定位到 “未完成”。
 
  • 爱奇艺剧集:一键跳过片头,支持整剧默认跳过

    image.png

  • 微信朋友圈:重返时一键 “跳到未看位置”,不重复浏览

    image.png

  • 微信群未读:标记未读条数,点击直达最新消息位置

    image.png

 
核心思路:记住用户进度,砍掉重复路径
 

 

三、降低出错概率:提前预判,减少返工

 
错误会大幅浪费时间,设计要前置规避,而不是事后补救。
 
  • 美团配送:恶劣天气先派单给骑手,再通知商家,避免无人配送

    image.png

  • 高德地图:提前预警拥堵路段,给用户决策时间

    image.png

  • 微信红包 / 转账:超时提醒,一键定位对应聊天,防止遗漏

    image.png

  • 美团单车:App 内关锁,杜绝忘锁、折返锁车

    image.png

     

 
核心思路:把问题消灭在发生前,降低用户试错成本
 

 

四、用选择代替输入:少打字、多点选

 
输入成本远高于选择,用预设、标签、快捷选项替代手动输入。
 
  • 饿了么备注:历史备注一键选用,不用重复编辑image.png
  • 携程拼音:姓名一键转拼音,多音字自动提供选项

    image.png

  • 京东评价:预设评价标签,快速完成评分

    image.png

  • 微信零钱通:“全部转入” 快捷按钮,不用输入金额

    image.png

 
核心思路:能选就不填,能默认就不手动
 

 

五、提供下一步路径:连贯操作,不用折返

 
完成当前动作后,直接给出下一场景入口,形成闭环体验。
 
  • 高德地图:查路线后,直接显示单车 / 地铁扫码入口
  • 支付宝出行:地铁支付成功,一键唤起网约车

    image.png

  • 蚂蚁森林:“找能量” 直达可收取好友界面,高效偷取

    image.png

  • 得到 / 大众点评:截屏自动弹出分享按钮,一步分享image.png
 
核心思路:预判用户下一步,把入口前置
 
转载:优设
 

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

 

image.png

兰亭妙微ui设计公司:6个产品细节剖析,看看高手是如何做设计的!

清阳

UI设计的精髓在细节,兰亭妙微(蓝蓝设计)作为深耕UI/UE领域16余年的专业团队,以专业实力成为行业标杆。本文聚焦其6个产品设计细节,拆解高手设计逻辑与实操方法,为UI从业者、产品人提供可借鉴的设计参考,解锁顶尖UI设计密码。
兰亭妙微ui设计公司:6个产品细节剖析,看看高手是如何做设计的!

一、闲鱼:AI发布提效

闲鱼发闲置功能接入AI,只需上传商品图片就可以直接生成描述文案,极大帮助用户简化发布流程

1. 零门槛发布,降低发布时间成本

解决非专业用户 “不会写文案、不懂专业术语” 的痛点,自动提取商品特征,组合成规范文案;相比传统发布流程的耗时编辑文案、核对信息,更高效快捷。

2. 优化内容,提升交易转化

自动生成符合当前市场热点的文案表述,更能多文风转换,一键转为趣味的 “抽象文学”“黛玉文学”等,提升内容点击率。

image.png

 

二、支付宝:广告位游戏化包装

支付宝的首页Banner通过游戏化的包装,快速吸引注意力,驱动用户主动点击探索,高效地为活动页面引流。

1. 互动机制强化用户参与感

采用悬念式互动设计,button以 “猜猜是什么” 这类问答形式,激发用户好奇心,通过游戏化场景的营造,降低参与门槛,驱动用户主动点击探索。

2. 场景氛围营造提升吸引力

在以功能入口为主的首页,该模块具有游戏化趣味性的氛围营造,从视觉上差异化的呈现,相比传统的静态广告位,更能有效抓住用户眼球,高效地为活动页面引流。

image.png

 

三、去哪儿:退票时挽留场景设计

当有中转单的用户在点击退票时,用挽留浮层及时给用户弹出更优的解决方案,并在方案中量化利益点,同时保证原有票的安全感。整体通过 “先抓痛点→再给解决方案→最后引导操作” 的路径,优化了用户出行体验。

1. 量化利益点

除了直达更方便之外,直达还有更省时间、金钱,保底票免费退等更多的利益点

2. 有兜底有安全感

用当前的中转作为保底,先抢票,抢到了还能再退票。让用户安心下单,在未抢到心仪票的时候能有中转的替补票,可以缓解用户的焦虑情绪,有兜底的保障安全感

image.png

 

四、疗愈类App Endel:引导充值会员的动画

通过一个巧妙的互动行为“摇动手机”,降低用户对会员充值广告的反感。

1. 提升用户参与感与趣味性

“摇一摇”互动将被动观看广告转变为主动参与,用户通过简单的物理动作即可触发折扣,这种即时反馈机制增强了趣味性,降低了传统广告的侵入感。

2. 降低付费决策的心理门槛

通过互动行为展示折扣,巧妙地将付费流程包装成一种“奖励”而非强制推销。用户感受到的是“主动获取优惠”的成就感,而非被广告打扰的抵触情绪,从而更愿意接受付费选项。

image.png

五、小宇宙:创新列表设计

通过拟物化的卡牌堆叠形态,将传统的平面信息流转变为具有空间纵深感和探索趣味的交互式叙事焦点

1. 视觉层次突破传统束缚

通过卡片堆叠、倾斜,在二维屏幕上创造出三维空间感。不对称的布局打破了传统设计的呆板,赋予界面动感与活力,能有效抓住用户视线,对抗“横幅盲视效应”

2. 建立拟物化的趣味交互

模拟物理世界卡牌的操作体验,配合流畅的滑动动画,让用户产生"翻阅卡片"的愉悦感,这种情感化设计能显著提升用户的操作满足感和停留时长

3. 内容暗示激发探索行为

堆叠效果露出部分内容作为预览,能有效刺激用户的好奇心,主动进行滑动探索,提升内容消费深度

image.png

 

六、QQ音乐:个人中心下拉触发金币中心

该设计通过 “贴合用户习惯的交互 + 强引导 + 积分激励” 的组合策略,实现签到转化与用户留存

1. 交互设计贴合用户固有习惯

采用下拉触发模式,无需额外学习成本,降低用户参与签到的操作门槛,提升即时转化效率

2. 视觉设计强化引导与目标感知

以金币掉落清晰的视觉元素突出金币中心入口,让用户快速捕捉核心功能,减少寻找成本,缩短 “看到 - 参与” 的路径

3. 激励设计构建留存闭环

用 “金币” 作为即时激励,满足用户即时反馈的心理需求,驱动次日复访,同时联动积分体系,将单次签到转化为长期行为

image.png

最后要说的话

本期的设计分享就到这里啦。

文章中的案例与思考来自于UED同学的日常分享。

后续我们将持续深度体验产品,挖掘更多值得分享、学习的设计案例。努力将其中的方法理论应用到后续的产品设计中。

愿我们的努力为你带来更好的体验。下次见。

转载:优设

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

 

image.png

兰亭妙微ui设计公司带您了解筛选功能设计

清阳

前言

 
“少即是多” 是设计的常用理念,但产品简化到一定程度,必然会出现不可简化的复杂性
 
诺曼曾说:复杂是世界的一部分,但它不应该令人困惑
 
筛选控件,就是让用户自主管理复杂信息的核心工具 —— 只要符合用户行为,合理的复杂反而会被用户接受。
 
兰亭妙微UI设计公司从类型、场景、维度、准则五个维度,完整拆解移动端筛选设计,帮你快速选对、用好筛选控件。
 

 

一、先搞懂:筛选是什么?为什么要用?

 

1. 筛选的定义

 
筛选 = 用户通过一个 / 多个条件,在海量内容里快速缩小范围,隐藏不匹配信息,高效找到目标。
 
筛选是过滤器,属于搜索框架的一部分。
 

2. 筛选 vs 搜索(核心区别)

image.png

 
  • 筛选:系统提供条件,用户被动选择 → 缩小范围
  • 搜索:用户主动输入明确关键词 → 精准查找

image.png

 

image.png

简单记:搜索找结果,筛选缩范围
 

3. 什么时候必须加筛选?

 
  1. 系统定义筛选(一级筛选)
     

    image.png

    大方向快速切换,如:订单(待支付 / 待发货)、优惠券(未使用 / 已过期)。
  2. 用户自定义筛选(二级 / 精细化筛选)
     
    在一级结果里进一步精准,如:价格、品牌、发货地、评分等。
 
最佳组合:一级分类 + 二级精细化 + 排序
 

 

二、5 种最常用筛选样式(直接对应场景)

 

1. Tab 筛选

 

image.png

  • 形态:横向 / 纵向常驻展示
  • 优点:一目了然、随时切换、无学习成本
  • 场景:内容大类划分(新闻频道、视频分类、商品一级类目)
  • 缺点:结果偏模糊,需搭配二次筛选
 

2. 弹窗式筛选

image.png

 
  • 形态:入口隐藏,点击蒙层弹出
  • 优点:省空间、多维度平铺、不占页面
  • 场景:电商列表、外卖、出行等高频精细化筛选
  • 适用:条件不多、操作快
 

3. 折叠式筛选

  • 形态:入口隐藏,点击展开、常驻页面
  • 优点:比 Tab 省空间,比弹窗更可控
  • 场景:中度筛选需求,需反复调整条件
 

4. 高级筛选(新页面)

image.png

 
  • 形态:跳转到独立页面
  • 优点:无干扰、可放大量细颗粒条件
  • 场景:汽车、房产、招聘、复杂 B 端筛选
  • 适用:条件多、层级深、需专注操作
 

5. 筛选 + 排序组合(移动端标配)

image.png

 
  • 形态:筛选按钮 + 综合 / 价格 / 销量等排序
  • 优点:一步完成 “缩小范围 + 重新排列”
  • 场景:几乎所有商品 / 内容列表
  • 代表:美团、饿了么、淘宝、京东
 

 

三、3 个筛选维度(决定怎么布局)

 

1. 单维度筛选

 

image.png

  • 一次只选一个条件,触发即生效
  • 标签简短(≤5 字)、语义清晰
  • 场景:订单状态、内容分类
 

2. 多维度筛选

image.png

 
  • 支持单选 / 多选 / 区间 / 滑块
  • 需配:确定 + 重置按钮
  • 移动端建议:一级维度≤9 个,多余整合到二级
 

3. 多等级筛选

 

image.png

  • 层级:一级分类 → 二级属性 → 三级参数
  • 移动端最多 3 级,避免迷路
  • 适合:类目复杂的电商、后台系统
 

 

四、筛选设计 3 大核心准则(必遵守)

 

1. 以用户效率为目标

image.png

 
筛选的本质不是 “好看”,而是帮用户更快找到
 
  • 不知道要什么的用户:靠分类 + 筛选引导
  • 知道要什么的用户:靠精准条件快速锁定
  • 最终目标:降低时间成本,提升转化与留存
 

2. 按产品类型定制条件

 

image.png

不要抄通用模板:
 
  • 电商:品牌、价格、销量、评分、服务
  • 新闻 / 内容:热度、时间、偏好、标签
  • 工具 / B 端:状态、时间区间、负责人、关键字
 

3. 按使用频率排优先级

 

image.png

高频条件前置,低频条件隐藏 / 后置
 
  • 买手机:品牌→内存→容量→价格
  • 买日用品:价格→销量→(品牌放高级)
 

 

五、总结(一句话记住)

 
筛选的核心价值:用最简单的交互,帮用户最高效缩小信息范围
 
选型只看两点:用户需求 + 使用场景
  • 简单分类 → Tab
  • 常规精筛 → 弹窗
  • 复杂深筛 → 高级页面
  • 列表标配 → 筛选 + 排序

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

 

image.png

兰亭妙微带您赏析:移动端列表页设计:3 个核心要素 + 2 种主流布局,一次讲透

清阳

兰亭妙微ui设计公司带您赏析:列表页是移动端最常用的信息承载页面,看似是重复组件的排列,本质是数据表格的可视化转化。想做好列表设计,先抓准核心逻辑,再定布局框架,新手也能快速上手。
 

一、先懂数据:列表设计的 3 个核心要素

 
列表不是单纯做视觉排版,而是清晰传递数据信息,设计前必须吃透数据的 3 个关键维度:
 

1. 属性字段:明确要展示的信息点

image.png

属性字段就是数据的表头,是列表里要呈现的所有独立信息。比如商品列表,包含商品图、名称、标签、销量、价格、好评率等;用户列表则包含头像、昵称、等级、状态等。

image.png

  • 设计前要梳理全字段,不遗漏关键信息
  • 给字段划分权重与分类,优先突出核心信息,次要信息弱化或隐藏

image.png

2. 字段值:确定信息的展示形式

image.png

字段值是每个属性的具体内容,也是数据到视觉的转化关键。开发中字段值仅为文本,设计里可转化为图片、图标、标签等更直观的形式。
 
  • 明确字段值的限制:文本长度、图片尺寸、状态类型
  • 统一转化规则:比如 VIP 等级用金银铜图标替代文字,提升视觉效率
 

3. 字段状态:适配不同场景的显示逻辑

image.png

字段状态决定何时显示、何时隐藏、显示什么内容,复杂列表必须设计多状态变体,避免展示异常。
 
  • 场景示例:外卖列表的配送标签(快送 / 专送 / 自配)、配送时间样式差异
  • 设计全覆盖:正常态、高亮态、禁用态、空态,确保所有场景适配
 
核心结论:优秀的列表是兼容数据的容器规则,不是单一好看的视觉组件
 

 

二、再定框架:列表页的标准结构 + 2 种布局

 
列表页不是只有列表组件,完整框架固定且清晰,布局选择直接影响浏览效率。

image.png

列表页标准框架

image.png

从上到下依次为:顶部搜索栏 → 运营模块(可选)→ 筛选 / 排序栏 → 列表主体区域
 
  • 运营模块控制篇幅,避免挤压列表首屏展示
  • 可在列表中插入运营广告、内容推荐,平衡信息与转化
 

移动端 2 种核心列表布局

 

1. 单列列表:一行一个数据项

image.png

单列展示空间充足,适合字段多、需引导点击的场景,分两种类型:
 
  • 引导型:核心目的是跳转详情,比如商品、酒店、外卖列表,突出封面与核心信息
  • 展示型:直接呈现完整内容,无需跳转,比如朋友圈、消息列表

image.png

优势:单条信息展示完整,阅读舒适;劣势:单屏数据量少,浏览效率偏低。
 

2. 多列列表:一行多个数据项

image.png

移动端主流为两列,三列极少,分两种展示形式:
 
  • 等高布局:每条数据高度统一、对齐规整,适合字段统一、差异小的场景(如电商商品、图集)
  • 瀑布流布局:数据高度自适应,灵活度高,适合内容长短不一、视觉差异化大的场景(如笔记、穿搭、短视频封面)

image.png

优势:单屏展示数据多,浏览效率高;劣势:单条信息展示空间有限。

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

 

image.png

高手总结!深挖体验设计中的交互组件

清阳

组件是体验设计的核心基石,设计师日常高频接触 UI 组件,却常对交互组件理解模糊。兰亭妙微UI设计公司从底层逻辑切入,结合真实产品案例,拆解交互组件的定义、特性与运行机制,帮你建立系统认知。
 

一、什么是交互组件?

 
体验设计中,交互组件是可复用的功能型设计单元,核心用于落地产品功能、达成用户目标。
 
与侧重视觉呈现的 UI 组件不同,它更聚焦行为逻辑、操作路径与反馈闭环,是连接用户与产品功能的关键载体。
 

二、交互组件的四大核心特性

 

  1. 可复用性
    image.png
    同一 App 或设计系统内可跨场景复用,减少重复设计,降低研发成本,保障体验一致性。
  2. 模块化

    image.png

    按业务逻辑与交互规则模块化封装,便于团队协作、快速调用,显著提升设计效率。
  3. 可定制性

    image.png

    支持根据场景、业务需求灵活调整参数与样式,兼顾标准化与个性化。
  4. 易用性

    image.png

    自带清晰指引、低学习成本,操作直观,有效降低用户理解与使用门槛。
 

 

三、高频交互组件案例深度解析

 

1. 按钮:核心动作执行单元

image.png

image.png

 

按钮是最基础的交互组件,承载操作触发、状态反馈两大核心作用。
 
  • 交互层级高,是用户完成关键动作的入口
  • 文案需用动作动词(下载 / 保存 / 关注 / 登录),可搭配状态文案缓解等待焦虑
  • 热区为按钮本体,需覆盖默认态、点击态、禁用态、加载态等全状态
  • 核心价值:明确引导用户行为,同步系统处理状态
 

2. 搜索:信息高效获取入口

image.png

由搜索框、搜索按钮、联想词、结果页构成完整链路,支撑精准 / 模糊检索。

image.png

image.png

image.png

image.png

image.png

  • 固定于页面顶部,支持滑动隐藏,兼顾沉浸体验
  • 交互层级低于顶部导航,属于二级高频功能
  • 支持点击、输入、语音、长按、滑动等多手势操作
  • 优化方向:减少输入成本、强化联想推荐、提升检索效率
 

3. 顶部导航栏:平行模块快速切换器

 
用于单页面内同级内容的高效切换,是移动端核心导航形式。
 

image.png

image.png

image.png

  • 固定页面顶部,视觉优先级高
  • 操作:点击标签 + 横向滑动内容区均可切换
  • 模块数量≥2,可按业务灵活增减
  • 核心价值:降低页面跳转成本,提升内容浏览效率
 

4. 滑杆:连续数值精准调节器

 

 

image.png

面向连续型数值(亮度、音量、饱和度)的快速调节组件。
 
  • 操作:轻触 + 横向拖动
  • 调节效率高,优化阻尼可兼顾快速粗调精细微调
  • 适用:编辑类、设置类场景的连续参数控制
 

5. 滑动选择器弹窗:强干扰型数值选择器

image.png

image.png

image.png

 
弹窗式连续数值选择工具,交互层级最高,会强制中断当前流程。
 
  • 适用:日期、时间、年龄等固定区间连续值选择
  • 操作:点击唤起 + 滑动选择 + 确认保存
  • 特点:选择结果明确,但对用户操作干扰较大,慎用
 

 

四、总结与设计建议

 
交互组件是体验设计的基础工具,四大特性支撑产品体验的标准化、可复用、可迭代
 
转载:优设

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

 

image.png

尼尔森十大可用性原则:用超多案例吃透交互设计核心

清阳

在人机交互领域,雅各布・尼尔森博士 1995 年提出的十大可用性原则,是历经时间检验、贯穿 C 端与 B 端设计的经典方法论,至今仍是产品交互设计的核心指导准则。兰亭妙微ui设计公司结合海量真实产品案例,拆解每一条原则的落地逻辑,帮你把理论转化为可执行的设计思路。
 

一、状态可视反馈原则

 
系统需在合理时间内,对用户操作给出即时、清晰的状态反馈,让用户明确当前操作进度、结果与系统状态,消除不确定性与焦虑感。
 
核心要求:反馈速度匹配用户预期,形式直观易懂,覆盖操作响应、进度提示、结果告知等全场景。
 
  • 百度网盘下载文件时,实时展示下载进度、传输速率、剩余时间,精准缓解用户等待焦虑。
  • 360 安全卫士杀毒过程中,同步呈现查杀进度与完成倒计时,给予用户明确的操作掌控感。

image.png

二、现实世界隐喻原则

 
系统语言、图标、交互逻辑需贴合真实世界认知习惯,用用户熟悉的符号、短语传递功能含义,降低学习成本,无需额外解释即可快速理解。
 
核心要求:摒弃专业代码与晦涩术语,以生活化、场景化的表达完成人机沟通,隐喻可覆盖视觉与操作层面。

image.png

  • 360 安全卫士、腾讯电脑管家、嗨格式视频转换器的功能图标,均采用大众熟知的图形设计,精准匹配业务场景,美观且易识别。
 

三、操作可撤销回退原则

 
为用户提供便捷的错误修正通道,支持撤销、重做、修改、撤回等操作,让用户能快速恢复到误操作前的状态,提升操作安全感。
 
核心要求:回退操作简单易找,无复杂流程,覆盖高频误操作场景。

image.png

  • 微信支持 3 分钟内撤回消息,QQ 邮箱提供邮件撤回功能,避免误发送带来的困扰。
  • 虎课网支持用户随时修改头像与个人信息,赋予用户自主调整操作的权利。
 

四、全流程一致原则

 
产品在交互逻辑、视觉风格、操作反馈上保持统一,相同场景下的相同操作,结果与体验完全一致,帮助用户形成直觉化操作习惯。
 
核心要求:按钮、图标、色彩、空状态等设计元素全域统一,跨模块、跨场景体验无割裂感。

image.png

  • 飞书在联系人、邮箱、日程、消息等所有场景,采用统一的空状态页面设计,产品整体感极强,使用体验流畅舒适。
 

五、事前防错原则

 
预防错误优于事后补救,设计阶段预判用户误操作行为,通过禁用无效选项、状态区分、二次确认等机制,从源头减少错误发生。
 
核心要求:不可逆操作必须加确认步骤,功能状态清晰区分,避免用户误触、误选。

image.png

  • EV 录屏删除视频时,触发二次确认弹窗,有效防止文件误删。
  • 天翼云电脑专家将学习模式按钮设为彩色(可用)、置灰(不可用)两种状态,直观区分功能可用性。
 

六、减轻用户记忆原则

 
系统主动呈现关键信息、保留历史记录、自动保存内容,无需用户刻意记忆数据,降低认知负荷,提升操作效率。
 
核心要求:历史操作、输入内容、常用选项自动留存,切换页面时不丢失关键信息。

image.png

  • 花瓣、千图、哔哩哔哩的搜索栏,自动保存历史搜索记录,用户无需重复输入,一键选择即可快速搜索。
 

七、灵活易用适配原则

 
兼顾新手、中级、高级用户的使用需求,新手有引导、中级用户易上手、高级用户可定制,打造灵活适配的操作体验,提升用户满意度与粘性。
 
核心要求:提供个性化设置、快捷操作、自定义功能,满足不同用户的使用习惯。

image.png

  • 腾讯电脑管家内置 12 种个性皮肤,支持一键换肤,满足用户的审美与个性化需求。
 

八、简约去繁设计原则

 
剔除冗余信息与非核心功能,聚焦用户核心任务,通过信息归类、层级划分、动态交互简化页面,避免信息过载,让核心功能一目了然。
 
核心要求:页面简洁不杂乱,信息层级清晰,复杂内容轻量化呈现。

image.png

  • 联通应用商店仅在鼠标悬停应用图标时显示安装按钮,动态简化页面信息,视觉更清爽。
  • 飞书通过任务紧急度配色 + 图标归类,将复杂的任务页面梳理得清晰简洁,降低信息理解难度。
 

九、清晰容错提示原则

 
错误无法避免时,提供通俗易懂的错误说明 + 可执行的解决方案,摒弃晦涩错误代码,用直白语言告知问题原因与修复方法,缓解用户焦虑。
 
核心要求:错误提示可视化、口语化,附带明确指引,不让用户困惑无措。

image.png

  • 联想电脑管家客服页面异常时,给出清晰的文字提示 + 趣味插画,既说明问题又安抚情绪。
  • 联想电脑商铺应用无法查看消息时,直接告知原因并提供解决方向,引导用户快速处理。
 

十、便捷帮助支持原则

 
即使产品操作直观,也需提供易查找、好理解的帮助体系,复杂业务场景(尤其是 B 端)搭配精简帮助文档,前端加引导提示,解决用户使用难题。
 
核心要求:帮助入口显眼,内容简洁有步骤,C 端轻量化、B 端系统化。

image.png

  • 菜鸟裹裹邮寄页支持地址智能识别填充,一键完成信息录入,大幅提升操作便捷度。
  • 酷我音乐在设置中内置帮助入口,用户可快速反馈问题、获取官方协助。
 

总结

 
尼尔森十大可用性原则不是空洞的理论,而是融入产品细节的实用设计工具。带着这些原则观察日常产品、落地设计方案,既能打造易用、流畅的用户体验,又能兼顾视觉美感与功能实用性,是每一位设计师的必备核心思维。
 

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

 

image.png

产品设计案例分析:小米商城APP首页全新升级

清阳

小米作为国内生态系统最为完善的手机品牌之一,它的商城设计也是一直被学习的案例。“品牌电商”和“高端化”,是小米商城设计的两大主题。兰亭妙微ui设计公司对小米商城APP的首页设计进行了分析,希望对你有帮助。

一、提炼设计语言

根据最新的产品定位,能提炼出两个重要的信息,即“品牌电商”“高端化”,若想把这两点落实到产品设计当中,首先就是对这两个关键词有充分且客观的认识。

1. 什么是品牌电商?

京东、淘宝、拼多多是不是品牌电商?肯定不是,他们属于综合类电商,他们销售各种品牌的产品,品牌电商的特征是,只针对一个品牌或集团旗下多个品牌(集团为品牌)的产品进行销售。

综合类电商:追求性价比,更多的是满足消费者物质层面的需求,购买动机是功能、卖点、价值等利益点。

综合类电商在设计上,贴近用户的心智诉求,就应该注重产品的利益点露出,页面设计上强调热闹的氛围,这样才能进一步刺激用户的消费欲望。

品牌电商:品牌电商应注重品牌的调性,赋能品牌,用户追求品牌溢价,满足精神层面的需求,购买动机注重品质,以及身份的价值认同感,符合自己的社会属性等。

设计上,不应过分强调利益点,不然会降低品牌的品质感,品牌电商应聚焦商品本身,更多的去解读产品的价值和优势,让用户感到品牌产品的品质。

2. 如何理解高端化?

什么是高端的?那首先得明白什么是低端的,从人类发展的客观事实上来看,或从我们普遍认同的价值观上来看,落后往往代表低端,先进则更能表现高端,下面我们看几组图片。

从图片的对比上来看,粗糙、多色彩、杂乱看起来是低端的,精致、单色、简洁更多人会认同是高端的。

最终通过品牌电商的特点,以及高端化设计认识,我总结出4条设计语言:

1)回归产品本身

聚焦产品价值为核心,回归本真,营销信息合理展示。

2)克制的

克制色彩营销的导向, 复杂的设计,助力品牌高端化。

3)极致的

以用户语言,打造产品细节,打磨用户体验,做好服务。

4)有品牌感知的

提取品牌DNA,建立官网心智,打造官方商城优势。

有了设计语言的方向指导,那所有的设计都要依据这四条原则进行设计,接下来看一下案例中如何运用设计原则。

二、案例解析

下图是一年前的首页,最直观的感受就是,整体看上去色调很多,图素的饱和度也较高,根据我们的设计语言,对banner、金刚位、活动腰带、一拖三(瓷片区)等、做了一系列的改版,同时还增加了几个模块,接下来我们细讲。

1. banner头图改版

banner图区域结合需求,做了非常大胆的尝试,对头图设定了几种状态,日常状态、活动状态、新品发布会状态

日常状态:依旧是轮播banner展示,在图素的设计上,对版式和用色做了规范调整。

色调上不再采用高饱和的图素,板式上去掉了行动按钮,原因就是结合设计语言“回归产品本身”这一理念,去营销化,图素上的信息就展示关于产品本身,图、名称、卖点、价格。

这就是一个品牌电商,在日常展示上,应该有的一种态度,吸引用户的一定是产品本身,而不应该是一个利益点。

活动状态:当有重要的活动或新品时,会直接把所有banner都下掉,直接把一个加长的活动图素放上去,业务方给起了个名字叫huner,意思就是直接“呼脸上”的意思,逻辑上就是重点强调。

huner展示

根据活动的重要程度,huner的高度会不一样,左图是与哈利波特联名的一款手机,比较重要,所以更大,右图是每月一次的F会员日活动,所以相对较小。

关于活动氛围,在设计上还有一个递进关系,当活动越重要,那huner的底部圆角就会越圆润,因为越圆润的设计越活跃,越活跃的设计活动氛围就会越热闹。

另外有时我也会做一些动效上去,来重点渲染活动氛围,下图所示:

迪士尼联名产品发布会动画:

双11活动huner动画设计:

春节期间年货节huner动画设计:

618倒计时huner动画设计:

新品发布会/重大节日状态:这个状态会在huner图中下方增加多个次级活动入口,原因发布会和重大节日流量较高,这样的设计形式,流量聚焦,减少路径,能更好的完成活动目的。

另外在这个样式的基础上还有一种形式,huner下方的坑位会去掉产品图,弱化展示,目的是为了给下方活动腰带更多的流量。

大促期间各个需求组,都希望在首页分到更多的流量,在众多活动中,肯定有主有次之分,放在一起设计形式相同就会平均流量,这显然不是平台想要的效果,所以解决方案就是,通过设计形式来干预流量的走向。

对于一个多业务方的首页,设计上往往还需考量各方利益,不能因为一方,影响另一方,做好权重需求分配,平衡利益,这也是设计师需要有意识思考的问题。

总结:banner头图的改版设计,日常轮播不会存在任何营销信息,保持品牌电商的调性,活动期间根据不同级别的活动,给出级别不同设计方案,活动过多时,通过设计形式干预流量的走向。

2. 金刚位优化

金刚位做了简单的优化,之前最大的问题是,产品的形状各异,都是以最大要求尺寸展示,导致最终的视觉呈现常常不统一。

解决方案下图所示,规范了较为方正的产品和较长产品,不同的呈现尺寸,让视觉尽可能看起来统一。

米金商城图标进行了改版,采用写实效果,降低饱和度,尽可能看起来更贴近真实,这样与真实的产品图标会更加契合。

金刚位中“小米发布”的入口,有一个重要的改变,之前一直是一个圆角矩形,现在结合我们的设计语言“有品牌感知的”原则,进行调整。

提取小米logo的超椭圆形状,直接用于图标的呈现,小米发布是一个重流量的入口,所以一直是一个动效状态。

因为“小米发布”是中间位置,图标尺寸保持最大也不会不和谐,较大的展示面积,能把动效内容展示的更清晰。

3. 新品大卡

这个内容是新增模块,非常态化呈现,每次会随着发布会新品发布出现,比如老板在发布会上正在介绍一款新品,那小米商城就会随着发布会的节奏,首页首屏出现一个非常突出的新品大卡。

当介绍第二款新品时,新品大卡就会以banner轮播的形式出现,另外有一点很重要,新品大卡的副文案,一定得是卖点,而不能是利益点。

卖点就是展示这个产品本身的亮点,利益点是这个产品有什么优惠,对于刚发布的新品就直接上利益点,有损新品的价值感,不符合我们“回归产品”的设计语言。

所以每次业务方给出的是利益点,我都会提醒他换成卖点,讲明原因,他们通常也是非常认可的。

4. 活动腰带

活动腰带是重运营区域,所以设计形式会常常换样式,不然用户容易视觉疲劳,但任何设计形式,也都是围绕设计语言开展,下图所示,新旧活动腰带对比。

新旧对比很直观的感受就是,变得冷静克制了,场景变得写实了,减少色相了,降低饱和度和明度了,下面我精选了一些近一年中用过的活动腰带。

写实风格的KV能增强商品的品质,也更符合目前的产品定位,从数据来看对比以前也是增长趋势。

对于品牌电商来说,能给用户带来品质感,其实就等于用户对平台增加了信任感,设计促进了用户的信任,那就等于设计赋能了品牌。

5. 手机腰带

手机腰带也是新增的模块,原因很简单,集团的主营业务就是手机,所以手机要有个专门的模块展示。

手机腰带日常保持冷静的设计调性,大促期间会增加标签和突出利益点的处理。

另外值得说的一点是,手机腰带下面三个手机做到了“千人千面”,不同标签的用户会看到不同的手机推荐。

6. 一拖三(瓷片区)

这个模块的改版非常有讲头,这一年中也是经历了多个版本的迭代,首先看一下最初的设计稿,其实是非常符合当时的产品定位,与之前的活动腰带也非常契合,营销感较重,主打的就是一个热闹。

最初的设计没有问题,符合当时的产品定位,但后来应业务方的需求,加了一个配置标签的功能。

当时告诉运营同学的是,四个卡片中只能加一个,功能上并没有限制只能加一个,后来如上图所示,每个都加,夸张的时候四个都加。

本来就是多色的色块,再加上几个突出的标签,那直接就“花枝招展”了,每个卡片都加标签,就等于没有突出任何一个。

后来公司提出高端化路线,就快速做了一个用不到开发的去色的调整,去掉标签,下图所示,修改尺寸板式需要开发介入。

在用去色后样式的同时,我也在进行需要开发介入的设计迭代优化。

首先分享一下我对改版优化的设计思考,对于改版设计拿到需求后,不提倡直接去找参考,应该先去调研改版的目的,了解业务方的想法。

然后结合产品定位,分析目前的设计存在哪些问题,深入去思考如何改版才能深入人心,这个环节非常重要,不仅能培养独立思考能力和意识,而且也是锻炼设计提案能力的重要方法。

拿到需求直接去找参考不仅是一种“懒”的行为,而且非常容易做很多徒劳无功的工作,因为不了解真正的改版目的,不思考存在的问题,最后难免就是多次的改稿。

在一拖三的案例中,我总结了四个问题:

  1. 整体看起来非常紧凑;
  2. 产品图片不能完全展示;
  3. 大卡片的产品名称字号过大;
  4. 大卡片的文案居中对齐,不符合现在的设计原则;

问题一:整体看起来紧凑,其实也并非紧凑,而是如若有一个宽松和它对比,那它就是紧凑的,我先有个方案,再对应给它定义一个问题,当然前提是问题与解决方案是客观成立的。

我坚信宽松一定会打败紧凑,紧凑变宽松会给人一种轻松的清爽感,事实上也的确如此,最后的宽松方案大家都非常认可。

问题二:产品不能完全露出,导致用户看不到产品全貌,从而会降低点击的兴趣,露出半个产品,这样对用户不仅不友好,而且也是对产品不尊重,所以展示出产品的全貌迫在眉睫。

问题三:大卡片的产品名称字号过大,甚至大过板块标题的字,常态展示模块不应该出现不冷静的字号,会显得不精致。

问题四:大卡片的文字排版为居中,居中排版的优点是表现力会更强,缺点是板式结构变得不够整洁,且不耐看,结合我们的设计语言“克制的”能简洁绝不会让它复杂。

最大的改变是一拖三变成了一拖四,整体看起来不再有紧绷感,虽说增加了模块的高度,但也增加了一个坑位,这对对应的业务方来说也是求之不得的好事。

产品图不在部分露出,每个模块都是对角排版,文字左对齐,且可以展示更长的产品名称,整体看起来较为工整,整齐的设计,带来的就是信任感。

接下来我们看一下规范上的整理,边距上视觉统一,产品名称与卖点的间距是卖点与价格边距的二分之一,即五分原则。

同时卖点与价格的边距与外边距相同,在这种小模块设计中,在能把信息层级分清楚的基础上,UI设计间距越少越好,大小相等的东西都会看起来就会更整洁。

产品图的规范设定与前面的金刚位一样,方正的产品贴合小框大小,较长的产品贴合大框。

最后整体看一下,小米商城首页一年前后的对比。

总结:

这次首页的改版主要就是根据公司高端化战略和清晰的产品定位,总结得出设计语言,然后根据设计语言进行改版优化。

  • 首页banner头图,常态化展示进行了去营销化设计,目的就是渲染品牌电商的品质调性,活动期间做了huner的创新型设计。
  • 金刚位的产品图,统一了视觉大小的规范设计,优化图标,融入公司logo的图形元素,促进品牌官网心智的建立。
  • 新品发布会直播时,在商城首页实时同步新品信息,通过新品大卡的形式,做到全网购买新品最快途径。
  • 腰带风格改变,走品质路线,去繁从简,不同的级别的活动,有不同的设计形式承载。
  • 新增手机腰带,同时手机针对不同特征用户做了更精准的投放,做到了“千人千面”。
  • 一拖三改为一拖四,卡片信息重新排版,同时也做了去营销化设计,不再出现标签等营销信息。

首页还有会员楼层、省心优惠、新品上新三个楼层,依旧在改版中,上线后再与大家分享。

关于设计语言:

这四条设计语言,是我一年多以前在改版设计产品站(产品详情页)时做的总结,有些原则在这次的首页改版并没有体现,比如“极致的”用户体验服务,但在产品站的改版中有非常多的体现。

对于电商产品最重要的两个板块就是,首页和产品站,首页负责准确的流量分发,产品站负责销售转化,所以产品站的设计也是非常非常有学问,下一篇文章就是产品站的改版,敬请期待。

三、最后

最后跟大家分享一下,这次改版的重要心得,电商首页的每个模块都是一个业务方,设计上要考虑各方利益,不然你的设计很难推动。

设计形式可以影响流量的走向,合理运用会有非常不错的效果。

设计前的深度思考尤为重要,不仅能培养独立思考的意识,也能无形中锻炼设计提案的能力。

转载:人人都是产品经理

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

 

image.png

搞定 B 端响应式布局:从原理到落地,一篇吃透

清阳

 

本文聚焦B 端系统响应式设计,拆解适配逻辑、参数规范与设计交付,兰亭妙微ui设计公司帮你低成本实现合理适配,告别无效工作量与开发返工。

一、先搞懂:B 端响应式的核心定位

 
响应式的本质是让界面随浏览器窗口自动调整,保证展示完整、操作合理。
 

关键认知

image.png

  1. 关注窗口宽度,而非设备分辨率
     
    用户可自由缩放浏览器,设计只适配常用窗口宽度区间,不纠结固定屏幕分辨率。

    image.png

  2. B 端≠全量响应式
     
    B 端页面信息密集、组件复杂,全端响应式开发成本极高。优先局部适配,不做无意义的全量兼容,移动端场景建议单独开发。
  3. 只做 3 类核心适配
     
    B 端响应式仅聚焦 3 种场景,其余页面(表单、详情页)可固定宽度:
  • 布局宽度自适应:模块结构不变,宽度随窗口缩放

    image.png

  • 多列流式排布:卡片随宽度自动增减列数

    image.png

  • 组件展收控制:侧边栏、信息栏达到断点自动展开 / 收起

image.png


 

二、4 步定参数:响应式基础规范

 

1. 设定宽度边界

 
  • 最小宽度:≥900px(小于此宽度允许横向滚动)
  • 最大宽度:≤2560px(超过此宽度内容不再放大)
     
    作用:规避极端窄屏 / 超宽屏,减少无效适配工作量。

2. 划分适配区域

  • 上下结构:仅内容区做响应式,顶栏不参与

    image.png

  • 左右结构:仅右侧内容区适配,侧边栏排除在外
     
    核心原则:导航类固定组件不参与响应式
 

3. 栅格系统配置

 
以 Figma 设计为例,内容区创建栅格 Frame:

image.png

  • 列数:首选24 列,可选 12/16/20 列
  • 列间距:固定 8px/12px/16px(三选一)

    image.png

    栅格仅约束顶级组件,组件内元素无需对齐栅格。
 

4. 确定断点(Breakpoint)

 
断点是触发布局变化的临界宽度,需提前与开发确认:
  • 导航展收:≤1000px 收起,>1000px 展开
  • 多列卡片:900-1200px=3 列;1200-1500px=4 列
     
    提示:无适配场景可不设断点,避免冗余规则。
 

 

三、3 阶段落地:从设计到交付

image.png

阶段 1:分配顶级组件栅格占比

image.png

仪表盘、卡片页等页面,按栅格划分顶级组件宽度;
 
表格、表单等满宽组件,直接占满栅格区域即可。
 

阶段 2:制定组件内部适配规则

image.png

组件宽度变化时,内部元素遵循 3 类规则:
 
  1. 固定尺寸:图标、按钮等固定宽高,左 / 右对齐
  2. 填充自适应:输入框、筛选栏等撑满父容器
  3. 高度自适应:文本区域自动换行,撑开组件高度
     
    复杂组件(表格、图表)需提前同步开发适配方案。

阶段 3:输出关键页面响应式稿

 
无需全页面做适配,仅输出核心页面的小 / 中 / 大 3 版效果:
 
  • 必做页面:首页仪表盘、数据表格页、卡片列表页
     
    作用:让开发直观理解适配逻辑,避免自由发挥导致体验混乱。
 

 

四、避坑总结

  1. 不追求全设备完美适配,局部响应式是 B 端最优解
  2. 栅格只管顶级布局,组件内部用自动布局搞定
  3. 宽度边界、断点、适配区域必须提前和开发对齐
  4. 交付核心页面效果图,比纯文字规则更高效

转载:优设

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

 

image.png

如何提升AI交互设计能力?这篇总结超全面!

清阳

一、全文速览图

image.png

二、前言

2025 是智能体的元年,2026 年将更加成熟和普及,应用程序的体验方式因为智能体而逐步发生改变。

马斯克和扎克伯格曾预言“在未来 5-6 年内,传统的手机和应用程序(App)的形态将因为 AI 发生根本性变革”,兰亭妙微ui设计公司与您一同学习。

三、设计师已经迎来了「AI 交互设计」窗口期

以前的体验设计经验,已经跟不上如今 AI 能力逐渐普及的应用端设计开发趋势。

如今,各产品研发团队基于 AI 能力用户体验设计需求将会大幅增加。

即将到来的 2026 年金三银四求职季,产品和开发设计岗的招聘必然会对求职者结合 AI 的能力提出更高要求。

率先掌握 AI 体验设计能力的设计师,在求职时更有竞争力,在职场团队 AI 设计这一块也更有知识话语权。

换个角度看,AI 体验设计对于交互设计师在一定程度上也是一次洗牌的机会。

image.png

四、从 UX 到 AI Experience,具体有哪些转变

1. AI 将重塑以往的交互方式

当 AI 能够理解自然语言并主动完成任务时,许多传统的 UI 组件:信息架构、导航设计、表单流程、数据筛选等交互方式将会逐渐被重构。

用户与应用交互的过程将会改变。比如:

用户发起交互,由原来的用户主动操作+操作的路径,变成了用户的一句意图表达+AI 直接推送入口。

再比如对于用户输入错误的处理方式,由原来的表单验证与提示,变成了与 AI 的自然语言澄清,然后多轮对话修正。

再比如帮助决策上,用户由原来的面对多选项,变成了 AI 根据情境理解目标,并直接推荐最优路径。

image.png

3. 基于 AI 的场景设计与思考

根据尼尔森诺曼设计机构(简称 NN/g)在 2024 年的 AX 设计研究,优秀的 AI 体验设计要有具备以下几个素质:

  1. 用户能够容易地使用提示词:这意味着需要设计引导用户有效输入的界面元素
  2. 划清 AI 主导 与 用户主导 的边界:当不应该让 AI 做决定时,在合适的时机让用户介入
  3. 多模态交互设计:语音、文本、控件输入的设计结合
  4. 渐进式建立信任 AI:顺滑地让用户从发现、尝试到依赖 AI 功能
  5. 品牌下的 AI 人格化:AI 人设、开场白风格、拟人化、专有音效设计

五、如何提升 AI 体验设计能力

1. AI 交互设计知识

① 来自大厂的 AX 设计原则与模式

来自 Google、Microsoft、Ant 公司的 AI 设计规范与原则。

理解设计原则背后的原因、场景,就像以往我们接触过刚在技术窗口爆发期的「新颖」交互,比如 PC 时代的鼠标输入、移动互联网的触屏输入、虚拟现实时代等...交互模态各有差异。

  1. https://design.google/library/people-ai-research
  2. https://pair.withgoogle.com/guidebook/
  3. https://www.microsoft.com/en-us/haxtoolkit/ai-guidelines/
  4. https://ant-design-x.antgroup.com/docs/spec/introduce-cn

image.png

② 建立 AI 交互设计基本认知框架

AI 的软件分为:AI 能力应用软件、各行业场景应用软件的 AI 赋能。

AI 的交互形态:

  1. Chat 对话式(对话式交互为主)
  2. Assist 助手式(隐藏为主,需要协助时唤醒)
  3. Spread 散布式(隐藏为主,固定节点出现相关的 AI 功能)

AI 交互组件:Think 思考过程、ThoughtChain 思维链、Prompts 提示集、Conversations 管理对话、Suggestion 快捷指令......

image.png

Ant-design-x

③ 积累 AI 交互设计经验

  1. 体验优秀的 AI 功能,并搜集到案例夹。
  2. 建议按场景分类收集:内容创作类、数据分析类、任务自动化类、客户服务类、等等。
  3. 大致的框架可以像产品体验日记一样,记录设计细节,比如:产品名称与截图、核心交互流程描述、AI 介入的具体方式、优秀设计细节(如何处理加载、错误、歧义的)。

image.png

④ 尝试理解 AI 大模型底层的技术原理

这是偏技术的知识,对于非专业人群来说,比较难啃,但回报是最高的。

因为它是我们认识 AI 的原理性起点,一旦掌握,做许多 AI 项目都能受益,比如:快速判断 AI 能力边界、规划大模型训练等。

而对于设计师来说,也包括能有效指导 AI 领域的设计。

就像以往我们落地自己的设计方案,最好提前摸清前端框架、组件、数据交互,才不容易在开发环节被卡脖子,更顺利地实现设计方案。

了解方式:查阅关于 LLM 工作原理的科普类文章;相关大模型的官方网站查找文档。

2. Ai 交互设计思维

在现有设计项目中,多一层关于「AI 交互辅助」的思考

在做设计项目中,在传统交互设计思路上,有意识地思考「假设现在有 AI 智能体的帮助,这个功能可以是什么样的更好用法?」。

如果你想更好地验证 Ai 设计模式的成果,可以做一些进阶的学习研究:

首先像以往的项目一样,拆解用户操作;

然后针对每个环节思考“如果这里有 AI 能力,能否提效或者减负?

再将 传统方案 vs AI 加持方案的可视化,并进行对比,量化提升的效率

image.png

基于上图,我们把有 AI 协助退货整个过程,背后的动作和实现原理拆解分析:

  1. 用户与系统的交互是通过「多轮对话」,
  2. 然后 AI 在对话中「识别意图」,与用户确认需求,
  3. AI「搜集关键信息与用户资料」提交,
  4. AI 发起退货申请,并对接商家「退货系统」,
  5. AI 推荐「最优」的退货方式(上门取件),
  6. 只把最少的操作「确认」留给用户。

而以上这些动作,都需要设计师具备了理解前后台的交互链路(前端如何自然地与用户交流、后端对接哪些接口)、Ai 工具调用的能力、等等知识经验,才能顺利地完成 Ai 的交互设计方案,并落地。

3. 争取实战机会,让自己新学习的能力在落地中验证

战略性参与有 AI 的项目:

如果你的团队项目正好有 AI 智能体对业务场景赋能的规划,那么对你来说,参与进来将是一个转型的好机会。

其中,从 redesign 小的功能点中 加入 AI 的交互方案开始,比如:搜索功能智能化、表单自动填充、智能推荐卡片。这类功能点改造见效明显,往往投入产出比高,易于快速验证和迭代。

当然得在方案支撑足够有理的前提下。比如:准备传统交互 vs AI 加持的交互这两套方案对比,用预期收益、技术可行性和数据说话。

主动创造机会和环境:

定期向产品团队分享竞品的优秀 AX 设计案例,进行团队设计扫盲,同时也能提升队内影响力,后面参与项目设计更有话语权。

4. 大胆点,用 AI 颠覆玩法

进阶到挖掘大的场景中,能够利用 AI 重塑体验方式的机会。

比如:

传统的进度条,用户需要拖动查看逐个视频帧寻找他想看的目标片段。

而 AI 播放器中,可以把识别到的字幕,加入到进度条中作为锚点,让用户根据具体的字幕内容,就可以精准定位并直达该进度点,找片段的效率大大提升,直接使体验升维。

image.png

最后

预计 2-3 年之后,AI 交互设计将普及为交互设计师的基本能力。那些率先掌握的设计师,将在 AI 重塑产品形态的浪潮中,找到属于自己的新位置。

现在就是最好的开始时机。

你,做好准备了吗。

转载:优设

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

 

image.png

搜索框的消亡启示录

清阳

当 AI 开始重构本地生活的交互逻辑,美团的搜索框正悄然沦为旧时代的遗迹。本文深入探讨了关键词搜索与自然语言理解之间的根本冲突,揭示了筛选器背后隐藏的产品妥协,并预判了 AI 对本地生活服务入口的三大冲击。从对话框替代,到 Agent 化威胁,再到最危险的场景蒸发 —— 这场范式迁移,将如何重塑美团的护城河?
 
AI 正在重构本地生活服务的交互入口。这并非一次简单的升级,而是一场彻底的范式迁移。兰亭妙微 ui 设计公司认为,交互入口的代际变革,本质是用户心智与产品逻辑的双重重构,决定着平台未来的核心竞争力。

一、一个被所有人忽视的产品细节

image.png

周五下午六点,你打开美团,想找一家“适合带父母吃饭、安静一点、最好有停车场、粤菜或者闽菜都行”的餐厅。

你停顿了三秒。

因为你不知道该在搜索框里输入什么。“粤菜”太宽泛,“安静粤菜”不确定能否搜到,“带父母”这个条件根本没有对应的关键词。最后你妥协了,输入“粤菜”,然后手动拨动筛选器:距离3公里以内、评分4.5以上、人均150—300元。翻了两页结果,看到第十几家店的时候,已经记不清最初想要什么感觉了。

这个场景,每天发生在数以千万计的美团用户身上。没有人觉得有什么问题——毕竟大家都习惯了。

但如果认真思考,你会发现这里隐藏着一个根本性的产品矛盾:用户的真实需求是模糊的、情绪化的、充满上下文的,而搜索框的底层逻辑却是关键词匹配——它要求用户把一个复杂的人类意图,压缩成几个离散的词语。

这个压缩的过程,本身就是信息损耗。而筛选器、排序、推荐算法,不过是在这个损耗之后所做的各种补救。

今天我想深入分析的,不是美团要不要做AI,而是AI的到来如何从结构上重新定义了美团的用户交互逻辑,以及这对整个本地生活服务赛道意味着什么。

二、搜索框背后的产品逻辑:十年的“意图压缩术”

2.1 搜索框的本质不是“搜索”,而是意图的强迫翻译

image.png

从信息架构的角度看,搜索框是一个“意图翻译器”。它的工作原理是:把用户头脑中模糊的需求,强制转化为系统可以处理的结构化信号。

问题在于,这个翻译过程存在天然的信息损耗。人类表达需求的方式是自然语言,是带有情绪和上下文的整句话;但关键词搜索要求的是最小化、去语境化的词组。当你把“想找一家适合带父母的安静粤菜馆”压缩为“粤菜 安静”,你已经丢失了“带父母”所暗含的价值感需求——面子、正式感、停车便利、服务周到。这些维度,任何筛选器都覆盖不到。

更重要的是:大多数用户在打开搜索框的那一刻,自己的需求也是未完全成形的。他们需要的不是“输入词语获得列表”,而是一个能帮他们把模糊想法变成具体选择的交互过程。搜索框不是这个过程的起点,它只是一个粗暴的入口。

2.2 筛选器是“打补丁”的产物,不是真正的解法

美团过去十年,在搜索框旁边积累了越来越多的筛选维度:价格区间、评分区间、距离、营业时间、配送方式、菜系、口味偏好……每一个新增的筛选项,背后都是对搜索能力不足的一次承认。

筛选器越复杂,说明搜索越弱。这是一个重要的产品逻辑。

因为在理想情况下,如果搜索本身能理解“适合带父母”,你根本不需要“人均150—300元”这个筛选器——系统应该自己推断出价位范围。如果搜索能理解“安静”,你也不需要“评分4.5以上”来作为代理指标。筛选器的本质,是用多个结构化维度去近似替代搜索本身无法理解的语义内容。

这种设计在关键词搜索时代是合理的,因为你只能如此。但它同时也造成了一个认知负担:用户要在使用产品的同时,自己完成“需求拆解→关键词提炼→筛选器配置”这三步工作。这是用户替产品做了本该由产品完成的事情。

2.3 推荐算法为什么救不了搜索

过去几年,美团在推荐算法上投入了大量资源。首页的“猜你喜欢”“今日必吃”“附近热门”,本质上是在用主动推荐来弥补搜索的局限性。

但推荐和搜索满足的是用户决策链上的不同节点:推荐解决的是“我不知道要什么”的探索需求,搜索解决的是“我已经有方向,需要找到它”的意图需求。

当用户有明确意图的时候,推荐流是一种干扰,而不是帮助。周五六点打开美团想带父母吃饭的那个人,他不需要“今日必吃网红烤串”,他需要的是一个能理解他需求的系统。推荐算法再精准,也无法解决搜索的根本缺陷。

三、AI来了,搜索框面临的三种结构性冲击

冲击一:被对话框渐进替代

image.png

大型语言模型的核心能力之一,是零成本的自然语言理解。它可以直接处理“帮我找一家适合带父母吃饭、安静、有停车场的粤菜馆”,而不需要用户做任何翻译工作。

这不是概念,而是已经在发生的事情。当前各大互联网平台陆续接入大模型的搜索能力,其背后的产品逻辑完全一致:把关键词搜索框替换为自然语言对话框,让系统来承担“需求理解”的工作,而不是把这个负担甩给用户。

对美团而言,这意味着搜索框的替代将是一个渐进式、不可逆的过程。用户一旦体验过“说人话就能找到想要的餐厅”,他们不会再愿意回到拼关键词加拨筛选器的旧交互模式。

冲击二:被Agent整体跳过

比对话框替代更激进的是Agent路径。

在Agent模式下,用户不再经历“搜索→筛选→选择→预订”这个线性流程,而是:表达意图→Agent自主完成理解、比价、预订、提醒的全部环节→用户只需最终确认。

这意味着搜索框不只是被替换,而是作为一个独立环节被整体消解。用户无需进入美团App,只需在微信、支付宝、或者操作系统级别的AI助手中完成整个交互——美团的服务能力被调用,但美团作为流量入口的位置被彻底边缘化。

微信的AI搜索、支付宝的AI助手、华为的小艺、苹果的Siri进化版,都在朝着这个方向推进。Agent化不是遥远的未来,它是当下已经在布局的竞争格局。

冲击三:用户行为迁移导致的场景蒸发(最被低估的威胁)

前两种冲击是关于“搜索框被什么替代”,而第三种冲击更为隐蔽,也更具毁灭性:用户的使用场景可能在不进入美团的情况下被满足。

想象一个使用场景:用户在和朋友的微信群聊里讨论周五吃什么,这时群里的AI助手直接分析对话内容,给出三家符合所有人口味和位置的推荐,并且完成了预订——全程在微信内完成,美团的数据库被调用,但美团App从未被打开。

这不是技术上的想象,而是一个流量入口迁移的商业问题。美团失去的不只是搜索框,而是“用户主动打开App”这个行为本身。一旦用户的高频决策习惯在其他平台形成,美团的日活数据将面临结构性下滑。

这才是AI冲击中最危险的死法,因为它是无声的、渐进的,等到平台意识到的时候,可能已经失去了整整一代用户习惯。

四、美团真正的护城河在哪里

image.png

在讨论AI对美团的冲击时,有一个根本性的问题需要厘清:美团的价值究竟是什么?

如果美团的价值是“连接用户和商户的信息中介”,那它确实岌岌可危,因为AI可以比搜索框更高效地完成这个连接。但如果美团的价值是“把服务实际送达到用户手中的履约网络”,那AI对它构成的威胁就要小得多。

4.1 履约能力:AI造不出来的壁垒

美团今天拥有超过700万的骑手网络、覆盖数百个城市的即时配送基础设施、与数百万商户的深度绑定关系,以及每天处理数千万笔订单所形成的实时运力调度系统。

这些东西,AI无法凭空生成。大模型再强大,也无法替代一个在三十分钟内把热餐送到你手边的骑手网络。AI是信息层的技术,而美团的核心竞争力是物理层的基础设施。

这个判断有一个重要推论:美团的搜索框可以被替代,但美团的履约能力不会被替代——至少在可见的未来不会。这意味着即便美团完全失去了前端的流量入口,它也可以以“能力提供者”的角色,为其他平台的AI助手提供后端服务。

4.2 数据资产:有价值,但需正确使用

美团积累了超过十年的用户消费行为数据:什么人在什么时间什么地点吃什么,偏好什么价位、什么菜系、什么口味,有什么饮食禁忌,外卖和堂食的偏好有什么差异……这些数据是训练本地生活垂直AI模型的核心资产。

但这里有一个容易被忽视的战略陷阱:数据只有转化为理解用户意图的能力,才能成为真正的护城河。如果美团把这些数据只是用来优化推荐算法,提升现有搜索框的点击率,那它就是在用新工具巩固旧模式,而不是在构建下一个时代的竞争优势。

真正的机会是:用历史数据训练一个“深度理解本地生活消费意图”的垂直模型,让AI能够理解“带父母吃饭”背后的全部语义,能够根据用户画像推断“你说的安静,是哪种程度的安静”。

4.3 最危险的战略误判:把AI做成更聪明的搜索框

基于以上分析,美团在AI转型中最危险的做法,是把大模型接入现有的搜索产品,让对话框替换关键词框,在视觉上完成一次“AI升级”,然后宣称完成了AI化转型。

这是一种“AI美颜”——换了皮肤,底层逻辑没变。用户体验确实会有改善,但改善的是现有流程的效率,而不是对未来交互范式的卡位。

真正的产品战略应该是:放弃“流量入口”的思维定式,转向“意图响应网络”的定位。美团需要成为一个能在任何界面、任何上下文中理解用户本地生活消费意图并完成履约的系统,而不只是一个把用户吸引进App的流量平台。

五、对产品经理的三个结构性启示

image.png

美团的案例不只是一个大厂的战略故事,它对所有产品人都有直接的方法论价值。

启示一:重新识别你产品的“意图入口”

在你当前负责的产品里,用户在哪个环节表达了他最真实的需求?那个入口,通常就是AI冲击最先发生的地方。

如果你的产品依赖搜索框、关键词匹配、或者多级筛选器来理解用户需求,那么你需要认真思考:当大模型能够直接理解用户的自然语言时,你的产品流程里哪些步骤是多余的?哪些环节是在让用户替产品做本该产品做的事情?

启示二:区分“AI能替代的”和“AI替代不了的”

美团的履约网络是AI替代不了的。你的产品里,也存在这样的部分。

识别的方法:把你产品的核心价值链拆解到最细的颗粒度,逐项问自己:如果有一个无限能干的AI助手,它能把这个环节做掉吗?能做掉的是信息层,做不掉的通常是物理层、关系层、或者依赖特定资质的专业层。那些做不掉的部分,就是你在AI时代真正应该加固的护城河。

启示三:警惕“功能叠加”掩盖“结构性缺陷”的产品陷阱

美团的筛选器越来越多,是搜索本身无力的一种掩盖。在你自己的产品里,也要警惕类似的模式:当你在给现有功能打补丁的时候,要问自己,这是在解决问题,还是在拖延面对一个结构性缺陷的时间?

AI时代给了产品经理一个重新思考底层设计的机会。与其在旧的交互框架里做局部优化,不如退出来问那个更难的问题:如果今天从零开始设计这个产品,知道AI存在,我会怎么设计?

六、搜索框消失的那天

image.png

回到最开始的场景。

有一天,你打开美团,首页没有搜索框,没有筛选器,只有一行文字:“今晚有什么打算?”

你输入:“带父母吃顿正式点的,粤菜或者闽菜都行,不要太吵,最好有停车”。

系统回答:“为你找到3家符合条件的餐厅。其中顺德菜馆距你2.1公里,今晚有包间空位,停车场可停50辆,评价中高频出现‘安静’‘服务好’,人均约220元。是否帮你预留?”

你点了确认。整个过程,四十秒。

这不是遥远的科幻,它是可以预期的近未来。搜索框不会因为某一天某个版本更新而消失,它会以用户几乎察觉不到的方式,被慢慢替代——就像人们不再“搜索天气”,而是直接问语音助手一样。

美团的搜索框消失的那天,不是美团的终结,而是本地生活服务进入“意图经济”时代的标志。在那个时代里,谁拥有对用户消费意图最深的理解能力,谁拥有把服务真正送达的基础设施,谁就拥有竞争优势。搜索框只是一个UI控件,重要的从来不是它本身,而是它背后那个“理解用户意图”的能力。

而这个能力,才刚刚开始被认真对待。

转载:人人都是产品经理

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

 

image.png

日历

链接

个人资料

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

存档