首页

《交互设计小白如何从“流程图思维”入门?一套拆解任务流程的实用方法》

杰睿 设计管理与成长

//写在前面:
适合人群:
视觉转交互 / UI Designer 想懂交互逻辑 / 想写出好交互文档的新手
内容结构:
  1. 流程图是什么,不是画图,是表达“用户怎么一步步完成目标”
  2. 流程图包含什么组成?(触发—操作—反馈)
  3. 初学者常犯的理解误区:关注画面,不关注“操作过程”
  4. 拆解一个真实任务流(比如“预定会议室”/“注册账号”)
  5. 如何从用户目标出发,写出一张不依赖原型图的流程清单
  6. 总结一套“新手流程图五步法”
a7af61c73dd145a5135dfffec16c8d28.jpg
很多初入交互设计的小伙伴,都会听到一个建议:“先从画流程图开始。”
但流程图到底**画什么?表达什么?**为什么它对交互设计那么关键?
今天这篇文章,我们就来系统梳理这件事,并教你如何用纯文字也能表达出完整的用户任务流程

 流程图是什么,不是画图,是表达“用户怎么一步步完成目标”

流程图(User Flow)的本质,不是图,而是一条用户的操作路径
你可以把它理解为一张“任务执行地图”:
  • 从哪里开始(入口)
  • 走过哪些关键步骤(过程)
  • 最终完成了什么(目标达成)
它不是设计页面样子,不是决定按钮放哪里,而是回答一个核心问题:用户是怎么一步步完成这件事的?
举个例子:
当你用滴滴打车的流程,其实是:
markdown
复制编辑
1. 打开App → 看到“打车”入口 2. 输入起点和终点 3. 选择车型 → 确认订单 4. 等待司机接单 → 上车 5. 到达目的地 → 支付 → 评价
这其实就是一张流程图的雏形。

流程图包含什么组成?用三段式理解(触发 → 执行 → 反馈)

为了让新手更容易掌握,我们可以把一个用户流程拆成以下三段:
阶段 说明 关键点
触发 Trigger 用户产生动机/看到入口 任务从哪里开始?入口清晰吗?
执行 Action 用户一步步完成操作 步骤顺畅吗?逻辑连贯吗?
反馈 Feedback 系统响应结果 是否完成目标?有没有确认提示?
 这三段不是理论,而是你画流程、写文档时必须考虑的三个设计面

初学者常犯的误区:关注“页面”,而忽略“操作过程”

很多设计小白在学习初期,习惯一上来就画界面、堆按钮。
但问题是——你连用户要做什么都没搞清楚,怎么知道该放什么控件?
 典型误区:
  • 原型里有“上传按钮”,但没想清楚用户是上传图片还是文件?能否预览?能删改吗?
  • 有“下一步”,但用户是否真的已经完成上一步?有没有校验、提示?
 正确思维应该是:
“用户要完成一件事 → 他需要经过哪几步 → 每一步中他需要系统给什么?”

 拆解一个真实任务流示例:「预约会议室」

我们以一个企业内部系统中的真实任务流为例:
 用户目标:预约明天下午的会议室开会

 用户流程拆解:

markdown
复制编辑
1. 登录系统 → 首页选择“会议室预约”入口 2. 选择日期 → 选择时间段(如14:00-15:00) 3. 选择会议室(系统过滤出可用的) 4. 填写用途说明 → 提交预约 5. 显示预约成功提示 → 可查看预约记录

这张流程图体现的设计思考包括:

  • 步骤是否有明确反馈?
  • 用户是否容易出错?
  • 系统是否能预防冲突时间段?
  • 可编辑、取消吗?流程中断如何处理?

 如何从用户目标出发,写出一张不依赖原型图的流程清单

很多人以为流程图就必须要“画”,但对于刚入门的同学,用文字写出一张流程清单,已经很强了!

操作方法:

以“注册账号”为例,试着这样写清楚流程:
markdown
复制编辑
【用户目标】注册一个新账号 【触发入口】 - 打开App → 点击“注册” 【执行过程】 1. 输入手机号 2. 获取验证码 → 系统发送 3. 输入验证码 → 系统校验 4. 设置密码 5. 勾选用户协议 → 点击“注册” 【反馈结果】 - 注册成功 → 跳转至首页 - 如果失败 → 显示具体错误(如验证码错误)
这个结构比直接画个框图更清晰、更全面,还方便和开发、产品对齐逻辑。

总结一套「新手流程图五步法」

很多人不知道从哪开始画流程,其实你可以用下面这套通用五步法

新手流程图五步法:

步骤 问题提示 示例
1. 明确用户目标 他要完成什么任务? 预约会议室、提交订单等
2. 确定起点入口 他从哪开始这件事? 首页、菜单栏、按钮
3. 列出关键步骤 他必须做哪些操作? 选择、输入、确认等
4. 标记系统反馈 系统会给出什么回应? 成功提示、错误校验等
5. 考虑中断/异常 用户会在哪些地方卡住? 验证失败、网络断开等
有时候不需要一次做得很完美,先写出主流程,再补充边界情况,也很棒。
 
推荐你这样开始练习:
选择一个你熟悉的 App,如微信、小红书、饿了么
模拟一个真实任务,如“下单”、“发评论”、“修改资料”
用上面五步法写出完整流程清单,别画图也行!
 
