首页

人工智能对设计师日常工作和界面的真正影响:哪些因素仍然重要

杰睿

想法简述

  • 本文探讨了人工智能如何重塑设计师的工作流程,为研究、实施和测试提供速度和支持。
  • 报告认为,尽管人工智能很有用,但它缺乏深度和背景——因此人类的判断、批判性思维和用户洞察力是不可或缺的。
  • 它强调核心设计原则保持不变,设计师必须学会融入人工智能,同时又不丧失自己的技艺。

人工智能正在加速设计工作流程,并重塑我们构建数字产品的方式,但我们真的明智地运用了它吗?在这篇实用且以经验为导向的文章中,一位经验丰富的设计师剖析了人工智能在研究、原型设计和测试过程中真正提升价值的地方,以及它目前仍未达到的水平。从实用技巧到真实案例,本文探讨了如何在不牺牲用户洞察力、设计技巧或战略思维的情况下有效地与人工智能协作。如果您正在探索人工智能驱动的全新设计格局,那么这正是您所需要的视角。

如今,设计师们总是对人工智能加速工作流程赞不绝口。这并非没有道理——如今的企业比以往任何时候都更需要快速的草稿、快速的测试和快速的发布,以保持用户的参与度。

然而,许多设计师仍然未能抓住关键点,在产品中运用AI技术时未能充分发挥其专业知识。结果如何?许多被大肆宣传的AI产品制造的只是噪音而非价值,导致用户体验浅薄。

从事设计行业十年,我学会了对创新持保留态度,并将它们从昙花一现的潮流转化为切实可行的方法。正因如此,我想分享人工智能如何真正改变设计师的日常工作,如何改变界面,以及设计流程中哪些部分永远不会改变。

在本文中,我将分享示例、实用建议以及我的经验见解,帮助您了解人工智能的适用范围以及人类技能仍然是关键的地方。

如果您想清楚、诚实地了解人工智能对设计和商业的真正影响,请继续阅读。

为什么人工智能成为设计师日常工作流程的核心部分

为了更好地理解人工智能如何在每个阶段增强设计,首先概述一下在人工智能成为流程的一部分之前设计工作的传统展开方式。

总体而言,产品设计师通常采用两种主要工作方式:

这两种方法都面临着同样的挑战:企业不断缩减预算,加快进度。这迫使许多团队不得不做出取舍。设计师往往精力分散,最终忽略了更深入的探索工作。可用性测试充其量也只是在发布前进行——仓促且不足。

然后出现了人工智能。

根据我的经验,AI 可以在产品迭代周期的三个关键阶段为设计师提供支持:

  • 输入和产品分析。
  • 研究与探索。
  • 实施和测试。

让我们仔细看看它们。

1.分析

现在很多工具都提供人工智能生成的仪表板、反馈和用户行为摘要。它们非常方便,尤其是在你追踪趋势的时候。然而,它们并不总是准确的。

它能凸显可见的内容,但并不总是重要的内容。有时,真正推动结果的洞见被埋藏得更深,除非你主动寻找,否则很难发现它们,原因如下:

  • 人工智能根据可用数据生成枯燥、表面的摘要。
  • 它并不总是能区分信号和噪声,或者突出影响结果的因素。
  • 影响结果的一些见解可能与人工智能标记的完全不同。

提示:将 AI 摘要作为起点。如果某些内容引起了您的注意,请深入挖掘。返回原始数据,验证洞察,并确认它是基于实际用户行为,还是仅仅停留在纸面上。

2. 研究

研究是产品设计中最耗时(且常常被低估)的部分之一。它常常会耗费你几个小时。因此,AI 可以帮助你:

  • 从客户访谈、文档或 Notion 页面中提取关键要点。
  • 分析多个 URL 或来源中对特定主题的提及。
  • 无需逐一阅读,即可浏览数百条 App Store 评论。
  • 生成竞争对手的快速列表并提取他们提供的功能、他们的定位或用户的赞扬/抱怨。

但是,不要指望它能完成所有工作:)人工智能更像是团队中的一名额外研究员,需要得到指导、明确的方向和仔细检查。

提示:尝试成为更专业的T型专家,并学习如何编写一些脚本和提示。了解AI的思维方式将有助于你更好地引导它,并加快你的工作流程。

例如,您无需要求分析团队重建仪表板,只需下载包含评论的页面(例如 HTML 格式)。然后让 AI 对其进行解析,将其转换为表格,并按情绪或关键词排序。您无需等待几分钟即可发现规律,从而节省团队成员的时间。

3. 实施

在这个阶段,你可以加快初稿的创作速度。从落地页到屏幕流程,设计师在每一步都需要生成大量的素材,说实话,并非每个人都能跟上。例如,在我们的面试中,600名候选人中只有三分之一了解这个阶段的基本流程。

这就是为什么,借助一些人工智能的指导,你可以维持生存并:

  • 产生早期概念和插图。
  • 对布局清晰度或调色板进行压力测试。
  • 探索 UX 模式或流程变化,无需从头开始重新绘制所有内容。

提示:如果您想让起草协作更加高效,请为其提供 10 多个能够体现您品牌风格的参考视觉效果。请注意,AI 的性能取决于您提供的数据。它没有直观的视角。

Figma 的 AI 发布为例。它可以在几秒钟内创建 UI 界面,这对于快速绘制草图非常有用。但几周后,他们就禁用了这项功能。由于 Figma 的人工智能助手只在少数几家公司的设计系统上接受过培训,所以很多界面最终看起来非常相似。

下一个实用技巧:尽量清晰详细地描述你的视觉效果。理想情况下,首先写一个清晰的提示,描述风格和插图细节,并附上一些参考图片。然后,让AI生成JSON格式来解释提示的细节——这样,你就能知道它对你的理解程度。

如果结果不太理想,请调整输出或进行调整。例如,如果您想要一条类似骨头的细线,AI 可能会忽略这种细微之处,因此需要进行一些手动微调。一旦接近您的预期,您就可以使用优化后的 JSON 作为进一步迭代的参考。

