首页

交互设计逻辑 | 关于线框和 UI 设计流程(经验向)

杰睿

每个设计师都有自己独特的设计呈现方式。根据项目的不同,设计师会使用不同的方式展示他们的设计。Clickdummy 原型是展示屏幕流程最常用的方式,方便简洁。通常情况下,设计师会以“编号+标题”的格式为所有屏幕命名,并通过导出结果中 JPG 文件的顺序来表达屏幕之间关系的逻辑。

我很高兴能使用像 Invision App 这样的工具来理清我的设计。然而,ClickDummy 原型在构建大型复杂的软件项目和功能性应用程序时并不理想。有时,我们会将屏幕放在 Sketch 文件中的不同页面中,以使结构更清晰,但却失去了整体的视觉效果。当你向项目经理、客户和开发人员展示你的设计时,你会发现这个过程效率低下。

按 Enter 键或单击即可查看完整尺寸的图像
英维申

我们需要一个高效、流畅的流程来优化演示和交接。我的经验是线框图和UI的流程。这是一种非常新颖的方式,但效果很好。

我们知道 Behance 和 Dribbble 上有很多精美的线框和 UI 流程。其实很多设计师也在做同样的事情。我在上海MINGLabs工作的时候,我的法国设计师同事 Lucas 教给我一个方法,它不仅易于理解,而且美观高效,可以作为交接的 UI 呈现流程。后来,这个方法在我的远程自由职业中得到了运用,并不断改进。这对降低沟通成本非常有帮助。

Eric Miller的移动可视化流程图

为什么我更喜欢线框和 UI 设计流程?

  1. 帮助设计师巩固他们的想法
  2. 显示屏幕之间关系的逻辑
  3. 使与客户的沟通更加轻松,呈现的内容更加清晰可见
  4. 使与开发者的沟通更加便捷,降低沟通成本。
  5. 有利于与其他设计师合作
按 Enter 键或单击即可查看完整尺寸的图像

我如何制作流程?

当然,我的应用和网站都是用 Sketch 设计的。我建议从第一个线框图开始设计流程。之后再设计主页和两三个辅助页面。

步骤1

您可以创建一个新的画板。画板大小要足够大,能够覆盖所有屏幕。这样做的目的是为了更容易添加线条和注释,也方便在最后时刻导出完整流程图的概览。不过,现在没必要添加屏幕数量。等您心中有了概览之后,再添加也不迟。

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

步骤2

流程包括 5 个组件:

  1. 屏幕
  2. 画面名称,格式为“ 数字+字母+标题”或者“ 数字+标题”
  3. 动作和位置(红点)
  4. 线
  5. 笔记
按 Enter 键或单击即可查看完整尺寸的图像

步骤3

流程的结构是从左到右组织的。页面位置越靠右,层级就越低。我的习惯是把首页之类的第一页放在左侧。设计流程如下:

按 Enter 键或单击即可查看完整尺寸的图像
树形结构
按 Enter 键或单击即可查看完整尺寸的图像
沃达丰 WLANoMeter 用户界面流程

问题

线框和 UI 流程改善了沟通。但它并不完美,实际上有时甚至有点令人毛骨悚然。

  1. 每次增加屏幕,数字就会乱。我的命名方法可以避免这种混乱,但不是最佳方法。
  2. 一旦移动了屏幕,连接的线就必须重新绘制。
  3. 导出的概览 pdf 无法显示每个屏幕的名称。

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

朴素的交互设计原则

杰睿

基本原则
清晰、简洁、一致、可操作暗示以及隐喻(可供性)、反馈、容错、高效、易记忆易学习。

1. 清晰
内容、结构、界面效果都是清晰可见的,加强情感的修饰,注意只使用文字与排版来表达页面,以字体、字号、颜色、版式,精妙动画效果来增加界面的精致性与设计不够。尽量避免平滑、阴影。
2. 简洁
为了用户聚焦,限制明确页面唯一的或者最重要的目标性,不让用户让焦钛的选择感。
3.一致性
界面元素的标准控件化:问题使用系统交互元素,以及界面和用户之间对话风格的统一:标准文本风格、口吻、语气、统一话术。
4.可操作暗示隐以及喻意
让用户看到这个就是可以交互的,按钮要像按钮,与文本内容以及其他界面元素有所区别。另外可增加操作引导,在操作时给予引导,而不是独有的一股脑引发引导。隐喻本可以单独做一个原则,但这里与可操作暗示大约类似,隐喻指的是虚拟界面可以做到让用户经验类似的喻,确实是现实物理世界的隐喻还是虚拟数字世界。让用户无成本迁移感。5
. 反馈
任何操作都要给予可感知的操作反馈,当点击或者其他时,被操作交互的要素要给予短暂的强调,另外通过动画给予进度提示,
6.容错与安全感
降低用户犯错成本,做到高危操作可恢复。应用应该通过使用熟悉的、可预见的交互元素,确认重要的操作、可回溯的取消手段等方式,来让用户觉得自己处于被保护的状态中。此外还有防错原则,采用本质的安全设计方式(固有)安全),比如表单未完成按钮不可用...
7.高效
两个方面,用户高效使用的性以及高效开发的性,要关注网页技术新功能,快速迭代那些优秀且通用改装的新功能。
8.易学习易记忆
这是最后一条,在做到前面的原则之后,这条应该是取缔的,但是由于技术性平台的特殊性,涉及专业性技术术语等等的东西,所以对于一些非技术人员或者不太懂行的技术人员,需要提供提醒文档嵌入,方便用户学习。

 

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

史蒂夫·乔布斯最重要的用户体验规则(大多数设计师都忽略了)

杰睿

让我们先来看一个惊人的数据:根据尼尔森诺曼集团的一项研究,用户在不到10秒的时间内就会决定是否停留在网页上。没错,就是10秒。你花了几个小时(甚至几天)来完善这个设计?用户只是在眨眼间就做出了快速判断。然而,大多数设计师却忽略了一个改变游戏规则的原则——史蒂夫·乔布斯正是基于这个原则创立了苹果。

这可不是些空洞的激励话语。这条规则看似简单,却被大多数人低估了。

规则?简单比看上去的要难。

乔布斯说得最好:“简单比复杂更难。你必须努力理清思路,才能让事情变得简单。但最终这一切都是值得的,因为一旦你做到了,你就能移山倒海。”

你知道吗?他说得对。想想看——有多少次你为了“增加一个功能会更容易”而在用户界面里塞满额外的按钮?或者为了给利益相关者留下深刻印象而展示一个过于详细的线框图?(我经历过,也做过。)但这种做法呢?这与苹果产品令人上瘾的本质背道而驰。

那么,让我们来分析一下。

为什么大多数设计师忽略了这条规则

问题在于:我们都在忙于各种优先级的权衡。用户想要同时拥有所有功能(“为什么这个应用不能同时煮咖啡?”)。产品经理总是问:“我们能不能在这里再加五个标签?” 而截止日期则会让你怀疑时间是否真的存在。

事实上,简单并不浮夸。它不会在设计评审中赢得一片喝彩。但是——这是一个很大的“但是”——它什么能取得成果。因为简洁不仅仅关乎视觉效果。它在于减少摩擦,让选择变得轻松。它在于在用户意识到问题存在之前就解决问题。

想要证据?看看初代 iPod。一个滚轮,一个按钮。革命性的。

一个令人谦卑的个人故事

好吧,坦白说。几年前,我为一款 SaaS 应用设计了这个仪表盘。当时我兴奋不已。我把所有你能想到的指标都加进去了。页面浏览量、参与度、转化漏斗、用户热图——应有尽有。这简直就是一场数据自助餐(至少我是这样认为的)。但当我们上线的时候,你猜发生了什么?

一片空白。用户不知所措。没人知道该点击哪里。

确实少更多的

如何拥抱简单(而不失去理智)

