UX设计室优秀作品赏析 | 远程协作—

凯诺设计室（Canopy Design Studio）基于研究、实际项目而设立，每期4-12人、5-10周，在设计室讲师的带领下，从无到有生成完整作品方案，回归设计专业基于studio教学的本质，致力于探索学术深度与未来趋势，涵盖建筑、景观、城市、艺术、人机交互、服务设计等领域。

这是凯诺第100个设计室

▽

远程协作——高效的虚拟化未来

导师简介

*点击头像查看详情*

韩雨栩

Product Designer at VMware

University of California, Berkeley，Architecture

课程详情

Design is clear thinking made visible.

——Edward Tufte

2020年突如其来的COVID-19加速了整个世界的虚拟化，远程工作和学习正在加速成为一种常态，这给各行各业都提供了新的机遇和挑战。各大企业也在迫切的寻找提高工作或学习效率的方法以满足长期甚至永久的远程办公或授课。在这样的大趋势下，什么样的产品或交互设计可以帮助广大远程工作或学习的用户更有效率的合作呢？

本设计室旨在启发学生紧跟时事，站在未来趋势的角度，从需求探索开始，发现问题，动手调研，发挥想象力和设计能力，找出解决问题的方法并实现。在讲座、互相学习和思考的过程中，掌握用户体验的基本思路和设计过程。

最佳设计奖：曹心怡

“

曹心怡：感谢Grace老师的细心指导，除了设计本身，还教了我们很多交互申请与就业的相关知识和经验，让我受益匪浅。雪诗老师的UX培养计划也很有帮助，对于初学者是非常合适的课程~还有可爱优秀的队友们，大家虽然最初都是交互方面的小白，但是一起努力一起开脑洞的时候非常欢乐，很开心遇到大家！

”

Virtual Classroom

调研部分，由小组成员共同完成

1. 设计背景

疫情的爆发使更多人开始进行远程工作与学习的尝试，人们不仅体验到了远程工作的便利，同时也感受到远程工作对比于线下工作存在的一些问题。其中，我们认为交互方式的限制是一个主要原因，为了探究远程工作导致的交互方式变化怎样影响人们的工作，我们进行了用户调研。

2. 用户调研

在用户调研阶段，我们首先采用了调查问卷的方法，发现其中有远程学习经历的大学生普遍认为远程学习方式影响了学习效率，并且希望增加与协作者的互动，因此我们决定继续将调研方向聚焦于大学生的远程学习上。

根据用户访谈结果，我们发现大学生的远程学习有一些不同的协作场景，在不同的场景也存在着不同的交互方式，因此我们采用亲和图分别在横向与纵向对用户痛点进行分类。

经过以上的分类，为了更明确在各个场景下用户的痛点和目标，我们抽象出了学生和老师两个用户画像。

我们采用用户地图梳理两类用户在教学过程中的流程和相互关系。

3. 定义痛点

通过以上研究，我们发现用户在工作流程中实际需要的是：

a. 了解参与者的状态：通过面部表情或其他方式获得听众的反馈，以了解听众是否专注于传递信息和理解内容。

b. 提高沟通效率：能够使用肢体语言、手绘图进行沟通和报告，指出要点，准确表达想法和观点，并获得听众的有效反馈。

c. 增加学习氛围：查看协作者的实时状态，并判断每个人是否都在积极参与讨论，从而使用户更有参与感。

个人设计部分

4. 概念生成

我认为以上痛点的主要成因是：在使用现有的网课软件时，由于人数过多，或者背景环境复杂，所以难以直接分辨所有协作者的表情，导致沟通效率降低，进而也降低了双方的参与感，影响学习效果。因此我希望在设计中加入表情识别、语音识别和动作识别功能，增加用户的参与感，提高沟通效率。表情识别收集专注力及情绪信息，语音识别使学生在屏幕对面通过口头回答与老师互动，动作识别捕捉用户的举手动作。不同状态在视频图像上以颜色的形式直观展示。

因为老师鼓励我们想象不存在的设备，为了统筹远程学习中的各种功能，所以在设备部分我构想了一种可折叠屏幕电脑，可以进行触屏及写画，也可以有不同的摆放状态。

通过故事板进行设计构思和流程的梳理，我将功能根据不同协作场景进行了区分。

5. 主要功能

