首页

深度拆解产品 0-1 全链路设计逻辑 —— 兰亭妙微实战进阶 01

涛涛 设计思维

“能完整搭建产品叙事、定义用户场景与服务流程的设计者,才能真正掌握产品未来的走向。”
每一位体验设计师都渴望完整跟进一款产品从 0 到 1 的全流程,完整吃透业务底层逻辑,既能大幅沉淀系统化设计思维,也能建立完整的产品全局认知。但实际项目中,多数设计师仅承接成熟产品碎片化迭代需求,缺少完整前期探索经验,面试复盘、项目复盘时极易逻辑断层。本文结合兰亭妙微数百个政务、工业、企业管理系统落地案例,完整拆解产品立项前探索期全套设计动作,交付落地、上线迭代内容将在后续篇章分享。

用户研究方法(一):兰亭妙微实战拆解,用研分阶段落地场景

涛涛 交互设计及用户体验

在以用户为中心的全链路产品设计体系中,用户研究是兰亭妙微所有项目的底层支撑。我们深耕 B 端工业软件、大数据可视化、政企管理系统、移动端 APP 设计,服务 2B、2C、2G 多类型客户,依靠标准化用研流程打通商业目标与用户真实诉求。用户研究核心是挖掘用户特征、核心需求、真实使用场景、操作行为与心理预期,依托调研输出分层用户画像,结合产品不同生命周期匹配适配调研手段,精准匹配对应阶段目标人群需求。

体验设计师进阶充电指南|兰亭妙微实战能力提升全解析

涛涛 交互设计及用户体验

在 UI/UX 行业深耕多年后不难发现,市面上各类设计师能力分级表格大多只是标准化能力清单,仅能作为基础参考,无法完整衡量一名设计师的真实成长高度。很多初中级设计师能熟练掌握部分高阶技能,却卡在综合能力短板上难以晋升。兰亭妙微团队结合多年 B 端、C 端项目实战经验提出:真正的设计进阶,不止打磨视觉、交互本职功底,更要向上补齐市场、数据、用户、落地、战略等上下游综合能力,跳出执行层视角思考业务全局。下文结合团队落地经验,拆解六大核心进阶能力,为体验设计师提供清晰成长路径。

兰亭妙微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设计公司分享: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设计文章及欣赏

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

兰亭妙微ui设计公司分享:五种视觉差异化创作方法,解决设计同质化与画面平淡问题

清阳 设计资源

兰亭妙微ui设计公司分享:做设计时你是不是也总踩坑:图纸完整、逻辑没问题,可交稿后老板一句 “太平了,不出彩”,瞬间不知道怎么优化?
 
前段时间我就因为作品缺乏记忆点被提点,总监特意整理了一套通用创意手法,图标、IP 吉祥物、平面海报全都适用,吃透这 5 种思路,再也不怕设计同质化。

01 改变比例:打破常规视觉,图标快速出圈

 

这是做图标最省事、出效果最快的技巧。大众早已习惯万物标准比例,稍微调整局部尺寸,就能立刻跳出大众审美。
  • 铅笔造型:拉长笔杆、放大笔尖,弱化常规均衡感;

    image.png

  • 交通工具:轿车拉高车顶、放大车轮;飞机加粗机身、缩短机翼;image.png

    image.png

    很多动画里的趣味载具,本质都是靠夸张比例制造反差。
     
    只要改动局部长宽、大小配比,普通图形马上拥有专属辨识度。

02 元素替换:局部巧置换,兼顾创意与行业属性

相比单纯改尺寸,元素替换更考验巧思:保留物体完整轮廓,只替换局部配件,既要贴合本体形态,又要融入行业符号,做到和谐不违和。
  1. 节庆灯笼:把底部流苏替换成品牌所属品类的叶片;

    image.png

  2. 铃铛图形:内部金属圆珠换成闪电造型,适配科技类视觉;

    image.png

  3. 游戏手柄:功能按键替换成趣味表情符号,增加活泼感。

    image.png

     
    核心逻辑:大轮廓不变,用细节替换传递主题,创意含蓄不突兀。