4.测试

在人工智能测试之前,设计师必须不断要求开发人员创建一些东西并发布它,然后等待反馈才能正确启动它。

然而,如今,有了正确的流程和包含代码就绪组件的优秀设计系统,设计师自己构建用户流程的前端并不难。只需了解其在实践中的运作方式即可。有时,甚至不需要开发人员添加逻辑——只需一个感觉接近真实的工作原型即可。

您可以使用可点击的流程在 Figma 中进行测试,或者更进一步,分享一个基于浏览器的实时版本,用户可以通过该版本实际输入数据。它更加真实、更具洞察力,用户使用起来也更舒适。

提示:使用 AI 工具可以加快您的工作流程并减少对其他团队的依赖。从简单入手:无需等待分析师构建单独的仪表板——您可以自行生成代码并发出 API 请求。如果您需要更新 UI 元素,请直接在 Cursor 中执行,然后将其交给开发人员审核。在很多情况下,这样做会显著加快速度。

人工智能不会取代工艺或设计与开发之间的协作。但它可以消除摩擦。在这个商业目标瞬息万变的世界里,节省下来的时间可以让你拥有更多空间进行实验,打造更优质的产品。

人工智能如何帮助做出艰难决定

AI 无法(也不应该)替你做出产品决策。然而,它可以通过更清晰地呈现流程,帮助你更快、更自信地做出决策。

例如,在 TitanApps,我们总是会分析用户反馈来决定是否添加新功能。然而,用户并不总是会要求产品中出现“下一个重大改进”。因此,他们的大多数评论都反映的是现有功能。幸运的是,作为 Attlassian 社区的一员,我们可以访问论坛,在那里大家分享痛点、推荐工具并寻求帮助。

在人工智能出现之前,我们手动爬取论坛,尝试不同的关键词组合,追踪同义词,审阅长帖,并收集模式。有时,仅仅为了支持或反对某个产品方向,就需要整整一周的时间。

现在只需要几个小时。以下是整个流程:

  • 我们准备了一个结构化的 JSON 文件,其中包括论坛帖子链接、主题集群和相关元数据。
  • 人工智能扫描了大约 20 个主要链接,每个链接包含多个子主题,提取了关键见解,并在大约三个小时内汇编了调查结果。
  • 与此同时,我们用 90 分钟的时间,从竞争对手那里抓取 HTML 评论,进行了并行分析。我们想了解:用户是否提出了类似的问题?其他产品是如何应对的?他们是否能更好地解决问题,还是存在一些不足?

当然,在两次分析过程中,我们都验证了所使用的信息和来源。

在这两个直播活动进行的同时,我们花时间梳理了我们最初的想法在哪些方面没有引起人们的兴趣。在此过程中,我们的团队发现了一些更有价值的东西:围绕一个相关主题的需求正在增长,而这个主题是竞争对手尚未妥善解决的。

因此,我们不需要花整整一周的时间在论坛和主题之间来回切换,而是在一天之内就获得了完整的方向快照。

人工智能如何改变设计界面

随着人工智能越来越多地融入产品,改变的不仅仅是设计师的日常工作流程,界面本身也在不断发展。为了理解人工智能的影响,我们将其分为两类:

  • AI是用户主动交互的可见工具。
  • AI 是一个隐形层,可以在后台改善用户体验。

在这两种情况下,最终的界面不再是最重要的结果。更重要的是设计师能否放眼全局,理解用户的旅程。以下是这种转变的重要性:

  • 如果人工智能以助手或聊天机器人的形式出现,你需要了解用户对它的实际期望——他们会提出什么样的请求,他们试图解决什么问题。只有这样,你才能考虑如何呈现这些信息:纯文本、GPT 风格的聊天,还是仪表盘。

一开始,您可以让用户完全自由地输入任何内容并获得回复。但为了打造更智能、更流畅的体验,并更有效地训练模型,您需要识别其中的模式。有些人可能会寻找冲刺总结,而另一些人则可能寻找待办事项概览,甚至是拉取请求分析。

然后,下一个问题出现了:用户提取信息后会如何处理:在会议中使用、导出等。这会影响您在何处以及如何展示 AI 助手、您提供什么样的提示或模板,以及您可以自动化多少流程而无需用户手动询问。

提示:训练你的鸟瞰视角。尽管许多人都能察觉到设计优先级的这种转变,但根据我的经验,候选人往往会急于将问题视觉化。他们专注于单个屏幕,却没有分析整个用户交互和旅程。

如果人工智能在幕后默默运行,这种视角就变得更加重要。作为一名设计师,你需要:

  • 深入了解你的听众。
  • 跟踪反馈和分析。
  • 注意人工智能可以在哪些方面增强体验以及在哪些方面可能会造成阻碍。

以 Copilot 这样的开发者工具为例。早期的一个主要抱怨是,它无法适应每个人的风格。它会生成通用或难懂的代码,与具体情况不符。它非但没有提供帮助,反而扰乱了开发流程。

或者看看像 Cursor 这样的工具。它在 Twitter 上流行起来,人们开始用它来做一些小项目。然而,很多人甚至不知道如何让它正常工作。所以,并非所有 AI 工具都适合所有人,也并非所有时机都是引入它的合适时机。

为了更好地设计这种人工智能,你需要知道:

  • 当它有帮助时。
  • 它应该建议什么。
  • 用户将如何实际操作它。

提示:请记住,人工智能是一种工具,而不是灵丹妙药。这些后台助手即使不可见,仍然具有某种界面。设计师现在也必须学会为此进行设计。

人工智能无法改变的设计原则

尽管人工智能推动设计师去适应——像开发人员一样思考,平衡业务目标,并保持以用户为中心和独特的方法——但有些原则仍然没有改变,比如雅各布定律

用户会熟悉各种模式,他们不想重新学习已经奏效的方法。正因如此,不要无缘无故地重复造轮子至关重要。如果有既定的最佳实践,那就去实践。人工智能不会替你做决定——你的职责是了解哪些方法已经得到验证,何时值得创新,以及何时坚持用户已知的方法更为明智。

