首页

兰亭妙微ui设计公司分享:从一个球开始,手把手教你用 Figma 绘制拟物图标

清阳

兰亭妙微ui设计公司分享:在当下的 UI 设计中,拟物风格依旧大量运用于装饰类图标。很多设计师会直接寄希望于 AI 生成,但想要产出适配项目页面、符合业务需求的拟物图标,AI 往往很难一步到位,依旧需要我们手动绘制打磨。
轻拟物图标上手门槛并不高,只要吃透底层规律,掌握软件基础操作,就可以做出精致质感。和素描练习从石膏球体入门一样,绘制拟物图标,最好的练习起点就是画圆,借助球体理解光影逻辑。

一、拟物图标的三大核心构成

image.png

拟物质感的实现,本质是对形体、光影、材质三大要素的综合塑造。
形体即物体的轮廓与外形,根据设计目标,可以走向高度写实,也可以做简约化处理。在形体当中,透视关系是不可忽略的关键点。

image.png

透视遵循现实世界 “近大远小” 的成像规律。以正方体举例,带透视效果时,物体侧面向远端会逐步收缩变小;无透视的平行构图,各个侧面不会产生收缩,上下边线保持平行等高。
设计师作图时,可以选择做透视,也可以选择平行视角,但切忌两种透视逻辑混用,这代表空间逻辑没有梳理清楚。
 
同时图形的摆放角度,会直接决定后续光影的呈现效果。这也是素描练习优先练习球体的原因 —— 球体不存在角度变化,光影逻辑更简单,适合入门。
光影,是物体受光后形成高光、反射光,以及被遮挡光源产生投影的整套体系。同一个圆形,在单一光源照射下,会形成完整的明暗体系。

image.png

 
物体只有受到光照,表面才会脱离纯色填充,以此还原物体本身的曲面弧度。因此绘制任何拟物图形,第一步就要确定光源方向,以此定好受光面、投影的位置。

image.png

材质,代表物体表面的物理属性。它既决定表面纹理肌理,也决定物体对光线的反馈方式:镜面材质光滑、反光强烈;磨砂玻璃则反光微弱,自带通透模糊的特质。
形体、光影、材质,是拟物设计的底层美术原理。今天我们练习的并非极致写实的复古拟物,而是经过简化的轻拟物风格。不必把所有美术知识点全部吃透再动手,可以在实操过程中边做边理解,学习效率更高。

image.png

二、实操:绘制玻璃拟物质感球体

本次实操以 Figma 为例,全程仅用到矢量图形、填充、描边、图层效果等基础功能,Sketch、即时设计、MasterGo 等同类工具,都可以复刻这套流程。
Step1:绘制基础圆形

image.png

新建画布,绘制一个 100‑200px 的正圆,为圆形填充基础底色。
Step2:径向渐变搭建球体明暗基调

image.png

设定球体为镜面玻璃材质,光源来自画面正上方。球体上半部分受光更亮,下半部分偏暗,因此给圆形添加径向渐变,依靠渐变确立球体整体明暗关系。
Step3:添加柔和高光

image.png

在球体顶部绘制不规则椭圆作为高光,设置垂直方向透明度渐变,让高光向下自然衰减消失。
 
⚠️注意:高光来自光线折射,会受物体固有色影响,不要直接使用纯白色,选用和球体相同色相的高明度颜色,质感会更加真实。
Step4:手动绘制真实投影
 
投影是体现空间感的关键。
 
软件自带的图层投影效果,光源默认来自观察者视角,适合背景与视线垂直的场景;而本次光源来自顶部,球体悬浮在基底之上,自带投影无法还原这种物理关系。
正确做法:手动绘制投影。新建一个尺寸略小于球体的深色椭圆,放在球体底层,添加图层模糊,模拟物体投射在底部的阴影。
做到这里,球体已经具备基础光影,但整体效果偏生硬粗糙,想要通透的玻璃质感,还需要补充多层细节,所有细节都要有物理逻辑作为支撑。
Step5:叠加有色透射投影