兰亭妙微(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

从实习生到高级产品设计师。职业阶梯不会告诉你不同职业层级之间的差异

杰睿 设计管理与成长

成熟的组织会使用职业阶梯来评估员工是否超出工作预期并做好晋升的准备。这些阶梯通常涵盖多个技能领域,能够精准地指示员工是否接近晋升,或者是否应该专注于提升某些领域。

去年第 12 集中,我介绍了设计师职业阶梯的基础知识。

虽然职业阶梯能够很好地展现各个层级之间的差异,这对于职业生涯刚刚起步的设计师来说非常有帮助,但它并不能涵盖我们工作的方方面面。职业阶梯并不能解释设计的定义在每个层级是如何演变的,设计工具与其他活动所占时间的比例是如何变化的,也无法解释每个层级的一对一会面有何不同。

在本文中,我将从不同寻常的角度来审视设计师的职业层级。我将探讨大多数职业阶梯图中未涵盖的各个层级之间的一些真正差异。为了使比较更具条理,我将我的思考分为七个主要方面:

  • 战略思维
  • 雇佣
  •  设计的定义
  • 设计过程
  • 项目的范围和模糊性
  •  工具
  • 一对一会议

 战略思维

低级别设计师与战略几乎没有共同点,这应该不足为奇。对于实习生、初级设计师,甚至中级产品设计师来说, “战略”这个词可能有点令人畏惧或神秘。战略是否真的在某个设计师无法进入的秘密房间里进行?

一点也不。

战略只是提前规划而已。

制定计划而不只是做出反应。

对于设计师来说,战略思维可能意味着在季度规划期间更多地参与制定 OKR,通过设计思维或设计冲刺等设计方法推动新举措的创新,并在设计过程的不同阶段提出更好的问题,以更好地了解用户、利益相关者和同行,从而提供带来积极变化的东西。

《用户体验生存指南》的 Miranda Slayter最近发表了一篇关于设计师如何开始战略思维的精彩短文:成为更具战略性的设计师的第一步

现在让我们来看看职业阶梯的每个层级是什么样的:

将显示缩放图像
战术战略范围代表了设计师整个职业生涯中设计战略方法的演变。

实习生

作为一名实习产品设计师,你很可能会被告知需要做什么,而且内容可能比较详细,但通常足以让你理解原因,无需深入探讨,也不会让你感到不知所措。因此,你的工作方式几乎完全基于策略,在这个级别上这完全没问题。

青少年

作为初级产品设计师,你仍然主要专注于执行产品经理或更资深的设计师交办的任务。策略设计目前还不在你的考虑范围之内,你应该更专注于提升其他领域,例如用户研究、视觉设计、交互设计和协作。

中级

作为一名中级产品设计师,你开始进行战略性思考,并尽早提出问题。我们为什么要这样做?这是解决客户痛点的最佳方法吗?这与我们作为一个组织正在努力实现的宏伟目标如何契合?现在是时候进行思维转换了,不要再对“战略”这个词感到恐慌,开始更多地参与优先级讨论。

高级

作为一名高级产品设计师,你被期望成为产品经理、技术主管和其他产品团队成员的战略合作伙伴。你需要从不同的角度审视问题,并从全局视角来判断什么是最重要的。你需要思考你的决策如何影响组织的长期发展。为塑造这一长期发展格局做出贡献,这种责任感正越来越频繁地出现在你的日程表上。

雇佣

随着你的成长,你的工作圈子也在不断变化。因为当你成为中级设计师时,你的角色会发生改变,你开始做的事情与实习生或初级设计师时略有不同。因此,为了做好你的工作,你最终不得不与组织中截然不同的一群同事交流。

最显著的变化发生在个人贡献者晋升为经理之后。从这一刻起,他们应该花更多时间与利益相关者和高管团队成员相处,而不是与直接下属相处。如果你渴望在未来达到这一级别,请记住这一点。

不过,本文我将仅关注 IC 角色。让我们来探讨一下实习生、初级、中级和高级设计师之间的互动是如何演变的。

将显示缩放图像
参与度图表展示了设计师如何与职业生涯不同阶段的同行互动。

实习生

作为一名实习设计师,你应该至少有一位工作伙伴:你的伙伴,通常是更资深的设计师,帮助你解决这份工作的各个方面。此外,你还处于与工程师和产品团队成员进行跨职能合作的阶段。

青少年

作为一名初级设计师,你能够自信地与工程师和产品经理讨论你的任务、想法和成果。你可以与产品的最终用户沟通,或借鉴其他团队(例如用户研究团队、客户支持团队或商务团队)收集的洞见。你仍然与一位(或多位)资深设计师保持着良好的关系,并从他们身上学习最多。

中级

作为一名中级设计师,你仍然需要与团队中的工程师和产品经理密切合作。如果你的产品依赖于组织生态系统中的其他环节,你可能偶尔需要与其他产品团队的工程师沟通。随着你越来越多地参与制定战略并产生业务影响,你开始与业务利益相关者互动。你对规划用户研究活动和与用户沟通充满信心。

 高级

作为一名高级设计师,你是跨职能协作的大师。你与来自各个部门的人员合作,从工程部门到销售部门,再到高管。你经常扮演侦探的角色,在组织内外各个地方寻找完成任务所需的信息。你在与利益相关者讨论战略时充满自信。当然,你仍然与产品团队成员保持着密切的合作。此外,作为一名经验丰富的同事,你可能会成为实习生或初级设计师的导师,与他们分享你宝贵的知识。最终,你会变得非常横向发展。

设计的定义

对于我们大多数人来说,开启产品设计师职业生涯的动机大致可以概括为以下几个方面。要么是我们希望通过设计让世界变得更美好,要么是我们在童年时期就拥有艺术细胞(但还不足以成为真正的视觉艺术家),要么是我们希望成为数字领域的创客,但并不一定精通编程。

无论你的动机是什么,只要你在这个行业待得够久,你就会注意到,你对产品设计师的角色以及整个设计行业的看法都在发生变化。设计的定义也是如此。

将显示缩放图像
设计师的职业生涯中,关注点不断演变,并决定了设计的定义。起初,设计师主要关注视觉方面,但随着他们的成长,他们开始注意到策略、解决业务问题和推动创新的重要性。

实习生

作为一名实习设计师,你的大部分时间都会花在 Figma 等设计工具上。你会被告知需要做什么,并且(希望)你能按照说明创建模型、线框图、图表和原型,供你的工程团队用来构建功能。

您对设计的定义很可能非常接近:

设计决定了它的外观,并为工程团队为我们的用户构建功能提供了有用的指导。

 青少年

作为一名初级设计师,你仍然会把大部分时间花在设计工具上,与组件搏斗,努力将它们以最易用、最美观的方式布局,然后再交给工程团队。然而,你开始质疑自己的任务,并与用户沟通。你越来越多地思考你和你的团队为什么要开发这些产品。你也开始思考你的决策会如何影响用户的生活。

您对设计的定义有点接近:

设计是一种工具,通过美观、优雅的面向客户的界面实现良好的用户体验。

中级

作为一名积累了一定经验的中级设计师,你开始意识到自己并非受雇于 Figma,仅仅是为了画一些漂亮的矩形。你加入组织不仅是为了解决用户的痛点,也是为了探索如何让组织从设计中获益。随着你逐渐在战术战略层面上迈向战略层面,你就能展现出对业务的深远影响。

您对设计的定义现在非常接近:

设计以优雅且实用的方式结合了业务、用户和工程的利益。

高级

作为一名经验丰富、经验丰富的高级设计师,你只需花费一小部分时间在 Figma 中移动矩形。你的大部分工作是探索客户需求和业务问题,并找出其根本原因。此外,你还需要战略性地思考哪些问题值得立即解决,以及如何以最大程度地发挥组织潜力的方式解决这些问题。在某些组织中,你可能负责推动创新,并与产品经理合作探索新产品和新服务的机遇。

你清楚地知道自己为什么被录用,这也决定了你对设计的定义,很可能接近于:

设计是解决业务问题和推动创新的战略组成部分,同时要牢记用户的利益。

设计过程

“你的设计流程是怎样的?”这类问题在设计岗位的面试中经常被问到。根据职位的资历和面试官的经验,答案会有所不同。经验不足的设计师往往会严格遵循他们在设计大学课程或训练营中学到的流程。经验丰富的设计师尝试过之后,就会知道事情并非那么简单。

实习生

作为一名实习产品设计师,你被教导要做的首要任务是尽可能多地了解用户的痛点。你需要识别用户画像,在同理心地图上描绘他们的感受和想法,并开始思考潜在的解决方案。你需要写下一些用户故事,创建一个最小可行产品 (MVP),设计一个漂亮的原型,并为基于任务的可用性研究准备一个场景,以验证你的解决方案的可行性和可用性。

从纸面上看,这似乎很棒,但有一个问题,你很快就会(但愿不会)以艰难的方式学到它。

青少年

作为一名初级产品设计师,你开始明白,你接到的每个项目都略有不同,有时没必要把以前学到的理想设计流程的每个步骤都照搬过来。由于你经验尚浅,独立工作能力也相对较低,所以你负责的项目并不一定很复杂,很多决定都必须咨询你的资深伙伴。

此外,您经常过快地进入解决方案领域,而没有花足够的时间去了解潜在的问题、客户需求和用户的痛点。

中级

作为一名中级产品设计师,你越来越适应独自处理复杂度更高的项目。你已经意识到设计流程需要相当灵活,并根据每个项目进行个性化调整。你越来越擅长同时处理调研、写作、跨职能协作以及多个项目的像素工作。

你花在解决问题上的时间越来越少,而是先做各种练习来了解问题。

高级

作为一名高级产品设计师,你可以轻松地同时处理多个项目。你深知,理想的设计流程在纸面上看起来很棒,但在现实生活中却行不通。它被发明出来只是为了教导新设计师吗?也许吧。如果是,那它肯定有问题,而且很遗憾没有人告诉他们,一旦入职,设计流程将会大不相同。但你已经度过了这个难关,并且意识到,你花在理解问题上的时间越多,成功完成项目的机会就越大。

所以,你经常扮演侦探的角色,追踪利益相关者、用户、客户、工程师和客户成功代表,以了解全局并做好你的工作。然后,或者在此期间,你会写下这个问题,试图将其分解并提炼其核心。你会邀请非设计师与你一起进行创意构思。之后,你会使用你最喜欢的设计或 Vibe 编码工具来创建原型,稍后再与你的客户和用户进行验证。交接过程是隐形的,但你已经从本文中了解到了这一点。

项目的范围和模糊性

我在之前的一篇文章中讨论过这个领域的一些内容,主要关注为什么在晋升决策中,工作经验的年限并不重要。

项目的范围和模糊性程度与设计师的经验及其独立性高度相关。经验不足的设计师更有可能被分配到范围较小、模糊性较低的项目,因为他们尚未准备好独立做出重要决策,在类似项目上工作的时间也不够长,并且仍在学习如何提出正确的问题。

将显示缩放图像
实习生和初级设计师位于“低模糊性,小范围”象限,而中级和高级设计师则位于“大范围,高模糊性”象限。高级设计师能够处理高度复杂且不明确的项目,而实习生则从简单明确的任务开始。

实习生

作为一名实习产品设计师,你被分配到的项目模糊性较低,范围也相对较小。原因很简单。这些只是你在这个职位上的初步尝试,你仍在学习这门手艺。你不知道在哪里寻找答案,也不知道如何提出好的问题来找到答案。因此,你需要资深同事的悉心指导才能完成你的任务。

青少年

作为一名初级产品设计师,你现在迈出了更加自信的步伐,但你仍然像个蹒跚学步的孩子。范围和模糊性与上一个级别大致相同。也许范围在规模上会更大一些,但就产品经理提出的需求而言,这些需求相当明确,没有太多需要探索的地方。不过,你可以开始协助你的产品经理和更资深的同事进行一些产品探索活动。

中级

作为一名中级设计师,你开始更加独立地工作,并且在没有太多指导的情况下做出重要的决策。你被分配的项目越来越复杂,也越来越不明确。你需要进行大量的研究和探索练习,才能找到完成项目的答案,而这些项目的规模也更大,持续时间也更长。

高级

作为一名高级产品设计师,您能够轻松地做出重要的设计决策。您负责的项目往往涉及范围广泛,且非常模糊。如果您负责产品的很大一部分、整个产品,甚至多个小型产品,这并不奇怪。

向利益相关者和组织内的其他成员寻求答案是你的生计所在。你经常扮演侦探的角色,并且非常擅长串联各种线索。有时你需要处理的只是一些零散的信息,但你经验丰富,并且拥有强大的自主权,能够充分利用这些信息。

你是产品经理和技术主管的战略合作伙伴,你们共同推动产品发现。有人会说,你在寻找答案方面比其他人高出一筹,因为你正在负责的项目甚至还没有被发现。而你和产品三人组中剩下的两个人,就是为了发现这些机会。

工具

过去几年,我观察到设计师中存在一种令人担忧的趋势,他们过于注重工具。我并非唯一一个。设计师兼作家 Artiom Dashinsky 创造了“Figmaism”一词,指的是我们行业中过于关注工具和设计的视觉层面的讨论,导致我们对自身角色可能产生的影响理解肤浅。

大约一年前,在一次采访中,我问了来自

用户体验生存指南

她对这一趋势有何看法?她非常准确地指出,经验越少的设计师,就越倾向于沉迷于工具和作品的视觉效果。

虽然工具对我们的工作至关重要,但它们并非永恒不变。什么是永恒不变的?是我们的技能,例如解决问题、协调、同理心,以及从无到有创造出有意义的事物。

将显示缩放图像
工具图表说明了随着经验的增加,对设计工具的迷恋如何降低。

实习生

作为一名实习产品设计师,你大约 90% 到 95% 的时间都花在 Figma 上。它并非你真正喜欢的工具,而是一款近年来占据市场主导地位的标准应用。你对产品设计的兴趣是从 Figma 开始的吗?很有可能。剩下的 5% 到 10% 的时间则花在文档编辑器上,你会在深入研究解决方案之前尝试分解问题,而这很可能是你仍在学习的内容。

青少年

作为一名初级产品设计师,你仍然非常注重视觉设计,因此你热爱 Figma,并努力掌握它的每一个工作流程、插件和创意技巧。你大概会花 80% 的时间在这个工具上。其余的时间则分配给你选择的文档编辑器以及各种研究和分析工具,例如 Hotjar、Amplitude 和 Dovetail。

中级

作为一名中级产品设计师,你开始意识到视觉效果并非这份工作的全部,所以你减少了使用 Figma 等设计工具的时间。我估计你大约有 50% 的时间用在了 Figma 上。剩下的一半时间则用于沟通、写作、绘制图表以及其他活动,以了解客户、企业的需求和用户的痛点。你越来越多地使用分析工具。

此外,您开始对未来的设计工具感兴趣,例如 Lovable、v0 和 Replit(许多人称之为“氛围编码”应用程序),并试图弄清楚如何将它们融入到您的工作流程中。

高级

作为一名高级产品设计师,你可能有四分之一的时间花在设计工具上。与你作为实习生或初级设计师的经历相比,这个部门发生了巨大的变化。你不再过多地探索视觉方面,因为你知道,除了用户界面之外,用户体验还有许多更重要的方面。

您可能已经测试了一些氛围编码工具,并将它们纳入设计过程的构思和原型制作阶段。

您的大部分时间都花在三类工具上:白板(FigJam、Miro、Lucid)(用于主持研讨会);文档编辑器(Google Docs、Microsoft Word、NotebookLM)(用于经常戴着侦探的帽子进行大量采访);演示文稿编辑器(PowerPoint、Google Docs、Figma Slides)(用于创建幻灯片,帮助您与利益相关者和商业团队沟通您的重要想法)。

一对一会议

定期与你的直线经理会面对你们双方都至关重要。对他们来说,这需要评估你在工作和职业生涯中是否取得了进步。他们也需要这些会议来讨论潜在问题,并提供帮助来解决这些问题。对于你来说,作为一名设计师,在这些会议上讨论的需求和主题会根据你在职业阶梯中所处的位置而有所不同。近年来,我在不同的公司领导几位实习生和初级设计师时,也观察到了这一点。这些会议会有什么不同呢?让我们来一探究竟。

将显示缩放图像
一对一会议中讨论的时间视角因经验水平而异。实习生和初级设计师会寻求针对当前日常工作的反馈和指导,因此他们不会着眼于几周后的事情。中级设计师开始进行战略性思考,因此他们会讨论几个月内将要发生的事情。高级设计师则非常注重战略性,他们的眼光会远超下个季度。

实习生

作为一名实习产品设计师,你与经理开会的时间几乎百分之百都集中在你的工作上,这会影响你的成长。当然,你也在与他们建立关系,讨论一些与工作无关的话题,以保持良好的沟通水平。但由于你经验相对不足,你需要大量的反馈和工作指导。

青少年

作为一名初级产品设计师,您的主要需求与以前一样:您需要工作反馈和指导,因此在大多数时间里,您将展示您的日常项目并询问是否以正确的方式完成。

首次晋升后,你渴望更多,所以开始对中层职位感兴趣。它和你现在的职位有什么不同?我需要学习和实现哪些目标才能尽快晋升?你的直线经理可能会为你设定具体的目标,指导你获得晋升。因此,你们的一对一会面可能会用来讨论这些目标并检查进展情况。

中级

作为一名中级产品设计师,你变得越来越独立,这会影响你与直线经理的一对一会议。你不再像以前那样详细地讨论你目前的工作。战略思考越来越频繁地出现在你的工作中,所以你很可能讨论的不是团队下周的工作,而是下个季度的工作。

你开始与来自不同团队和部门的人员更紧密地合作完成工作,因此你会寻求建议,了解如何与非设计师建立联系、与利益相关者互动,以及如何与商业团队沟通,以便他们理解你(剧透:他们并不关心你的设计系统、代币或双钻流程)。你很可能已经设定了一些季度目标,并正在努力实现这些目标以保持持续增长。

高级

作为一名高级产品设计师,你比以往任何时候都更加注重战略。你很少需要花半个小时与你的经理沟通你的日常项目(如果是这样,那就有问题了,这叫做微观管理,而问题要么是你的直线经理,要么是整个组织)。你更愿意在一对一的会议中兼顾两个主要主题:战略展望和领导力。

如果你是一位资深设计师,并希望进一步发展,那么你面前有两条路可走:IC 和管理层。两者都需要一定的领导能力。如果你选择 IC 这条路,你可能没有直接下属,但你将以身作则,监督良好实践的实施。你很可能会花费大量时间与你的经理一起准备担任这些职位。

此外,如果您已经领导一个设计师团队但尚未获得正确的头衔(这在该行业中很常见),您可以报告他们的进展和团队的战略举措。

剩下的时间,你用来讨论战略。你的产品团队(如果你负责多个产品,则多个产品团队)下个季度的重点是什么?未来6到12个月,你还计划探索和开发哪些产品?你的经理应该帮助你寻找资源和人脉,以实现战略目标。

从实习生到高级产品设计师。职业阶梯不会告诉你不同职业层级之间的差异

杰睿 设计管理与成长

成熟的组织会使用职业阶梯来评估员工是否超出工作预期并做好晋升的准备。这些阶梯通常涵盖多个技能领域,能够精准地指示员工是否接近晋升,或者是否应该专注于提升某些领域。

去年第 12 集中,我介绍了设计师职业阶梯的基础知识。

虽然职业阶梯能够很好地展现各个层级之间的差异,这对于职业生涯刚刚起步的设计师来说非常有帮助,但它并不能涵盖我们工作的方方面面。职业阶梯并不能解释设计的定义在每个层级是如何演变的,设计工具与其他活动所占时间的比例是如何变化的,也无法解释每个层级的一对一会面有何不同。

在本文中,我将从不同寻常的角度来审视设计师的职业层级。我将探讨大多数职业阶梯图中未涵盖的各个层级之间的一些真正差异。为了使比较更具条理,我将我的思考分为七个主要方面:

  • 战略思维
  • 雇佣
  •  设计的定义
  • 设计过程
  • 项目的范围和模糊性
  •  工具
  • 一对一会议

 战略思维

低级别设计师与战略几乎没有共同点,这应该不足为奇。对于实习生、初级设计师,甚至中级产品设计师来说, “战略”这个词可能有点令人畏惧或神秘。战略是否真的在某个设计师无法进入的秘密房间里进行?

一点也不。

战略只是提前规划而已。

制定计划而不只是做出反应。

对于设计师来说,战略思维可能意味着在季度规划期间更多地参与制定 OKR,通过设计思维或设计冲刺等设计方法推动新举措的创新,并在设计过程的不同阶段提出更好的问题,以更好地了解用户、利益相关者和同行,从而提供带来积极变化的东西。

《用户体验生存指南》的 Miranda Slayter最近发表了一篇关于设计师如何开始战略思维的精彩短文:成为更具战略性的设计师的第一步

现在让我们来看看职业阶梯的每个层级是什么样的:

将显示缩放图像
战术战略范围代表了设计师整个职业生涯中设计战略方法的演变。

实习生

作为一名实习产品设计师,你很可能会被告知需要做什么,而且内容可能比较详细,但通常足以让你理解原因,无需深入探讨,也不会让你感到不知所措。因此,你的工作方式几乎完全基于策略,在这个级别上这完全没问题。

青少年

作为初级产品设计师,你仍然主要专注于执行产品经理或更资深的设计师交办的任务。策略设计目前还不在你的考虑范围之内,你应该更专注于提升其他领域,例如用户研究、视觉设计、交互设计和协作。

中级

作为一名中级产品设计师,你开始进行战略性思考,并尽早提出问题。我们为什么要这样做?这是解决客户痛点的最佳方法吗?这与我们作为一个组织正在努力实现的宏伟目标如何契合?现在是时候进行思维转换了,不要再对“战略”这个词感到恐慌,开始更多地参与优先级讨论。

高级

作为一名高级产品设计师,你被期望成为产品经理、技术主管和其他产品团队成员的战略合作伙伴。你需要从不同的角度审视问题,并从全局视角来判断什么是最重要的。你需要思考你的决策如何影响组织的长期发展。为塑造这一长期发展格局做出贡献,这种责任感正越来越频繁地出现在你的日程表上。

雇佣

随着你的成长,你的工作圈子也在不断变化。因为当你成为中级设计师时,你的角色会发生改变,你开始做的事情与实习生或初级设计师时略有不同。因此,为了做好你的工作,你最终不得不与组织中截然不同的一群同事交流。

最显著的变化发生在个人贡献者晋升为经理之后。从这一刻起,他们应该花更多时间与利益相关者和高管团队成员相处,而不是与直接下属相处。如果你渴望在未来达到这一级别,请记住这一点。

不过,本文我将仅关注 IC 角色。让我们来探讨一下实习生、初级、中级和高级设计师之间的互动是如何演变的。

将显示缩放图像
参与度图表展示了设计师如何与职业生涯不同阶段的同行互动。

实习生

作为一名实习设计师,你应该至少有一位工作伙伴:你的伙伴,通常是更资深的设计师,帮助你解决这份工作的各个方面。此外,你还处于与工程师和产品团队成员进行跨职能合作的阶段。

青少年

作为一名初级设计师,你能够自信地与工程师和产品经理讨论你的任务、想法和成果。你可以与产品的最终用户沟通,或借鉴其他团队(例如用户研究团队、客户支持团队或商务团队)收集的洞见。你仍然与一位(或多位)资深设计师保持着良好的关系,并从他们身上学习最多。

中级

作为一名中级设计师,你仍然需要与团队中的工程师和产品经理密切合作。如果你的产品依赖于组织生态系统中的其他环节,你可能偶尔需要与其他产品团队的工程师沟通。随着你越来越多地参与制定战略并产生业务影响,你开始与业务利益相关者互动。你对规划用户研究活动和与用户沟通充满信心。

 高级

作为一名高级设计师,你是跨职能协作的大师。你与来自各个部门的人员合作,从工程部门到销售部门,再到高管。你经常扮演侦探的角色,在组织内外各个地方寻找完成任务所需的信息。你在与利益相关者讨论战略时充满自信。当然,你仍然与产品团队成员保持着密切的合作。此外,作为一名经验丰富的同事,你可能会成为实习生或初级设计师的导师,与他们分享你宝贵的知识。最终,你会变得非常横向发展。

设计的定义

对于我们大多数人来说,开启产品设计师职业生涯的动机大致可以概括为以下几个方面。要么是我们希望通过设计让世界变得更美好,要么是我们在童年时期就拥有艺术细胞(但还不足以成为真正的视觉艺术家),要么是我们希望成为数字领域的创客,但并不一定精通编程。

无论你的动机是什么,只要你在这个行业待得够久,你就会注意到,你对产品设计师的角色以及整个设计行业的看法都在发生变化。设计的定义也是如此。

将显示缩放图像
设计师的职业生涯中,关注点不断演变,并决定了设计的定义。起初,设计师主要关注视觉方面,但随着他们的成长,他们开始注意到策略、解决业务问题和推动创新的重要性。

实习生

作为一名实习设计师,你的大部分时间都会花在 Figma 等设计工具上。你会被告知需要做什么,并且(希望)你能按照说明创建模型、线框图、图表和原型,供你的工程团队用来构建功能。

您对设计的定义很可能非常接近:

设计决定了它的外观,并为工程团队为我们的用户构建功能提供了有用的指导。

 青少年

作为一名初级设计师,你仍然会把大部分时间花在设计工具上,与组件搏斗,努力将它们以最易用、最美观的方式布局,然后再交给工程团队。然而,你开始质疑自己的任务,并与用户沟通。你越来越多地思考你和你的团队为什么要开发这些产品。你也开始思考你的决策会如何影响用户的生活。

您对设计的定义有点接近:

设计是一种工具,通过美观、优雅的面向客户的界面实现良好的用户体验。

中级

作为一名积累了一定经验的中级设计师,你开始意识到自己并非受雇于 Figma,仅仅是为了画一些漂亮的矩形。你加入组织不仅是为了解决用户的痛点,也是为了探索如何让组织从设计中获益。随着你逐渐在战术战略层面上迈向战略层面,你就能展现出对业务的深远影响。

您对设计的定义现在非常接近:

设计以优雅且实用的方式结合了业务、用户和工程的利益。

高级

作为一名经验丰富、经验丰富的高级设计师,你只需花费一小部分时间在 Figma 中移动矩形。你的大部分工作是探索客户需求和业务问题,并找出其根本原因。此外,你还需要战略性地思考哪些问题值得立即解决,以及如何以最大程度地发挥组织潜力的方式解决这些问题。在某些组织中,你可能负责推动创新,并与产品经理合作探索新产品和新服务的机遇。

你清楚地知道自己为什么被录用,这也决定了你对设计的定义,很可能接近于:

设计是解决业务问题和推动创新的战略组成部分,同时要牢记用户的利益。

设计过程

“你的设计流程是怎样的?”这类问题在设计岗位的面试中经常被问到。根据职位的资历和面试官的经验,答案会有所不同。经验不足的设计师往往会严格遵循他们在设计大学课程或训练营中学到的流程。经验丰富的设计师尝试过之后,就会知道事情并非那么简单。

实习生

作为一名实习产品设计师,你被教导要做的首要任务是尽可能多地了解用户的痛点。你需要识别用户画像,在同理心地图上描绘他们的感受和想法,并开始思考潜在的解决方案。你需要写下一些用户故事,创建一个最小可行产品 (MVP),设计一个漂亮的原型,并为基于任务的可用性研究准备一个场景,以验证你的解决方案的可行性和可用性。

从纸面上看,这似乎很棒,但有一个问题,你很快就会(但愿不会)以艰难的方式学到它。

青少年

作为一名初级产品设计师,你开始明白,你接到的每个项目都略有不同,有时没必要把以前学到的理想设计流程的每个步骤都照搬过来。由于你经验尚浅,独立工作能力也相对较低,所以你负责的项目并不一定很复杂,很多决定都必须咨询你的资深伙伴。

此外,您经常过快地进入解决方案领域,而没有花足够的时间去了解潜在的问题、客户需求和用户的痛点。

中级

作为一名中级产品设计师,你越来越适应独自处理复杂度更高的项目。你已经意识到设计流程需要相当灵活,并根据每个项目进行个性化调整。你越来越擅长同时处理调研、写作、跨职能协作以及多个项目的像素工作。

你花在解决问题上的时间越来越少,而是先做各种练习来了解问题。

高级

作为一名高级产品设计师,你可以轻松地同时处理多个项目。你深知,理想的设计流程在纸面上看起来很棒,但在现实生活中却行不通。它被发明出来只是为了教导新设计师吗?也许吧。如果是,那它肯定有问题,而且很遗憾没有人告诉他们,一旦入职,设计流程将会大不相同。但你已经度过了这个难关,并且意识到,你花在理解问题上的时间越多,成功完成项目的机会就越大。

所以,你经常扮演侦探的角色,追踪利益相关者、用户、客户、工程师和客户成功代表,以了解全局并做好你的工作。然后,或者在此期间,你会写下这个问题,试图将其分解并提炼其核心。你会邀请非设计师与你一起进行创意构思。之后,你会使用你最喜欢的设计或 Vibe 编码工具来创建原型,稍后再与你的客户和用户进行验证。交接过程是隐形的,但你已经从本文中了解到了这一点。

项目的范围和模糊性

我在之前的一篇文章中讨论过这个领域的一些内容,主要关注为什么在晋升决策中,工作经验的年限并不重要。

项目的范围和模糊性程度与设计师的经验及其独立性高度相关。经验不足的设计师更有可能被分配到范围较小、模糊性较低的项目,因为他们尚未准备好独立做出重要决策,在类似项目上工作的时间也不够长,并且仍在学习如何提出正确的问题。

将显示缩放图像
实习生和初级设计师位于“低模糊性,小范围”象限,而中级和高级设计师则位于“大范围,高模糊性”象限。高级设计师能够处理高度复杂且不明确的项目,而实习生则从简单明确的任务开始。

实习生

作为一名实习产品设计师,你被分配到的项目模糊性较低,范围也相对较小。原因很简单。这些只是你在这个职位上的初步尝试,你仍在学习这门手艺。你不知道在哪里寻找答案,也不知道如何提出好的问题来找到答案。因此,你需要资深同事的悉心指导才能完成你的任务。

青少年

作为一名初级产品设计师,你现在迈出了更加自信的步伐,但你仍然像个蹒跚学步的孩子。范围和模糊性与上一个级别大致相同。也许范围在规模上会更大一些,但就产品经理提出的需求而言,这些需求相当明确,没有太多需要探索的地方。不过,你可以开始协助你的产品经理和更资深的同事进行一些产品探索活动。

中级

作为一名中级设计师,你开始更加独立地工作,并且在没有太多指导的情况下做出重要的决策。你被分配的项目越来越复杂,也越来越不明确。你需要进行大量的研究和探索练习,才能找到完成项目的答案,而这些项目的规模也更大,持续时间也更长。

高级

作为一名高级产品设计师,您能够轻松地做出重要的设计决策。您负责的项目往往涉及范围广泛,且非常模糊。如果您负责产品的很大一部分、整个产品,甚至多个小型产品,这并不奇怪。

向利益相关者和组织内的其他成员寻求答案是你的生计所在。你经常扮演侦探的角色,并且非常擅长串联各种线索。有时你需要处理的只是一些零散的信息,但你经验丰富,并且拥有强大的自主权,能够充分利用这些信息。

你是产品经理和技术主管的战略合作伙伴,你们共同推动产品发现。有人会说,你在寻找答案方面比其他人高出一筹,因为你正在负责的项目甚至还没有被发现。而你和产品三人组中剩下的两个人,就是为了发现这些机会。

工具

过去几年,我观察到设计师中存在一种令人担忧的趋势,他们过于注重工具。我并非唯一一个。设计师兼作家 Artiom Dashinsky 创造了“Figmaism”一词,指的是我们行业中过于关注工具和设计的视觉层面的讨论,导致我们对自身角色可能产生的影响理解肤浅。

大约一年前,在一次采访中,我问了来自

用户体验生存指南

她对这一趋势有何看法?她非常准确地指出,经验越少的设计师,就越倾向于沉迷于工具和作品的视觉效果。

虽然工具对我们的工作至关重要,但它们并非永恒不变。什么是永恒不变的?是我们的技能,例如解决问题、协调、同理心,以及从无到有创造出有意义的事物。

将显示缩放图像
工具图表说明了随着经验的增加,对设计工具的迷恋如何降低。

实习生

作为一名实习产品设计师,你大约 90% 到 95% 的时间都花在 Figma 上。它并非你真正喜欢的工具,而是一款近年来占据市场主导地位的标准应用。你对产品设计的兴趣是从 Figma 开始的吗?很有可能。剩下的 5% 到 10% 的时间则花在文档编辑器上,你会在深入研究解决方案之前尝试分解问题,而这很可能是你仍在学习的内容。

青少年

作为一名初级产品设计师,你仍然非常注重视觉设计,因此你热爱 Figma,并努力掌握它的每一个工作流程、插件和创意技巧。你大概会花 80% 的时间在这个工具上。其余的时间则分配给你选择的文档编辑器以及各种研究和分析工具,例如 Hotjar、Amplitude 和 Dovetail。

中级

作为一名中级产品设计师,你开始意识到视觉效果并非这份工作的全部,所以你减少了使用 Figma 等设计工具的时间。我估计你大约有 50% 的时间用在了 Figma 上。剩下的一半时间则用于沟通、写作、绘制图表以及其他活动,以了解客户、企业的需求和用户的痛点。你越来越多地使用分析工具。

此外,您开始对未来的设计工具感兴趣,例如 Lovable、v0 和 Replit(许多人称之为“氛围编码”应用程序),并试图弄清楚如何将它们融入到您的工作流程中。

高级

作为一名高级产品设计师,你可能有四分之一的时间花在设计工具上。与你作为实习生或初级设计师的经历相比,这个部门发生了巨大的变化。你不再过多地探索视觉方面,因为你知道,除了用户界面之外,用户体验还有许多更重要的方面。

您可能已经测试了一些氛围编码工具,并将它们纳入设计过程的构思和原型制作阶段。

您的大部分时间都花在三类工具上:白板(FigJam、Miro、Lucid)(用于主持研讨会);文档编辑器(Google Docs、Microsoft Word、NotebookLM)(用于经常戴着侦探的帽子进行大量采访);演示文稿编辑器(PowerPoint、Google Docs、Figma Slides)(用于创建幻灯片,帮助您与利益相关者和商业团队沟通您的重要想法)。

一对一会议

定期与你的直线经理会面对你们双方都至关重要。对他们来说,这需要评估你在工作和职业生涯中是否取得了进步。他们也需要这些会议来讨论潜在问题,并提供帮助来解决这些问题。对于你来说,作为一名设计师,在这些会议上讨论的需求和主题会根据你在职业阶梯中所处的位置而有所不同。近年来,我在不同的公司领导几位实习生和初级设计师时,也观察到了这一点。这些会议会有什么不同呢?让我们来一探究竟。

将显示缩放图像
一对一会议中讨论的时间视角因经验水平而异。实习生和初级设计师会寻求针对当前日常工作的反馈和指导,因此他们不会着眼于几周后的事情。中级设计师开始进行战略性思考,因此他们会讨论几个月内将要发生的事情。高级设计师则非常注重战略性,他们的眼光会远超下个季度。

实习生

作为一名实习产品设计师,你与经理开会的时间几乎百分之百都集中在你的工作上,这会影响你的成长。当然,你也在与他们建立关系,讨论一些与工作无关的话题,以保持良好的沟通水平。但由于你经验相对不足,你需要大量的反馈和工作指导。

青少年

作为一名初级产品设计师,您的主要需求与以前一样:您需要工作反馈和指导,因此在大多数时间里,您将展示您的日常项目并询问是否以正确的方式完成。

首次晋升后,你渴望更多,所以开始对中层职位感兴趣。它和你现在的职位有什么不同?我需要学习和实现哪些目标才能尽快晋升?你的直线经理可能会为你设定具体的目标,指导你获得晋升。因此,你们的一对一会面可能会用来讨论这些目标并检查进展情况。

中级

作为一名中级产品设计师,你变得越来越独立,这会影响你与直线经理的一对一会议。你不再像以前那样详细地讨论你目前的工作。战略思考越来越频繁地出现在你的工作中,所以你很可能讨论的不是团队下周的工作,而是下个季度的工作。

你开始与来自不同团队和部门的人员更紧密地合作完成工作,因此你会寻求建议,了解如何与非设计师建立联系、与利益相关者互动,以及如何与商业团队沟通,以便他们理解你(剧透:他们并不关心你的设计系统、代币或双钻流程)。你很可能已经设定了一些季度目标,并正在努力实现这些目标以保持持续增长。

高级

作为一名高级产品设计师,你比以往任何时候都更加注重战略。你很少需要花半个小时与你的经理沟通你的日常项目(如果是这样,那就有问题了,这叫做微观管理,而问题要么是你的直线经理,要么是整个组织)。你更愿意在一对一的会议中兼顾两个主要主题:战略展望和领导力。

如果你是一位资深设计师,并希望进一步发展,那么你面前有两条路可走:IC 和管理层。两者都需要一定的领导能力。如果你选择 IC 这条路,你可能没有直接下属,但你将以身作则,监督良好实践的实施。你很可能会花费大量时间与你的经理一起准备担任这些职位。

此外,如果您已经领导一个设计师团队但尚未获得正确的头衔(这在该行业中很常见),您可以报告他们的进展和团队的战略举措。

剩下的时间,你用来讨论战略。你的产品团队(如果你负责多个产品,则多个产品团队)下个季度的重点是什么?未来6到12个月,你还计划探索和开发哪些产品?你的经理应该帮助你寻找资源和人脉,以实现战略目标。

作品集:优先考虑像素而非演示文稿

杰睿 设计管理与成长

我与招聘经理和高级设计师谈论他们对设计师的要求越多,我就越支持这样的理论:作品集不应该是 X、Y、Z 案例研究,而应该是对你对细节的痴迷的探索。

深入分析你的解决方案以及你未能交付的部分,是展示你解决问题方法的绝佳方式,因为幻灯片式的解决方案并不能展现任何表面之下的东西。它只是一个面向公众的精美模型。

但是!深入研究你的粗略工作可以表明你在解决问题时确实考虑到了端到端的产品流程。

“这不起作用,因为......”是一个有趣的讨论,我知道它比与招聘经理交谈时的“这是一个流程”有趣得多。

因此,问题是:你如何证明自己对细节“痴迷”?工艺正在成为软件产品的关键差异化因素,而设计(也就是你)有能力推动这一进程。你将如何帮助这家公司突破质量界限?

好消息是,我相信这对设计师来说很有利!很多设计师都说他们做不成作品集,因为“没什么东西可展示”。但如果把作品集翻转过来会怎么样?展示你学到的东西,而不是把作品集想象成一堆摆成15度角的炫酷设备。

从单个功能中抽取单个屏幕上的单个元素。这其中涉及了多少细节?你能把每个步骤的像素级细节做到多精细?记录你的空间布局,标记所有组件,展现你的整洁,列出你如何在任务管理软件中管理这项工作,并展示 Slack 决策的截图!

-

深度挖掘的几个例子:

  1. 构建自动建议https://www.mrbrianmorris.com/work/query-formulation
  2. Spotify 更改颜色:https://spotify.design/article/better-in-black-rethinking-our-most-important-buttons

在他们决定关闭之前,该故事的一个版本最初发布在https://read.cv上。

 

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

如何使用人工智能从现有设计中生成设计变体

杰睿 用户研究

如何利用人工智能根据现有设计生成设计选项?

这是一个常见的用例:

  • 也许您认为当前的登录页面太混乱并想改进它。
  • 也许您正在进行设计,但感觉只有一个想法,并且希望有更多的设计选择来获得灵感。

然而,我在网上并没有看到太多关于如何使用人工智能来解决此类用例的讨论。

所以今天,我将逐步向您介绍一些示例,包括我使用的提示、工作流程和结果。

让我们开始吧!

概述

由于我只需要专注于前端设计,因此我使用了V0Magic Patterns进行演示。我特意选择它们是因为它们都是针对前端优化的 AI 原型设计工具。

两种工具都可以完成这项工作,但我在两种工具中都运行了同一组提示,以便您可以更好地了解它们可以实现的功能。

如果您有兴趣,您也可以在其他工具(如CursorWindsurfBolt )中运行相同的工作流程,然后告诉我进展如何。

工作流程分为两个步骤:

  • 步骤1:让AI分析设计并提出改进建议。
  • 第 2 步:要求 AI 根据其建议生成设计变体。

如果您清楚自己想要进行哪些设计改进,您当然可以将步骤 1 和 2 合并为一个简单的步骤——只需上传设计、提供您的建议,然后要求 AI 生成新的设计选项。)