所以,没错,如今成为一名设计师比以往任何时候都更加复杂。但如果我们提升视野,保持T型思维,并抵制过度复杂化的冲动,我们就能利用这些工具——包括人工智能——来做得更好,而不仅仅是更快。

最终,我们的目标是设计出有意义的东西。

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

优秀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
 

桌面端界面设计 | 货物 TMS 系统 - SaaS & UI UX 设计:审美积累之境

杰睿

 

imgi_158_3bc92e199111429.664c7582aca9f.jpg在物流数字化的浪潮中,货物 TMS 系统的 SaaS 化与 UI/UX 设计正构建着独特的审美坐标系。这不仅是技术与功能的融合,更是一场关于效率美学的深度探索,为行业审美积累注入了鲜活的实践样本。
 
SaaS 模式赋予货物 TMS 系统轻盈而强大的特质,成为审美表达的基底。无需本地部署的轻量化架构,如同为设计卸下了沉重的枷锁,让界面得以在云端自由舒展。多终端适配的弹性设计,恰似物流网络的灵活调度,在电脑屏、平板与手机界面间实现无缝流转,每一次适配都是对 “一致性中见变化” 美学原则的生动诠释。订阅制带来的持续迭代特性,更让设计始终保持着新鲜的活力,如同物流行业不断优化的运输路线,在用户反馈的滋养下,逐渐勾勒出更贴合需求的美学轨迹。
 
UI/UX 设计则是货物 TMS 系统的灵魂笔触,将冰冷的物流数据转化为温暖的视觉体验。在视觉层面,专业化的色彩体系是其鲜明标识 —— 冷静的深蓝作为主色调,传递出物流行业的可靠与精准;活力橙作为辅助色,点缀在关键操作按钮与状态提示中,如同运输途中的信号灯,既打破了单调感,又强化了功能指引。信息层级的梳理堪称视觉美学的典范,通过卡片式布局将订单信息、运输状态、库存数据等模块清晰分隔,辅以精心设计的图标系统,让复杂的物流信息如货物陈列般井然有序,一眼便可捕捉核心内容。
 
交互设计的巧思更彰显着人文关怀与效率美学的平衡。极简操作路径是其核心追求,从订单录入到调度完成,每一步点击都经过反复推敲,摒弃冗余环节,如同优化后的运输路线,以最短距离抵达目标。动态反馈机制则让系统充满 “呼吸感”,货物出库时的进度条动画、运输节点更新时的微交互,甚至是异常情况出现时的温和提示,都让用户在与系统的每一次互动中,感受到被理解与被重视。这种 “润物细无声” 的体验设计,正是现代 UI/UX 美学中 “以人为本” 理念的深刻体现。
 
imgi_1270_9553b4199111429.664c7582aa8e3.jpg
 
货物 TMS 系统的 SaaS 化与 UI/UX 设计,为审美积累提供了独特的行业视角。它证明了实用与美学并非对立面,在物流这一注重效率的领域,设计同样可以绽放光彩。那些在数据可视化中诞生的清晰图表、在流程优化中凝练的简洁交互、在多场景适配中形成的弹性视觉语言,都将成为设计领域宝贵的审美养分,指引着更多行业数字化产品在功能与美学的平衡中稳步前行。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

为 AI 工程师设计:你需要了解的 UI 模式

杰睿

指导 UI 原则:

  1. 欢迎精简信息。与数据科学和金融科技等 B2B 行业类似,这些角色欢迎密集数据——而且数据设计具有强大的层次结构。所以,请缩小这些边界!
  2. 解析后的元数据最清晰。提取元数据并使其可搜索/过滤/排序非常重要。表格、侧边栏、标签系统——这些是需要改进的主要设计系统元素。
  3. 记住雅各布定律——用户在其他网站上花费的时间比你网站上的多。人工智能领域有很多强大的领导者,比如 HuggingFace 和 OpenAI。如果他们已经建立了一种模式,并且没有强有力的理由去改变,那就顺其自然。我知道,我知道,这违背了第一原则,但第一原则有其适用的时机和地点。至于如何为你的团队和路线图做出决定,就留给你自己决定吧。

Github 的设计系统是开发者设计的绝佳资源。以下是一些明确针对开发者角色定制的原则

  • 直到快了才算完全发货
  • 添加任何东西都会稀释其他一切
  • 实用性胜过纯粹性
  • 平易近人胜过简单
  • 半途而废和不采取任何措施一样糟糕
  • 鼓励流动
  • 更注重功能

因此,秉承这些原则,以下是我团队今年发布的一些关键界面。需要注意的是,我的团队只有 4 个人(2 名设计师和 2 名开发人员),我们是一家节奏飞快的初创公司。我们的设计最初都是以 MVP 的形式发布的,上线后会进行迭代,并且经常基于现有系统进行构建,从 0 到 1,并尽快获得真正的外部验证。本文中的所有设计均由我和Will Rust共同创作。设计是一项团队运动。

我将介绍的屏幕:

将显示缩放图像
聊天界面、游乐场、开发控制台、文档和食谱的 UI 线框

产品一:与法学硕士聊天(简易营销页面版本)

聊天屏幕的线框

作为终端用户,我们现在对聊天界面非常熟悉。作为开发者,使用 LLM(大型语言模型)进行聊天,与Chat GPTDuck AssistPerplexity等 AI 平台上的终端用户体验几乎完全相同。关键在于尽可能简洁明了,并提供快速简洁的答案。

主要区别在于,人工智能开发人员还会根据模型的速度、构建的简易性、兼容性和部署性来评估模型。

保持与传统搜索引擎一样简洁,但提供更细致的第二层信息,展现其底层运作,包括文档链接、展示模型速度的基准数据,以及每个令牌成本等其他数据。以下是我们在 Modular 中解决这个问题的方法。

