PORTFOLI O 田韧作品集。
关于我。
庆应义塾大学 系统设计与管理专业
2020. 10-2022. 7 庆 应 大 学 研 究 生 院 奖 学 金 （ 2020-2021）
姓名 田韧/ 1995. 11. 28 海尔
手机
交互设计师
2018. 3-2019. 10 负责公司项目的产品设计及交互设计, 产出交互原型 与 UI 视觉效果图。与产品经理深入沟通需求，并完
15954267913
成原型图及视觉效果图交付开发人员，推动项目落 地执行与测试工作。
学历 中国海洋大学 硕 士 ： 庆 应 义 塾 大 学 -系 统 设 计 与 管 理 本 科 ： 中 国 海 洋 大 学 -工 业 设 计 （ 双 一 流 大 学 、 985/ 211高 校 ）
工业设计专业
2013. 9. 1-2017. 7 第 八 届 用 户 体 验 设 计 大 赛 (UXPA） 全 国 二 等 奖 第十三届山东省大学生机电产品创新竞赛三等奖 曾获学习优秀奖学金、科技创新奖学金
目录 CONTENTS
01
智能机器人问答模块设计思考
02
客服管理平台设计
03
Lof t er 信息架构升级
04
博悟 App
01智能机器人问答模块设计思考
项目背景 PORJ ECTBACKGROUND
准确 员工上班时遇到人力相关问题需拨打人力部门员工电话进行 解答，效率低下，为解决该问题，决定开发人力系统智能客 服问答机器人。 我在其中负责了网页端及移动端前端交互页面的交互设计及 视觉设计工作，关键目的在于满足员工问答需求，实现问题
智能
及时回复，提升员工满意度，现对该项目重新进行总结 复盘。
实时
使用人群 TARGETUSER
客服人员
集团员工
领导
用户行为：询问人力相关问题，获
用户行为：人力部门员工，为集团
用户行为：查看部门所属问题数，
得解答
员工解答人力相关问题
负责所属部门用户满意度，并根据 问题进行业务优化
用户期望：问题得到快速且准确解答
用户期望：不想重复回答，提高解
用户期望：直观显示部门所属问题
答效率
所属页面：前端交互页面
所属页面：后台管理页面
所属页面：后台管理页面
用户流程 USERFLOW
用户登录
开始
进入人力系统
进入客服页面
否
检测用户是否
是
用户提问
是否能够解答
登录
否 转人工客服
结束
此流程为前端用户使用流程。
用户评价
是
竞品分析 COMPETI TI VEANALYSI S 在与用户交互的客户端前端设计上，选取购物与旅游平台的客服系统阿里小蜜，网易七鱼（网易考拉海购），京东J I MI ，携程客服，从信息架构与功能上 分析共性与不同。
阿里小蜜 产品定位
网易七鱼
京东J I MI
携程客服
人工智能购物助理
网易旗下平台的智能客服
京东自主研发的智能客服系统，
为解决携程旗下出行产品
虚拟机器人
系统，由网易自主研发提
可解决常见业务解答及查询订单、
的客户问题，推出的一项
供
取消订单、引导填写退换货申请
客服问答系统
等等。
目标用户
淘宝、天猫等平台消费者
考拉海购平台消费者
京东平台消费者
携程平台消费者
上线时间
2015. 7
2016. 4
2012. 12
2016. 9
竞品分析 COMPETI TI VEANALYSI S
该项目属于从零到一的项目，需了解现有产品设计。 共性：四款产品均包含猜你想问，人机对话，以及对话框功能，满足基本功能需求。 不同：阿里小蜜网页端与移动端信息架构相比差距较大，考虑用户场景主要在移动端，网页端主要是为用户解决订单、支付相关问题，同时将用户更多引导到 移动端进行使用，移动端阿里小蜜更像是购物助理的角色，设置多个功能模块，例如待办通知与技能卡，以及活动banner 。 京东J I MI 网页端还会显示用户正在咨询与我的订单两项信息，此处显示容易给用户造成困惑，正在咨询的用户场景是用户在浏览某款商品有问题联系客服分到 的商家客服，我的订单是联系京东客服时选择相应订单方便更好定位问题，此处根据不同场景可以设置不同栏目。
竞品分析 COMPETI TI VEANALYSI S 分析竞品功能并进行对比。
基础互动交流功能 子功能
阿里小蜜 网易七鱼 京东J I MI 携程客服
开场白
文本互动
语音互动
自助服务 图像识别 互动
表情互动
猜你想问
关键词
拓展功能 闲聊
附加功能 待办事项
技能卡
服务评价
问题反馈
账号信息
需求分析 REQUI REMENTANALYSI S 汇集功能列表需求，根据卡诺模型从用户角度出发
技能卡
对需求进行分类。从集团员工角度出发满足用户基 本型需求与部分期望型需求及兴奋性型需求，反向 型需求可考虑减少用户的操作路径，为用户提供更
账号信息
待办事项 关键词
表情互动 猜你想问
好的用户体验。
语音互动
闲聊 图像识别 互动
文本互动 开场白 服务评价 问题反馈
界面设计网页端 UI / UXDESI GN 智能机器人形象设计，符合用户认知
模块划分明确，左栏显示用户姓名及所属部门，下侧设 置常见问题右侧为问答交互区，从上到下设置话术引导 以及猜你想问，以及问题输入模块。 猜您想问 换一换 让算法获得更多曝光 常见问题 固定在左侧，用户可随时点击进行提问
支持表情交互，发送图片 工资
关键词气泡，减少用户输入
输入框联想输入，匹配用户问题
界面设计移动端 UI / UXDESI GN 点赞
话术引导 猜您想问
评价完毕，话术推送
给用户更多选择
点踩
关键词 话术加深用户印象
用户输入或点击问题栏/ 关键词
用户评价窗口，减少评价步骤
界面设计移动端 UI / UXDESI GN
照片 名字 提示语 符合用户心理认知
评价完毕，话术推送 对回答不满意，点击转人工气泡或输入
对回答不满意，点击转人工气泡或输入
交互完成可自行选择结束服务 或人工客服结束推送提醒（超过2分钟未响应）
问答完毕，推送人工客服评价
界面设计移动端 UI / UXDESI GN
不满意评价提交
02客服管理平台
客服管理平台
我的奖金
今日工作进度
客服管理平台项目
由 于 项 目 为 B端 内 部 项 目 ， 只 展 示 视 觉
最新知识
信息，数据已脱敏。 该项目为客服管理平台，可根据不同角 色分配不同权限，已做了再改版再设计。 负责工作： 根 据 PM需 求 进 行 Axure交 互 原 型 设 计 系统l ogo、 i con、 界 面 设 计 制定设计规范
我的排班
通知公告
接 话 量 TOP8
配色 COLOUR
主色 #0055fa
#00a9ff
#89ddff
品牌标志用色
品牌标志、 图标用色、 按钮底色
品牌标志、 图标用色
#40d696
#f04848
#f6a34a
辅助色
提示用色：已通过
提示用色：未通过
提示用色：未审核
字体颜色 #656565 用于一级信息： 标题、正文
#9a9a9a 用于二级信息： 未点击状态、副文
#f1f1f1 用于描边颜色
图标设计 I CON DESI GN
字体 FONT
MacOS系 统 下 中文字体
Pi ngFang SC
英文字体
Hel vet i ca
wi ndows系 统 下 中文字体
浏览器默认字体（黑体）
英文字体
Ari al
部分界面展示 USER I NTERFACE 客服管理平台
客服管理平台
客服管理平台
交 互 说 明 -以 单 个 页 面 为 例 I nt er act i on I l l ust r at i on
1
客服管理平台
2
三个选项互斥，仅可选择一个 -
开始
结束
2019年 4月
1
2
3
4
3
一
二
三
四
五
六
日
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
不选择则默认全部 技能标签
请选择 外呼 接呼 其他
4
查询条件默认展示两行，若超出两行，则出现 展开查询条件按钮，点击之后展示如下界面: 审核状态 审核日期
未审核
-
开始
姓名 查询
审核通过 结束
手机号 导出
重置
审核未通过
公司
收起查询条件
03Lof t er 信息架构升级
目录 一、Lof t er 介绍 二、Lof t er 用户分析 三、Lof t er 及竞品信息架构 四、卡片分类法 五、Lof t er 改版后信息架构
一、Lof t er 介绍
LOFTER是网易公司2011年8月下旬推出的一款 轻博客产品。 LOFTER专注于为用户提供简约、易用、有品质、 重原创的博客工具、原创社区，以及有品质的手 机博客应用。 Sl ogan：记录生活，发现同好。
二、Lof t er 用户分析
LOFTER的目标用户是互联网的文艺青年、摄影师、插画师、设计师等小众群体，他们对 审美要求比较高，且有比较高的消费能力，同时根据艾瑞指数，可以看出使用人群女性多 于男性，年龄偏低，24岁以下人群占最大比例，其次是2530岁之间。
三、Lof t er 及竞品信息架构 依据图片+社交的定位，选取ni ce、小红书与I ns t agr am三款APP作为Lof t er 的竞品，并 依次分析每个APP的信息架构。
Lof t er
ni ce
小红书
I ns t agr am
三、Lof t er 及竞品信息架构Lof t er
三、Lof t er 及竞品信息架构ni ce
三、Lof t er 及竞品信息架构I ns t agr am
三、Lof t er 及竞品信息架构小红书
四、卡片分类法 关注
（所有关注人动态）
订阅的标签
添加好友
搜索
精选内容 推荐
分类查看 所有标签
购物车
（按标签、用户、文章搜索）
发布音乐
发布图片
发布视频
发布文字
文具、耳机、 周边等商品展示
订单
福利币个 数及签到
个人信息 （头像、昵称）
我的关注
( 关注的好友列表)
我的粉丝
我的喜欢
收到的喜欢
评论
聊天
通知
达人认证
打赏记录
在线客服
设置
将l of t er 提取了主要功能，分成了26张卡片，选取一位用户进行测试。
三、Lof t er 及竞品信息架构 共性：遵循了用户使用习惯，底部导航都分为五大部分，且首页、我的顺序排布都相同 发布都位于导航的中间位置，强调UGC。
三、Lof t er 及竞品信息架构
差异首页： 1. LOFTER首页划分了关注与订阅两个分段式导航，在关注下为关注人动态的t i mel i ne，关注下方还有好友推荐关注，以及来自好友推荐的 内容，同时右上角还设置了关注好友的入口，业务的考虑是为了给用户推送更加优质的内容，增强用户粘性，订阅是l of t er 的特色功能，用 户可以根据标签找到自己喜欢的内容，订阅下还分为我的订阅、我参与的与分类查看所有标签，强调Lof t er 的标签属性。 2. ni ce与I ns t agr am为关注人动态的t i mel i ne 3. 小红书首页划分了关注、发现、附近三个分段式版块，均为瀑布流展示样式，发现也整合到了首页之中。 分段式导航
添加关注
t ab导航
好友推荐
好友推荐
拍照&录像
搜索 我的及好友的快拍
I GTV Di r ect ( 分享)
三、Lof t er 及竞品信息架构 差异发现： 发现基本上是分为搜索与精选推荐，下方为瀑布流展示，像LOFTER、ni ce、I ns t agr am，I ns t agr am还多了一 个扫描名片的功能，可实现用户面对面加好友，增强社交属性，小红书的发现则是整合到了首页，与关注、附 近属于同一层级，且没有标签式区分。 搜索
搜索
搜索 搜索
分类标签，可调整顺序
分类标签
发现整合到了首页
扫描名片
三、Lof t er 及竞品信息架构 差异发布： Lof t er 发布有音乐、文字、图片、视频四个类目，符合Lof t er 轻博客的产品定位，I ns t agr am、小红书则是支持 图片、拍照、拍视频，ni ce增加了直播功能，且在相册上传图片后可以添加好货标签，强调其“带货”属性。
选择音乐、文字、图片、视频
选择相册、拍摄（长按拍 摄短视频）、直播
选择图库、照片、视频 选择相册、拍视频、拍照
三、Lof t er 及竞品信息架构 差异市集： 1. of t er 的电商页面订单与购物车是悬浮标签，固定在页面右下角，就重要性来讲，设置购物车可以提醒用户购买商品， 订单则没必要展示在外面，市集展示内容少，且门类不多，就承载量来看没必要单独设置一个入口，这样设置的目的是为了 先培养用户习惯，同时带来更大的流量和购买数量。 2. ni ce侧重于立即购买，没有设置购物车功能 3. I ns t agr am没有做电商功能，在此不做分析 4. 小红书则将购物车与订单收起在了商城的更多入口中，并且更多的这个抽屉式导航也在我的页面。 抽屉式导航更多 搜索
搜索
商品类目
商品类目
福利币及签到
购物车 订单
卖二手
三、Lof t er 及竞品信息架构 差异我的： l of t er 与ni ce都是将个人信息、常见系统设置与消息整合到了一起，再跳转一下才到我发表过的动态，小红书与 I ns t agr am布局相同，消息动态单独放在了底部导航，作为一个单独的入口，不需二次点击再跳转到我的动态内 容，更侧重于对我发表过的动态的展示。
消息动态 消息动态
消息
消息
四、卡片分类法 发布
发布音乐
发布图片
发布视频
购物
文具、耳机、 周边等商品展示
购物车
订单
互动
添加好友
我的关注
我的粉丝
我的喜欢
收到的喜欢
评论
聊天
我的
福利币个 数及签到
个人信息 （头像、昵称）
通知
达人认证
打赏记录
在线客服
设置
发现
关注
订阅的标签
搜索
精选内容 推荐
分类查看 所有标签
（所有关注人动态）
( 关注的好友列表)
（按标签、用户、文章搜索）
上面是被测用户给出的分类结果。
发布文字
四、卡片分类法
上面是被测用户给出的分类结果。
四、卡片分类法 被测用户1特征：研究生会计专业在读，文艺青年，喜欢用Lof t er 关注二次元的标签与内容，会时不时打开 浏览与关注一些最新动态。 1. 从用户1测试结果可以看出，用户对于发布、市集与发现的理解大致相同，符合用户的心智模型。 2. 用户1认为福利币及签到应该在我的类目下面 3. 我的下面除了个人信息及昵称，放置的为各种app通用的功能，像通知、客服设置等模块 4. 同时将添加好友、我的关注、我的粉丝、我的喜欢、收到的喜欢、评论、聊天归到了一类，并命名为互动，因为 用户认为这些功能都是与互动有关的 5. 在发现这里，用户1将与探索相关的功能归为了一类。 6. 用户1认为订阅标签是Lof t er 的特色功能，一开始用户1认为分类查看所有标签与订阅标签是独立的关系，经过访谈 后用户1认为分类查看所有标签应该包含在订阅标签里面更为合理。
五、Lof t er 改版后信息架构 从竞品分析的共性以及业务的考虑，还是将Lof t er 分为首页、发现、发布、市集、我的这五类，信息架构改动如下： 1. 福利币及签到功能放置在市集下，是为了给签到更多的流量，提高用户粘性，同时根据用户心智模型，因此决定将 福利币及签到在我的t ab导航下再增加一个入口，我的下面还包含了一个互动聊天模块，可以增加二者的曝光度。 2. 用户测试反馈，系统通知消息该功能并不是非常重要，应该从消息类目中移除，降低显示优先级。 3. 添加关注与我的关注是属于同一类的，将我的喜欢移至下方，与收到的喜欢、评论、聊天一同划分到互动模块。 4. 乐乎市集留一个购物车的悬浮按钮，同时设置一个抽屉式导航，将购物车、订单、福利币与在线客服放入。 Axur e地址：ht t p: / / 127. 0. 0. 1: 32767/ s t ar t . ht ml #p=%E5%85%B3%E6%B3%A8&g=1
五、Lof t er 改版后信息架构
五、Lof t er 改版后信息架构 1. 福利币及签到功能放置在市集下，是为了给签到更多的流量，提高用户粘性，同时根据用户心智模型，因此决定将 福利币及签到在我的t ab导航下再增加一个入口，我的下面还包含了一个互动聊天模块，可以增加二者的曝光度。 改版前
改版后 增设福利币 及签到入口
五、Lof t er 改版后信息架构 2. 用户测试反馈，系统通知消息该功能并不是非常重要，应该从消息类目中移除，降低显示优先级。 改版前
改版后
降低通知显示优先级
五、Lof t er 改版后信息架构 3. 添加关注与我的关注是属于同一类的，将我的喜欢移至下方，与收到的喜欢、评论、聊天一同划分到互动模块。 改版前
改版后 添加关注
五、Lof t er 改版后信息架构 4. 乐乎市集留一个购物车的悬浮按钮，同时设置一个抽屉式导航，将购物车、订单、福利币与在线客服放入。 改版前
改版后 更多
购物车
04 博 悟 App 为博物馆爱好者设计的 基 于 增 强 现 实 技 术 和 UGC的 定 制 化 浏 览 体 验 App
此 项 目 为 第 八 届 全 国 用 户 体 验 设 计 大 赛 （ UXPA） 参 赛 作 品 ， 并 获 得 全 国 二 等 奖 。 参 与 产 品 从 0到 1的 设 计 ， 在 团 队 五 人 中 负 责 用 户 研 究 与 交 互 设 计 。
竞品分析 在 APP STORE中 以 “ 博 物 馆 ” “ 展 览 ” 为 关 键 词 搜 索 ， 综 合 排 名 及 评 价 ， 选 择 以 下 9个 APP作 为 竞 品
六朝博物馆
苏州博物馆
VART
爱去博物馆
美景听听
每日环球展览
艺术狗
看展览
知亦行
产 品 亮 点 ： 竞 品 ： 博 物 馆 类 APP中 ， 大 家 会 比 较 注 重 与 博 物 馆 内 部 讲 解 不 一 样 的 部 分 ， 更 加 完 美 的 展 示 会 让 用 户 感 觉 更 加 愉 悦 ， 加 入 讨 论 的 部 分 会 让 APP更 加 出 众 。 启发：展品的展示与讲解需要清晰易懂，分享内容需要找到不同的模式，让用户的交互体验更加完美。
视觉设计： 竞品：多为深色或中性色配色 启发：分析用户使用环境及用户群体来进行视觉设计，意图使用户沉浸式体验
用户调研 在经过竞品分析后，我们对目标人群进行进一步的用户调研，以更加精准的解决用户痛点提升用户体验。
实地访谈：前往青岛市博物馆、海军博物馆等多地博物馆进 行了用户的实地访谈。 实地问卷：前往青岛市博物馆发放调查问卷，此次共发放了 49份 问 卷 。 网上访谈：从调查问卷中挑选了可进一步深入访谈的用户， 在网上进行了访谈。 网 上 问 卷 ： 在 网 上 发 放 博 物 馆 调 查 问 卷 ， 共 收 到 了 135份 问 卷。
persona分 析
产品架构
项目目标 为解决博物馆爱好者在参观博物馆时遇到的讲解内容匮乏与讲解形式体验差的痛点，设计 一 款 基 于 UGC的 讲 解 内 容 分 享 平 台 APP-博 悟 与 基 于 增 强 现 实 技 术 的 定 制 化 博 物 馆 导 览 解 决方案。
设计思路 语言文字晦涩难懂 讲解内容匮乏
分享者语言幽默风趣
多数展品仅有简介
分享者以故事的形式深度讲解
讲解无趣枯燥单一
分享者结合自身经历生动有趣
团队讲解跟不上速度
定制化导览路线
环境嘈杂听不清
AR眼 镜 使 用 耳 机 收 听
人多不能很好地观赏展品
眼镜播放生动讲解视频加深理解
展品不能全方位观看
拍照建立可交互模型，即时操作
讲解形式体验差
基 于 UGC的 讲解内容分享平台
软硬件结合 提升讲解体验
交 互 原 型 -观 看 讲 解 视 频
博览
展示附近的博物馆信息、 最新最热的展览信息， 可切换至其他城市查找 博物馆
展览详情
显示展览的图片、简介、 主要展品、已有讲解录 制的展品数量
展品详情
播放讲解
评价讲解
显示展品的图片、简介、 其他用户录制的讲解
播放展品的讲解，可以 点击右上角选择其他用 户的讲解
讲解播放完毕后跳转至评 价，输入星级和文字评价， 作为讲解热度和排名的依据
交 互 原 型 -制 作 讲 解 视 频 制作讲解
进入制作页面，添加图 片并附以文字说明， 录制或导入讲解视频
导入图片
导入与展品相关的 资料图片
导入讲解视频
导入提前录制好的讲 解视频
录制讲解
预览讲解
打开摄像头开始录制， 结束后在制作页面预 览
预览录制的讲解，可以 操作模型与浏览图片
使用流程
视觉设计 l ogo
配色
#D5AC3E
#202328
#F2F4F4
考 虑 到 APP内 容 以 图 片 为 主 ， 所 以 以 深 灰 色 为 背 景 ， 金 色 作 为 标题及i con高 光 色 ， 严 肃 而 有 高 级 感
配色 标 题 ： 苹 方 Pi ngf ang SC
#f f f f f f
内 容 ： 苹 方 Pi ngf ang SC
#A7AAA9
标 签 ： 苹 方 Pi ngf ang SC
#838787
界面展示
展览详情页显示“展品已 有讲解”完成度，所有展 品都有讲解的展览将会归 入“博悟”页的推荐中。
博 物 馆 &展 览 在“博览”页可以浏览附近的博物馆 信息以及全国的热门展览信息。
界面展示
展 品 &讲 解 展品详情页下方有其他用户的讲解， 可以点击观看，在手机中操作展品 模型和浏览图片。播放完成后进行 评价，作为衡量视频热度和推荐度 的标准。
本 DEMO已 上 传 至 Axshare， 可 输 入 网 址 ： ht t p: / / bkxg0c. axshare. com 查 看 最 新 DEMO
THANKS 感谢观看。