首页

别再愁 “设计没灵感”!从 5 个爆款产品里,我拆解出可复用的设计思路

涛涛

很多设计师都会有这样的困惑:同样的需求,别人做出来的设计既好看又有记忆点,自己的作品却总显得 “平平无奇”;明明功能都实现了,用户却反馈 “用着没感觉”。其实,好设计从来不是凭空想象 —— 那些让人眼前一亮的产品,往往在细节里藏着巧思。今天我们就从优酷、网易邮箱大师、京东外卖等 5 个产品的设计中,拆解出能直接复用的 UI/UX 技巧,帮你打开设计思路。

别让 “出错时刻” 劝退用户!做好这 10 件事,产品体验直接升维

涛涛

提到用户体验设计,我们总习惯把目光放在 “顺利场景”:注册一步到位、支付秒级完成、信息提交一次通过。可现实里,用户手滑点错按钮、输错手机号、误删重要文件的情况从未消失,系统加载失败、网络断连的意外也时常发生。这些被忽略的 “出错时刻”,才是决定用户留不留下来的关键 —— 处理不好,用户会带着焦虑离开;处理得好,反而能成为建立信任的加分项。

深度体验苹果液态玻璃 UI 一个月:这届「玻璃风」,是未来还是妥协?

涛涛

或许这就是 “激进设计” 的必经之路:就像当年 iOS 7 的扁平化,一开始也被骂 “太简陋”,后来才慢慢成为行业标准。液态玻璃现在的问题,可能需要后续的更新来补 —— 比如增加更多 “透明度调节选项”,或者优化文字对比度算法。

图标设计公司卷入用户体验大战:从UX到AX是进化还是噱头?

清阳

行业是否被AI体验过度营销,设计价值是否被误读?

一、AX浪潮下的设计焦虑

近年来,AI体验(AX)成为设计行业的新热词。图标设计公司、UI团队甚至整个数字产品生态都在讨论:UX是否正在被AX取代?在资本与媒体的推动下,AX被宣传为“智能化、个性化、自动优化体验”的万能钥匙。大量案例和概念文章描绘了一个理想化场景:AI可以预测用户行为、自动生成界面、优化交互路径,让设计师从繁琐工作中解放出来。然而,热潮背后,也滋生了焦虑:设计价值是否真的随AI提升?还是正在被噱头夸大?
在AX概念的过度营销中,设计师最直接的感受就是压力。行业宣传强调“AI体验即未来”,许多公司开始追逐技术应用而忽略设计本身的逻辑。界面生成工具、智能排版、自动图标风格匹配看似高效,却可能掩盖了一个问题:用户体验的核心——人性化判断与创意决策——是否被置换?

二、AX的实际价值与局限

预测性与效率 AX确实在效率上带来优势。AI可以分析用户操作数据,预测点击路径,自动调整界面元素布局,实现个性化推荐。对于图标设计公司而言,这意味着快速生成符合视觉体系的图标集、界面布局方案和交互动画,减少重复劳动。
局限与误读 然而,AI擅长“优化历史数据”,不等于能创造创新体验。算法逻辑依赖已有行为模式,难以处理前所未有的需求或情感表达。用户体验的深度依赖于设计师的洞察力、品牌理解与文化语境,而这些正是AI无法完全替代的领域。AX被过度营销的结果,是让部分企业误以为“有了AI,用户体验就自动提升”,而忽略了体验设计的核心价值。

三、设计价值在AX时代的博弈

效率与创造力的平衡 AX带来量化与自动化优势,但也可能压缩设计师的创造空间。如果公司追求“数据驱动的最优解”,设计可能趋于标准化和模板化,失去独特性。
品牌与情感的把控权 图标设计不仅是视觉元素的组合,更承载品牌调性和用户情感。过度依赖AX可能让设计师放弃对品牌叙事和情感体验的主导权,从而降低作品的价值感。
人机协作模式的必要性 在理想状态下,AX应该是设计师的助手,而非替代者。AI提供洞察、生成方案、优化结构,设计师则进行情感评估、审美决策和创新实践。唯有人机协作,才能保持体验的温度与深度。

四、行业趋势与理性反思

当前,AX更多的是一种市场营销的概念强化,而非完全成熟的设计实践。大量所谓“智能体验”的案例,其实仍依赖设计师进行核心创意与逻辑判断。行业在推广AX时,容易产生“AI万能”的错觉,导致设计价值被误读:UX被弱化为流程工具,AX被神话为自动优化体验的全能方案。
图标设计公司在追逐AX的同时,必须反思:**技术能带来效率,但不能替代创造力与体验洞察。**设计主导权仍需掌握在理解用户、掌握品牌和具备审美能力的人类手中。

五、从UX到AX:进化还是噱头?

AX的出现,是设计技术发展的必然结果,也是UX理念的延伸,但并非彻底取代。UX提供了思维框架和用户价值评估方法,AX提供了智能化工具和数据洞察能力。它们之间的关系更像是补充而非替代
对于图标设计公司而言,AX可以提高工作效率、优化界面结构、辅助决策,但若盲目追求AI带来的智能化,会让设计失去灵魂。真正的进化,是在AX技术加持下保持UX的人性化判断,让体验既高效又有温度。噱头,则是忽视创意主导权,把AI神话化,将UX简化为可替代操作。

六、理性拥抱AX:设计师的新策略

