首页

优秀UI设计背后的心理学

杰睿 交互设计及用户体验

你知道那些感觉恰到好处的设计吗?就是那些所有东西看起来都恰到好处,你不用眯着眼睛看,不用思考,也不用疯狂点击就能搞清楚的东西。

这不是魔术,而是心理学。

好的 UI 设计并非仅仅因为选择了合适的蓝色调或使用了漂亮的字体就能够实现。它之所以有效,是因为它了解人们的想法。他们注意到了什么,忽略了什么,以及什么会让他们偷偷地咒骂。

让我们分析一下优秀 UI 设计背后的心理学,这样您就可以打造让用户感觉自己像天才的体验,即使他们还没有喝咖啡。

1. 你的大脑是个懒惰的天才(认知负荷)

事实是这样的:人类的大脑非常强大,但也非常懒惰。

我们一直在努力节省脑力。正因如此,优秀的 UI 设计不会让人们思考过多。如果你的应用感觉像个谜题,用户就会离开,甚至可能在离开时留下措辞激烈的评论。

设计不是为了炫耀你有多聪明,而是为了让用户感觉自己很聪明。

不会让人头脑发热的技巧:

  • 使用清晰的层次结构。每个屏幕一个主要操作通常就足够了。
  • 避免不必要的选择。这不是智力竞赛节目。

隐藏复杂性,直到需要它为止。(是的,“高级设置”,我说的就是你。)

2.“选择太多”问题(希克定律)

希克定律很简单:你给某人的选择越多,他们做出选择的时间就越长。他们就越想哭,或者放弃。

你有没有看到过一个下拉菜单,上面列着 30 个国家,按字母顺序排列,以“阿富汗”开头?没错,就是这样。

设计的意义在于减少决策。设计的目的并非剥夺自由,而是让路径清晰可见。

像极简主义者一样设计:

  • 将大任务分解成更小的步骤。
  • 突出显示最常见或推荐的选项。
  • 使用默认值,因为大多数用户无论如何都会使用它们。

3. 目标应该容易实现(菲茨定律)

微型按钮。超薄的文本链接。可关闭的模态框,带有一个比果蝇还小的“X”。

我们都诅咒过它们。菲茨定律说,点击某个按钮所需的时间取决于两个因素:按钮的大小和距离。所以,如果你想让人们真正点击你的按钮,就让它可点击。

实用想法:

  • 增加触控目标,尤其是在移动设备上。没有人能像忍者一样精准地控制手指。
  • 将主要按钮放置在容易触及的位置。考虑拇指区域。
  • 避免操作间隔过长。误触会导致新的“愤怒点击”。

4. 视觉层次:用户流失的原因

用户不会从上到下阅读屏幕内容。他们浏览的速度就像松鼠在喝浓缩咖啡一样。

所以你需要像指挥家指挥管弦乐队一样控制视觉层次。利用大小、颜色、粗细和间距来传达“嘿,先看这里!”

如果没有等级制度,一切都会争夺关注。当一切都在大声喧哗时,没有人会被听到。

尝试一下:

  • 粗体表示主要操作。较不重要的内容则使用较轻的字体。
  • 像工作一样使用空白。(因为它就是你的工作。)
  • 想要快速测试一下吗?眯起眼睛看看你的设计。哪里最突出?那就是你的焦点。

5. 熟悉胜过创造力

你可能想成为按钮界的毕加索,或者重新设计导航栏。但你猜怎么着?人们喜欢他们熟悉的东西。

登录表单中邮箱和密码的顺序总是一致的,这是有原因的。这不是懒惰,而是熟悉。

该怎么办:

  • 坚持使用关键流程的标准 UI 模式:注册、结帐、导航。
  • 将创意内容保存为微交互或视觉效果,而不是基本布局。
  • 记住:熟悉=值得信赖。奇怪=可疑。

6. 将属于同一类的事物归为一类(格式塔心理学)

格式塔心理学本质上是我们大脑快速解读现实的方式。我们不会将事物视为孤立的元素。我们会根据接近性、相似性、一致性和连续性对它们进行分组。

如果你的 UI 不遵循这些模式,用户就会感到困惑。而困惑是导致你关闭标签页的捷径。

例子:

  • 外观相同的按钮应该具有类似的功能。不要欺骗用户。
  • 将表单中的相关字段放在一起。不要像复活节彩蛋一样将“姓名”和“电子邮件”散落一地。
  • 对齐内容。未对齐的内容会引发潜意识的不适。

7. 情感>逻辑

秘诀在于:人们会凭情感做出决定,然后用逻辑来证明其合理性。这同样适用于用户界面。

想一想。你是否曾经仅仅因为感觉良好而点击过某个按钮?那种令人满意的悬停效果?那种微妙的动画效果?

设计可以激发喜悦,也可以激发沮丧。

如何为感受而设计:

  • 使用个性化的微文案。一点点魅力就能带来很大的效果。
  • 动画应该像黄油一样,而不是迈克尔贝的电影。
  • 创造愉悦的时刻:令人愉快的成功信息、五彩纸屑动画或令人满意的加载状态。

8. 人们记住高峰和结束(峰终定律)

用户不会记住旅程的每一秒。他们只会记住最激动人心的时刻和旅程的结局。这就是峰终定律。

因此,如果您的结账流程无缝,但确认屏幕看起来像 404 页面,猜猜他们会记住什么?

设计提示:

  • 找到你的“巅峰时刻”。让它们变得令人愉悦。
  • 千万不要忽视结尾。确认信息、感谢页面、注册成功页面,它们比你想象的更重要。

9. 真正的用户体验恶棍:不确定性

如果用户不确定按钮的功能,他们就会犹豫。犹豫会扼杀用户行动的动力。

最好的用户界面能消除疑虑。它会说:“嘿,点击这里。很安全。你不会意外删除所有内容。”

使用这些武器:

  • 清晰的标签:“保存草稿”比“提交”更好。
  • 微文本:一行小文字就能消除恐惧。
  • 反馈:显示刚刚发生的事情以及接下来发生的事情。

10. 让你保持理智的工具

说实话,有时候你确实没时间从头开始构建每个流程。这时,像Made in Figma这样的插件就能帮上忙了。

它允许您直接使用预先构建的 UI 流程和遵循最佳实践的组件。无需猜测,无需费力寻找灵感。就像拥有一位话不多的设计副驾驶。

当我想快速行动而不牺牲质量时,或者当我的大脑在咖啡因的烟雾中运转并且我只是需要一个可靠的布局来即兴发挥时,我会经常使用它。

