Path for iOS设计细节赏析

1.登录模态

Path使用他们的弹出(Popup)设计语言,在第一时间取悦新用户。轻微的弹入和渐隐效果使得登录页面看起来如此鲜活。太棒了——我们将会在接下来的部分看到这种式样应用在Path的其他地方,保持了良好的一致性。

Image title

 

2.新手引导

新手引导流程是如此的顺畅!没有多余的废话,也没有不必要的信息,只显示几行简单的入门提示,模态窗口随之消失并显示主页,主要分享按钮(下方的+号处)会弹出工具提示欢迎用户到来。可以看得出设计师花了多少心血设计这些小细节——尤其是工具提示上的用语非常讲究。

Image title

 

3.Path最著名的地方

我记得在Path刚问世的时候,这个弹出式分享按钮吸引了大量用户和设计师的目光。我记得我盯着屏幕看了老半天,一直在想他们到底是怎么做出来这个的?!Path最近的更新对这一设计细节进行了细微处的更改,但用户体验基本不变。

单击“+”号打开一个弹出式菜单,里面是所有用户可以分享的内容。菜单图标很有趣地向外弹出,同时旋转。当然,这种动画设计会让选择时间变长,但是给新用户增加的愉悦感是无法估量的。

Image title

4.引导页

Path在引导页设计上有许多非常棒的小细节。这些页面会在新用户打开一个新标签时出现,帮助用户更加了解Path。
不要忽略引导页模态窗口从屏幕上滑走的细节动画,它虽然只在短短一秒内发生,但却为整体用户体验增色不少。

Image title

5.个人页渐隐效果

我看到越来越多的app采用这种滚动+渐隐的效果了,这种交互很漂亮,在Path上的使用也非常得体。当你滚动个人页时,屏幕上的一些元素会渐渐消失,逐渐被一个简单的“我”的导航栏标题所代替。

需要注意的是背景照片是直接显示在iOS状态栏的下方的,将自己的照片填充满屏幕的感觉真好!

传不上图,点击查看原文视频

6.发布页交互

Path采用友好而又有趣的方式,让用户和朋友进行分享——像素完美的贴纸表情可以传达情感。注意看当我单击发布文章的爱心按钮时,表情框是像气泡一样弹出的,太可爱了。

Image title

7.更改个人页图片

这一细节交互同样很有意义,但是经常被忽略掉了。单击个人页标题处的任何地方,会弹出更改背景图的上拉菜单(Action Sheet)。你不需要到处去找设置按钮,或者选项面板,只要单击你希望改变的地方,这样的好处是没有多余的学习成本,我喜欢!

Image title

8.购买表情贴纸

我把这个细节加进来,是为了强调贯穿整个app的模态窗口动画非常具有一致性。

Image title

9.地图视图

这个视图上有两点非常棒的地方:

①后退按钮使用的是Path标志性的“P”logo,这点对我来说很酷——对于设计师来说,这里的处理会是加上一个简单的“返回”或者“关闭”字样,但是加上程序的logo会给这款app增添更多的风味和人情味。

②注意当我旋转地图时所有移动的部件:设计精美的指南针会随之旋转,文字也会旋转并移动。

Image title

10.搜索框

当我在毛玻璃风格的搜索框内单击时,一些筛选选项会像气泡一样出现在屏幕上,吸引我进一步点击探索。

Image title

11.加载提示

当我开启临近搜索时,我们可以看到这个美妙的加载提示映入眼帘。我想强调的是Path的设计师放弃了好几种显而易见的解决方案——下拉菜单(Spinner),进度条(Progress bar)或加载文字(Loading text),选择创建自己的加载解决方案,与app整体的设计语言匹配。

Image title

12.朋友

在这个页面中,我想搜索一位朋友的名字,将他加到我的圈子里去。过程的细节或许看起来微不足道,但不应该被忽略——注意当你添加或移除好友时,那颗星星弹入弹出的方式。

Image title

13.分享流

首先需要注意的是,当用户单击时分享按钮是如何交互的。在下面的视频中,我选择了一段引用来分享,引用图标会变大,同时渐渐消失。这的确是一个非常流畅顺滑的过场动画,我发现越来越多的app都在采用它了(例Twitter)。

一旦进入了编写内容视图,我试着切换“好友圈”和“私密”选项,发现滑入视图中的上下文提示符运动地也非常流畅。

Image title

14.时钟

当你滚动信息流视图时,屏幕的右侧会出现一个时钟工具。如果继续滚动,会基于它下层的视图来自动校正日期和时间。时钟的指针动画非常棒,如果你想要研究如何用简单的办法取悦用户,不妨下一个Path试试。

Image title

15.下拉刷新

没有多少界面的流动性,弹性和整体观感可以和Path的交互媲美。值得注意的是Path的很多交互要比Facebook的paper来得早。

Image title

16.官网

设计师同样想办法把网站也做得同样有趣,即使对一个着陆页也是如此。

图传不上,点击查看原文视频

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部