首页

为 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 设计错误

杰睿 系统UI设计文章及欣赏

来源网址 — 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 后台界面

杰睿 系统UI设计文章及欣赏

 

推荐人群:
正在做电商后台/智能推荐界面设计的交互设计师
研究 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

未来的设计形态

杰睿 行业趋势

有些想法已经酝酿了好几周。其他想法则是在谈话中,或者在观看某人发起一个零散的无代码实验时浮现出来的(我们最近经常这样做)。

他们或许会老得漂亮,也或许不会。这不是重点。

重点在于:变化正在发生。我们越了解它,就越能更好地塑造未来。

1. 团队规模更小,重点更明确

我们正在进入一个团队规模更小、更专注的时代——这适用于所有学科,而不仅仅是设计。

正如 Marty Cagan 在最近为硅谷产品集团撰写的文章中指出的那样,产品团队正在变得更加精简,但效率也更高。这并不是说要用更少的资源做更多的事情,而是要消除噪音、开销和不必要的交接。

工具化正在飞速发展。十年前,一天内构建一个原型可能需要跳过关键步骤或加班加点。但现在,有了 Figma、一些无代码工具(下文将详细介绍 )以及 ChatGPT/Claude,一位设计师可以在早上探索五个方向,并在午餐前测试其中三个。

人工智能并非取代我们,而是让我们有机会进行更周全的设计。装备精良的产品设计师——或者产品经理——现在可以更快地从问题到原型,再到经过验证的解决方案,这并不是因为他们更加努力,而是因为环境最终让他们能够更智能地工作。装备精良的产品设计师(或产品经理)现在可以更快地从问题转向原型,再转向经过验证的解决方案,这并不是因为他们更加努力地工作,而是因为环境最终允许他们更聪明地工作。

在设计领域(以及其他领域),这意味着更少的人员,但更明确的职责。更少的专业化,更多的责任。

说实话,我迫不及待地想看到这个。我一直都很喜欢小团队、快团队。他们行动清晰,能快速建立信任,而且在协调上也更省力。

说实话,如果你是一位领导者,认为员工人数翻番就能自动改善现状,那么当经济形势发生变化或公司未能实现目标时,你可能会陷入困境。我们都见过这样的情况:快速招聘,然后是恐慌性裁员,之后又是同样的关于专注和问责的讨论。

单人团队不再只是初创企业的神话。它正在成为一种可行的结构——尤其是在小型公司和早期团队中。随着人工智能和无代码工具的不断发展,甚至可能在大型公司中也是如此。

是的——这意味着“设计师”的定义也在发生变化。

2. 全栈设计师的再次崛起全栈设计师的再次崛起

高度专业化的时代正在消逝。这并不意味着专家已经过时——远非如此。只是现代产品设计师的工具包正在不断扩展,人们期望他们能够更好地利用这些工具包。

研究、文案写作、视觉设计、系统思维,甚至组件库的实际工作——一切都融合在一起。人们越来越期望设计师能够独立掌控更多产品周期。这并不是为了取代其他角色,而是为了减少摩擦并保持发展势头。

这种转变反映在职位描述中。产品设计师(UX/UI 设计师等)现在需要定期撰写微文案、进行可用性测试、参与设计系统、构建原型、分析数据、招募用户并与客户沟通。预计撰写微文案、运行可用性测试、参与设计系统、构建原型、处理数据、招募用户以及与客户交流— 定期。

说实话,为什么不呢?有了合适的工具,很多任务都会变得比以往更容易,而且可以做出更好、更快的决策。

从许多方面来看,我们都回到了数字设计的早期阶段,当时同一个人会进行构思、设计和构建。

但这一次,我们采用了更好的工具、更智能的系统以及(希望)更强的判断力。

3. 设计系统民主化

随着设计工具的发展和无代码采用的增加,设计系统变得更加开放、可用和重要。

我们正在看到从严格控制的库向模块化、即插即用的生态系统的转变,这种转变不仅使设计师能够,而且使产品经理、营销人员甚至客户成功角色能够构建实验,而无需等待开发资源。

我希望我们的产品经理能够使用我们的设计系统快速构建原型——只需几分钟,而不是几天——这样他们就能快速测试各种想法。正因如此,我才致力于几乎完全开放我们的灵魂设计系统。

这令人兴奋,但也提高了标准。开放式设计系统需要清晰的文档、强大的组件和智能的治理。它们迫使我们像产品构建者一样思考,而不仅仅是设计师。

