首页

Finexa AI财务管理SaaS UI/UX设计深度解析

鹤鹤 B端ui设计文章及欣赏

导读|用清晰的预算、交易与预测体系降低企业财务决策成本。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

Flexion AI智能健身产品UI/UX设计深度解析

鹤鹤 设计思维

导读|从数据仪表盘、AI教练到营养识别,构建连续的健康行为闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

兰亭妙微实战复盘:竞品对标拆解,深挖电商 APP 全页面体验痛点

涛涛 交互设计及用户体验

北京兰亭妙微深耕电商 UI/UX 设计多年,服务数十款跨境、综合电商产品。在长期改版项目中我们发现,很多 APP 仅能实现基础功能,对比成熟竞品后会暴露出大量隐性体验缺陷,这些细碎问题持续拉低转化、造成用户流失。本文结合跨境电商旧版产品复盘案例,对标考拉、唯品会、拼多多等成熟平台,拆解全链路页面存在的典型设计短板,为电商产品迭代提供完整自查思路。

兰亭妙微实战总结:UX 设计师必须吃透的 9 类产品用户状态

涛涛 交互设计及用户体验

北京兰亭妙微深耕 UI/UX 设计十六年,团队服务政企、金融、大数据可视化等数百款软件产品,在长期项目落地中发现:绝大多数体验卡顿、用户流失问题,根源都是设计师忽略了用户全流程里不同使用状态的差异化设计。结合过往 B 端、移动端项目实战经验,我们梳理出产品使用周期里最核心的 9 种用户状态,覆盖从启动到流程中断全链路,为设计师提供可直接落地的设计思路。

兰亭妙微ui设计公司分享:茶饮小程序界面如何做出差异化?一套从 “清单工具” 到 “情绪吧台” 的 UI 优化全拆解

清阳 设计资源

兰亭妙微ui设计公司分享:做饮品线上菜单 UI,想做出品牌差异化真的太难了,多次迭代始终平淡无记忆点,最后老板亲自上手调整方案,才打通设计思路。今天就完整拆解这套茶饮首页优化案例,聊聊如何把枯燥的点单列表,变成让人一眼就想下单的线上体验空间。
不少茶饮线上小程序首页都存在同一个通病:门店明明主打氛围感特调饮品,页面排版却像超市采购清单,用户点进页面只想快速选购、完成支付,完全丧失了 “休闲喝一杯” 的松弛情绪,品牌氛围感更是无从谈起。
不妨先思考:普通平铺式饮品菜单,存在哪些天然短板?看完优化前后对比,我会分层拆解这套设计的三大核心优化逻辑,每一条都可落地复用在茶饮、咖啡、果饮类线上界面。

image.png

一、优化核心一:注入品牌情绪,把功能页面升级为情感入口

绝大多数饮品菜单只承担 “选购商品” 的工具属性,优化思路核心是前置情感价值,让页面先传递情绪,再引导消费
  1. 品牌表达前置,建立第一印象共鸣

    image.png

    将品牌问候语、专属 Slogan 放置页面首屏核心视觉位,用户打开页面第一眼先接收品牌调性与情感主张,而非直接堆砌饮品清单。彻底摆脱单纯卖货工具的定位,让小程序本身成为传递门店氛围感的线上载体。
  2. 产品场景化包装,饮品 = 生活情绪载体

    image.png

    打破单品孤立陈列的模式,为每款招牌饮品搭配专属氛围感场景视觉。以案例中的「椰屿回响」为例:搭配海岛遮阳伞、柔和浅调氛围底图,配套文案 “来自岛屿的清爽”,不再单纯展示一杯饮料,而是向用户传递 “海边松弛、治愈清爽” 的生活体验。
     
    把饮品和用户的放松、解压、治愈需求深度绑定,让消费者下单时,购买的不只是饮品,更是一段短暂的情绪慰藉。

二、优化核心二:重构信息层级,重塑饮品视觉呈现逻辑

原版平铺菜单两大硬伤:商品配图杂乱无统一规范、所有饮品均分视觉权重,用户视线分散,招牌爆款完全没有曝光优势。本次优化从视觉素材、版式结构双向改造。
  1. 统一 3D 视觉符号,解决素材杂乱痛点

    image.png

     
    原图使用实拍饮品图,各款饮品色调、构图、杂物多少参差不齐,视觉割裂,很难撑起精致高端的品牌定位。
     
    优化后统一替换成套式精致 3D 饮品图标,统一柔和低饱和配色、干净无多余杂物的造型规范,整套界面视觉高度统一,大幅提升品牌精致质感,建立专属视觉识别符号,拉开和市面普通茶饮菜单的差距。
  2. 主次分层版式,打造强视觉焦点

    image.png

     
    摒弃所有饮品均等展示的平铺布局,改用「主推单品放大视觉 + 辅助单品缩略标签」的分层结构。
     
    将门店核心爆款(案例中椰屿回响)放大、叠加立体 3D 效果占据首屏视觉 C 位,其余饮品以小型标签收纳于底部。清晰划分信息权重,主动引导用户视线聚焦招牌产品,强化爆款记忆点,解决原版页面无重点、用户抓不住主推款的问题。

三、优化核心三:叠加光影纹理质感,塑造高级界面氛围

image.png

原版界面纯白扁平底色,无光影、无层次、无纹理,整体单薄廉价,只有基础点单功能,完全没有品牌氛围感。
 
优化方案采用渐变基底 + 柔光光影 + 磨砂微纹理三维质感叠加:背景使用柔和渐变弱化生硬纯白;单品添加细腻柔光投影拉开页面层级;全局搭配低饱和度磨砂纹理填充空白区域。
 