这就是关键所在。如何才能把这个原则应用到自己的工作中,又不至于费尽心思呢?(说实话,简化比想象中难得多。)

  1. 严格确定优先顺序:问问自己,“一件事“这难道不是用户绝对需要的东西吗?”如果它不是任务关键型的,那么它很可能就是混乱的。
  2. 使用“奶奶测试”:你那不懂技术的奶奶能不用说明书就能用上你的设计吗?如果不行,那就重新开始吧。
  3. 多说“不”:这一点很难,但乔布斯本人就是这方面的高手。他曾经放弃苹果的一系列产品,专注于Mac、iPod和iPhone。说“不”并非失败,而是专注。
  4. 疯狂测试简洁并非仅仅源于直觉。让真实用户测试你的设计。观察他们遇到的问题。修复它,然后重复。

简单带来的情感回报

关键在于:简单不仅仅是好的设计,更是情感化的设计。

当用户觉得你的产品“很好用”时,他们会心怀感激。他们会记住这种体验,会推荐给朋友,还会再次购买。乔布斯比任何人都更了解这一点。苹果的成功并非建立在“最多的功能”上,而是建立在最佳体验上。而最佳体验总是简洁易用。

你的挑战

所以,我向你提出一个挑战:下次你设计东西的时候,停下来。问问自己:“乔布斯会怎么做?”然后……精简。改进。打磨。因为简单不仅仅是一个原则,而是一种超能力。

现在,去创造一些精彩的东西吧!嘿,如果你也有自己的简约故事(或者对乔布斯规则的精彩解读),欢迎在评论区留言。让我们继续讨论。

我不再想利用工作以外的时间去提高 UI UX 设计水平?

杰睿

这不仅仅是关于人工智能的崛起或就业市场不断变化的需求——它关乎更深层次的东西。它关乎他们意识到自己曾经相信的职业道路不再令人满意,以及担心自己可能被困在一份与自己真正愿望不符的工作中。

问题始于不断学习新技能的压力。

在大多数行业中,员工可以依靠在学校或初始培训中获得的知识来支撑自己的职业生涯。但在平面设计领域,行业格局瞬息万变,想要保持与时俱进,往往需要投入大量的个人时间。

无论是学习最新的用户体验/用户界面 (UX/UI) 趋势、掌握新软件,还是适应新兴技术,持续学习的负担都可能令人感到压力重重。对许多人来说,一想到要把宝贵的空闲时间花在另一项技能上,就觉得难以承受。

许多设计师感到自己的工作越来越商品化,这进一步加剧了他们不断提升技能的压力。

随着自动化设计工具的兴起,人们越来越担心他们花费多年掌握的技能可能会过时。

但这不仅仅与人工智能有关。

真正的问题在于该行业的结构方式。

人们通常期望设计师成为万事通,兼顾多重角色和职责,同时保持领先地位。而对于那些对这份工作不再充满热情的人来说,继续走这条路可能会让人感到窒息。

Reddit 讨论中最有见地的观察之一是,我们的身份不应该围绕我们的工作而转。

对于许多艺术家来说,工作已经成为他们生活中如此重要的一部分,以至于很难想象他们在办公室之外是什么样子。但这种一心一意的专注可能会导致倦怠和不满

正如一位评论者指出的那样,设计只是一种赚钱的方式——它不必定义你的全部存在。将身份认同与工作分离后,设计师可以开始探索其他能带来成就感的兴趣和激情。

讨论中出现的另一个关键主题是找到符合您的价值观和生活方式的职业道路的重要性。

按 Enter 键或单击即可查看完整尺寸的图像
设计十字路口。图片来源:Venice.ai

对一些人来说,这可能意味着转行到用户体验/产品设计等相关领域,这些领域仍然高度重视创造力和解决问题等软技能。对另一些人来说,这可能意味着彻底离开设计界,去一个完全不同的行业寻求职业发展。

重要的是花时间思考对你来说真正重要的事情,并探索更可持续、更充实的选择。

当然,做出重大的职业改变从来都不是一件容易的事。

这需要勇气和决心,尤其是在你三四十岁,肩负着依赖收入的责任的时候。但如果继续从事一份不再让你兴奋的工作,眼睁睁地看着自己的创造力和动力逐渐消磨殆尽,长远来看,代价可能更大。

正如一位评论者所说的那样,关键在于关注真正能给你带来快乐和满足感的事物,即使这意味着冒险并踏入未知领域。

那么,设计师可以做些什么来摆脱这种倦怠循环呢?

第一步是承认有这种感觉是正常的。

承认自己对设计的热情已不如从前,这很正常。想要从事业和生活中获得更多,这也很正常。允许自己感受这些情绪,这样你就能迈出创造更充实未来的第一步。

下一步是开始探索新的兴趣和激情。

由于没有时间或精力,您一直推迟哪些爱好或活动?

现在正是重拾这些想法的绝佳机会,看看它们能带来什么。无论是学习一项新技能,发展一项爱好,还是创办一份副业,目标都是找到一些能重新点燃你的热情,并在工作之外赋予你目标感的东西。

最后,重要的是要记住,在这段旅程中你并不孤单。

还有无数其他设计师有着同样的感受——精疲力竭、迷茫,正在寻找新的前进道路。

通过与理解你正在经历的人建立联系,你可以获得支持、灵感和前进的新思路。无论是通过在线社区、本地聚会,还是与同事的一对一对话,与他人建立联系都是获得新视角和找到改变勇气的有效途径。

最终,是继续沿着原来的职业道路走下去还是开辟一条新的职业道路,是一个非常个人化的决定。

没有正确或错误的答案,只有适合您感觉的答案。

最重要的是花时间反思你的价值观、你的激情和你的长期目标,并做出符合你真正想要的生活的选择。

 

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

如何将神经科学应用于用户体验设计中的负责任的游戏化

杰睿

游戏化是应用行为设计。就是这样。

它的有效性取决于了解大脑、行为和人类动机如何运作。

通过借鉴认知心理学、神经科学和行为科学,我们可以探索使游戏化成为如此强大且敏感的工具的原理。

毕竟,只要游戏化尊重道德、可访问性和真正的价值传递等关键原则,它就可以战略性地融入用户旅程中。道德、可及性和真正的价值传递等关键原则。

当我们考虑八角分析框架(Chou,2015)等成熟模型以及关于奖励和参与的神经科学研究——强调多巴胺催产素大脑奖励系统的作用(Knutson,2001;Lieberman,2013)——我们开始提出更细致入微的问题:我们何时以及为何应该将体验游戏化?

在一个经常追求参与度指标而没有明确策略的行业中,游戏化脱颖而出——但只有当它被用作同理心、行为理解和健康积极强化的工具时。

游戏化不仅仅是一种策略,更是设计师和用户之间的一种语言。和任何语言一样,它需要清晰、有意图且有责任感。

按 Enter 键或单击即可查看完整尺寸的图像
卡通风格的插图,以粉红色的大脑角色为特色,有侧臂和大眼睛,表现出各种情绪:睡觉、生气、从后面、快乐、流口水和困惑。
插图由@upklyak , Freepik 提供

什么是游戏化?

游戏化是在非游戏环境中使用类似游戏的元素(例如积分、级别、奖励和挑战)。

其中包括生产力应用程序、电子学习平台、医疗保健系统、数字银行和工作场所环境等。

Deterding(2011)的经典定义是“游戏化”,即“在非游戏情境中使用游戏设计元素”。虽然这个定义很有道理,但在用户体验领域,它显得有些肤浅。

这是因为用户体验专业人士必须明白,游戏化不仅仅是将游戏机制简单地复制粘贴到数字界面中。它是一个精心设计的激励系统,能够激活那些让游戏引人入胜、富有挑战性和回报性的认知和情感回路。

因此,在设计游戏化体验时,您基本上是在处理心理变量,例如预期奖励、渐进式进步、自主性、归属感和掌握度(Ryan & Deci,2000)。

