恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Inbox的交互细节
0.0°
2014-11-19 自译外文 经验/观点 原作者: Brian Lovin 举报 38792 115 35 15

11月28号修正:动图已提供网盘地址,有需要的同学可自己下载观看;)

由于网站动图上传错误,细节展示动图需依靠外链,由此带来的不便,愿谅解!


Google的新产品发布总能引起众人的关注,上周发布的Inbox也毫不意外。基于重新思考邮件使用的交互功能并对其进行智能化升级,Inbox强调让使用者专注在真正重要的邮件上,提高用户工作效率。 

历经数月,Google设计团队操刀设计,采用Material Design语言,界面升级,实现跨平台运作,适用于iOS,Android和Web(目前只适用Chrome浏览器)。不得不称赞Inbox诞生。 

于此,本文将详尽介绍Inbox的交互细节,探索部分尚待完全领会的设计想法。

 

1.载入页面

动图效果

Material Design是应用于数字界面设计的可视化语言。而Inbox所有的动效和手势都采用了Material Design设计语言,以此引导用户的操作流程和视图。 

载入页面完美的奠定了交互性,趣味性以及高效性的设计基调,每一个操作都由对应的动效相对应,有序而简明。

 

2.登录

动图效果

在录制这个页面前,我添加了两个Email账户,但我想要展示选择Email账户并开启时,滑动条的效果。如动图所示,我只开启了一个账户,事实上我能同时添加更多账户。

不过,暂时无法整合账户的Inbox一定程度的阻止了我完全脱离Mailbox的适用。要知道我同时拥有6~10个Email账户,为了收发邮件,在彼此之间进行账户切换相当繁琐。我希望Google能够找出一个聪明的解决方法,尽管我知道这很难!

 

3.操作

动图效果

屏幕右下角的红色圆圈是全新的设计元素,点击后滑出的选项能让你快速撰写新邮件,提醒以及发信给推荐联系人。但我不知道这些联系人是基于什么原因被推荐的,也许是因为他们是常联系人(你的爸爸妈妈?)。也许我的提问有些无聊,但就我而言我想要快速联系到的对象和我相关度很低,所以我只希望检索联系到几个特定的人。

值得注意的还有浏览快捷菜单选项时,其余界面呈现半透明的白色,避免了页面元素过多带来的繁乱感,更具可视性。

注意:通过邀请码才能适用的策略并不坏,我已经尝试过,也为这种交互使用体验宣传模式提供了认可。

 

4.Pin开关

动图效果

Pin——你是什么?你有什么用?我该如何使用你?当第一次使用Inbox这些问题一直困扰着我。我已经习惯在Gmail为邮件标星。但是Pin时完全是新的交互设计,而且Google并未对此解释过多。

也许Pin的目的仅仅是——留下悬念,让用户自己决定如何使用。 

冒着被称作排版笨蛋的风险,这个空白视图里的文字行距着实有些太大了。通知说明的文字不够紧凑,更像是标题。

 

5.滑动

动图效果 

如果设计的标识运作,那么就要运作,是么?滑动已经逐渐在Email应用中普及,追根溯源来说Mailbox在此做得不错。在这里,我们能通过滑动选择标记邮件是“Done(已处理)”或者“Sonnzed(待办)”之后再读。

说句题外话:Inbox在此强调的“Done(已处理)”更像是建立的To-do(待办)列表。同时,你能够通过“Pin”你的邮件,不过这也与提高效率有些冲突,我是“Pin”了邮件还是“Sonnzed(待办)”呢?或者说“Pin”只是代表一种优先级?我什么时候需要取消“Pin”呢?这些问题让我困扰不已。

 

6.颜色

动图效果

Inbox在色彩的使用上创造了一种导航性。绿色代表Done(已处理),黄色代表Sonnzed(待办),蓝色是标题,灰色是标签,等等。颜色使用的一致性无形中创造了一种语言和引导,提高用户效率。通过颜色,我就可以知道我在App的具体界面。

