智能交互案例百科(一)

以案例讲技术:传感、XR、多模态、人车交互等九个专题,补齐智能交互的技术常识。
  • 小班课
  • 录播
SCOPE
9 个专题 · 35+ 小课 · 200+ 案例
AUDIENCE
跨专业、非理工背景,需要快速积累前沿科技与人机交互案例的同学
INSTRUCTOR
按方向匹配

课程介绍

9 大专题35+ 节小课200+ 典型案例约 10 小时录播

设计师该以什么样的视角看待新科技

设计师该以什么样的视角看待不断涌现的新科技?如何判断哪些技术是设计能够介入融合,并加以运用到产品设计、交互设计中的?如何深挖优秀案例与热点技术的底层应用逻辑,做到举一反三,一通百通?

无论是交互设计初学者、打算考研继续进修学习的同学,还是交互设计相关行业的从业者,都需要与日新月异、不断发展变化的新科技打交道。我们或许已经掌握了设计学科相关的专业知识,如交互界面设计方法、智能产品人机交互设计、用户体验研究方法等等,但传统设计面对新科技,以及结合新技术进行设计产出、突破创新时,却遇到了瓶颈。

比如,设计师应对常规的手机端界面的交互设计时得心应手,一旦更换其他的设计情景与特定人群,如人车交互 HMI、多模态交互、为老人儿童等特殊人群的设计,会束手无措,或是产出平庸甚至是错误的方案。除了基础理论、设计工具与手绘的学习,补充大量前沿案例、技术基础知识已成为设计师的刚需。

课程目标:用案例补齐技术常识

针对交互设计、服务设计等设计情景丰富、所需技术扩展知识范围广却又十分分散的学科特点,课程不会深入代码、算法等具体技术,而是通过大量优质案例,帮助大家快速积累前沿科技产品与人机交互基础知识与创新应用机会点,以应用场景、真实案例为切入点锻炼设计思维,熟悉设计方法。

本课程可以有效弥补对智能产品运行机理的基本认知,快速积累前沿科技产品与人机交互案例。(注:本课主要对智能产品行业案例进行科普教学,不深入代码、算法等具体技术,难度低、易学习。)

升级版第一期的课程内容包含 9 个专题,每个专题配套录播课程与课程专属加油站,总计课程约 10 小时,共收录 200+ 典型案例,满足考试热点素材积累、基础知识巩固与设计灵感积累等多方面学习需求。

Notion 专题库截图:九张黑底专题卡,依次为基础技术知识、XR 延展现实、多模态交互、人车交互 HMI、互联网+、智慧空间、智慧材料、特殊人群设计、语音交互专题
案例百科班第一期课程专题

这门课适合谁

Persona A|跨专业学习交互设计的小白、初学者:在枯燥的概念、晦涩的专业名词、庞杂的知识信息的学习过程中效率低下,知识掌握程度不牢不深;经常一学就困,学完就忘,缺乏有效的学习成果产出。

Persona B|准备升学考试的同学:学习理论课程、手绘课程后,缺乏大量时效性强、前沿的课外知识补充,难以收集优质系统的技术基础知识与设计案例;尝试前沿设计方案产出时缺少可落地技术知识的支撑,构思缺乏灵感,作品平庸。

Persona C|学习交互设计的在校学生或职场人士:学习过程中学习热情、积极性不高,自律性不强;有学习动力,但缺乏学习环境,没有组队队友、共学伙伴,导致学习效率低下,成长受限。

如果你属于以下情形之一,你可能需要这门课程:

  • 艺术设计、文科类等非理工科专业背景
  • 不熟悉计算机 / 软件、机械电气、电子信息等领域
  • 对前沿科技、智能设备产品行业关注较少
  • 无交互设计灵感,需快速积累前沿科技、人机交互案例
  • 希望了解智能行业动态、目前实验室 HCI 学术探索方向

录播课 + 专属加油站 + 班群案例共建

一、案例百科班以优质案例分析的形式来讲解知识点,分专题模块整理了 200+ 典型案例。记字不如记图,记图不如记用例、理解用例。以案例讲解为导向的课程,助力大家系统性地拓宽学科视野,打牢基础知识。

二、每节课后配有专属知识加油站,以知识卡片、案例共建、命题训练、头脑风暴等丰富的内容与学习方式,助力大家学后回顾、练习,巩固学习成果。案例讲解配有情景化的技术图解、落地设计图片以及视频素材,带领同学思路更清晰、有条理、举一反三地学习知识,在常规理论、设计工具应用、手绘学习之余补充课外知识,助力同学「头脑有货」「下笔有神」。

三、案例百科班开设课程班群,在录播课学习之余,组织同学们进行案例共建、交流学习的活动,为大家提供一个活跃的学习氛围,鼓励大家积极提问,获得学习反馈,突破难点,持续成长。

「智能交互案例百科班」课程表:左栏基础技术、HMI 专题、智慧空间、智能材料,右栏多模态交互、互联网+、特殊群体,各列出课时条目
COURSE DESCRIPTION 智能交互案例百科班(以实际课程内容为准)