从这个意义上讲,游戏化应该被视为基于人类行为的激励框架,而不是华而不实的“参与功能”。

但这需要一种更系统的体验设计方法——从入职到持续使用,包括反馈循环、参与触发器和积极强化机制。

在这种背景下,设计师必须提出并清晰地回答这样的问题:是什么激发了用户的动机?这种体验如何创造期待、进步和意义?

游戏化在用户体验中的真正作用

“游戏化”一词常常会让人联想到视觉效果和典型的游戏机制:积分、徽章、排行榜、进度条、“任务完成”弹窗。这些确实是游戏化工具包的一部分。

但将游戏化简化为这些“数字贴纸”是一种肤浅的理解——尤其是从用户体验的角度来看(Werbach & Hunter,2012)。

对于体验设计师来说,游戏化首先是一种基于科学的行为和动机方法

它试图通过与人类大脑工作方式相一致的机制来鼓励期望的行为:追求奖励、能力感、克服挑战并预期成就。

如果有意识地应用游戏化,它可以将数字互动转变为有意义的旅程,增加参与度,促进学习,并支持长期保留(Deterding,2011)。

从这个角度来看,游戏化并非一种装饰——它成为了用户体验策略的核心部分。它并非为了美化用户界面,而是为了塑造交互的结构。

触发心理捷径、减少摩擦、提供实时反馈、强化内在动机——这些原则都植根于自我决定理论(Deci & Ryan,1985)和行为设计(Fogg,2009)。

情感、目的和参与

著名研究员和游戏设计师Jane McGonigal对游戏化提出了更广阔的视角。

对她来说,游戏化的本质在于“用游戏思维解决现实世界的问题”(McGonigal,2011)。

这意味着将游戏背后的思维方式(而不仅仅是视觉效果或互动性)应用到需要用户参与、努力、决策和学习的现实生活中的用户体验流程中。

视频、演讲:“现实破碎:游戏为何让我们变得更好”,Interactive 2011,SXSW

麦格尼格尔认为,游戏之所以成功,不仅仅是因为它们有趣,还因为它们能提供丰富的情感体验,具有明确的目标、持续的反馈、适合玩家技能的挑战以及强烈的目的感。

在游戏设计文献中,成功游戏的四个核心特质如下:

  • 明确的目标→用户知道他们需要做什么
  • 限制行动的规则→存在使任务具有挑战性的限制
  • 反馈系统→进展可见、可理解且即时
  • 自愿参与→用户选择参与,激发内在动力

这些品质与UX 最佳实践直接相关。

例如,强大的新手引导流程就像游戏教程一样:它通过互动进行教学,不会惩罚错误,并逐渐培养玩家的掌控感。持续反馈的微任务流程就像一个任务分解成几个步骤,每个步骤都有小的奖励。

通过嵌入这些结构,用户体验设计师可以构建更具激励性、更少摩擦、更情感化的体验

这就是为什么 McGonigal 坚持认为,成功的游戏化并不是将游戏添加到现实世界中,而是让现实世界感觉像游戏一样引人入胜

按 Enter 键或单击即可查看完整尺寸的图像
大脑示意图,箭头指向催产素、多巴胺和中脑边缘奖励系统的形成。
由人工智能 ChatGPT 生成的图像

游戏化背后的神经科学

游戏化的真正力量并不在于视觉效果或表面的“乐趣”。
它的有效性源于它与大脑神经生物学的互动方式——特别是与动机、决策、奖励、情感和学习相关的系统。

多巴胺:期待、动力和奖励

这一过程中的一个关键因素是多巴胺,一种通常与愉悦感相关的神经递质。

但与普遍的看法相反,多巴胺与即时满足无关,而是与对奖励的期待有关。

根据 Knutson (2001) 的研究,即使只是预期一个积极的结果也足以触发伏隔核的活动,伏隔核是大脑奖励系统的中心部分。

这就解释了为什么完成一个步骤、升级或保持连续性可以增强继续下去的动力——无论是完成《最后生还者》中的任务还是完成注册以获得奖励。

从用户体验 (UX) 角度来看,产品使用过程中频繁且可见的奖励会以类似游戏的方式刺激多巴胺系统。

当这些奖励达到良好的平衡时,它们会形成自我维持的参与循环,在游戏设计中称为强迫循环(Sweetser & Wyeth,2005)。

这使得用户保持互动不是出于义务,而是因为大脑预期下一次小胜利。

催产素:结合、同理心和合作

游戏化中的另一种重要化学物质是催产素,俗称“信任激素”。

它会在积极的社会环境中释放——当我们合作、获得认可或感受到归属感时。

在游戏化体验中,团队排名、小组挑战、应用内聊天和协作任务等社交机制可以提高催产素水平,鼓励亲社会行为。

Zak (2005) 的研究表明,即使在虚拟环境中,具有积极反馈和社会联系的数字互动也能触发催产素的释放

对于用户体验设计师来说,这意味着游戏化可以增强个人积极性以及用户与社区或品牌的联系

中脑边缘奖励系统:人类动机的核心

所有这些影响都是中脑边缘奖励系统的一部分,该系统是一个大脑回路,包括腹侧被盖区 (VTA)伏隔核前额叶皮质等区域。

该系统由大脑认为有价值的刺激物触发,例如食物、社交互动或实现目标。精心设计的游戏中也会激活同样的系统

这就是为什么渐进式进步、即时反馈、平衡难度和成就感等策略如此有效的原因——它们激发了人类大脑的核心动机引擎。

当这些游戏设计原则以合乎道德的方式融入数字产品中时,它们可以强化自愿行为维持长期参与

奖励而不上瘾

有了这样的神经科学基础,事情就变得清晰起来:精心设计的游戏化并不需要强制互动。它构建了一个系统,让使用本身就是一种奖励——由多巴胺、催产素以及我们内心对进步和意义的渴望驱动。

然而,必须记住的是,使游戏化引人入胜的系统也可能被滥用——导致上瘾、焦虑或强迫行为

这就是为什么用户体验设计师必须负责任地运用这些知识,为用户创造健康、激励和真正有价值的体验。

参考

用户体验设计 | 为什么信息流比静态页面更容易让人上瘾?

杰睿

如果你刷过小红书、抖音、微博、知乎,应该有过这种体验:
“再刷一条吧。” → “怎么已经半小时过去了?”

这种“明知道在浪费时间却停不下来”的感受,其实并不偶然。它背后,是一整套围绕信息流精心设计的机制,让人“甘愿上瘾”。

相比之下,传统的静态页面就没这么“勾人”了。它们信息结构清晰、入口有限、内容边界明确,更多服务于“我来找答案”这种目标导向行为。

那为什么信息流这么容易让人沉迷?我们可以从用户心理、界面结构、内容分发这三方面来看。


一、信息流是“连续刺激”,静态页是“单点完成”

静态页面更像“报纸版面”:有主题、有结构、有起点终点。
而信息流就像“无限弹出的零食盒”:每滑一下都有新口味、新包装、新惊喜。

这种“不断刷新、不确定下一个会不会更好”的机制,正好击中了心理学中的多巴胺奖赏系统

信息流的核心逻辑是:随机奖励 + 无限滚动 + 个性推荐
静态页面的逻辑则是:用户主动查找 + 明确边界 + 固定内容

前者诱导我们“持续探索”,后者完成任务后就离开。


二、信息流打破层级,引导的是“情绪决策”

静态页面遵循信息架构设计,层级清晰,点进去、再返回,用户的注意力是线性的、有节奏的。
而信息流设计天然就是“去层级化”的:一个滑动手势,跳转话题、切换内容、触达感官。你点开一个视频,不需要知道它在哪一层目录,也不用记得你刚刚看了什么。

这种“无上下文的内容跳跃”非常适合被动浏览、碎片时间、情绪消费。而这三点,正是人最容易做出非理性决策的时候。

简单说,信息流不是让你“学到什么”,而是让你“感觉不错”。