多重细节共同拉高界面精致度,把简陋的工具型页面,升级成具备高级审美、适配精品茶饮定位的品牌专属线上空间。

整套设计优化总结

本次茶饮首页改版,跳出了 “只优化排版、美化图片” 的浅层设计思维,从品牌情绪价值、视觉识别系统、界面质感层次三个维度同步升级:用情感叙事赋予页面温度,用统一 3D 图标打造差异化视觉符号,用光影视纹理提升高级氛围感。
 
最终实现核心转变:从冰冷的 “饮品购买清单”,变成能传递门店调性、激发消费欲望的沉浸式线上吧台。

行业客观争议思考(整合评论理性拓展,提升文章深度)

这套设计视觉表现力拉满,但站在商业落地、长期运营、用户交互的角度,评论区也诞生了不少务实的行业讨论,做商业 UI 必须兼顾美感与落地可行性,这里客观梳理利弊,供设计师权衡:

方案优势

  1. 差异化极强,在千篇一律实拍清单式茶饮菜单中一眼出圈,适配精品、小众、高端茶饮门店打造品牌辨识度;
  2. 氛围感拉满,擅长营造情绪价值,适合主打打卡、治愈、休闲调性的门店,提升用户下单冲动;
  3. 成套 3D 图标可沉淀为品牌固定视觉资产,长期统一品牌线上线下视觉语言。

 

 

转载:优设

 

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

 

image.png

 

兰亭妙微ui设计公司分享:海量股票数据如何清晰呈现?百度金融从搜索页到官网的系统化 UI 升级复盘

清阳 交互设计及用户体验

前言

兰亭妙微ui设计公司分享:随着理财、投资用户群体愈发年轻化、多元化,证券类产品早已跳出单一交易工具的定位,逐步进化为融合数据研判、投资策略、情绪陪伴的一站式金融服务平台。
 
当下用户更自主、理性,对平台提出双重核心诉求:既要信息直观可信、操作高效顺滑,也需要整套统一的设计语言建立专业认知,从而沉淀对平台的信任感与情感认同。
为适配行业变革与用户需求升级,百度 MEUX 设计团队以百度搜索金融结果页、百度股市通官网两大核心阵地为载体,完成从搜索卡片到落地官网的全链路体验重构。我们系统性梳理金融垂类用户行为与产品底层逻辑,依托统一设计体系、标准化响应式策略完成体验革新,全面强化百度金融多终端、多场景下的专业表达,提升用户信赖度。

一、现状诊断:高密度金融页面四大核心痛点

项目初期,团队以 PC 端百度股票搜索结果页为核心样本,从页面结构、交互链路双维度深度走查,归纳出高密度数据场景共通的四大体验短板:
  1. 信息组织无序,获取效率低下

    image.png

     
    金融数据维度繁杂、体量巨大,页面结构松散、信息颗粒度模糊,缺少分层引导框架,用户抓取核心行情、财报等关键信息成本极高。
  2. 内容密度失衡,阅读体验疲劳
     
    全页面信息平铺排布,视觉节奏无起伏,长时间浏览易产生视觉倦怠,大幅降低用户深度探索、主动查阅更多内容的意愿。
  3. 模块割裂形成信息孤岛
     
    行情、公司资料、走势图表、财务数据各区块相互独立,缺少逻辑串联,用户无法快速搭建完整个股认知体系。
  4. 视觉体系老旧,专业感知薄弱
     
    页面层级区分模糊,核心数据缺少视觉权重,整体视觉风格滞后于主流金融产品,难以传递平台权威、专业的品牌形象。

二、三大优化策略:系统性升级高密度数据体验image.png

针对现存痛点,我们确立三层递进式设计目标,从信息承载、数据聚合、视觉表达同步落地优化:
  1. 提效信息流转:搭建条理清晰、高容纳度的标准化内容框架
  2. 聚合多维数据:打造层级分明、逻辑连贯的数据呈现体系
  3. 重塑视觉感知:构建克制、专业、沉浸式的金融视觉语言

1. 重构页面内容框架,放大大屏信息承载效率

image.png

依托 PC 端大屏展示优势,我们摒弃传统单列流式布局,改造页面头部,打造聚合式数据总览看板,强化页面一体感与浏览连贯性。
 
针对旧版页面权重模糊、重点数据埋没的问题,对个股核心指标做前置聚合:股票名称、交易代码、所属市场、实时报价、涨跌幅、汇率等关键数据集中放在首屏顶部,用户打开页面即可快速完成基础行情判断,大幅缩短决策路径。

2. 引入 Bento 便当式布局,打造高聚合结构化浏览体系

 

股票数据具备强逻辑、高维度、高密度的特性,原有零散分块布局会割裂用户认知。本次改版引入Bento(便当式)模块化设计,将海量信息按业务主题拆分、规整为独立区块,如同便当盒分区收纳食材一般,清晰划分信息类别,强化页面视觉层次。

① 信息结构化,降低认知负荷image.png

以百度股票 PC 搜索结果页为例,我们将分时行情、K 线走势、企业基本面、财务指标等信息分类收纳至独立 Bento 模块。规整的分区结构梳理清数据内在逻辑,用户能快速定位所需板块,数据识别与页面浏览流畅度同步提升。

② 轻量化递进交互

image.png

模块默认展示核心精简信息,满足快速浅浏览需求;同时适配 PC 端 hover 悬浮交互,鼠标移入即可展开完整详情,兼顾高效速读与深度查阅两种用户行为,平衡信息密度与交互便捷性。