我使用 Kayak.com 的顶部部分作为演示的现有设计。

将显示缩放图像
Kayak.com

问:仔细看看。你会如何设计它以不同的方式?

第一个提示

这是我放入 V0 和 Magic Patterns 的第一个提示,以及 Kayak 主页顶部部分的快照。

提供 Kayak 登陆页面的设计评论(见附件快照)。担任具有深厚 UX/UI 专业知识的经验丰富的产品设计师。KAYAK 的主要业务目标是通过为旅行者提供旅行规划工具来赋能他们。其搜索引擎会扫描各种旅游网站,提供丰富的机票、酒店、租车和度假套餐选择和价格。其主要用户是希望搜索和比较旅行选择的日常旅行者。请使用以下视角评估桌面主页:- 核心价值主张清晰
- 信息架构和易于查找关键操作
- 视觉层次、布局和空间使用
还包括 3-5 条具体的、高影响力的建议,以改善主页上的用户体验或转化率。

正如您所见,我还包括了主要的业务和用户目标——这是一个小提示,可以为 AI 提供更多设计分析的背景。

V0

V0的设计分析:

将显示缩放图像
V0的设计分析

一长串的分析,启发性十足。我大概也能从 ChatGPT 或 Claude 得到类似的结果。

(下一步是根据这些建议生成设计方案。但正如我之前提到的,实际上我也可以提供自己的设计建议,例如“当前设计缺乏清晰的视觉层次,并且留白过多。您能否生成三个设计方案来解决这个问题?”)