三、信息流的推荐是“适配人”,静态页是“适配结构”

传统页面是根据内容结构来安排信息(比如“产品介绍页”“服务说明页”),用户是被动适应设计者的逻辑。

但信息流是根据用户的行为画像反向排列内容——你看得久,它就多推类似的;你喜欢猫,它就不推狗。甚至你一点点停留时间、手指滑动的节奏,都会被算法记录并调整内容排序。

这就导致一个结果:

  • 静态页面看的是“内容本身”,你为获取信息而来;

  • 信息流看的是“你自己”,内容是为你量身定做的糖衣炮弹。

当内容是为你而生,你很容易觉得“再多看一点也无妨”,从而形成依赖。


四、界面机制也在放纵你的“惯性”

信息流通常具备几个让人“停不下来”的机制:

  • 无限滚动:没有“到底了”的提示,默认你会一直滑;

  • 弱层级结构:减少跳出成本,随便看,随便回;

  • 视觉密度高:每屏信息丰富,有图有字有动效,抓人眼球;

  • 弱目的感强化:你不是来做任务的,只是“顺手看看”,但一刷就是几十条。

相比之下,静态页面往往:

  • 页面到顶/到底就没了;

  • 有明确任务目标(比如填写表单、阅读说明);

  • 需要点开再返回,跳转成本更高;

  • 没有实时更新和推荐,内容变化慢。

这些都让静态页面更“克制”,而信息流则更“纵欲”。


五、信息流正在“吞掉”我们对结构的耐心

最值得警惕的是:信息流的沉迷机制,正在改变我们对“信息结构”的感知能力。

许多年轻用户已经不太习惯通过目录找信息,不愿花时间搞清页面层级逻辑,更依赖系统“推”什么就看什么。
这对内容创作者和产品设计者提出了更高要求:如何在碎片化中保证核心内容被理解?如何让产品既上瘾又不失控?


写在最后

信息流不是“邪恶”的,它确实提高了信息分发效率,放大了内容价值,甚至成就了很多创作者的职业转型。但我们不能忽视它对用户注意力、信息消费方式,以及产品设计逻辑的深刻改变。

信息流容易让人上瘾,因为它把内容变成了即时情绪反馈的工具,而不再是单纯的知识承载体。

如果你是一位设计师、产品人或者内容创作者,不妨问问自己:

我们想让用户沉浸,还是只是沉迷


如果你对信息流设计、用户注意力设计感兴趣,欢迎在评论区一起交流观点。也可以点个赞,我会继续更新这类内容。

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

新功能引导页设计思路

涛涛

在设计领域,不断总结与交流是提升自我的重要途径。在此,我将自己总结的一套新功能引导页设计思路分享出来,希望能与大家共同探讨,也期待大家提出问题和建议。另外,文章中使用到的 2.5D 轴测图辅助线,我会在文末附件中添加,大家可以下载打印用来画草图,也可以在软件上使用。

15 个最佳现代 AI 解决方案,助力 UI/UX 设计开发

杰睿

毫无疑问,人工智能极大地促进了许多领域的发展。UI/UX 设计也未能幸免,如今我们每天都能看到基于人工智能的全新工具涌现。这些工具旨在改变设计师的工作方式,使他们能够优化工作流程并自动化重复性任务。这样,他们就能更快、更准确地提供结果。由于人工智能接管了日常工作,设计师可以专注于最重要的事情——创造力和创新。优化工作流程并自动化重复性任务。这样,它们可以提供更快、更准确的结果。由于人工智能接管了日常任务,设计师可以专注于最重要的事情——创造力和创新。

人工智能对设计的影响

AI 驱动的工具正日益成为 UI/UX 设计师不可或缺的助手。它们在从原型设计、内容创作到最终设计完善的每个流程阶段提供支持。通过将 AI 集成到工作流程中,设计师可以更高效地创造更具活力和个性化的体验,同时节省时间和精力,从而加快产品发布速度并提升竞争力。

UI/UX设计师的最佳AI工具

下面我们将介绍一些可以帮助您简化工作的顶级工具。

1. Flowmapp:一款利用人工智能设计用户体验架构的工具

Flowmapp就像一个指南针,指引您穿越复杂的用户体验迷宫,帮助设计师创建清晰便捷的用户路径并生成站点地图。借助它,您可以通过创建流程图来设计网站和应用程序的架构,就像在精准的地图上导航一样。Flowmapp 的强大之处在于它与分析技术的集成,就像鹰眼一样,能够洞察用户迷失的方向,并帮助他们实时优化路径。

Airbnb 和 Nike 等品牌都使用 Flomwapp 来设计信息架构。该工具能够灵活地与分析工具集成,帮助团队优化路径,提升参与度并增加现场停留时间。

2. Uizard:人工智能驱动的界面原型设计

Uizard就像一根原型设计魔杖,能将您的草图转化为成品交互模型。它基于神经网络构建,能够快速将您的想法转化为可运行的原型,就像您跳过了草稿上的那些神奇步骤一样。Uizard 以其速度和简洁性超越竞争对手,将设计和代码集成在一个软件包中,使其成为快速界面开发的必备工具。

将显示缩放图像
用户界面

3. ChatGPT:基于 GPT-4 的 UX 文本生成

ChatGPT随时准备提供完美的描述或用户体验文本。它基于 GPT-4 模型,能够轻松适应您的需求,就像一位经验丰富的编辑读懂您的心思一样。其优势在于,它不仅节省时间,还能激发团队灵感。

将显示缩放图像
GPT 3.5 和 4.0 聊天功能的区别

4. Attention Insight:人工智能驱动的 UI 和 UX 分析

Attention Insight就像一张 X 光片,可以扫描并预测用户会在哪些地方停留。它利用人工智能技术,帮助您调整焦点,就像调整相机镜头以获得最清晰的照片一样。Attention Insight 的优势在于它能够高效精准地完成这项工作,而无需依赖耗时耗力且成本高昂的 A/B 测试。

将显示缩放图像
Attention Insight 界面

5. Khroma:一款人工智能配色方案工具

Khroma是一款个性化配色工具,可让您根据自己的喜好找到完美的配色方案。它利用神经网络学习您的偏好,并推荐能够为您的界面增添特色的配色方案。Khroma 凭借其个性化设计击败了竞争对手——它推荐的配色方案是根据您的喜好量身定制的。

将显示缩放图像
赫罗马整合

6. 让我们增强:优化图像以提高用户体验

Let's Enhance就像一个高清滤镜,能将像素化的图像转化为清晰锐利的视觉效果。在 AI 的支持下,Let's Enhance 可自动提升分辨率、纹理和色彩细节,让您的图片完美契合 UI 界面。其主要优势在于即时提升画质,这对于需要快速优化高分辨率的大型项目来说非常实用。

将显示缩放图像
让我们增强界面

7. Adobe Sensei:Adobe 产品中的人工智能

Adobe Sensei是您所有常用 Adobe 产品的强大引擎。它利用机器学习加速流程,无论是处理图像还是分析用户数据,都能将您的设计提升到更高的自动化水平。与其他解决方案不同,Adobe Sensei 内置于整个 Adobe Creative 套件中,让您的工作更快速、更便捷。

将显示缩放图像
Adobe Sensei 界面

8. DALL-E 2:基于文本的图像生成器

DALL-E 2是一位艺术家,他能根据口头描述,绘制出你所能想象的一切。它基于 GPT-3 模型,创作出细节丰富、独具匠心的图像,仿佛你的大脑直接连接到画布。在同类产品中,DALL-E 2 以其能够将传统设计工具难以表达的最抽象概念可视化的能力而脱颖而出。

将显示缩放图像
DALL-E 2接口

9. Vance AI:用于图像处理和增强的人工智能

Vance AI就像一位智能助手,可以即时增强您的图像,使其拥有专业水准。它可以提高分辨率、去除背景并校正纹理,就像经过专业摄影工作室的后期处理一样。Vance AI 使图像处理变得快速便捷,尤其是在处理大量数据时。