与此同时,我们的系统越容易上手,我们就越有可能出现千篇一律的结果。当每个人都使用相同的组件和模式时,千篇一律就会迅速蔓延。这并不是什么新鲜事,它一直存在。想想有多少网站与 Linear 的设计相似,又有多少新应用模仿 Notion 的导航。正因如此,创造力、视觉识别和精湛工艺将变得更加重要,而不是更不重要。需要 (或想要)脱颖而出的公司需要投资于独特的视觉/UI 设计、引人入胜的故事叙述,以及人工智能或模板无法复制的精妙之处。

4. 工具正在改变一切(如果你允许的话)

设计师从未拥有过如此强大的力量。我们能够以一年前难以想象的速度进行测试、构建和学习。

在我的团队中,我们正在探索一波全新的工具:可爱V0 复制, 和Bolt.new

我们仍在决定将哪一个(安全性、法律等)完全集成到我们的设计堆栈中,其中 Loveable 和 V0 目前处于领先地位。

我们中的一些人也一直在研究Cursor。毫无疑问,它功能强大,但对于日常设计工作流程来说,它仍然感觉有点“更高层次” (2025 年春季——你可以打赌,几个月后,这种情况将不再存在)。

附注:随着工具越来越开放,团队界限越来越模糊,安全问题也变得越来越重要——即使对设计师而言也是如此。在讨论过风险之后,我请求我们的AI/创新团队帮助我们搭建自己的MCP服务器。他们现在正在着手开发——即使在早期阶段,我们也非常谨慎。

Vibe 编码很有趣……直到它会让你的系统暴露一些不该暴露的东西。

这些工具不仅能节省时间,还能改变文化和思维方式

他们正疯狂地奔跑。我完全相信,如果一年后我再回顾这件事,一定会发现三个功能强大的新工具。看看生成图像模型的飞跃——不到12个月,它就从八指的噩梦变成了拥有清晰副本的视觉效果。

为了跟上步伐,我们开始举办内部培训,让工程师指导设计师如何在本地环境中运行项目、如何运用变体进行思考以及理解系统逻辑。这并不是要把设计师变成开发者(好吧……也许有一点)。而是要减少恐惧,增加背景知识,并在流程早期做出更好的决策。

要点是什么?最好的工具不仅能帮助你更快地行动,还能帮助你的整个团队使用同一种语言,共同创造更好的产品。

提示我一直建议设计师尝试构建 Figma 插件(你可以使用 ChatGPT 指导)、个人网站,或者——更好的是——一个可以解决你实际问题的小工具。我们的一位设计师构建了一个徒步旅行计划器。另一位设计师为他的业余项目创建了一个烹饪伴侣。还有一位设计师创建了一个在线图像压缩网站。你将学到比预期更多的东西。

5. 设计工程师的回归

随着工具的发展和界限的模糊,一个新旧角色正在悄然回归:设计工程师

这并不是什么新鲜事——用户体验工程师在谷歌和其他科技巨头中已经存在了十多年。但得益于人工智能、无代码开发和更强大的工具,这个曾经只存在于科技巨头独角兽中的职位,如今正出现在 SaaS 团队、初创公司和设计系统团队中。

我们团队一直在探索这条道路。我设定了一个个人目标:到今年年底,我们产品设计团队的某个人将为产品发布一个小更新——无需开发人员参与。即使是像更新工具提示中的文本这样简单的事情。在我们的 UI 团队中,挑战甚至更大:在没有开发人员参与的情况下更新组件。

为什么?因为前端现在应该更快了。可以更快。在一个设计师可以与代码对话(或者至少可以温柔地引导代码)的世界里,等待两周的文本修改感觉很不对劲。

这并不意味着团队中的每个人都需要成为一名程序员。但这确实意味着我们需要更加适应我们参与塑造的系统——并且不要再把 Figma 和生产环境之间的空间视为黑匣子。

设计工程师(或任何行业赋予的头衔)可能并不适合所有团队。但我相信,他们会自然而然地成为更多团队的一员。

它会顺利吗?一点也不。开发人员会注意到那些混乱的部分——语法、结构、风险。这很正常。原型开发也是如此,任何初次踏入陌生领域的人都会遇到同样的情况。

但如果这种方法建立在好奇心和合作之上——而不是控制——它就会开始奏效。早期的摩擦是值得的。

接下来是更快的迭代、更好的协调和共同的尊重。

6.专家将比以往任何时候都更重要