image.png

玻璃球体具备透光属性,光线穿过球体后,会把球体本身的色彩投射到底部。在原有投影之上,叠加一层带有球体固有色的模糊投影,还原光线透射效果。
Step6:制作底部折射反光

 

image.png

光线穿透玻璃球体之后会向内折射,光线会在球体底部聚集提亮。这不属于明暗交界线,是透明材质独有的光学特征。
 
单独绘制图形,搭配渐变 + 图层模糊,做出球体底部聚集的反光效果。
Step7:表层叠加受光高光

image.png

 
观察现实中的玻璃珠可以发现:一部分高光会产生在表层之下,同时物体表面也存在直接受光面。
 
再绘制一层椭圆模糊图形叠加在球体上方,丰富高光层次,弱化生硬感。
Step8:渐变描边表现球体厚度

image.png

给圆形添加描边,使用线性渐变,模拟球体边缘的厚度效果。球体顶部远离反光,描边颜色更深;底部接收环境反光,描边呈现高亮。

image.png

完成以上步骤,一颗通透的玻璃拟物球体就制作完成。我们还可以在球体上叠加图标图形,直接得到一枚玻璃质感的拟物按钮。
拟物设计的核心感悟:
 
拟物没有强制标准,你可以做复杂写实,也可以做极简轻量化,二者没有优劣之分。每一处添加的细节,都要能够对应现实世界的物理特性,画面才会真实可信。
学习拟物设计,本质是理解基础美术原理,再结合软件实现视觉效果。工具只是手段,对光影、材质、空间的理解,才是设计的内核。
 

转载:优设

 

 

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

 

image.png

兰亭妙微ui设计公司分享:《AI 体验设计》第 3 部分:指导原则

清阳

兰亭妙微ui设计公司分享:AI 体验设计的边界正在被重塑,从亚马逊 Go 的无感支付到自动驾驶的责任博弈,传统的交互逻辑已难以为继。本文基于人机交互与服务设计理论,提炼出五大维度设计原则,深度解析如何在黑箱算法与用户信任之间构建透明的桥梁。

当我和罗伯塔·塔西(Roberta Tassi)开始思考有助于指导 AI 体验设计的原则时,我们从唐·诺曼(Don Norman)的人机交互原则,以及埃琳娜·帕琴蒂(Elena Pacenti)在米兰理工大学攻读博士学位期间所制定的服务设计准则中汲取了灵感。

这些内容一直是我们工作的基本准则。例如,透明性原则几乎已成为每个服务提供商的必备要素,它对于让用户能够理解自身选择至关重要。但在 AI 的新环境下,这意味着什么呢?

我们开始探索这些原则,并确定影响基于 AI 的服务与体验设计的最关键变量。

有些变量是功能性的,用以界定人与技术组件及底层服务之间的交互。另一些变量则更多与审美价值相关。我们着重去理解那些能引发有意义问题、进而催生有趣设计的变量。

首先要考虑的一组原则,通常与可供性以及它们在基于 AI 的服务中如何变化相关:

1.可见性:这对于零交互/自动化服务尤为重要。我们需要设计 “负可供性”,向用户表明在新服务中,他们原有的一些交互模式可以摒弃,并指出新的交互模式是什么,即便我们希望新交互模式直观且无形。这有助于避免类似自动水龙头带来的那种困惑,因为传统交互方式在自动水龙头场景中被取消了。

2.心智模型:我们必须处理好用户针对像亚马逊 Go(Amazon Go)这类自动化服务所形成的心智模型。在这类服务中,我们要求用户摒弃旧有的服务使用模式。用户必须学会在进入时签到,而无需在离开时签出,这意味着一种全新的服务流程。我们必须考虑这一过程中的学习曲线以及所需的所有沟通环节。