我将应用分为了老师端和学生端，并进行了两端的测试。

a. 课堂部分：学生可以记录笔记，看到老师在课件上的实时标注；老师端显示学生的图像，以及课件和学生状态统计信息，在课件上的写画会实时显示在学生的屏幕上，同时也可以调出白板单独书写。

b. 合作部分：参与者的写画会一起显示，也可以共享其他窗口，当学生需要特别说明一些问题时，可以举手，动作被识别后图像会单独出现在中央。

c. 展示部分：学生端屏幕显示图纸和讲稿；老师端显示图纸，可以进行写画和批注。

优秀奖：邵恺芯

Boundless

这次设计室探讨的课题是探寻帮助广大远程工作或学习的用户更有效率地进行合作的新产品或交互设计，我的最终作品是一个以笔记本电脑为载体，可以直接在空气中成像的投影设备。因为这是一个探寻远程协作无限可能的产品，所以我把它取名叫做Boundless。

Boundless © 邵恺芯

设计之初，我们经过小组讨论，将本次设计的使用场景定义在自身比较熟悉的高校教育上，并根据该场景中的学生、老师两类用户群选择了6名用户进行了详细的访谈。

Research © 曹心怡曹佳倩邵恺芯

在对访谈结果初步整理的过程中，我们发现氛围差、难以调动情绪、表达受限、效率低是用户访谈中的高频词。在对访谈结果进一步进行归纳、分析、整理的过程中，我们发现在高校教育场景下的用户的远程协作主要可以归纳为三种模式。用户在不同的模式中存在不同的行为特点，面临着不同的问题。

Affinity © 曹心怡曹佳倩邵恺芯

Lecture模式是以教师单方面声音输出为主的传授，对图像、动作的依赖性小。老师需要通过学生的表情知道学生的学习状态。学生也需要看见同学们的学习状态和老师的神态来更好地进入听课状态。

Cooperation模式主要针对老师课后布置的一些需要小伙伴合作的任务，合作时存在的最大问题就是看不见合作伙伴在做什么，不确定伙伴们是不是确实在全神贯注地参与讨论。由于交互方式的限制，有时候也会存在交流困难。

Presentation模式针对的则是讨论完成作业后，对讨论成果的汇报展示。与Lecture不同的是，除了声音的单方面输出外，Presentation涉及的行为活动还会包括图纸讲解、PPT展示等，对肢体语言的依赖性较高,否则容易对汇报者的意图表达造成障碍。

Journey Map © 曹心怡曹佳倩邵恺芯

经过前期调研分析，最终，我们将我们要解决的问题定义为：如何通过改善交互方式的局限性，提高合作效率，以此优化远程协作体验。

Wireframe ©

邵恺芯

界面对教师端和学生端分别进行了设计。在学生端，有Lecture，Cooperation，Presentation三个模式。在教师端，则有Lecture，Presentation两个模式。各模式分别对应于高校教育背景下的不同场景，针对性地解决不同场景的不同痛点。

UI Design © 邵恺芯

由于该产品的受众以年轻活泼的高校学生为主，因此在进行UI界面设计时选用了活力的橙、红暖色调。页面整体以柔性流动的图块、生动活泼的插画为主要组成部分，在视觉上带来轻松愉悦的感受，在视觉层面优化用户在使用该产品时的体验感、提升愉悦度。

在Lecture模式中教师端和学生端的界面一致。界面左边是老师讲课的影像，右边是所有学生的影像。老师提问后，学生可以点击自己头像的举手回答问题或提出疑问，举手的学生影像界面会变红。然后被老师点到之后，影像界面变大并移动至所有学生影像的首位。

Leture Mode © 邵恺芯

学生端Cooperation模式的中间是可以供大家一起写写画画的白板，两边是合作组成员的影像。正在说话或者写写画画的小伙伴的影像会显示于白板下方，以便大家更直观地知道各想法分别来源于哪个合作伙伴。

Cooperation Mode

在Presentation模式的初始页面中，左边是所有同学的汇报作品，右边的上面是同学的实时影像，下面是评图老师的影像。同学和老师可以在这个界面直观地对大家作业的总体水平形成整体认知。老师可以在大概浏览后选择值得评价的作业重点讲解或让作业的主人进行汇报。

Presentation Mode 1 © 邵恺芯