将显示缩放图像
使用 Vance AI 应用程序之前和之后的图像对比

10. Galileo AI:由人工智能驱动的动画工具

Galileo AI是您的专属动画师,能够瞬间赋予任何 UI 元素生命力。它运用机器学习技术,无需手动调整每一帧即可创建流畅的动画。Galileo AI 凭借速度和灵活性超越竞争对手,让设计师能够专注于创意,而非墨守成规。

将显示缩放图像
伽利略人工智能接口

11. Flow AI:构建聊天机器人和语音界面

Flow AI就像一位交互工程师,能够构建对话界面和聊天机器人,让它们像人类专家一样回答复杂的问题。Flow AI 可以帮助您创建周到的对话场景,而无需编写代码。与其他同类产品不同,Flow AI 提供简单的设置和跨平台支持,使其成为对话系统的多功能解决方案。

将显示缩放图像
Flow AI 的实际工作原理

12. 深度梦境生成器:人工智能驱动的超现实图像

这款工具将人工智能技术应用于照片和视频,创造出独特的图像,将其转化为超现实的杰作。与其他生成器不同,Deep Dream 可以让你创造出与众不同的抽象效果,让你瞬间从普通的视觉效果中脱颖而出。

将显示缩放图像
使用 Deep Dream Generator 创建的图像

13. Stark:用户体验的可访问性检查器

Stark会根据包容性标准检查你的设计。AI 会分析界面,检查对比度、字体大小和颜色组合,以确保你的产品适合所有用户。

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

14. 设计AI:标志和视觉概念生成

Design AI可在几分钟内创建徽标和视觉概念。它可以生成品牌标识并提供现成的解决方案,为您节省时间和资源。Design AI 在速度和经济性方面超越同行,能够在最短时间内提供高质量的成果。

将显示缩放图像
使用 Design AI 工具创建的徽标和标识

15. Loomly:人工智能社交媒体管理

Loomly可以帮助你构思创意、组织和规划内容,并推荐最佳发布时机。它会分析你的受众参与度,并为你推荐一些必定会“火爆”的帖子。

将显示缩放图像
Loomly 应用程序

利用人工智能改进设计

AI 工具彻底改变了 UI/UX 设计,尤其是在提供数据驱动的洞察方面。这减少了设计师在重复性任务上花费的时间,并赋予他们更多创造力。有了 AI 处理幕后机制,设计师现在可以专注于创建创新的、以用户为中心的界面。

虽然人工智能极大地提升了设计流程的效率,但务必牢记,它无法取代设计师独特的人类直觉和创造力。最佳设计成果源于人类洞察力与人工智能工具的协同作用,其中设计师在引导设计流程和利用人工智能提供支持方面发挥着不可或缺的作用。

结论

人工智能颠覆了游戏规则,让设计师能够轻松创建更优质、更以用户为中心的界面。如果您能够充分利用这些工具,它们将助您改进设计流程、激发创新,并提供更具吸引力和活力的数字体验。如此一来,您就可以将人工智能的技术突破与人类的技能和直觉相结合,突破可能性的界限,打造出完美的产品,开创 UI/UX 设计的未来。

 

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

界面设计:Web3场景下,大屏设计中的用户体验要点解析

杰睿

73e3b0a4-2ff5-4175-beb1-2d4510ce87bc.png

d65a7188-3597-4010-9533-c1bb1e02b796.png

在传统互联网产品中,数据看板和仪表盘是常见的管理工具。而随着 Web3 技术的发展,链上行为、资产状态、合约执行等信息变得越来越复杂,如何可视化地理解这些动态数据,成为产品设计中的新挑战。
在这一背景下,数据大屏逐渐成为 Web3 项目方、平台运营方、审计安全机构等角色的重要信息枢纽。但在实际设计过程中,许多大屏项目容易陷入“炫酷外观”而忽略了核心交互体验。
本文将从交互设计的角度,探讨 Web3 场景下的大屏设计应关注哪些用户体验要点,避免“看上去很厉害,却没人真正在用”的设计误区。

一、Web3应用为何需要大屏?

Web3 应用天然拥有强数据属性:去中心化交易、流动性池、区块链浏览器、智能合约调用……背后都对应着高频、高维度、链上链下混合的数据系统。
大屏在 Web3 中的主要使用场景包括:
链上运营监控:例如 DEX 交易量、TVL 变化、用户活跃趋势
安全审计看板:异常交易预警、地址聚集行为识别
链级数据展示:Gas 消耗趋势、区块出块速度、矿工分布等
多链资产管理:跨链桥资产流通图、跨链交易流向展示
这些场景中的共通点是:数据变化快、维度多、使用者需要“实时看清”并“快速判断”。这也是大屏发挥价值的关键。

二、Web3大屏设计的5个核心用户体验要点

  1. 可读性优先于炫酷感
Web3 的数据普遍较为抽象,如交易哈希、钱包地址、Gas 费用、TVL等,对非专业用户甚至部分运营者而言并不直观。
在这种背景下,大屏首要设计目标是让用户“看得懂”,而不是制造视觉噱头。
设计建议包括:
使用足够大的字号和清晰的字体(避免细线体在大屏上模糊)
色彩控制在 2~3 个主色 + 层级灰色,避免过多亮色干扰焦点
图表需具备必要的坐标轴、单位标注、异常标记,不应纯粹装饰化
简洁比花哨更重要,清晰比动效更关键。

  1. 实时感知与状态提示
Web3 的链上数据具有强实时性,许多核心指标在数分钟内可能出现剧烈波动。因此,大屏必须能体现“当前状态”以及“更新节奏”。
建议包括:
明确标出“数据更新时间”,让用户知道当前信息的时效性
对关键变化支持动效强调,如箭头上扬/下降、数值闪动提醒等
异常状态颜色需与正常状态明确区分(避免“全绿”或“全蓝”)
此外,设计中应尽量避免让用户怀疑数据是否卡住了,这会极大削弱其对大屏的信任度。

  1. 异常可感知,支持预警反应
大屏不只是展示,更应该帮助用户“识别风险”或“发现机会”。
在 Web3 应用中,这种“感知”尤为重要,比如:
某地址在短时间内发生大量交易 → 潜在恶意行为
某资产流动性短时间骤降 → 潜在清算风险
合约调用量瞬时异常上升 → 可能被攻击或刷单
设计中可引入以下机制:
颜色警示(如红、橙色信号)
简洁文案说明(如“交易量骤增 300%”)
可展开详情但不跳转页面,降低阅读负担
将这些机制融入 UI 组件,可以极大提升大屏的实用性。

  1. 信息层次清晰、模块布局可读
由于大屏往往信息密集,如何组织信息成为交互设计的核心难点。
推荐的分层方式:
第一层:核心概览指标(如总交易量、活跃地址、Gas趋势)
第二层:分区域信息块(如按链分类,或按用户/合约分类)
第三层:详细趋势图/交易列表等可拓展内容
使用模块化的卡片布局、留白区分信息块,可以帮助用户在几秒内抓住重点,避免“眼花缭乱”的阅读体验。

  1. 可维护、可扩展、可适配
Web3 数据结构在不断演变:新增协议、新增链、新增地址标签……这就要求大屏具备良好的可维护性。
设计策略包括:
所有数据组件可复用,如“标准图表组件”、“警示模块”、“K线区块”
UI 布局具备适应不同分辨率的弹性(如1080p/4K/LED拼接屏)
尽量使用“数据结构驱动的渲染逻辑”,而非固定死图布局
在设计前期明确这些要求,可以大幅降低后期重构成本。

 
Web3的大屏设计,不是为了炫技、也不是为了迎合形式,而是为了帮助人们在复杂数据中看清趋势、发现问题、做出反应。
它的真正价值在于:
降低理解门槛
提升监控效率
提供可视化决策支持
 
 
在这个数据密集、变化迅速的领域,交互设计师的任务,就是为用户建立起这座“可感知的桥梁”。
 