3.透明性:鉴于机器学习的技术复杂性和黑箱问题,这或许是最具挑战性的原则。传统上,透明性意味着明确预期,或者让用户在等待时知晓正在发生什么(比如包裹追踪)。然而,我们现在必须考虑两个层面的透明性:其一,我们需要向用户更清晰地呈现技术限制。例如,用户需要明白 Echo 设备要么说话要么倾听,如果在 Alexa 还在说话时他们就开始发言,其询问可能无法被正确解读。其二,我们需要追踪 AI 可能代表用户采取的行动,并明确是哪些具体的用户输入或 AI 对其行为的解读导致了该行动。(例如,如果我的 AI 助手一直给我买巧克力,我想知道这是基于我的习惯、它对我心理状态的解读,还是供应商推送的促销活动。这就是所谓可解释 AI 应用的一个场景。)

4.可解释性:AI 的出现催生了一个重要的新原则。这既涉及用户理解系统中正在发生之事的能力,也关乎AI所采取行动的可问责性。它与 “让用户深入了解系统运作机制” 的理念相关。目前有朝着可解释 AI(XAI)方向的尝试,这应该遵循这一原则。

第二组原则涉及用户应如何在不同方面保持对系统的控制权:

1.退出自由:在传统系统中,这指的是随时停止交互的能力,比如我改变主意时能从 ATM 机取回银行卡。然而,随着谷歌、亚马逊这类更复杂系统的出现,理解用户的退出自由究竟意味着什么变得至关重要,特别是在如何安全取回他们的数据方面。

2.容错友好性:在传统系统中,容错友好性意味着允许人工操作者犯错而不引发严重问题。但对于智能代理而言,我们可能需要设计这样的系统:确保用户能接受一定程度的系统故障,并明确用户与 AI 代理之间责任如何划分。最近,自动驾驶汽车中多起涉及自动驾驶仪的事故使得这一原则问题尤为突出。

3.持续参与:关键在于考虑如何让用户知晓情况,并赋予他们干预和重新引导系统的能力,还要设计出能提供清晰及时反馈以实现这一点的系统。用户必须明白何时可能需要重新接管控制权,并且应为他们有效执行这一操作创造条件(例如,在自动驾驶汽车场景中,由于机器在控制,用户常常会感到无聊和分心)。这不仅对控制 AI 很重要,对人类保持自身技能和知识水平、以便在技术故障时仍能手动执行操作也很关键。

第三组原则与适应性以及这些服务如何应对不同情况相关:

1.学习能力:从用户反馈中学习并随时间不断改进的 AI 服务,是这项技术的自然产物。它们能够实现个性化体验,适配用户的需求和偏好。这一特性是许多成功的基于 AI 服务的关键要素。

2.灵活性:这是设计 AI 服务的一项关键原则,它使系统能够随时间推移进行适应和演变。这包括整合新数据和用户反馈的能力,以及响应不断变化的用户需求和偏好的能力。一个灵活的 AI 系统还能更好地处理意外情况和异常状况,提供更流畅、直观的用户体验。总体而言,以灵活性为导向进行设计,能让 AI 服务持续改进,在不断变化的环境中保持相关性。

3.多模态交互:该原则指的是为用户提供多种交互方式,如语音、文本和手势识别,还包括结合不同交互方式以实现更流畅的体验。通过提供多种交互方式,AI 服务能更好地满足用户偏好,并适应不同的使用场景,使整体体验更具灵活性和易用性。

4.情境感知:对于设计能有效适应不同情境的 AI 服务而言,这是一项至关重要的新原则。例如,用户在工作或从事其他专注活动时,可能不希望被打扰。AI 服务应设计为能够检测并响应这些情境,提供适应特定情况的差异化体验,而非采用一刀切的方式。挑战在于打造能够识别并适应用户情境的服务,提供流畅且个性化的体验。

···

接下来谈谈与美学相关的原则,我们可以思考能提升体验的元素。

一致性:

第四组原则更多涉及服务在美学和情感方面,也与品牌体验和认知相关。

1.共享且一致的语言:这既体现在服务与用户之间共享的语言,也包括契合情境的语言(不能是用户听不懂的官僚或技术语言的 AI )。服务语言在用户访问的各种平台和情境中也应保持共享且一致。