3. 迭代金融专属视觉体系,夯实专业信任感知

image.png

旧版页面视觉噪点冗余、层级区分弱,我们从色彩、图表、文本、微动效全维度优化,打造干净克制、适配金融场景的视觉系统,减少视觉干扰,强化专业氛围感。

色彩体系:克制沉稳,优化涨跌色感知

金融用户对红、绿涨跌色敏感度极高,我们调整红绿配色饱和度与明度,弱化刺眼高饱和色调,整体页面基底偏向低饱和中性灰,营造稳定、严谨的视觉氛围,从色彩层面传递平台权威可靠的气质。

趋势图表可视化升级

image.png

旧版走势图仅单一蓝色,涨跌趋势辨识度不足。新版以开盘价为中间基准线,采用红 / 灰 / 绿三色渐变区分上涨、平盘、下跌区间,走势幅度通过渐变深浅直观体现,用户一眼即可捕捉股价波动趋势与强弱变化。

文本与阅读节奏优化

从基础视觉规范入手全方位降低用户阅读负担:
  1. 字号、行距分级管控:收缩冗余大号字体,建立清晰字号层级,增加段落留白与模块间距,提升长篇财报、资讯文本可读性;
  2. 色彩降噪管控:非核心辅助信息统一使用灰度展示,大面积留白制造视觉呼吸感,视线自然聚焦价格、涨跌幅等核心数据;
  3. 轻量化动态引导:图表加载过渡、模块 hover 高亮等细微动效,辅助用户识别层级切换,赋予静态数据页面柔和节奏感。

    image.png

整套视觉策略协同生效后,页面阅读舒适度、信息聚焦度显著提升,用户浏览海量数据时更专注、不易疲惫。

三、体验全域延伸:百度股市通官网全站系统性优化

搜索结果页改版上线后,页面停留时长、点击深度、全页浏览量等核心数据均实现正向增长,用户对页面专业度、信息读取效率反馈良好。基于 PC 搜索页成熟的设计方法论,我们将整套优化思路延伸至百度股市通(百度金融官网)全站,对标行业头部金融平台,围绕内容展示效率、多端响应适配两大方向完成沉浸式体验升级。

1. 页面结构彻底重构

image.png

百度股市通旧版采用固定宽度灰底卡片布局,既浪费大屏可视空间,模块层级冗余繁杂,数据展示严重受限。参考行业主流通栏沉浸式设计方案,我们彻底重构全站骨架,取消固定窄容器,释放横向展示空间,强化页面整体连贯性,多维数据并行展示,信息获取效率大幅提升。
同时新增个股聚合概览页,复用搜索结果页的数据看板思路,单页面整合一支股票全部核心维度信息,实现从 “分散跳转查找” 到 “一站式集中洞察” 的体验跃迁。image.png

2. 标准化响应式设计,实现多端体验统一

 

大屏设备普及背景下,一套设计适配 PC、平板、窄屏浏览器等多终端,是体验一致性的核心基础。我们搭建统一栅格响应式规则,打通设计规范与前端开发落地标准,实现一次设计、全终端自适应。
 
落地过程中归纳拉伸、等比缩放、横向扩展、固定尺寸、分栏堆叠五类适配逻辑,覆盖页面 80%-90% 常规模块;剩余特殊场景持续迭代差异化适配方案,预留长期优化空间。

平板端适配逻辑

image.png

以平板设备为例:PC 端横向双栏排布的图表、公司资料模块,在平板屏幕压缩后自动垂直堆叠;图表横向等比压缩并保留全部关键指标,保障数据完整可读。同时针对平板无 hover 交互的特性,增加点击展开详情的交互入口,补齐操作短板。

宽窄屏差异化布局

针对超宽屏、窄浏览器窗口两种极端场景,基于栅格设置多组适配断点,为每个核心模块定义宽度规则与信息展示优先级:
  • 超宽大屏:自动切换三栏并行布局,充分利用横向空间,提升单次浏览的数据承载量;
  • 窄屏窗口:收敛为单列垂直视图,仅保留核心行情数据,次要板块自动折叠收起,避免关键信息被繁杂内容淹没。
     
    标准化响应式体系不仅保证跨设备体验连贯统一,也为后续新增业务模块预留充足拓展弹性。

总结与未来展望

image.png

新版百度金融搜索结果页、百度股市通官网同步上线后,页面停留、浏览深度、交互点击等核心数据全面向好。设计改造成功引导用户行为转变:从单纯 “查看股价”,转向主动深挖走势、财务、企业基本面等多维数据,充分验证了这套高密度数据设计体系的落地价值,也为同类复杂数据产品提供可复用的实践思路。
本次改版不只是表层视觉、页面布局美化,更是对金融产品信息表达逻辑、用户认知路径的深度重塑。我们以设计驱动业务体验升级,在专业严谨的行业属性与流畅易用的用户体验之间找到平衡,探索适配金融垂类的界面、交互新模式。
后续团队将持续跟进用户真实反馈,迭代视觉规范、交互细节,不断打磨清晰、可信、易用的一站式金融数据服务体验。
 

转载:优设

 

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

 

image.png

 

兰亭妙微ui设计公司分享:AI产品交互设计自查:5大模块+6个信任开关,缺一不可

清阳 设计资源

兰亭妙微ui设计公司分享:最近把手机里所有带AI助手的APP都试了一遍,包括支付宝的蚂小财、蚁小保,滴滴打车助手小滴,招商银行的AI理财顾问、飞猪千问定车票等等。

各赛道都在抢着把AI能力塞进自己的产品。