课程由来

智能交互案例百科班为录播课程,共约 10 小时;首版课程更新了 7 大板块,并持续更新。课程经迭代升级,第一期扩展为 9 个专题,并新增课程专属加油站。

首版课程表比升级版多一个「真题解析 · 交互设计真题解析」板块。

首版「智能交互案例百科班」课程表,结构与升级版基本相同,最后一行为真题解析
首版课程表预览(以实际课程内容为准)

课程目录

9 个专题
  • 与交互设计密切相关的基础技术:原理简介、视频素材讲解与设计案例补充。

    TOPICS

    深入了解

教师团队

讲师按申请方向、目标专业与项目类型匹配,具体授课老师在咨询后确定。

认识全部讲师 →

教学示例

24 个知识点

CASE 01

基础技术:从技术到设计

课程第一章介绍了与交互设计密切相关的基础技术,按照技术「基础原理简介—视频素材讲解—设计案例补充」的知识讲解结构进行教学。先列举课程中出现的几个案例来进行设计思考:针对老年人尿失禁问题,如何运用新技术进行产品交互设计,改善老年人生活水平?进行导航、购物等情景下的用户体验设计时,如何选取合适技术进行设计创新?进行交互设计模式创新,如自然手势交互,有哪些技术可支持实现?案例一聚焦用户行为痛点,案例二思考特定情景下的用户体验模式创新,案例三思考交互设计的基本问题——交互方式设计创新。若缺乏相关技术知识的沉淀,我们会很难做出高质量的创新设计。

方案参考 01

针对老年人尿失禁问题:肌电传感器

技术|肌电传感器可以测量肌肉电(EMG)的原始信号,应用电子学仪器记录肌肉静止或收缩时的电活动,应用电刺激检查神经、肌肉兴奋和传导功能。通过此检查可以确定周围神经、神经元、神经肌肉接头及肌肉本身的功能状态。

设计|老年人排尿提示垫。DOTE 解决了严重影响老年人生活质量的尿失禁问题。这种排尿测量和提醒垫配备了一个肌电图(EMG)传感器,充当中枢神经系统和膀胱之间缺失的一环。肌电图传感器监测由腹部肌肉引起的电变化。当膀胱中的尿量达到一定水平时,DOTE 设备会轻轻振动,提醒老年用户排尿。该设备以这种简单的方式维护了老年人的尊严。

深色背景的线稿示意图:手掌与前臂上标出电极位置,腕部套着一只手环
肌电传感器
白色与橙色配色的排尿提示垫产品渲染图,含底座、垫体与传感模块
DOTE 老年人排尿提示垫

方案参考 02

导航 / 购物场景下的用户体验设计:U1 芯片定位技术

技术|苹果指出,U1 芯片利用超宽频(UWB)技术实现了空间感知,让 iPhone 11 Pro 能够精准定位同样配备 U1 芯片的苹果设备。这就像为 iPhone 增添了另一种感知能力。Nearby Interaction 可以将超宽带(UWB)集成到应用程序和硬件配件中,ARKit 的视觉空间功能会与 U1 芯片的无线电灵敏度相结合,以精确定位附近的静止物体,甚至是身后的物体都能定位到。

设计|老物件丢失寻位软件、户主距离识别安全锁、商店自主购物软件、导航体验设计等。

手持 iPhone 的界面上显示一个指向右前方的箭头,提示物品在右侧 20 英尺处
U1 芯片精确查找
动图:杂乱房间的俯视画面,演示在房间里定位丢失物品
基于 UWB 的寻物与导航体验

方案参考 03

自然交互手势等交互设计模式创新:Leap Motion

技术|Leap Motion 是面向 PC 和 Mac 的体感控制器,采用了多角度成像技术。这项技术的基本原理是在不同的位置使用多个摄像头同时摄取物体图像,然后对比同一时刻获取的图像的差别,运用算法来计算物体在那一时刻的深度信息,从而获取物体的三维信息。

设计|自然手势交互操作系统。该系统支持隔空手势缩放、滑切、点击、复杂绘画与游戏操作手势的实现。

两只手悬在两个球形视场网格上方,示意 Leap Motion 的识别范围
Leap Motion 体感控制器

构建知识体系:行为—技术—设计

了解技术与前沿案例只是第一步,将基础知识实际运用到设计产出,需要将基础知识化为己用,构建自己的设计思考与设计方法知识体系。知识体系,通俗地说,就是无论输出多少基础知识与案例,都能按照一条或固定的多条产出方法路线来进行知识素材加工,运用到设计中。

这里分享一个知识体系构建方法,参考 MIT 媒体实验室教授 Neri Oxman 在其文章《Design and Science - Krebs Cycle of Creativity》中提出的学科循环创意图谱。在该模型中,科学将信息转化为知识与方法模型;工程技术将知识转化为可用的程序与工具;设计将可用的技术工具转化为人可与之发生多样交互行为的产品;艺术又将人的行为转化为质疑现实合理性的信息。