2.共享价值观:这对用户与服务的匹配至关重要。此前我们在一定程度上看到过例子,比如当前的地图应用重视效率和速度,而用户可能更看重路线体验。我们需要找到传达这些价值观或适配用户的方式。

3.可及性:AI 服务看似可及性问题较少,因为自然语言界面可能克服操作按钮和触摸屏的一些限制。然而,我们已经看到不同语言的服务在可及性方面存在显著差异。另一个方面是对不断增加的带宽和处理能力的需求,这可能在有能力使用高质量 AI 服务和无力承担的人群之间造成新的数字鸿沟。

4.伦理道德:这是一个宽泛的范畴,不止涉及单一原则,目前在技术和设计背景下都有讨论。设计师应考虑将道德准则融入 AI 服务的功能中,并评估该技术潜在的伦理影响。他们必须留意服务对社会的潜在影响,确保其符合伦理价值观和原则。然而,在某些情况下,这些伦理方面可能与一致性原则相悖,因为一些伦理考量可能高度基于具体情境,需要兼顾多样性和差异。

第五组原则旨在帮助人们在使用 AI 服务时感到自在,并且感受到被尊重,从而营造舒适的 AI 体验。

1.外观、特性与氛围:这些元素通过品牌形象视觉化、色彩和声音等接触点来传达服务的核心。对于常常超越屏幕交互的 AI 体验而言,理解如何持续传递品牌价值,以及像语气或特性等其他方面怎样用于打造不同且独特的体验,这一点至关重要。  

2.个性化:这是将智能融入服务所带来的最大优势之一,但它引发了关于个性化程度的疑问。传统上,服务和品牌的创建会考虑特定价值观和目标受众,但个性化可能会挑战这一模式,使服务适配每个特定用户的偏好。例如,是否仍需要多种打车服务,还是一个统一整合的平台就能提供足够的个性化服务以满足每个人的个体需求?品牌及其价值观的概念会被每个用户的价值观和需求所取代吗?

3.谨慎性:虽然 AI 利用用户行为数据实现个性化体验有益处,但谨慎行事很重要,不能让用户感到尴尬或不适。AI 应融入用户偏好的做事方式,避免造成尴尬局面。例如,如果 AI 收集了大量用户数据,它应利用这些信息提升用户体验,同时尊重用户隐私。设计师在利用数据支持服务行动时,应思考如何融入惊喜元素和自然交互,不让用户感到不适或隐私被侵犯。

总之,AI 体验的设计原则复杂且多面,融合了传统服务设计、伦理道德和美学等方面的元素。随着 AI 越来越融入我们的日常生活,设计师必须考虑这些原则,打造不仅功能实用、高效,而且能让用户享受其中,并尊重用户价值观和偏好的服务。

 

转载:人人都是产品经理

 

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

 

image.png

兰亭妙微ui设计公司分享:大厂实战复盘:QQ 浏览器 QBot AI 品牌全案升级设计

清阳

核心命题:成熟工具产品,如何借 AI 升级重塑品牌活力?

A兰亭妙微ui设计公司分享:I 技术全面迭代的行业浪潮下,国民级老牌产品 QQ 浏览器正完成核心身份跃迁:从单一信息浏览工具,转型为具备全链路智能能力的 AI 陪伴伙伴。
 
在用户早已形成固化产品认知的前提下,本次品牌升级面临两大核心难题:
  1. 如何搭建独立 AI 子品牌,清晰传递产品新增 AI 能力;
  2. 平衡原有品牌资产与全新 AI 心智,让老用户快速感知产品智能化革新。
     
    下文完整拆解 QBot 从命名、视觉 IP、动态传播、情感化运营到实体周边的整套品牌落地思路。

一、品牌命名:QBot,兼顾传承与差异化的命名策略