被老师指定的作业主人可以走到投影前指着自己的图纸进行讲解，也可以利用涂鸦辅助讲解，其他同学和老师看见的就是该同学在作品前实时讲解的影像。投影页面左下角会在汇报者端显示自己在其他同学端口的影像状态，以确定自己站在合适的位置上。

Presentation Mode 2 © 邵恺芯

被老师指定的作业主人走到投影前直接指着自己的图纸进行讲解时，其他同学和老师看见的页面左边就是该同学在作品前实时讲解的影像。

Presentation Mode 3 © 邵恺芯

听汇报的老师或同学如果对汇报者的作品有自己的看法，也可以走到自己的投影界面前，发表自己的看法。在其他听汇报的老师或同学端口，看见的就是两个人共同在作品前讨论、讲解的影像。

Presentation Mode 4 © 邵恺芯

完成整个UI流程设计后，我制作了一个High-Fi Prototype，邀请朋友进行易用性测试，修改了流程中的问题，并请朋友对产品提出建议。结合朋友的意见，我对产品进行了进一步的优化修改。使投影可以在空间内通过手势识别完成缩放移动，根据用户在不同场景中的不同行为模式，改变自身尺度以及与使用者的相对位置关系。参考网上的人体尺度模数，并进行了一系列实际调研、了解后，我得出了一组可以让使用者在不同情境下达到较优体验的参数，并将其应用在该产品中。

Usability © 邵恺芯

优秀奖：陈锘然

“

陈锘然：整个设计室的课程安排特别紧凑，韩老师系统地深入浅出地给大家讲解了从用户调研、总结分析、产品测试等一整个完整的设计周期，最后几节课还夹带私货给大家讲了怎么搭网站、找实习、做作品集，可以说是干货满满了！调研过程和两位队友的合作也学到了很多东西！最重要的是，因为本人贪玩（设计室中途还跑出去毕业旅行）加上研究生网课开学，进度一直堪忧，到最后评图的时候也只完成了wire-frame，但人美心善的韩老师最后还答应我评图结束后可以找她看深化方案，让我感动落泪！大家快来找韩老师上课！入股不亏！

”

Smart Box

1. 设计背景

在疫情的影响下，很多公司开始实行远程办公这一种工作模式，这给员工的生活带来更多自由，但同时也带来诸多问题。疫情过后，线上办公这一模式将会被更加重视，在家办公对空间的需求、时间任务管理的需求将会进一步增加。

2. 用户调研

经过前期合作的调研，我们采访了6位有过或正在经历远程办公的年轻人，同时收回72份有效问卷。

为了更好的理解用户需求，我们通过Affinity Map对用户需求进行了总结，发现：在家办公使得生活和工作难以区分开，互相干扰，让二者有一种“糊在一起”的感觉，这让工作时间变得碎片化，难以管理；另一方面，在家由于缺乏专门办公的空间，没有办公的氛围，员工的工作效率也不如线下办公。之后为了深入了解用户工作流程与空间的关系，我们以空间为纵轴，时间为横轴，对User Journey进行了探讨。

我们发现，由于家里没有专门的办公空间，用户会借用其他空间临时作为办公空间，并在不同空间中不停移动，进行除工作以外的其他活动。这对单一空间的功能弹性提出了要求。

3. Smart Box

主要是面向在家远程办公的年轻人的智能家具，针对解决家里没有专门的办公空间以及工作时间碎片化这一问题。这个智能家居整合了睡眠、娱乐、工作三大功能，可以根据需求变换形态，用户可以通过设定时间表来实现模式间的切换，保证了空间功能的单一性，减少其他活动的干扰，同时通过共享工作屏幕，设定、共享工作目标来营造办公氛围，提高办公效率。工作电脑、手机可以投屏到Smart Box自带的大屏幕上。屏幕可以触控也可以通过电脑手机端对家具进行控制。

4. 设计亮点

就目前的设计来看，我比较喜欢时间表设定协同空间变化这一设计。用户设定的时间条会一直悬浮在大屏幕的上方，当进入某种设定功能的时间（比如工作时间）家具会提前提示，并自动进行变换。通过对空间的弹性改变，在有限的空间内可以使得工作更有仪式感，时间设定更像一个空间改变的闹钟，比起传统的时间任务表，可以减少用户的自律压力。