ZHAO YI
目录 交互设计 Interaction Design Vito Camera iScarf 家箱智能硬件
商业模式策划 Business Strategy Soapmakies
交互优化设计 Redesign 小红书搜索优化设计
Yi's Portfolio
企业通讯软件搜索优化设计
产品设计 Product Design Lighting-up Connecto
交互设计 Interaction Design
UXD
Vito Camera v1.0 Internship in ArcSoft Aug 2016
UXD
Backgound The project is for Vito Camera, depends on requirements， creating users flow for customers. Users Requirements 1. Photo capture, Video recording, Panorama, Selfie 2. Having chance for editing photos Smartphone Devices Functional requirements of the camera application for Vestel smartphone device – VITO (MSM8937) VITO - Device information Platform : MSM8937 1.4 GHz Octacore OS Version : Android Marshmallow 6.0.1 Display : 5.0” FHD (1920x1080) Storage : 32 GB ROM / 3 GB RAM + Micro SD Card
For more project details https://issuu.com/yizhao/docs/vito_camera_v1.0
Vito Camera V1.0
Information Architecture
UXD
Vito Camera V1.0 Preview
UXD Flash
Vito Camera V1.0 Photo Mode - Back Camera ( Flash, HDR, Advanced, Effects, Capture Mode) HDR
Advanced
Capture Mode
Effects
Vito Camera V1.0
UXD
Each options in Settings
Photo Mode - Back Camera - Settings
Timer(on/off)
Shutter Sound(on/off)
Storage(internal/external)
Grid(on/off)
Preview(on/off)
GPS Location(on/off)
Touch Settings(snapshot/touch to focus/off)
Resolution(4:3/16:9/1:1)
UXD Camera Mode
Timer/Gestures
Settings
Vito Camera V1.0 Photo Mode - Front Camera
Vito Camera V1.0
UXD
Video Mode - Back Camera Camera Mode
Mode Flash
Settings
Recording
UXD
Camera Mode
Vito Camera V1.0 Video Mode - Front Camera
Recording
UXD Pano Shot
Switch capture mode
Vito Camera V1.0 Panorama Mode Settings
UXD
Appendix
Vito Camera V1.7
Reflection During 3 months' internship in Arcsoft, I am mainly doing with 2 projects. The first one is Interaction Design for camera in smartphone devices. The second one is for Visual Design, selecting and clarifying various effects in camera for customers. After finishing the projects, I clearly understand the design working process in camera. This project is for Vito Camera, depends on customer's requirements, our UXD team to create outcomes (interaction flow and user interface).
丝巾个性化适配体验平台－交互设计 合作赞助厂商：杭州宝石蝶有限公司
项目背景
用户定位
丝巾库方法体系建立
iScarf 是一个丝巾个性化适配体验平台，该平台提供给 用户针对个人的丝巾适配体验。每一条丝巾针对不同的 用户都会有不同的适配值，帮助用户从更直观的角度买 到适合自己的丝巾。
狂热的丝巾爱好者，具有一 定的鉴赏和购买能力的用户
根据丝巾 5 个参数和用户 4 个维度数据，针 对不同用户给出丝巾相对应的适配指数
目前，丝巾产品在线浏览方式多为展示丝巾产品图和模 特穿搭围系图。用户浏览时遇到的问题有，不知道这款 丝巾是否适合自己，需要什么样的服饰来搭配，以及该 款丝巾适合什么样的围法等。为了解决这个问题，建立 个性化适配体验平台是有必要的。 通过对宝石蝶有限公司相关调研，了解丝巾从设计，生产， 销售的目前状况；之后对 40 名左右的丝巾体验者做调研， 建立相关丝巾围系格局和人体围系坐标图，为相关方法 体系建立做支撑。
设计目标 1. 帮助用户从更直观的角度 选择适合自己的丝巾 2. 之后版本引入商家通道
性别女性不变的情况下： 参数 a 和参数 b 可以判定用户的年龄和职业 参数 c 和参数 d 可以判定用户使用场合
走访工厂，观察丝巾印刷过程
相关丝巾围系实验案例 实验名称： 丝巾褶皱信息形式与方式演绎探索 实验目的 1. 探究丝巾围系和展开状态下图案显 示的转化关系 2. 探究丝巾各显示区域与人体结构的 对应关系 3. 延展出不同标定区域方位矢量图
设计逻辑流程 登录注册
上传丝巾进行适配分析
用户资料编辑
设计细节 主页面
A 用户上传丝巾按钮 B 我（用户） C 丝巾库列表，目前按照官方推荐来排列 D 丝巾分类按钮，品牌 A-Z E 丝巾（导航栏－丝巾库列表） F 关于（iScarf 丝巾个性化适配平台介绍） 主页面初始状态在 E 丝巾（导航栏－丝 巾库列表）菜单下，导航栏图标加粗显示 用户所在位置。 C 丝巾库列表图按照时间由近到远排序
设计细节
设计细节
设计细节
设计总流程
设计总结 iScarf 是一个个性化适配体验平台，在设计过程中改 进了登录注册的交互流程，以及上传丝巾模块尽量做 到扁平化设计。目前，设计已完成版本 1.0 的交互流程。 计划在之后的版本 2.0 加入商家通道，用户分为普通 用户和商家 2 类；并开放不同规格丝巾的适配分析。 针对用户，增加社区方面的功能，让用户和用户之间 产生互动。
家用智能收发箱－交互设计 家箱智能硬件移动 app 我参与 O2O 智能家箱用户端 app 交互流程设计，主要负责 家箱开箱的交互设计。同时， 完成家箱产品众筹的推广文案 和宣传图工作并参与市场调研， 地推等运营工作。
项目背景
用户寄取快递模型
市场发展趋势 66,530 53,200
39,900 27,889 18,925 11,871 1,185
1,724
2,423
2012
2013
2014
中国网络购物市场 交易规模（亿）
3,352
4,279
5,208
2015
2016
2017
中国本地生活O2O 市场规模（亿万）
前期调研 1 快递业发展现有问题
观察法
1. 投递包裹效率低 2. 根据调查，在中国一个人一周收 3 个 包裹，每次取包裹来回 10 分钟，一 年需要 25 个小时，相当于浪费了， 3 个工作日。 3. 包裹安全性以及人员安全性存在一定 问题。 4. 包裹滞留现象
观察用户寄取快递行为，建立相关模型
通过流程梳理，罗列出用户在收 寄件方面以及配送员方面遇到的 相关问题。
用户目前遇到的问题 1 领取快递人太多，被误领 2 快递服务点少，退货麻烦 3 超商配送，上门送洗，人必须在家等待 4 陌生人伪装快递员敲门存在安全隐患
地点设定 小区（家）
设计目标 配合产品硬件设计家箱用户端 app。手机 app 远程控制家箱。
配送方（快递员）送寄快递遇到的问题 效率问题 1. 地址不正确 2. 与收货人电话沟通不畅 3. 送货上门，家中无人， 多次跑路，浪费精力 4. 小区门禁开启麻烦，物业沟通困难 5. 堆积快递难处理
功能定位
前期调研 2 家箱产品硬件
家箱放置位置 家门口
产品外观： 双格设计，容纳 80% 包裹 2 个独立等大，上下放置的储物间。
需求归纳突出功能点 通过前期研究，用户诉求在于希望尽可 能节省时间收寄件以及保障包裹安全性 问题。配送员希望提高配送包裹效率。
需求点 用户 随时收件寄件 包裹安全有保障 减少收寄快件冲突现象 实时了解包裹投递状态
模拟用户使用家箱产品过程记录
随时随地收寄包裹
结合用户诉求，模拟收寄 件流程与硬件产品现状（双 格设计 ), 通过对用户需求 点的归纳，完成用户手机 端 app 交互设计。
配送员 提高送货效率
系统流程图 家箱绑定流程
寄／发件流程
收 / 派件流程（双方 app）
收 / 派件流程（单方 app）
设计框架 完成需求点归纳之后，建立产品框架
圈出部分为我负责的交互设计
设计细节 主页面
寄件页面 扫一扫
查看家箱状态
点击该图标，显示个人设置（包括姓名， 电话，地址，设置密码）以及收寄快件 的记录。
用户自主选择空箱， 进行寄件操作
取件，寄件，查看家箱 状态这三个关键功能是 用户最主要的需求点。 其中取件和寄件相比查 看家箱状态更为重要。
空箱 空箱
为了方便用户更直观的了解家箱的状 态，以及在收取件时避免冲突情况的 发生，因此在寄取件页面以及查看家 箱状态页面均显示为两个方块上下排 列的页面布局。这直观模拟了硬件产 品本身，符合用户的习惯。
空箱
当家箱中有包裹时， 页面状态显示箱体状 态，空或满。用户点 选空箱进行寄件。
空箱 请点击选择空箱
查看家箱状态
请点击选择空箱
空箱
满
请点击选择空箱
取件流程说明
寄件流程说明
查看家箱状态 1. 家箱主页面－取件页面－取件成功返回主页面
2. 家箱主页面－寄件页面－订单流程（忽略）－选择空箱－寄件成功返回主页面
注： 点击请寄件之后，家箱开箱有三种状态 a. 2个箱子都空着的时候 b. 其中1个箱子空着的时候 c. 2个箱子都已装有包裹
确认取件？
确认
取消 取件成功，请手动关门
......请耐心等待开箱
开箱成功, 请取件 返回主页面
确认是否开箱取件 的目的是若不在家 箱边上，误点击取 件按钮，不会导致 直接开箱。
01
查看家箱状态
开箱阶段，由于触发到箱体开箱需要 4s 左右的等待时间， 因此在开箱过程中，增加动效，示意开箱取件的动画
填写订单流程交互保留不变 延用第一版本
查看家箱状态
根据用户需求，显示箱子投递的状态， 用户可自行选择要投递的箱间。
设计总流程 01
02
点击按钮，变灰半秒，跳转页面。
选择空箱，线框变灰半秒，跳转页面。
空箱1号
空箱1号
空箱2号
空箱2号
空箱1号
空箱1号
确认取件？
确认
取消
不好意思，取件出现问题 请重新尝试
查看家箱状态
查看家箱状态 动效说明: 点击确认取件，出现开箱取件的示意动画
返回主页面
剩余状况： 取件失败
确认取件？
确认
确认取件？
取消
确认
取消
确认取件？
01
确认
取消 取件成功，请手动关门
......请耐心等待开箱
开箱成功, 请取件
确认取件？
返回主页面
确认
动效说明: 点击空箱寄件，出现开箱寄件的示意动画
注： 点击请寄件之后，家箱开箱有三种状态 a. 2个箱子都空着的时候 b. 其中1个箱子空着的时候 c. 2个箱子都已装有包裹
满 01
02
填写订单流程
空箱1号
满
填写订单流程交互保留不变 延用第一版本
空箱2号
空箱2号
空箱2号
寄件成功
返回主页面
查看家箱状态
......请耐心等待开箱
请点击选择空箱
开箱成功，请寄件
返回主页面
不好意思，寄件出现问题 请重新尝试
返回主页面
剩余状况： 寄件失败
02
空
满
空
空
空
满
空箱1号
寄件成功
空箱2号
请点击选择空箱 返回主页面
返回主页面
......请耐心等待开箱
返回主页面
开箱成功，请寄件 返回主页面
剩余状况： 上面箱子空，下面箱子满 上面箱子满，下面箱子空 上下箱子均空
满
满
家箱已满，请取件后再寄件 返回主页面
取消
商业模式策划 Business Strategy
çš‚
交互优化设计 Redesign
小红书 app 搜索再设计－交互优化设计 项目背景： 我很荣幸能够参与小红书搜索模块优化设计的项目活动。我通 过对小红书移动端搜索部分应用场景和流程分析，以及对相关 竞品进行分析，针对目前小红书的搜索流程进行优化设计。
搜索设计
竞品分析
搜索模块流程再设计 改进后的流程
目前的流程
设计细节优化说明
设计总结 在一周的时间内，我改进了小红书 的搜索模块，在搜索范围上进行了 相关设计调整。值得一提的是，改 进的设计有被小红书产品经理采纳 并使用。
设计流程－搜索部分
项目背景 随着国内小型、中小型企业的不断崛起， 企业在不断发展和壮大的进程中，将面临 沟通与协作的问题，越来越多企业需要部 署统一通信解决方案。 创造有竞争力的搜索方式，提升用户找人 效率和易学性为主的设计方案。
明道通讯软件搜索优化－交互优化设计
用户对象 中小企业（500 人左右的民营企业，小微 企业创新团队） 主要的企业通讯软件 IBM sametime, Slack, 微软 Lync, imo, worktile, tower, Producteev，明道等。 现有企业通信软件的主要功能 实时社交通信功能集成到业务环境中，通 过即时消息传递、在线会议、语音、视频 和数据，实现统一的用户体验。只需点击 操作 , 即可即时联系信息背后的人员，满足 日常业务的各种需求。协作软件的主要目 的是项目跟进，提高运营效率，让公司获 得更多的利益。
行业现状 企业通讯软件市场并不成熟，现在大多数中小 企业还没有意识到线上通讯的重要性，用户群 大多都从事互联网行业，要做到真正的大众市 场，这需要做这个行业的创业者一起来宣传， 更需要需要时间的积累。 绝大多数传统行业还是在使用微信，电话或者 邮箱进行沟通协作。
行业趋势 a 深入传统行业 b 慢慢代替微信，电话，成为企业通讯的首选 c 移动端的不断发展
竞品分析 16 款中外企业协作通讯软件比对
竞品分析
分析总结
16 款中外企业协作通讯软件比对
国内外现有企业通讯软件 , 以及即时通信软件对相关 功能，用户满意度等进行比较。 根据以上图表，可以得出以下结论。例如像 slack 等国外的企业即时通讯软件在国内受到网速慢，没 有本地化的因素影响，业务无法拓展到中国。国内 企业即时通讯中，明道和 imo 是用户满意度比较高 的企业即时通讯软件。其余像 tower.in，今目标 , worktile 在中小企业的使用也十分广泛，属于企业协 作软件，即时通讯的功能比较弱。值得一提的是中 国目前中小企业普遍使用明道和 imo 该两款企业通 讯软件。
橘色标注出的模块与搜索有关，从 16 款企业通讯 软件中筛选出明道和 IMO，对其搜索模块进行分 析。
明道 IMO 搜索方式分析
明道 IMO 信息架构
明道
通讯录下的搜索， 搜索为通讯录内 内容（搜索姓名， 职位，手机号）。
智能搜索，搜索企业 内部所有内容。
imo班聊 个人信息 模块 在线／忙 碌／离线
头像
imo账号
通讯模块
工作签名
创建多人 会话
电子公告
隐私信息
姓名
手机
发送公告
添加分支
联系电话
邮箱
收到公告
添加成员
发公告
批量导入 成员
可见范围
通讯列表
企业组织 结构
基本资料
性别
设立群组
管理模块
搜索
文档共享 模块 传输文件
所属分支
搜索引擎放 置在每一个 功能类目下
职务
信息架构
明道 通讯
消息
工作管理
任务
知识共享
网络管理
个人中心
日程
工作动态
头像设置
联系人
我负责的任 务
知识中心
用户管理
待确认日程
动态更新
联系信息
群组
我托福的任 务
问答中心
群组部门
分类日程
我的动态
工作履历
聊天记录
我参与的任 务
投票中心
系统设置
查看同事日 程
星标动态
教育经历
发起聊天
星标任务
上传文件
安全策略
拓展模块
基本信息
创建群组
任务实时状 态
搜索文档
财务
个人群组
账户设置
统计
通知设置
数据工具
积分和等级
imo 和明道进行信息框 架分析 2 者功能侧重点 的区别，明道最主要的 功能是为了满足用户对 平时工作管理的需求， 通讯为辅。而 imo 最主 要的功能是通讯，工作 管理为辅。
IMO
同个搜索位 置，通过用户 对不同功能的 点选，对用相 应的搜索范 围。
信息呈现方式 imo 和明道在信息呈现方式上一致，除了 tab bars 的位置有差异。信息用独立的 2 个窗口呈 现，最左边为通讯列表，右边为内容页。经典案 例 Mircosoft Outlook。
搜索模块 明道 搜索模块分散在各个功能下。 IMO 搜索模块布局在通讯列表上方。
用户问卷调查
用户访谈
标题：通讯软件搜索方式的相关问卷 受访人数：34 年龄层：20-30 岁 目标： 找到用户在工作和生活中软体通讯上的 搜索习惯，以及目前企业通讯的缺陷。 提高用户搜索的效率。
访谈者 1
使用企业通讯软件的人中， 根据调查发现，在联系他人的过 绝大多数认为软件使用方 程中不了解联系人相关背景资料 而导致沟通不畅的状况居于首位。 便，缺点之一是搜索时输 入邮箱不便。 排第二位的分别是沟通不畅，无 反馈以及联络信息过期。
工作行业 传统服务行业， 需要走动。 员工联系方式： 实时通讯用对 讲机进行工作 上的沟通，若 要联系其他部 门人员使用电 话进行联系。 （注：工作期 间不允许使用 手机。）
访谈者 2
访谈者 3
工作行业 IT
工业行业 新媒体
员工联络方式： 团队协作平 台类似 使 用 tower （google. group）或者 worktile （该用户更 喜欢使用 tower)。
员工联络方式： 使用今目标，微 信或者 qq 企业邮 箱。 企业通讯软件现存问题 1. 企业通讯软件搜索方式不方便。 2. 用户联络信息，背景资料过期。 3. 目前，多数人使用微信进行沟通。
需求归纳 在工作中，绝大多数使用微信 根据 Q1 和 Q2 用户在使用社交软件时，习惯 （47.37%），其次是手机号和 倾向于使用姓名，电话和邮箱等多种方式添加 企业通讯软件。值得一提，21% 的人使用企业通讯软件帮助办 好友，手机端偏向使用二维码。 公。
用户在使用企业通讯软件时，搜索员工的目的是进行 工作上的沟通。因此用户期待在有限的时间里有效的 联络到相关人员，以此提高工作效率。 企业通讯软件不仅有项目管理，查勤等多项协作功能 还有即时通讯的功能。
目前用户搜索习惯 用户在使用社交软件时，习惯倾向 于多种方式进行搜索（包括姓名， 电话和邮箱等）。
搜索优化设计 设计目标：优化明道搜索方式，提高 用户搜索效率
点击搜索栏
明道搜索方式存在的问题
消息
动态
搜索引擎放置不合理，目前明道将搜 索引擎归类在各个功能下，搜索范围 被限定。用户在消息页面只能搜索到 消息页面下的信息，若需搜索其他功 能的内容，需跳转至其他功能下搜索。 这造成用户使用搜索不方便。
任务
日程
知识
个人
消息 消息
功能优化 定义 综合搜索：提供对企业通讯软件中所有 信息的搜索（全公司范围内）。 用户点击搜索，弹出功能 分类，自主选择搜索类目， 再进行关键词搜索。
分类搜索：提供企业通讯软件对某一类 信息的搜索。
1. 企业通讯软件搜索模块既需要综合搜索也需要分 类搜索。 2. 由于综合搜索的重要性，需将它放在醒目的固定 位置，建议放置在页面左上角。 3. 综合搜索若不加以分类处理，会导致用户搜索速 度较慢的问题。所以建议由用户点击综合搜索标签 后，系统提供分类选择功能并提示用户输入关键词。
产品设计 Product Design
PRODUCT DESCRIPTION CONNECTO Introduction CONNECTO is a fun, easy to use, sustainable toy designed for use by adults and children aged over six years. The toy prolongs the usefulness of milk bottle tops by providing them with an added and longlasting functionality. The bottle tops can be easily interlocked, and formed into a limitless variety of different shapes. Research and analysis of precedent showed that construction toys commonly consist of a combination of plastics, which can be difficult to separate and recycle. This means that unless these toys are donated, at the end of their life they often end up in landfill. Milk bottle tops are made from high-density polyethylene plastic (HDPE), which can be more easily recycled. By adding extended functionality to a commonly used everyday commodity product, CONNECTO aims to raise people’s awareness of the importance of reducing waste. By making the external surface of the mile bottle top easier to grip compared with existing milk bottle tops, this bottle top is also easier to open, in particular by people with weaker fingers and hands, providing further benefits to everyone.
Initial Research
Case Study
From ideas to working prototypes Sketches and mock-ups
User Test
Exhibitions
Thank You