额外奖励:如果您仍在阅读……

首先谢谢。看来你对好的设计很认真。

其次,这是心理学驱动的用户界面的备忘单:

  • 减少噪音(越少越好)
  • 引导眼睛
  • 尊重默认设置和模式
  • 设计要注重情感,而非仅仅考虑逻辑
  • 帮助用户感受到掌控
  • 有疑问的时候?别耍小聪明,要清楚

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

苹果的 10 个用户体验秘诀,让你的产品魅力无穷

杰睿 交互设计及用户体验

如果苹果是个人,他们一定是那种毫不费力就能展现酷劲的朋友:总是穿着完美的衣服出现,说话从不磕磕巴巴,而且总能把喝水装点得优雅大方。所有这些魅力背后,是对细节的极致关注、对用户体验近乎病态的执着,以及塑造了半个互联网的设计理念。

您可以从 Apple UX 剧本中借鉴一些经验,让您的产品变得更好、更简洁、更容易让人上瘾。

1. 关注微观问题

苹果精心设计了一些你永远不会注意到的东西,直到它们消失。比如在 iOS 上拖动图标时,图标会轻微弹起。或者音量滑块的触感也有些奇特。这些都不是随意的花招,而是经过深思熟虑的。

在用户体验中,小事并不小。它们是你向用户展示你关心的方式。

你无需从头开始设计所有内容。像MadeinFigma这样的工具可以为你提供精美的 UI 工具包和流程,因此你可以专注于微交互,而不必重新设计按钮。

2. 像杀恶棍一样消灭功能

简单并不意味着“缺乏功能”。它意味着你放弃了 17 个功能,以便让这个“功能”能够闪耀。

苹果经常这么做。如果某个功能让用户感到困惑或拖慢了速度,它就会被移除。这就是为什么iPhone的拨号应用没有内置任务管理器的原因。(是的,有人试过了。)

你的产品不需要满足所有人的需求,只需要让某些人感到惊喜即可。

3. 用目的来激发活力,而不是仅仅靠感觉

动画是用户体验的过渡。就像 PowerPoint 中的过渡一样,它们可以是雅致的,也可以是充满拉斯维加斯风格的。

苹果用动画来教导和引导用户。当窗口缩小到 Dock 中时,你的大脑会映射出它的位置。这就是用户体验的精髓:隐形、高效、令人满意。

4. 让界面消失

最好的界面是让人忘记自己正在使用的界面。听起来很无聊?或许吧。但隐形才是梦想。

有没有注意到 iOS 上的 Notes 应用几乎没有界面?这不是懒惰,而是自信。

作为设计师,你的工作是让用户感觉自己是个天才,而不是提醒他们你在按钮阴影上花了多少功夫。

5. 保持一致,然后添加惊喜

苹果做的每件事都遵循着某种模式,直到它不再如此。这就是他们赢得欢心的方式。

把它想象成爵士乐:你坚持节奏,这样当你打破节奏时,它是美妙的,而不是混乱的。

在整个产品中使用一致的布局、间距和行为。然后用一个小惊喜奖励用户。一个有趣的空白状态。一个令人满意的点击。一个柯基动画。(好吧,也许不是柯基。)

6. 解决问题,而不是趋势

苹果不会为了赶潮流而赶潮流。他们之前没有推出“Always-On”显示屏,是因为他们觉得它实用又省电。

好的用户体验是实用的,它能消除用户的痛点。所以,与其问“现在什么最热门?”,不如问“今天我的用户最烦什么?”

7. 与用户沟通时,要像对待真人一样,而不是像对待错误日志那样

如果您的界面显示“第 3 行出现意外输入字符串”,请离开一下。

苹果的文字清晰、人性化,偶尔还充满魅力。当你连接 Airdrop 时,它显示“正在等待……”而不是“正在传输 278 个数据包中的第 4 个”。

文字是用户体验的一部分。好的文案可以让 bug 变得无足轻重。

8. 设计要考虑感受,而不仅仅是功能

苹果明白用户体验不仅仅关乎可用性,还关乎情感。

想象一下,iPhone 闹钟会告诉你还能睡几个小时。这就是 UI 形式的同理心。

你的产品应该不仅仅是用来工作。它应该让人安心、鼓舞人心、感到快乐。这才是赢得忠诚的关键。

9.承认自己的错误

苹果虽然饱受批评,但他们也承认自己的失误。当苹果发货时,他们会提供免费维修。他们不会在你的屏幕上贴个标签,然后说:“尽量别打字太多。”

当你的应用出现故障时,请坦诚相待。提供一条前进的道路。设计一个像人一样感知错误状态,而不是像防火墙一样。

10. 与人一起测试(而不是团队 Slack)

设计师不是用户。开发人员更不是用户。你尤其不是用户。

真正的反馈来自那些不在乎你的 Figma 文件名的人。看着他们使用你的产品。看着他们遇到问题。哭一会儿。然后解决问题。

越快将可用的原型呈现在大家面前越好。如有需要,可以使用MadeinFigma快速设计一个包含完整流程且外观精美的原型。

结束语:

苹果的用户体验魔法并非魔法,而是一个过程,一种同理心,一种拒绝满足于“足够好”的精神。

你不需要建造一个太空园区来实现同样的目标。只需要一点品味,多加用心,或许还能从合适的设计工具中抢占先机。

从小事做起,从大处着眼。专注于细节。然后在你花一年时间过度思考之前,赶紧发布。

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

用户体验的骨骼

杰睿 交互设计及用户体验

如果说设计探索和创造力是肌肉,那么结构就是骨骼。没有结构支撑,肌肉就无法运作。没有骨骼的肌肉只是一团乱麻,无法进行有意义的运动或产生力量。结构赋予我们的创意以张力,从而产生力量。我们的设计力量不会因结构而削弱,反而会因结构而增强。

将显示缩放图像
手绘插图展示手臂骨骼和肌肉产生的力量。
权力需要结构才能发挥作用。

非结构化设计的陷阱

团队很容易就直接进入流程和界面模型。利益相关者提出功能需求。项目截止日期确定。敏捷待办事项列表呼之欲出。设计师……他们用屏幕来回应。这是他们能展示的最具体的东西,让所有团队成员都觉得自己了解事情的发展方向。

但如果没有清晰的组织,事情就会变得很混乱。

这就像在没有骨架的情况下锻炼肌肉。肌肉收紧,却没有支撑肌肉的支撑。结果会怎样?错位、返工,以及薄弱的解决方案。人们在行动,但缺乏协调,效率低下。