我们使用UI 框架:https : //www.gradio.app/、Mantine、Tailwind

屏幕 1 — 简单的“开始聊天”介绍屏幕,向用户展示它的型号、运行的硬件以及处理的流量。

将显示缩放图像
聊天界面模拟

当然,所有内容都兼容明暗模式。以下是暗黑模式版本,我们将聊天功能嵌入到了开发者控制台中。

将显示缩放图像
暗黑模式下聊天的 UI 模拟

屏幕 2 — 聊天结果,显示基准数据,以及教程、代码和部署此模型的后续步骤的链接。

将显示缩放图像
将显示缩放图像
左图:扩展基准测试结果;右图:合并基准测试

截图 3 — 嵌入式版本。为了实现此版本,我们使用 RAG 专门针对我们的文档对 MAX 进行了训练。此实验目前仅面向内部用户,并有望尽快发布。

将显示缩放图像
文档网站中聊天的 UI 模拟

一些精选参考:

将显示缩放图像
将显示缩放图像
Chatgpt ;困惑
将显示缩放图像
将显示缩放图像
GroqHuggingFace 聊天

产品2:模型库

模型库网站线框的缩略图

AI 开发者需要做的最重要的事情之一就是评估 GenAI 模型。首先,你需要搜索模型库——也称为“模型花园”、“模型库”或“模型中心”。出于市场营销/SEO 的原因,这通常需要用户注销登录,主要目的是向用户展示你的平台兼容的所有模型,并鼓励他们登录后再进行更深入的模型测试。我们的模型库位于builds.modular.com。

这里最重要的功能本质上是搜索和过滤。你要确保用户能够从包含数百甚至数千个模型的庞大数据集中找到他们想要的内容。

将显示缩放图像
我们的模型库的 UI 模拟
将显示缩放图像

屏幕 2 — 模型详情页。此页面会告诉用户每个模型有多少个变体,如何在本地快速运行模型,以及如何根据需要将其部署到云端的 GPU。

将显示缩放图像
模型详细信息页面的 UI 模拟

有一些有趣的技术细节与模型参数大小、量化、硬件兼容性等有关。但最终一切都归结为格式塔聚类和创建正确的层次结构。

将显示缩放图像
各种 UI 模型拼贴在一起
设计由 Eve Weinberg(我)和Will Rust创作

我在这里最常参考的是 Huggingface(因为他们是这个领域的领导者)、Kaggle(因为他们拥有蓬勃发展的社区)、Together AI(因为他们是企业级的)和 Replicate(因为每天 8 万次点击量已经很多了):

将显示缩放图像
将显示缩放图像
Together.ai
将显示缩放图像
将显示缩放图像

与所有成功的 UI 一样,设计时务必牢记用户思维。AI 开发者在设计模型时,会考虑模型能够完成哪些任务、模型的大小、性能以及开发者是谁。

产品3:游乐场

游乐场的缩略图线框

游乐场是指专为实验、测试和学习而设计的环境,不会影响现有系统或生产环境。对于 AI 开发者来说,更具体地说,它包括试用 AI 模型、测试提示以及微调参数等功能无需大量的基础设施。

我们现在才刚刚开始运行,所以我只会谈论主要功能并展示一些参考。

主要特点:

  1. 已登录并连接账单。这只是一个小提示,但用户通常需要连接信用卡,因为您现在正式运行 AI 计算。
  2. 滑块控制模型的参数,完全改变模型。
  3. 按使用量付费定价
将显示缩放图像
将显示缩放图像
将显示缩放图像
将显示缩放图像
左图:Vercel;右图:谷歌

这与整个控制台体验完美衔接。

产品4:开发者控制台

开发控制台的缩略图线框

从布局和信息架构的角度来看,这与其他桌面控制台类似。我们使用 Tailwind、Mantine 和 ChartJS 来制作。

将显示缩放图像
开发人员控制台分析屏幕 dashobard 的 UI 模拟
将显示缩放图像
开发者控制台主屏幕的 UI 模拟
我们有点沉迷于定制编号

这里最有趣的 UI 功能是数据监控仪表盘。如果你曾经设计过企业仪表盘,那么其余部分其实都差不多——基于角色的访问控制、计费、组织层级结构(内部成员可以邀请其他成员)、通知、设置等等。

产品 5:文档

好吧,让我们开始讨论最重要的部分——文档!每个人都喜欢设计文档 ;)这就是我们的文档。这实际上是我第一次完全自主设计一个文档网站。我们使用DocusuarusAlgolia搜索,它的用户界面非常棒,开箱即用!

将显示缩放图像
文档用户界面
https://docs.modular.com/max

就信息架构而言,我们在这里讨论了几种方法,并归纳为两个总体概念:

  1. 遵循用户的待办事项 (JTBD)——他们按照什么顺序完成这些任务。对我们来说,顺序是:本地测试、服务、部署到云端、监控、扩展。
  2. 遵循产品的架构。我们拥有一个完整的平台,从底层 GPU 编程到云端的自动扩展,因此以这种方式进行分类对我们来说也很有吸引力。

无论您选择哪种方式,重申这一点的登录页面都至关重要。

我们访问量最大的页面是“快速入门”(这并不奇怪!)。我们正在持续优化此页面,以加快竞争速度并提高完成率。

将显示缩放图像
文档快速启动页面的 UI

一些参考:

将显示缩放图像
streamlet 应用程序屏幕截图
Streamlit Docs(当产品表面较小时更容易)

正如我之前提到的,Algolia 搜索功能非常强大。它的效果如下:

将显示缩放图像
Algolia UI 截图
搜索灯箱
将显示缩放图像
Algolia搜索结果页面
搜索页面允许搜索所有产品和版本

产品 6:食谱和代码

食谱页面的缩略图线框

食谱(或烹饪书)是一种简单却标准化的分步说明。它们最具交互性的形式是笔记本,每个部分都是可执行代码。最简单的形式是一系列包含可复制/粘贴代码片段的说明。