据此总结实用的输入—产出固定路线:设计是技术工具过渡到连接用户丰富行为交互的桥梁。作为「桥梁」的建造者,设计师可以从用户的行为端开始修建,找到与行为匹配的技术的另一端;也可从技术端出发,修建到由技术引导产生的全新用户行为端。面对复杂陌生的问题,先拆解分析用户的行为,再找到解决行为痛点问题的对应技术。

例如老年人尿失禁一系列「失常」行为中,最痛点的问题是老年人无法感知身体的尿意,从而导致无意识排尿。找到痛点行为后,案例挑选了肌电传感器作为膀胱与神经系统中缺失的连接,设计了 DOTE:监测到膀胱尿量达到排尿水平时发出「震动提示」,补缺了老年人缺失的感知,将「失常」行为「扭转」为正常排尿行为,完整经历了行为—技术—设计的产出路线。

也可以逆向思考,从技术端出发,分析技术可带来的新颖交互方式,并将其体现在交互创新设计中。如 Leap Motion 运用多角度成像技术,使各类不同的手势交互识别成为可能,让创新手势交互设计落地到具体情景中。

构建知识体系的路径是多样的。若已有体系无法满足需求,就需要更新它:百科班中分享的创新材料技术与自主交互技术案例,就不适合行为—技术—设计的路径,可以扩展出「技术端到实体形态端」与「技术端到自主交互系统端」两种桥梁搭建方法。

黑底白线的圆形图谱:艺术、科学、工程、设计四个象限围绕中心循环,四周标注文化、自然、感知、生产
克式循环创意图谱(KCC)Neri Oxman, Krebs Cycle of Creativity, 2016

方案参考 04

FOLED 带来全新产品形态

技术|FOLED 柔性有机发光设备(Flexible OLED)是一种用可弯曲的基板材料(比如透明的塑料薄板或金属薄片,代替普通的玻璃基板)制作的有机发光设备。FOLED 显示器可以被卷起、折叠,或者作为可穿戴计算机的一部分被穿上。这种设备比传统玻璃基板的显示器更亮、更耐用、生产成本更低。

产品形态|可折叠、卷起、穿戴显示器。设计|智能服饰设计。

动图:一台白色座舱式设备上装着弯曲的柔性屏,手指在屏幕上操作
FOLED 柔性显示

方案参考 05

定位技术带来产品自主交互新功能:SLAM

技术|SLAM(Simultaneous Localization and Mapping),也称为 CML(Concurrent Mapping and Localization),即时定位与地图构建,或并发建图与定位、同步定位与建图,是帮助机器在进入一个陌生环境时,通过移动和观察快速了解周围环境,并绘制出环境地图的技术。

自主交互|自主避险、自动定位等。设计|自动扫地机器人、无人机自主避障系统、AR 自动定位体系等。

智能交互案例百科班学习的理想状态,是持续吸收积累基础的前沿技术与产品案例知识,并在设计实战中不断运用所学的基础知识,构建一通百通的设计知识体系。无论是从容应对千变万化的考研快题,还是工作学习过程中补充能量、提升自己,百科班都将提供系统、全面、前沿的基础知识学习框架。

街景画面上叠加了点云、网格地面与车辆、行人的识别框
SLAM 即时定位与地图构建

NOTES

学员学习笔记:EMG 与 EDA

新科技知识不断涌现,设计师该以什么样的视角切入学习?这一节分享收录于案例百科班中的基础技术知识与设计案例,展示对设计师而言有效学习技术基础知识的方法、适合设计师参考的优秀案例与详细的学习思考笔记。

学习笔记 1

EMG 肌肉微电流:名词解释

EMG 肌肉表皮下微小电流(electromyography),应用电子学仪器记录肌肉静止或收缩时的电活动,及应用电刺激检查神经、肌肉兴奋及传导功能的方法。通过此检查可以确定周围神经、神经元、神经肌肉接头及肌肉本身的功能状态。

当我们的肌肉收缩时,会产生微弱的电信号,这些信号可以通过电极传感器来捕捉和记录。EMG 技术可以用来监测肌肉的活动和运动。

EMG 技术和传感器在交互设计中的应用非常广泛。例如,在虚拟现实游戏中,可以使用 EMG 传感器来捕捉玩家的肌肉活动,实现更真实的游戏体验;在医疗设备中,可以用来监测肌肉功能和康复进展;在人机交互设备中,可以用来控制计算机或其他设备,例如通过肌肉运动来控制光标移动或选择菜单。

实例 Demo(原文为视频):一是名为 AuraRing 的可穿戴电磁跟踪系统,包括一个带嵌入式电磁发射器线圈的戒指和一个带多个传感器线圈的腕带,用于精确地跟踪手指的运动;二是 Facebook 推出的一款未来主义「读心腕带」,希望构建一个通过微小手势控制的增强现实(AR)系统,支持用户通过手指的微小动作从远处控制灯光、烧水壶和操纵虚拟物体。

EMG 的常见设计情景