试完之后的感受挺微妙的,大部分AI助手就用过一两次就不再打开了。

坦率的讲,不是这些AI不够聪明。底层模型的能力虽然有差距,但回答问题的水平都已经在可用线以上了。真正拉开差距的是交互设计,就是用户打开你的AI助手之后,整个体验是怎么串起来的。

AI产品的交互设计跟传统APP完全不同。传统交互设计解决的是怎么操作,AI交互设计要解决的是怎么表达意图和怎么建立信任。

行业里目前有两套被广泛引用的设计框架,一套解决前者,一套解决后者。

所以无论是产品经理还是设计师,都应该先掌握AI产品的设计特性,然后针对性的进行自己内部产品的AI升级,而不是看着大家都整小助手,就赶忙上线一个小助手,但用起来根本啥也不是。

你的AI助手能力如何,用户感受如何,下面通过五大领域+六大模式来自查下你的助手吧~

一、五大领域:AI交互的完整模块

这套框架来自Smashing Magazine 的 AI 界面设计研究,把AI交互拆分成五个功能模块,下面来简单说明一下。

1. Input UX — 表达意图

用户怎么把想法传达给AI。这是AI交互的第一步,也是最难的步骤,因为用户的意图往往是模糊的,且需求的来源本身就是把多样。

核心设计要点:提供多种表达通道,如文字输入、语音输入、拍照识别、视频对话等,让用户自己选择使用最顺手的方式。

比如支付宝/豆包等:语音+图片+文本多模态输入,用户可以直接拍一张图问这是什么,不用打字描述,降低了表达门槛。

2. Output UX — 展示结果

用户把想法告诉AI了,接下来就是AI怎么把结果交出来,AI生成的结果怎么呈现。不同于传统APP的固定页面,AI的输出是动态的、多维度的,是将最佳可读性的结果呈现给用户。

核心设计要点:结果展示必须可读、可比较、可评估。用户第一眼要能判断靠不靠谱。

比如在设计的时候不要长短大论的文字给到客户,一定是结构化,图文并行的给到客户,比如千问、可灵从开始大大篇报告逐渐给出结构化输出。

AI回答自动拆分为大纲、要点、表格、各种曲线图折线图等多种形式,用户不用自己从一大段文字里提取信息。

3. Refinement UX — 微调输出

AI给的初始结果通常是80分,用户需要微调到95分。这是体验的关键分水岭。

核心设计要点:微调必须即时反馈、所见即所得。操作粒度合适,优先用预设降低决策成本。

4. AI Actions — 执行任务

AI从给建议升级为替你做。帮你看是一回事,帮你操作是另一回事,信任门槛完全不同。

核心设计要点:执行类操作必须配上确认机制,让用户随时能看到AI将要做什么。

比如AI在工作时,都会告诉你他正在干什么执行到哪一步了,让用户放心,帮你办理业务时,或者在帮你打车时,一定是将执行前的确认交给用户。

5. AI Integration — 场景融合

AI能力嵌入到用户已有的工具和工作流中,而不是让用户跳到另一个APP去用AI。

核心设计要点:AI的出现时机和位置必须自然,与已有工具的数据和操作必须打通。

比如你用千问集成了各类的能力,不用点外卖去闪购、买票去飞猪,只需要在千问你告诉他帮我下单即可,这样用户对AI助手的依赖就会增强,不会再去点击传统的入口。

以上框架讲的五个功能模块。你可以理解为,一个完整的AI助手,这五个模块的设计都得到位。少了任何一个,体验就会在那个环节断掉。

但这还不够。

你把功能模块都设计好了,用户凭什么相信你的AI?凭什么让AI替自己做事?

这就是第二套框架要解决的问题。

二、六个设计模式:让用户信任AI的六个设计开关

我自己的观察是,大部分AI助手在信任这块做得都比较粗。要么就是什么都不解释直接给你结果,要么就是一股脑把操作都做了也不提前说一声。用户用着用着就慌了,不知道AI在干什么、为什么这么干、干错了、怎么办。

做得好的AI助手是怎么处理信任的呢,主要关注六个设计模式。

六个模式的核心让用户信任AI的六个设计开关,把控制权交还给用户。AI可以执行,但用户必须能预览、能确认、能理解、能质疑、能撤回、能干预。

这套框架来自行业智能体UX模式研究,专门解决一个问题——当AI替用户做事时,怎么让用户信任它、控制它、纠正它。

1. Intent Preview — 意图预览

  • AI执行前先展示行动计划,用户确认后才动手。设计目标:接受率 > 85%。

比如,小滴我告诉他帮我叫一辆回家的车,他会实时展示他当前思考进度,然后跑完结果后给出我确认的地址和时间,然后在帮我匹配对应的车辆,这样用户对他的行为一目了然;

还有一些操作更类B端工具,如Claude Code 每次任务之前会先列一个清单,要澄清哪些需求,改动哪些文件、每个文件改什么内容,你确认了它才开始,完全放心的交给AI。

2. Autonomy Dial — 自主度旋钮

  • 让用户调节AI的自主程度,渐进释放。四级模式:只给建议、计划确认、确认后执行、自主执行。

基础C端客户层面,可释放给用户可选择的模式,如基础快速和深度思考、如一个功能独立的快捷入口和分步的引导入口,便于用户自主灵活的选择;对于B端的工具,在辅助自我工作上,可以更灵活的调整AI介入的程度,更好的AI为我所用。

3. Explainable Rationale — 可解释性

一是AI做完后告诉用户为什么,展示AI思考的链路;

二是其中变量的解释,如通过上下文的解释,或者持续的告知和引导;