那么,问题是……我们如何防止这种情况发生?

改变一切的结构性思维

三年前,我接触到了面向对象用户体验 (UX)。一位同事向我介绍了它。作为一名曾经从事面向对象编程的开发人员,我一下子就被它深深吸引。

虽然我一开始并没有深入研究,但我从基础开始:识别核心对象、命名属性以及映射关系。很快,我开始清晰起来。现在更容易发现差距,更容易与利益相关者沟通,也更自信地领导设计活动。虽然我个人很喜欢OOUX,但它并没有在整个组织中广泛应用。

直到最近……情况才有所改变。在过去的几个月里,团队里有几个人学习了OOUX思维,并在最近的一个项目中运用它。我很高兴又有人看到了结构化思维的价值!

将显示缩放图像
手绘腿部插图,显示膝关节铰链如何运用肌肉力量
骨骼就像杠杆一样,可以施加肌肉的力量

这个项目进展很快。但团队中有人很有远见,在项目初期就放慢了速度,盘点并绘制对象和关系图。他们使用了一款基于面向对象思维的自主研发工具。只需几次会议,我们就清晰地了解了应该向用户呈现哪些内容、这些元素如何关联,以及它们之间的连接结构。这为团队凝聚力构建了框架结构。而且,这短暂的放慢带来了意想不到的回报。

我看到了三大好处:

  1. 这种清晰的思路促成了更牢固的合作关系。项目团队迅速就清晰的对象模型达成一致。这意味着我们正朝着同一个方向努力。我们无需浪费时间重新解读模糊的需求或处理沟通上的错误。产品负责人、工程师、架构师和设计师都理解我们的设计理念以及各个组件之间的联系。
  2. 团队可以独立并行运行。这种清晰的思路意味着瀑布式设计交接的终结。它增强了团队之间、学科之间的信任,而这一切都建立在强大的共识之上。团队可以独立并行运行,因为他们了解保持工作和谐的总体结构。
  3. 使设计工作速度翻倍。设计师无需再浪费时间去探索用户会看到哪些信息以及这些项目之间的关系。他们可以专注于如何呈现,而不是关注展示什么。他们的设计精力集中在如何以最佳的方式为用户排列对象上。

虽然还有其他好处,但作为一名设计领导者,这三点对我来说至关重要。因为我们的骨架已经到位,所以创意工作(肌肉)才能发挥作用。坚实的结构提供了一个锚点,让我们能够充分发挥创造力的力量。设计师们行动迅速、自信,并且目标明确。最重要的是,他们与周围的团队能够和谐共处。

OOUX入门

现在,您可能想知道如何才能看到同样的结果?嗯,您的实际效果可能会因项目和文化而异。但是,根据我使用 OOUX 以及观察我的团队对其的依赖程度的个人经验……我强烈推荐这套工具集。

将显示缩放图像
手绘的苹果树与阳光和草的插图
映射对象不必过于复杂

你无需彻底改造整个流程即可从 OOUX 中获益。请不要这么做。它只是你工具包中另一个帮助你理解设计问题的工具。

你可以从小事做起,随着时间的推移逐渐成长:

  • 确定用户将与之交互的核心对象。有些人将这些称为体验的“名词”。它们是你在项目中必须考虑的“对象”。如果你正在构建水果体验,其中一个对象可能是苹果。它是一个具体的、可定义的事物。不是吃苹果,而是苹果本身。你可以开始问:现实世界中存在的哪些“事物”必须在数字体验中呈现?哪些“事物”被创建和管理?这种思考将为你的下一步工作奠定坚实的基石。
  • 定义每个对象的属性。每个“事物”(或对象)都有其定义性特质。就像苹果有绿色、红色或黄色等颜色一样,苹果也有成熟度。这些是系统中所呈现的对象的定义性特征,使每个对象独一无二且易于区分。哪些特征定义了系统中的对象?哪些内容可以更改或不可更改?(标题、描述、颜色、状态、日期等)。这些属性可以快速提供构成人们与这些对象交互的细节。
  • 映射它们之间的关系。这是接下来的关键步骤之一。对象(或系统中的“事物”)并非孤立存在。它们与其他对象相互作用。一个苹果与一棵树、它装运的板条箱以及销售它的杂货店的陈列品都有关系。映射这些对象之间的关系,可以让用户更清晰地理解它们。它们之间是否存在父子关系?一个对象是否依赖另一个对象?是否存在隐藏的对象?这些关系可以清晰地展现骨骼的排列和绑定方式。

即使是像这样简单的练习也能快速带来清晰的思路。而且它们规模化程度很高。它们为清晰的思路提供了起点。虽然它们并非面向对象用户体验 (OOUX) 工具集的完整代表,但它们是面向对象思维的开端,您可以轻松掌握并立即开始使用。

如果您想了解更多,可以访问OOUX.com ,了解Sophia Prater 提出的ORCA 流程。如果您想更深入地了解,可以加入OOUX 社区并参加一些官方培训。这些工具为您提供了支持更具雄心的设计工作的结构——无需猜测。

(重要免责声明:不管你怎么想……这里没有附属链接或回扣。我只是热衷于分享有用的资源,以帮助设计师提高效率。)

结构是一种资产

让我们重新审视一下人体骨骼的类比。如果没有有序的骨骼,肌肉就无法赋予人体活动能力。我们无法举起或移动物体。人体需要肌肉和骨骼。这些骨骼必须有序排列。每当一根骨头断裂,就会降低肌肉发力的能力。

将显示缩放图像
手绘骨骼缺失插图:需要结构
发挥创造力需要结构

此外,人体骨骼种类繁多。股骨极其坚固。内耳骨又小又敏感。你可以依靠股骨来引导腿部肌肉的力量……但内耳骨的作用就没那么大了。组织这些骨骼,了解它们的属性,并安排它们之间的关系,为肌肉的有效运作提供了基础。

设计也是如此。组织结构清晰,让你能够运用创造力,让你的设计力更加有效。想想奥运会举重运动员惊人的力量吧。这一切都归功于健康的骨骼结构。

当项目变得模糊不清、定义不明确时,问问自己是否应该暂时放慢速度来组织起来。

如何运用设计探索的方法来理解项目目标?如何与您所在领域的团队合作,共同完成这类地图?

结构的刚性应该成为优势,而不是劣势。尤其是在用作支撑元素时。它能让创造性思维获得动力,而不是徒劳无功。因为即使是世界上最强大的肌肉,如果没有支撑,也是无用的。