备注:学习一个新技术概念,在文字阅读搭配应用实例有了初步认知后,可快速搜集该技术可能的应用情景,包括但不限于交互方式、产品与界面形态、使用场景。在面对真实的设计问题时,可以快速调用、构思方案。

1. 肌肉控制的游戏:游戏控制器可用 EMG 来检测玩家的肌肉活动,实现更具身临其境的游戏体验。例如,玩家可以通过肌肉活动控制角色的移动、攻击等动作。

2. 肌肉控制的健康设备:EMG 可以用于帮助用户监测身体健康状况。例如,使用 EMG 传感器检测肌肉活动,从而监测运动量、运动质量等指标,以便用户更好地掌握自己的健康状态。

3. 肌肉控制的智能家居:EMG 可以用于控制智能家居设备,例如通过肌肉活动控制灯光、窗帘、电视等设备的开关或调节。

4. 肌肉控制的无人机:EMG 可以应用于控制无人机,例如通过手势或肌肉活动控制飞行方向、高度等,实现更灵活的无人机操控。

学习技巧:善用 ChatGPT / Notion AI,如询问 AI:「EMG 用于交互设计的常见情景,至少 5 个方向,分点阐释,内容尽量详细。」

动图:戴 VR 头显的玩家站在客厅里,虚拟画面中是像素风游戏关卡
肌肉控制的游戏
动图:黑底上奔跑的人形线条,两侧显示心率数值
肌肉控制的健康设备
动图:穿浴袍的人坐在床边,抬手控制对面的电视
肌肉控制的智能家居

参考案例 · 落地

Apple 专利:通过嵌入式电极检测手势和肌电图的智能手环

知识点提取:图 1 说明了可以作为手势的一部分执行的各种手部动作;图 3A 说明了示例设备,其中电极可以形成在柔性带中以检测手部运动和手势;图 5A 示出了已经与其外壳分离的示例性柔性带;图 5B 图示了带的一部分以及电极到连接器的路由。设计师应着重关注手势交互形态与表带设计、表带佩戴位置等信息。

专利还提到了除 EMG 检测外其他的技术,可与 EMG 检测技术进行组合创新:Apple Watch Bands 带有嵌入式微机械超声波换能器(MUT),可以检测触摸、手势、生理健康信号,并通过超声波在设备之间传输数据。

学习经验:在进行专业论文、技术专利等高知识密度、高理解难度的材料学习过程中,带着精准的问题目标,抽取可应用于设计方案借鉴的陌生知识点,进行总结学习、思考应用场景。

专利线稿图集:手腕屈伸与旋转的手势示意(FIG. 1),几种表带与电极布置(FIG. 3A–3D),以及柔性表带展开图(FIG. 5A、5B)
Apple 专利附图Patently Apple

学习笔记 2

EDA 皮电活动:概念介绍

我们的身体大约有三百万个汗腺,在手掌、手指以及脚底分布较为明显。当机体受到感官刺激或者情绪产生变化时,皮肤内的血管会产生收缩和舒张,汗腺被激活而发生变化,进而分泌水分,通过毛孔进入皮肤表面,分泌液中的离子改变电流正负平衡。这种可测量的皮肤电导的变化(皮肤电导增加等于皮肤电阻降低),称之为皮电活动(Electrodermal activity,EDA)。皮电活动能够非常快速、灵敏地反映刺激事件对个体的影响程度。

心理生理学家对心理上引起的汗腺活动进行测量,来研究与之相关的心理活动。情绪紧张、恐惧或者焦虑情况下汗腺分泌增加,皮肤表面汗液增多,引起导电性增加而致皮电升高。皮电反应系统与情绪、唤醒和注意力等密切联系。

皮肤电反应是最敏感的情绪反馈之一,来源于皮肤汗腺的自主激活,是生理学反应系统中应用最广泛的测量指标类型。同时,因其稳定性高、测量简便、灵敏度高等优势,成为反映个体交感神经兴奋性变化的最有效、最敏感的生理参数。

EDA 测量是通过将一对电极放置在皮肤表面,在皮肤上施加一个微小的恒定电压,这样流过皮肤的电流与皮肤电导成正比。通过电流电压转换后,皮肤电导变化信号将被记录,因此皮肤电导响应又称为皮肤电流响应。

一只黑色圆形表盘的腕戴式测量设备,平放在白色桌面上
腕戴式 EDA 测量设备

AI 灵感启发:五轮提问细化设计方案

Prompt 1:阅读上述概念介绍材料,你获得了哪些设计灵感?提炼关键词,每个关键词下给出一句设计启发方案。

AI 回答:关键词为汗腺、皮电活动、情绪、皮肤电反应、电极。汗腺作为一种快速反应机制,可以启发设计类似于出汗的机制,例如人体仿生设计的散热装置;皮电活动可以用于测量情绪变化,可以启发设计情感识别的装置,例如能够自动识别并响应情绪变化的装置;皮肤电反应可以被用于测量个体的交感神经兴奋性变化,可以启发设计用于个人健康管理的可穿戴设备,例如手环或手表等;电极作为测量皮肤电活动的主要工具,可以启发设计更加舒适、便携的测量设备,例如无需用粘贴物质固定电极的皮肤电活动测量仪器。

