Foxmail ipad和Mac版

logo.jpg
 

背景

早在2000年,Foxmail就以400多万用户成为世界上最成功的的邮件客户端之一。2013年,我所在的设计团队和Foxmail在广州的创始团队一起开发针对iPad和Mac的客户端应用。我们不仅想要创造快捷,可靠,易用的Foxmail,还希望通过新的设计更好的改变人们使用邮件的习惯。初期,研究团队通过定性研究和定量访谈获取了大量的用户数据与反馈。最根本的一点是我们希望打造一个真正意义上以用户为中心的产品。这次针对不同平台(iOS, OS X)的产品设计,也让我更进一步的认识到多种交互方式的优点和局限性。

 

角色

交互设计师/用户研究员

团队

用户研究团队、交互设计团队、视觉设计团队、产品经理、项目经理、开发团队

时长

6个月

 
 

挑战

  1. 用户行为和期望在iOS和OS X上存在差异。

  2. iPad版本的客户端需要重点对触屏操作做出优化。

  3. 竞争对手(Mail, Yahoo Mail, Google Mail等等)已经占据市场多时。

  4. 设计团队的最大愿景是重新定义用户使用邮箱的习惯,但如何实施还是未知。

 
 

流程

用户研究  >  竞品分析 >  头脑风暴 > 交互设计 > 原型制作 > 视觉设计 > 开发迭代

 

用户研究 & 竞品分析

在深圳和成都两地,我通过设计调查问卷并大量发放来收集定量用户数据。在成都我上门走访了多位邮箱客户端用户并通过录像,录音等方式记录了他们对邮箱产品的需求,期望和使用方式。通过反复观看和研究这些记录,我还整理出了许多在设计中应该避免的误区。充足的用户研究为头脑风暴后设计阶段提供了大量有用的思路。例如,我们发现大多数用户对于管理邮箱中的附件都非常头疼,几乎每个人的邮箱都会越来越大并导致用户完全放弃整理邮箱的动力,用户希望在iPad上能更方便的批量处理邮件等等。

 

头脑风暴 & 交互设计

头脑风暴时或讨论结束后我会用Basamiq快速制作出相关的流程图, 用它们可以提高设计和开发,产品团队间的交流效率并减少误解。Basamiq特意保留手稿样式的特性正好符合这一阶段不拘泥于细节,鼓励大胆开脑洞的目标。

载入更多历史邮件和特殊情况处理

新建邮箱账户时配置代理服务器流程

对Gmail标签的支持

邮件的导入和导出交互

为已创建的账户配置代理服务器

在和产品确定了需求后, 我会用Axure制作下一阶段的交互原型。邮箱客户端的交互非常繁复而且基于不同的账户会有不同的表现。 许多用户都习惯了一个客户端收发多个邮箱的操作。因此我必须保证交互设计上这些切换的一致性和严谨性。

会话邮件的展示和收起状态

文件中转站交互

邮件列表的管理

邮件搜索与编辑

邮箱账户与文件夹管理

重要联系人的编辑,联系人群组不排重合并

重要联系人的编辑,联系人群组排重合并

在为iPad进行设计时,一个有趣的任务是为横放和竖放的不同场景进行设计。两者各有不同的优缺点和局限,下面是我为竖屏设计的交互流程节选

邮件正文 - 快捷回复

写邮件 - 基本操作

写邮件 - 联系人和群组选择

写邮件 - 图片和文件的插入和展示

群邮件 - 联系人操作和快捷回复

群邮件 - 移动群邮件和搜索

重要联系人 - 查看

重要联系人 - 管理,设置

我们希望邮箱客户端不仅在写邮件和读邮件时快捷易用,还能作为方便的记事工具并用来存储语音,图片和视频等。而这些文件类型也正是日常邮件附件最常见的种类。

文件中转站附件列表

文件中转站 - 选择文件或查看类型

记事本编辑 - 分类的添加和删除

记事本编辑 - 为当前选中邮件选择收藏分类

记事本编辑 - 新建记事本

记事本编辑 - 添加语音和搜索

邮箱账户与文件夹管理

自定义快捷访问文件夹

 

原型制作

可点击的交互原型虽然制作起来较耗费时间和精力,但在需要进行A/B测试的时候可以明确的告诉我们到底哪个才是更好的选择。有的时候甚至不需要正式的测试,原型制作好后只需要走一遍流程,不同方案的孰优孰劣便已经有了答案。

Axure支持可交互原型在iPad上的投放

 

UI 设计

UI视觉稿由强生生制作