三是自我批判解释,需帮助用户评估其可靠性,如自我批判(如“此信号可能因某某因素而被夸大”),或提供其他角度的回答,来引导用户自主做出判断。

特别是一些资金基金财富保险类的助手,其严谨性和解释性要更加明确。

4. Confidence Signal — 置信度信号

AI不确定时老实告诉用户,核心原则:不确定性必须可见,不能藏在看似自信的输出背后。

当用户问到具体办理或查询的事件时,遇到不确定的问题直接说我不太确定,这个信息我无法验证,不会编造答案。

还有就是使用简单、可见的指标,如百分比或低/中/高等级,来标示结果的置信度。

对于文本内容,可以在视觉上高亮不确定的部分。

5. Action Audit & Undo — 审计与撤销

完整操作记录+ 一键撤销。设计目标:撤销率 < 5%。

支持用户查看以往的对话记录,让用户的记录有迹可循,可追溯之前的咨询信息;

6. Escalation Pathway — 升级路径

AI不确定时主动求助用户。设计目标:恢复成功率 > 90%。

三、下一步:实际落地

回到开头那个问题,大部分AI助手为什么做得不到位?

因为它们要么缺模块,五个功能模块没有全覆盖,用户在某个环节卡住了就放弃了;要么缺信任,六个信任模式没有做到位,用户不敢让AI做重要的事,要么两个都缺。

拿到一个AI助手的设计需求,怎么落地呢,三步走。就像机长在起飞前会严格的自查所有系统是否准备齐全,才会起飞,必要的限制,是对产品和用户负责。

第一步,拿五大领域当模块地图过一遍。你的AI助手在表达意图、展示结果、微调输出、执行任务、场景融合这五个环节,每个环节的交互形态想清楚了吗?有没有哪个环节是缺失的?

第二步,拿六大模式当信任自查清单过一遍。坦率的讲,意图预览和撤销是最低要求,几乎所有涉及AI执行的功能都应该配上。自主度和可解释性根据功能复杂度决定。置信度信号和升级路径在信息不确定的场景下必须具备。

第三步,把缺失的补上。不是每个功能都要六个模式全覆盖,但每一个被省掉的模式都应该有明确的理由,而不是没想到。

所以在设计时,传统产品,产品/设计的产出是一套界面操作流程。AI产品,产出是一套行为规则,AI在什么时机、以什么方式、展现什么信息、留给用户什么控制权。这些东西才是负责AI项目的人真正要决定的事情。

 

转载:人人都是产品经理

 

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

 

image.png

兰亭妙微ui设计公司分享:自然交流设计-多模态交互·上篇

清阳 设计资源

兰亭妙微ui设计公司分享:继上一篇我们提出了 HAI 交互设计法,并通过「深度理解」锚定了人性不变的需求后。本次,我们将视角转向技术演进所带来的交互变革,以「自然交流」的设计顺应技术之变。

AI 从大语言模型向多模态模型、乃至世界模型演进,其本质是理解能力的维度扩展:从符号语义解析,延伸至物理情境理解。这一质变使机器能够真正读懂人的意图、感知当下情境,为人机交互从“人适应机器”转向“机器适应人”奠定了基础。

在此趋势下,人机互动从屏幕走向空间,从单一通道走向多模态自然协同。面对这一变化,本文回归人类原生交流规律,系统构建多模态交互设计体系,通过分析其特征、类型与方法,为 HAI 时代的人机交互提供思考框架与理论参照。

01 AI 正重塑人类与设备互动的方式

从平面到空间

从纸张文字、电话语音到移动互联网的影像,每一次媒介形态的跃迁,都深刻重塑着我们理解世界的维度与感知的边界。

而今,在 AI、空间计算与 XR 等前沿技术的融合推动下,数字世界与物理世界的边界正逐步消融。虚实融合不再仅是愿景,而是正在成为新一代信息社会的底层体验范式。这一趋势不仅深刻变革着人类获取信息与沟通交互的方式,更驱动数字智能本身持续进化——它正突破虚拟的边界,向可感知、可交互、乃至可栖居的具身化智能方向演进

从单模态到多模态

从平面到空间的演进,也标志着交互范式本身的重构。过去数十年间,人机交互始终被禁锢于二维屏幕之内,依赖于键盘、鼠标、触控等单一模态的输入方式。而未来,随着智能传感、空间计算与多模态 AI 的成熟,交互将快速跨越屏幕的边界,迈向三维空间与自然融合的多模态交互方向

02 多模态交互的概念

多模态是人类与世界的原生语言

人类以多模态的方式互动,世界以多模态的结构呈现。人类所创造的多模态技术,正是根植于这一双重现实为基础而发展。

生物学层面上,多模态互动(Multimodal Interaction)是一个完整的“传递‑接收”循环:指人体通过多种运动/效应通道(Motor/Effector Channels)传递信息,并通过多种感官通道(Sensory Channels)接收信息。正如人类在交流中同时扮演“表达者”与“倾听者”。

多模态交互正是这一生物机制的数字化延伸,它融合多种“表达”与“感知”方式,使人机互动不断逼近人际交流的自然体验。

多模态交互:指人类利用多种表达通道(如肢体、声音语言、眼神)和感知通道(如听觉、视觉、触觉)与计算机系统进行通信的过程。

—— 本·施奈德曼(Ben Shneiderman)

多模态交互首次在1979年麻省理工理查德·A·博尔特(Richard A. Bolt)撰写“Put-that-there: voice and gesture at the graphics interface”(将语音和手势结合)。