未来的设计实践应当遵循三个原则: • 数据辅助而非决策主导:让AI提供洞察与方案,设计师决定最终创意与逻辑。 • 体验温度优先:算法优化的效率必须服从于品牌价值、情感表达和用户共鸣。 • 持续迭代:通过人机协作形成闭环,不断优化体验,兼顾理性分析和感性判断。
AX不是噱头也不是威胁,它是一种工具与思维的升级。图标设计公司在拥抱AI体验时,必须清楚界限,确保设计主导权不被削弱,让效率与创造力共生,才能真正实现从UX到AX的理性进化。
 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

 

高端网站设计中的微交互:细节如何决定用户体验

清阳

在高端网站设计的语境下,“视觉审美”已经不再是唯一的竞争点。真正能打动用户、建立长期信任的,是那些嵌入在每一次操作、点击、过渡中的细节优化。微交互(Microinteraction)正是这些细节的核心体现。它们细小到常被忽视,却能够直接影响用户的操作效率、心理感受和品牌认知。

一、微交互的定义与作用

微交互是指用户在使用界面时触发的 单一、具体的交互行为及其反馈,例如:
  • 点击按钮后出现的颜色变化
  • 输入框实时校验并提示错误信息
  • 数据加载时的骨架屏或进度动画
  • 页面滚动触发的动态导航变化
其核心作用主要体现在三个方面:
  1. 即时反馈:减少用户对操作结果的不确定性。
  2. 操作引导:通过细节变化提示用户下一步操作。
  3. 情感化体验:在严肃的任务场景中,带来温和愉悦的交互感受。

二、高端网站为何更重视微交互?

  1. 从“功能完成”到“体验卓越” 普通网站满足“能用”即可,而高端网站追求的是“好用、顺畅、舒适”,微交互是实现这一层级跨越的关键。
  2. 降低用户的认知负担 在信息复杂的企业级网站或电商网站中,微交互能帮助用户更快理解操作逻辑。
  3. 传递品牌调性 例如科技公司会用克制的过渡动画来传递冷静专业感,而消费品牌则可能选择更活泼的动效来强化情感共鸣。
  4. 影响转化率 注册、支付等关键流程中的细微交互,往往直接决定用户是否流失。

三、高端网站常见的微交互场景

  1. 导航与滚动反馈
  • 页面下滑时,导航栏逐渐收缩并固定在顶部。
  • 回到顶部按钮通过柔和的过渡出现,避免突兀。
  1. 表单与输入
  • 邮箱或手机号的实时验证,避免提交时的失败挫败感。
  • 错误提示采用非侵入式红色边框与简洁文案,减少紧张感。
  1. 按钮与操作反馈
  • 悬停时的轻微阴影与浮起,增强“可点击”感。
  • 点击后的颜色渐变,确认操作已被响应。
  1. 加载与过渡
  • 骨架屏替代空白页面,减少等待焦虑。
  • 数据图表采用渐进式动画加载,提升信息传达效率。
  1. 可视化与数据展示
  • 鼠标悬停在图表节点时,弹出详细数据提示。
  • 条形图动态增长、折线图逐渐绘制,提升沉浸感。

四、微交互设计的原则

  1. 功能优先 微交互必须解决问题,而不是纯粹的装饰。
  2. 轻巧克制 控制时长(一般 0.2s–0.5s),避免拖慢体验。
  3. 一致性 动效、提示文案、反馈形式应保持统一,形成系统化的体验。
  4. 品牌匹配 微交互风格需要与企业的品牌形象呼应,不能割裂。

五、未来趋势:智能化与个性化

随着 AI 与大数据的融合,微交互正在从“统一效果”走向“动态个性化”:

用户体验五大要点:从问题到解决方案的完整指南

清阳

在互联网产品设计和运营的过程中,用户体验(User Experience,简称 UX) 已经成为决定产品成败的关键因素。一个功能再强大的产品,如果用户用得不舒服、不信任,甚至觉得没有价值,最终都会被抛弃。那么,优秀的用户体验究竟包含哪些要素?遇到问题时我们又该如何解决?
本文将用户体验拆解为五大要点,并逐一分析其常见问题与改进方法,帮助你快速建立一份可落地的用户体验改进清单。

  1. 可用性(Usability)
核心问题: 产品是否容易上手、是否顺畅易用。
常见问题:
  • 新用户上手困难,不知道该如何操作。
  • 完成一个任务的步骤过多,效率低下。
  • 不同页面或功能的交互逻辑不一致,导致混乱。
  • 用户出错后没有清晰提示,不知道如何纠正。
解决方法
  • 进行 可用性测试,邀请真实用户体验任务,观察他们在哪些地方卡壳。
  • 简化流程,减少多余步骤,比如将“支付”流程控制在 3 步以内。
  • 建立 交互规范与组件库,保证按钮样式、操作逻辑在全站保持一致。
  • 在操作后提供 即时反馈,如加载状态、确认提示。
  • 优化 错误提示,不要只显示“出错了”,而是说明原因并给出解决方案,例如“密码至少需要 8 位且包含数字”。

  1. 有用性(Usefulness)
核心问题: 产品是否真正解决了用户的核心需求。
常见问题:
  • 功能繁杂,但用户真正需要的功能却没有。
  • 产品没有满足用户的核心场景,只是“看起来很炫”。
  • 用户觉得“这个产品没有价值”,使用频率低。