这里有一个悖论:随着角色的融合和工具变得越来越容易使用,对真正的专业知识的需求实际上正在增长。

人工智能是一个强大的放大器,但它也可能掩盖经验的不足。我见过一些初级设计师严重依赖人工智能生成的结果,结果却创作出缺乏深度、连贯性或意图的作品。工程领域也存在同样的问题:人工智能可以自动完成代码,但却无法调试业务逻辑。至少目前还不行。

在这种新环境下,普通人和杰出人才之间的差距将会扩大。这令人不安,尤其是对于那些职业生涯早期的人来说。

但它也是一个行动号召——呼吁前辈们进行指导,呼吁团队投资软技能和系统思维,呼吁每个人超越仅仅推动像素或生成提示。

成为专家。如果你还不是专家,没关系——但不要停滞不前。不断拓展,不断磨练。这就是与众不同之处。

7. 品味、创造力和商业思维是差异化因素

那么,在这个人工智能增强工作流程和像素级完美模板的时代,什么才能真正让设计师脱颖而出呢?嗯,那些成就伟大设计的要素始终如一:品味。创造力。商业头脑。沟通能力

随着工具的改进,我们已经看到了千篇一律的风险。环顾四周:几乎每个新应用都像 Notion,每个新网站都沿用 Linear 的简洁极简主义。这些模式并非糟糕——而是非常棒。但当所有人都遵循相同的公式时,产品之间的界限就会变得模糊。体验开始变得千篇一律。

这时,视觉品味和创造力就比以往任何时候都更加重要。

随着人工智能和无代码工具的不断发展,执行力不再是瓶颈——决策才是。我们的责任是像战略家一样思考,并运用具有影响力的语言。

最终,只有那些能够清晰表达意图、发挥创造力并具备战略思维的设计师才能脱颖而出。他们不仅能够解答如何构建并使其外观精美,还能解释其背后的原因以及为谁而 做。在我上一篇为本博客撰写的文章中,我谈到了设计师领导者需要身兼数职才能产生影响力。在生成式人工智能时代,这一点比以往任何时候都更加重要,只有能够将用户需求与业务目标相结合、清晰地提出创意并引导团队取得有意义成果的设计师才能获得发展空间。

其他人都将被困在追求快速工程技巧的道路上。

8. 你现在可以做什么

那么,我们该如何应对这一切?该如何为这个快速逼近的未来做好准备?

我们在团队中亲眼目睹了这一点。

几个月前,我们的一位内容设计师联系了UI团队,寻求指导。她主动开始提升自己的技术技能,这并非她正式的成长计划——这对她来说很有意义。之后,她创建了她的第一个组件——一个颜色选择器——现在,我们真心相信她可以成为一名优秀的产品设计师。

我们在用户体验研究领域也看到了类似的转变。如今,我们有三位高技能的研究员——说实话,我认为未来我们不需要六位或十二位研究员。这并不是因为研究不那么重要,而是因为产品设计师越来越擅长掌控产品发现的各个环节——验证想法、进行访谈,并更早地做出更明智的决策。

这为我们经验丰富的研究人员提供了发展空间,使他们能够成为战略合作伙伴,而不仅仅是可用性测试人员。他们作为深思熟虑、高杠杆的合作伙伴,为我们的产品设计师提供支持,我们的一位研究人员也已经开始探索UI设计。

就像内容设计一样,研究仍然是一门至关重要的技艺,而且通常情况下,它仍将是一个专业化的角色。但这样的时刻提醒我,保持领先地位不仅仅是学习新工具或追逐潮流,更在于拓展视野。那些蓬勃发展的人,将是那些充满好奇心、积极进取、无所畏惧超越工作职责的人——不是因为他们被要求这样做,而是因为他们想要按照自己的方式迎接未来。

那么,为了应对这一新现实,你能做些什么呢?以下是我给设计师(不仅仅是设计师)的建议:

  • 投资软技能。同理心、讲故事的能力、引导能力、领导力——这些永远不会过时。事实上,它们比以往任何时候都更重要。
  • 亲手实践无代码。构建一些东西。打破它。了解它能做什么和不能做什么。
  • 对人工智能保持好奇心。把它当作陪练伙伴,而不是拐杖。
  • 像产品人一样思考。设计不再仅仅关乎形式,而更关乎结果——这本该一直如此。人工智能和无代码工具正在加速这种转变,让设计师有更多空间专注于战略和业务。
  • 分享你的知识。指导、写作、教学——你将在这个过程中学到更多。
  • 鼓励团队中的其他人进行尝试。这包括产品经理、营销人员,甚至客户成功团队。使用你的设计系统和无代码工具构建的简单原型,有时比冗长的 PRD 能带来更好的反馈。