团队基于成熟母品牌用户认知,敲定 AI 子品牌名称QBot,实现「传承原有资产 + 塑造 AI 新身份」双重价值:
品牌传承:取自 QQ Browser 缩写 QB,和 QQ 浏览器形成天然视觉、认知关联,老用户无认知割裂;AI 属性点明:后缀 Bot 直接标注智能体属性,直观传递 AI 助理定位;
  1. 行业差异化:名称简洁易记忆,在海量同质化 AI 工具中建立专属识别符号,降低线上线下传播成本。
     
    对用户而言,QBot 是熟悉的 QQ 浏览器延伸,更是能解决各类需求的智能云伙伴;对产品而言,独立品牌名可承载整套 AI 功能体系,实现工具与 AI 能力分层心智运营。

    image.png

二、视觉体系设计:母品牌基因继承 + AI 视觉语言演化

整套视觉设计遵循延续经典,激活灵性核心原则,不凭空创造新视觉元素,拆解 QQ 浏览器原生 Logo 的图形、色彩、字体三大核心资产重组再造。

1. 母品牌视觉基因完整复用

QQ 浏览器经典的「小云」是沉淀多年的用户记忆符号,柔和圆润的云朵自带亲和、可靠的感知,成为 QBot 视觉核心基底:

image.png

image.png

 

2. 核心 IP 符号:从静态 Logo 进化为可交互 AI 视觉接口

QBot 云朵 IP 设计兼顾认知唤醒与价值进化两层表达:
  1. 认知唤醒:完整继承原生云朵形态,依靠大众熟悉的视觉符号降低学习成本,强化和 QQ 浏览器的绑定关系;
  2. AI 价值进化:赋予 IP 完整动态交互能力,可根据操作场景切换神态、动作,把冰冷的 AI 技术转化为有反馈、有温度的拟人伙伴:
    • 交互微反馈:加载转圈、思考气泡、抬头张望、眨眼跳跃等 UI 内置动态;
    • 完整拟人骨架:设计云朵小手小脚,可完成行走、跳跃、变形等全套动画;
    • 人格表达:依靠双眼神态区分情绪,弱化科技距离感,打造 “会思考、懂陪伴” 的智能形象。
整套图形不再只是品牌标识,而是用户和 AI 对话的可视化入口,一眼即可读懂 “智能陪伴” 的产品定位。

image.png

 

3. 延展视觉语法:一套体系适配全场景落地

基于蓝白基础色、圆形、云朵三大基础元素,搭建灵活可拓展的设计语法:
  • 渐变分层蓝色可适配科技向宣传物料;
  • 简化纯色云朵图形适配轻量化运营素材;
  • 流畅曲线线条作为辅助图形,贯穿视频、周边、线上页面全渠道;
     
    既保证长期品牌视觉统一,又给不同主题运营活动留出充足创意演绎空间,实现长效辨识度与持续新鲜感平衡。

 

image.png

 

 

转载:优设

 

 

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

 

image.png

兰亭妙微ui设计公司分享:避开这 3 个设计误区,AI 辅助图标质感直接进阶

清阳

兰亭妙微ui设计公司分享:如今 AI 已大幅降低图标创作门槛,但很多设计师用 AI 产出的图标依旧粗糙违和。想要做出专业成套图标,先避开三大高频踩坑点,看完就能落地优化。

一、表意模糊:好看远不如看得懂

image.png

图标核心使命是高效传递信息,识别优先级永远高于视觉美观。
 
不少新手创作容易堆砌多余元素,造成语义混乱。就像学员早期作业,强行叠加无关图形,用户无法第一时间读懂图标功能;经过优化后的版本,提炼核心符号,表意直观且保留统一设计风格,成熟度明显提升。
补充实战细节:若图标旁配有配套文字说明,可适度简化图形表意;但纯独立图标、无文字辅助时,必须保证符号通用易懂,降低用户识别成本,这也是线上项目最常用的取舍逻辑。

二、画面曝光:明暗失衡拉低精致度

image.png

提亮高光、增加层次是图标美化常规操作,但过度提亮极易造成大面积曝光,画面发灰、细节丢失,整套图标廉价感十足。