正如我提到的,我们的构建过程极其迭代,所以我们的 MVP 实际上只是渲染一个 GitHub 代码示例,并在右侧标注元数据。我发现,对于这类受众来说,越简洁明了越好。内容本身非常密集,设计不应该过于引人注目。

将显示缩放图像
菜谱页面的 UI 模型

这些文章的设计系统很大一部分在于如何渲染代码,因此,拥有一个井然有序的明暗模式系统至关重要。我们使用mantine 系统来实现这一点,并在其中设置自定义颜色。您也可以参考 CLI 配色方案的最佳实践,例如本文所示:https ://hamvocke.com/blog/lets-create-a-terminal-color-scheme/

将显示缩放图像
我们的代码块设计系统的 UI 模拟
样式代码的设计系统

别忘了体验一下命令行界面 (CLI)、ASCII 字体和清晰的进度条!至于命令行界面的用户体验,我试着教我的工程团队成员 10 条基本的 NNG 原则,其中最重要的一条就是“系统状态可见性”。

将显示缩放图像
将显示缩放图像
终端中的进度条
将显示缩放图像
将显示缩放图像
使用 ascii art 生成器工具:https://convertcase.net/ascii-art-generator/

下一步是什么?

我非常高兴能够构建更多工作流程并分享它们。我希望接下来专注于代理工作流程和云监控仪表板。

将显示缩放图像
将显示缩放图像
来自工具n8n 的两个“低代码”代理工作流图像。

奖励图片——AI 工程师角色

作为参考,以下是我为 Modular 创建的通用角色模型。目前我们的目标人物是“解决方案构建者”。

将显示缩放图像
3 个人物的图像。

敬请关注,感谢您的阅读

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

2026 年值得关注的顶级 UI/UX 趋势

杰睿

1. AI优先设计

将显示缩放图像
展示 AI 应用设计的应用程序

多年来,我们一直在听说人工智能在设计领域的应用。2024 年,它生成的布局看起来像是醉酒实习生做的。2025 年,它的表现有所改善,但仍然感觉像是作弊。

现在已经2026年了?人工智能不再只是个助手。它基本上是你的设计伙伴,不会再抱怨反馈了。Galileo、Uizard 以及 Figma 上周刚刚收购的那些工具,生成的界面不仅可用,而且效果惊人。设计师现在花更多时间进行改进和制定策略,而不是无休止地摆弄自动布局框。

趋势:

  • 诸如“让这个流程对 alpha 版本更加友好 20%”之类的设计提示现在已经成为一种流行趋势。
  • UX文案由AI撰写一半稿子,然后由人类进行润色。
  • 评判设计师的标准是他们提示得有多好,而不是他们推动像素得有多好。

设计提示:开始像对待初级设计师一样对待 AI 工具。引导它们,纠正它们。不要让它们肆意妄为,否则它们会为计算器设计一套 6 步入门指南。

2.“零 UI”的兴起

将显示缩放图像
ChatGPT 界面

从零开始设计?那就2025年吧。我们正进入一个最好的界面就是没有界面,或者至少没有传统界面的时代。

想想语音、手势、存在检测、情境感知界面。设备和体验在你开口之前就能猜测你想要什么。

恐怖?是的,有点儿。
方便?绝对方便。

现实世界的例子:

  • 智能冰箱无需询问即可重新订购牛奶。
  • 汽车通过扫描你的脸部来调整你的座椅。
  • 只需思考布局就能设计界面的 VR 头显。(好吧,这个功能还在测试阶段。)

趋势:

  • 为“隐形”交互而设计。
  • 优先考虑音频、触觉或行为的反馈循环。
  • 彻底重新思考屏幕的作用,尤其是在消费技术领域。

设计提示:从体验开始设计原型,而不是屏幕。并在现实世界中测试它。

3. 高度个性化,但有界限

将显示缩放图像
健康追踪应用程序

到了2026年,用户不再需要千篇一律的体验。他们想要一款能够了解他们的睡眠模式、喜欢的颜色以及童年创伤的应用,但又不能让人觉得毛骨悚然。

个性化日益升级,但隐私问题也日益凸显。这意味着智能默认设置、基于行为的界面以及专为用户打造的仪表盘。

趋势:

  • 根据上下文进行调整的界面:夜间使用黑暗模式,大脑疲劳时使用简化的用户界面等。
  • 高度集中的入职流程根据您的氛围量身定制:为专业人士提供简约服务,为新手提供指导。
  • 为高级用户提供“选择您自己的 UX 冒险”设置。

设计提示:让用户自主决定个性化程度。让个性化变得有趣。不要将功能锁定在数据共享墙后面。

4. 滚动已死。滚动万岁。

多年来,我们一直热爱滚动。无限滚动、水平滚动、视差滚动。

现在?滚动正在进化。2026 年,一切都围绕着滚动叙事展开。流畅的过渡,智能的捕捉,以及微妙的交互,让用户不会感觉自己一直在喝红牛。

趋势:

  • 卷轴作为叙事手段
  • 配对的动画和微交互创造了一种旅程,而不仅仅是滚动到页脚的情况。
  • 基于滚动的 UI,根据速度或意图而变化。

设计提示:在所有设备上测试滚动行为。在 MacBook Pro 上看起来流畅的滚动效果,在售价 99 美元的 Android 平板电脑上可能感觉像做梦一样。

5.语音界面成为主流

将显示缩放图像
语音界面应用程序

过去,除非你像机器人一样说话,否则 Alexa 总是会误解一切。但到了 2026 年,语音界面终于成熟了。

得益于更先进的 NLP 模型,语音正在成为导航应用的标准方式,尤其是在可穿戴设备、汽车和智能家居领域。设计师面临的关键挑战是什么?超越视觉 UI 的思考。

趋势:

  • 语音和视觉反馈接口同步工作。
  • 适用于多任务场景(例如烹饪、驾驶、育儿)的纯语音用户流程。
  • 个性丰富的语音助手让生活变得轻松。