综上所述,人类通过“多通道输入”传递意图,系统通过“多通道反馈”回应结果让人类感知,从而形成一个实时、连贯的交互闭环。因此,多模态交互的本质并非模态的简单叠加,而是构建一个以人为中心的对话循环。

为深入剖析这一循环,本文将分两篇展开系统性阐述:上篇聚焦多模态输入(人类如何表达),下篇探讨多模态反馈(系统如何回应)。

03 多模态输入

多模态输入的类型

前文中所提到的多模态表达是从生物学角度切入,指人体通过多种运动/效应通道(Motor/Effector Channels)传递信息。

而多模态输入根据用户参与程度又可分为两类:显性输入与隐性输入。

  1. 显性输入(Explicit Input):指用户有意识主动的交互行为,如接触(触摸、握持)、声音、视线、表情及空间动作等行为能力。这类行为直接承载用户意图,是当前人机交互的主要方式。
  2. 隐性输入(Implicit Input):指用户无需主动表达的信号、由系统自动感知,如生理状态、注意力水平等,主要用于辅助理解用户状态与环境上下文。

随着 AI 理解能力的深化,系统正逐步融合显性与隐性信号。但当前交互设计的核心仍是优化显性输入——它是用户意图最直接的出口。下文将围绕这一焦点,阐述基于主动表达的多模态输入设计方法。

多模态输入的设计方法

设计多模态输入前,采用系统化的分析框架,基于人机交互领域中的 “意图‑行为‑情境”分析思路,将动机、体验与变化纳入考量。对应的是 设计动机(Why)→设计体验(How)→适应变化(What if) 该框架依次引导设计者回应以下三个核心问题:

  1. 设计动机:单模态是否满足,多模态输入优势是什么?
  2. 设计体验:多模态输入是否自然协调?
  3. 适应变化:使用情境是否多变,应如何动态适应?

后续,将依此三阶段展开说明:

1. 设计动机:单模态是否满足,多模态输入优势是什么?

【动机:多模态的必要性】

我们想象一个日常沟通场景:“与熟人对话时,我们通常会简洁地表述,乃至含糊省略;而与陌生人对话时,则会表述得更明确,更丰富”。其实这揭示了一个本能倾向,人在确保意图能被准确传递的前提下,会倾向使用最“经济”的表达方式。

这正是关于多模态输入的必要性思考,其核心是遵循 “奥卡姆剃刀”原则:如无必要,勿增实体。若单一模态已能轻松、准确的完成任务,就无需引入更多模态。

因此,判断多模态输入的必要性,首先需要审视单模态是否存在阻碍或瓶颈。多模态设计的价值必须明确,关键在于创造增量体验,而非简单叠加,其必要性可从提升“效率、准确、流畅”三个维度进行审视与评估。

1)效率性(简化复杂任务):该任务是否因操作逻辑复杂,导致单模态表达低效甚至无法完成?

说明:在传统汽车HMI中调节后视镜需依循界面,多步骤操作。智能座舱则允许用户看向目标后视镜+手部操作,将多步操作融合为一步自然动作,实现“所见即所控”。

2)准确性(提升意图准确性):单模态输入是否容易产生歧义或错误,需要其他通道进行确认或补充?

说明:支付等高安全性操作,若仅依赖单一验证,仍存在误识风险。结合人脸识别与按压指纹验证,可大幅提升交易可信度。

3)流畅性(增强输入流畅性):判断当前交互流程是否存在明显的操作断点,是否可通过多模态实现更流畅连续的交互?

说明:键盘打字虽成熟可靠,但行走移动时仍会打断输入,而“长按语音输入、松开转文字”则允许用户在不中断当前活动的情况下持续输入。

综上所述,多模态的必要性,取决于它能否提升单模态在效率、准确或流畅性上的增量体验?若能,则引入具备明确价值;若不能,则应力求简洁,避免过度设计。应始终基于用户是否需要,而非技术是否能够。

2. 体验设计:多模态输入是否自然协调?

【动机:多模态的协调性】

构建自然协调的多模态输入体验,这要求设计兼顾人体的共性规律与个体的差异偏好。

在共性层面,须符合人体行为的客观规律,确保模态资源得到合理编排,否则会引发冲突与疲劳。

在差异层面,须贴合个体不同的偏好方式,使模态方式是契合个人偏好,否则会显得僵化且笨拙。

因此,协调性的实现,具体落实在这两项的设计任务上:

模态的资源合理编排(共性)

克里斯托弗·威肯斯(Christopher Wickens)的多重资源理论(MRT)为此提供了核心依据:人类的认知与动作资源并非单一整体,而是分布于多个相对独立的“资源池”。用以解释为什么有些任务更容易同时完成(例如边走路边嚼口香糖),而另一些任务则难得多(例如边说话边用眼阅读)。

威肯斯多元资源理论模型图形,方块表述人类的不同资源池,由HFE Solutions的KT Smith绘制。

基于此理论,合理编排的目标在于实现动作资源有效分配,让交互感觉轻松、自然。我们可从表达资源的数量、难度、重叠使用这三个设计要点上:

1)模态组合数量:模态越多(1→N),需调用的资源池越多,协调难度与消耗越大。

说明:调用的资源数量增多,也会造成相互之间的配合难度上升,非特殊情况,尽量克制在 2-3 种内。

2)模态行为难度:输入动作精度要求越高(模糊→精细),资源消耗会增大。

说明:一个需要高精度定位的“精细手势”远比一个自然的“挥手”消耗更多资源,设计应遵循最小努力原则,将高频、连续操作分配给低难度模态。

3)模态调用重叠资源:若多个模态竞争同一资源池(如同时进行两项触控任务),会产生干扰。