实操修复技巧

  1. 手动绘制图标

    image.png

     
    纯白色固有色是曝光元凶,亮部叠加高光后完全丢失层次。基础底色选用浅灰色,预留明暗差值,叠加高光后层次分明,不会出现发白糊边问题。
  2. AI 生成图标曝光修复

    image.png

     
    AI 产出的高光溢出图标修复逻辑一致:在曝光发白区域填充低饱和度灰色,压缩明暗反差,快速找回图形轮廓与细节。

三、造型割裂:整套图标缺乏统一视觉语言image.png

成套图标最容易出现长短参差、元素繁简差距过大、体量失衡问题,单看尚可,组合在一起杂乱不协调。

标准化统一方案

  1. 方形栅格约束

    image.png

     
    所有图标统一适配正方形可视栅格,长条图形适度收窄、高耸图形适当压缩,让每一枚图标视觉体量趋近均等。
  2. 负空间填充平衡

    image.png

     
    以正方形底色作为基准框,针对留白过多的图标,搭配辅助装饰元素填充空白区域,统一整体占位大小;同步规范圆角、描边粗细、倾斜角度,从骨架实现整套风格统一。

总结

使用 AI 辅助图标设计,牢牢守住三条核心准则即可规避绝大多数低级问题:
  1. 语义优先,保证图标表意清晰易懂;
  2. 把控明暗,规避高光曝光丢失细节;
  3. 统一造型,依托方形栅格平衡视觉体量。
掌握这三点,无需复杂技法,就能快速提升整套图标的专业质感。
 

转载:优设

 

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

 

image.png

兰亭妙微ui设计公司分享:作品集植入 IP 形象加分全指南

清阳

兰亭妙微ui设计公司分享:不少 UI、品牌设计师都在纠结:作品集里要不要加入 IP 形象?如果要做,如何呈现才能成为加分项而非累赘?本篇结合移动端项目实战逻辑,完整拆解 IP 形象认知、合格 IP 评判标准、作品集落地展示方法,帮你避开无效包装误区。

一、APP 产品里的 IP 形象核心认知

image.png

IP 形象早已深度融入移动端设计,阿里动物园系列就是大众最熟悉的成熟商业案例。先理清核心定义:

image.png

IP 形象是将抽象品牌理念、产品文化具象化,塑造出拥有完整人格、高记忆点的卡通角色 / 实体形象。它在 LOGO 之外搭建第二层视觉识别体系,核心价值是搭建产品与用户的情感桥梁,也是情感化设计的核心载体。
在 APP 场景中,IP 的情绪缓冲作用十分突出:加载页面用 IP 动效消解等待焦虑、操作反馈搭配专属动作提升交互趣味、空状态形象弱化负面体验,通过视觉人格调动用户正向情绪,潜移默化传递品牌调性。
但早年行业曾出现盲目跟风做 IP 的乱象,大量产品批量上线形象却落地效果极差。想要打造具备商业价值、适合放进作品集的 IP,必须同时满足四大硬性标准,缺一不可:
  1. 形象固定统一

    image.png

    拥有成套稳定的角色设定(如 Line Friends 家族),全套三视图、比例、造型特征统一,能在用户心智中形成牢固记忆;仅零散出现的拟人装饰元素,只能算作页面插画,不属于完整 IP。
  2. 视觉简洁轻量化

    image.png

    适配移动端界面,造型简约、识别性强,不会抢夺界面核心信息视觉权重,扁平化矢量风格适配度最优。警惕流水线 AI 生成的复杂 3D 卡通形象:细节繁杂、适配界面极易违和,不适合作为品牌标准化 IP。
  3. 情绪表达丰富

    image.png

    配套多套表情、动态、肢体姿态,可适配成功、报错、等待、引导等多元交互场景;造型僵硬、无情绪延展空间的形象,仅等同于装饰 LOGO,无法发挥情感化价值。
  4. 完整成熟的设计质感
     
    当下优质商业 IP 供给充足,粗糙、比例失调、配色廉价的形象只会引发用户反感;劣质 IP 放进作品集,反而会暴露设计师审美短板,成为扣分污点。