设计提示:不要让每个应用都显得吵闹。有意识地设计安静的语音交互。并且,务必为用户提供“关闭”按钮。

6. 设计要考虑神经多样性,而不仅仅是可及性

将显示缩放图像
患有神经多样性的儿童

无障碍功能不再只是一张清单。2026 年,我们将为认知包容性而设计,服务于患有多动症、自闭症、阅读障碍以及介于两者之间的各种疾病的用户。

这不再仅仅关乎颜色对比度或屏幕阅读器,而是关乎信息的结构、通知的工作方式以及如何减轻精神负担。

趋势:

  • 可选的极简模式,可消除噪音。
  • 带有“运动灵敏度”切换的动画。
  • 尊重焦点的界面;是的,我们正在谈论您的 7 个弹出窗口。

设计提示:开始用真正的神经多样性用户测试你的设计。不要只是“添加一个模式”。要将包容性设计融入核心用户体验。

7.反设计2.0

来看看反设计 2.0 吧。它丑陋、混乱、怪异得令人难以接受。它无处不在,尤其是在那些努力避免看起来像 Webflow 模板的作品集网站上。

这种趋势的核心在于打破常规,但又不失其有意为之。想想那些刺眼的色彩、夸张的元素、重叠的文字,但不知何故,它却奏效了。

趋势:

  • 设计师将不完美视为一种风格。
  • 用户界面接近“糟糕”,但在千篇一律的界面中却脱颖而出。
  • 更注重真实性而非完美性。

设计提示:谨慎使用此趋势。如果你正在设计银行应用程序,最好不要使用 Comic Sans 字体和摇摆按钮。

8. 具有幽默感

将显示缩放图像
企鹅在雪地里看着 404 标志

2026年,就连你的信用卡应用也开始尝试搞笑了。你知道吗?它真的有效。

人性化的界面,巧妙的微文案、精妙的动画和令人惊喜的瞬间,让产品更令人难忘。用户不再仅仅追求“直观”,他们更追求乐趣

趋势:

  • 用个性化的祝酒词。“哎呀。这招不行。不过,嘿,你上一段感情也没用。”
  • 错误屏幕会让你笑,而不是哭。

喜悦与无聊的东西(比如空状态和确认消息)融合在一起。

设计提示:不要过度。并非所有内容都需要单口相声。只需营造一种让你的产品感觉不那么机械、更具亲和力的氛围即可。

9. VR之外的3D和空间设计

得益于 Apple Vision Pro、Meta Quest 以及三星的各项研发成果,空间设计已不再是小众领域。但你无需VR 头显进行设计即可拥抱 3D 空间。

2026 年,扁平化的 UI 将会变得更加立体。不再是虚假的阴影,而是真实的、可交互的深度。

趋势:

  • 响应光标移动的 3D 卡。
  • 电子商务和设计工具中的 AR 预览。
  • 界面感觉更像是物理空间而不是平面布局。

设计提示:像建筑师一样思考。关注用户如何在空间中移动,而不仅仅是屏幕。但不要让性能受到影响。流畅的 2D 流程总比混乱不堪的 3D 流程好。

10. 设计时考虑地球

将显示缩放图像
UI 中的 Eco 模式

可持续设计终于不再只是你产品宣传单上的一张幻灯片了。到了2026年,用户开始关心你的应用有多“环保”,没错,这已经是千真万确的事情了。

你的应用消耗的资源越少越好。轻量级 UI、低带宽模式和智能缓存不仅仅是技术性的功能,更是用心良苦的功能。

趋势:

  • 应用程序中的生态模式设置可降低数据/功耗。
  • 碳中和设计实践。
  • 应用程序加载速度快、操作轻便,并且不会在三次滑动中耗尽电池电量。

设计提示:别粉饰太平。务必打造高效的 UI。额外福利:用户本来就喜欢快速的应用,所以这是双赢的。

最后的想法:2026 年的设计不再注重炫酷,而更注重感觉

设计不再仅仅关乎“好看”。它关乎智能、同理心和真正实用。2026 年最好的界面不仅要美观,还要个性化、包容性、趣味性,甚至可能是隐形的。

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

桌面端界面设计 | 设计仪表盘时应避免的 6 个 UX 设计错误

杰睿

来源网址 — https://dribbble.com/shots/24659454-Customer-Journey-CRM-Dashboard

仪表板在企业应用程序中扮演着至关重要的角色,它为用户提供重要数据的结构化视图。然而,设计不佳的仪表板可能会导致混乱、效率低下和用户失望。精心设计的仪表板不应仅仅显示数据,而应提供有意义的信息,帮助用户快速做出决策。

为了确保有效的仪表板体验,请避免这六个常见的 UX 设计错误。

1.导航结构不佳

导航是任何仪表板的支柱。许多设计师犯了一个错误,将所有导航选项塞进一个菜单中,导致用户难以找到必要的功能。

最佳实践:

  • 使用顶部的全局导航来执行配置文件、设置和注销等关键操作。
  • 仪表板特定的导航放在左侧以组织视图、数据类型和工具。
  • 利用面包屑为用户提供深入浏览内容的清晰路径。

例子:

将显示缩放图像
来源网址 — https://dribbble.com/shots/24191273-Sales-Analytics-Dashboard

2. 忽视用户的心智模型

用户在与仪表板交互时,期望其结构合乎逻辑且熟悉。如果菜单类别和标签不符合他们的预期,仪表板就会变得缺乏直观性。

最佳实践:

  • 进行用户研究以了解用户期望如何查找信息。
  • 使用卡片分类等技术根据用户行为来组织菜单项。
  • 确保命名约定和菜单结构符合用户的期望。

例子:

将显示缩放图像
来源网址 — https://dribbble.com/shots/24481340-Syncrowave-CRM-Dashboard

3. 使用错误的数据可视化

选择错误的图表类型会使数据更难解读。有些可视化更适合比较,而有些则更适合趋势图或单个数据点。