OOUX思维赋予了我们团队以目标为导向的动力。每次运用它,我们都会被提醒:结构并非创造力的障碍……而是能够最大程度发挥创造力的因素。

 

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

新的用户体验规则:人工智能推荐如何改变设计

杰睿 交互设计及用户体验

新的用户体验规则:人工智能推荐如何改变设计 — 0001

你知道那种滚动页面的瞬间吗?——感觉网站好像已经知道你想要什么了?没错,这就是人工智能在幕后运作。如今的用户体验设计不再只是按钮或漂亮的颜色。感觉就像……界面在和你一起思考。有点诡异,也有点酷。

Netflix 的界面、亚马逊的产品推荐,甚至ChatGPT UI 等工具都展现了人工智能如何改变游戏规则。而且,就连 Plerdy SEO Analyzer 或 Visual Inspector 等 Chrome 扩展程序也加入了这场革命。

为什么这很重要?因为如果你的设计还停留在 2015 年的水平,用户很快就会跳出。

为什么传统的用户体验规则不再有效

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0002

说实话——旧的用户体验设计已经行不通了。用户的行为不再像以前那样。他们不再遵循你漂亮的布局。他们滚动得太快。他们疯狂点击。他们像忍者一样跳过横幅。你那简洁的设计?现在都消失了。

我在测试的一家网店里看到了这种情况。看起来不错。但当我们查看热力图时,发现大多数用户根本没看过侧边栏。就好像它根本不存在一样。就在那时,我想——好吧,也许是时候放弃传统的用户体验“规则”了,开始相信人们的实际行为。

静态设计满足动态期望

用户想要快速、智能、响应迅速的用户界面。但传统的设计呢?它只是僵硬、静止,就像没有遥控器的老电视一样。你点击某个按钮……除非你强制操作,否则什么也不会改变。这才是糟糕的用户体验。

您是否注意到:

  • 菜单永远停留在同一个地方
  • 滚动感觉就像一条漫长而无聊的隧道
  • 横幅弹出,但没人看

是的。这就是为什么静态用户体验不再有效。设计必须随着用户而动,而不是仅仅停留在外观上。

预测性用户体验的兴起

这部分很疯狂。预测性用户体验意味着人工智能会观察用户的行为——他们点击了哪里,跳过了什么——然后自动更改下次访问的界面。也就是说,你不用再猜测了。人工智能知道。

TikTok?预测性。亚马逊?也一样。就连Netflix也会根据你观看的内容改变图像。这不是魔法——而是用户体验设计中的人工智能。

而且你不需要一个价值数十亿美元的团队。你可以轻松地测试。上周我用了 Plerdy SEO Analyzer,它能告诉我哪些内容块值得关注,哪些不值得。它甚至还能提供修复元标签、标题和可读性的人工智能技巧。这对于我们这样的用户体验人员来说意义重大。

旧用户体验关注的是“好看”。新用户体验关注的是“反应快”。设计如今充满活力。如果它不再活跃,你的用户可能已经流失了。

人工智能在个性化用户体验中的作用

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0003

你有没有打开一个网站,感觉就像——等等,这个页面认识我?这不是魔法。这是人工智能在后台运行,让用户体验比你的晨间播放列表更个性化。而且,这不仅仅是谷歌或Meta的专利。现在,即使是小型团队也会使用人工智能工具来针对每一位用户调整设计。

用户体验不再是千篇一律的布局。现在,设计需要做出反应、进行调整,有时甚至在用户说出之前就能猜测他们想要什么。没错,人工智能非常擅长猜测。

去年我帮助过的一家网店就出现了这种情况。我们添加了AI驱动的产品区块,它会根据用户之前的操作进行调整。结果如何?短短两周内,转化率就提升了21%。这可不是理论,而是真实的数据。所以,如果你的用户体验仍然在等待用户操作,而不是预测用户行为,那么你可能已经落后了。

以下是推动现代个性化用户体验的因素:

  • 行为模式
  • 基于意图的设计转变
  • 实时 UI 决策

这不是未来,而是现在。用户已经对此有所期待。

人工智能实时推荐

它的工作原理如下:用户点击一个产品。突然,下一个版块就变了。不同的推荐、新的横幅,甚至可能是另一个行动号召 (CTA)。无需重新加载,无需等待。这就是实时个性化。AI 会跟踪用户操作并立即更新设计。

我曾与波兰一家小型电商合作。我们使用了一种工具,可以查看点击历史记录,然后推送“智能区块”——一些显示更匹配的小设计元素。用户在网站上停留的时间更长了。跳出率下降了 15%。这就是人工智能提升用户体验的成果。

想想 Dynamic Yield 或 Plerdy SEO Analyzer 这样的工具——它们能帮你了解哪些内容效果显著,以及哪些方面可以提升价值。它们不仅仅基于屏幕尺寸,还基于实际操作。这几乎就像网站现在有了大脑一样。

相信我,一旦你尝试过,就不会再回头了。

自适应布局与响应式设计

现在,不要混淆响应式和自适应——它们听起来很相似,但本质上并不相同。响应式设计只是根据设备改变布局。平板电脑?更小的按钮。手机?折叠菜单。仅此而已。

但自适应布局更深入。人工智能会检查用户的行为——快速滚动、不点击、来回滑动——并实时调整设计。它可能会隐藏菜单,或者将浮动按钮向上推。这就是用户体验变得智能的地方。

Netflix 也这么做。如果你经常暂停,他们会把控制键移得更近。亚马逊会根据滚动深度调整产品行。这不是 CSS 媒体查询,而是 AI 在读懂你的想法。

没错,响应式设计固然很好,但自适应性呢?这才是本能的设计。人工智能让用户体验不仅实用,更令人难忘。

帮助你分析人工智能驱动的用户体验的 Chrome 扩展程序

我不太喜欢猜测,尤其是在用户体验设计方面。你添加了一些人工智能驱动的区块,但你不知道用户是否能看到它?这就是为什么我开始使用 Chrome 扩展程序进行用户体验测试。它们不是昂贵的大型工具,而是快速、简单的插件,可以展示真实的情况。有些我每天都会用,有些则只用于 A/B 测试。但当人工智能扰乱你的布局时,它们结合起来会非常有帮助。

这是我的首选组合:

相信我,当您的用户体验由人工智能驱动并且您希望确保用户不会迷失在“智能”布局中时,这种组合会非常有效。

Plerdy 分析网站— 用户体验模式和热图

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0004

