网站的诞生始于有人坦白自己害怕购买的东西。它始于他们在午夜输入的搜索词，他们在论坛上反复抱怨的内容，他们几乎信任的竞争对手，以及他们在填写表格前需要的证据。
这就是为什么我不把心理细分视为研究的附录，而是首要的增长要素。如果运用得当，它能为品牌、搜索引擎优化 (SEO)、内容、界面、付费媒体和效果衡量指明方向。而网站正是这些决策最终得以体现的地方。
兰亭妙微ui设计公司分享：UI 界面底层逻辑并不复杂，但不少新手，甚至从业多年的设计师，产出的作品依旧容易给人 “不够高级、不够精致、缺少设计感” 的观感。
出现这类问题，多数时候并非图片素材、色彩搭配或是审美能力的短板，根源往往出在UI 元素的尺寸与间距把控不到位。
我们可以观察一些黑白灰原型稿：仅仅摆放基础界面元素，不添加色彩、插画，整体却规整和谐、视觉稳定，几乎挑不出基础层面的硬伤，这就是做好尺寸与间距带来的效果。
我把这种状态称作界面的 “规整感”：各个模块元素尺寸合理，排布位置得当。抛开交互与用户体验，在视觉基础层面做到无明显瑕疵。
这也是我建议 UI 学习者优先打磨的核心能力。尺寸与间距就是界面的骨架，如同人的骨相。骨架基础没打好，再花哨的配色、装饰，不仅无法挽救界面，反而容易放大问题，让整体画面更加违和。
读懂 UI 的尺寸：固定尺寸与自适应尺寸
尺寸，代表元素在界面内实际占据的空间大小，即元素的长宽数值。UI 设计里主要分为两类：固定尺寸、自适应尺寸。
先看固定尺寸：元素长宽数值固定，不会随内容变化。像导航栏、底部标签栏、按钮、文本，都有对应的合理取值区间。 并非所有组件都有唯一标准答案，更多是合理范围。例如正文字号建议 13‑16px，关注类按钮高度 24‑32px，数值一旦超出区间，就会显得突兀，和整体界面割裂。
按钮、输入框这类复合控件，采用固定尺寸定义背景与边框时，内部图文元素一般做水平、垂直居中，完成内部定位。 这是 UI 入门的基础知识点，但很多设计师遇到复杂组件时，就容易混淆逻辑：五花八门的模块，内容千差万别，很难提前预设一套固定尺寸。这时就需要用到自适应尺寸—— 组件背景大小跟随内部内容自动变化。
举个例子弹窗提示：提示文案可能是一行、两行、三行。如果强行设置固定卡片高度，就需要按照最多文字的场景预留空间，文案少时会出现大量无效留白，观感很差。主流实现方案，就是卡片高度自适应内容。
自适应模式有个关键点：区分内间距 padding 与外边距 margin，对应 CSS 盒模型的两个属性。 内间距提前设定好，组件自适应后的总尺寸 = 内部内容尺寸 + 内间距。
外边距同样承担两种作用：
UI 界面的骨架搭建，本质就是一套尺寸、间距的定义体系。把这套逻辑吃透，就能搭建稳固的界面底层，为后续视觉表现打好地基。
以移动端 C 端动态卡片举例，完整梳理自适应组件的设计步骤：
361‑12×2=337px。这里有一条铁则：同级、同类组件，间距必须保持统一，尤其内间距。如果上下、左右内间距数值混乱，页面会显得松散失衡，是首要排查的问题。
很多设计师会反着操作：先把组件背景框定死，再往里面塞内容。内容和固定背景不匹配时，就强行拉扯、压缩内部间距来 “凑数”。这正是组件凌乱、缺乏精致感的主要原因。
Figma、即时设计里大名鼎鼎的「自动布局」，底层正是这套逻辑。 很多同学误区是上来死磕软件操作，到处给组件套自动布局，却不懂背后的设计逻辑。先理解尺寸‑间距‑内容的关系，再使用工具提升效率，这才是正确顺序。工具只是手段，设计逻辑才是内核。
尺寸间距的把控，不能只靠看懂理论，需要大量刻意练习。 最高效的练习方式：纯原型训练。暂时不去纠结产品逻辑、交互体验、视觉美化，只用黑白灰、基础文字、几何图形，专注打磨界面骨架。
骨架设计和视觉表现可以完全拆分。完成高质量黑白原型，本身就可以充当交互原型，直接给到评审环节，不会额外增加工作量，还能提前规避大量基础问题，提升团队整体效率。
练习素材来源十分灵活：拿自己过往旧稿重新改版；截取线上优秀产品界面，做临摹重构。 练习目标：做到不需要反复思索，凭设计直觉就能输出合理的尺寸参数。给自己定一个小目标：完成一百个界面原型练习。
在日常答疑中，尺寸间距基础薄弱是非常普遍的问题，因此专门整理这篇内容。后续我会带来更多实战改版演示，覆盖移动端、PC 端各类界面。如果你手上有效果不满意的界面稿件，欢迎在社群提交，作为后续改版案例。
转载：站酷
兰亭妙微ui设计公司分享：看似简单的投影，背后藏着大量容易被忽略的细节。
在界面设计中，投影的应用越来越普遍，不管是商业项目，还是 Dribbble 上的概念作品，随处可见各式各样的阴影效果。用好投影，是 UI 设计师必须掌握的核心视觉能力。可即便设计软件的可调参数并不复杂，依旧有很多设计师无法借助投影提升作品质感。本篇将从原理出发，完整讲透 UI 投影的设计逻辑与实操方法。
光影是绘画、摄影的底层基础。
如果没有系统了解光影知识，很容易陷入认知误区：误以为投影只是把物体轮廓直接复刻投射到另一个平面，一个光源只生成单一的影子。但现实世界的投影，虚实层次并不均匀，明暗也存在丰富变化。
光学原理中，不透明物体遮挡光源，影子分为本影与半影（伪本影可合并理解）。本影是阴影最深处，颜色最深；外围逐步变淡、向外弥散的部分，就是半影。
现实环境的光源普遍存在散射特性，光线照射物体时会产生多角度漫射光。重叠最多的光线区域形成本影，光线的极限切线区域，则生成半影。
物体、光源、承接阴影的平面，三者之间距离发生改变，本影、半影占比也会随之变化。反过来，我们可以依靠本影、半影的形态，直接读取画面的空间信息：阴影范围越大、半影占比越高，代表物体悬浮高度越高。
同时，投影也会直接交代光源方向。光源在左侧，阴影就向右侧延展；观察阴影的朝向，就能反推主光源位置与光照强度。
除此之外，投影还能传递更多三维线索：判断元素是贴于平面，还是悬浮空中，感知物体自身的厚度。我们的大脑早已习惯这套现实世界的视觉逻辑，会下意识根据阴影解读界面层级。一旦投影违背光影规律，界面就会产生违和感，直接拉低整体质感。
扁平化盛行的阶段，投影曾一度被大量舍弃，很多人将它视作拟物风格的遗留，担心使用阴影会让设计显得过时复古。
直到 Material Design 推出，谷歌引入了Z 轴的概念：给二维界面赋予虚拟三维空间，元素可以定义和底层平面的垂直距离，而投影，就是用来表达 Z 轴高度的视觉语言。元素 XY 坐标不变，Z 轴数值越大，代表离底层平面越远，悬浮感越强，这份立体感受全部来自投影的暗示。
谷歌官方的 UI 组件参数并非随意设定。拆解源文件可以发现，MD 的阴影由两层叠加而成，对应现实的本影与半影，也常被称作上层阴影（top shadow）、底层阴影（bottom shadow）。
这里有一个关键细节：投影深浅和物体悬浮高度属于非线性关系，阴影由中心向边缘衰减速度逐步加快。但绝大多数设计软件自带投影，只支持线性衰减；在常用平面工具中，只有 Photoshop 可以借助「等高线」功能，复现这种真实的非线性阴影衰减效果。
除了黑白灰阴影，当下设计里彩色投影也十分常见，摄影创作同样会用彩色阴影烘托氛围。但彩色投影不完全是单纯阴影效果，还混杂折射、漫反射色光。做简化理解：可以看作光线穿透半透明物体，投射出带有物体固有色的影子，就像撑开一把绿色遮阳伞，伞下空间会笼罩一层淡淡的绿色。
核心原则：优秀的投影，是能让你感知到它的存在，却不会抢夺视觉焦点。
设计软件自带投影功能，本质是在元素底层复制一份相同轮廓的图形，通过 XY 轴控制偏移，模糊参数实现弥散效果。 物理规律：物体距离承载平面越近，阴影偏移量越小，模糊程度越低；悬浮越高，阴影偏移、模糊数值越大。
假设光源来自顶部，参考 Material Design 双层阴影思路搭建效果：
直接照搬 MD 原始参数，很容易让界面显得脏乱拥挤。非 Material 体系的设计，需要整体降低阴影透明度。纯黑色做阴影，透明度建议不超过 20%，常规区间 5%‑15%。
除了直接调用图层投影，也可以手动复制图层做高斯模糊实现双层阴影：把底层阴影单独拎出来，适当缩小轮廓再向下位移，效果会更加贴近真实光影。
想要彩色投影，直接修改阴影颜色即可；不同色相视觉刺激强度不一样，需要对应微调透明度。如果阴影效果偏弱，可以提高元素 Z 轴（悬浮高度），放大阴影的偏移与模糊。
如果是渐变、图片类元素，手动复制图层的优势会进一步体现：底层阴影图层不填充纯色，直接复用原图或者渐变，再做模糊、透明度处理，得到更通透的彩色投影。
我们不必局限于顶光垂直照射的模式，可以改变光源与平面夹角，模拟更多真实光照场景。
当光源角度压低，阴影会被拉长，投射到物体下方的地面上；搭配透视地面，就可以实现长投影效果。也可以模拟聚光灯，得到轮廓收缩变形的阴影。
还可以模拟实体形变，例如卡片边角翘起，对应位置阴影会随之改变形态。
把现实生活里观察到的光影逻辑迁移到设计中，可以极大丰富视觉表达，这类投影同样适用于作品集样机包装。很多样机高级的氛围感，正是依靠这套自定义阴影逻辑；如果只使用软件自带单层投影，最终效果会显得单薄生硬。
设计稿中调试完成的阴影，交付开发时务必注意：Android、iOS 平台的阴影渲染逻辑，和 Figma、PS 等设计软件输出效果并不完全对等，参数不能直接照搬，需要设计师和开发协同调试适配。
兰亭妙微ui设计公司分享：小屏幕并非筛选体验的原罪，合理的交互设计，可以在有限空间内兼顾效率与易用性。本文将从痛点、布局选型、刷新策略、优化技巧四个维度，完整拆解移动端筛选的设计思路。
移动端筛选的困境，不只是物理屏幕的尺寸限制，而是多重问题叠加带来的体验损耗：
不同的抽屉 / 浮层布局，适配不同的业务目标，没有绝对的优劣，关键看用户任务与筛选条件量级。
筛选入口放置页面顶部，符合用户自上而下的浏览习惯，和列表表头天然契合。 适合：筛选条件少、快速轻量筛选； 不足：面板高度有限，不适合条件极多的复杂筛选。
悬浮在页面内容之上，筛选按钮固定在底部热区，手指更容易触达；背景可保留原有列表内容，用户不会完全脱离上下文。 适合：绝大多数移动端列表场景，消费端、轻量 B 端都很常用； 要点：抽屉不要完全遮挡全部背景内容，保留一点页面预览。
筛选面板从屏幕侧边滑入，背景页面部分保留可见，用户可以对照原有数据做筛选决策，完整保留页面结构认知。 适合：筛选条件多，用户需要对照原始内容进行选择的场景； 不足：会占用横向屏幕空间，小屏下内容展示会受限。
把筛选面板铺满整个手机屏幕，给到充足操作空间，用户完成全部条件勾选后，点击「确定」再返回结果页。 适合：B 端企业级产品、需要一次性叠加大量筛选条件，用户目标明确、目的性强的查找场景； 不适合：边筛选边浏览结果的探索式查找模式。
选型小结： 轻量快速筛选 → 顶部 / 底部抽屉；需要对照原数据 → 侧边浮层；多条件批量勾选的 B 端业务 → 全屏筛选。
选完条件后何时拉取、更新列表数据，直接影响性能和操作体感，分为实时筛选、单项筛选、批量筛选三类模式。
每改动一个筛选项，立刻请求并刷新结果。
案例：Google Fonts，勾选、拖动滑块就即时更新内容。
移动端谨慎使用：每一次操作都触发页面重渲染，容易打断用户操作、意外退出筛选面板。 仅推荐：数据量小、性能极强，且筛选抽屉保持不关闭，后台静默更新结果的场景。大数据、B 端业务不建议采用。
关闭当前子下拉面板时，才触发结果刷新。
优势：减少无效请求，交互流畅；代价是对后端性能有一定要求。
全部筛选条件挑选完毕，用户点击面板「确定」按钮，统一提交请求，一次性刷新结果。 企业 B 端移动端首选方案。 用户可以从容浏览、叠加多个筛选条件，不会频繁触发接口请求； 局限：不适合漫无目的、边试边看的探索式浏览场景，更适配目标明确的数据查询任务。
筛选项过多时，切忌把所有选项全部平铺展示，会造成严重信息过载。
不要什么选项都塞进下拉菜单：
补充：如果数值跨度很大，滑块很难精准定位，建议增加关键数值自动吸附，同时支持手动输入数字，弥补拖拽精度缺陷。
当可选项数量多，逐个勾选效率极低。提供「全选」能力，支持「先全选，再取消少数不需要的选项」，大幅降低操作成本，打车、工单、订单类 B 端产品非常适用。
移动端以手指触控，不要照搬 PC 端细小复选框。放大选项点击区域，采用大按钮、大卡片形式，降低误触概率。
面向重度高频使用用户，支持把常用筛选组合保存为预设方案，一键调用。B 端业务中，运营、业务人员会反复使用同一套筛选规则，该功能可以显著提升效率。
很多团队会完全自定义下拉、弹窗、选择器组件，但往往会和浏览器、系统手势发生冲突，出现滚动异常、浮层错位等 bug，同时增加前端开发负担。
iOS、Android 原生控件经过大量打磨，适配系统手势、握持逻辑，用户学习成本最低。非特殊业务诉求，优先使用系统原生组件，避免重复造轮子。
移动端筛选体验的好坏，从来不取决于能塞下多少筛选项，而在于是否贴合用户真实使用场景。
做好触控点击目标、选对刷新请求逻辑、合理选用布局模式、善用系统原生能力。越理解用户的查询目标与使用习惯，筛选功能就越顺滑好用。
兰亭妙微ui设计公司分享：在从零搭建 B 端后台管理系统的项目中，我最初选择将侧边导航封装为组件，希望解决菜单后期频繁增删改查、全局样式同步的痛点。
但落地后却发现：仅仅简单封装组件，并不能实现预期效果 —— 无法做到全局一键同步更新，展开收起状态、菜单数量、图标、文字内容也很难灵活调整。
大厂设计系统的导航组件完全可以实现这类能力，于是我翻阅大量资料排查问题，最终找到症结：组件修改没有在母组件源文件操作，副本无法同步变更。
这里有一个关键认知：全局同步不等于机械复制粘贴。很多设计师的笨办法就是每一页设计稿重复复制、手动修改导航，一旦后期迭代，维护成本会成倍上涨。除组件同步之外，多端响应式适配也是 B 端导航的高频难题，背后隐藏着大量看不见的维护成本。
本文以 MasterGo 工具为例，围绕 B 端后台侧边导航，完整讲解设计系统组件搭建思路。
如今设备形态越来越丰富，除传统 Web 桌面端，折叠屏手机、平板设备越来越普及。设计师不能只输出单尺寸设计稿，必须重视响应式导航的自动化适配。统一的导航结构、流畅的适配逻辑，直接决定产品整体体验。
Web 端同样对响应式能力有强需求。例如 Arco Design 将侧边菜单宽度限制在 160‑400px，支持拖拽调整导航栏宽度；小红书网页版会根据浏览器视口自动切换布局，宽屏状态侧边导航搭配五列内容，窄屏时切换为底部固定导航。
✨基础概念区分 响应式布局：依靠流式布局 + 媒体查询，一套布局适配全部设备，随屏幕实时调整元素位置、尺寸。常见实现方案：流式布局、Flex 弹性布局、Grid 网格布局、媒体查询。
自适应布局：为手机、平板、桌面等不同设备预先设计多套固定布局，检测设备后加载对应版本。实现方案包含固定布局、流体布局、弹性布局、混合布局、栅格系统。
核心差异总结
动态导航，即支持交互反馈与自适应变化的导航组件。针对 B 端侧边导航，普遍面临 4 大痛点：
即便使用组件库，交付后依旧需要做设计走查，从四大维度校验样式一致性，修改源组件就可以实现全局同步。B 端侧边导航常见问题：
原子设计理论将界面拆解为最小不可拆分单元，通过拼装原子得到复杂界面，实现高复用、易维护的组件体系，分为 5 个层级：
概念辨析 组件化设计：将界面切分为多个独立可复用模块，范围更广。 原子化组件设计：是组件化设计进一步精细化，遵循：单一职责、高内聚低耦合、高复用、可自由组合、易维护、语义化、遵从设计规范。
拓展：原子设计由 Brad Frost 提出，相关参考资源
自动化布局依靠约束规则自动管控元素尺寸与位置，是实现响应式设计的基础。Figma、MasterGo、即时设计原生支持自动布局；新版 Sketch 也已上线该能力。
嵌套逻辑：先给最小元素设置自动布局，再把多个子组件放进父级自动布局容器，形成层级约束。
实操小技巧：设置约束前，先预判增删内容之后页面期望呈现的效果；也可以先建立固定容器，再开启自动布局。 举个例子：按钮高度固定，宽度跟随文字变化，则设置高度固定，左右内边距定值，水平属性设置为适应内容。页面级自动布局可以套用相同思路。
变体是同一个基础组件，修改尺寸、状态、颜色等属性生成不同形态，兼顾统一性和场景多样性，是设计系统灵活复用的关键。
通俗理解：基础组件是篮子，变体就是篮子中不同品类的蛋，按需直接取用，无需重复制作。
变体核心作用
变体设计原则
官网地址：https://www.arco.design/react/components/menu 组件分类：导航‑Menu 覆盖形态：顶部导航、深色导航、折叠内嵌菜单、悬浮菜单等；侧边菜单宽度区间 160‑400px，支持拖拽调整宽度。
基础原子图标组件 菜单折叠、展开图标，子菜单向下 / 向上 / 向右箭头图标。
变体组件划分 垂直一级菜单项、垂直收起菜单项、垂直分组、垂直二级菜单项；弹出一级 / 分组 / 二级菜单项；总菜单组件，支持切换垂直侧边、悬浮、水平顶部三种类型；每一类变体都可配置选中、悬停、禁用、子菜单展开、文本替换等属性。
设计逻辑 侧边导航由菜单条目、子菜单、图标、文本构成；整体分为展开、折叠两大模式；单条菜单包含默认、悬停、选中、禁用状态；同时支持亮色 / 暗夜主题。
B 端侧边栏大多承载 2‑3 级导航，功能模块多时建议做逻辑分组；一级导航普遍图标 + 文字，二级缩进展示文字，三级导航业务场景较少。菜单条目过多，可借助分割线、留白区分模块，高频重要菜单置顶展示。
导航规范文档：https://ant-design.antgroup.com/docs/spec/navigation-cn 布局组件文档：https://ant-design.antgroup.com/components/layout-cn
设计规范要点 侧边垂直导航扩展性更强，适合层级复杂、高频切换的后台系统；菜单数量大于 6 项优先选用侧栏导航，建议层级控制在 1‑3 级。
侧边栏采用左右分栏布局，主导航固定左侧，辅助操作放在顶部。优点是层级展示连贯，方便定位当前页面；缺点是会占用横向内容区域。同时定义完整响应式断点：xs:480px、sm:576px、md:768px、lg:992px、xl:1200px、xxl:1600px。
合理命名方便团队检索、维护组件库，大型项目建议使用前缀区分组件属性。
命名结构：
组件类型_位置层级_特性修饰词
常用关键词
示例： Nav_Side_Collapsible → 可折叠侧边导航 Nav_Top_WithSearch → 带搜索顶部导航
UserProfileuserNameuser_name；全大写蛇形MAX_LENGTH多用于常量。大厂设计规范文档高频使用。user‑profile，CSS 广泛使用。先定义整套系统底层基础 Token：
基于原子，组合出导航完整模块：
响应式模板关键要点
这篇笔记前后历时两个月完成，整理资料过程中了解到 Brad Frost 提出的亚原子设计（亚原子语义 Token），后续还会继续深入学习研究。 导航组件体系庞大，仍有不少知识点有待实践沉淀。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微ui设计公司分享：最近把手机里所有带AI助手的APP都试了一遍，包括支付宝的蚂小财、蚁小保，滴滴打车助手小滴，招商银行的AI理财顾问、飞猪千问定车票等等。
各赛道都在抢着把AI能力塞进自己的产品。
试完之后的感受挺微妙的，大部分AI助手就用过一两次就不再打开了。
坦率的讲，不是这些AI不够聪明。底层模型的能力虽然有差距，但回答问题的水平都已经在可用线以上了。真正拉开差距的是交互设计，就是用户打开你的AI助手之后，整个体验是怎么串起来的。
AI产品的交互设计跟传统APP完全不同。传统交互设计解决的是怎么操作，AI交互设计要解决的是怎么表达意图和怎么建立信任。
行业里目前有两套被广泛引用的设计框架，一套解决前者，一套解决后者。
所以无论是产品经理还是设计师，都应该先掌握AI产品的设计特性，然后针对性的进行自己内部产品的AI升级，而不是看着大家都整小助手，就赶忙上线一个小助手，但用起来根本啥也不是。
你的AI助手能力如何，用户感受如何，下面通过五大领域+六大模式来自查下你的助手吧～
这套框架来自Smashing Magazine 的 AI 界面设计研究，把AI交互拆分成五个功能模块，下面来简单说明一下。
用户怎么把想法传达给AI。这是AI交互的第一步，也是最难的步骤，因为用户的意图往往是模糊的，且需求的来源本身就是把多样。
核心设计要点：提供多种表达通道，如文字输入、语音输入、拍照识别、视频对话等，让用户自己选择使用最顺手的方式。
比如支付宝/豆包等：语音+图片+文本多模态输入，用户可以直接拍一张图问这是什么，不用打字描述，降低了表达门槛。
用户把想法告诉AI了，接下来就是AI怎么把结果交出来，AI生成的结果怎么呈现。不同于传统APP的固定页面，AI的输出是动态的、多维度的，是将最佳可读性的结果呈现给用户。
核心设计要点：结果展示必须可读、可比较、可评估。用户第一眼要能判断靠不靠谱。
比如在设计的时候不要长短大论的文字给到客户，一定是结构化，图文并行的给到客户，比如千问、可灵从开始大大篇报告逐渐给出结构化输出。
AI回答自动拆分为大纲、要点、表格、各种曲线图折线图等多种形式，用户不用自己从一大段文字里提取信息。
AI给的初始结果通常是80分，用户需要微调到95分。这是体验的关键分水岭。
核心设计要点：微调必须即时反馈、所见即所得。操作粒度合适，优先用预设降低决策成本。
AI从给建议升级为替你做。帮你看是一回事，帮你操作是另一回事，信任门槛完全不同。
核心设计要点：执行类操作必须配上确认机制，让用户随时能看到AI将要做什么。
比如AI在工作时，都会告诉你他正在干什么执行到哪一步了，让用户放心，帮你办理业务时，或者在帮你打车时，一定是将执行前的确认交给用户。
AI能力嵌入到用户已有的工具和工作流中，而不是让用户跳到另一个APP去用AI。
核心设计要点：AI的出现时机和位置必须自然，与已有工具的数据和操作必须打通。
比如你用千问集成了各类的能力，不用点外卖去闪购、买票去飞猪，只需要在千问你告诉他帮我下单即可，这样用户对AI助手的依赖就会增强，不会再去点击传统的入口。
以上框架讲的五个功能模块。你可以理解为，一个完整的AI助手，这五个模块的设计都得到位。少了任何一个，体验就会在那个环节断掉。
但这还不够。
你把功能模块都设计好了，用户凭什么相信你的AI？凭什么让AI替自己做事？
这就是第二套框架要解决的问题。
我自己的观察是，大部分AI助手在信任这块做得都比较粗。要么就是什么都不解释直接给你结果，要么就是一股脑把操作都做了也不提前说一声。用户用着用着就慌了，不知道AI在干什么、为什么这么干、干错了、怎么办。
做得好的AI助手是怎么处理信任的呢，主要关注六个设计模式。
六个模式的核心让用户信任AI的六个设计开关，把控制权交还给用户。AI可以执行，但用户必须能预览、能确认、能理解、能质疑、能撤回、能干预。
这套框架来自行业智能体UX模式研究，专门解决一个问题——当AI替用户做事时，怎么让用户信任它、控制它、纠正它。
比如，小滴我告诉他帮我叫一辆回家的车，他会实时展示他当前思考进度，然后跑完结果后给出我确认的地址和时间，然后在帮我匹配对应的车辆，这样用户对他的行为一目了然；
还有一些操作更类B端工具，如Claude Code 每次任务之前会先列一个清单，要澄清哪些需求，改动哪些文件、每个文件改什么内容，你确认了它才开始，完全放心的交给AI。
基础C端客户层面，可释放给用户可选择的模式，如基础快速和深度思考、如一个功能独立的快捷入口和分步的引导入口，便于用户自主灵活的选择；对于B端的工具，在辅助自我工作上，可以更灵活的调整AI介入的程度，更好的AI为我所用。
一是AI做完后告诉用户为什么，展示AI思考的链路；
二是其中变量的解释，如通过上下文的解释，或者持续的告知和引导；
三是自我批判解释，需帮助用户评估其可靠性，如自我批判（如“此信号可能因某某因素而被夸大”），或提供其他角度的回答，来引导用户自主做出判断。
特别是一些资金基金财富保险类的助手，其严谨性和解释性要更加明确。
AI不确定时老实告诉用户，核心原则：不确定性必须可见，不能藏在看似自信的输出背后。
当用户问到具体办理或查询的事件时，遇到不确定的问题直接说我不太确定，这个信息我无法验证，不会编造答案。
还有就是使用简单、可见的指标，如百分比或低/中/高等级，来标示结果的置信度。
对于文本内容，可以在视觉上高亮不确定的部分。
完整操作记录+ 一键撤销。设计目标：撤销率 < 5%。
支持用户查看以往的对话记录，让用户的记录有迹可循，可追溯之前的咨询信息；
AI不确定时主动求助用户。设计目标：恢复成功率 > 90%。
回到开头那个问题，大部分AI助手为什么做得不到位？
因为它们要么缺模块，五个功能模块没有全覆盖，用户在某个环节卡住了就放弃了；要么缺信任，六个信任模式没有做到位，用户不敢让AI做重要的事，要么两个都缺。
拿到一个AI助手的设计需求，怎么落地呢，三步走。就像机长在起飞前会严格的自查所有系统是否准备齐全，才会起飞，必要的限制，是对产品和用户负责。
第一步，拿五大领域当模块地图过一遍。你的AI助手在表达意图、展示结果、微调输出、执行任务、场景融合这五个环节，每个环节的交互形态想清楚了吗？有没有哪个环节是缺失的？
第二步，拿六大模式当信任自查清单过一遍。坦率的讲，意图预览和撤销是最低要求，几乎所有涉及AI执行的功能都应该配上。自主度和可解释性根据功能复杂度决定。置信度信号和升级路径在信息不确定的场景下必须具备。
第三步，把缺失的补上。不是每个功能都要六个模式全覆盖，但每一个被省掉的模式都应该有明确的理由，而不是没想到。
所以在设计时，传统产品，产品/设计的产出是一套界面操作流程。AI产品，产出是一套行为规则，AI在什么时机、以什么方式、展现什么信息、留给用户什么控制权。这些东西才是负责AI项目的人真正要决定的事情。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微ui设计公司分享：继上一篇我们提出了 HAI 交互设计法，并通过「深度理解」锚定了人性不变的需求后。本次，我们将视角转向技术演进所带来的交互变革，以「自然交流」的设计顺应技术之变。
AI 从大语言模型向多模态模型、乃至世界模型演进，其本质是理解能力的维度扩展：从符号语义解析，延伸至物理情境理解。这一质变使机器能够真正读懂人的意图、感知当下情境，为人机交互从“人适应机器”转向“机器适应人”奠定了基础。
在此趋势下，人机互动从屏幕走向空间，从单一通道走向多模态自然协同。面对这一变化，本文回归人类原生交流规律，系统构建多模态交互设计体系，通过分析其特征、类型与方法，为 HAI 时代的人机交互提供思考框架与理论参照。
从纸张文字、电话语音到移动互联网的影像，每一次媒介形态的跃迁，都深刻重塑着我们理解世界的维度与感知的边界。
而今，在 AI、空间计算与 XR 等前沿技术的融合推动下，数字世界与物理世界的边界正逐步消融。虚实融合不再仅是愿景，而是正在成为新一代信息社会的底层体验范式。这一趋势不仅深刻变革着人类获取信息与沟通交互的方式，更驱动数字智能本身持续进化——它正突破虚拟的边界，向可感知、可交互、乃至可栖居的具身化智能方向演进。
从平面到空间的演进，也标志着交互范式本身的重构。过去数十年间，人机交互始终被禁锢于二维屏幕之内，依赖于键盘、鼠标、触控等单一模态的输入方式。而未来，随着智能传感、空间计算与多模态 AI 的成熟，交互将快速跨越屏幕的边界，迈向三维空间与自然融合的多模态交互方向。
人类以多模态的方式互动，世界以多模态的结构呈现。人类所创造的多模态技术，正是根植于这一双重现实为基础而发展。
生物学层面上，多模态互动（Multimodal Interaction）是一个完整的“传递‑接收”循环：指人体通过多种运动/效应通道（Motor/Effector Channels）传递信息，并通过多种感官通道（Sensory Channels）接收信息。正如人类在交流中同时扮演“表达者”与“倾听者”。
多模态交互正是这一生物机制的数字化延伸，它融合多种“表达”与“感知”方式，使人机互动不断逼近人际交流的自然体验。
多模态交互：指人类利用多种表达通道（如肢体、声音语言、眼神）和感知通道（如听觉、视觉、触觉）与计算机系统进行通信的过程。
—— 本·施奈德曼（Ben Shneiderman）
多模态交互首次在1979年麻省理工理查德·A·博尔特（Richard A. Bolt）撰写“Put-that-there: voice and gesture at the graphics interface”（将语音和手势结合）。
综上所述，人类通过“多通道输入”传递意图，系统通过“多通道反馈”回应结果让人类感知，从而形成一个实时、连贯的交互闭环。因此，多模态交互的本质并非模态的简单叠加，而是构建一个以人为中心的对话循环。
为深入剖析这一循环，本文将分两篇展开系统性阐述：上篇聚焦多模态输入（人类如何表达），下篇探讨多模态反馈（系统如何回应）。
前文中所提到的多模态表达是从生物学角度切入，指人体通过多种运动/效应通道（Motor/Effector Channels）传递信息。
而多模态输入根据用户参与程度又可分为两类：显性输入与隐性输入。
随着 AI 理解能力的深化，系统正逐步融合显性与隐性信号。但当前交互设计的核心仍是优化显性输入——它是用户意图最直接的出口。下文将围绕这一焦点，阐述基于主动表达的多模态输入设计方法。
设计多模态输入前，采用系统化的分析框架，基于人机交互领域中的 “意图‑行为‑情境”分析思路，将动机、体验与变化纳入考量。对应的是 设计动机（Why）→设计体验（How）→适应变化（What if） 该框架依次引导设计者回应以下三个核心问题：
后续，将依此三阶段展开说明：
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）适应任务状态变化：理解任务不同阶段的核心目标，提供契合的输入支持。
说明：在紧急事件中，系统将跳过复杂操作，直接提供极简交互，如支持挥手、点头等本能输入方式，以最短路径完成关键确认。
有效的沟通，从来不是用固定的方式应对流动的世界。因此，多模态输入的适应性，本质是让系统具备与人类同等的情境应变能力。为不同环境、状态与任务阶段，预判并匹配最适宜的输入通道。如果说协调性中的“资源编排”确立了效率基线、“贴合个人”实现了因人适配，那么“动态适应”则确保了交互在每一次当下发生时的合理性。
至此，我们完成了对多模态输入设计的系统探讨。在基于 AI 推动“机器不断适应人”的背景下，了解交互正从平面走向空间、从单模态走向多模态。能观察到，交互是向着顺应人类本能，契合人类直觉的方向发展。而多模态输入，则对应的是人类的表达本能，其最终目的：最大程度承接人类的自然表达。
本文基于人类自然表达的“意图‑行为‑情境”为原型，将其转化为设计思考的 “动机—体验—适应” 框架，系统回应了多模态输入的三个根本问题：
设计动机：为何需要多模态？- 解决效率、准确、流畅的瓶颈；设计体验：如何实现自然协调？- 模态资源合理编排，模态资源贴合个人；适应变化：怎样应对变化？- 动态调度输入通道，适配环境、个人与任务状态；
未来，随着 AI 感知与情境理解能力的进化，多模态交互将超越界面，成为人与世界无缝衔接的交流方式。它以轻量行为承载深远意图，在虚实融合中重新定义交流的边界——表达的极简，源于极致的理解。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com