未来不在于做得更多,而在于做得更好——更清晰、更有目的、更快速。

给未来的我的一封信

如果您明年读到这篇文章,我希望其中一些想法能够得到认可。

也许有些事情被证明是错误的——也许更大的事情发生了,再次改变了一切。没关系。

我希望不变的是:我们不断适应。我们不断学习。我们以好奇心而非恐惧引领。

因为适应力是我们的超能力。而设计——在最佳状态下——始终在于对未来的畅想。

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

To B端 To C端在产品设计和规划过程中有哪些区别?

杰睿 B端ui设计文章及欣赏

C端B端有点泛,具体问题还是在具体的地方分析。不过总得来说也能归纳出一些区别。

首先产品重要的定义:目标用户、结果预期以及所需功能。B端一般是专业人士,他们的预期通常是多样性、精准且要求高的,而且功能入口系数高;C端是普通用户,期望往往非常单一,功能入口要求简单。

其次通过这些定义,一般从表面上看是这样的:

1、B端功能繁重,C端肌肤功能单一化

从用户任务就可以看出任务不同。有一个图形比喻,浮在水面的冰山上,其中是C端,水面下是B端,所以B端产品一般听觉感受功能都异常多,而且流程繁琐。

2、B端讲求业务精准性、逻辑性,C端讲求波形可用结果

从第一点中就很容易知道在后台设计中涉及到数据流通管理以及异常多的功能点,尤其是有的B端纯粹是生产过程的管理,所以讲究非常强的精准性、逻辑性,很多时候都是直接把逻辑进行在交互层面,比如操作有明确说明,错误有出处,而在C产品端的时候说多了是没有用的,用户不明白没耐心,可能告诉用户的就是一个最简单的结果。

3、B端业务关联度大,C端结构比较稀疏

在B端中,业务牵扯到的地方异常,通常需要方方面面都要考虑,并且能够从关联的很多模块中抽象解构出数据,实现出完整的一套流程;而在C端,很多功能看起来非常独立,感觉甚至对其他地方影响也较小。

最后,“表面所得”就是告诉你,B端一看就是大坑,C端往往是陷入的坑。B端一定要求你一开始就要对业务整体流程熟悉,侧重点对流程进行管理;C端不一定要求你深入业务细节,更多的是对用户体验以及结果的响应。

ps.如果说哪端比较难,B端在入门难,C端在入门后难。B端入门门槛高,一开始就要求有专业积累;C端可以混进门,毕竟用户体验这件事谁都可以谈,经济学和心理学都可以谈,但有几个人学得不错。

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

人性化界面设计:模式

杰睿 大数据可视化设计文章及欣赏

你会怎么评价下面两款收音机收音机的设计?

索尼收音机

图1是索尼的一款收音机。它的面板右下方4*8依次排布的黑色按键分别对应了32个提前设置好的收音机。按任意一个按键,可以收到某一个收音机。

某货车收音机面板

图2是一个车载收音机。左边首先把收音机划分为三组。屏幕右下方的两排圆形按钮中,有一个是用来选择三组收音机的其中之一。剩下的1*6个按键来选定该组中的某一个收音机(如果需要切换AM-FM,操作还比较复杂)

以前索尼的无线电设计看起来很复杂,但它实际上更好用。因为每一个按键对应着同一个收音机,当用户熟悉了健身并使用习惯后,他们甚至可以不用揉捏操作面板,而直接通过手指触摸数字按下自己想要的按键。这样的操作即使是在黑夜中也能进行。前置遥控器的设计虽然减少了按键并节省了空间,却牺牲了易用性。因为这是该设计中引入了模式(modes):当用户使用同一个操作时,而系统由于不同的状态给出了不同的回应。

这里引入了《人性化界面》这本书推崇的一个主要原则:好的界面不应该存在模式。

如果无论系统状态如何,相同的用户输入总是会产生相同的结果,则系统是非模式的。

重要的概念

为了更好的理解模式和界面设计的关系,以下是一些需要了解的概念:

注意力点(locus of Attention):是指时刻我们意识的集中的地方。人类在任何时刻都有一个注意力点。你对这个点以外的区域是盲目的。比如当你集中注意力在阅读可能的文字时,就注意不到你的曼谷脊柱屏幕的顶端时间指针发生了变化。

