首页

人工智能的未来不仅仅在办公室,还在工作现场

杰睿 行业趋势

人工智能可以为重要的一线工人创造经济流动性——以下是产品制造商如何转变我们的思维以涵盖这些体验

作者:乔恩·弗里德曼

关于人工智能的讨论通常集中在其对白领工作(知识型工作、办公室生产力、创造性工作)的颠覆性潜力上,但很少有人讨论人工智能将如何彻底重塑技术工人和一线工作。作为设计师,以人为本的视角意味着不断探索新领域,不仅从技术层面,也从人性的角度。

如今,我们在赋能信息工作者方面拥有卓越的成就,在迈入人工智能时代之际,我们正积极发扬这一传统。展望未来,我也看到了人工智能优先体验的巨大潜力,这些体验有助于为支持社会最基本系统的人们创造经济增长和流动性。构建和维护我们物理系统的是电工、钢铁工人、管道工、运输工人等等。支持我们人类系统的是教育工作者、儿童保育人员和护士等至关重要的工作者。至关重要的是,几乎所有这些职业都面临着严重的人员短缺,求职者数量也在不断减少。

精心设计的人工智能体验或许有助于有效解决这个问题,尤其是在融入整体方案时。随着我们拓展产品方面的思维,Microsoft Elevate 和人工智能经济研究所——我们企业慈善事业的下一个篇章——正在帮助确保人们在人工智能改变世界的过程中不会被遗忘。他们致力于为人们提供技能、知识和工具,让他们能够与人工智能共同发展,这体现了微软的信念:人工智能应该服务于每个人,包容性设计与包容性机遇相辅相成。

人工智能发展的惊人未来:一线工人

有表格可以帮你!减少官僚主义的复杂性

人工智能系统需要庞大的物理基础设施,而随着我们构建越来越大的人工智能系统和数据中心,能源需求也随之飙升。谁来满足这一需求呢?技术工人:负责布线的电工、建造冷却系统的管道工、以及建造承载人们数字梦想的钢铁工人。

然而矛盾的是,正当美国对专业电工的需求达到前所未有的高度时,美国却面临着熟练电工的短缺。

迫切需要吸引高中毕业生直接参与带薪学徒项目——承诺稳定、高薪的职业,且无需承担学生贷款的负担。这一需求为人工智能设计提供了一个清晰而强大的用例:简化从学校到学徒再到熟练工的复杂路径。人工智能解决方案可以简化流程、时间表、表格和认证,从而加速职业发展并促进经济流动性,惠及个人、家庭乃至整个经济。

人工智能是积极的合作伙伴,而不仅仅是另一个被动工具

想象一下,你是一名刚入行的电工学徒,踏入第一个复杂的工地。熟练工们辛勤工作,确保项目顺利推进,但工作节奏之快,让你很难停下来,实时解答每个问题。这时,人工智能就派上用场了——它并非取代经验丰富的电工的指导,而是为其提供支持。使用你的智能手机,人工智能助手可以直观地识别问题,并根据经验丰富的熟练工处理过的数千个实际场景,提供即时实用的建议。这就像在你的口袋里多了一个额外的支持——人工智能就像一个亲自动手的助手,可以强化你的学习,并增强你的工作信心。

这不是理论上的未来主义。而是实用且可扩展的人工智能设计,能够直接提升一线员工的生产力,加速学习,提升效率,并更好地保障安全。一线工人的工作通常需要体力劳动,有时甚至很危险,并且可能需要在不可预测的环境中连续工作10到12个小时——仅在美国,每年就有近100万起制造业伤害和卡车事故。这不仅会影响工作效率,背部受伤或手指缺失还会给整个家庭带来持续的经济困境。

在这种情况下,知道自己并不孤单不仅能增强信心、帮助你在工作中表现出色,还能让你相信下班后能安全回家。

通过以人为本的人工智能设计重建信任

除了人身安全之外,信任也是一线工作另一个方面的关键因素:科技的优势和前景。例如,护士基于过去的经验,对数字技术持怀疑态度,这是可以理解的。二十年前,他们被承诺电子病历 (EMR) 将积极改变他们的工作流程。然而,EMR 主要惠及的是管理人员、保险公司和技术供应商,却让护士承担了额外的繁琐工作,减少了与患者的面对面互动,并降低了他们对技术承诺的信任。

如今,这种怀疑依然挥之不去,其根源在于人们认为科技往往优先考虑企业效率或盈利能力,而非一线员工的实际需求。护士和许多其他技术专业人员理所当然地怀疑,人工智能能否真正帮助他们,或者历史是否会重演。人工智能未来的成功不仅取决于其强大的技术能力,还取决于我们能否重拾并维持信任,尤其是那些曾因技术前景而失望的人们。