如果你正在设计或评估一块 Web3 场景下的大屏,不妨从以上几点出发,重新审视它是否真正服务了使用者的体验,而不仅仅是满足了展示的需求。
如果你有正在推进的 Web3 数据大屏项目,欢迎留言交流你的设计思路与挑战,我也会持续更新关于 Web 应用与交互设计的专业观察。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

如何传达错误

杰睿

一个人对错误的反应——无论是自己犯的还是他人犯的——是一个复杂且常常令人痛苦的心理过程。在本文中,我将解释为什么几乎所有的错误提示信息的设计都公然无视用户体验理论。我将使用交互式原型来展示如何解决这个问题。我还将转向交互理论,回顾模式的概念,并解释可逆性、恰当性和及时性的原则。

我们的用户不是程序员

每个设计师的清单里都会包含“设计错误界面”。但即使完成了,程序员仍然会回来说:“还有另一种情况——我们也需要一个错误界面。”在这种情况下,程序员是设计的客户,这很有道理:程序员比任何人都更了解错误。设计师和经理们都认同这种方法——但它存在严重缺陷。

“我们不是我们的用户。”设计师们不断重复这句话。他们想表达的是:不要仅仅依赖自己的专业知识(这不可避免地会过时,而且容易产生职业偏见),而要关注用户在自然环境中的行为。

所以,问题在于——程序员不是我们的用户。程序员的行为、思维方式,以及与计算机的联系与其他人截然不同。我知道我在说什么。我的大多数朋友都是程序员和工程师。我在工作中也经常和程序员交流。我自己也是一名程序员,使用多种语言(从 Swift 和 GLSL 到 Forth 和 Assembly)。但幸运的是,我也是一名非常关注心理学的设计师。那么,让我来告诉你程序员的一天通常是怎样度过的:

程序员甚至还没来得及好好写点东西——他们停顿了一下,砰,一个错误出现了:“空白符缺失”。不知何故,下一行也出现了错误(尽管那一行完全没问题)。左侧面板也满是错误。这还不算编译错误。除了红色圆圈,可能还有黄色圆圈——程序员的大脑已经习惯了忽略这些警告。

如果错误来自硬件故障、第三方库的 bug 或文档不清晰,程序员不会把这些错误当回事。他们会把这些错误视为一种有用的工具,帮助找出别人的错误。而有些烦人的拼写错误,你会在自己的代码中苦苦追寻,希望编译器能自动捕获它们。那么,关于拼写错误的错误消息就是程序员最好的朋友。

简而言之,程序员对错误消息产生了一种容忍度——所有那些带有感叹号的圆圈和冗长、说教的红色文字。

心理学家会怎么说?

从人体工程学的角度来看,程序员的环境与普通用户的环境有着根本的不同。因此,设计师绝对不应该采用程序员对待错误的态度。如果我们负责设计一个 IDE(集成开发环境),那么我们当然会咨询程序员——他们是我们的用户。但在开发其他产品时,最好不要依赖他们的观点。相反,我们应该咨询心理学家

红色感叹号会让用户想起老师在课堂笔记中批改的内容,并被理解为一种惩罚(当然,除非有人已经培养了对惩罚的耐受力,比如程序员)。那么,心理学是如何看待对错误的惩罚的呢?

重要的是不要用消极情绪来强化错误,因为大脑对此非常敏感,并会将这种行为标记为不值得投入精力的事情。

我知道有些人看到错误信息就会慌乱不已。他们开始点击所有按钮,只为让它尽快消失。这些人很难适应界面,因此他们倾向于完全避免与界面交互。这并不是因为他们愚蠢,而是因为他们是普通人——而不是程序员。

看看这个!几乎每个字段都用红墨水划了线,界面提示你输入姓名,并要求你填写,而且是必填项!

但程序员对此完全没意见。程序员坚信,把笨蛋塞进错误里是有用的,这样他们就不会再试图用 null 或 undefined 来破坏程序了。程序员和工程师称之为“傻瓜式防错”,展现了他们独特的同理心。

焦点切换时验证

当用户从一个输入字段切换到另一个输入字段时,第一个字段会触发一个名字很不靠谱的事件:“onblur”。开发者经常用它来进行验证——以防用户漏填字段、输错生日或忘记邮件中的“@”。问题是:当用户切换到另一个应用时,“onblur”也会触发。过去,表单跨越三页时,空字段是个问题。如今,所有内容都能放在一个屏幕上——很难忽略一个空字段。至于其他的检查——它们对用户没有任何帮助。它们只是另一种“傻瓜式”的玩意儿。但用户不是傻瓜。当他们想要什么东西时——他们会发挥创造力。我知道有人会修改页面代码,以获取他们严格意义上不应该获得的政府服务。而如今,他们甚至不需要知道如何编写代码:只需单击一下即可打开 DevTools,再单击几下——所有验证都消失了。输入任何你想要的内容。

通过像傻瓜一样对待用户,开发人员产生了两个问题:第一 - 他们浪费时间构建“保护”,第二 - 他们陷入了一种虚假的安全感(没有比“通过模糊性实现安全”更糟糕的保护)。

在焦点切换时进行验证毫无意义,而且问题重重,我甚至不想在这里讨论它。让我们继续讨论主按钮上的验证:“继续”、“提交”等等。

通常如何做

我们与雅虎界面的交互分为三个阶段:

  1. 开始。所有字段均为空。无错误。“继续”按钮可用。
  2. 按下“继续”按钮。所有空白字段均被标记为错误。
  3. 焦点从第一个字段移开。突然间,它不再被标记为错误了。

让我们来分析一下。

激活按钮——这很好,雅虎点赞了。我有一篇名为“禁用按钮”的文章,解释了这背后的理论和实践。如果你仍然认为禁用按钮对用户有帮助,那你绝对应该读一读。

接下来是可逆性原则。这意味着你可以将界面恢复到初始状态。雅虎又赢了——你可以重置界面。但只能通过逐个点击每个字段来实现。这有什么意义呢?为什么仅仅因为你移开焦点,错误信息就会消失?这纯粹是算法故障!在我关于设计流程的文章中,我指出即使是顶级公司有时也会设计出糟糕的界面,所以不要盲目追随权威。要遵循科学。

下一个原则是恰当性。用户点击了“继续”按钮——交互的对象是按钮,而不是输入字段。如果按钮发出某种震动或吱吱声来表达不满,这可以理解。但是输入字段呢?根本没人碰过它们!它们怎么可能感知到按钮的情绪呢?只有程序员知道,在代码中,这些对象是相互关联的——但外部观察者一无所知,因为它们之间没有视觉联系。

现在来谈谈时效性原则。设计师用红色高亮显示几个字段,期望用户做出什么反应?如果所有字段的重要性都一样,用户应该先解决哪个字段?这需要对注意力中心进行复杂的讨论(这里的注意力中心不是指某个具体的输入字段,而是“出了点问题”的整体感觉),但我建议保持简单:界面基本上就是按照“坐下-停留-过来”的顺序排列,打破了“一次一个动作”的原则。

这里,一切都非常不对劲!

调试模式

界面有“模式”的概念。在我的大学里,程序员选修了一门名为“界面设计”的课程,课程内容包括解释为什么弹出窗口被称为“模态窗口”。现在,我惊讶地发现,程序员和设计师似乎对如何处理模式一无所知。

老式计算机有一种特殊的“HALT”模式,用于调试错误,也称为“控制台模式”。如果处理器尝试执行无效操作,程序将被中断,处理器将停止运行,并切换到控制台模式。您也可以通过按下物理“HALT”按钮手动触发 HALT 中断。使用开关或调试程序(在单独的控制台上运行),您可以修复错误并返回程序执行模式。