接下来,我要求 V0 生成设计选项:

根据以上建议,您能否为 Kayak 主页快照生成 8 种备选设计方案?Kayak 主页快照的8 替代设计选项?

正如我所料,它运行了很长时间,每个设计选项大约一分钟。因此,我点击了“停止”,并在提示中将数量从 8 减少到 3:

根据以上建议,您能否为 Kayak 主页快照生成 3 个备选设计方案?Kayak 主页快照3 备选设计方案吗?

V0 在大约 1.5 分钟内生成了 3 个设计选项:

  • 设计1:增强核心体验
  • 设计二:沉浸式英雄体验
  • 设计3:以目的地为中心的体验

设计方案1:增强核心体验

V0 描述的快照:

将显示缩放图像
V0 对设计选项 1 的描述

它生成的设计:

将显示缩放图像
V0的设计

设计方案二:沉浸式英雄体验

V0 描述的快照:

将显示缩放图像
V0 对设计选项 2 的描述

它生成的设计:

将显示缩放图像
V0的设计

设计方案3:以目的地为中心的体验

V0 描述的快照:

将显示缩放图像
V0 对设计选项 3 的描述

它生成的设计:

将显示缩放图像
V0的设计

印象

总体而言,效果令人印象深刻。我喜欢这些精致的细节。它保留了我提供的快照中的必要信息(颜色、样式、CTA)。