03 元素组合:跨界拼接,IP 吉祥物核心创作法

和 “局部替换” 区分开:元素组合是把两个完全无关的完整事物融合重构,是吉祥物、卡通形象设计的万能公式。
 
经典组合思路参考:
  • 果蔬 + 动物:番茄 × 猫咪、蘑菇 × 小鸡、大葱 × 小鸡;

    image.png

  • 物品 + 生物:鸵鸟 × 羽毛球。

    image.png

     
    两种载体特征互相保留,拼接后诞生全新形象,既有辨识度又自带趣味故事感,非常适合品牌 IP 创作。

04 形状变化:替换基础轮廓,制造差异化基底

所有物体都有原生基础造型,圆柱、圆形是最常见的基底,把底层几何形态更换,整体气质会完全翻新。
  • 医疗针管:原生圆柱形改为方形管身,硬朗简约,适合医美、医疗器械视觉;

    image.png

  • 被咬过的苹果:常规圆形果身改成三角形基底,小众独特,适合潮流文创图标。

    image.png

     
    不用修改物体结构,仅更换底层几何面,低成本让基础图形摆脱普通感。

05 大小对比:夸张反差,海报强视觉张力利器

主打平面海报、主视觉设计,依靠极致大小对比制造视觉冲击,快速抓住观众视线。
 
原理是刻意放大主体、缩小配角,用尺寸落差制造戏剧感:

image.png

  • 趣味 IP 海报:巨型太阳鸭搭配微小背景场景;
  • 创意警示画面:迷你人物搭配巨型炸弹。
     
    一巨一微的强烈反差,天然形成画面焦点,完美解决海报 “画面平、无重点” 的通病。

 

 

转载:站酷

 

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

 

image.png

ANT阿拉伯语个人金融应用UI/UX设计解析

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

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

图片1.png 

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

 

导读|RTL语言、资产聚合与本地化金融认知的统一设计。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

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

ANT是一款面向阿拉伯语用户的个人资产与消费管理产品。它把银行余额、月度支出、投资组合和消费分类集中到移动端,重点并非复制西方金融应用,而是通过RTL阅读方向、货币单位和本地消费品牌建立真实的区域适配。

图片2.png 

1  项目界面与设计细节

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

首页优先显示总资产与账户构成,随后呈现预算进度和常用操作;资产页用折线与明细解释变化,消费页用分类环图建立结构认知,投资页则强调计划与长期收益。层级从我有多少逐步过渡到钱去了哪里、下一步如何配置

图片3.png 

2  项目界面与设计细节

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

设计在RTL环境中保持导航、数字、图表和图标方向的一致性,这是本项目最关键的体验基础。筛选器、日期范围和交易详情采用分层进入,避免在首屏堆叠大量字段;预算条和资产趋势采用可比较的视觉编码,帮助用户快速发现超支与波动。

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

深蓝和高亮紫色构成稳健又具有数字感的品牌基调,白色内容面板保障金融数据可读性。背景中的流体3D形体承担品牌记忆,不侵入实际操作界面。绿色、橙色、红色用于预算状态,形成直接但不过度戏剧化的风险表达。

图片4.png 

3  项目界面与设计细节

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

本案例提醒产品团队,本地化不是翻译字符串,而是重构阅读顺序、数字格式、支付习惯和信任线索。设计系统必须同时验证阿拉伯语长文本、混排数字、图表轴向及图标含义;研究阶段也应覆盖不同金融素养用户,而非只依赖熟练投资者。

图片5.png 

4  项目界面与设计细节

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

环图的分类数量较多,移动端阅读可能依赖图例来回匹配,建议提供可点击的类别排序列表。资产与消费页面还应增加数据同步状态、异常交易解释及隐私控制。对于投资建议,必须清楚区分教育内容、模拟预测和受监管建议。