Prompt 2:细化皮电活动的设计方案,包含用户画像、设计产品交互服务体系。

AI 回答:用户画像——在设计皮电活动相关产品之前,需要先确定目标用户画像。针对皮电活动,目标用户可以是想要关注自己情绪波动的人群,例如高压力人群、情感障碍患者、身体不适或疲劳的人等。产品设计——测量方式可以采用手环、手表、贴片式电极等多种形式,需考虑测量的稳定性、准确性、舒适性,并与用户画像匹配;收集到的数据需要处理和分析,设计用户友好的数据处理平台,将数据以图表或其他可视化形式展示;交互方式需要考虑用户的使用场景和习惯,例如睡眠监测需考虑手环的舒适性和佩戴方式,办公场景中用户可能更愿意使用桌面应用或移动应用。服务体系——提供用户培训(使用说明书或视频教程)、用户支持(在线或电话支持、售后服务)与用户社区(在线论坛,让用户交流和分享使用经验)。

Prompt 3:细化服务体系方案,场景更聚焦,用户为情感障碍患者。

AI 回答:可以设计一个名为「情感监测与调节平台」的服务体系。用户画像——主要面向情感障碍患者,包括抑郁症、焦虑症、创伤后应激障碍等患者,用户注册时提供基本信息,使用过程中通过皮电活动等生理指标监测情感状态。产品设计——包括可穿戴式皮电监测设备与基于生物反馈的情感调节应用程序两个产品。交互体验——实时情感监测、情感调节训练(舒缓放松技巧、深呼吸等)、社交支持(分享情感状态与经验、与其他患者交流)、专业支持(在线咨询和心理治疗等服务);场景覆盖工作中遭遇挫折、与他人交往时产生紧张情绪、经历突发事件等日常情境。

Prompt 4:将交互方式设计得更巧妙一点。

AI 回答:设计一个配有皮肤电活动传感器的智能手环,及时检测患者的情绪变化,并通过震动或声音提醒用户进行情绪调节。当手环检测到皮肤电活动水平上升时,会自动震动或发出柔和的提示声音,提醒患者进行深呼吸、冥想等情绪调节;同时记录情绪变化数据并上传至手机应用,应用根据历史数据生成个性化的情绪管理建议;如果情绪波动较大,提示用户寻求专业的心理支持。手环还可以与家庭医生、治疗师等专业人员连接,在检测到较大波动时自动发送警报,以便及时干预。

Prompt 5:设计得更人性化一点。

AI 回答:设计可定制化的智能手环,让患者根据喜好选择颜色、震动强度、声音提示等;提供情绪支持的社区和平台,分享经验和感受,获得专业治疗资源、心理咨询、情感调节技巧等支持;在交互过程中注重情感化的语言,提示时使用柔和、鼓励性的语言,在应用中用人性化的语言和图片展示个性化建议;设计自我调节功能,让用户根据自身感受进行调节,手环记录数据并根据用户反馈调整改进。

设计案例:产品形态参考

蓝底长图,列出可穿戴式神经生理测量仪腕式与头戴式、可穿戴眼动设备、轻便式脑电采集仪等产品及其参数要点
生理测量设备产品形态参考来源:https://zhuanlan.zhihu.com/p/373824384

设计案例 · 商业落地:Mobili-T

Mobili-T:在许多层面上改变吞咽困难治疗的便利性。它非常小,可以放入口袋,不需要任何电线连接,并且可以舒适地粘附在患者下巴下方的皮肤上,完成吞咽练习并实时「看到」肌肉活动。Mobili-T 可用于从急症、住院、门诊到家庭健康的许多环境。借助远程数字 sEMG 生物反馈,临床医生可以在他们需要的地方提供治疗,并客观地跟踪依从性,以做出更精确的决策,获得更好的吞咽结果。

上半为笔记本电脑与手机上的配套软件界面和蓝色传感器,下半为贴在下巴下方的传感器与手机界面
Mobili-T 吞咽训练设备

总结:教师评价与学员自评

教师评价:在受到诸如 IoT、XR、AIGC 等多方面技术影响的情况下,交互设计呈现出更多元的形式,也发展出更丰富的形态,这些都需要设计师理解较为全面的交互技术,以及其应用形态和领域。课程同学在学习案例百科课程的同时,通过资料共享、案例共建的方式共同拓宽了所有人的信息和视野,在本课中获得了快速成长。

学员自评:学习基础知识时,调整了我之前死磕技术原理、结果对设计灵感启发没有帮助的思维模式,更加重视技术的应用情景。并在学习过程中探索了用 AI 辅助基础知识学习与设计方案启发,拓宽了我的思考视角。在后续的深化学习中,会进行设计表达、完整设计方案的产出训练,将积累的基础知识与案例素材更好地运用到设计项目中。