说明:如要求用户同时执行“触摸打字”和“触摸控制”两项任务,会较难完成,应优先选择资源互补的模态。

因此,设计中,不应只考虑提供尽可能多的输入方式。而是需要思考,将用户有限的资源,配置在最值得、最不费力、且互不冲突的地方,从而降低用户负担。这一理念落实到具体的行为动作设计上,体现为上述的三项设计准则,对此做个小结:

数量克制,组合控制在 2-3 种模态内;难度适配,最大程度降低高频操作的动作精度;资源互补,优先组合调用不同通道的模态(如“语音+视线”),避免竞争同一资源池(如多重触控)。

模态的方式贴合个人(差异)

合理的模态资源编排建立了客观、普适的效率基线。而真正的自然协调还需根据个体差异进行适配,需兼容具有不同生理条件、文化背景与行为习惯的用户,因为并不存在“标准人”,故设计必须尊重用户的“多样性”

1)贴合个人生理特征:用户的生理能力存在客观差异,设计应提供合适且具有包容性的交互通道。

说明:如儿童手部能力尚在发育,面向该群体的智能手表普遍采用更大的热区,并多采用长按的操作方式,避免精细点按。

2)贴合个人文化习俗:同一行为在不同文化中可能语义迥异,设计应契合文化特征并避免歧义。

说明:以“OK”手势为例,在中国表示认可,在土耳其、希腊等地则具有侮辱性含义。系统需识别此类文化差异,确保交互意图准确传达。

3)贴合个人习惯偏好:不同用户的使用习惯存在显著差异,设计应支持个性化配置并主动适配差异。

说明:如 Apple Pencil 在设计时,便兼顾了惯用左右手的两类用户不同的持笔握姿与手掌落点,为不同习惯的用户提供一致的顺滑书写体验。

某种多模态组合,对一个人来说是直觉,对另一个人来说却可能成为障碍。因此,模态方式的“贴合个人”,是让模态主动适配不同用户的生理条件、文化习俗与习惯偏好,为每个人提供最自然、最有效的表达路径。

最后,为多模态输入协调性做一小结,其构建路径可概括为 “模态的资源合理编排 → 模态的方式贴合个人” 。前者建立普适的效率基线,解决“可用性”问题;后者则针对个体差异进行适配,解决“契合性”的问题。二者共同推动交互设计从标准化的效率,走向因人而异的协调。

3. 适应变化:输入的情境是否多变?

【动机:多模态的适应性】

前文中,多模态输入的协调性,是为交互体验建立了相对稳定的静态基础。然而,真实的互动场景始终处于动态流动之中。

想象一个日常情景:从安静书店步入喧闹地铁站时,我们会不自觉地提高音量、增加手势以保持沟通。

人类天生懂得根据环境、状态与任务动态调整“输出”方式。这一本能揭示出人机交互的关键原则:有效的沟通需要根据环境、自身状态和任务状态的变化动态调整输出方式。

基于这一洞察,用户输入应具备“动态适应性”,能主动感知情境变化,智能调度最适宜的输入通道。具体而言,这种适应性体现在三个关键维度:

1)适应环境条件变化:依据环境变化所带来的影响,提供最优输入通道。

说明:如手表进入到游泳模式因物理环境发生改变,会关闭触摸通道,输入通道以物理旋钮与实体按键为主。

2)适应用户状态变化:识别用户实时行为与注意力水平,匹配输入方式。

说明:在驾驶场景中,为减少分神,车机系统会优先推荐语音指令或方向盘上的实体按键输入,而非触控屏幕输入。

3)适应任务状态变化:理解任务不同阶段的核心目标,提供契合的输入支持。

说明:在紧急事件中,系统将跳过复杂操作,直接提供极简交互,如支持挥手、点头等本能输入方式,以最短路径完成关键确认。

有效的沟通,从来不是用固定的方式应对流动的世界。因此,多模态输入的适应性,本质是让系统具备与人类同等的情境应变能力。为不同环境、状态与任务阶段,预判并匹配最适宜的输入通道。如果说协调性中的“资源编排”确立了效率基线、“贴合个人”实现了因人适配,那么“动态适应”则确保了交互在每一次当下发生时的合理性

04 多模态输入:最大程度承接人类的自然表达

至此,我们完成了对多模态输入设计的系统探讨。在基于 AI 推动“机器不断适应人”的背景下,了解交互正从平面走向空间、从单模态走向多模态。能观察到,交互是向着顺应人类本能,契合人类直觉的方向发展。而多模态输入,则对应的是人类的表达本能,其最终目的:最大程度承接人类的自然表达

本文基于人类自然表达的“意图‑行为‑情境”为原型,将其转化为设计思考的 “动机—体验—适应” 框架,系统回应了多模态输入的三个根本问题:

设计动机:为何需要多模态?- 解决效率、准确、流畅的瓶颈;设计体验:如何实现自然协调?- 模态资源合理编排,模态资源贴合个人;适应变化:怎样应对变化?- 动态调度输入通道,适配环境、个人与任务状态;

未来,随着 AI 感知与情境理解能力的进化,多模态交互将超越界面,成为人与世界无缝衔接的交流方式。它以轻量行为承载深远意图,在虚实融合中重新定义交流的边界——表达的极简,源于极致的理解。

 

转载:人人都是产品经理

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

 

image.png

Aura情绪感知型AI音乐应用UI/UX设计解析

丽洁 移动端UI设计文章及欣赏

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

从情绪校准到语音搜索,探索更具情境理解力的音乐体验

图片7.png 

