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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
【翻译】path for iOS设计细节赏析
0.0°
2015-12-09 自译外文 经验/观点 原作者: Brian Lovin 举报 10129 210 179 27

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.官网

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

(图传不上)

更新:2015-12-09

收藏

210人已收藏

euphoria

桃李春风一杯酒

  • 13

    作品

  • 84

    粉丝

  • 38

    关注

  • 临摹作品:PS+AI打造炫酷概念手表
  • 设计更好的数据表
  • 一些手绘练习作品
  • 临摹:游戏萌宠图标设计

    猜你喜欢

      2015-12-09 自译外文 经验/观点 原作者: Brian Lovin 举报 10129 210 179 27

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

      0.0°

      你确定要举报【翻译】path for iOS设计细节赏析

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      179
      210
      27

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

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

      登录

      手机号

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

      登录
      第三方账号登录