解决这一怀疑的唯一可行方法是真正以人为本的产品设计。

前进的道路需要认真倾听一线员工的心声,深入了解他们的日常问题,并共同设计能够带来切实效益的解决方案。优秀的设计,真正植根于用户同理心和实际效用,不会将业务目标与员工需求对立起来,而是有效地协调和平衡两者。作为产品制造商,我们的工作就是实现这种平衡,确保人工智能工具不会为了技术而强加于员工,而是以协作、透明和同理心的方式进行开发。

下一波产品设计浪潮

以不同的方式思考要完成的“工作”

为了兑现这一承诺,我们需要重新构建我们的设计方法和假设。以“待完成工作”(JTBD)为例,这是一个用于理解用户问题的通用设计框架。从历史上看,我们通常将“工作”理解为更具体的行动,通常是通过信息工作(IW)的视角。要让所有员工都能用人工智能赋能,就需要超越表面行为,关注通常位于马斯洛需求层次更高层次的人类需求。

以年度绩效评估为例,无论你是送货司机还是设计师,都会进行绩效评估。通常,员工会填写一份表格,经理们会用这份表格来讨论职业发展。如果我们认为 JTBD 就是“填写表格”,我们就会设计一个 AI 解决方案,让填写表格变得更容易;也许你只是把想法写进表格,然后 AI 会赋予它们结构和更优美的措辞。如果我们意识到真正的 JTBD 是促进有意义的对话,我们就可以设计一个主动的 AI 代理,嵌入到日常工作流程中,让你和你的主管在职业发展对话开始前几周做好准备。该代理会帮助整合你的成就(包括你可能已经忘记的成就),提供相关的反馈,提出富有成效的谈话要点,然后促成一场引人入胜的对话——所有这些都将显著提高效率、增强意义,并减少事务性。

这种设计首先以最终用户的需求为中心,而不是为了满足需求而创造技术解决方案。虽然产品制造商经常与技术工人(FLW)打交道——比如你孩子的老师、你诊所的护士,或者你刚刚急需联系的水管工——但我们的工作性质截然不同,因此,共同设计以识别任务背后更深层次的需求尤为重要。

以不同的方式优先考虑多式联运场景

虽然多模式场景对许多信息工作者来说令人兴奋,但对一线工作人员来说,它们的影响远为关键。视觉捕捉白板笔记与向在雨夹雪中行驶的卡车司机发出迎面而来的车辆信号有着截然不同的意义。为运输工作者设计的以视觉为中心的输入和输出体验必然会极其灵敏、细致和准确——从而为现场物流工作者和信息工作者带来显著更好的体验。

从设计的角度来看,由于一线岗位高度的体力劳动和对话性,人类活动的范围更加广泛。虽然所有专业领域都推动着经济发展,并且意义深远,但未能满足一线工作者的需求会立即对社会各阶层产生深远的影响。通过将通用设计原则应用于针对这些更为极端和关键状况的多模式解决方案,我们正在创造惠及每个人的体验。

转变端到端工作流程

人工智能的更广阔潜力不仅在于实现任务自动化,更在于积极赋能人类,创造全新的途径和工作方式。这种潜力远不止于办公室,还涵盖教室、医院、建筑工地、交通系统等等。

例如,我们采访过的教育工作者已经看到人工智能深深嵌入到他们的课堂中,最初是由学生的采用推动的,但现在正在改变他们创建和教授课程的方式。

护士和医护人员同样利用人工智能来更有效地管理患者护理。

微软对 Microsoft 365 Copilot 等工具的愿景正是基于这一新现实:设计能够实时理解、预测并适应人类需求的智能系统。在我们重新构想整体体验的过程中,协同设计的一部分在于重新思考如何通过智能设计来衡量、定义和实现生产力。通过不再使用人工智能来自动化当前任务,而是从根本上重新思考任务本身,我们可以优先考虑最重要的事情:人际关系、快速学习、经济赋能和有意义的工作。

一种新的端到端思维

端到端体验通常指整个产品生命周期。当我们思考产品将存在于的世界时,需要一种不同的端到端思维。教育行业在整体思考经济增长时,通常采用“从摇篮到职业”的思维模式。讨论的重点并非仅仅放在教育隧道末端的工作岗位上,而是从幼儿教育开始,然后是K-12和高等教育途径,包括高等教育和带薪学徒制,最终是维持生计的工作岗位。

考虑到这些关键岗位的严重人员短缺,产品制造商的端到端思维应该包括引发关于如何最好地引导人们进入这些职业的讨论。像领英这样数据丰富的平台可以通过展示热门岗位、规划基于技能的职业发展路径,以及为有抱负的工作者(无论是高中生还是转行者)提供学徒计划、认证和导师支持,使一线职业发展路径更加清晰易懂、易于导航。通过将这些洞察融入产品设计,我们可以用全新的端到端思维,全面支持关键职业发展。

