首页

我如何评审设计工作

杰睿 随笔的一些文章

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

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

本文档试图定义 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咨询、高端网站设计、平面设计

桌面端界面设计 | 如何设计浅色主题 UI

杰睿 设计管理与成长

如果您曾经尝试设计轻量级 UI,您就会理解这个悖论:它看起来很简单,但却很容易出错。

增加亮度可能会导致图像变得平淡、褪色,甚至刺眼。

你以为白色=光。但这就像说糖等于甜点一样。

凭借 6 年多为 SaaS、移动和商业平台进行设计的经验,我了解到浅色主题需要与深色主题一样多的改进和意向性,甚至更多。

它们在所有环境中都体现了清晰度、对比度、结构性和实用性。

让我来分解一下。

 

浅色主题背后的心理学
将显示缩放图像

轻量级 UI 感觉:

  • 冷静的
  • 熟悉的
  • 值得信赖

这就是为什么你会在以下地方找到它们:

  • 银行应用程序
  • 医疗保健仪表板
  • 政府网站
  • SaaS 产品

在生产力应用中,81% 的用户更喜欢将浅色主题作为默认主题。

人们需要清晰的信息,尤其是在特定场景下。不要让他们失望。

总是问自己:“这会用在哪里?” 室内、室外还是移动? 这会改变一切。

设计 Light 主题的分步工作流程

1. 从柔软的中性基底开始

将显示缩放图像

避免使用#FFFFFF。认真的。

相反,我选择中等中性色,如#F4F6F8 或#F9FAFB,它们可以提供微妙的深度并减轻眼睛的疲劳。

在模态框或照片上使用透明白色覆盖层来创建深度而不反射光线。

2.建立模块化色彩系统

将显示缩放图像

使用语义标记bg-default,例如text-muted,,border-light。这使得主题保持一致且可扩展。

3. 控制对比度(不仅仅是为了可访问性)

不要止步于 WCAG 兼容性。真正的目标是现实世界的可读性。

  • 文本对比度至少为 4.5:1
  • 为灰色添加色调以增加温暖感
  • 使用鲜艳的色彩突出显示 CTA 和错误。

我犯的错误:我曾经在仪表盘中使用了符合WCAG标准的灰色文本。虽然在我的屏幕上看起来很棒,但在户外日光下用户很难阅读。

教训:合规性≠可用性。

4. 限制使用阴影

阴影很棒,但要小心。

  • 使用 1-2 个深度级别
  • 更喜欢柔和的阴影或内嵌阴影
  • 避免使用硬轮廓

5. 反射和阳光的设计

  • 在阳光直射下进行测试(是的,在户外走走)。
  • 避免使用浅色图标,因为它们会消失。
  • 使用 400 多种字体粗细。

过亮的设置可能会使屏幕对比度降低多达 40%。请适当调整。

6. 仔细突出交互状态

在浅色主题中,悬停和焦点等状态经常被忽略。

  • 使用微妙的阴影、下划线或发光效果
  • 定义每个状态:悬停、活动、禁用

专业提示:我总是在灰度模式下测试我的元件库。如果状态保持清晰,就说明我做得对。

7.不要忘记品牌个性

一个常见的错误:品牌在轻量级 UI 中消失。

反而:

  • 使用品牌颜色来调配背景
  • 使用品牌插图或图标
  • 使用字符设置空状态的样式

即使在灯光模式下,Notion 的 UI 也保持着自己的个性。

将框架应用于 Figma 社区项目

我通常会使用随机的 Figma 模板来测试我的设计工作流程。它不仅提升了我的技能,还揭示了通用 UI 的弱点。

设计师常犯的浅色主题错误

  • 过度使用空白(可读性下降)
  • 低对比度+色彩过载=不可读。
  • 没有视觉层次。
  • 忽略组件状态。
  • 在黑色画布上设计一切会导致判断偏差。

黄金法则:首先用灰度创建光图案。添加颜色只是为了提高清晰度,而不是为了定义清晰度。

设计一个令人惊叹的灯光主题是一门艺术,也是一门科学。

  • 功能胜过花哨。
  • 对比意味着清晰度。
  • 深度应该感觉自然。
  • 始终在现实世界中进行测试!

设计从来都不是孤立完成的。你的灯光主题应该存在于阳光明媚的环境、繁忙的工作站和疲惫的双眼之中。

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

B端界面设计入门:不仅是界面,更是效率工具

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

 

在数字产品设计中,B端设计(即面向企业或专业用户的后台系统设计)常常被误解为“只要能用就行”,但事实正好相反:

B端界面不仅是操作入口,更是提升工作效率的工具。

本篇文章将帮助你快速理解 B端界面设计的核心价值、与C端设计的区别、设计难点以及实操建议,适合 UI/UX 初学者或转向B端设计的产品团队参考。


一、B端是什么?和C端有何不同?