所有生成的设计都由具有基本交互效果的代码支持,例如输入字段交互和悬停效果。

我希望设计选项之间能有更清晰的区分。不过我也可以尝试后续的提示来解决这个问题。

魔法图案

Magic Patterns 的设计分析:

将显示缩放图像
Magic Patterns 的设计分析

有些我同意,有些我不同意。为了演示,我简单地让它生成相应的设计选项:

根据以上建议,您能否为 Kayak 主页快照生成 8 种备选设计方案?Kayak 主页快照的8 替代设计选项?

Magic Patterns 在 1.5 分钟内生成了 8 个设计选项,比我预期的要快。

由于新闻稿的篇幅限制,我在这里仅展示三种设计:

设计方案1:增强价值主张

将显示缩放图像
Magic Patterns 的设计

设计选项 2:搜索优先设计

将显示缩放图像
Magic Patterns 的设计

设计选项3:社会认同焦点

将显示缩放图像
Magic Patterns 的设计

印象

与 V0 相比,设计更加简单。

它在更短的时间内生成了更多的设计,这很棒。

我很喜欢它的“导入 Figma”功能。我可以将生成的设计导入 Figma 进行进一步编辑。

此外,它还有一个Chrome 扩展程序,可以让我把网页转换成 React 组件或 Figma。虽然不完美,但我对它的功能非常期待。

 

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

