Portfolio Yanwen Han UX/UI
Generative Art
InfoViz
CONTENTS
智能灯泡 桌面客户端 UX/UI
With Jacaranda Urban Interaction Design & Storytelling
生成艺术 作品展示
澳大利亚华人博物馆互动装置
智能灯泡 桌面客户端 UX/UI 个人项目 时间：2019.12 本项目成员一共 3 人，通过前期合作调研，分析智能灯泡客户端产 品的不足和机会点。在产品目标一致的前提下，小组 3 人分别独立 设计手机客户端，桌面客户端和智能面板的用户界面。我负责桌面 客户端。
Research - 市场背景 - 竞品调研 - 用户调研
Define - 设计洞察 - 设计方向
Ideate - 测试发现
Outcome - 信息架构 - 原型说明 - 视觉展示 - 交互文档
Reflection - 跟踪评估
Contents
市场背景
物联网技术（IoT）让人们得以窥见万物互联的未来世界。 在家居领域，智能家居给千万家庭带来全新的体验。 智能灯泡，为光亮而生，是最受欢迎的智能家居设备之一。 价格实惠和易于安装的特点，让智能灯泡成为比较理想 的入门级产品。 智能灯泡大多通过客户端控制， 主要操作包括开关电灯，自定义灯光颜色等。 目前市场上的领先者是 Philips Hue。
竞品调研 4 个主要的竞品 • • • •
Philips Hue IKEA Home smart Yeelight LIFX
智能灯泡客户端的核心功能 • 设置灯光颜色 • 灯泡群组管理 • 设置场景 • 预设灯泡开关 / 场景触发
Philips hue 界面直观简洁，新建场景的产品 逻辑清晰，但缺乏对灯泡和群组， 以及群组之间的操作思考
IKEA Home 灯泡控制操作便捷，灯泡和群组 的层级明显，但缺乏总控，操作 数量较多的灯泡时体验糟糕
LIFX Favorite 功能提供给用户一个快 速控制常用灯 / 灯组的路径，但 开关的 UI 不符合用户普遍的认 知，另外同样有拥有较多灯泡的 用户不满的问题 YeeLight 默认的灯光场景模式丰富，灯光 颜色参数多，但太多无必要的点 击和页面，导致部分功能层级过 深，容易迷失
用户画像 用户特征
青年男性居多
核心用户模型 Eric
Claire
35 岁
28 岁
男性
女性
“ 我 有 10 个 房 间，90 个 灯 泡， 用 app 管理起来真的很麻烦。” 重生活品质 追时尚潮流
中高收入
“我要先点开群组，再打开灯，为什 么不能直接打开灯呢？
动机 科技产品发烧友，乐意尝试智能灯泡 有经济能力对生活品质进行升级
动机 对当下新潮流敏感 想成为朋友圈的时尚达人
痛点 拥有太多灯泡，现有 app 很难管理，比 如复制灯泡进灯组，移动灯泡，合并灯 组等
痛点 操作繁琐，初次使用需要思考 安装过程卡壳，如找不到设备 稳定性不够，如闪退，感到烦躁
目标 高效便捷地控制和管理智能灯泡 享受高科技带来的智能和愉悦的体验
目标 灯光控制方便简单，倾向懒人方法 尝试新鲜事物，提高生活品质
设计洞察 竞品问题总结 普遍任务完成效率不理想 没有平衡好拥有多数量灯泡的用户的需求 灯组操控的颗粒度不够
产品目标 提高产品性能表现 发掘客户端对提高业务营收的价值 提升 NPS 净推荐值，建立用户口碑
稳定性和可用性有待提高
用户目标总结
设计目标
感受酷炫科技
提高用户任务的流畅性
快捷、直感、高效地操控和管理家中的灯 光系统
优化信息层级，提高灯组的易用性
提升生活品质，多尝试新鲜的、高科技的 事物
提升多灯泡用户的体验 平衡商业利益和用户体验
设计方案
从控制智能灯泡的便携性来看， 移动端的具有明显的优势； 而从设备管理角度看， pc 端的大屏幕更适合展示丰富的信息。 综合以上两点，我们小组讨论决定， 手机移动端重点解决如何快速操控灯泡功能， pc 移动端重点设计多设备管理 + 数据可视化模块
提高用户任务的流畅性
• 减少不必要页面，减少点击跳转 • 页面简洁直观
提高灯组的易用性
• 支持在灯组之间复制，移动灯泡 • 支持合并，复制灯组
提升多灯泡用户的体验
• 智能灯泡相关的数据可视化面板
提高业务营收
• 利用大数据预测灯泡平均寿命，
提醒用户即将到寿命期的灯泡， 同时提供购买网上商店的链接
测试发现 草图
用户测试 在线稿和低保真原型的基础上，我们进行 了任务导向型的用户测试，并结合了 SUS （系统可用性量表）和 QUIS（用户界面 满意度问卷）整理出一份适合我们产品的 调查问卷，然后再针对性进行深入访谈。 另外，我们通过计算任务成功率，平均花 费的时间等，对迭代有进一步方向。
重要发现和迭代思考 操控灯泡和灯组的弹窗应用不 当，导致用户心流被打断
如何设计富视觉非模态反馈
数据面板的数据类型和用户的 心理模型有出入，比如不理解 为什么要区分峰谷电
列出不同的数据维度，让用户 按优先级排列或补充
在保证核心功能的前提下，如 何区别于竞品，成为更贴心的 软件？
通过数据了解用户的习惯，预 见需求；适时给出提醒等
信息架构 灰色字体的内容 不在本次设计中体现
原型说明 导航栏 + 数据总览
导航的组织方式按产品功 能分，由于菜单数量少， 信息层级简单，所以采用 顶部导航布局。若后期增 加 到 超 过 7 个， 可 以 改 用侧边导航布局，或者在 顶部导航的基础上增加一 个层次
这个数据总览板块的设计 目标是选择合适的图表类 型解释数据，用合理的数 据 - 油墨比完成数据可 视化。该模块的功能定位 是概览第一，其次再按需 查询更多
考虑到用户在使用客户端 时，大多数场景是在一个 光线较暗的地方调试灯 光， 所以默认是暗黑模式。 同时给用户一个普通模式 的选择，以适应光线较好 的使用场景
原型说明 数据总览 最重要的用电情况放在左上方， 这是用户最容易注意到的地方。 展示月的用电量。 理由 1. 按照居民习惯，电量以月为周 期统计 2. 让用户一眼看到最关心的数据 3. 其他时间周期，如周、年或自 由区间，可通过“查看更多”下钻 查询。
用电量分布采用树形图，用面积 来表示占比。原本候选的图表有 环形图和玉块图。一般来说，在 定序的视觉通道表现力上，角度 优于面积，但考虑到灯组和灯泡 的数量会比较多，环形图和玉块 图不能承载这么多分组。而树形 图可以很好地利用空间，既能表 现占比情况，也能容纳较多分类。 另一方面，利用了亮度视觉通道， 来表现灯的开或关的状态，进一 步丰富内容
* 测试时用户表示最关心的是电费。但调研发现，电费实行阶梯收费。 灯泡的单独耗电无法合理预估电费，因此电费数据统计可行性不高。
用电量是用户关心的数据，在这 基础上又做了分类：日、周、月、 年和历史总量。历史总用电量是 用户和产品 / 品牌互动的一个关 键数据，值得单独提取出来展示。 “超过 xx% 用户”的提示，让新 用户感知到品牌的用户群体，同 时侧面助增老用户的忠诚度
用电时间分布是记录某个时间段 内，平均每天 24 个小时每个小 时的用电量。这里采用径向柱状 图来可视时变数据，既节省了空 间，也直观地体现了数据的周期 性
日程表利用时间线的方式罗列定 时项目。蓝色的点表示时间已经 经过，灰色卡片表示已经执行 过。时间显示方面，在着重强调 具体时间点的前提下，还包括了 年份和日期，减少歧义。原本设 计时，给出的信息是开始时间点 和持续时长，但在测试中发现， 用户在心里对时间进行了一次加 法计算，增加概览成本。直接给 出关闭时间点更直观
原型说明 灯泡管理
数据统计区域：兼有过滤功能。 按总 - 分思路划分数据类型。寿 命提醒将在在下文详述 考虑到用户的使用行为，默认按 使用时长从长到短排序，更大概 率帮助用户快速找到目标灯泡
悬停即现编辑 icon，点击即可 修改名称，目的是减少跳转，维 持用户心流
表格区域：表格一共有 6 个字段。 颜色、亮度和开关 3 个常用操作 统一布局在右手边，方便大部分 用户快速触达
开关的 icon 不同于移动端的滑 动开关，点击的方式更适合 pc 端。
考虑到批量操作的功能，灯泡列 表不分页，采用下拉加载数据的 方式，这样用户可以一次性修改 尽可能多灯泡。当有灯泡被勾选 时，批量操作栏出现并固定在底 部。4 个按钮中，移动按钮设为 红色，表示风险提醒。剩余 3 个 按钮操作无主次，均采用一致风 格
原型说明 灯泡管理 - 亮度和颜色 亮度和颜色设置均采用非模态弹框 以减少对用户心流的影响
颜色 鼠标接近圆形色板时，圆形出现 阴影，引导用户点击，然后跳出 气泡弹框。 考 虑 到 对 hex 和 rgb 取 色 不 熟悉的非专业的用户，取色器 选 择 了 hsb 的 hue（ 色 相） 和 saturation（饱和度）的概念。 为了使用户更直观地理解色盘， 在 传 统 hsb 色 盘 的基础上挖空 中间，保留最具有鲜明颜色特征 的外环。选定色相后，再在右边 竖状滑动条修改饱和度参数。最 终的颜色在环形中间展示。任意 点击弹框以外的位置可以退出颜 色修改
亮度 站在用户角度看，亮度调节功能 的使用频率比选择颜色更高。所 以这里将亮度单独划分出来 外框的设计暗示参数可点击修 改。点击后会弹出滑动条。用户 既可以粗略滑动条件，也可以精 确修改参数
原型说明 灯泡管理 - 寿命提醒 从用户需要及时更换灯泡的需求出发， 将贴心的推销产品化 剩余寿命 考虑到每种型号的灯寿命长短 不同，若按百分比去计算，可能 会 出 现 10% 剩 余 寿 命 是 20 个 小时，而 5% 剩余寿命是 25 小 时。按百分比可视化出来的数据 会存在误导的可能 解决办法： 剩余寿命小于等于 400h 开始提醒，>200&<=400 用黄色表示；<=200 的用红色 表示。按剩余时间从短到长排 序。条形越短，估计可使用时间 越短
定位灯泡 考虑到一部分用户在同一区域 会安装大量相同类型的灯泡，该 功能可以快速帮助定位。如，点 击“定位灯泡”，目标灯泡快速闪 烁2下
寿命提醒卡片的状态 寿命提醒 =0，圆点为灰色 寿命提醒 >0，圆点为红色 若有新增 n 个寿命提醒，出现 +n 红色气泡角标，用户点击后， 气 泡 消 失。 如： 新 增 2 个 寿 命 提醒，气泡显示 +2 目的是以较少打扰的方式，吸引 用户的注意力，合理传达信息
购买同款和 banner 位 购买按钮用了高强调，推荐用户 点击。“享 9 折”和底部 banner 是业务运营位，“享 9 折”支持 文案可配
原型说明 灯组管理 - 灯组操控 灯组列表的布局最初有 2 个方 案， 一 种 是 采 用 普 通 列 表， 布 局从上往下；另一种类似 task management 的 卡 片， 布 局 从 左往右。虽然视觉上卡片会比普 通表单“高级”，但考虑到从左往 右布局的空间可利用率不高，且 若灯组数量较多的话，会影响查 找和拖拽效率。 最后选择普通列表样式，并配合 嵌入层。这样既增加空间的有效 利用率，又尽可能减少上下文被 打断的情况。
开关 总控该灯组下所有灯的同时开或 关 添加灯泡 添加按钮放在嵌入层底部 原因 ： 1. 内容层级属于灯泡层 ; 2. 添加 新灯泡的操作频率比查看 / 操控 灯泡的频率低
复制 直接复制灯组。这种情况考虑到 用户若要建一个内容相似的灯 组，可以省去新建灯组的流程， 更快完成任务 删除 针对灯组，直接一个删除按钮会 产生歧义，是只删除灯组，还是 灯组灯泡一并删除。用户会因为 不确定而害怕点击。所以这里应 用了下拉选择框，清楚列出两种 删除情况 移动 1. 下拉选择框：复制一个灯组， 然后将复制件移动到另一个灯 组，原灯组位置保持不变，适用 相隔距离远，或有复制需求的灯 组； 2. 拖拽：将一个灯组拖拽合并 到另一个灯组，不产生复制件， 适用相隔距离近的灯组
原型说明 灯组管理 - 灯泡操控
颜色和亮度 保留这两个参数是因为： 1. 是产品的核心功能 2. 预计在灯组场景也会被高频 使用
开关 灯组下的所有灯泡全开，灯组总 开关显示开启；只要任一一个灯 没有开，灯组总开关显示关闭。 开关的显示逻辑是基于测试中 了解到的用户心理模型
更多操作 1. 查看详情，直接跳转到灯泡列 表该灯泡所在行。其他信息在灯 组下优先级不高，为了避免信息 噪音，选择以“查看详情”的方式 略去 2. 删除的交互思路同灯组 移动 1. 复制到 2. 拖拽 交互思路同灯组
视觉展示 文本与背景对比度已通过 color contrast checker 的验证
交互文档 文档结构思考
交互文档
1
交互 点击选择卡片，点击后高亮该卡片 当鼠标在数据卡片上时，变成 hover 状态， 情况 1：该卡片已高亮，则高亮色不变 + 出现阴影 情况 2：该卡片没被高亮，则高亮 + 出现阴影，同时另一个高亮卡片保持 原样 【全部灯泡】 1. 该 userid 下所有当前接入的设备的总数 2. 点击该卡片，在列表区显示全部设备 【已开启】 1. 该 userid 下所有当前接入的设备中状态为开启的设备总数 2. 点击该卡片，在列表区显示开启状态的设备 【已关闭】 1. 该 userid 下所有当前接入的设备中状态为关闭的设备总数 2. 点击该卡片，在列表区显示关闭状态的设备 【寿命提醒】 1. 该 userid 下所有当前接入的设备中，剩余寿命 <=400 小时的设备总数 2. 点击该卡片，跳转至寿命提醒页 3. 状态： ①设备总数为 0，圆点为灰色 ②设备总数不为 0，圆点为红色： ③若有新增 n 个设备，出现 +n 红色气泡角标。点击卡片后，气泡消失。 如：新增 2 个设备，气泡显示 +2
仅展示灯泡模块交互说明（部分） 1
4
3
2
3
搜索 搜索框，点击输入，精确 搜索， 支持搜索灯泡名称、 灯组名称、型号。随用户 输入，实时在列表区显示 结果
4
数据统计 / 筛选区
接入灯泡 点击跳转至添加灯泡流 程页
2
排序选择 点击选择排序方式。 未被选中的底色为灰色，被选中后变底色 视觉展现：滑动切换 默认排序“使用时长从长到短”
交互文档 仅展示灯泡模块交互说明（部分） 5
列表区
5
数据 默认展示该 userid 下所有当前接入的设备 点击【已开启】、 【已关闭】或【寿命提醒】的情况见“数据统计 / 筛选区” 描述 排序 默认按使用时间从长到短排列，排序切换见“排序选择”描述 加载 预加载 50 条记录，不足 50 条则取全部 下拉自动加载，每次自动加载取 30 条记录 交互 当鼠标移入某一条记录的区域时，该条记录底色改变。并且在灯泡名 称后面出现编辑 icon 快速置顶 当页面下拉至第一条记录消失后，在网页右下角显示快速置顶的 icon；若页面回滚到出现第一条记录，置顶 icon 消失
字段
字段描述
复选框
1. 点击任意一个复选框，底部弹出批量操作栏 2. 点击表头复选框，全选记录 1. 该灯泡的名称 2. 灯泡名称有唯一性，新的名称不具有唯一性时，在输入 框下给出红字校验提示 1. 鼠标移入 tag 区域时，tag 颜色改变，并出现阴影 2. 点击 tag 跳转到灯组页面下相应的灯组所在行，吸顶显 示，且该灯组为展开状态，高亮该条灯泡记录，任意点击 空白处则高亮消失 1. 鼠标距离文字边缘 10px 时，鼠标变成 hover 状态 2. 点击后在新窗口中打开商品详情页
灯泡名称 所属灯组
型号
字段
字段描述
颜色
1. 鼠标距离色块边缘 10px 时，鼠标变成 hover 状态，色 块出现阴影 2. 点击后在下方跳出颜色编辑弹框，见颜色编辑，任意点 击空白处后弹框消失且不保存修改 输入框，点击键入，同时下方弹出亮度滑动条，支持输入 修改和调整滑动条修改，滑动条和参数值同步 1. 开关：点击操控，开启状态为绿色，关闭状态为灰色 2. 其他操作：点击后下拉单选，菜单包括：动效、定时、 定位 3. 移除：点击后弹出对话框，警告用户删除风险，确认删 除后，在表头上方出现全局移除成功提示消息，同时支持 撤回。消息保持到用户下一个操作，若用户没有任何操作 的话，1 分钟后消失。详见通用部分 - 消息和反馈
亮度 操作
跟踪评估 利用 HEART 模型对设计评估的办法进行思考
评估维度
评估办法
Designed with
and
With Jacaranda Urban Interaction Design & Storytelling Individual Project 时间：2020.06 受新冠疫情的影响，多国不允许公众聚集，人们要时刻保持 social distancing。城市交互设计要如何在不违背社交规则的前提下，在公 共场所向公众讲述故事。设计作品要如何帮助社群渡过这段艰难的时 光。本项目由笔者独立完成，并入选悉尼大学设计学院 2020 年作品 展 Research - 背景介绍 - 用户调研
Define - 故事探索 - 场地选择
Ideate - 方案构思 - 原型制作 - 测试分析
Outcome - 最终方案
Reflection - 方案反思
Contents
设计流程
背景介绍
近年来，城市规划和设计开始注重创造高 质量的空间（placemaking）以供人们体 验和享受。Media Architecture 作为城市 交互设计的一个分支，代表和建筑结构融 合在一起的新媒体艺术互动装置。 在城市各个角落生活的人们有意识地或者 无意识地把自己的故事播种在这个空间， 而城市又以记忆的方式回馈给市民。设计 师该如何找到并利用这些有关于城市空间 的故事和记忆，来创造一个有温度，有意 义，并且对社区 / 社群有支撑力的设计？
另一方面，新冠疫情的爆发严重影响市 民的日常活动。在这之前，人们把自由 穿梭在城市视为理所当然的事情，而现 在下午 6 点的 CBD 如同与世隔绝的小 村。要为这个特殊的时期做城市交互设 计，最大的挑战是：公共场所不允许人 群聚集，甚至没有人能到现场的情况下， 设计师该如何应对，以保证故事的传达 和用户的体验。
用户调研 v
用户模型 该项目的目标群体是悉尼大学 社群，用户调研以问卷和访谈 方式进行，主要目的是了解目 标群体如何看待疫情，以及他 们的感受和需求
发现
Jack
Karen
悉尼大学研究生
悉尼大学本科生
焦虑感
焦虑感
社交欲望
社交欲望
对未来的信心
对未来的信心
1. 用户对疫情影响下的未来比 较迷茫，对当下的经历略显不 知所措。如用户访谈中一位用 户所说：现在感觉像刚走进了 一条陌生的隧道，没人知道什 么时候能走出去。整体心态因 疫情受到负面影响
用户特点
用户特点
2. 不管是社交需求还是缓解焦 虑，本质上来说都需要精神方 面的支撑
• • • • •
• • • • •
用户需求
用户需求
• 发掘宅家玩法 • 更多渠道可以社交
• 缓解自己的焦虑感 • 金钱援助
疫情一开始冲击很大，但逐渐麻木 仍然坚持出门运动，但低频 外出时自我保护意识强 感觉到生活变得无聊，寻求线上社交 为就业感到担心
因为疫情的持续扩散感到焦虑不安 对人的情感需求敏感 具有较强的同理心和同情心 本身宅属性强，疫情期间更倾向待在家 会特别留意学校官方有关疫情回应邮件
故事探索 在一番探索后，评估悉尼大学标志性的蓝楹花树是最合适的故事
过去
现在
选择理由 用户面临的问题 心态负面，需要精神支撑
蓝楹花树的故事能够
悉尼大学的老蓝楹花树是由 Waterhouse 教授于 1928 年种下的。当 时一共种了 4 棵，老蓝楹花树是唯一 1 棵活下来的 2016 年，88 岁的老蓝楹花倒塌死去。 将近一个世纪的时间里，它陪伴了几代 人的求学时光。同时，大学重要的事件 一定会有它的参与和见证。悉尼大学社 群把这棵蓝楹花当作“自己的树”来看 待，大部分人都会感受到自己和树有联 结
早在 2014 年，大学已经发现树的寿命 将至，为了延续它的生命，悉尼大学提 前请专业人士提取了老树的基因，并克 隆出两株幼苗 2017 年，一棵克隆的蓝楹花树被种在 老树当年的位置。悉大的蓝楹花树在死 后获得重生，开始了新一轮旅程。 虽然小树的风采不及当年的老树，但带 给大学社群的慰藉并不少，因为大家相 信小树终有一天会长成大树
1. 对当下的事件做隐喻：虽然 我们现在正遭受疫情带来的变 故，但事情终会往好的方向发 展。就像悉大的蓝楹花重获新 生一样。它冬天不畏寒风，春 天依然开花，提醒着我们也拥 有强大的生命力，寒冬不久后 将迎来春天，重启生活，回归 日常，再次壮大。“如果冬天 来了，春天还会远吗？” 2. 对内可以凝聚力量，加强 社群文化；对外可以文化输出 的同时提高知名度，从而也反 哺社群认同感
场地选择
建筑表面（facade）并不平整，有 窗户、柱子、拱门、墙檐等结构， 需要考虑如何利用这个特点 The Quadrangle 有足够大的空间让 来到现场的用户保持社交距离 有足够的空间布置投影设备 没有机动车经过，安全
悉尼大学 The Quadrangle 的南区， 也是栽种蓝楹花树的地方 蓝楹花的故事背景，使这个地点成 为最理想的场地
方案构思 设计的主旨是给用户提供精神力支撑
内容探索
文字型内容在建筑表面不容 易被看清，仍以图形为主
主体要一眼明了，不需要过 多的装饰性元素去模糊主次
对过往设计案例研究发现， 大众对表现自然景观的设计 作品接受度高
用一棵数字蓝楹花树来隐喻 蓝楹花的“魂”，加上花瓣飘 落的效果，模拟真实景象
交互探索
疫情期间用户交互方式改变， 人们不倾向触碰公共设施， 移动客户端控制更安全
手势触发：不适合远距离控 制，户外大环境不好识别
语音触发：开放型场地，环 境噪音会影响识别准确率
利用用户自然的行为（如走 路，移动）触发场景，同时 能带给用户惊喜
方案构思 考虑到疫情期 间人们不便出 门的情况，规 划了线上和线 下两大场景
线上交互
线上用户
线上 用户通过大学 官方邮件访问 网站，通过网 站远程交互 线下 很少人会出现 在实地，但不 排除周围居民 来散步，所以 通过检测人的 移动触发场景
线下交互
访问网站，左边是直播 视频区，右边是操作区
若花瓣数量 >60， 则触发蓝楹花树
利用相机监测固定范 围内是否有人移动
触发带有风吹动 效的蓝楹花树
在操作区移动鼠标，直播 区同步显示生成的花瓣
线下变化在直 播上实时同步 花瓣由紫变蓝
点击选择花瓣颜色
若有人经过 被监测的区域
原型制作 工具： Processing
内容
通过递归算法和变量控制，一 棵有生长动效和风吹动效的分 形树
利用 Box2D Library 生成障碍物和花瓣。 花瓣下落时的物理特征更自然，如：花瓣 堆积在窗沿，随柱子边缘滑落，落在拱门 上弹开
通过 Keystone Library 把树、 花瓣和障碍物映射到建筑表面
交互
线上：利用 controlP5 添加可 点击交互组件，支持选择花瓣 颜色，丰富场景视觉层次
线上：通过移动鼠标生成花瓣
线下：OpenCV 无法兼容 P3D 环境， 改成鼠标模拟用户所在位置，当鼠标 进入检测范围时触发场景
测试发现 通过调查问卷，用户访 谈和 Attrakdiff 评估法 收集和分析用反馈
50% 的用户表示和设计互动时， 不太能感受到和其他人的联系。 线上环境很难建立人与人之间的 联系
改变用力方向，把个人和树联系起 来，让用户感受树传达的精神。在 网站首屏解释蓝楹花树这个比喻， 传达给用户本项目想要鼓励大家的 目的
用户普遍认为这个故事很有意义
问题 改进
线上和线下视觉效果相似，用户 对两者关系存有疑问
优化线上线下场景的视觉效果，做 出差异（如下图）；逻辑上，让线 上线下的交互产生联结，共同构成 一个核心场景（见最终方案）
视觉 Before
视觉 After
缺少场景提示用户这个系统正在 运行
创建初始场景：保证无人交互的情 况下有固定数量的花瓣做飘落动画
最终方案 现场图示
探测行人并回 传数据的设备 The Quadrangle 的现场布局
>>>
Gap 区
交互墙面 Media Facade
交互区
装有投影和直 播设备的箱子 舒适区 aka 围观
探测区域
最终方案 故事板
最终方案 故事板
最终方案 核心场景 - 场景 3 线上 + 线下
- 场景 2 单线交互
- 场景 1 0 用户 线上
线下
• 普通蓝楹花树 • 花瓣
保证墙面上有 20 个 花瓣在飘落
• 盛开状态的蓝楹花树 • 风效
• 盛开状态的蓝楹花树 • 风效 • 花瓣
用户体验 看见盛开蓝楹花 + 线下用户
线上用户
线下用户
接近过程中看见盛 开的蓝楹花
看见普通蓝楹花树
发现网站
发现网站入口
发现光亮
最终方案 原型流程图
定义：在行人探测设备的探 测范围内的用户
用户
线下用户
线上用户 Y
逻辑判断
N
返回结果 N
点击选择颜色
Y
墙面上花瓣数量 维持在 20
移动鼠标
访问网站
Y
注意到信息板
Y
N
生成花瓣 新颜色 N
花瓣数量 >60
Y
线下有用户
默认颜色
Y N
花瓣飘落场景
普通蓝楹花
盛开的蓝楹花 + 风效
方案反思 我认为我找到一个好的故事 切入点，但对于方案，我反 思有以下两点不足的地方： 1. 人与人之间的联系（social needs）没有很好地解决 2. 网站控制 + 线下交互 = 开发成本大 如何把方案往更快、更轻量、 更便宜的方向去改进？并且 满足用户的社交需求呢？ 我思考了另一种方案，全 部转移到线上，主要依托 YouTube 的直播和 API， 如右图所示
Inspired by
and
生成艺术 Processing / P5.js Individual Practices Handcoded with
and
>>> AudioViz - Processing + TouchOSC
Contents
>>> 练习 需翻墙查看
澳大利亚华人博物馆 互动装置设计项目
（Upcoming）
DataViz & Interaction & Storytelling Individual Project 预计完成：2020.12 澳大利亚华人博物馆 (MOCA) 是澳大利亚拥有和管 理的一个新的文化机构，致力于记录中国移民的历 史和生活故事，以及他们在几个世纪以来对澳大利 亚的贡献。博物馆由悉尼市政府资助建立。 MOCA 刚成立不久，这次联合悉尼大学设计学院和 悉尼大学中国研究中心，希望通过数字技术来讲述 在澳华人的故事，从而达到对外宣传推广的目的。 我成功申请到该项目作为我的毕业设计。目前已和 导师敲定方向，用数据去讲故事，把数据作为重要 的设计素材，辅以互动设计。 Contents
Yayyy you made it! Thank you for reading through my portfolio