项目 B端(Business) C端(Consumer)
用户 企业员工、内部操作人员 普通消费者、终端用户
目标 提升效率、流程准确 吸引关注、促成转化
场景 工作、管理、系统维护 生活、娱乐、社交购物
界面特点 信息密集、操作复杂 视觉丰富、体验流畅

你可以理解为:
B端系统是企业用来“做事”的工具,而C端产品是用户用来“体验”的服务。


二、B端设计的核心特点

1. 多角色、多权限、多流程

一个后台系统往往需要服务多个角色:运营、客服、财务、仓库……每个角色的权限、数据视角都不一样,这对信息架构提出更高要求。

2. 信息密度高

B端界面常常需要同时呈现大量数据,表格、筛选器、图表、状态标识等密集排列,如果布局不清晰、信息层级混乱,用户就很难找到重点。

3. 操作链条长

与C端的“点一下完成购买”不同,B端用户可能需要多次输入、校验、关联操作才能完成一次任务。例如:开票流程、商品发布、审批流程等。

4. 容错与反馈机制严格

一旦数据录入错误,可能会影响整个业务链条。因此B端对「防误操作、明确反馈、回滚机制」的设计要求更高。

 

三、B端设计容易踩的坑

❌ 为了炫酷而牺牲效率

不要盲目追求“高级感动画”或“极简留白”,B端最重要的是信息清晰、操作顺畅

❌ 滥用组件,缺乏一致性

组件不统一、命名混乱、交互模式不一致,会让用户在操作过程中反复“学习”,增加认知负担。

❌ 忽视使用场景和业务流程

不了解业务就上手画界面,很容易导致“设计和工作方式不匹配”,让用户绕路甚至误操作。


四、那该怎么做好B端界面设计?

✅ 建立模块化思维:用组件思考界面

将界面拆解成基础组件(输入框、按钮、表格、筛选器)、复合组件(搜索条、操作区、数据卡片)以及业务组件(商品卡、审批单等)。

✅ 重视信息架构(IA)和任务流

  • 理清用户的使用目标和路径(从操作起点到完成)

  • 通过布局设计和交互层级,引导用户一步步完成任务

✅ 提高信息的可读性和扫描效率

  • 统一字体层级(例如标题 14px Bold,内容 12px Regular)

  • 合理使用颜色传递状态,如:绿色=成功,红色=失败,灰色=禁用

✅ 加强容错机制与反馈设计

  • 设计“撤销、二次确认、状态回显”等操作缓冲

  • 保留日志、操作记录,避免错误无法回溯


五、设计工具推荐(针对B端)

  • Ant Design / Element Plus / Arco Design:成熟的 B端组件库

  • Figma / Sketch:快速搭建组件库和 UI 页面

  • ProcessOn / Flowchart.com:可视化流程图绘制工具

  • Axure / Framer:原型交互演示


好的B端设计,是让人“更省事”的设计

B端界面不追求视觉花哨,它的美感来自:

  • 流程的清晰

  • 信息的有序

  • 操作的高效

  • 问题的可控

它不是“酷炫的舞台”,而是一张让用户快速处理业务的“办公桌”。

 

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

平台基础的B端流程搭建|产品分析

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

公司平台的B端流程中,发现原来平台规范有这么多细节要注意,包括上架、维运、客服、下架、汇款、结案等,每个部分都是平台运营关系,但也牵涉到客户维护、消费者关系。

这个有点像新平台的心路历程,赛道管理一个平台,初学者会需要建议哪些文件规范。

一、上线前

先用大家比较常见的案例:「活动通」、「好学校」,因为我们的模式跟他们比较接近。

想像一个活动主办单位第一次在上面举办的活动中,会先遇到什么问题:

  1. 如何开通主办单位权限?
  2. 一份活动门票的手续费如何计算?
  3. 如何开始建立活动?

以下的问题看起来很简单,但确实都是新手可能会遇到的问题,而平台规范有一个大任务:

「让 B 端简单的问题可以快速找到答案」

迫切减少时间在回覆基本问题上,因为必须把更多的时间花在大客户身上,而身为台湾最大的活动平台,这类常见问题当然都准备好了:

将显示缩放图像

活动通甚至有部落格,已经放出了各种式的活动教学文,不再是制式的QA。

将显示缩放图像

拉回到我现在参与的新平台,看到上述的都要从0开始建立,必须是针对先导新手的教学文件,或者是较恶劣的经验分享文章,都需要大量的文字写作能力。

因此可以想像的到,当听到别人说要建立一个平台,除了考量到双边的客户来源,接着就是所有规范的建立,想像一个陌生人第一次接触陌生平台,势必要准备足够详细的教学文件、常见问题集,绝对不仅仅是后台程序码写完就。

二、上线中

再以活动为例,假设我们现在活动已经上线,主办单位通常会遇到哪些问题呢?

  1. 编辑页面的位置有bug,图片上传失败,文字存储失败?
  2. 想要调整价格或数量,但不知道怎么调整?
  3. 要怎么出现在活动通首页?
  4. 如何查看现在的报名信息?