夜间操作(手势):指用户对界面的一个连续的操作,可能是一个鼠标或双击。

模式(mode) : 针对一个操作,如果一个系统根据其当前的状态有不同的反应,就代表这个系统存在不同的模式,而每个一个模式下界面的反应是一致的

——比如作者非常反对的大写锁定键(Caps Lock):当这个按键被按下时,电脑处于一个大写输出模式中;当这个按键被再次按下时,电脑回到另一个模式;

— — 再比如所有电脑的电源键就存在模式。根据电脑当前的开关状态,同样按下电源会导致电脑开机或关机;

— — 还有 Photoshop 中的鼠标操作,在不同的绘画状态中,点击鼠标的结果是完全不同的。

界面模式的严格定义

为了从用户的角度讨论模式的利弊,作者进一步严格定义了界面模式:

针对用户操作: 1. 根据当前系统状态的不同而给出不同的反应,2. 并且此时的系统状态是在用户的注意点之外(即用户无法感知到的系统状态)此时就认为界面存在模式

  • 在这个定义下再看一个例子:键盘的删除键(退格/删除)。每当你按下删除键,被删掉的内容都是不一样的。因为但是人们往往注意力集中在即将被删掉的文字上,因此不构成模式。

模式是用户误操作和影响业余性的主要原因之一:因为用户没有意识当前的系统状态,因此无法了解到哪一个模式下,也不会知道自己的操作会带来什么样的结果。很多时候他们只能不断试错来完成任务,这也阻碍了使用习惯的养成。

对设计的启示

为了避免上述问题,界面设计应该完全采用Quasimode。Quasimode的是用户必须通过连续的物理操作让系统维持在某种特定状态下,并在此状态下避免引入某种模式。典型的例子就是电脑的Shift键,按下Shift的同时敲击键盘会进入大写字母输入模式。这样的优势在于连续的动作动作让用户时刻记住自己在某个模式中,从而不会误操作。

值得强调的是,遵循模式设计原则的产品往往也会影响盲人所用(可访问性设计)。因为模式的定义就考虑了人们的注意力集中点,而我们每个人对于我们注意力之外的事物,都是“看不见”的。

从非常真实的意义上来说,我们对于我们关注点之外的世界都是盲目的。

《人性化界面》的杰夫·拉斯金(Jef Raskin)是Mac的初代设计师和思考者。他相信机器的交互方式应该是人性化的:即交互的过程能够最大化作者的考虑并遏制我们人类的能力和缺陷。

本书的第二章为读者铺垫了很多重要的理论基础,而后面的章节会开始剖析和挑战我们平时习习的UI模式,比如文件夹,桌面,导航。

因为本书读完相见恨晚深受启发,决定开坑一系列读后感!

 

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

【兰亭妙微】用户体验设计优化 | 什么是“嵌入式成长机制”?

杰睿 设计管理与成长

 

——从 Hook 模型到行为惯性设计的交互进阶路径

一、起点:为什么“用户投入”才是粘性最高的设计?

在许多交互体验中,设计者常常追求“即时反馈”:点击即响应、浏览即推荐、登录即得礼。但用户一旦体验完毕,离开就再无回头。
原因在于:用户没有留下任何可积累的“成长性投入”
根据《Hooked》模型,产品形成用户习惯的四个阶段中,Investment(投入)是最被低估却最决定复访意愿的一环
“当用户在产品中投入时间、精力、数据或情绪,便不再是旁观者,而是利益相关方。”
但是,仅有“投入”还不够,这些投入是否“嵌入”用户未来体验,是否带来持续增长感,是设计的关键挑战。
这就引出一个更高级的设计模型:嵌入式成长机制

二、定义:“嵌入式成长机制”到底是什么?

嵌入式成长机制(Embedded Growth Mechanism) 是指:
产品通过系统性结构,让用户的每一次投入行为产生未来可感知的回报,并对下一次使用产生预期依赖,最终形成习惯与留存。
它具备四个核心特征:
特征 说明 常见误解
行为路径可复用 用户走过的路径会影响下一次决策 不是“历史记录”,而是路径强化
成果可积累 用户的操作结果以结构化形式沉淀 不是“完成任务”,而是“建立资产”
成长性可感知 反馈不仅是即时,而是具有阶段性跃迁 不是“获得奖励”,而是“具备成长感”
结构性嵌入 用户资产影响后续流程、推荐、权限 不是“数据留存”,而是“体验参与权”