MIDTERM

中期回顾:怎样从案例中有效学习

快速入门、培养交互设计思维的高效方式,就是学习优秀的案例。在了解、分析设计案例的过程中学习专业名词、收获设计灵感,再辅以基础理论的巩固,将优秀案例中学到的知识点快速对应至理论框架,并运用到实际项目中,比死记硬背、拍脑袋想设计方案要有效得多。但找案例也需要一定的参考标准与分析方法,不能一看见「感到新颖」「属于自己喜欢的视觉效果」「感觉挺有创意」就一股脑放进收藏夹吃灰。

第一期同学共建案例(中期成果)

改版升级的第一期案例百科班进程过半时,同学们已经共建了非常多优秀的案例。在共建案例搜集的过程中,有同学经历了从「不会找」「找不准」到「找得精」「找得妙」,从「不会分析设计点」到「能有效提炼知识点与设计灵感」的过程。下面分享优秀共建案例,与案例搜集、分析过程中的典型问题。

Notion 案例共建画廊视图,三行案例卡片缩略图,含可穿戴设备、假肢、交互装置等
案例百科班第一期同学共建案例(中期成果)

问题 01

技术炫酷还不够,需要展示使用场景与交互细节

案例百科班的课程特色是以技术专题为导向来分析设计案例,帮助同学们积累交互设计师需要了解的技术基础知识。但这并不意味着我们在寻找案例时,要钻入技术的牛角尖,只关注看似「炫酷」「高大上」的技术,而忽视作为设计师需要关注的重点——用户、交互细节与使用情景。

以一位同学共建的案例卡片 MeHandA 仿生假手为例。介绍:MeHandA 仿生假手能够通过两个或一个电极控制动作,具有速度比例控制和 90 牛的夹力,可提供五个手指的协调工作,提供 100 多种不同的人工手势模式。在软件程序的帮助下,用户可以自定义肌电触发信号的选项和某些手势模式,以便在不同的握紧手势之间进行切换。

启发:通过自定义肌电信号,设计师能够获得想要完成的动作,在一些展馆的交互设计中都能够发挥作用——比如通过传感器获取某方面的信息数值,再通过数值生产一套关系体系,通过信息数值的变化提供不同的动作反馈,将某方面信息实体化,比如根据环境声音的变化形成一组动作。这个技术还能够跟音画互动结合,最终产出一个音画人联动的形式:人随着音乐舞动,图像跟着音乐律动的节奏而变化。

第一版配图仅仅收集了一个「机械手臂」。案例介绍中提到了「用户可以自定义肌电触发信号的选项和某些手势模式」,但配图中没有展示具体的肌电信号触发方式与具体的手势模式,也没有用户使用的情景展示;灵感启发中提到的展馆交互、音画人联动等设计点,第一版配图也基本无法展示,灵感启发与设计参考有很大的脱节。

第二版改版后,案例卡片丰富了功能实现的技术说明,完善了可能的手势交互细节,梳理了一套较为完整的交互流程,达到了可用于后续真实项目产出的有效知识积累。

Notion 案例卡片封面:米色底上的仿生假手,配手势图标与说明文字,标题 MeHandA 仿生假手
共建案例卡片:MeHandA 仿生假手图片为案例百科班同学自制,版权归属该同学
灰色背景上一只黑色机械仿生手臂的产品图
第一版配图
改版后的案例配图:仿生假手配肌电信号到动作的流程说明,以及一组手势模式图标
第二版配图图片为案例百科班同学自制,版权归属该同学

问题 02

了解什么是好设计,才能做出好设计

不少同学反映,在学习设计的过程中不清楚什么样的案例才算是优秀案例。虽然有不少设计竞赛网站展示了获奖作品,但对于基础薄弱的同学来讲,或许能感受到获奖的案例「优秀」,但具体拆解分析「为什么这么优秀」「优秀作品比普通作品优秀的点体现在哪」「普通作品如何改进可以达到优秀作品的水平」,可能会无从下手。百科班的共建案例中恰巧有两个主题一样的案例,都是为聋哑人士设计的智能手语(势)翻译手环,但案例质量有明显差异。

案例一|智能手语翻译手环:让聋哑人使用手语与听力正常人交流,利用肌电信号传感器、陀螺仪传感器和距离传感器对手势进行解码。距离传感器应用在指甲尖上,当聋哑人使用手语沟通时追踪手势动作,手环将其转换成声音或文本,发送到收件人的智能手机上;手环还包含扬声器,可以直接传输语音数据。当听力正常的人和聋哑人说话时,声音可以转换成文本显示在手环屏幕上,文本也可以转换成手势图形。启发:世界听障人口 3.6 亿人,约占人口总数的百分之五,手语是聋哑人学习的第一语言,普通人理解门槛较高。这款手环结合多领域技术,帮助特殊人群实现与普通人沟通交流的需求。