归根结底,下一代人工智能不仅仅是数字化的;它是切实的、交互式的、主动的、并且高度人性化的。对于人工智能设计师和产品创造者来说,我们的使命从未如此清晰:广泛、深入且人性化地重新定义生产力。在微软,这是我们的承诺——不断改进我们思考和构建全球最具影响力的人工智能工具的方式,确保从电工和教育工作者到设计师和商业领袖,每个人都能在这个新的现实中蓬勃发展。

 

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

【原创】交互设计案例分享:资源库网站设计

杰睿 交互设计及用户体验

 

项目背景:

随着生态保护意识提升,青海丰富的鸟类资源亟待数字化呈现与科普推广。为打破信息分散壁垒,助力科研、生态教育及观鸟爱好者交流,客户想要造青海鸟类资源库网站,以专业、直观、易用的 UI 设计,串联鸟类数据、科研成果与公众认知 。
该项目是与青海师范大学合作的[青海鸟类资源库]网站交互及UI设计,青海师范大学是我们的老客户了,本次项目我们也是从前期的内容整理归纳、交互原型设计、UI设计,再到最后的客户后期的开发还原度走查工作,最终实现的效果也获得了客户的认可。

项目概述:

产品定位:聚焦青海鸟类生态,打造集科普教育、科研辅助、观鸟互动于一体的数字化平台。既为专业学者提供精准数据检索、学术成果展示窗口,也向大众普及鸟类知识、传播生态保护理念,成为青海鸟类生态对外展示的 “数字名片” 。
目标用户:需求精准数据查询、学术成果沉淀与共享,关注知识图谱、文献列表等功能模块的科研学者;热衷鸟类科普、观鸟活动,期望通过直观界面了解物种、观测历程的生态保护爱好者;以轻松方式接触生态知识,侧重可视化展示(如地图分布、演化流程)与趣味互动(评论区、相关鸟类推荐 )的普通公众。
设计风格:色彩以青海地域元素为灵感,蓝天、雪山、湖泊蓝白渐变打底,搭配鸟类羽毛自然色调,营造清新、贴近自然氛围;布局遵循 “信息分层、高效浏览” 原则,大模块分区清晰,用卡片式设计承载内容,既保证视觉呼吸感,又通过微交互增强科技感与操作流畅性
 

设计亮点与价值:

知识图谱可视化:以鸟类为核心,关联栖息环境、食物链等信息,通过动态交互图谱,让用户直观理解物种生态关系,打破知识传播壁垒;
精准服务多元需求:为学者设计文献检索、数据统计模块,支持高效科研工作;为爱好者打造观鸟圣地推荐、实时评论互动,构建交流社区;为大众简化信息层级,用大图、短文案、轮播展示核心内容,降低科普门槛。
品牌与生态共鸣:通过统一视觉语言(如 Logo 融入鸟类形态、底部生态友好链接),强化 “青海鸟类保护数字阵地” 品牌认知,让用户在浏览中自然产生生态守护认同感,助力青海生态文化传播。
 
 

分析 128 家科技公司的标志我们发现了什么

杰睿 设计思维

阿蒂奥姆•达辛斯基

几年前,我需要为客户设计一个标志,但却找不到一个拥有设计精良、相关标志的好地方来激发灵感。

所以当时我创建了Logggos——一个拥有约 1,000 个科技公司、代理商和 DTC 品牌精选徽标的网站。

我还分析了 128 个科技/SaaS 公司的标志,以了解他们使用的字体、结构和形状。

我很快收集了下面的结果,展示了什么让标志感觉“科技化”(如果你想实现或避免这种外观)。

标志结构

72% 的 Logo 使用图标 + 文字

21% 仅使用文本,6% 仅使用图标。

30%带有图标的徽标在图标中使用其名称的首字母:

33%使用基本形状 - 正方形,圆形,三角形等。67
%使用图形复杂形式(例如箭头,波浪):

空 = 复杂形状(例如箭头、波浪)

排版

93% 使用 Sans-Serif 字体系列:

虽然SerifSerif-SlabScript字体在 DTC 品牌中非常常见,但在科技标志设计中它们却非常罕见。

字体案例

全部小写(“gusto”):42%
标题大小写(“Gusto”):48%
全部大写(“GUSTO”):10%

过去几年,从全大写改为标题大小写或全小写已成为一种趋势。沃尔玛、史泰博、AT&T、Tand 等大公司都放弃了全大写。万事达卡和费雪等品牌也从标题大小写改为全小写。看来科技行业也出现了类似的趋势。沃尔玛、史泰博、AT&T、Tand 等大公司都计划放弃全大写万事达卡和费雪等品牌已将标题大小写改为全部小写。看来科技行业也出现了类似的趋势。