最佳实践:

  • 在选择可视化之前,了解数据背后的信息。
  • 使用条形图为了进行比较,折线图了解趋势,以及饼图比例。
  • 保持可视化简单,避免不必要的复杂性,避免让用户感到困惑。

例子:

将显示缩放图像
来源网址 — https://dribbble.com/shots/24061999--Exploration-Finance-Data-Charts

4.依赖静态内容

仪表盘应该提供实时、可操作的洞察。如果内容每天都一样,用户就没有理由重新访问仪表盘。

最佳实践:

  • 关注根据实时数据定期更新的动态内容。
  • 突出显示需要用户注意的关键更新,例如警报或性能变化。
  • 使用交互式小部件,让用户深入了解特定数据。

例子:

将显示缩放图像
来源网址 — https://dribbble.com/shots/24571531-DisputeFox-Credit-Score-Dashboard

5.过多的空白和填充

许多设计师将网页设计原则应用于仪表盘,导致过多的空白,迫使用户进行不必要的滚动。对于仪表盘而言,效率才是关键。

最佳实践:

  • 保持设计紧凑,同时保持可读性。
  • 确保只需最少的滚动即可访问重要数据。
  • 使排序、搜索和过滤等全局交互易于访问。

例子:

将显示缩放图像
来源网址 — https://dribbble.com/shots/22543517-Crypto-Web-Dashboard

6. 没有针对不同的用户角色进行设计

企业仪表板服务于具有不同需求的多种用户类型。千篇一律的通用仪表板通常会导致效率低下。

最佳实践:

  • 识别不同的用户角色及其特定需求。
  • 提供基于角色的视图,以根据工作职能定制信息。
  • 进行用户测试以验证每个角色是否可以轻松访问相关数据。

例子:

将显示缩放图像
来源网址 — https://dribbble.com/shots/25007872-SportX-UI-Kit-Charts-Sources

现实世界中精心设计的仪表盘示例

以下是一些遵循良好用户体验原则的实时仪表板示例:

  1. Google Analytics——提供清晰的数据可视化和可自定义的视图。
  2. Salesforce 仪表板——为销售和营销团队提供基于角色的数据。
  3. Tableau 仪表板— 支持使用动态内容进行交互式数据探索。

精心设计的仪表板不仅仅是数据的展示,它更是一个帮助用户高效做出明智决策的工具。通过避免这些常见的用户体验错误,您可以创建一个既用户友好又功能齐全的仪表板。优先考虑导航,满足用户期望,选择合适的可视化效果,并专注于基于角色的动态内容,以确保无缝的体验。

桌面端界面设计 |审美积累|AI 电商 SaaS 后台界面

杰睿

 

推荐人群:
正在做电商后台/智能推荐界面设计的交互设计师
研究 AI 场景下 UI 信息组织逻辑的产品设计师
想提升 B 端项目视觉控制力的视觉设计师
 
在信息密集的 B 端 SaaS 产品中,如何用清晰、节制而具有未来感的设计,提升用户的效率和信任感?Stockify 的界面是一个值得研究的参考。一款聚焦 AI 推荐和智能库存管理的电商 SaaS 工具。这类产品的设计挑战在于 —— 如何让用户信任 AI 决策,并在复杂的信息中快速做出行动。它不是做“好看”的界面,而是通过界面传达控制感与专业感

imgi_262_f71c09228398707.685257a603072.jpg

imgi_790_d6c39d228398707.685257a603800.jpg

imgi_792_a468d2228398707.685257a5f3341.jpg

imgi_809_2bc8c1228398707.685257a606132.jpg

imgi_812_19cbcf228398707.685257a604ce5.jpg

 

imgi_824_f953b1228398707.685257a60171f.jpg


UI 风格关键词

冷静克制的配色:以白+浅灰为底,辅以低饱和绿色作高亮,既保留科技感,也不过度强调“智能”噱头。
数据可视化有“叙事性”:不是堆图表,而是用卡片、图表、按钮组合讲一个“运营逻辑”的故事。
干净的留白与栅格:高度模块化布局,让信息有序展开,适合处理高频交互与海量数据。
可解释的 AI 推荐:每个 AI 操作都有 hover 提示或“查看依据”,提升透明度与用户信任。

值得借鉴的细节

仪表盘设计 首屏不是炫技的数据,而是四个“关键运营指标卡片”,强调日常可操作性。颜色仅用于警示和趋势,不做装饰。
卡片式推荐模块 推荐商品按“推荐逻辑”分组,卡片下方标注 AI 原因(如:热销趋势、库存过剩),兼顾用户理解和操作动机。
侧边栏导航 折叠/展开状态下都能维持清晰的视觉锚点,图标+文字结构统一,适合中长时间使用场景。
动效克制合理 hover、切换、加载等动画几乎不抢戏,节奏稳定、响应明确,能很好融入专业环境中。

设计思路总结

Stockify 的这套 UI 并不追求酷炫视觉,它更强调的是:如何通过克制美学+可解释系统,把复杂的电商决策过程变得“有章可循”。这对 AI 相关后台设计是个非常关键的提示。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

我如何评审设计工作

杰睿

好的设计可能并非易事。对一个人来说显而易见的东西,对另一个人来说可能毫无意义。设计可能感觉很主观,但我(以及其他设计领导)在评审设计时,总会关注一些因素。

好的设计是早期良好协作的成果。早期设计通常不会面面俱到,但我们可以预见一些细节,避免在不尽如人意的设计上花费太多时间。

本文档试图定义 Dialpad 的设计中“好”的真正含义。它为我们提供了一个共同的目标,以便领导层在评审时能够充分预期他们的大部分反馈,并让他们相信设计方向是正确的。

有叙述

首先,我们必须弄清楚我们为什么要做一个项目。是我们要改进的指标吗?是我们要解决的未满足的用户需求吗?还是我们要达成的销售?在查看任何屏幕之前,我首先需要了解我们为什么要做这件事。这有助于我们在审查设计时坚持第一原则。

你知道我们怎么说讲故事很重要吗?这就是我们的意思。

