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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
设计细节:Dropbox 旗下的图库工具 Carousel
0.0°
2015-08-27 自译外文 经验/观点 原作者: Brian Lovin 举报 1336 7 2 1

我花了很长时间想哪一个 app可以顶替设计细节这个系列的封面。截止到这篇文章为止,我已经安装了将近400个 App 在我的手机上——搜索变得越来越困难了。

Carousel 是那些滑入到我手机中,奇怪的 App 中的一个。虽然我第一次登陆到现在也已经几个月,没有再登陆了。奇怪的是,当我开始写第一个设计细节系列的时候,我把一些设计决策列了出来,其中就包括了设计的迭代。

如果你是一个 Dropbox用户,那么 Carousel 对你就很有意义。这是一个极好的把重点放在照片储存和管理上的应用程序。他们的 iOS 提供了出色的概念,同时还拥有很多让人耳目一新的欢迎界面设计。Carousel Web 端应用你也不应该错过——他不仅高度的呼应了 App,还在浏览器上提供了我们已经在 Dorpbox 形成的习惯。

下面是我一些非常喜欢的 Carousel 的设计细节:


Carousel,像其他 Dropbox 的产品一样,可贵的欢迎像 Alice Lee 和 Ryan Putnam 那样有才华的设计师的艺术和品牌感。

值得注意的是,在我们浏览 Carousel 的设计细节的时候,动效和插画为了真正能创造出一个愉悦的用户体验中扮演了多么重要的角色。

1、登陆

当你第一次登陆的时候,这是我见过的最流畅的引导页之一,它会让你的对这个软件的认识加速。

撇开流畅和美学不说,我不禁要提出一个事实那就是,如果我几秒钟之内不触摸屏幕,那就会自动滚动出一个动画。这告诉我,无论什么原因,人们如果没有与屏幕互动,Dropbox 会推动人们前行。

我很想知道自动滚动促使人们登陆的这个设计背后更多的故事,但是现在它告诉我们了,团队在测试阶段就发现,人们不会主动点击划走登陆页面。


2、排版艺术

如果你是哪种很喜欢快速滚动页面的人,你会看到一个很漂亮的精心设计的动画,很多照片以很优雅的方式落下排在你的手机上。我非常喜欢这个没有时间限制的动效,另一方面,还和你的屏幕速度是一致的。


3、权限

Carousel 是一个 Dorpbox 旗下的产品,所以他们已经知道了你的账户,并且帮你登陆了。所以在这里是一个出色的,简单的登陆流程,放弃了必须去检查的我密码,或者2步确认的流程。

这个视图,我觉得一定是个很难的设计。这里我们有一个 App,需要以非常自然的方式,并且它必须连接到你的相册。但是他们并不是突然出现,或者让你注意到 iOS 的批准权限。

相反,你必须去选择那个清晰的文本标签和选框。如果你试着设计登陆而没有获取你的批准连接到你的相册,你会让用户稍稍的感觉到震惊。

真的,我不知道有多少人在这一部分退出了 Carousel。不过作为一个狂热的科技消费者,和一个急切地实验狂魔。我马上就给了 Carousel 访问我的相册的权限。有很多人也许对产品、总公司的产品、甚至在云端管理自己相册的这种概念的产品都不熟悉,可能会感到有些害怕和被侵犯的感觉而放弃。

而对那些有勇气继续的人,里面藏着更多精彩的内容。



4、iOS 权限

下面这个 gif 显示了 Dropbox 是如何通过 iOS 权限的。一旦你勾选了选框,真正的权限就被赋予了。这种模式已经在很多精心设计的应用程序中司空见惯了。这种批准权限的反馈将让用户了解他们的数据是如何以及为什么会被使用的。在正确的时间要求权限是关键。


5、引导页

这是那种我已经遗忘了的传统引导页。在登陆之后看 Dropbox 解释细节和 Carousel 的价值所在是十分有意思的。确实,这降低了新用户登录时候的认知负担,但是这个引导页以一种方式,让我想更多地使用 Carousel,并把它放在首位。

“Carousel 让你的照片十分安全……”

对于我来说这就是关键。这不仅仅是创建一个你的照片的画廊,或者把他们整理好了放在相册里。我可以在我的应用程序里用它,我可以在我的 Mac 上用它。我想知道的只是我的照片都被好好保存了,他们永远在那里,无论我的硬件设备发生了什么情况。


6、说明页

好了,我们现在进来了。但是 Carousel 并没有马上给你展示使用诀窍。一旦你的照片缓存完毕,应用程序马上就会启动一个非常清晰的“使用说明”,来介绍应用程序中不同的模块。首先告诉我的是我的照片在这里都被整理过了——可以透过时间和地点来浏览。

这里有几种不同的观点,关于这种“说明风格”能否给用户提供良好的体验。一方面,这确实帮到了一些人,让他们减少理解的难度。另一方面,看到照片通过时间和地点整理过,让人感觉更显而易见。在这个新的用户体验中,当我调用新的图片编码的时候,这是足够显而易见的。


7、还是说明页

在说明步骤里,还有两外两步骤。其中一个步骤是给我展示了如何选中,另一个步骤是展示了照片的排布方式。足够了。

第二步给我展示了时间轮,并且如何使用它。

有趣的是,我有以前的一版Carousel 第一次登陆的 Video,那时候时间轮是沿着底部设计的。

迭代,视频在下面:


8、头像照片