100% 的双词名称单词之间没有空格

(例如 NetSpring 而不是 Net Spring)

我们调查的公司中,有 30% 的公司名称由两个单词组成。所有使用两个单词的公司都选择不在其徽标中拆分单词(例如 NetSpring 和 Net Spring)。这与那些喜欢拆分单词的消费品牌(例如 Fresh Sends)有所不同。

51% 的标志是黑色

抱歉,图表饼图的颜色与名称不匹配:)

当品牌选择颜色时,最受欢迎的颜色是:蓝色(18%)、橙色(10%)和绿色(8%)。

这是与消费品牌的另一个不同之处,与科技公司相比,消费品牌更有可能在其标志设计中使用颜色。

 

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

打造高影响力产品的 5 步 AI UX 策略

杰睿 设计资源

在打造推动客户实质性改进的 AI 体验时需要考虑的战略因素。

图文并茂:AI UX 手册 — 5 步打造卓越用户影响力

每个人都在争相打造 AI 体验,但产品真的能达到预期效果吗?作为用户体验领导者,掌控产品方向是我们的荣幸。这意味着我们要思考 AI 如何在用户体验中呈现,以及它对用户的实际意义。

启动变革性人工智能的秘诀

仅仅拥有AI功能已经远远不够了。AI成本高昂,如果执行不力,还会给用户带来更多不便。其他设计师和技术人员之前也曾抱怨过这个问题,所以我就不再赘述了。那么,作为一名用户体验领导者,你该如何才能更好地定位你的公司和团队,从而有效地推出AI技术呢?

  1. 出于正当理由
  2. 组建你的 AI A 团队
  3. 了解你的工作内容
  4. 奠定基础
  5. 共同塑造未来

第一步:出于正确的理由

回归本源

不要仅仅为了 AI 而构建。要识别用户最紧迫、最普遍的问题。需要注意的危险信号:

  • 产品主题或计划应以“为我们酷炫的产品线打造生成式人工智能聊天机器人”之类的形式呈现,而不是“利用人工智能简化我们酷炫产品线的客户工作流程”
  • 该组织正在寻找将 AI 添加到产品中的方法,而不是识别可以通过 AI 提高 10 倍或 100 倍的体验缺陷或手动交互

与产品负责人、业务利益相关者和客户拥护者进行交流,探讨如何推动变革。与客户沟通,了解他们的工作方式,并提供可靠的数据来验证你的假设。

人工智能是正确的选择吗?

好了,你确定了主要问题,但人工智能真的是正确的方法吗?数字公共服务中心的评估报告《人工智能是否是正确解决方案》提供了一些指导,可以帮助你入门:

  • 所需的数据充足且使用安全合乎道德
  • 任务规模较大重复性较强
  • 有助于在现实世界中取得成果

来到耶稣面前的时刻

如果人工智能很合适,答案不应该总是聊天机器人,但很多公司却这么认为。如果你的公司也这么认为,那么你还有很多工作要做。首要考虑因素应该是价值,而秘诀在于组织对价值的认同。

定义贵组织的AI 愿景和目标——参考 Thrive 文章《如何创建 AI 愿景声明》中的建议,共同制定愿景和目标。运用 AI 技术,增强用户体验 (UX) 或产品团队的目标声明。

第 2 步:组建你的 AI A 团队

确定可以支持您的团队及其 AI 计划的联系人。

  • 客户拥护者——找到与客户有直接联系的人
  • 最终决策者——了解批准计划并签署支票的领导者,正如他们所说
  • 关键影响者——找出对人工智能充满热情或组织内值得信赖的顾问
  • 主题专家——了解您的团队需要咨询哪些专家
  • 执行功能——找到拥有合适技能的团队成员来实现你的愿景
AI A 团队矩阵(客户拥护者、最终决策者、关键影响者、主题专家和执行职能),详细说明每个人的重要性、示例角色或头衔、他们如何提供帮助等
与你的 AI A 团队建立关系对于你的 AI 之旅至关重要

虽然您可能没有能力动员这些同事或工作伙伴,但建立联系并寻求建议仍然有助于进一步推动您的计划。

在整个组织内培养关系对于让你被看到并建立信任非常重要。

获得认可并引起轰动

在这个部分,您需要进行认真的、有时可能令人不快的对话,以通知、协作、获得批准或召集 AI A 团队的各个成员。

  • 在整个组织内传播愿景
  • 验证发现、决策等
  • 协调行动项目和后续步骤
  • 让人们对愿景和人工智能之旅感到兴奋

步骤 3:了解您正在处理的内容

引导您和您的团队更好地了解您正在建设的环境。

衡量产品智能成熟度