案例二|聋哑人手势智能翻译臂环:创新的肌电电极设计采用基于柔性印刷电路的高密度多通道肌电信号采集电极工艺,最大可支持 128 通道(目前市场产品支持 8 通道),并将模拟肌电信号转换为 RGB 瞬态肌电图像,充分利用图形计算加速,大幅提升手势识别效率和准确性。轻量模块结构可根据应用场景灵活拆装肌电模块,柔性电路嵌入亲肤弹性硅胶环中。手势识别算法将因果表示学习技术应用于快速手势姿态估计,用户可训练臂环识别和记忆多个自主选择的手势,并为其指定对应的语音交互操作。启发:除了创新肌电技术,它还考虑了可自定义拆装的模块结构、不同的使用场景和人群,并让每个使用者定义自己独特的手势含义,这是目前市面比较少有的个性化功能;使用者可以通过臂环向医生线上问诊,实现线上手势翻译。

对比分析:以学习者的视角判断一件作品是否优秀、是否有值得学习的点,可以从四个点切入——设计问题定义、用户对象选择与用户需求提炼、产品形态与交互功能细节、产品使用情景展示。两个案例都从特殊用户群体的真实痛点出发,问题定义与需求提炼都很精准;从产品形态与交互功能细节看,案例二更精致,「关键技术」板块的技术实现细节一一对应产品结构,还展示了个性化配置模块,案例一几乎只有一个几何形体的展示,技术细节被包裹在封闭结构中;在使用情景展示上,案例二展现了用户使用手环加配套 App 与医生进行手语对话的情景,案例一只有偏概念的展示。

需要强调的是,上面的对比仅从交互设计的学习需求出发。我们积累案例时,要从自身的学习需求出发,针对性地查找案例,提炼真正需要的设计点与灵感参考,而不是走马观花,收藏华而不实的设计案例。

两张并排的共建案例卡片缩略图:左为智能手语翻译手环,右为聋哑人手势智能翻译臂环
主题相同的两张共建案例卡片
案例一配图:戴白色手环的手部线稿与手环产品渲染
案例一:智能手语翻译手环
案例二配图:黑色模块化臂环的产品图、关键技术说明,以及佩戴臂环的用户与手机翻译界面
案例二:聋哑人手势智能翻译臂环
案例二的关键技术页:创新肌电电极、轻量模块结构、手势识别算法三段说明,右侧为五种个性化配置模块
案例二:关键技术与个性化配置
案例二的应用场景页:戴臂环的女性侧耳倾听,旁边的手机界面显示手语与医生的对话
案例二:应用场景

问题 03

切忌逃避关键技术理解,找准设计师需掌握的技术知识

设计师学习技术,是为了能将合适的技术精准有效地运用到自己设计方案的阐释与原型制作。无需过于钻研本质原理,但也不能逃避关键技术问题,模棱两可一笔带过。

以 DEUHR 为例——用于上肢和手部康复的数字练习游戏,是专为中风后患者设计的远程康复解决方案。惯性测量单元记录日常锻炼的运动范围、执行速度和反应时间;患者可以通过数字应用程序访问日常锻炼、进度监控和临床医生反馈;治疗师可以管理所有治疗步骤,从初始设置到日常监测和微调康复计划。启发:为患者远程治疗设计并不容易,它不涉及线性用户旅程,需要多维度考虑用户处境——每个患者都会对运动障碍做出自己的个人反应,需要在康复过程中进行合理分析以鼓励患者,并实时记录,方便医生监测各种患者的康复数据和锻炼情况。

不能逃避的关键技术点:任何交互设计功能的实现,背后都包含了复杂的技术细节。在自己的设计方案中可以详略得当,简略说明通用的基础技术,如信息通信(蓝牙信号传输),但体现交互功能特色的技术描述一定不能略过。这个案例里,我们不能「蒙混过关」的,是「惯性测量单元记录日常锻炼的运动范围、执行速度和反应时间」这一功能的实现细节。

查询产品官网信息后可以知道,实现该功能的关键是 one single-sensor(an inertial mass unit),它是 DEUHR 物理设备的一个组成部分,可以检测和测量加速度和角速度等运动参数;它可以与屏幕上的游戏互动,并且具有适应不同物理工具的紧固机制,使患者可以使用自己喜欢或适合自己的物理工具与游戏互动。如此分析后,就可以把惯性测量单元延展到智慧健康、智能运动等其他设计场景中。如果逃避理解,只能套用模板,案例学习也丢失了为我们提供灵感素材的意义。

Notion 案例卡片封面:三位使用者佩戴不同颜色的康复传感器,标题 DEUHR 用于上肢和手部康复的数字练习游戏
共建案例卡片:DEUHR
DEUHR 案例配图:使用者佩戴传感器训练的照片、传感器与配件产品图,以及治疗师与患者两端的界面流程
DEUHR 案例配图

问题 04

学习前沿技术需谨慎,要清晰认知专业壁垒

DEUHR 的案例启发我们不要逃避关键技术的认知,但也不能过于钻研技术,或者选择超出我们能力接受范围的案例进行学习。这并不是说无需关注前沿技术与高新技术产品,而是需要判断值得我们学习的限度。设计师并非万能,太过专业、精深的知识需交由各自专业领域的人士来学习、应用。