在任何重新设计之前,我都会先运行这个工具。即使是在竞争对手的网站上,它也能显示滚动深度、热门点击区域以及没人触及的区域。你甚至不需要在他们的网站上安装任何东西——它就能正常工作。

它帮助我发现,40% 的用户会跳过一位客户主页上的产品横幅。我们将横幅位置下移,并修改了 CTA,跳出率下降了。快速简洁的用户体验赢得了胜利。

Lighthouse — 核心用户体验指标和可访问性洞察

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0005

这个插件内置于 Chrome 浏览器内,无需安装。当我想知道我的设计是否真的有效时,我会使用它——加载速度快、布局无偏移、对比度好、移动端视图清晰。

有一次,AI 在我工作的主页上添加了一个漂亮的轮播图。看起来很漂亮。但 Lighthouse 显示,它的加载速度降低了 1.6 秒。移动评分也下降了。我们把它移除了。页面体验好上百倍。

它还会检查可访问性,这是良好用户体验的一部分。如果您的字体太小或背景颜色太淡——Lighthouse 会直接告诉您。毫不留情。

Visual Inspector — 实时编辑与协作

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0006

说实话,当我不想碰代码的时候,我会用这个。你只需点击一下,更改颜色,移动一个块——就搞定了。非常适合演示,或者当客户说“你能把那个按钮移开一点吗?”的时候。

另一个很酷的功能是:你可以添加评论或与团队分享预览。它让反馈更容易,设计也更有趣。当AI做出奇怪的布局,而你需要快速“人工修复”时,这是一个很棒的工具。

Plerdy SEO 分析器— 实时内容和结构审核

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0007

这个工具简直是救星。我在一个包含 AI 生成版块的博客上测试了它。它在几秒钟内就帮我完成了一次完整的 SEO 审核。它可以检查标题、文本可读性、关键词密度,甚至还能显示内容中哪些部分比较薄弱。

最棒的是?它能提供真正的 AI 提示。比如,“这个标题太长了”或“这里缺少 H2 按钮”。所以,当 AI 搞乱了你的页面结构时,这个扩展程序会准确地告诉你该如何修复。没有废话,只有直接的建议,让用户体验更强大。

需要分析人工智能如何影响你的用户体验吗?这些扩展程序不仅能为你展示数字,还能帮助你了解用户的感受。而这才是真正的设计发生的地方。

A/B 测试 AI 驱动的 UI 决策

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0007

有时人工智能会给出很酷的想法。但并非所有想法都对真实用户有益。这听起来可能显而易见,但测试人工智能生成的设计是绝对必要的。即使用户体验看起来很棒,也并不意味着人们会点击或滚动。设计需要验证。用户体验需要行为数据。否则,它就只是猜测。

我记得我做过一个测试——我们用人工智能修改了主页布局。它拥有智能用户体验、自适应设计,看起来很新颖。但用户互动性很差。滚动地图很冷门。我们把CTA(行动号召)移到了更高的位置,改变了按钮样式——A /B测试之后,点击率跃升了31%。这就是测试的作用。

人工智能虽然强大,但却无法解读人类的情感。A/B 测试可以帮助你的用户体验匹配真实的用户,而不仅仅是算法。

从假设到热图

假设AI告诉你要更改UI布局。新的结构。新的区块。听起来很棒。但你怎么知道这对设计有帮助呢?

测试一下,就这么简单。我总是从一个小想法开始——比如改变标题顺序或移动定价区块。然后我会用 Plerdy Analyze Websites 来观察真实用户的行为。这个工具可以显示热图、滚动深度和点击次数。它对于测试动态用户体验非常方便。

以下是我的做法:

  1. 通过新的用户体验创建 AI 变体
  2. 根据实际点击跟踪交互模式
  3. 审查每个设计元素的滚动、弹跳和行为

设计的意义不在于看起来有多酷,而在于用户实际使用的内容。这就是为什么我从来不会在没有检查行为数据的情况下发布新的UI。即使是最聪明的AI创意,如果用户体验不能与人产生共鸣,也会失败。

通过内容审核衡量结果

现在让我们将设计和 SEO 结合起来。因为现代用户体验不仅仅关乎布局或按钮。它还关乎内容的体验、阅读方式以及搜索引擎的运作方式。

每次 A/B 测试后,我都会用 Plerdy SEO Analyzer。它会检查内容是否仍然遵循良好的结构。它会显示标题是否正确,关键词是否仍然有效,以及 AI 是否改写了某些错误的内容。有一次,AI 把 H2 改成了一个笑话——流量就下降了。一点也不好笑。

分析器几分钟内就帮我解决了问题。我再次调整了设计。用户体验变得更简洁了。SEO流量也回来了。

所以,没错——用AI来改进UI和设计,但千万别跳过测试。没有测试的UX是没有未来的。

用户体验的未来是人工智能

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0008

用户体验不再仅仅依靠人工智能。用户体验正在成为人工智能。这是事实。而且,这并非科幻故事。它已经存在。你浏览TikTok——这就是人工智能驱动的用户体验。你在亚马逊上购物——整个产品页面都会根据你过去的行为进行调整。设计不再是一成不变的。它变得智能、灵活,当然,还有点令人毛骨悚然。但这是一种好的方面。

我相信这不是一种“趋势”。这是新的基础。没有人工智能的用户体验会让人感觉陈旧、缓慢、愚蠢。而且用户不会等待。如果你的设计不能理解用户的想法,他们两秒后就会离开。

我们不能再把人工智能仅仅视为一个插件了。它是界面的新大脑。它控制着设计如何运作,用户如何移动,以及他们看到什么。如果你还没有这样想过……那么,是时候开始了。

从AI支持的用户体验到AI创建的用户体验

最疯狂的部分来了。以前,AI 只是在内容方面提供帮助,比如提供一些文字和一些布局建议。现在,它构建了整个用户体验,包括结构、按钮、哪些内容先显示、哪些内容会消失——所有的一切。像 Galileo AI 或 Uizard 这样的 AI 工具可以在几分钟内创建完整的界面模型,真正的原型。你只需要给出一个简短的提示。

即使是像 Booking.com 这样的大型公司,也使用 AI 来设计和运行数千个 UI 测试,无需人工干预。这并非为了节省时间,而是为了更智能的用户体验。更快的决策,更优的结果。

有些设计师感到害怕。我理解。但你知道吗?如果人工智能能让用户体验更简洁,设计更实用——我完全支持。

成为 AI 优先设计师

你不需要成为一名程序员,也不需要构建自己的模型。但你需要改变思维。别再问:“我该如何在这里添加人工智能?” 而是要问:“如果从一开始就由人工智能掌控,设计会是什么样子?”