您的组织或产品在智能化道路上处于什么阶段?您是从零开始,还是只实现了少量自动化,还是已经拥有许多 AI 功能?这里需要考虑的重点是当前状态,而不是路线图或理想的未来。

产品智能成熟度规模:手动工作流程、业务逻辑自动化、机器学习和狭义人工智能
简化的产品智能成熟度量表
  • 手动工作流程——完全没有自动化
  • 业务逻辑自动化——特定功能的静态业务规则
  • 机器学习和狭义人工智能——仅限于特定任务的卓越能力
  • 通用人工智能和超级人工智能——未纳入该范围,因为它们仍处于理论阶段

通过大致了解您的组织所处的状况,您可以确定您的组织为了实现愿景必须达到的成熟度级别。

评估平台技术准备情况

UI 的底层隐藏着什么?它是否采用了合适的技术架构来支持 AI 开发?在真正投入 AI 工作之前,你需要解决多少技术债务?

在架构师和开发人员的帮助下,您的团队可以全面评估您的平台的定位。虽然我不推荐 Domo,但他们有一篇很棒的文章《AI 就绪性:评估您的业务的完整指南和免费清单》,您可以参考。

  • 基础准备——包括基础设施平台、数据源和软件包
  • 运营准备——包括指导方针、人员配备、治理、合规性和风险

了解这一点可以告诉你,你的努力是否会实现、是否会被推迟,或者是否会徒劳无功。

第四步:奠定基础

指导工作的是什么

定义AI 设计原则,打造富有影响力的用户体验。您可以从 VUX 的AI 设计原则中找到灵感。通过补充和完善概念的原则,强化既定的 AI 愿景和目标。

设计师的驱动力

不断提升您的 UX 实践以提供完善的 AI非常重要。

  • 确保您的团队掌握最新的设计最佳实践,例如Maria Margarida 撰写的《使用 AI 进行设计:用户体验和最佳实践》这篇文章
  • 在自己的设计工作流程中积极使用人工智能,亲身体验人工智能,并通过实践获得见解
  • 定期互相分享提示、资源和学习成果
  • 做好你每天要做的事情——磨练用户体验专业知识,改进研究和设计实践,并定期与客户互动

是什么让团队继续前进

与工作伙伴保持定期沟通并遵循最佳实践。

  • 知道何时让参与
  • 建立异步渠道和会议节奏

经验告诉我们什么

您的团队是否渴望开始深入研究数据?对于注重工程设计的组织,或者为了实现并行方法,您的团队也可以专注于数据准备。您可以先清理和准备一些基础数据集,以及一些您认为能够带来价值的专业数据集:

  • 帐户和用户数据
  • 记录应用程序和传感器数据
  • 所需第三方的 API
  • 元数据和标签

通过清理信息并将数据输入 AI 模型,您仍然可以在现有路线图上开展工作,同时为 AI 计划取得一些进展。这样,您就可以在对现有数据集执行深度学习关联时让数据为您提供指导,从而进一步研究特定经验用例。

第五步:共同塑造未来

AI交互模式

要利用 AI 解决客户问题,团队必须仔细思考 AI 如何在系统中运行,以及它将如何影响用户体验。请使用下方矩阵来指导讨论和决策。

  • 参与——要求与人工智能进行主动、明确的互动
  • 嵌入式——精心策划的集成 AI 体验
  • 隐形——用户无法与人工智能直接互动
AI 交互模式矩阵,突出显示参与、嵌入和隐形模式的属性
用于战略讨论的人工智能交互模式矩阵
Microsoft Copilot 参与式 AI 交互模式示例的 GIF
参与式 AI 交互模式示例——Copilot 的语义索引
Microsoft Copilot 嵌入式 AI 交互模式示例的 GIF
嵌入式 AI 交互模式示例 - 使用 Copilot for PowerPoint 重写

真正的用户倡导者提出的问题

  • 这会增加用户的交互需求吗?会增加多少?付出的努力是否值得?
  • 这将对我们的客户的生活质量产生哪些具体的影响?他们是否有能力或意愿付费来实现这些收益?
  • 实施这一举措是否需要客户采取额外的措施?扩大规模后,还需要付出多少努力才能保持这种模式?

通过令人信服的研究综合做出决策

确保不错过任何机会,分享在探索过程中、通过用户反馈或分析所获得的经验。及时向业务和产品利益相关者汇报研究结果,确保路线图的优先事项得到数据支持。

可视化路线图里程碑

用户体验团队还可以通过有效的可视化,在帮助利益相关者更好地确定工作优先级方面发挥关键作用。与产品经理合作,模拟代表最终愿景、第一步以及最终实现之前的几个中间阶段的英雄体验,这些体验可以映射到交付时间表和阶段。

衡量影响

