【翻译】path for iOS设计细节赏析

2021-12-02 09:01:16

阅读 8624次标签： wap网页设计作者：蓝blue

1.登录模态

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

【翻译】path for iOS设计细节赏析

2.新手引导

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

【翻译】path for iOS设计细节赏析

3.Path最著名的地方

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

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

【翻译】path for iOS设计细节赏析

4.引导页

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

【翻译】path for iOS设计细节赏析

5.个人页渐隐效果

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

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

（传不上图）

6.发布页交互

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

【翻译】path for iOS设计细节赏析

7.更改个人页图片

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

【翻译】path for iOS设计细节赏析

8.购买表情贴纸

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

【翻译】path for iOS设计细节赏析

9.地图视图

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

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

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

【翻译】path for iOS设计细节赏析

10.搜索框

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

【翻译】path for iOS设计细节赏析

11.加载提示

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

【翻译】path for iOS设计细节赏析

12.朋友

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

【翻译】path for iOS设计细节赏析

13.分享流

首先需要注意的是，当用户单击时分享按钮是如何交互的。在下面的视频中，我选择了一段引用来分享，引用图标会变大，同时渐渐消失。这的确是一个非常流畅顺滑的过场动画，我发现越来越多的app都在采用它了（例Twitter）。
一旦进入了编写内容视图，我试着切换“好友圈”和“私密”选项，发现滑入视图中的上下文提示符运动地也非常流畅。

【翻译】path for iOS设计细节赏析