从您熟悉的工具入手。使用 Plerdy SEO Analyzer 检查 AI 如何影响内容结构。在 Plerdy Analyze Websites 中试用热图,看看哪些方法有效。多考虑用户行为,少考虑固定的网格。

AI优先的思维模式意味着:你的设计会生存、学习并适应。这才是真正的用户体验。

结论

如果你仍然认为人工智能只是一种趋势,那你就错过了全局。人工智能并非要扼杀用户体验设计,而是要大力推动它的发展。它就像涡轮增压模式一样。你,设计师,仍然是规则的制定者。但现在,人工智能可以帮助你打破那些枯燥乏味的规则。像 Plerdy、Uizard甚至Figma AI 这样的工具,它们并非取代技能,而是加速了创造奇迹。所以,不要抗拒,要利用它。在用户点击离开之前,提升你的用户体验。

 

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

以人为本的人工智能:用户体验设计师的 5 个框架

杰睿 交互设计及用户体验

以一个人为决策树中心的插图

2024 年是人工智能取得重大进步的一年,这项技术以惊人的速度融入我们的职业和个人生活。

在家里,我很享受看着我的三个小儿子以他们自己独特的方式沉浸在人工智能世界里。他们被最新一波的人工智能玩具所吸引,尤其是我们家的新“宠物”机器人Loona。它能用近乎科幻般的对话让他们着迷——这得益于与2024年5月发布的GPT-4o的集成。Loona激发了孩子们的好奇心,引发了他们富有想象力的人机对话,甚至引发了兄弟姐妹之间关于它如何“思考”的热烈讨论。他们的兴奋提醒我们,人工智能已经在塑造下一代人与科技的关系——使其更加个性化、引人入胜,甚至更容易被理解。

将显示缩放图像
Loona机器人玩具图片
KEYi Tech 的 Loona 机器人 — 图片来源:keyirobot.com

这种惊奇感一直延续到2025年,伴随着NVIDIA在CES上令人叹为观止的主题演讲拉开帷幕,这场演讲展示了人形机器人的进步。NVIDIA首席执行官黄仁勋的演示凸显了他对机器人和人工智能发展现状的着迷,以及他对未来几年快速变革步伐的有力预测。

对于用户体验设计师来说,在人工智能快速发展的时代,好奇心与奉献精神的结合至关重要。拥抱人工智能需要我们重新思考我们的流程,理解该技术的底层系统,并确保人类价值观和用户需求始终是我们创作的核心。拥抱人工智能需要我们重新思考我们的流程,了解该技术的底层系统,并确保人类价值观和用户需求仍然是我们创造的核心。

随着人工智能成为数字创新的支柱,我们作为设计师的角色也在不断演变。我们不仅要塑造界面,更要打造将以人为本的原则与全新的技术交互方式相融合的体验。这种转变要求我们像技术人员一样思考,拥抱数据驱动的系统,并将用户中心置于人工智能项目之中。

为了引领这一转变,领先的科技公司和大学为以人为本的人工智能提供了切实可行的战略。在本文中,我将分享来自 IBM、谷歌、微软和卡内基梅隆大学的用户体验框架,为应对人工智能技术和工具的快速发展提供洞见和资源。

1. IBM 的 AI/人类语境模型

IBM 的AI/人类情境模型是其AI 设计实践的核心。该模型提供了一个结构化的框架,确保 AI 解决方案能够与用户无缝交互,并随着用户输入而不断演进,同时尊重并增强其运行环境。

将显示缩放图像
IBM网站截图
资源:IBM 的 AI 设计

IBM 的 AI/人类情境模型旨在指导符合人类需求和价值观的 AI 系统的开发。该模型将 AI 驱动的体验分解为几个关键考量因素,每个因素对于创建有目的性、情境感知和以人为本的解决方案都至关重要:

  1. 理解意图:人工智能系统必须优先考虑以人为本的目标,并考虑用户的意图、情感和情境。意图代表了人工智能系统的基本宗旨,涵盖了用户和企业的目标、愿望、需求和价值观。它定义了解决方案背后的“原因”,并确保系统设计具有清晰的、以用户为中心的目标。
  2. 数据与政策:这指的是从用户和外部世界收集的原始数据,以及保护和管理其使用的政策。数据是人工智能决策的支柱,但其收集和处理必须遵守严格的道德和监管标准。情境是实现有效人工智能交互的关键。IBM 强调系统理解影响用户行为的情境和环境因素的重要性。例如,位置、时间或任务紧急程度等情境数据可以帮助人工智能提供更个性化、更相关的建议。
  3. 机器理解、推理、知识和表达:这指的是人工智能系统在其领域范围内解释结构化和非结构化数据的能力,应用逻辑分析数据并决定最佳行动方案的能力,确保知识库通过新见解动态更新的能力,以及以符合用户环境和期望的方式传达其响应的能力。
  4. 人类反应与系统改进循环:这强调人工智能系统必须被设计为与人类协同工作,而不仅仅是为人类服务,从而确保自动化与人类自主性之间的平衡。用户反应反映了用户对人工智能系统表达的真实反馈——无论是显式的还是隐式的。学习强调系统如何基于用户交互和反馈不断改进,使其能够随着时间的推移不断发展并更好地服务于其目标。
  5. 评估结果:这强调结果衡量人工智能系统对现实世界的影响,代表它如何有效地满足用户需求并有效且合乎道德地解决问题。

2. Google 的可解释性评估标准

Google 的可解释性评估标准 (Explainability Rubric)提供了一个清晰的框架,用于创建透明、公平且以用户为中心的 AI 系统,并重点强调了 22 条需要与用户分享的关键信息。随着 AI 不断影响我们的工作方式、与企业的互动方式,甚至成为我们表达自我的工具,确保用户能够理解并信任这些系统至关重要。

将显示缩放图像
谷歌网站截图
资源:Google 的可解释性评估标准

该评分标准分为三个信息级别:一般级别特征级别决策级别。

  1. 总体层面:概述您的产品或服务的运作方式,包括人工智能的作用。解释使用人工智能的主要目的和优势、商业模式以及人工智能如何促进价值创造。重点介绍为确保安全、公平和透明而采取的措施,包括与社区互动、解决偏见问题以及分享绩效信息。
  2. 功能层面:详细说明具体的 AI 功能,包括其运作方式、AI 的激活时间以及用户控制选项。解释系统限制、人工参与和个性化选项。提供有关所用数据的信息,包括训练数据、外部输入以及用户数据的处理和利用方式。
  3. 决策层:阐明具体的人工智能决策是如何制定的,系统对其输出的可信度,以及如何识别错误或低质量结果。决策完成后,应提供用户反馈渠道,允许提出异议,并清晰地告知用户错误和修复措施。