这种全局观对设计师来说并不容易,而我也一直在研究其他的App在UI设计的空间感和方向感中,对色彩的使用是否有卓越成就。

 

7.导航

动图效果 

创建一个使用上注重功能性,美学上有连贯性并且直观的导航并不容易。特别是Googler,有太多的特别的产品提供实用案例。不过我很喜欢Inbox使用了通用的导航结构,有序,连贯,讲究逻辑,切换自如。

 

8.滑动手势

动图效果 

更大更宽的屏幕意味着UI中的可触操作无法自如实现,特别是对于手很小的用户来说。不同设计师都由各自的解决方法,在Inbox我们可以看到他真的很灵活,很实用: 

向下滑或者向上滑动邮件正文的边缘,你就返回到你之前的界面(在我的Inbox是这个情况)。在今后两年中,我希望每个App都能在核心导航中应用不受限制的滑动手势。这对临时用户还是高级用户都增添了实用经验。

 

9.提醒

动图效果

当类似于提醒这样的功能被添加在Google的App中,我们最好多注意一下。Google引以为傲的Google Search中,提醒也被隐藏在交互设计中,眼不见心不烦。

毫无疑问,Inbox也是一样。但不得不说,提醒功能在Google未来的愿景中还是扮演者重要角色。为什么呢?虽然我也不确定。综合了“Sonnzed”“Pin”功能,看起来就更复杂了。

 

10.清除

动图效果

在Inbox中邮件通常由日期排序,在动图中你可以看到我今天的邮件之后是更早的邮件。请注意当我清除今天的邮件后的动效和切换,在剩余页面内容向上移动填充间隙时,屏幕底部还有文本说明我刚刚的操作。非常可爱。

 

11.搜索

动图效果

我喜欢当打开搜索时,左上角导航栏上的图标切换,当再次点击回到先前页面的圆形加亮也相当漂亮。

 

12.旅行卡

动图效果

Inbox的一个核心元素就是整合你所有的有效信息。旅行卡就是我最喜欢的,首先布局样式非常明晰,所展示了旅行目的地的图片更像是锦上添花。Inbox在web和iOS的邮件预览做得很棒,突出的附件以及更多的Google Docs比其他的邮件应用更有优势。

 

13.附件

动图效果

举个例子,我能够快速的预览和保存照片附件,这甚至都不用打开邮件。我觉得,这是Inbox最大的卖点,节省了我的时间。

 

14.多个附件

动图效果 

多个附件?一样没问题。这实在太聪明了,对于处理如此多附件的人来说,效率得到了极大地提高。

 

15.扫除

动图效果

Inbox还带了了一个新的交互手势——sweeping(扫除),一种极为节省时间的处理群组邮件的方式。我能想象那些习惯于在Email工作流中做标签的同行会多享受这个功能,不过,这个功能也只能在真正的工作流中得以应用。

还有,你喜欢这个空空的Inbox视图么?比起传统的清空视图,他看起来更友好呢。

 

16.使用指南

动图效果

坦白说,我对使用指南完全白痴,我更着迷于交互过程,美学体验还有实际使用,尽管Buffer的用户激活也是我重点关注的方面,所以,我也对各个App对于用户操作的指导很感兴趣。

以下是很简单Inbox使用指南,每一个步骤都很清楚。我还想表达我对于设计师应用色彩的喜爱。 

注意:第一个视图是提醒。从此也可看出Google在此的用心良苦。

 

17.切换账户

动图效果

在此我有两个Email账户,我只要轻击侧边栏上的头像就可切换。多次点击用户切换有时会有些烦闷,但这里的动效十分流畅。

 

18.阅读邮件

动图效果

说了那么多我发现我忽视了最关键的部分——阅读邮件。动图所示正是你打开邮件的界面,我喜欢所有的白放大填充,最终将彩色的栏目推出屏幕,为阅读提供了沉浸感,无干扰的环境。

 