“处理器”一词并非偶然——它源于“进程”。错误中断只能在进程运行期间发生,而不会在处理器停止并处于调试模式时发生。这一事实在我们稍后讨论进程和状态之间的区别时会很有用。

向用户清晰解释他们最终进入不同模式的原因和方式至关重要。例如,调试器会显示导致无效操作的指令地址。同样重要的是解释如何返回(记住可逆性原则)。经典的 Norton Commander 完美地诠释了各种模式:

  1. 文件选择模式
  2. 复印模式
  3. 管理员模式,需要对硬件错误做出响应

我见过有人批评这类解决方案:“窗口叠在其他窗口上看起来很丑”。即便接受了这种说法,我仍然无法认同设计师通常提出的替代方案:“我们把这个窗口移除,把错误显示到别的地方,这样更美观。” 就好像设计师忘记了自己是工程师,只是拿起画笔,像个泥水匠一样把瑕疵掩盖起来。

如果你真的想摆脱窗口,正确的方法是记住什么是模式、它们来自哪里以及它们是如何工作的——然后弄清楚如何避免切换到其他模式(如果你想深入了解模式,请阅读 Jef Raskin 的《人性化界面》)。例如:软盘空间不足?不允许复制文件。软盘未插入?不要将其显示在目标列表中。现代操作系统就是这样做的——它们消除了执行可能导致错误中断的操作的可能性。

现在我们可以猜一下雅虎上的“继续”按钮的作用了:它启动了一个错误调试模式。在该模式下,用户被赋予了程序员的角色,并被迫修复所有导致程序崩溃的空值和未定义值。不幸的是,开发人员并没有意识到这对普通用户来说有多么糟糕。我希望他们至少明白,他们剥夺了用户返回上一个模式的能力——这违反了良好用户体验的最基本规则。

糟糕的算法变成了“最佳实践”

乍一看,似乎所有网站的错误显示都和雅虎一模一样。所以这肯定是“最佳实践”,是行业标准……但事实并非如此!每个人的做法都不一样。我们来看看亚马逊:

  1. 开始:所有字段均为空。无错误。“继续”按钮可用。
  2. 按下“继续”按钮。所有空白字段均标记为错误(最后一个字段除外)。
  3. 要消除错误,仅仅切换到另一个字段是不够的——您实际上必须输入一个值。
  4. 再次按下“继续”按钮。除第一个字段外,所有字段均为空,并标记为错误(第一个和最后一个字段除外)。

让我们来分析一下。

一个活动按钮——很好。亚马逊正在跟上雅虎的步伐。

自动聚焦到第一个字段——太棒了(雅虎没有这个功能):用户可以立即开始输入。填完第一个字段后,按“继续”键会直接将光标移动到第二个字段,也就是错误所在的地方。真是聪明的举动!

有人会反对:自动对焦在桌面端运行良好,但在移动设备上键盘会遮挡半个屏幕,所以最好隐藏它,直到用户点击输入。这样一来,你解决了一个问题,又制造了另一个问题。然后你选择你的毒药……问题是,你会认为一种弊端较小,而有些用户会认为另一种弊端更严重。无论哪种情况,你都在选择一种弊端。不要这样做(我稍后会解释如何做)。

界面可逆性。你输入一些内容,错误消失;然后你删除它并切换到另一个字段——哇,一个没有错误的空字段。所有字段都一样。将界面恢复到初始状态比雅虎要难,但由于算法不稳定,仍然是可能的。

与雅虎的同事一样,亚马逊的程序员在“继续”按钮和输入字段之间建立了心灵感应:按钮不想继续,但输入字段都大声喊出来(突然变成输出字段)。

特别要提一下密码确认框——为什么它不变成红色?不填就无法继续。想说要等到前一个框填完后才进行校验?当然,你得给用户解释一下错误校验算法,再给他们看源代码——这真的会很有帮助(讽刺)。

现在,我们来快速看一下IBM的解决方案:

激活按钮——不错。没有自动对焦,但至少界面会自动滚动到第一个字段并显示错误。

界面不可逆——无法将字段恢复到第一个屏幕上的样子。换句话说,你无法退出调试模式。那么,为什么还要有第一个屏幕(调试模式)呢?如果你认为空字段是错误,那就直接显示第二个屏幕吧。哦,你不想立刻吓到用户?还记得感知心理学吗?你决定稍后再吓唬他们,作为对他们错误的惩罚?让我再重复一遍心理学家的话:

重要的是不要用消极情绪来强化错误,因为大脑对此非常敏感,并会将这种行为记录为不值得花费精力的事情。

例子不胜枚举。以网站 capital.xyz 为例:

日期字段为空,点击“下一步”按钮,字段自动对焦。手机字段为空,点击“下一步”——完全没有自动对焦。为什么?这背后的想法是什么?剧透:根本没这回事。只是算法出了问题。

谷歌甚至更进一步——你输入的每一个字符它都会责骂你……

即使你不同意我的批评,你也必须承认,知名公司的顶级设计师和程序员在实现同一项任务时,都采用了截然不同的方式。这意味着完美的解决方案尚未找到。很可能,根本没人真正去寻找它。程序员只是在缺乏对用户交互原则清晰理解的情况下编写代码,然后跑来找设计师说:“嘿,这里又有一个错误需要显示出来。”

当我为自己的项目设计错误显示时,我没有依赖别人的解决方案——我依靠科学。我在撰写本文时收集了来自雅虎、亚马逊和 IBM 的示例。在对所设计机制背后的原理没有深入理解之前,研究参考文献是有害的。你只会捡起别人的错误,然后引用权威文献来为自己辩护。几乎每个人都这样做。没有人愿意重新发明轮子——工业程序员没有时间或动力去做这件事。所以每个人都坚持使用老式的命令行、字母数字显示方法。还记得当时错误是如何显示的吗?如果没有,来看看控制台:

如今,界面开发人员仍在做着同样的事情:直接把错误日志直接倒在屏幕上。21世纪唯一的升级?把文本涂成红色,然后把信息分散到屏幕的不同位置。

这可不行。我们赶紧解决吧!

事件与状态

我们用“错误”这个词来描述两种截然不同的事物:事件状态。快速回顾一下:当处理器尝试执行无效操作时,它会触发中断并进入调试模式。这是一次性事件。我们说“发生了错误”。然后,我们去寻找导致崩溃的内存中的特定值。该值——或者更准确地说,存储单元的状态——也称为“错误”。换句话说,我们模糊了因果之间的界限——仅仅是因为我们没有想出单独的词。为了避免混淆,我将使用两个术语:进程错误(事件,某个时间点)和数据错误(内存中的错误值,一种状态)。

我们来看一个邮箱输入框。缺少“@”符号?这是数据错误。被邮件服务器退回邮件?这是流程错误。或者以邮政编码为例。位数太少?这是数据错误。数据库中找不到邮政编码?这是流程错误。

空字段

输入字段只是一个数据容器。数据可能会缺失。如果你没有输入生日,并不意味着你出生在零日。这个输入字段根本没有数字,只有占位符“日”。数据缺失了。

因此,空白字段并非数据错误。不存在的东西本身就不是什么错误。空白字段是创建数据的机会,是一个良好的起点,也是一个互动的邀请。你可能已经注意到,空白表单看起来比已填充的表单更优雅。那么,为什么要用有毒的红色来破坏它呢?谁会喜欢与标记为危险的字段互动呢?

不要这么做。我准备了一个交互式原型来向你展示应该怎么做。

状态改变

让我们看看电水壶中按钮和水的状态是如何变化的。打开电水壶。水沸腾后,按钮会弹开。但触发按钮的不是水,而是温度传感器。如果传感器损坏或丢失,按钮就不会弹开。

现在手动按下按钮——水不会突然变冷。了解导致状态变化的具体原因很重要。

规则如下:如果对对象 A 执行了某个操作,那么只有 A 的状态可以改变,而对象 B 的状态则不能改变。要更改 B 的状态,需要一个直接作用于 B 的独立进程。