产品设计的未来

杰睿 设计管理与成长

用户体验设计:如何设计有效的“第一次触发”?从 Push 到页面设计

杰睿 设计管理与成长

 

——基于《Hooked》模型的用户激活交互思路
 

一、什么是“第一次触发”?为什么它决定了用户的去留?

在《Hooked》一书中,作者提出“Trigger”是促使用户行动的第一步。触发可以分为两种:
外部触发:例如 App 推送、广告、链接、好友邀请
内部触发:用户自己产生的动机,比如焦虑、孤独、空闲、好奇等情绪
“第一次触发”通常指的是用户首次接触产品的关键时刻,也是我们设计中用户激活(activation)环节的核心。很多产品在吸引用户下载后,没能成功完成这一步,导致高流失率。
那么,如何让用户在第一次接触产品时就“被打动”,甚至开始“动手”?这是交互设计师无法回避的挑战。

二、Hook 模型下的第一次触发路径

我们可以将“第一次触发”的设计过程,拆解为一个 Hook 的微循环:
swift
复制编辑
外部触发(推送/链接/内容)→ 用户行动 → 变动奖励 → 微投入
设计的关键在于:
触发是否准确命中动机
页面是否降低了行动成本
是否提供足够正向反馈,激励用户进入下一步

三、实际场景中,“第一次触发”都可以怎么设计?

