Interaction Design
Portfolio Jemma Guan 2017-2018
官其珍 Jemma
CONTACT ME
就读：中国农业大学 本科（2019.06毕业）
Tel：1570-120-6651
专业：工业设计
Email：jemmaguan@163.com
申请：交互设计实习生
Blog：jemmaguan.lofter.com
工作经历 项目描述： 搜狗 搜索事业部UED 2017.10-2018.2
交互设计实习生
交互设计师 微专业 2017.4-2017.8
优秀学员
1.日常版本功能迭代：负责搜狗翻译、搜狗词典iOS/Android端的交互设计，前期配合产品进行需求分析， 准确输出交互，后期跟进视觉、开发和测试，保证最终设计效果的高还原度 2.语音交互优化创新：通过竞品和场景分析，重新设计可用于翻译、词典的语音交互，进行诸多创新的细节 优化，提升使用容错率 3.总结基础体验问题：主动调研和测试发现产品存在的问题，推动和持续跟进优化产品设计
微专业是网易云课堂以实战为牵引，结合真实案例分析，帮助学员全面掌握交互设计知识体系的在线课程。 期间通过思考和用研改版优化了LOFTER、易信两款App，部分功能已得到改进，并独立完成一款直播产品 的交互设计，具备完善的交互设计理论及认知。
CONTENT
搜狗词典 页数：14P
1
用户需求挖掘与产品探索
搜狗翻译 页数：9P
2
实际项目的快速设计开发
语音交互改版 页数：9P
3
通过思考分析去改进产品
其他 页数：7P
4
基础体验提升和细节打磨
01
Sogou Dictionary
搜狗词典 集查词与翻译两大功能于一体的权威词典工具
i&A V1.0 项⽬目孵化 词典学习⼯工具雏形 复⽤用翻译APP的框架，主打查词权威性
i&A V1.1 满⾜足⽤用户使⽤用基础功能 增加例例句句发⾳音、单词类别标签、意⻅见反馈、分享等
i&A V1.2 产品定位转型，打造差异化 新增新闻双语阅读功能、⾸首⻚页和结果⻚页电影功能
iOS
项目背景 搜狗词典是搜狗搜索推出的集词典与翻译两大功能于一体的外语学习工具。 通过与牛津词典合作，为用户提供权威、全面的词汇释义。 然而初版项目的孵化过程并不如想象中顺畅。
01
需求突然 上线紧迫 多项目并行，没有产品需求文档，仅凭会议沟通开始设计。第一版只能 大致复用翻译app框架，保证基本可用性。
02
历史遗留问题多 由于翻译项目流程不规范， 遗留的坑太多来不及填补。 开发不配合，设 计维护成本大，经常来回沟通返工，团队苦不堪言。
03
产品定位不明确 缺少一个清晰具体的人群定位，在打磨产品上显得相对被动。高强度的排 期限制了极佳的用户体验，还没等到挖掘出用户真正的诉求，一大批新需 求正在靠近。
用户调研 P1
在技术导向、设计推动的公司，产品前期分析环节薄弱，⼀一般需求都是 从领导层发出指令，层级执⾏行行，公司⾥里里没有专⻔门的调研团队，身为交互 设计师必须主动分担⼀一部分⽤用研⼯工作。
/
P2
12 6 8 App
10
-
30 12
P3
6
30
12
6
-
3
-
-
-
2
P4
97
98
12
6
P6
12 8
7
2
12 8
7
2
12 11
7
98
98
2-3
97
6
4
8
140+ 6
4 GRE
10 12 6
•
问卷调查-进行用户分类
1day：确定计划和编写访谈提纲
•
用户访谈-挖掘用户行为
1day：各大高校张贴海报，招募8名用户
•
头脑风暴-确定用户纬度
APP
S7
2days：用户访谈和可用性测试
VOA iPhone 7
urban iPhone6
S8
iPhone 6
iPhone7
VOA
3
对用户的类型及行为倾向有了基本认知，划分出不同用户群体
•
了解用户现有学习轨迹和场景，针对目标群体的需求增加内容
7
4
研究收获 •
4
6
流程步骤
•
P7
30
97
4
5
2 4
30
P5
2 6
10
A4
OCR
OCR
/
PPT OCR
测试和验证现有的功能方案，获得反馈，辅助调整产品方向
urban
1.
1.
1.
1.
1.
2.
用户画像
傻甜学习妹
留学自驱男
学霸刷分女
李意之 大一 98年
刘宣 大二 97年
胡晓璐 大三 96年
使用动因
使用动因
使用动因
学习考试、休闲娱乐
出国、提高英语水平
学习考试、未来工作需要
使用场景
使用场景
使用场景
阅读外语材料或课本进行学习 听英文歌看电影美剧出国旅行
记忆大量外语单词、留学相关的考试 用外语与他人进行口头/书面沟通
用外语写专业而准确的论文或报告 阅读外文论文、书籍、报纸、杂志
使用渴求
使用渴求 关注词典知名度和权威性 渴求提高考试口语和写作水平
使用渴求 关注单词的用法、短语例句等 喜欢简洁实用快速的词典工具
渴求好用、趣味的学习工具 希望有更贴近生活的内容
关键词提取
˙对搜狗词典的印象˙
纯粹
˙对搜狗词典的期望˙
界面过于单调
简陋
卡片交互形式差
功能单薄
工具属性不突出 无特色
操作过于简单 入口模块区分不明显
无广告
多端同步 简洁、清爽、干净大方
有更多贴近学习的内容 加一些动效
有趣 权威专业 便捷好用 离线词典
希望加入差异化元素
场景构建 早晨
Day 1
中午
Touch Point：
Touch Point：
英语课
试着查了课本上的生词
文的大段生词。曾在朋友圈 看到朋友分享翻译贴图。
Action： 场景5: 单词发⾳音
尝试跟读昨日收藏单词、例句
Function:
单词、例句发音功能
文本查词，释义浏览，收藏，云端同步
Touch Point： 起床后
Action： 场景9: 练习⼝口语
跟读美剧、电影的口语例句
Function:
单词原声影视
场景4: 复习单词
查看今天收藏的单词
Function: 场景3: 浏览、收藏
生词本
中午
Touch Point： 上午
Action：
晚上
Touch Point：
Touch Point：
晚自习
午饭
场景6: 翻译⻓长⽂文
Action：
Action：
在首页单词卡片收藏2个单词
预习全英文材料
Function:
Function:
长文翻译、拍照翻译
早晨
Day 3
Action：
Function:
早晨
起床后
睡觉前躺在床上
场景2: 查单词
Action：
场景1: 用户在课上思考如何翻译课 第三⽅方分享
Touch Point：
Touch Point：
回宿舍途中突然想到了APP
Action：
Day 2
晚上
查看四六级重难点词
Function:
智能推荐
单词真题匹配
场景7: 单词推荐
中午
Touch Point：
Function:
双语阅读、翻译
Touch Point：
下午
Action： 阅读英语新闻、报刊
晚上
Touch Point：
上午
睡觉前听英文播客
Action： 场景10: ⽂文章阅读
场景8: 备考四六级
Action：
手机内遇到生词需要查询
Function: 跨软件查词
听到生词需要查询
Function: 场景11: 查单词
语音输入
场景12: 语⾳音查词
竞品分析
词典APP的设计并非从0到1，而是基于 已有翻译APP进行设计的，但又绝非是两 个APP的复制粘贴。 在改版之前，从产品功能定位、框架搭建、 交互引导下的用户行为路径和产品受众的 使用反馈等角度，对大量的词典、翻译工 具类产品进行分析。
设计目标
总结 • • •
只查词并不能满足用户，查词是外语学习过程中的一环 不同英语学习诉求的人，对英语学习工具的需求不同 若将查询和学习软件的单词本打通，受场景制约，体验不佳
在功能侧重上做到有所差异
英语魔方秀
设计⽬目标 • • •
内容全、易学易用、层级清晰、查词快捷 工具属性明显，需提供附加功能唤醒用户 需与旧产品和竞品之间拉大差异化
英语趣配音
功能定义&整理
改版重点功能，也是用户较为关心、操作高频的模块：
发⾳音
⽣生词本
单词例例句句
双语阅读
查单词
原声影视
⻓长⽂文翻译
学习⼯工具
分享
功能展示 国际新闻双语阅读 功能描述：在单词详情页提供与单词相关的英文新闻内容，当用户浏览时可选择是英语还是双语 需求场景：用户在工作或学习等碎片时间阅读国外新闻 需求目的：帮助用户阅读、理解新闻内容，让用户了解单词更为地道的用法，且无需在外文页面与翻译应用之间来回切换
Step1：从单词详情页进入
Step2：默认双语翻译
Step3：手动改为全英文
Step4：对照翻译页分享
功能展示 在新闻双语页的设计上有两种方案，各有优劣。我通过快速线上调研9名目标学生用户，得出用户倾向方案1，但衡量技术成本，决定在方案2上进行改良 方案1:原文回帖 优：权威感明显 劣：有广告，版式不可控
方案2:转码 优：界面统一，无广告 劣：字段容易丢失
最终方案：在转码的基础上优化界面
排版更佳，统一正文字体 字号、页边距，阅读起来 舒服
保留了图片文字描述，整 句截断不会出错，单词句 尾换行有连接符 定位目标单词出现的位置
在过滤广告的基础上尽可 能保留字段
交互定稿
跟进与反馈 上线后，为了验证改版效果做了用户调研，收集到用户对改版满意的原因： 1.内容丰富，乐于发现有趣的单词内容 2.架构清晰，卡片交互体验好，兴趣度高 3.查词翻译精准化，收藏方便，回顾方便 4.界面简洁清新，使用感受舒适
02 Sogou Translate
搜狗翻译 国内⾸首个应⽤用AR实景技术、集精准翻译与学习助⼿手 于⼀一身的前沿翻译软件
i&A V2.2.2/2.2.3/2.2.5 ⽇日常版本更更新迭代优化 ⽐比如所有功能点击区域过⼩小、语⾳音播放增加loading等
i&A V2.2.6 推动相机交互统⼀一 优化10+优化点，增加相机横屏功能，提升体验
语⾳音交互改版 允许点击后触发⻓长按交互，提升使⽤用容错率
iOS
项目概况&工作流程
•
产品
业务环境
搜狗翻译是搜狗搜索的核心试水项目，排期紧、需求频繁、竞争对手多是项 目的三大特点。目前我们重点在于打磨OCR拍照翻译和语音识别翻译两大核 心功能，并逐步优化历史遗留的诸多体验问题。
•
技术背景
依托于搜狗领先的图像识别、语音合成、机器翻译等技术，应用了最前沿的 基于深度学习的神经网络机器翻译框架，能够通过理解上下文语境给出精准 翻译结果。
•
景愿传达 指导反馈
产品目标
提供测试文档
测试
正确理解产品 并提供方案
交互
走查遗漏细节
影响交互细节
视觉 提供页面框架
提供交互文档
极力打造可满足用户在多场景下既实用又便捷的翻译软件
开发
走查遗漏细节
产品核心场景
01 生活 国外旅行，实时对话翻译 随手拍照翻译
02 学习 经典名著、阅读长文 海量词典数据，精准释义
03 工作 对外商务洽谈，语音输入同声传 译，沟通得心应手
设计案例——相机翻译 功能说明： 用户使用手机摄像头扫描要翻译的文本，系统将在识别内容后，利用AR技术用户要翻译的文本与系统翻译的虚拟结果进行实时融合，让经 过翻译的文本内容直接呈现在手机屏幕上，整个过程平均识别速度不到1秒。用户还可以查看文本，进行词句发音、复制、收藏等操作。
发现问题： 拍照按钮在哪？😕
还没对准就开始翻译了？🙁
为什么要我重拍？😖
为什么不能选择翻译范围？🤨
问题分析
配合用研进行可用性测试，挖掘分析问题产生的原因： 拍照时：
翻译后：
看文本：
⽂文字提示被忽略略
⽤用户⽆无知等待
⾃自动识别的⼩小点点
没明确隐喻意思 在环境、⽹网络不不佳等 情况下识别效率差
⽤用户⾸首次使⽤用
均尝试寻找拍照按钮
不不⽀支持横屏识别
⻓长句句难以拍全
版式复杂的原⽂文，
⽂文本排版⽐比较混乱
按钮名称表意不不明
误导⽤用户
⼤大段落⽂文本内容
⽐比照查阅不不便便
设计思路
自动扫描优劣分析： •
用户使用场景上
优点：在小范围、近距离的使用场景下扫描效率较高。如扫菜单、宣传单、书本文章、网页截图、 二维码等。 缺点：面对有角度、远距离且网络状况不佳的场景时，若碰上网络状况不好，手长时间端着手机扫 描，体验极差，且扫出来的照片很可能是虚的。如马路指示牌、机场时刻表等，
•
用户操作和认知上
优点：科技感强，智能化，更方便 缺点：1.不符合拍照习惯，缺少掌控感，特定场景担忧错过拍照时机 2.在面对有角度、距离的拍摄对象时，无法调整焦距来选择所需要的区域 3.网络状况不佳导致识别不出时，不能迅速给予反馈，因等待产生焦虑
难点：产品主打“实时翻译”，技术受限“离线翻译”
优化方案
•
默认采用手动拍照模式：确保新用户首次使用时符合预期/习惯，同时满足老用户的基础使用
•
将“自动扫描”作为可选的“高级AI模式”：比对竞品，作为“差异化特色”功能，营造口碑，符合搜狗未来AI发展定位
文案修改为 文字平行参考线 点击全屏任意区域 可切换原文译文
根据多语种和未来可能的 功能提前进行布局规划 可选“自动扫描”模式 默认手动拍照
“重新拍照”改为“再拍 一张”，消除歧义
优化细节
纠正“需求” 起初拍照翻译不能自由选定翻译的范围，版式复杂的原文翻译后，不同字号的文本排版在一起，十分难阅读。 用户反馈和PM都提议做选定范围的翻译功能，但经过初步设计后，发现在翻译效果一致的情况下，该方案额外增加了用户操作步骤。 遂提议开发“双语对照”功能，方便用户进行原译文的逐句比对，效果更佳，减少用户冗余操作，避免了“需求”的跑偏。
一行原文一行译文， 便于比对
优化
竞品涂抹翻译
两端统一
改版前 由于两个项目并行，迭代快，开发力量不统一，导致 两端存在8个不同的拍照翻译结果页
改版后 重新优化了相机翻译流程和页面功能布局，添加 了一个全新的双语对照功能，在之后的一两次迭 代中，原本iOS和Andriod两端诸多不一致点得 到统一，减少设计维护成本，提升基础体验。
03 Sogou Voice
语音交互改版优化 基于⽤用户⼼心理理模型的语⾳音输⼊入交互设计
为什什么要做这个（价值） 语音识别翻译是产品两大核心功能之一，用户使用体验的好坏对产品有直接影响
要解决什什么问题（⽬目标） 对目前的语音交互进行改进，提升用户操作的顺畅度、易用性
项目背景 翻译和词典存在4个不不同的语⾳音功能模块，但存在诸多问题： ⼩小按钮按下的暗示较弱，反馈不不明显（⽆无明显视觉反馈、震动），且SDK有1秒延迟，没有⻓长按的相应操作，例例如上划取消等
双⼈人对话
语⾳音翻译
搜狗翻译
单词查询
⻓长⽂文翻译
搜狗词典
竞品选择
具有⼴广泛的影响⼒力力（⼤大⼚厂出品）
微信
淘宝
⼿手机百度
需求重合度⾼高（契合翻译场景）
⽹网易易有道词典 有道翻译官
百度翻译
腾讯翻译君
•
语⾳音输⼊入的⼼心理理模型更更接近：⽐比键盘更更便便捷的信息输⼊入⽅方式。
•
所以其⼴广泛存在于各个产品，⽅方案也更更向有⼴广泛影响⼒力力的APP 靠拢，再兼顾翻译场景。
Google翻译
使用场景
语⾳音输⼊入
设计倾向
1. 键盘输⼊入的替代⼿手段
•
查询结果⻚页和⽂文本翻译相同
2. 除双⼈人对话外，场景和键盘输⼊入场景趋同，⼴广泛的存在
•
突发性强，功能需易易于发现
3. 其中短词语⾳音场景更更私密，受场合和个⼈人习惯制约
•
低频，但追求快速，使⽤用⽅方便便
4. ⻓长句句语⾳音则更更多⽤用于沟通、练习
•
交互需兼顾⻓长句句输⼊入，可以考虑给出⽤用语指导
于⽣生活中，⽤用于解决突然涌现的翻译问题
流程分析
触发前 阶段⽬目标：
传达/引导
触发 有效反馈
输⼊入中 持续的信息传达
输⼊入结束 有效纠错
（动效、声⾳音、⽂文案、震动） ⽤用户常⻅见问题：
1.不不知道功能有啥⽤用
1.点击后不不明情况，不不知道
1.没说完就结束了了
1.没找到我要的
2.功能不不好找
要说话
2.不不知道说了了啥
2.说错了了要重新说
2.怎么不不能⻓长按？
3.说错了了想删
3.语⾔言选错了了 4.点错了了我没想点语⾳音 解决⽅方案：
1.位置充⾜足时给出⽂文案提示
1.震动+声波反馈
1.⻓长⽂文输⼊入不不⾃自动结束
1.提供纠错或sug
2.位置显著，保持视觉⼀一
2.⽀支持点按/⻓长按，⾃自动结
2.实时显示输⼊入内容
2.尽量量保持按钮位置⼀一致性
致性和语⾳音输⼊入的连贯性
束/⼿手动结束，且⽤用圆⻆角矩 形暗示按下 3.增加语⾔言国旗 4.可被终⽌止，回前⼀一状态
两种结束⽅方式
竞品分析
设计方案 最终⽅方案： 点击和⻓长按并存，在当前⻚页蒙层聚焦展示，且能⾃自动结束
运⽤用“QOC”⽅方法充分考量量和取舍设计⽅方案：
方案适配
搜狗翻译-⽂文本翻译
搜狗翻译-双⼈人对话
词典-⻓长⽂文翻译
基本使用流程
该⽅方案待上线，此处省略略详细设计细节
设计细节
更更符合场景的⽂文案
词典APP ⽂文案统⼀一为中⽂文
翻译APP 提示的⽂文案和选择的输⼊入语⼀一致
04 Others
其他 设计优化点、异常状况梳理、项目管理、总结反思
设计优化
实时翻译自动记录查询历史 针对长文翻译的查询历史问题进行了设计优化，保证用户使用流畅性 解决问题
发现问题
随着用户输入会实时出现译文
增加键盘下拉收起按钮
However： iOS键盘遮挡会造成发 音、复制等按钮无法 操作
用户往往忘记按回车 键，导致客户端无法 记录用户查询历史
输入中，输入区有内容，用户点击返回 后，将输入区内容保存进翻译历史第一条
设计优化
Wap端发音语速调节 PM希望做一个支持用户调整发音速度的“进度条”，我通过5位用户的快速可用性测试，采取了更符合用户习惯的设计 有道翻译官
百度翻译
搜狗翻译
实则只有三个档位可供 调节，用户习惯小幅度 拖动进度条。未达到改 变阈值，档位会回弹复 位，导致操作失败
档位更大更明显，支持 滑动和点击，减少操作 失败率，符合用户预期 展示一条英文、中文 例句，让用户进行试 听调整
设计优化
文本查词sugg展示优化 原本查词时下方的候选词是按照搜索热度排序，未优先检索词典中的单词，我发现并提出优化 优化前：
优化后：
按照搜索热度数据 来排序，不符合常 规查词逻辑 若修改排序逻辑， 牵扯垂直搜索的部 分都要改动
权衡技术成本后采用 首条sugg展示用户 所输内容，以最小改 动来最大化提升用户 体验
异常状况梳理 梳理了翻译app和词典app中所有异常情况页面，分为“网络异常类”、“加载类”、“空数据类”，保证设计的灵活、可拓展性、系统化、标准化
详情见：http://www.lofter.com/lpost/1f056df9_1256d289
项目管理
辅助设计leader管理优化点 持续整理用研、内部bug邮件、应用商店用户反馈 发现产品潜在问题，进行评估和解决
优化列表管理
用户反馈统计
总结和反思
提升和优势 1.在有限的时间内，学会在尊重产品阶段性⽬目标和开发成本的前提下，不不⽢甘妥协，⼒力力求对体验⾼高度负责 2.能主动通过调研、测试、分析发现产品存在的问题，推动产品进⾏行行迭代优化，从“接需求-做设计”逐渐向“发现问题-提需求-出⽅方案”转变
3.通过不不断学习和⽅方案产出提升了了设计能⼒力力、⼯工作效率、沟通协调能⼒力力
遗憾与不足 1.因为成本和产品体量量⼩小导致⽆无法根据数据针对性优化产品，数据分析能⼒力力未得到提⾼高
2.缺乏⽅方案预估的能⼒力力，决策速度不不够快，希望通过经验的积累慢慢弥补这⼀一弱点
3.交互稿输出时，涉及复杂技术边界限定的场景会考虑不不周全或表达不不清晰，以后需针对性提⾼高
J
E M
M
A
G
U
A
N
2
0
1
7
-
2
0
1
8
I
N
T
E R
A
C
T
I
O
Thanks For Your Time
Tel：1570-120-6651
Email：jemmaguan@163.com
N
P
O
R
T
F
O
L
I
O