例如,数据库搜索可能会触发索引重建——这会更改数据库本身,但不会改变您搜索的值。

让我们来看一个常见的 UI 设计错误。用户想通过邮政编码查找城市。他们输入邮政编码,点击“搜索”,然后……输入框变红,或者值消失了。发生了什么?这是一个流程错误——数据库中没有结果。但 UI 却将其显示为数据错误,就好像用户输入了错误的邮政编码一样。但也许邮政编码是有效的——只是城市还没有添加到数据库中。也许五分钟后就会添加。用户并没有输入错误数据。输入框不应该受到指责。我们无权触碰它。流程错误需要以不同的方式显示(稍后会详细介绍)。

一次一个动作

根据希克-海曼定律,提供的选项越少,用户选择所需内容的速度就越快。将这一原理推向极致,便可得出“一屏一操作”原则。有人可能会说,复杂的程序不可能简化到这种程度,但让我们回想一下 Hanx Writer 文本编辑器——苹果设计奖得主——它几乎精简了所有内容。或者想想在 Photoshop 中按下一个按钮就可以隐藏整个界面,只留下一个工具可见。在某些情况下,“一屏一操作”原则非常有效。至少,在放弃它之前,先尝试一下。

在优化了开立经纪账户的网页工作流程后,我决定在移动应用中测试这种方法。看看我的交互式原型吧——它通过了 17 位用户的快速测试,与旧版本(每个屏幕有多个输入字段)相比,速度提升了 13%。

有人可能会说,时间的提升并不大——少了52秒,而不是整整一分钟。但首先,试着数到8——这实际上是一段相当长的时间内,任何事情都可能发生。其次,测试表明时间减少了,而不是像一些人担心的那样增加了。他们假设额外的屏幕转换会减慢用户的速度,但结果却恰恰相反:信息越少,用户处理速度就越快。当只有一个操作可选时,用户会毫不犹豫地执行。

原型就是这样。屏幕上只有一个输入字段。用户输入数据,按下“继续”,屏幕就会滚动到下一步。如果你手动尝试在空白字段处向前滚动,屏幕会迅速弹回:“不行,不行”。输入字段保持焦点,提示用户输入数据。无需任何额外的高亮——毕竟,它是屏幕上唯一的字段。完美。

如果你点击“继续”,但输入框为空或邮箱地址缺少“@”符号,键盘会弹回来,仿佛在说:“想继续吗?那就继续填写吧。” 没有任何错误信息!

我再强调一遍:我们不会隐藏错误信息。相反,我们设计的系统绝对不会出错。没有数据就意味着没有数据错误。没有流程就意味着没有中断或调试模式。这里唯一的期望是数据以正确的格式输入。顺便说一句,这里有一个很棒的方法——接受任何合理格式的数据。例如,Sberbank.ru 允许您输入带有国家代码 (+7)、本地前缀 (8) 或完全不带区号的电话号码。

从本文俄语版的评论来看,并非所有人都理解原型的用途。有些人期望看到一个完美无瑕、随时可用的产品(一个他们可以直接复制的产品),结果却大失所望,对诸如缺少重新发送短信验证码的选项之类的问题吹毛求疵。让我再次澄清:本文中的原型并非成品的精确复制品。它们的唯一目的是展示如何消除错误信息。

现在,让我们将此解决方案扩展到界面无法简化为“一屏一操作”模式的情况。 “Ingos Investments”的原型反映了数据量巨大,以至于每个屏幕上必须显示多个字段的情况。

让我们设想一个场景:用户尚未填写所有字段,点击了“继续”按钮。界面立即聚焦于第一个空白字段,调出屏幕键盘,并滚动到该字段正上方,方便用户查看正在输入的内容。即使屏幕上有多个字段,我们仍然坚持“一次一个操作”的原则,巧妙地将其他字段隐藏在键盘下方。在活动字段下方,会出现一条提示:“所有字段必须填写”。这不是错误消息,而是一个有用的提示,没有任何令人担忧的危险信号。

当用户点击屏幕键盘上的“下一步”时,他们只会跳转到下一个字段——这和填写表单的常规流程一样,而不是笨重的错误调试模式。提示已经给出,所以用户不太可能再次尝试填写空白字段。但如果他们真的这么做了,那么他们会再次看到这个温馨提示。

怀疑论者可能会说:“但如果空白字段位于屏幕最顶部,无法滚动到键盘上方怎么办?或者,如果网站是在桌面上打开的,根本没有屏幕键盘怎么办?” 答案是:没什么大不了的。所有这些极端情况都在原型中得到了完美的体现。我也听到过这样的担忧:“如果我们不把每个字段都涂成红色,用户就不会意识到需要填写”。测试表明,这些担忧是毫无根据的。这些担忧背后真正的恐惧,是害怕打破常规,尝试一些真正新颖的东西——一些对用户更有利,而不仅仅是对我们自己更有利的东西。

州经理

为了创建“Ingos Investments”的原型,我编写了一个状态管理调度器。交互元素将其内容报告给管理器,然后管理器决定如何处理它们。

程序员常说输入字段是独立的元素。邮箱字段不知道电话字段里的内容。当你切换输入字段时,它会触发对其内容的验证。当你点击“继续”按钮时,所有输入字段都会收到一个命令——检查你的数据。这就是为什么它们会突然一起亮起红灯。这就是它的构造方式。程序员说你无法改变它。设计师也相信这一点。不过亚马逊的例子表明,密码确认字段确实知道前一个字段的内容。所以他们可以随时修改。

这意味着你可以而且应该创建一个状态管理器。当用户尝试跳转到下一个屏幕时,状态管理器会检查所有字段,找到一个包含不完整或无效数据的字段,将用户带回该输入框并显示提示。本质上,这是一次时光之旅——回到用户出错的点。因此,将后续字段标记为错误是没有意义的——它们发生在将来,而用户尚未到达它们。

使用状态管理器,您还可以在鼠标悬停在“继续”按钮上时检查字段内容。如果数据缺失,按钮的标签会更改为特定的字段名称,例如“输入街道”——这遵循了时效性原则(用户尝试继续,但需要填写字段,我们会通知他们)。这个新标签在按钮和字段之间建立了视觉联系,使程序员有理由将这两个元素的行为联系在一起。

程序员可能会问:“为什么要把事情复杂化?” 没错——对程序员来说越复杂,对用户来说就越容易。这是规则。说实话,这只需要一两天的时间。需要更多精力的是通知系统。数据错误和流程错误应该显示在各自的层级结构中:数据错误应该显示在数据容器中,而流程错误应该显示在应用程序范围的通知中。这是一个完全独立的主题,我希望有时间写一篇关于通知设计的文章。

结论

因此,我们发现了以下事实:

  1. 绝大多数现有解决方案都归结为切换到“错误纠正模式”,而退出该模式要么不可能,要么极其困难(只能通过算法中的错误)。这种方法虽然被广泛接受,但各地的实现方式却有所不同:空白字段可能被视为错误,也可能被视为正常,有时甚至会在同一屏幕上混合出现。用户会背负负面情绪,因为系统会“惩罚”他们破坏程序。这种方法绝对不可接受,必须予以纠正。
  2. 缺少数据并不意味着数据错误。空白字段是互动的邀请,而非危险信号。
  3. 我们不需要两种模式:数据录入和纠错。一种模式——数据录入——就足够了。
  4. 数据错误和流程错误是不同的。它们应该显示在相应的层级结构中:数据错误应该显示在数据容器中,而流程错误应该显示在全局通知中。
  5. 如果您希望对一个对象执行的操作影响另一个对象,请在它们之间建立清晰的视觉联系。
  6. “一屏一操作”原则一定要试一下。如果有效,那你太棒了!
  7. 编写一个简单的状态管理调度程序。借助它,你可以引导用户回到最早未完成的步骤。
  8. 创建原型——它们是新想法的最佳概念证明。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

日历

链接

个人资料

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

存档