三、原理:从 Hook 模型到“行为惯性引擎”

  1. Hook 模型复盘
在《Hooked》中,用户习惯的形成来自于:
  1. Trigger(触发)
  2. Action(行动)
  3. Variable Reward(变动奖励)
  4. Investment(投入)
但模型本身不解释 “投入之后发生了什么?” 投入成为“行为惯性”的方式是:嵌入式成长结构 + 可视化反馈机制 + 结构性复利回路
我们可以用如下公式理解这一点:
markdown
复制编辑
Investment × Embedding × Future Payoff = Habitual Use
也就是说,仅仅让用户“写了一篇笔记”没意义,除非:
  • 这篇笔记成为未来推荐算法的一部分
  • 它带来新用户点赞、收藏、互动(外部性收益)
  • 它在视觉层面沉淀为“知识资产”并被系统引用
  • 它解锁了下一阶段内容 / 权限 / 工具
这就是“嵌入式成长机制”与一般投入反馈机制的根本区别:
用户的行为介入并塑造了未来体验结构

四、结构:嵌入式成长机制的 3 层设计框架

我们可以从交互设计的角度,将其拆解为三层结构:
第一层:结构性投入点设计(Structure of Investment)
识别产品中的可“沉淀性操作”:
类型 示例 表现方式
内容结构投入 Notion 笔记、飞书文档 用户参与“搭建”产品结构
关系结构投入 社交圈建立、关注体系 用户构建“社会资产”
行为偏好结构 推荐算法训练、偏好标签 用户塑造算法“映射自己”
权限成长结构 功能权限随投入解锁 用户获得“控制感”与进阶通道
设计建议
  • 所有可投入点,应具备:数据结构、可查询性、可回显。
  • 不要把用户操作设计成“消耗品”,而是“积累点”。

第二层:回报路径嵌入(Embedded Feedback Loop)

关键在于:用户操作后的结果能否影响未来体验
投入行为 影响维度 回报机制
编辑页面 页面结构保存 下次自动载入、自定义默认
点赞内容 训练算法模型 推荐更符合偏好的内容
填写兴趣 用户画像建模 页面布局动态调整
学习任务完成 解锁新模块 路径“只属于你”而不是大众用户
设计建议
  • 让回报不止出现在当前页面,而是改变系统反应方式
  • 让用户感受到自己“塑造”了这个系统。

第三层:增长可视化机制(Growth Visualization)

即便系统有“嵌入性回报”,用户如不能感知,就不会形成行为惯性
设计任务是将成长数据显性化为“变化图景”
可视形式 举例 情绪作用
进度轨迹图 番茄时间记录曲线 感知掌控感
资产地图 笔记结构脑图、知识沉淀库 感知自我能力增长
使用成长阶梯 等级标识、勋章系统 感知“在升级”
反馈路径可追溯 用户行为→系统推荐链路图 感知“产品听懂我了”
设计建议
  • 成长可视化 ≠ 简单图表,而是体现“行动-结构-反馈”的闭环感;
  • 成长展示要避免“游戏化套路感”,要强调功能性连接与用户“建设感”。

五、误区与反思:嵌入式成长 ≠ 成瘾设计

不少人将“用户投入”等同于“上瘾机制”,这是理解上的误区。
嵌入式成长机制不鼓励用户沉迷于操作本身,而鼓励他们主动塑造体验结构。区别在于:
维度 成瘾机制 嵌入式成长机制
反馈节奏 高频、即时 阶段性、结构性
用户参与感 被动反馈接受 主动结构塑造
成果属性 一次性、多巴胺驱动 累计性、功能驱动
设计伦理 容易引发依赖 倾向于能力增强
最理想的状态:
用户使用产品越久,越能建立自己的体系,产生“离不开”而非“停不下”的依赖。

交互设计的进阶,不在于“好看”,而在于“结构”

“嵌入式成长机制”作为一种设计方法,其终极目标是:
把用户的参与设计进产品本身,让体验随行为进化,让系统随着使用更懂用户。
它连接了用户行为 → 体验结构 → 长期留存之间的底层路径,是行为惯性型产品的核心逻辑。
 
 
更多项目/合作请私信,支持定制设计服务
我们是兰亭妙微
商务合作请联系
邮箱:weihua@lanlanwork.com
电话:400-6086026 010-6333494
了解更多设计案例 → www.lanlanwork.com
兰亭妙微( 蓝蓝设计)是一家专注而深入的UI设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、网页设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计

日历

链接

个人资料

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

存档