下面以两个典型路径为例,展开设计思路。
  1. 从 Push 到行动:信息即引导
场景:用户安装 App 后首次收到推送通知 
目标:提高用户点开并进入 App 的概率

设计策略:

情境感知:比如早上推送“为你准备了 3 条晨间资讯”,中午推送“你关注的咖啡店正在打折”。
视觉引导:通知样式带有关键词高亮、情绪词汇、数字诱因(“3 条”、“50%”等)。
即时性奖励:如“限时免费”、“首次点击得积分”。

示例对比:

普通推送文案:
“你有新消息,点击查看。”
优化后:
“你的新客户留言了:点击 30 秒内回复可得 50 积分!”
用户动机 + 奖励机制 + 时间紧迫感 = 有效第一次触发
  1. 首屏设计:默认就是最好的引导
  2.  场景:用户打开 App 或首次访问页面 
  3. 目标:促使用户完成关键行为,如注册、收藏、浏览首个内容

 设计策略:

将用户动机前置化:如图文内容带标签“为你推荐”、“同城热门”
提供默认建议:如自动生成 3 个关注推荐,不让用户空白加载
弱引导行动按钮:如“我想试试看”、“点这里获取专属内容”,代替“立即注册”

小结:

元素 常见问题 设计优化
空白状态 “你还没有收藏内容” 提供推荐 / 模拟数据
注册页面 信息太多 / 提示太弱 三步注册 / 支持游客试用
首页内容 冷启动/无吸引力 动态推荐 + 情境触发设计

四、设计师如何判断触发设计是否有效?

✔ 指标层面

激活率:App 下载后次日留存 / 完成注册 / 触发首次行为的用户比例
首触转化率:触发内容点击后进入行为的用户比例

✔ 用户层面

用户是否在无需帮助的情况下完成操作
用户是否表达出“被内容打动”的情绪反应(通过反馈/行为路径观察)

第一次触发,决定了第一次信任

“第一次触发”的设计不只是营销或产品经理的工作,它是交互设计的前哨战
从文案到页面布局,从通知到首屏,一切都在为用户“做决策”而服务;
要问的不是“设计美不美”,而是:“用户有没有动起来?”
Hook 模型里,触发只是起点,但它决定了是否进入循环的门槛。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

AI工具+AI流畅度+人类优势=AI原生设计师

杰睿 设计管理与成长

AI工具+AI流畅性+人类优势

作为一名产品设计师,我最近一直在努力理解快速变化的人工智能格局,既感到敬畏,又感到困惑。Anthropic的首席执行官警告称,人工智能可能会取代高达 50% 的入门级白领工作,而 Zapier 的首席执行官则谈到招聘精通人工智能的人才。与此同时,“模型设计师”等新职位正在涌现,行业正在迅速向更多超级 IC 职位转变。

随着人工智能重塑我们的工作方式,我一直在问自己,这不仅关乎如何保持相关性,还关乎如何在我的工作中不断成长并找到乐趣。