接下来的问题乍一看很简单,也确实新手都可能会遇到的问题,但其实平台在这个期间会收到C端更多的消息,相当于:

  1. 要怎么退票?
  2. 可以换票吗?

因此金字塔的任务变成了:

「让C端消费者去询问该场次的B端客服」

由于平台的客服量非常巨大,我们很难承担,虽然都会建立常见的问题集,但遇到很简单、处理繁琐的问题,也只能走最简单的方式,因此以目前新平台的处理方式,我们面对消费者的订单文件问题,都会直接传B端的联络信箱给,继后续连续来回沟通的时间,而接下来就能用多的时间建立更完整的QA。

三、结束后

一个活动结束,通常是一个问题:

  1. 多久才能收到款项?

而身为平台方,大会的任务我认为是:

「让B端客户满意本次的服务,并再次愿意来平台上架」

有些人可能觉得这跟前面的说法矛盾,如果减少与B端客户交流,那要怎么让他们感受到「服务良好」呢?

我在构想这件事时,会用「乘客旅程地图用户旅程」来发想,意思是客户跑完整流程遇到所有卡关,平台方如何用「系统」的方式来解决,但同时又让对方感到「客制」?

以目前的方式我们实现的是「真理的文字」,有些平台的常见问题集可能是制作冷冰冰,很文字化的答案,我们近期正在修改每一个答案,都变成好像我当面说话的口吻,也是一样的概念。

虽然有公版信,但我们也在修改公版信的「温度」,让收到的人不会觉得他是收到机器自动回复的

 

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

【兰亭妙微图标设计】为什么视觉大小和实际大小不相同?如何做到视觉统一?

杰睿 图标设计文章及欣赏


26082bb9-3b33-4e00-b4c1-4c60727d6087.png
在 UI 设计和图标开发中,我们常常遇到一个让人困惑的问题:
明明两个图标尺寸一样,为什么看起来一个大一个小?
这就是「视觉大小」和「实际大小」不一致所引发的经典设计挑战。
 这篇文章将带你了解其中的原理,并分享一些实操方法,帮你设计出视觉协调、统一专业的图标。

---
一、为什么视觉大小 ≠ 实际大小?
在设计中,「实际大小」是指图标在画布上的像素尺寸,而「视觉大小」是指人眼感知到的图形体积或重量感。这两者之所以不一致,主要有以下几个原因:
1. 图形形状对视觉感知的影响
不同形状对人眼的“占据感”不同:
- 圆形、椭圆形:边界柔和,看起来比实际尺寸小;
- 尖角图形:具有延伸感,看起来更“张扬”;
- 封闭 vs. 开放图形:封闭图形更“紧凑”,视觉重心靠内;开放图形更“轻”,容易被忽视。
举例说明:一个 24x24 的正方形图标和一个 24x24 的圆形图标放在一起,圆形常常显得更小。
2. 视觉重心偏移
图标的视觉重心不是几何中心:
- 有些图标上方留白较多,若严格居中,整体会显得“偏下”;
- 有些图标线条向一侧偏移,也会影响视觉稳定性。
3. 颜色、线条粗细的错觉
- 颜色明亮的图标通常看起来更大;
- 线条较细的图标会显得“轻”或“空”;
- 相同尺寸下,深色图标比浅色图标更具“存在感”。

---
二、如何实现图标的视觉统一?
4. 关注“视觉等值”而非“尺寸一致”
优秀的图标设计不会追求数值上完全一致,而是让图标“看起来”一样大。这就需要设计师具备一定的视觉判断力和对比经验。
5. 使用统一的对齐原则
- 每个图标放在相同的画布尺寸(如 24×24、48×48)中;
- 保证主图形部分在视觉上居中,而非仅仅坐标居中;
- 调整视觉重心,让图标看起来平衡、不倾斜。
6. 使用光学微调
所谓「光学对齐」,就是打破机械对齐规则,让视觉更舒服:
暂时无法在飞书文档外展示此内容
7. 放在真实场景中预览
设计图标时,建议不要孤立操作,而是:
- 放入实际使用场景(如按钮、导航栏);
- 对比多个图标在一组中是否协调;
- 测试在不同设备分辨率下的适配情况。

---
三、图标设计实操建议
以下是一些日常图标设计中实用的技巧和判断标准:
暂时无法在飞书文档外展示此内容

视觉大小与实际大小的偏差,是每一位图标设计师都会经历的学习过程。
 真正优秀的设计不是追求数值一致,而是注重 用户感受的和谐统一。
图标设计的细节感,往往藏在你“感觉不舒服但又说不出哪里不对”的那一刻。
理解视觉感知,训练视觉判断力,才是做出专业、协调图标系统的关键。

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

日历

链接

个人资料

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

存档