IP 并非 UI 项目的必备模块,若无法满足以上四点,不如舍弃,强行堆砌只会拉低整套作品专业度。

二、作品集 IP 形象规范落地方法

image.png

满足基础标准后,重点解决:如何完整展示 IP,让面试官看到你的商业落地能力。
 
很多设计师的误区是:只放一套 IP 三视图、多角度立绘。如今 AI 生成全套视图门槛极低,仅靠静态角色图完全无法体现你的设计思考,作品集的核心考察点,是IP 与产品全场景的融合落地应用。
移动端项目中,IP 共有四大核心落地载体,作品集需针对性排版呈现:

1. 界面装饰类

image.png

作为 UI 体系内置视觉组件使用:空白页占位图形、系统默认头像、空数据状态插画、弹窗辅助装饰等,融入界面布局,做到主次层级分明。

2. 交互动效类

image.png

最高频应用场景:加载 Loading 动画、新手启动引导、操作成功 / 报错反馈、直播互动礼物动效、下拉刷新动态形象,直观体现情感化交互设计思路。

3. 社交表情包类

image.png

社区、内容、社交类产品必备,成套表情包适配评论、私信、动态发布场景,展示 IP 情绪延展与轻量化适配能力。

4. 运营物料类

image.png

覆盖产品营销全链路:开屏广告、首页 Banner、节日活动 H5、线上线下活动海报,体现 IP 跨场景商业化延展能力。
载体可根据项目定位选择性展示,但核心原则统一:杜绝 “IP 和界面割裂”。不少反面案例形象风格与产品调性严重冲突(例如茶饮品牌 IP 视觉违和,观感如同日化产品视觉)。
 
造型越简约的 IP,跨界面、跨物料适配容错率越高;造型繁复、装饰堆砌的形象,极易出现融合生硬、画面杂乱的问题。
AI 只是辅助出图工具,无法替代设计师对品牌调性、用户情绪、界面层级的综合判断;建立成熟的 IP 审美与场景适配思维,是区分初级设计师与专业 UI 设计师的关键门槛。

三、提升 IP 审美与设计感知的实用建议

image.png

想要持续精进 IP 设计判断力,日常可以多逛潮玩、盲盒线下门店。近几年国内原创 IP 产业快速成熟,用户对角色人格、视觉质感、故事性的要求持续提高,单一可爱造型已经很难打动用户。沉浸式观察成熟商业 IP 的造型逻辑、配色体系、周边延展思路,能快速建立直观审美认知。
后续若本篇反馈热度较高,会更新一套从 IP 概念草图、人设搭建、动态延展到全场景落地的完整实操教程。

文末评论区核心观点整理

  1. Loading 页搭配 IP 动效,能有效缓解用户等待烦躁感,情感化价值落地直观;
  2. 简约是 IP 适配各类界面的核心关键,复杂形象后续延展隐患极大;
  3. 阿里动物园系列 IP 经过多年迭代,视觉统一、场景适配成熟,是经典学习范本;
  4. AI 快速生成 IP 视图门槛低,作品集务必补充落地应用场景,拉开个人设计竞争力。

 

 

转载:优设

 

 

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

 

image.png


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

兰亭妙微ui设计公司分享:界面改版 | 如何改版更有效(视觉篇)

清阳

兰亭妙微ui设计公司分享:采用 KET 青绿、PET 暖黄双主色区分学段,优化首屏与功能入口,课程阶梯分层排布,实现用户分层、合规运营与商业化转化提升。
优化要点:
❶ 色彩:KET 青绿、PET 暖黄,区分高低阶用户
❷ 头部:Banner 强调测评引流,提升转化
❸ 功能:金刚区按考纲设词 / 听 / 说 / 写四大入口
❹ 课程:分层排布「免费→低价→中班→VIP」,服务不同阶梯用户
❺ 收益:用户分层清晰、内容合规、提升付费转化

image.png

image.png

image.png

image.png

image.png

image.png

image.png

 

转载:站酷

 

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

 

image.png

日历

链接

个人资料

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

存档