图片6.png 

5  项目界面与设计细节

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

ANT的成熟之处,在于把地域文化、RTL交互和金融任务放进同一设计逻辑。真正可靠的全球化产品,不是用统一模板覆盖更多市场,而是在统一品牌中允许不同用户按照自己的语言和认知方式完成决策。

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

 

image.png

打造高效 AI 营销对话界面,兰亭妙微交互设计实战分享

涛涛 交互设计及用户体验

数字化营销浪潮下,AI 对话交互已成为 B 端投放平台的核心载体。商业投放类产品以任务为核心驱动,一套适配营销全流程的对话界面,既能降低操作门槛、提升投放效率,也能直接拉动业务转化。区别于休闲闲聊类 AI 工具,广告投放场景链路繁杂、数据维度多、用户专业度分层明显,因此交互设计需要分层引导、精准控参,平衡自然对话与精细化操作。兰亭妙微深耕 B 端 AI 交互设计十六年,依托多款营销 SaaS 落地经验,以智能投放平台为实践载体,拆解覆盖投前、投中、投后全流程的三层对话交互体系,打造高效、可控、易上手的 AI 对话界面。

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

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

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

用清晰的预算、交易与预测体系降低企业财务决策成本

图片1.png 

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

 

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

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

Finexa面向需要统一管理账户、预算、订阅支出与财务预测的中小企业。产品把原本分散在银行账户、表格和报表中的信息收束为一个连续工作台,并以AI预测作为前置决策支持,而不是在末端添加一个孤立的聊天入口。

图片2.png 

1  项目界面与设计细节(素材组4

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

导航以OverviewTransactionsAccountsBudgetsAnalyticsReports构成稳定骨架,符合财务人员从概览到核对、从计划到复盘的工作顺序。首页将现金余额、预算利用率、支出分类和现金流预测并置,使管理者能够先判断整体健康度,再下钻到交易或账户明细。

图片3.png 

2  项目界面与设计细节(素材组4

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

预算卡片同时表达额度、已用比例、风险状态和快捷调整;交易表保留筛选、状态、分类及导出,适合高频核对;定期付款单独成页,帮助用户提前识别隐性固定成本。预测图强调时间趋势和异常区间,交互重点不是看图,而是让用户从异常直接进入可处理对象。

图片4.png 

3  项目界面与设计细节(素材组4

图片5.png 

4  项目界面与设计细节(素材组4

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

白底与低饱和紫色建立理性、轻量的金融科技气质。紫色用于主趋势和关键按钮,绿色与红色被克制地限定在正负状态,避免报表变成高噪声信号板。大留白、细边框和轻阴影让高密度数据仍保持可读,设备场景图则加强品牌传播的产品感。

图片6.png 

5  项目界面与设计细节(素材组4

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

这套设计说明,B端财务产品的体验核心不是减少数据,而是建立正确的层级与比较关系。产品经理应先确定管理者、财务执行者和审批者的核心任务,再决定同一数据在概览、列表和报表中的不同表达。设计师则需要建立统一的数字格式、状态色与表格交互规范。

图片7.png 

6  项目界面与设计细节(素材组4

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

方案仍需补强数据可信度:预测模块应标注模型依据、置信区间与最后更新时间;金额卡片要支持币种和会计周期切换;导出、审批和预算调整等高风险操作需要更明确的确认与审计记录。移动端不宜照搬桌面信息密度,应聚焦审批、提醒和关键异常。

图片8.png 

7  项目界面与设计细节(素材组4

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

Finexa的价值在于把财务管理从事后看报表转向事前发现风险、事中控制预算。当信息架构、指标语义和操作权限形成一致体系,AI预测才能真正进入企业决策链,而不是停留在展示层。

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

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

 

image.png

日历

链接

个人资料

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

存档