确保你能定量和定性地衡量结果。包括领导层的投资回报率 (ROI) 和产品团队的关键绩效指标 (KPI)。虽然我不推荐这些方法,但Arounda 的《人工智能用户体验:完善人工智能产品指标的 10 个技巧》提供了很好的例子:

  • 用户参与度、用户保留率
  • 转化率、采用率和使用率
  • 效率和生产力

底线

如果您已经为客户提供了良好的服务,那么打造高影响力的 AI 体验应该轻而易举。但陷阱在于,组织对 AI 愿景或目标的看法不一致,以及您的产品技术能力尚未为 AI 做好准备。作为一名设计领导者,您拥有独特的优势,只需稍加挖掘、拓展人脉,并打破常规思维,就能引领变革。

步骤:1. 出于正确的理由去做 2. 组建你的 AI A 团队 3. 了解你的工作内容 4. 奠定基础 5. 共同塑造未来
TLDR:打造高影响力产品的 5 步 AI UX 策略手册

进一步阅读

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

谷歌全新 Material Design 的“Expressive”设计

杰睿 行业趋势

谷歌刚刚在上周的Android Show上发布了 Material Design 的一项最大更新,这让我这个 UX 设计师感到非常兴奋(同时也有点担心),因为它正在发生着变化和发展。

谷歌 Material Design“Expressive”设计预览

谷歌 (OOGLE) 最近对其现有的设计语言和系统进行了大规模升级,用于为全球数十亿用户构建应用和产品。此次更新包含许多有趣的新效果和风格,但最重要的是,它凸显了公司在用户体验方面的思维转变。

让我为您总结一切,并展示这将如何为空间带来新的设计趋势。

有趣的元素、按钮和控件

Material Design Expressive 中的趣味元素

如果你觉得之前的 Material Design 已经不遗余力地让元素看起来更有趣了,那么这次的更新绝对更上一层楼。从形状相互转换的创意加载器,到随处可见的滑动条,这次更新将为设计师提供丰富的选择和自由度,让他们尽情发挥创意。

不一致是关键?——这是我在 Android Show 上注意到的!作为设计师,我们通过网站和应用程序宣扬一致的设计,然而 Material Expressive 却打破了大量规则。

  • 标签现在会改变形状以突出显示并显示高亮状态。
  • 浮动菜单现在具有可变的宽度来容纳其内容,而不是一个一致的宽度。
  • 扩展的形状库可以为部分或按钮增添乐趣。
  • 在屏幕上的同一空间内使用可变的边框半径(半径的复数)来提供更高水平的视觉区分。
  • 标题中使用多种排版方式来增强视觉层次并注重“大胆”的设计。
  • 诸如此类的例子还有很多。

除了微小的元素之外,我们还可以在应用程序中的整个卡片和列表中看到这一点:

卡片和列表如何应对不一致

标题真正体现了风格并打破了界限

标题如何在不同的应用中扮演不同的“角色”

我们见过网站标题的奇特风格,设计师们也利用标题来契合主题,使其成为重要的图形元素。谷歌似乎也试图在其设计系统中做同样的事情。

一个很好的例子是他们如何巧妙地使用可变的字体高度和大小来创建这个简洁的闹钟应用程序。

资料来源:9to5Google

一些有趣的标题和文字非常有意义,尤其是在标题扮演特定角色的应用中。然而,一些大而粗的标题和元素的使用却很糟糕。以下是谷歌正在做的一个很好的例子显示为“不该做什么”:

我们还没有看到谷歌在动画标题和效果方面做出太多的贡献,所以我们只能拭目以待。

注重节省时间

从上面的对比中,您可以注意到 Gmail 移动应用的一些重大变化。电子邮件部分现在变成了素材卡片,并且操作菜单移到了键盘上方。除了位置的变化之外,加粗的发送按钮和扩展的菜单还允许用户快速操作并将元素添加到电子邮件中。研究表明,这可以将用户的浏览体验提升 4 倍。

不同元素使用不同的色调不仅让应用程序感觉更有趣,而且还为重要元素创建了良好的视觉层次和对比度。

在经过测试的 10 款应用中,M3 Expressive 设计使老年用户能够像年轻用户一样快速地发现屏幕上的关键交互元素。

根据谷歌研究团队的调查,无论年轻用户还是年长用户,都能更快地发现关键交互和行动号召 (CTA),并减少采取行动的时间。简而言之,用户和界面之间的摩擦将会减少。

动画和交互得到升级

谷歌将他们的新动画系统和指南称为“运动物理系统”,该系统致力于使微交互和过渡更加流畅、更具表现力。谷歌还致力于使动画更容易被用户理解。