解决方法
  • 用户研究(问卷、访谈),明确用户的真实需求,而不是凭空想象。
  • 通过 任务场景分析,确保每个核心功能都能支持用户的目标。
  • 采用 MVP 策略(最小可行性产品),先满足用户的核心价值点。
  • 借助 数据分析,识别哪些功能常用、哪些功能无人问津,对低频功能进行优化或砍掉。
  • 坚持 持续迭代,根据用户反馈及时调整方向。

  1. 可访问性(Accessibility)
核心问题: 产品是否对所有用户都友好,是否能在各种设备和环境下顺畅使用。
常见问题:
  • 对视障、色盲、老年人等群体不友好。
  • 在手机、平板和 PC 端体验差别巨大,影响使用。
  • 页面加载缓慢,操作卡顿,用户流失率高。
解决方法
  • 遵循 WCAG 国际无障碍标准(Web Content Accessibility Guidelines),提升通用性。
  • 使用 对比度检测工具,保证文字清晰可读。
  • 提供 多模态输入方式,支持键盘操作、语音输入、触控操作等。
  • 采用 响应式设计,保证多设备访问体验一致。
  • 性能优化:压缩图片、延迟加载、使用 CDN 加速,保证快速响应。

  1. 愉悦感(Desirability / Delight)
核心问题: 产品是否让用户感到愉快、舒适甚至惊喜。
常见问题:
  • 界面单调,缺乏美感。
  • 操作无反馈,体验枯燥。
  • 系统提示过于冰冷,缺乏人情味。
  • 用户感受不到个性化和惊喜。
解决方法
  • 建立 统一的设计系统,保证色彩、字体、图标风格一致,营造整体美感。
  • 在按钮点击、加载等待等场景加入 轻量动效,增加“生命感”。
  • 优化 文案设计,使用更友好、温暖的语气与用户沟通。
  • 提供 个性化推荐,根据用户行为习惯智能优化体验。
  • 设置 小惊喜,例如节日彩蛋、完成任务后的动画奖励,增加好感度。

  1. 可信任度(Credibility / Trustworthiness)
核心问题: 用户是否信任产品和品牌。
常见问题:
  • 用户担心数据被泄露或滥用。
  • 信息真假难辨,缺乏权威感。
  • 系统经常崩溃或出错,用户失去信任。
解决方法
  • 提供 权威背书:展示认证资质、用户评价、行业荣誉。
  • 制定 透明的隐私政策,明确说明数据收集和使用方式。
  • 加强 安全措施,如 HTTPS 加密、双重验证、权限管理等。
  • 保证 系统稳定性,通过性能监控与快速 bug 修复降低出错率。
  • 做好 品牌建设:统一品牌视觉识别(VI),积极回应用户反馈,增强信赖感。

总结

用户体验不仅仅是“界面好看”这么简单,它包含了 可用性、有用性、可访问性、愉悦感、可信任度 五大方面。每个方面都有对应的常见问题和可落地的方法。
  • 可用性:靠测试与简化流程来提升。
  • 有用性:靠用户研究与数据驱动来确保。
  • 可访问性:靠标准规范与性能优化来实现。
  • 愉悦感:靠设计细节与情感化交互来营造。
  • 可信任度:靠透明、安全与品牌建设来维系。
如果你正打算优化产品体验,不妨把本文当成一份 用户体验改进对照表。遇到问题时,先找出属于哪个维度,再选择对应的解决方案。这样不仅能避免“头痛医头,脚痛医脚”,还能让整个产品体验体系更加完整、可持续。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

提升用户体验的交互设计实战指南:方法、流程与技巧

清阳

如何优化交互设计,提高用户体验?——实用工作流程与技巧

在做产品时,大家都绕不开一个核心问题:如何通过交互设计真正提升用户体验?
很多时候我们以为加点动效、换个布局就能优化,但结果往往事与愿违。想要真正做到有效优化,背后需要一个系统的思路和工作流程。

下面我结合实际经验,总结了一套可操作的路径,供你参考。


一、优化交互设计的核心思路

  1. 以用户为中心:理解真实需求,避免“设计自嗨”。

  2. 减少认知负荷:用户不该被迫思考「下一步怎么做」,交互要自然顺畅。

  3. 保持一致性:控件逻辑统一,降低学习成本。

  4. 预防错误 & 容错:减少出错机会,并提供撤销或返回。

  5. 数据驱动优化:用埋点和分析找到问题,而不是凭感觉去改。


二、交互设计优化的工作流程

这套流程可以理解为一个循环迭代:发现问题 → 提出假设 → 设计改进 → 测试验证 → 持续迭代

1. 发现问题

  • 用户研究:访谈、问卷、可用性测试

  • 数据分析:漏斗分析、热力图,定位流失点

  • 竞品调研:参考行业里成熟的交互模式

2. 提出假设

用户旅程图 标记关键环节,并提出“问题-假设-预期”:

  • 问题:注册流失率高

  • 假设:减少表单字段

  • 预期:完成率提升 15%

3. 设计改进

  • 原型设计:低保真快速迭代

  • 交互规范:层级清晰,控件一致,反馈及时

  • 文案优化:提示语直白,避免模糊

4. 测试验证

  • 可用性测试:5~8 个目标用户足够发现问题

  • A/B 测试:不同版本上线,验证哪种更好

  • 满意度调查:SUS、NPS 等量化指标