只有了解了这些背景之后,我才能给你真正有用的反馈,而不仅仅是肤浅的“在这里增加间距”类型的反馈。

你并不总是需要幻灯片,1-2 段文字或 30 秒的演讲通常就足够了。我不喜欢被拖进一个没有任何注释的 Figma 文件里,也不喜欢仅仅为了了解项目是什么就被链接到一个冗长的 Jira Epic 文件或 15 页的 PRD 文件。

设计领导力涵盖了很多方面,我依靠来告诉我什么是项目以及它为什么重要。

对你分享的内容和你想要的反馈要有策略性。你不应该在设计文件中展示和解释所有内容。为此,提前整理好你的想法和 Figma 文件会很有帮助。通过屏幕共享来跟上一个在 Figma 画板上快速切换的人的喋喋不休是非常困难的。你很可能无法通过这种方式获得你想要的反馈。

你自己的想法

PM 或工程师通常会在介绍项目时就已经想好了解决方案。它会被包含在 Jira 工单中,在 PRD 中描述,或在会议上提及。这很棒。我们当然应该探索并汲取其他人的想法。但我也希望看到你们思考自己的点子。

弄清楚自己要做什么是高级设计角色的一个重要部分。

我希望看到你不仅仅是在执行别人的想法。我希望看到你至少从两三个不同的角度探索过一个想法(也就是说,不是同一个想法,只有两三个细微的变化)。

想出不同的解决问题的方法,表明你不仅仅是照做别人说的,而是真正运用自己的判断。这正是一个人在高级职位上表现出色的原因。不要害怕提问,不要害怕提出大胆的想法。你提出和改进想法的方式与实现想法的方式同样重要。

一致性与创新

Dialpad 已经推出一段时间了,这意味着我们已经构建了许多快速易用的设计模式。但是,如果还有改进空间,就不要仅仅满足于“快速易用”。有时,新的方法可以让事情变得更好。

在审查设计时,我会问自己以下有关一致性和创新性的问题:

  • 我们是在为一个老问题提出新的解决方案吗?有什么好的理由吗?
  • 我们是否有针对整个产品做类似事情的例子,同时注意到其优点和缺点?
  • 该设计是否使用了客户习惯的模式,或者是否是他们必须学习的新内容?

如果存在一个可以完成某项任务的现有模式,我希望看到它。同时,如果您认为有必要引入一个新的模式,我也希望看到它。如果您对其中一个模式有合理的偏好,我会加分。

虽然修复不一致问题很重要,但我们也应该考虑用户的使用场景。有时,即使需要付出更多努力,追求更好的体验也同样重要。有时,为了保持一致性和速度,最好还是坚持现有方案。绘制多个设计方案有助于促进这方面的讨论。

掩盖复杂性

Dialpad 是一款极其复杂的产品,包含大量技术工作流程并生成大量数据。

我们的客户不应该知道这一点。

我们的目标应该是使交流变得即时且易于理解,就像网络浏览器连接和显示网站一样。

在审查设计时,我会问自己以下有关扩展功能的问题:

  • 屏幕上呈现的信息是否一目了然?用户是否可以根据需要深入了解?
  • 是不是需要太多点击?我们是不是在要求用户做一些可以自动化的事情?
  • 新用户会如何看待这个功能?高级用户又会如何看待呢?
  • 我们需要构建一些新的东西吗?或者我们可以改变一些现有的东西吗?

设计应该易于理解,但又足够强大以处理复杂性和规模。

用户体验复制

记住,设计主要就是文字。我希望看到你的用户体验文案与用户流程、矩形和颜色保持相同的标准。

在审查设计时,我会问自己以下有关 UX 副本的问题:

  • 能少点文字吗?无论是博客文章还是单个表单字段,我写任何东西时的第一反应都是删掉文字。
  • 语言是否清晰?我们能否简化或删除技术术语、缩写和内部用语?
  • 语言是否一致?基于我已知的 Dialpad 知识,我能理解吗?我们使用动词的方式是否一致?日期和时间格式如何?甚至像大小写这样的问题也很重要。

我们有复制指南,还有一个经过 Dialpad 语音和语调训练的ChatGPT 机器人。快来使用吧!

在撰写文案时,我通常会将类似这样的内容放入 ChatGPT 中:

通常,最好的文案是这些示例的组合。我在撰写本文时就使用了这种技巧。

感觉如何?

在审查工作流程时,一个原型胜过一千个静态屏幕。我喜欢尽早看到原型,即使是在线框阶段。它能帮助我预览实际使用设计的感觉。

在审查原型时,我会问自己以下问题:

  • 一个功能有多容易被发现?如果我是第一次接触这个产品,我能理解它在哪里以及该做什么吗?
  • 感觉怎么样?点击次数多吗?步骤之间的过渡怎么样?
  • 与我使用的其他应用程序相比,它给我的感觉如何?如果我每天都要用这个设计,我会有什么感受?每周都用?

用代码制作原型并不总是可行的,所以像 Figma 这样的原型工具能提供仅次于实际产品体验的最佳设计。从新用户引导到任务完成,交互式原型能让我清晰地了解用户从始至终的旅程。

这怎么会失败呢?

大多数设计评审都侧重于推销一个想法,让观众信服这个设计为什么好。但这只是设计评审的一部分。我也想知道它的缺点。我们应该成为自己最严厉的批评者。

每个设计方向的优缺点是什么?一个设计怎么会失败?在审查一个设计时,我会寻找它为什么行不通,或者它可能被滥用或利用的原因,所以如果你也考虑过这些,会很有帮助。提前思考这些问题有助于促进团队之间的讨论。

虽然没有一份详尽的清单列出使设计“好”的因素,但提前考虑这些因素有助于将与领导层的讨论集中在深刻、实质性的话题上。

当我们接受“好”的不同定义,依靠清晰的框架,并创造一个支持批评的空间时,我们就可以提供既能满足创意目标又能满足商业目标的设计工作。

 

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

日历

链接

个人资料

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

存档