据我所知,新的转变需要利用三个领域

  1. 人工智能工具:组装不断发展的人工智能设计堆栈以快速交付
  2. 人工智能流畅性:学习如何设计概率系统
  3. 人力优势:加强工艺、自主性和判断力等护城河,保持领先于自动化
  4. 这些支柱与战略思维和以人为本的技能相结合,塑造了我们成为AI 原生设计师的道路
Open AI cookbook 中的 AI 产品堆栈和提示结构

1. 人工智能工具

人是制造工具的动物——本杰明·富兰克林

本杰明·富兰克林的定义强调了人类在发明和使用工具来扩展自身能力方面的创造力。如今,人工智能标志着这一进化的飞跃,从手动工具到智能协作者。

速度不再是可有可无的。ProcessMaker的产品团队从每年两次交付到每两周交付一次。Figma的《设计现状报告》(2025)指出,近七成的设计团队(68%)经常使用人工智能来自动化线框图绘制、生成视觉资产并分析用户反馈。

随着人工智能逐渐融入日常工作流程,设计工具显然变得越来越积极主动,既提高了速度,又增强了想象力。

构建一个反映你的技艺的堆栈

你的设计栈取决于你作为设计师的身份。用户体验研究员的设计栈与全栈产品设计师、对话式AI设计师或视觉艺术家的设计栈截然不同。没有放之四海而皆准的方案。

在过去的六个月里,我尝试了 60 多种 AI 工具,追逐每一个新的自动化更新和闪亮的产品发布。然而,事实是,我的工作流程中几乎所有东西都只运行在四到十种工具上,正如我的 AI 产品设计栈所示。

因此,真正的价值在于有意识的尝试。尝试新工具,不是因为它们流行,而是因为它们可能会在你的工作流程中解锁更好的功能。问问自己,有没有更智能、更快速、更周到的方法来做到这一点?

此外,人工智能工具正在快速发展,但设计的艺术依然是人类的。决定做什么以及如何使其卓越,仍然取决于品味、判断力、技艺和你的工具包。正如设计领袖阿古斯丁·桑切斯 (Agustín Sánchez) 所说“你之所以优秀,并非因为你了解最新的工具。你之所以优秀,是因为你知道如何运用它们。”

提示作为一项核心技能

去年,我多次发现自己觉得人工智能的输出很平庸,后来我意识到问题往往不在于模型本身,而在于我设计提示的方式。拥有正确语境的人工智能模型能够提供生成有意义响应所需的信息。

转变视角,将人工智能视为合作者,并学习如何构建上下文,彻底改变了我的输出质量

“提示就像是让人工智能加速,或者将其推向正确的方向。”——约翰·前田 (John Maeda)谈领导者如何利用人工智能释放创造力

亚历克斯·克莱因 (Alex Klein) 提出了一个令人信服的论点,即提示从根本上来说是一种设计活动,涉及以清晰度、背景、语气和意图来设计对话。

如果您想提高提示技巧,这些资源是一个很好的起点
Google 提示要点
IBM — 提示工程指南
OpenAI — 提示指南

AI流畅度工具包

2. 人工智能流畅性

AI 流畅性是指能够自信地设计和使用意图驱动、分层和概率系统的能力。对于产品团队而言,这意味着理解 AI 的潜力,应对其复杂性,并做出明智的决策,从而带来负责任且有影响力的成果。

GUI 界面要求用户通过点击、滚动和菜单导航来实现目标。相比之下,代理系统则通过关注基于意图的结果,为我们提供了一种与系统交互的新方式。

现实世界中的人工智能产品涉及编排、内存、工具集成、用户体验模式和代理流程。流畅性意味着要掌握系统的行为——它的可变性、它的故障、它出现错误或误用的可能性,并在设计时充分考虑这些动态因素。

人工智能流畅性的构建模块

AI 设计工具包

  • IBM 的GenAI 设计原则为生成式 AI 用户体验 (UX) 制定了六项基础设计原则。每项原则都配有设计策略和实际案例,以帮助从业者有效地实施它们。
  • 谷歌的“People+AI” 计划强调了设计人工智能交互时需要考虑的四个关键领域。该框架为设计有效的人工智能交互提供了宝贵的指南。
  • 我还构建了一个简化的指南,其中包含20 多个 GenAI UX 模式的示例和实施策略
理查德·巴赫这本经久不衰的著作敦促工匠们拥抱现代工具,专注于目标而非墨守成规。米哈尔·马莱维奇阐述了“人工智能平均线”,并鼓励创意人士突破这条线,追求伟大的创意。

3. 人类优势

借助 GPT-4o 和 Veo-3 等模型,AI 现已能够快速生成高质量的文字和视觉效果,并在许多领域超越人类的技能和推理能力。真正的问题是——

我们人类独有的优势还剩下什么?

工艺比以往任何时候都重要

AI 模型基于海量数据集进行训练,反映的是主流模式而非任何独特的视角。因此,它们的输出往往显得千篇一律,缺乏主观细微差别的深度,例如个人风格、洞察力、叙事意图和创意原创性。设计师Michal Malewicz用“ AI 平均线”的概念捕捉到了这一现象,并将当今的创意格局描述为乏味的时代”,充斥着千篇一律、缺乏灵感的 AI 输出。

讽刺的是,这种丰富性反而提高了标准!

此外,历史表明,尽管新工具层出不穷,叙事、审美判断和执行质量等基本技能仍然至关重要。正如 Photoshop 并没有扼杀平面设计一样,拥有 AI 的共同创造者并不会否定对技能的需求,而是会改变它。

理查德·森内特在其著作《工匠》中强调,工具在不断发展,但技艺和精湛技艺的精髓始终是核心,也是区分真正专家的关键所在。他敦促工匠们拥抱现代工具,并专注于目标而非墨守成规。

创意方向、代理和保持人力掌控

我们定义目标、设定约束并做出为人工智能指明方向的高层决策。

随着速度和质量的不断提升,争论的焦点不再是人类与人工智能的对决,而是我们寻求何种合作。在这种新的动态下,设计师不再只是创造者,而是提供创意方向、愿景和目标的人 设计师逐渐成为创意总监或统筹者,而人工智能则扮演着助手、创意伙伴,甚至是评论家的角色。

Julie Zhuo 强调了自主性的重要性。即使人工智能与我们的技能、能力和品味相匹配,我们选择为何以及在何处应用人工智能技能的能力仍将受到价值观、意图和新兴目标的驱动,并且仍然具有人类的鲜明特征。

例如,两位设计师使用相同的AI工具,可能会得出截然不同的结果。一位设计师可能会让AI为一家气候非营利组织探索极简主义的布局,而另一位设计师则用它来为一家儿童教育初创公司生成充满趣味、富有表现力的视觉效果。差异不在于工具本身,而在于引导它的人类价值观和意图。

世界经济论坛概述了 2030 年的四个类别:新兴技能、非焦点技能、稳定技能和核心技能

4. AI原生设计师

那么,成为一名AI原生设计师意味着什么?仅仅掌握AI工具和技术就足够了吗?还是在这个新领域,还需要更深层次的技能?

世界经济论坛显示,2030年最紧俏的技能不再是技术性技能。随着自动化改变工作方式,雇主更看重战略性、以人为本的能力,例如分析性思维、创造性思维、技术素养和韧性。

正如Fabricio Teixeira 指出的那样,即使在技术快速变革的时代,设计、协作和沟通的基础仍然是设计生涯的永久支柱,并且比任何工具都更持久。

与此同时,“超级集成电路”角色的出现正在重新定义高级设计职业,因为许多公司正在积极支持实践领导道路,重视深厚的专业知识、质量和高杠杆贡献,而不是传统的人员管理。

随着创作速度越来越快、触手可及,设计师真正的新护城河如今在于打造独特、可靠且令人难忘的AI体验。掌握设计原则、叙事能力和解决问题的能力仍然是人类独有的强项。

 

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

存档