以 AR 骨科手术导航系统为例:Surgalign 宣布其用于腰椎手术的 HOLO Portal 手术引导系统已获得 FDA 510(k) 许可,称其为世界上第一个由人工智能驱动的脊柱手术增强现实引导系统。系统基于机器学习的图像引导技术,与 AR、自动脊柱分割和自动手术规划相结合:多个卷积神经网络根据术中 3D 成像对患者解剖结构进行分割和分组,自动标记解剖结构;软件可立即建议螺钉轨迹、测量椎弓根大小并建议螺钉尺寸;再通过交互式 AR 显示屏在患者解剖结构上提供 3D 引导叠加,减少外科医生的认知负荷,且无需笨重的头显。共建同学的启发:了解了好几个类似的 AR 骨科手术技术之后,发现只有 Surgalign 运用了 AI 实现个性化的手术规划,而且医生只需在显示屏上方就能看见精确的指示。

雷区预警:这个案例本身非常专业优秀,共建的同学也提炼了很多干货知识点。我们独自搜集学习的此类案例可以作为科普学习材料,但不能直接用在方案中。在真实的设计情景中,无论是应试、个人作品集制作还是工作,都需要谨慎对待跨学科的专业领域,尤其是医疗领域,行业壁垒非常高。除非有权威、严密、受到行业公认的技术参考与设计标准参考,并且有专家团队的支持,否则无法进行专业的设计产出。学习前沿技术需谨慎,要清晰认知专业壁垒,找准自己能「hold」住的限度。

Notion 案例卡片封面:手术台上方的显示屏叠加了脊柱三维模型,标题 AR 骨科手术导航系统
共建案例卡片:AR 骨科手术导航系统

TOOLKIT

课程专属加油站

每节课后配有专属知识加油站。知识卡片随课程逐步解锁、持续建设;卡片结构与内容根据课时特色进行个性化设计,实际情况以课程内容为准。课程作业非强制性任务,但建议学员积极完成。

加油站知识卡片结构

以「EMG 肌肉表皮下微小电流」为例,一张知识卡片分为概念介绍、设计案例、头脑风暴三部分。

Notion 知识卡片:上方为发光手写文字的视频截图,下方标题 EMG 肌肉表皮下微小电流,标签肌电、可穿戴,折叠栏为概念介绍、设计案例、头脑风暴
知识卡片:EMG 肌肉表皮下微小电流

案例共建方式

课程加油站开设专属共建区。案例卡片可复制,按姓名、案例、介绍、启发、网址填写后粘贴上传。

案例共建模板:三张灰底卡片,每张含姓名、案例、介绍、启发、网址五个填写项
案例共建模板

加油站 · 案例共建上传区

Notion 专题页「生理信号传感技术」:知识卡片缩略图、问题思考讨论区,以及命题设计与方案提交栏
专题页:生理信号传感技术

加油站 · 问题思考讨论与方案上传区

讨论区截图:一段设计创新方案文字,右侧附一张小的参考图
问题思考讨论与方案上传区

加油站 · 方案互评区

常见问题

5 个问题

Q01

这个课程是直播吗?

案例百科班是录播课程,共约 10 小时。

Q02

一个班多少人?

在线班不限人数。

Q03

可以只自己报名,不团报吗?

可以,但单独报名价格较高,建议团报。

Q04

第一期和第二期有哪些区别?

主要是课程专题不同。第一期课程专题偏向人机交互基础技术,如传感器技术等,也包括 AR / VR、多模态交互等智能交互专题案例。第二期专题补充了新出现的热点话题,比如 AIGC、大语言模型、NFT 数字艺术元宇宙等。

第二期其余 5 个新专题涉及面比第一期更广,不仅仅局限于智能交互产品 / 人机交互技术这一块,会讲互动媒体艺术装置、信息导视系统、车载代理、AI 智能体等能帮助交互设计师开拓思路的专题。

Q05

报名前需要了解哪些课程须知?

一、推文中所选案例皆引用于智能交互案例百科班视频课程与拓展材料;部分内容为课后作业材料,将随课程进展而持续更新。

二、课程作业非强制性任务,但建议学员积极完成。

三、案例知识卡片随课程逐步解锁,持续建设丰富中;知识卡片结构与内容根据课时特色进行个性化设计,实际情况以课程内容为准。

  • 案例素材仅用于教学讲解,版权归原作者。
  • 朝菌学园拥有学员作业、共建案例素材的使用与公开展示权。

学员评价

  • 案例百科班学员(原图未署名)

    我有看过之前的案例百科班!ppt 上面的知识点超级丰富(要是课程可以提供 ppt 就更好了 hhh)。对了!我还觉得现在增加的这个知识加油站很 nice,我经常在课后根据里面的内容进行复习总结和拓展学习~
1 / 1

想知道这门课适不适合现在的你?把你的背景说一说。

咨询这门课程
咨询