面向产品经理与资深设计师的案例研究

 

导读|从情绪校准到语音搜索,探索更具情境理解力的音乐体验。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位:先回答系统替谁解决什么问题

Aura将音乐推荐从曲风和历史播放扩展到情绪与场景。产品以理解你的心情为核心叙事,通过入门情绪校准、语音或哼唱搜索、智能歌单和歌词翻译,构建更具感知性的音频体验。

图片8.png

1  项目界面与设计细节

二、信息架构:把功能转译为用户的工作顺序

底部导航围绕首页、搜索、资料库和个人区域展开。首页负责主动推荐,搜索承担明确意图,资料库保存喜欢的歌曲、歌单、专辑和艺人;入门流程则收集曲风与情绪偏好,为首次推荐建立基础。结构简洁,符合音乐产品的高频使用习惯。

三、关键交互:从浏览信息走向完成任务

哼唱搜索、语音搜索与多模态输入降低知道旋律却不知道歌名的门槛。情绪校准使用抽象视觉与有限选项避免像问卷,播放页保持传统控制逻辑,减少创新功能对基本操作的干扰。智能归类则把被动收藏转化为可再次发现的内容。

图片9.png

2  项目界面与设计细节

四、视觉系统:品牌表达必须承担信息语义

黑色底色、深蓝与紫色光晕形成沉浸和夜间聆听氛围。大幅人物摄影与渐变光效承担情绪表达,界面元素尽量悬浮和弱边框化,避免破坏音乐的连续性。白色文字和有限高亮保障关键控件在暗环境中清楚可见。

图片10.png

3  项目界面与设计细节

五、面向产品与设计团队的可复用价值

情绪型推荐的设计重点不是制造神秘感,而是让用户持续修正系统理解。产品应允许用户解释不喜欢这首的原因、快速切换情绪并查看推荐依据。设计师需要处理情绪标签的文化差异,避免把复杂心理状态压缩为过度简单的颜色。

六、专业审视:仍需补齐的体验边界

情绪数据具有敏感性,入门环节应说明采集目的和保存方式。AI语音与哼唱识别需要明确等待、失败和结果置信度。深色渐变虽然表现力强,但列表页应提高文本与背景对比,并提供减少动态效果的可访问性选项。

图片11.png

4  项目界面与设计细节

结语:设计的最终判断标准是业务与使用价值

Aura的启示是,AI可以让音乐产品更贴近当下情境,但体验价值仍取决于控制感。推荐越个性化,用户越需要知道如何调整、删除或重置系统对自己的理解。

编辑说明|本文依据所给设计图片进行专业分析,侧重产品策略与体验方法,不构成对项目真实运营数据或技术实现的事实认定。

 

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

关键词:UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

Kinetech Construction建筑协作平台UI/UX设计解析

丽洁 交互设计及用户体验

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

图片1.png 

面向产品经理与资深设计师的案例研究

 

导读|将项目、团队、文档与AI助理整合为施工协同工作台。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位:先回答系统替谁解决什么问题

Kinetech Construction面向分布式建筑项目团队,尝试解决现场、办公室和外部合作方之间的信息断裂。产品把任务、文档、动态、项目数据与AI辅助集中到一个平台,以协作上下文取代零散聊天和附件传递。

图片2.png 

1  项目界面与设计细节

二、信息架构:把功能转译为用户的工作顺序

桌面端以OverviewAnalyticsChannelsOrdersCalendarFiles为主线,既覆盖项目管理,也保留沟通与资料入口。首页把待办、最近@提醒、文件等待和项目状态放在同一视野中,帮助用户从团队动态迅速转入具体工作对象。

图片3.png 

2  项目界面与设计细节

三、关键交互:从浏览信息走向完成任务

项目卡片与通知采用可直接回应、指派或忽略的轻量操作,减少来回跳转。动态流中的标签、提及、音频和附件保留事件上下文;AI助理可以研究项目需求、生成检查清单并关联文档,使其成为工作流的一部分,而非脱离项目的通用问答框。

四、视觉系统:品牌表达必须承担信息语义

深海军蓝传递工程可靠性,桃色用于人、提醒和需要注意的状态,为典型蓝色B端产品增加温度。品牌页面使用大型建筑摄影与细网格,后台则回归白底、高密度卡片和清晰表格,形成传播层与工作层的有意识分工。

图片4.png 

3  项目界面与设计细节

五、面向产品与设计团队的可复用价值

项目管理产品应围绕对象和责任设计,而不是围绕功能菜单设计。每一条消息都要能追溯到项目、文档、人员和截止时间;每一个AI建议也应能够转化为任务或检查项。产品经理需要先定义跨角色协作协议,设计师再据此组织信息与状态。

图片5.png 

4  项目界面与设计细节

六、专业审视:仍需补齐的体验边界

模块较多可能导致导航与权限复杂度快速上升。建议为现场人员、项目经理和管理层建立角色化首页,并在移动端突出拍照上传、审批和异常提醒。AI生成内容应保留来源、版本和负责人确认,避免错误建议直接进入施工流程。

图片6.png 

5  项目界面与设计细节

结语:设计的最终判断标准是业务与使用价值

Kinetech呈现了一种更成熟的建筑协同思路:沟通不是独立频道,数据也不是静态报表,它们都围绕项目对象持续累积。平台的竞争力最终来自上下文连续性,而不只是功能数量。

编辑说明|本文依据所给设计图片进行专业分析,侧重产品策略与体验方法,不构成对项目真实运营数据或技术实现的事实认定。

 

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

 

image.png

日历

链接

个人资料

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

存档