我对镜头有些害羞,所以我就拍我的厨房了。这是一个很好的接触,通过预览你要拍的头像,同时你也是在拍照。同时我还有些困惑,为什么我还需要 Carousel 的头像拍照?是要关联 Dorpbox 吗?这些照片会出现在一些别的地方吗?别的人会看到这些照片吗?我猜总的来说,这些照片也可以被你分享照片的那些朋友来查看。

也许增加这这个解释可以让用户体验更加诱人,毕竟这是一个主要设计元素在“更多”这一栏上。


9、任务清单

这是我在 Carousel 中最喜欢的一部分,这里用了很聪明的心理学和积极的设计,不过他仍然是很诱人和友善的。谁不想看到这个小纸杯蛋糕开心呢?

站在更高的角度来看,使用“任务清单”来让用户上手一个应用程序仍然是很少有的设计。我得说 Dropbox 的网站以贯彻这种流程而闻名,在网站上他们设计让用户分享 Dropbox 给朋友或者完成特定的任务,可以换来额外的储存空间。在这儿,这个聪明的设计混合在两个小任务中:把你的照片分享给你的朋友。

这就是他们如何得到了你,这就是聪明的设计。

10、时间线的消除

时间轮是 Carousel 的一个很好的特点,在大多数拍照应用程序中,滑动上千张照片是非常苦恼的一部分。

我使用智能手机已经8年了,所以时间轮上使用年和月来划分照片是让人心领神会的。

在这方面苹果是通过缩小在你的“时刻”视图中所有照片的预览来进行的。反而 Dropbox 通过线性视觉上的非常迷人的方式帮助用户回到时间点。

大多数时候,时间线是很难定位的,但是大部分内容是清晰明确的,并且符合我们的心智模式,这些照片在前后顺序上是如何和其他照片产生关联的。

11、选择照片

你可以通过 Carousel 的大面积确定来选择一整组照片,这是很优秀的点击设计,同样的交互模式同时能扩大选中我折叠的照片,正是如此我可以确定我选择想分享的照片。


12、带我到某个时间点

这个 gif 有一点让人困惑,你看到的是深藏在 Carousel 中得相机照片册的屏幕截图。这些截图会再次出现在这篇文章中,现在可以先忽略它。

无论如何,你可以检查一下,如果你滚动的范围超过了时间线,一个精彩的小的设计细节会渐渐地出现在底部:“带我去某个时间点吧”,如果继续拉你会被带到一个随机的时间点。我试过几次,Carousel一般会把你带到某个特定的时间点。虽然并没有什么实际用处,不过我觉得可能是想鼓励探索和回顾过去的时光和记忆。

把你拽回某个特定的情感线是个很有力量的事情。


13、回到从前看一下

这是当 Carousel 刚问世的时候我存下的一个 gif,最初的时候你可以沿着底边滑动照片,去隐藏或者分享。这是一个非常有意思

的体验,虽然不太实用。Carousel 的产品调性从分享体验转变为更直接明了,但是看到他们的这个成长,我仍然觉得很酷。


14、插画

下面的截图没有录成 gif,但是这里的插画师非常值得分享的。对于我来说,插画让 App 的体验更好了。

Dropbox 聚集了世界上最好的插画团队之一,他们的作品带着生活气息让 Carousel 变成了一个别样的、温和的 App。

注意下面的照片当我想看清全貌的时候,是如何巧妙的隐藏了女孩的脸,非常聪明。


15、网页端的Carousel

Carousel 是一个非常动人的 iPhone 应用程序,他们设计出了那么多合理的交互设计,同时还保持了产品的简介和明晰。我猜想他们的 Web 端应用程序同样可以提供简洁、易操作并且清晰的产品,我会非常惊喜的。

下面是他们主页的标题图,一张简单的插画可以不断的引起经验的共鸣,我对这一点一直惊讶不已。

这个插画的照片再讲一个故事,他们是有关联的,并且关联到我们现实生活中的经验,这就是一个非常好的情感设计的例子。

一旦你进入到网页端应用程序,一个简洁的引导也出现在你的视图中,Dropbox 是简洁的典范,他们把视觉中心作为舞台,非常自然的引导用户到应用程序中,同时推动大家主动的使用移动端的应用程序。


16、分享到网络

这一系列照片是抓取从网页端的分享照片那部分,这一部分动效和交互设计是值得从网页端个人部分看一下的。


17、时间轴和分享

在分享两个我十分喜欢的设计细节,在左侧你可以看到一个非常灵活的时间轴再设计,跳回到某个时间点变得十分容易,醒目提示帮助引导你回到某个特定的日期。如果把这个设计应用到网页浏览,一定会省很多事。随后的体验让整个应用程序感觉更加完整。

在右边我们可爱的小蛋糕又一次出现,来鼓励你把照片分享给朋友。

更新:2015-08-27

收藏

7人已收藏

常四喜

Illustration,Animation.

  • 16

    作品

  • 22

    粉丝

  • 8

    关注

  • Curva
  • icon 设计
  • origami 复刻 tumblr动效
  • Mathew Lucas C4D 学习
相关标签
动效dropboxCarousel

    猜你喜欢

      2015-08-27 自译外文 经验/观点 原作者: Brian Lovin 举报 1336 7 2 1

      设计细节:Dropbox 旗下的图库工具 Carousel

      0.0°

      你确定要举报设计细节:Dropbox 旗下的图库工具 Carousel

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2015年08月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      7
      1

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

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

      登录

      手机号

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

      登录
      第三方账号登录