3.微软的人机交互体验(HAX)工具包

微软的HAX 工具包是一个综合框架,专为开发面向用户的 AI 产品团队而设计。它有助于概念化 AI 系统的功能和行为方式,使其成为设计早期阶段的实用工具。

将显示缩放图像
微软网站截图
资源:微软的 HAX 工具包

HAX 工具包功能多样,允许团队根据自身独特的需求、用例、产品类别和目标,混合搭配其设计工具。HAX 工具包的关键组件包括:

  1. 人机交互指南:这些是设计用户交互过程中 AI 行为的最佳实践。它们指导 AI 产品规划,以确保直观有效的体验。
  2. HAX 设计库:一个资源中心,通过可操作的设计模式和真实世界的例子来解释人机交互指南。
  3. HAX 工作簿:一种协作工具,供团队确定优先实施哪些指南,促进有重点且高效的设计讨论。
  4. HAX 剧本:该剧本专为自然语言处理 (NLP) 应用程序量身定制,可识别常见的人机交互故障并提供缓解这些故障的策略。

4. HCI Institute 的 AI 头脑风暴工具包

AI 头脑风暴工具包由卡内基梅隆大学人机交互 (HCI) 研究所的研究人员创建,旨在提炼 AI 能力,帮助团队探索如何利用 AI 构建应用。创新的停滞往往并非源于技术,而是因为团队选择了错误的项目。AI 头脑风暴工具包解决了这个问题,提供了一种结构化的方法来设计既技术可行又以用户为中心的 AI 驱动解决方案。

将显示缩放图像
HCI Institute 工具包截图
资源:HCI Institute 的 AI 头脑风暴工具包

该套件的结构化方法降低了开发不相关或不必要的AI解决方案的风险。通过关注AI的功能和用户的需求,该套件使团队能够进行周到而有效的创新。该套件将AI功能分为不同的功能,例如:

  • 检测模式(例如识别图像中的人脸)
  • 预测趋势(例如预测股票价格)
  • 生成内容(例如创建合成图像或文本)
  • 自动化操作(例如跨不同应用程序执行工作流程)

它概述了 40 个涵盖医疗保健、教育和交通等不同领域的真实 AI 产品示例。该工具包还包含创意提示、影响力-投入矩阵和绩效-专业知识网格等工具,可指导用户选择具有高影响力且可行的创意。要使用该工具包,首先要查看 AI 功能和示例,以激发您的团队灵感。然后,进行结构化的头脑风暴会议,探索机会、完善概念并评估潜在解决方案。该资源非常适合研讨会、组织战略会议和创新实验室,确保团队设计出具有影响力且以用户为中心的 AI 产品。

5. Google 的 People + AI 指南

《People + AI 指南》由 Google 的多学科团队People + AI Research (PAIR) 创建,提供了方法、最佳实践、案例研究和设计模式的全面资源,旨在帮助设计师、开发人员和产品团队创建有影响力的 AI 驱动解决方案。

将显示缩放图像
谷歌网站截图
资源:Google 的 People + AI 指南

该指南介绍了 20 多种设计模式,为 AI 产品设计提供了实用且以行动为导向的指导。这些模式专注于解决产品开发过程中的关键挑战,并围绕常见问题进行组织,以帮助团队找到相关的见解。

  • 以人为本的人工智能入门:
    包括确定人工智能是否增加价值、设定明确的用户期望以及有效解释产品优势的指导。
  • 在产品中使用人工智能:
    强调充分利用人工智能,平衡自动化与用户控制,并管理精度和召回率的权衡。
  • 引导用户熟悉 AI 功能:
    涵盖熟悉度、确保探索安全以及对新功能提供清晰的解释。
  • 向用户解释人工智能:
    专注于解释人工智能能力以便理解,适当地展示模型信心,并在直接用例之外提供更深入的背景解释。
  • 负责任的数据集构建:
    重点介绍诸如涉及领域专家、为数据标签者设计、维护数据集以及接受现实世界数据的混乱等实践。
  • 建立和校准信任:
    指导团队透明地设置隐私、错误责任以及实现用户反馈和监督。
  • 平衡用户控制和自动化:
    提供有关逐步实现自动化、在需要时将控制权交还给用户以及确保自动化安全的建议。
  • 故障期间为用户提供支持:
    鼓励规划错误解决并确保用户在 AI 系统发生故障时能够继续前进。

这五个框架为设计能够自然融入我们日常生活的人工智能奠定了基础——无论是好玩的、会对话的机器人玩具,还是让我们保持井然有序、高效的应用程序。作为用户体验设计师,以人为本的框架来处理人工智能意味着要在新技术能力与责任之间取得平衡,审视人工智能是否已准备好并适用于每个用例,并构建具有用户反馈循环的系统以推动持续改进。

 

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

Duolingo 终止了“用户体验设计”这一术语

杰睿 交互设计及用户体验

Duolingo 终止用户体验设计

令人惊讶的是,Duolingo 的用户体验主管 Mig Reyes 在 LinkedIn 上宣布,公司已决定彻底改变 UX 设计一词,并用 PX 设计取而代之。

你可能会问, PX 设计是什么?让我们根据公司的说法来分析一下。

Mig Reyes 在 LinkedIn 上的帖子引发了一场争论

首先,他们明确表示将把用户体验 (UX) 的职能更名为产品体验 (PX)。之所以做出这一改变,是因为 Duolingo 是一家产品主导的公司,他们内部所做的一切都是为了产品。他们招聘的职位也包括产品设计师、产品文案和产品研究员。

我们尝试过“UX”这个统称。但最终没能坚持下来。它感觉不像我们。感觉……过时了。

最后,他们还提到了UI如何塑造用户体验,以及UX如何服务于产品,最终形成了完整的等式。这是一个相当有趣的UX设计理念,因为我们一直以来都认为用户和业务之间需要取得平衡。

此事在网上引发了众多设计师的强烈反对。有人认为这是公司赋予用户体验(UX)新身份、使其专注于业务和产品的绝妙之举;而另一些人则认为这只是一种营销噱头。

LinkedIn 上引发的争论