5. 持续迭代

  • 定期复盘:看上线效果是否达到预期

  • 维护设计规范 & 组件库:减少重复劳动

  • 小步快跑:持续小幅优化,而不是大刀阔斧一次性推翻


三、实用小技巧

  • 优先级排序:聚焦高频&高价值的流程(注册、支付、搜索)。

  • 微交互:细节处的反馈、动效,能让体验加分。

  • 渐进式披露:分层展示功能,避免用户被信息淹没。

  • 跨团队协作:和产品、开发、运营对齐目标,确保设计能落地。

 

交互设计优化不是一蹴而就的,而是一个持续发现问题、验证假设、迭代改进的循环。只有把用户体验当作持续经营的对象,产品才能在竞争中保持优势。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

用户体验中的人工智能透明度:设计清晰的人工智能交互

清阳

随着人工智能越来越多地融入网站和应用程序体验,区分哪些地方已经实施了人工智能,哪些地方尚未实施人工智能,变得至关重要。

最初,大多数产品将人工智能作为聊天机器人引入,用户可以通过聊天机器人发起并促进与人工智能的交互。现在,产品正在将人工智能融入仪表盘、任务和搜索功能。用户不再主动体验人工智能——人工智能体验已经预先存在。

由于用户不再控制何时触发人工智能的使用,因此需要让用户了解何时向他们展示人工智能功能或内容,以确定其有效性和质量。不仅如此,《欧盟人工智能法案》(2026年生效)将强制要求用户在与人工智能系统进行通信或互动时必须知晓。

这就是设计系统的用武之地——实施专门的视觉处理,以始终如一地将人工智能内容和特征与非人工智能内容和特征分开。

按 Enter 键或单击即可查看完整尺寸的图像
Google 的 Material Design 系统展示了按钮和分段按钮等组件
Google 的 Material设计系统文档

遗憾的是,目前只有少数开源设计系统明确地包含 AI 组件和模式。我希望很快会有更多系统加入,但目前为止,只有 GitLab 的 Pajamas、IBM 的 Carbon 和 Twilio 的 Paste 在其指南中承认了 AI。

注意:我使用Figma 的设计系统来对 AI 组件和模式进行基准测试。我没有纳入仅包含 AI 聊天机器人或对话设计文档的设计系统,因为这是一种更标准的交互模式;这包括亚马逊的 CloudscapeSalesforce 的 Lightning

让我们比较和对比这些设计系统 AI 组件和模式,看看它们可以在哪些方面进行优化以提高可用性。

1. GitLab 的睡衣

Pajamas目前不包含明确的组件或模式,但它确实包含一些关于 AI 与人类交互的有趣文档。该文档首先建议通过识别哪些自动化操作是合乎道德且有益的(例如,高风险任务 vs. 低风险任务),来了解 AI 的使用是否真的能给用户带来好处。

接下来,它建议透明地说明 AI 的使用地点——Pajamas 通过其“GitLab Duo”实现了这一点,这是 AI 特性、能力和局限性的指标。

按 Enter 键或单击即可查看完整尺寸的图像
GitLab Duo 的示例展示了用户可以在哪里与 AI 进行交互
GitLab Duo 用于指示用户可以在界面中与 AI 交互的位置

由于“GitLab Duo”用于 AI 功能和交互(而不是任何 AI 内容),Pajamas 还建议使用“<动词> by AI”(即“由 AI 总结”)标记 AI 生成的内容,并发送一条消息鼓励用户检查 AI 内容。

GitLab 也在开发一个框架来实践他们的指导方针;目前还在开发中,但大致的工作内容可以在GitLab 的 AI UX 模式中查看。他们的目标是发布一个带有文档的 AI 模式库——这正是我们所需要的(拜托!)。

GitLab 对其 AI UX 模式的愿景分为 4 个维度,以帮助选择正确的 AI 模式:模式、方法、交互性和任务。

  • 模式:人工智能与人类互动的重点(专注、支持或整合)
  • 方法:人工智能正在改进什么(自动化或增强任务)
  • 交互性:人工智能如何与用户互动(主动或被动)
  • 任务:AI 系统可以帮助用户做什么(分类、生成或预测)

例如,他们早期对人工智能模式的探索包括低保真模型,展示了如何将人工智能与图表或内联解释集成到界面中。这些模式清晰地标记了人工智能的用途,有助于建立用户对人工智能系统的理解和信任。