19.触发账户

动图效果

作为选择,你能够轻击侧边栏的下拉箭头,即会打开与你相关的email账户,可进行管理。我特别喜欢这个下拉箭头,他和切换过程中的其他组建配合的特别好,不同于一般的侧边栏。

 

20.Web载入页

动图效果 

让我们切换视角看看网页版的Inbox。这个载入页面和手机app中的颜色,版式以及动效都是完美的统一。有滚动的动作在网页上可能会显得有些笨拙,但最主要的展示内容还是很令人着迷。

注意看页面右下角的箭头,他的出现都稍早于页面,引导我们进行滚动翻页。

 

21.网页预览

动图效果

设计师和开发者们,我想你们一定非常骄傲为了保持UI和网页一致性自己所作出的工作,特别是iOS上任何小小的微调都会推迟上架App Store的时间。所以请允许我对Google的同仁们表示脱帽致敬!

而且,我特别喜欢当我点击“圆+”符号时,图标阴影的闪动,深度也很合适。

 

22.深度

动图效果

将深度添加到其他的二维设计中有很多好处。尽管扁平化设计已经深入人心,但深度和阴影的念头一直令我挥之不去。这种心情很难用语言来形容,网页上的深度所创造的空间感和触控的真实感是扁平化设计无法实现的。

对Google来说,还有一个小细节——附件图片随着鼠标的触及加重阴影,滚动箭头回应着我的点击,点开附件图片时将只见显示在屏幕中央。这些页面和阴影都给增添了交互体验的感受,我希望这种风格永不过时。

 

23.动效

动图效果

这个动图我看了至少20分钟,我一直在想这里的切换对用户体验和设计来说有什么意义,接下来我试着解释我的想法:

当我将一封email标记为Done(已解决),或者清除我Inbox的一些邮件,最直接的反应是剩下的内容上移填充空隙。这是有道理的,也符合我们心理预期。但这些不同的标记之间是有区别的么?有联系么?

当我取消那个动作,这个动作并不只是反向重放,不,那封邮件极快的回到了之前的页面中,并调整好了位置和大小。

我本能的反应是觉得这个设计缺乏打磨,设计团队可能忽略了保持交互设计的流畅性和一致性的步骤。但后来我又觉得,也许这是设计团队有意为之。 

作为一个用户,如果我意识到我的错误,我只喜欢尽可能快的取消操作,我希望交互界面也能随之反应,在我的错误被修正之前,丝毫不浪费我的时间。我觉得应该是这样的:一个明确无疑的完整撤销动作,恢复我之前的信息。简单的切换能让我知道a)我的数据没有消失b)我是否需要等待“撤销完成”的提示。

可能我想太多了!不过我很期待是否有谁也曾像我这样总有些奇特想法的。

 

24.网页浏览

动图效果

以下动图只是展示Material Design的中的设计元素,精巧的日期选择器搭载在极棒的交互界面上,当我流畅的标记好所有的email,即刻显示色彩丰富的空白界面。

 

25.搜索

动图效果 

Inbox的搜索交互大胆又多样,只要你进行搜索输入这都有大量的动效,而且有些方面是突然也意外,甚至迷失方向。也许我还需要学习和进行更多的测试来了解——毕竟,Google是搜索之王。

更新:2014-11-19

下载
收藏

115人已收藏

Muselilys

Know your shabby.

  • 32

    作品

  • 501

    粉丝

  • 6

    关注

  • 设计师如何找到自己真正热爱的工作
  • 你的滚动条
  • Twitter设计总监谈“宏交互”
  • 乌托邦式UI构建者:Bret Victor
相关标签

    猜你喜欢

      2014-11-19 自译外文 经验/观点 原作者: Brian Lovin 举报 38792 115 35 15

      Inbox的交互细节

      0.0°

      你确定要举报Inbox的交互细节

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年11月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      35
      115
      15

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录