抛开这些审查不谈,这确实表明公司越来越看重设计师的头衔,更注重设计师的实际能力和技能。UX(用户体验)这个词在我出生前就出现了,之后经历了多次改版,所以这种情况对我来说并不意外。公司如何更加轻视设计师的头衔,而更注重设计师的职能和技能。UX 在我出生之前就已经被创造出来了,从那时起它已经经历了多次改版,所以这样的事情对我来说并不感到惊讶。

PX、AX、DX 等的崛起

这并不是我们见证的第一次用户体验 (UX) 品牌重塑。1993 年,用户体验之父唐纳德·诺曼 (Don Norman) 创造了“用户体验设计”一词,将平面设计、工业设计、文档和人机交互等概念融为一体。1993年,UX之父唐纳德·诺曼创造了UX设计这个术语,将图形设计、工业设计、文档和人机交互全部涵盖在一个整体中。

2011年,一位拥有产品设计背景的勇敢软件开发者挺身而出,致力于改变开发者的生活。他提出了“开发者体验”一词,涵盖了在其他现有平台上构建应用程序的开发者的体验。您可以在此处阅读详细文章。

最近,

宣布了一个名为“代理体验”(Agent Experience,简称AX)的新术语。该术语与基于代理的人工智能(AI)领域相关,涵盖了AI驱动的代理如何看待世界和数字体验。例如,某些代理可以与网页交互,并根据您的提示帮助您找到合适的内容。AI代理如何与网页交互?代表您拨打电话的AI代理将如何与其他人互动?问题无穷无尽,而AX或许正是AI代理未来发展的答案。阅读全文

 

这对 UX 设计师来说意味着什么?

每个创意或技术领域都必然会根据当前的技术趋势以及用户对产品的期望而发展。由于许多任务都由人工智能完成,设计师不可避免地会开始关注业务和产品功能,因此“PX”一词就显得合情合理。如果重点转向打造更优质的人工智能或代理体验,那么“AX”一词就显得合情合理。设计师开始关注业务和产品功能因此,PX 这个术语是有意义的。如果重点转向打造更好的 AI 或代理体验,那么 AX 就说得通了。

用户体验设计师现在必须与时俱进,掌握必要的技能例如针对设计、产品和业务的 AI 工作流程,甚至对市场上新兴趋势的了解。

无论术语是什么UX 和 UI 设计的基础和原则始终如一。事实上,在设计师数十年经验的基础上构建新的理念和流程比以往任何时候都更加重要。

【原创】交互设计案例分享:资源库网站设计

杰睿 交互设计及用户体验

 

项目背景:

随着生态保护意识提升,青海丰富的鸟类资源亟待数字化呈现与科普推广。为打破信息分散壁垒,助力科研、生态教育及观鸟爱好者交流,客户想要造青海鸟类资源库网站,以专业、直观、易用的 UI 设计,串联鸟类数据、科研成果与公众认知 。
该项目是与青海师范大学合作的[青海鸟类资源库]网站交互及UI设计,青海师范大学是我们的老客户了,本次项目我们也是从前期的内容整理归纳、交互原型设计、UI设计,再到最后的客户后期的开发还原度走查工作,最终实现的效果也获得了客户的认可。

项目概述:

产品定位:聚焦青海鸟类生态,打造集科普教育、科研辅助、观鸟互动于一体的数字化平台。既为专业学者提供精准数据检索、学术成果展示窗口,也向大众普及鸟类知识、传播生态保护理念,成为青海鸟类生态对外展示的 “数字名片” 。
目标用户:需求精准数据查询、学术成果沉淀与共享,关注知识图谱、文献列表等功能模块的科研学者;热衷鸟类科普、观鸟活动,期望通过直观界面了解物种、观测历程的生态保护爱好者;以轻松方式接触生态知识,侧重可视化展示(如地图分布、演化流程)与趣味互动(评论区、相关鸟类推荐 )的普通公众。
设计风格:色彩以青海地域元素为灵感,蓝天、雪山、湖泊蓝白渐变打底,搭配鸟类羽毛自然色调,营造清新、贴近自然氛围;布局遵循 “信息分层、高效浏览” 原则,大模块分区清晰,用卡片式设计承载内容,既保证视觉呼吸感,又通过微交互增强科技感与操作流畅性
 

设计亮点与价值:

知识图谱可视化:以鸟类为核心,关联栖息环境、食物链等信息,通过动态交互图谱,让用户直观理解物种生态关系,打破知识传播壁垒;
精准服务多元需求:为学者设计文献检索、数据统计模块,支持高效科研工作;为爱好者打造观鸟圣地推荐、实时评论互动,构建交流社区;为大众简化信息层级,用大图、短文案、轮播展示核心内容,降低科普门槛。
品牌与生态共鸣:通过统一视觉语言(如 Logo 融入鸟类形态、底部生态友好链接),强化 “青海鸟类保护数字阵地” 品牌认知,让用户在浏览中自然产生生态守护认同感,助力青海生态文化传播。
 
 

UI 设计中的情感化设计

涛涛 交互设计及用户体验

UI 设计中的情感化设计是设计师基于满足产品功能性和易用性后,设计出满足用户更高层级需求的创意表达工具,其目的是赋予产品情感以增加用户粘性、树立品牌形象以增强用户认知、引导用户操作以达成设计目的,可从本能层次(视觉)、行为层次(交互)和反思层次(思维)融入情感化设计,如视觉层次用独特 IP 形象、风格明确的规范化设计和拟人化动作,交互层次遵循操作前可预知等原则,思维层次明确服务者定位等,如此才能设计出以人为本的产品。

医疗自助服务机UX设计

涛涛 交互设计及用户体验

本次发布的是自助签到机,页面逻辑很简单,没有复杂之处,功能也是简单粗暴;受设备的影响一直秉持保持界面美观的情况下更注重用户实用性;

UI 和 UX 设计小技巧

涛涛 交互设计及用户体验

收集了 多 个 UI 和 UX 设计小技巧,涵盖视觉设计、排版、色彩、交互等多方面,包括通过微妙边界或多重阴影让元素更清晰、减少标题字母间距以实现视觉平衡、确保图标风格一致、适当留白使设计更透气、20pt 字体提升长文本阅读体验、基于字体比例定义字号集、选择基本色并通过色调和阴影增加一致性、移动端登录允许用户随时跳过并将跳过链接放在拇指易触及位置、确保阴影来自同一光源、合理进行图层管理、通过色彩对比度等突出重要元素、错误时添加视觉辅助、移动端创建足够大热区、保持文字与图像对比度等,这些技巧能通过最小调整改善设计细节和用户体验。

日历

链接

个人资料

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

存档