一些主要区别如下:

  • 基于弹簧的动画本质上意味着动画结束时会有弹跳,以使其感觉更自然。
  • 您可以使用新的运动方案来定制您的设计。
  • 空间效果,其中元素将在屏幕上从一个位置移动到另一个位置。
  • 他们还采用了新的命名方案,以“expressive”作为动画名称的前缀。
  • 标准缓和动画已成为过去!

所有这些如何协同工作的一个很好的例子就是这个非常自然且富有表现力的动画:

新的 Android 通知动画

在上面的例子中,仔细观察关闭一条通知时,所有其他通知都会做出相应的反应。这感觉就像一本书被从书架上拉下来,旁边的书也会微微滑出。这比之前的 Android 更新更加自然,也更符合物理定律

您可以使用这些新动画及其动画指南和设置列表 - https://m3.material.io/styles/motion/overview/how-it-works

随处可见的形状和变形

谷歌确实非常依赖变形形状来展现设计元素的状态变化。无论是卡片的展开,还是计时器的移动,这些变形形状随处可见。

  • 药丸会增加边框半径,以从其他选项中脱颖而出。
  • 许多 SVG 图形会通过变化和变形来显示事物的增加或减少。这些图形可以是计时器、加载器和进度条。
  • 卡片变成圆形以显示选定状态并与其他卡片区分开来。
  • 当卡片在滑块或旋转木马中进入焦点时,它们会扩大。
  • 圆形装载机从无聊的旧圆形变为变形形状。

他们还推出了一个新的形状库供设计师使用和探索——https: //m3.material.io/styles/shape/overview-principles

这些形状不仅仅是工艺品。谷歌鼓励设计师将其用于个人资料图片以增加个性,将其添加到用户交互和元素中,以及使用 2.5D 形状来增加深度。

不过,谷歌也警告设计师要谨慎使用形状,以避免混乱和混淆。

我为什么担心?

  1. 过度游戏化:由于 Google 专注于有趣和明亮的元素,一些设计师可能会过度使用并破坏一些常见的 UX 原则,从而妨碍用户的体验。
  2. 主观设计:说到底,设计本身就是主观的。我在推特上看到过很多关于 Android 16 和 Material Expressive 的帖子,有些人觉得某些颜色和实现方式不太吸引人。
  3. 旧硬件的问题:流畅的动画效果很棒,但耗电耗电。由于不同设备之间缺乏一致性,Material Expressive 可能无法在所有设备上正常工作,并且可能不适用于此类网站。我可能完全错了,所以请在评论中指正。
  4. 开发人员会更加讨厌我们:我们经常会遇到动画或交互设计工作量大,开发团队或产品经理可能会缩短或忽略这些工作的情况。值得庆幸的是,大多数开发人员也都掌握了 Material Design 的精髓,所以说服他们并非难事。

你对 Material Expressive 有什么看法?请在评论区留言,我们可以好好讨论一下!另外,记得点个赞支持我哦 :)

 

 

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

✨ 审美积累 | Misso 工作平台设计赏析

杰睿 设计资源

信息密度高,也可以呼吸感十足。
今天分享一组我非常喜欢的 Web UI 作品——Misso 工作效率平台设计。项目来自 BEHANCE 上的 Dotcode Studio,主打 B 端 SaaS 场景,设计在视觉和信息组织之间达成了很好的平衡。
这组设计最吸引我的是**「信息密度与视觉节奏的平衡」**。它大量使用网格和卡片进行内容分区,同时通过圆角、灰阶配色和轻量图标,削弱了B端界面的压迫感。
核心亮点:
  • 主色冷静理性,大量留白让复杂信息不拥挤
  • 字体层级明确,搭配简洁图标强化指向性
  • 模组化卡片设计,兼容多种信息类型、适配响应式场景
  • 微交互动效自然,增强可用性但不喧宾夺主
使用感受:
这类视觉风格在“效率类”工具平台中非常常见,但 Misso 的版本尤其**“亲切”**,不像传统 B 端那么冷峻。可以作为 CRM、任务管理、数据看板等平台的风格参考。
适用场景建议:
适合 B 端 Web 产品、数据仪表盘、工作流工具等高信息密度的页面,特别适合希望在「专业感」与「友好性」之间找到平衡的产品团队。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

如何通过 UI / 交互层级设计降低新手门槛?一项系统性分析

杰睿 设计思维

 

在复杂信息系统或工具类产品中,用户的第一次接触往往决定了他们是否愿意继续使用。新手门槛的高低,不仅影响用户的学习成本和初始留存,也间接作用于产品的商业表现。
从设计角度来看,UI 与交互层级结构的组织方式,是决定新手体验是否友好、是否有进入感的核心机制之一。本文将从信息认知、界面结构与行为引导三个层面,系统性分析 UI / 交互层级如何影响新手门槛,并给出设计优化思路。

一、认知负荷与界面感知模型

1.1 新用户的心理特征:模型缺失、不确定性高