按 Enter 键或单击即可查看完整尺寸的图像
低保真折线图,显示当集成到界面中时可以在数据中突出显示的 AI
带有指示 AI 的标记的低保真集成图表,例如预测数据(通过GitLab 的 Vision for AI UX
按 Enter 键或单击即可查看完整尺寸的图像
使用 Gitlab 模式填写表单时使用 AI 的示例
低保真集成解释器,使用 AI 填写表格(通过GitLab 的 AI UX 愿景

判决

目前,GitLab 的文档还停留在概念阶段,仅概括了他们希望未来 AI UX 体验的样子。但它提供了一个坚实的框架,大多数设计系统都可以采用——无论哪个行业或产品。

我希望他们能尽快发布更多关于其AI用户体验模式的深入信息。我认为这对其他开发AI文档的设计系统来说,将是一笔宝贵的开源资产。

2. IBM 的 Carbon

在众多开源设计系统中,Carbon拥有最丰富的 AI 使用文档。它包含一个 AI 专用版块“Carbon for AI”,涵盖组件、模式和指南,帮助用户识别 AI 生成的内容,并了解 AI 在产品中的应用方式。

Carbon for AI 建立在现有 Carbon 组件之上,添加了蓝色光晕和渐变效果来突出显示 AI 实例。目前为止,已有 12 个包含 AI 变体的组件,例如模态框、数据表和文本输入。

按 Enter 键或单击即可查看完整尺寸的图像
IBM Carbon 中的所有 12 个 AI 组件,包括复选框和文本输入
Carbon for AI 的组件列表及具体 AI 变体

尽管组件的 AI 变体具有独特的视觉处理,但在上下文中,很难区分哪个组件当前处于活动状态(因为它们看起来都是活动的)。

在下面的表单中,AI 用于自动填充大部分输入字段,因此这些字段使用了 AI 变体。即使在默认状态下,AI 变体也会呈现蓝色渐变和边框,这导致难以直观地识别哪个组件处于活动状态。

按 Enter 键或单击即可查看完整尺寸的图像
使用人工智能帮助输入答案的示例表单,并展示人工智能组件在上下文中的使用情况
AI 组件上使用的蓝色渐变和边框使得很难判断哪个组件处于活动状态

用户可以覆盖 AI 的输入,这会将组件的 AI 变量替换为默认变量。这将触发“恢复为 AI 输入”操作,以替换输入字段中的 AI 标签,从而允许用户控制手动或自动表单响应。

按 Enter 键或单击即可查看完整尺寸的图像
带有恢复操作的文本字段,显示“恢复到 AI 输入”的工具提示
当用户覆盖 AI 输入时,Carbon 的“恢复 AI 输入”功能就会出现

除了 AI 变体之外,它还包含一个明确的 AI 标签,可以显示一个弹窗,解释特定场景下 AI 的细节(Carbon 将此模式称为“AI 可解释性”)。用户可以选择 AI 标签,弹窗就会出现在按钮下方。

按 Enter 键或单击即可查看完整尺寸的图像
一个中等保真度的屏幕模型,其中的 AI 标签弹出窗口显示了有关 AI 使用情况的详细信息
Carbon 的 AI 标签包含一个解释器弹出窗口,方便用户获取有关 AI 使用情况的更多详细信息

判决

看到像 Carbon 一样完善的 AI 模式和组件设计系统文档,真是令人兴奋。他们不仅提供了 AI 通用用法的文档,还提供了实际可用的组件和模式。

但由于组件的AI变体使得在上下文中使用时难以区分哪个组件处于活动状态,我认为存在可用性和可访问性问题。AI变体的颜色使用过于引人注目,而且看起来像Carbon的焦点状态(这可能会影响依赖焦点状态的低视力用户)。

按 Enter 键或单击即可查看完整尺寸的图像
文本字段组件的 AI 变体与文本字段的焦点状态之间的比较
Carbon 的 AI 变体与文本字段的焦点状态

3. Twilio 的 Paste

最后,Paste在“体验”版块下提供了一个“人工智能”板块。Paste 提供了关于在用户体验中使用人工智能的通用文档,以及一些可用的组件。

在设计AI功能时,Paste建议允许用户将AI结果与自身体验进行比较,并处理潜在的错误和风险。为了减少这些错误,Paste提倡赋予用户审查和撤消输出、控制数据源以及向AI系统提供反馈的能力。

Paste 还建议在设计新的 AI 功能时问自己:“如果它做同样的事情但不使用 AI,我将如何设计这个功能?”用户使用产品不仅仅是为了与人工智能互动——他们还试图尽可能高效地完成任务并实现目标。

Paste 包含一个包含 5 个组件的 AI UI 套件:人工智能图标、徽章、按钮、进度条和骨架加载器。它还包含一些专为 AI 聊天体验打造的组件,例如 AI 聊天日志。

Paste 文档中最有帮助的是他们提供的示例,包括路标、生成功能和聊天功能。

对于指示牌,Paste 建议使用带有人工智能图标的装饰性徽章来指示某个功能正在使用人工智能,例如人工智能推荐或预测。指示牌是非交互式的,但类似于按钮,因此看起来可以点击。

按 Enter 键或单击即可查看完整尺寸的图像
Twilio 的路标示例展示了带有 AI 闪光图标的徽章
Paste 使用徽章和 AI 图标的路标示例

生成功能会向用户提供提示,帮助他们使用 AI 功能,例如“总结数据”或“推荐下一步”。当您选择生成功能时,下面会出现一个弹出窗口,向用户提供说明以及它正在使用的 AI 模型。

按 Enter 键或单击即可查看完整尺寸的图像
Twilio 的生成功能示例展示了一个带有弹出窗口的按钮,用于解释有关 AI 模型的详细信息及其使用方法
Paste 的生成功能包括一个带有弹出窗口的按钮,用于指导用户与 AI 交互

最后,聊天内容是当今已知的人工智能聊天机器人的典型特征,并包含对其对话原则的引用,以发展人工智能的个性。

按 Enter 键或单击即可查看完整尺寸的图像
Twilio 的聊天示例,其中有一个空状态,并且在用户文本字段下方有多个 AI 提示
Paste 的 AI 聊天机器人处于空状态,并在文本字段下方提示

Paste 确实即将推出另一种加载模式,但我们还需拭目以待。这种模式将为用户提供一种控制和预测 AI 输出的方式;这包括停止输出以及根据 AI 输出所需的时间来调整状态。

判决

我很高兴看到一些文档和实际示例的结合。虽然其中一个示例是聊天机器人,但 AI UI 套件中的其他组件也展示了如何在界面中透明地展示 AI 的使用方法。

Paste 正在寻求对其 AI UI 工具包的反馈——他们有一个开放的Github 讨论,您可以在其中提交请求。

令人惊讶的是,很少有设计系统发布关于组件和模式的文档来处理AI驱动的内容和功能(至少是公开的)。例如,谷歌和微软都是AI行业的领导者,但开源的Material和Fluent设计系统却不包含AI模式。

由于这些 AI 领导者正在将 AI 融入到与更广泛用户群体互动的常见产品(例如 Gemini 和 Copilot),他们正在构建其他产品也需要效仿的用户心智模型。即使是Adobe 旗下的 Spectrum,虽然已将 AI 融入其众多产品(例如 Adobe Firefly),但在涉及内容和人物写作时,也只用了短短的宣传语来提及机器学习和 AI。

也许他们的AI模式还在开发中?或者他们还在等待时机成熟?

无论如何,向用户展示 AI 功能和生成的内容至关重要,这样他们才能更好地理解所展示的内容,并建立对产品的信任。我期待更多超越闪光图标和聊天机器人的设计系统模式。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

优化用户体验 | AI工作流 | Lovable + Cursor:如何设置这个强大的 AI 工作流程

清阳

今天给大家分享一个强大的工作流程:Lovable — GitHub — Cursor。

虽然 Lovable 和 Cursor 都是流行的工具,但它们各有其优点和局限性。

但当一起使用时,它们可以很好地互补,您可以获得两全其美的效果。

此工作流程让您可以利用 Lovable 的快速设计生成和 Cursor 的 AI 驱动编码环境来精确构建更强大的应用程序。

我将向您展示如何逐步连接它们并创建无缝的工作流程。

概述

工作原理

在Lovable中,将您的项目与Github连接起来,这样代码就可以实时同步到GitHub。

在 Cursor 中,你可以将项目代码克隆到本地并进行编辑。之后,你可以随时同步到 GitHub。

一旦同步,更新将立即反映在 Lovable 中。

按 Enter 键或单击即可查看完整尺寸的图像
工作流程概述

然后,您可以根据需要选择使用 Lovable 或 Cursor 进行工作。两者之间可无缝切换。

为什么它如此强大

对于专注于前端的设计来说,Lovable 直观且快速。但当需要改进或添加实际功能时,你很快就会遇到瓶颈。

它根本不适合开发可靠的应用程序。而且,Lovable 的免费计划也很容易达到使用上限。

这就是 GitHub 和 Cursor 的用武之地。GitHub 充当了 Lovable 和 Cursor 之间的桥梁。从它的名字就可以看出“ GitHub = Git + Hub ”。Git 是管理代码版本的工具。GitHub 是一个托管 Git 存储库并增强协作的平台。

而 Cursor 就像一个带有 AI 助手的代码编辑器。它比 Lovable 强大得多。你可以更精确地调试、优化和构建代码。

缺点是,如果你编程经验有限,Cursor 可能会让你感到不知所措,而且它不够简单,不适合前端探索。这就是为什么 Lovable 和 Cursor 相辅相成的原因。

但是如何让 Lovable、Cursor 和 GitHub 协同工作呢?

按 Enter 键或单击即可查看完整尺寸的图像
我在 Reddit 上偶然看到的一篇帖子 :)

接下来,我将逐步引导您完成工作流程!

步骤 1:Lovable → GitHub

首先,你需要有一个 GitHub 帐户。

那就用 Lovable 来构建一些东西吧。我在一篇新闻通讯里提到过 Lovable 。它很容易上手。

为了这个演示,我创建了一个简单的“像我 5 岁一样解释它”应用程序。

您可以随时通过点击右上角的 GitHub 图标选择连接到 GitHub。

按 Enter 键或单击即可查看完整尺寸的图像
Lovable 中的 GitHub 图标

如果单击该图标,将出现以下对话框:

按 Enter 键或单击即可查看完整尺寸的图像
点击 GitHub 图标后

连接到 Github 帐户后,此对话框将显示另一个选项,供您将此“项目”连接到您的 Github。请确保它也已连接。

步骤 2:GitHub → Cursor

打开 Cursor。第一步是选择一个文件夹。这就是项目所在的位置。

接下来,您只需在 Cursor 中输入以下内容:

克隆此 repo:[你的项目 Github 链接]repo:[你的项目 Github 链接]

然后 Cursor 会告诉你该怎么做。设置起来非常简单直接。

您实际上是在安装“依赖项”,即下载并设置项目正常运行所需的所有包。

按照说明,我打开了本地服务器,它在 Lovable 中显示了完全相同的设计。

按 Enter 键或单击即可查看完整尺寸的图像
获取我的本地服务器来展示 Lovable 的设计

假设现在我想在 Cursor 中进行一些修改。CTA 按钮的悬停效果太过分了。

按 Enter 键或单击即可查看完整尺寸的图像
原始按钮悬停效果

我在 Cursor 的提示窗口中输入了以下内容:

删除悬停时“解释一下!”CTA 上的放大效果。悬停时“解释一下! ” CTA产生影响。

然后就修复了:

按 Enter 键或单击即可查看完整尺寸的图像
Cursor 中按钮悬停效果修改后

步骤 3:光标→GitHub

简介

您可以随时选择将代码从 Cursor 同步到 GitHub。

但是,您会发现选项比您预期的要多得多,而只有一个选项 — — 同步。

Git 就是这样运作的。它将版本控制分解成多个小的、具体的操作,以便你进行精确控制。

这在处理大型项目时尤其有用。想象一下,当多人协作时,所有本地模型都同步到一个中心模型,而且每个人都只能选择同步,没有其他选择,那该有多混乱。

我在下面画了一张图表来帮助您更好地理解所有这些命令。

按 Enter 键或单击即可查看完整尺寸的图像
从 Cursor 到 Github 的 Git 命令

您不必亲自输入这些命令,但是当您在 Cursor 中看到这些术语并感到困惑时,该图表可以作为有用的参考。

阶段变化

首先,点击这个“分支”图标切换到源代码控制面板。然后点击“+”图标“暂存更改”,使其准备好提交。

按 Enter 键或单击即可查看完整尺寸的图像
阶段变化

提交 + 同步

然后根据您的需要,您可以在“提交”下拉菜单中选择一个选项。

如果您只想直接同步,请使用“提交和同步”。

按 Enter 键或单击即可查看完整尺寸的图像
提交并同步

你看到“提交”顶部的消息框了吗?它就像一个版本历史记录名称,方便你更好地跟踪更改。如果你将其留空,Cursor 会根据你所做的更改自动生成一条提交消息。

步骤 4:GitHub → Lovable

现在就是神奇的一步。因为你什么都不用做。

你应该会立即看到更新自动同步到 Lovable 中。太酷了!

按 Enter 键或单击即可查看完整尺寸的图像
Cursor 中的更新实时反映在 Lovable 中

如果您查看上面的快照,它会在聊天窗口中显示来自 Cursor 的最新修订。

然后,您可以根据需要选择继续在 Lovable 中构建或切换到 Cursor。

附录

如果您想与某人合作,只需在 GitHub 上的项目仓库中添加一位合作者即可。前往项目 → 设置 → 合作者 → 添加人员

按 Enter 键或单击即可查看完整尺寸的图像
在 GitHub 中添加协作者

一旦添加,他们也可以使用 Cursor 实时协作该项目。

感谢阅读。特别感谢 Junaid,在我准备课程期间与我分享了工作流程

下周见,

欣然

-

PS:几天前我做了一个关于创建 AI 原型的演讲,并演示了一些示例。如果你也对这个话题感兴趣,可以去看看。你可能会喜欢我和观众现场演示的冰淇淋搭配应用。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

你的直觉背后有逻辑

清阳

查尔斯·桑德斯·皮尔斯的数码插画,风格类似拼图游戏。他留着胡须的肖像由相互交错的拼图碎片组成,背景为大胆抽象的绿色、橙色和青绿色调。这幅图像象征着复杂性、推理能力和结构化思维。
查尔斯·桑德斯·皮尔斯(作者使用人工智能创建的图像)

每个人都说:“相信你的直觉。”但
没有人解释你的直觉是如何思考的。

查尔斯·皮尔斯做到了。

他称之为溯因推理——最佳猜测的逻辑。从想法到假设的跳跃。这种思维方式并不能保证你一定正确,但能让你足够接近事实,值得一试。

19世纪末,皮尔士(发音为“purse”)提出了一个关于人类如何形成信念的模型。这种信念的形成并非等待神灵的启示或遵循完美的规则,而是从不确定性入手,对我们自以为知道的事物感到不安,并形成一个值得检验的猜测。

他通过自己的工作创造了“探究”一词。这种逻辑如今在早期产品战略、设计研究和推测性人工智能提示中随处可见。但大多数人从未听说过它,或者从未听说过他。

研究怀疑的科学家

按 Enter 键或单击即可查看完整尺寸的图像
19世纪哲学家、逻辑学家查尔斯·桑德斯·皮尔斯的黑白肖像。他身着正装,蓄着大胡子,头发中分,表情严肃,略微侧身。
查尔斯·桑德斯·皮尔斯,公共领域,通过 Wikimedia Commons

皮尔士是一位逻辑学家、数学家、物理学家,以及许多其他领域的专家,他是美国实用主义的奠基人。但他真正痴迷的是我们如何形成信念……以及如何改变它们。

他相信真理并非唾手可得,而是需要你努力奋斗才能获得。而获得真理的途径并非加倍努力……而是甘愿犯错。

对于皮尔士来说,怀疑并非弱点,而是真正思考的开始。

他概述了人类推理的三种基本方式:

  • 绑架:根据有根据的猜测,什么可能是真的。
  • 演绎:如果某些规则成立,那么一定为真。
  • 归纳:根据我们所见的模式,什么可能是真的。

绑架

皮尔斯认为,溯因推理是思维的起点,是所有洞察力的源泉。它引领新想法进入思维领域,让产品团队能够推测某个指标下降的原因,让设计师能够预见到混乱的发生,让研究人员能够提出正确的问题——而不仅仅是分析数据。

溯因推理是从观察到可能性的飞跃。从“这到底是怎么回事?”到“也许是这样”。它并不能保证你是对的,但它能给你提供一些可以测试的东西。

扣除

演绎法起源于亚里士多德,它从普遍真理出发,并由此推理。

如果所有人都会死,而内特是人类,那么内特也是会死的。

非常简单。无需猜测。

它是系统、策略和自动化的逻辑。它是工程师确保代码正常运行的方式,也是合规团队发现违规行为的方式。演绎是我们利用已知知识进行推理的方式。但演绎并不能产生新的见解。它只能验证符合规则的内容。我喜欢这样理解:演绎建立在现状之上,而不是可能实现的。

就职

归纳法也源于亚里士多德,但经过以下思想家的扩展:弗朗西斯·培根大卫·休谟反之亦然。它根据观察到的情况推断可能发生的情况。

到目前为止,太阳每天都会升起,因此,明天它大概也会升起。

它是科学、分析和机器学习背后的逻辑。它能发现模式、发现趋势并标记概率。归纳推理能告诉团队用户做了什么,但不一定能告诉他们为什么做,或者下一步该做什么。

它很强大,但都是事后诸葛亮。它是一种回顾。没有溯因推理来构建问题,也没有演绎推理来施加约束,归纳推理只是收集数据。它只是观察,却不知道究竟要寻找什么。

信念的用户体验

皮尔士不仅研究我们如何推理,他还研究我们如何相信,以及为什么错误的信念如此难以动摇。在他1877年的论文《信念的固着》中,他列举了人们判断真理的四种常见方式:

  1. 坚韧:我相信这一点,因为我一直都相信。
  2. 权威:我相信这一点,因为有位有权势的人告诉我。
  3. 先验:我相信这一点,因为直觉上感觉正确。
  4. 科学方法:我相信这一点,因为它经得起推敲。

其中只有一种说法欢迎质疑。其他说法则鼓励安慰。它们之所以让人感觉真实,是因为它们一直以来都让人感觉真实。可能是因为某个可信的人说过这些话(锚定效应),也可能是因为它们易于重复,难以质疑。

信念并不总是来自证据。它来自情感、重复,有时甚至是便利。

这就是为什么人们会继续从事有害的工作,并相信阴谋论。这就是为什么整个团队围绕着一个在启动会议上感觉正确的想法展开工作,但之后就再也没有被重新讨论过。

皮尔斯的警告不仅仅是哲学层面的,它非常实用:

如果你忽略了怀疑带来的不适,你也就忽略了学习的机会。

运用绑架法进行设计

大多数现代设计工作都始于一种直觉。你注意到一些事情。你猜测它发生的原因。你验证这个猜测。

这就是绑架。

你不是在证明必然为真,也不是在确认可能为。你是在问:这里可能发生了什么?

这是探索研究和旅程地图的核心。真正以人为本的设计。这种设计需要长时间地与模糊性共存,以便从中汲取经验,而不是停留在幻灯片上假装自己已经知道了。

问题?

我们不会把溯因推理当成一门技能来教。我们把它当成直觉。高级设计师“大概知道”的东西。

我想皮尔斯不会同意。对他来说,溯因推理不是魔法,而是逻辑。溯因推理是可以训练的,可以解释的,而且也值得实践。

如果说演绎法是数学的逻辑,归纳法是科学的逻辑,那么溯因法就是设计的逻辑。

优秀的设计师总是在别人追寻答案之前提出更精妙的问题。这也是为什么他们不仅仅是在建造,而是在观察

通过 GenAI 进行溯因推理

溯因推理并不仅限于设计。每当我们试图理解一些不明确的事物时,它都会出现。而没有什么比我们如何使用生成式人工智能更切题(或更容易被忽视)了。

在 GenAI 出现之前,深度思考进展缓慢。你必须面对模棱两可的情况,理解零散的信息,并挑战自己的假设。这种方式效率不高,但确实有效。

现在,有了 GenAI,我们就有了一个可以模拟新观点、提出反驳意见并帮助我们比以往更快地测试想法的工具。

但大多数人并非如此使用。他们带着结果而来,而不是带着疑问。他们寻求的是确认,而不是探索。他们把这个工具当成了自动售货机

提示法运用得当,就能起到溯因推理的作用。你先提出一个假设,然后提出问题,探索可能成立的结论。之后,不断完善假设。

如果使用不当,该工具会反映你的第一个假设。听起来很有说服力,但却无法加深你的理解。

早在语言模型出现之前,皮尔斯就对此发出过警告。当信念被过快接受时,它就会停止进化。当质疑从学习过程中消失时,学习也会随之消失。

提示是练习溯因推理的机会,但只有我们像自己思考一样小心地使用它时,才有意义。

所以呢?

我们并非为真理而设计,而是为可以演变的信念而设计,这意味着我们要适应模糊性,提出更好的问题,并抵制急于获得确定性的冲动。

如果人工智能要帮助我们思考(而不仅仅是产生结果),那么我们必须教会人们如何谨慎地推测并检验假设。我们还必须教会人们如何在不失去控制的情况下改变想法。

查尔斯·皮尔士为我们提供了一个模型,帮助我们在事实不全的情况下进行推理。这是一种灵活且愿意犯错的思维方法。

它仍然有效。

如果你对这些思维习惯是如何养成的感兴趣,我曾专门写过关于弗里德里希·福禄贝尔的文章,他是一位向我们展示如何塑造学习方式的教育家。

我们花了很多时间讨论如何训练人工智能,但却很少思考如何训练我们自己思考。

皮尔斯做到了。

也许现在正是我们倾听的时候了。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

日历

链接

个人资料

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

存档