新手用户面临的主要挑战在于:缺乏清晰的心理模型。他们不了解系统边界、不知道功能位置、无法预期交互结果。这导致每一个界面元素都可能成为额外的认知负担。
设计的目标不是“减少内容”,而是降低用户构建心理模型的难度,使其在短时间内感知:
  • 我在哪里?(定位)
  • 我可以做什么?(路径)
  • 接下来会发生什么?(预期)
 

二、交互层级的三重作用机制

UI 和交互层级结构不是界面排版的产物,而是产品功能语义、用户行为路径与认知节奏的结构化表达。它主要承担以下三重功能:

2.1 信息压缩与优先级管理

良好的层级结构通过视觉与交互手段实现信息的压缩与展开,使用户在单位时间内只面对有限数量的信息项,减轻感知压力。典型手段包括:
  • 分组与分区(Group & Zone)
  • 折叠与展开(Progressive Disclosure)
  • 等级化的视觉样式(Hierarchy by contrast)
设计者需将“概览 → 局部 → 操作”作为信息层级主路径,避免“信息平铺”或“全量暴露”所带来的干扰性。

2.2 用户路径引导与行为决策支持

层级不仅是界面组织结构,更是用户行为路径的预设结构。其目的是在用户尚未做出主动决策前,通过显性或隐性的路径引导,帮助其完成一次有效行为。
关键设计策略包括:
  • 建立“主路径”与“辅助路径”的视觉与交互区隔
  • 使用位置、颜色、动线等手段强化行为序列感
  • 提供结构性反馈(如面包屑、步骤指示、当前视图状态)以增强路径感知
良好的路径引导可以显著降低“首次任务失败率”,增强使用信心。

2.3 情境边界限定与探索自由空间构建

初期用户往往不清楚“系统边界”,层级结构的设计需在两个维度上达到平衡:
  • 边界明确:用户需要知道当前操作的上下文边界(模块归属、操作影响范围)
  • 探索自由:同时保留一定的试探空间,让用户可以低成本尝试操作(可逆性、可预览、非强绑定)
设计上常通过局部可展开结构、Hover Preview、模态/侧滑等方式建立“安全的探索机制”,既帮助理解,又降低误操作焦虑。

三、结构策略:降低门槛的五个设计原则

基于上述机制分析,我们可以提炼出以下五个关键设计策略,用以降低新手门槛:

3.1 建立明确的主视觉层级结构(Visual Hierarchy)

通过字号、颜色、布局密度、空间节奏等手段,强化内容结构的视觉可读性。视觉层级清晰,是新用户建立模块感知的基础。

3.2 采用递进式信息揭示(Progressive Disclosure)

避免在初始状态中展示所有功能与数据,采用分步展开策略,依据用户行为逐层揭示内容,符合信息处理的渐进性原则。

3.3 强化首层路径线索(Primary Interaction Path)

通过交互动线设计(按钮位置、流向动画、前后态对照等),明确用户首要行为路径,避免多条入口路径造成判断负担。

3.4 构建可预测的反馈机制(Consistent Feedback)

操作结果应当及时、清晰、结构化地反馈,帮助用户快速建立输入-输出映射关系,降低操作不确定感。

3.5 保留安全的试错机制(Safe-to-Explore)

通过撤销、预览、提示、浅层交互等方式构建“软边界”,降低试错成本,增强用户探索欲望与系统掌控感。
 
层级设计的意义不仅在美学,而在策略
 
降低新手门槛不是纯粹的 UI 问题,而是用户认知过程、行为路径设计与界面结构合理性的交汇点。
一套良好的 UI/交互层级,不仅能让用户看懂产品、用对功能、建立信心,更能为产品的可用性、可扩展性与商业增长建立坚实的基础。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

设计师如何高效对接前端

涛涛 前端及开发文章及欣赏

本文围绕 UI 设计如何实现与前端的无缝对接,确保设计图 100% 还原且减少修改展开,通过实战案例分享了关键方法与注意事项,强调沟通、技术理解及灵活协作的重要性。

UI设计潮流就是个轮回

涛涛 行业趋势

本文围绕 “潮流是个轮回” 的理念,探讨 UI 设计趋势的演变,指出了解历史流行趋势对创新和提升设计能力的重要性,并重点介绍了五种具有代表性的 UI 设计趋势及其特点、发展背景与应用场景。

UI 设计中的胶囊和弹窗设计

涛涛 平面设计

该网页聚焦 UI 设计中的胶囊和弹窗设计,展示了大量各类商业活动的 banner 设计案例,涵盖电商促销、节日营销、会员福利、课程招生等多个场景,体现了胶囊按钮与弹窗在商业设计中的广泛应用,为相关设计提供了丰富的实践参考。

日历

链接

个人资料

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

存档