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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
基于IOS Pinterest 设计细节
0.0°
2014-09-20 自译外文 经验/观点 原作者: Brian Lovin 举报 24190 45 16 5

  知道有小伙伴已经翻译过了,但是感觉跟原文有点出入,所以重新翻译了一下,我理解的原文是这样的。

-----------------------------------------------------------------------------------------------------------------------

  对于Pinterest这款APP,我希望自己能用得更频繁一些。尽管以下几个版面致力于设计、UI(用户界面)、UX(用户体验),但我却从没涉足过这个平台。且无视本人的缺乏接触,每天都有数以百万的人在使用Pinterest,在上面整理、计划、激发灵感、设计、建设和梦想。虽然市面上普遍有很多产品提供相同的功能,但能给用户带来这么多益处的产品并不多,我喜欢这点。

Pinterest 成为了这么多用户的绝妙工具,与此同时,也在世界范围内传递着一些最佳设计。它拥有静谧、温和、谦逊的,横跨网页端和IOS移动端的用户界面,保持着不同寻常的风格,让用户关注他们自己的个人需求。在这篇设计细节的分析文中,我将研究一下IOS Pinterest里几处精妙的交互——看文吧!

  一、启动画面

  我很乐于开始探索不同APP的登录体验。对于设计师来说,登录和激活用户是一件极其微妙又充满挑战的事情。为新用户去理解并改善产品体验是一个永不止息的过程。我很欣赏Pinterest在他们崭新的用户体验上所做的一切——APP和网站都很棒。

Pinterest的重点全在“受益”上,跟功能没有半毛钱关系。他们不会提钉图、分享、社交媒体等等,绝不!他们只谈论人们是怎么使用APP解决生活中实实在在的挑战或问题的。启动画面上,平移的图像加上简单的价值表述,就达到了引人注目的(且激发兴趣的)用户体验。

  二、搜索过滤器

  毫不犹豫地脱离IOS的默认设计模式,并且保持着实用和清晰的特质,这种APP会成为我的偏爱。在Pinterest,他们的搜索过滤器上增加了一个的触摸区域,使他们与标准的IOS触发器区分开来,干得漂亮。

 

  三、版面浏览

  用了一段时间之后,你就会注意到一些微妙的东西,它们促使产品产生使用快感。微妙的渐变、入口和对褪色元素的利用,这些都为用户带来非常流畅体验。在这款APP中,没发现多少静态界面突然变化的情况。

  四、下拉刷新

  如果有人愿意尝试不同于IOS7的默认加载指示,不管是谁,我会向他致敬。在Pinterest里,他们的尝试一点也不炫酷狂拽,而是用简单明了的效果带来良好的触感和改善,对制作一款让人难忘的产品大有裨益。

  五、提示气泡和加关注

  不好意思,这部分的动图有点跳跃。Pinterest的视觉风格很干净,在APP的各个部分,用来引导新用户的介绍也很清晰,我在这儿强调提示气泡,就是对此表示一下认可。

  该处设计细节的第二部分——“加关注”这块,很容易就被忽略了,我自己也漏掉了几次。在我关注这一板块时,在粉丝数量上留意了一下,发现那个数字鲜活了起来,利用放大收缩这一运动帮助我理解自己的操作内容。

  六、版面滚动

  出现了“plants”!

  尽管Pinterest 的滚动确实给用户带来了“丝滑”的享受,但“滚动模糊”的图片背景模式已经没什么新意了。但我想说的重点在于,当你的页面滑过版头时,发生了什么事情——出现了标题“plants”——请注意“plants”弹到那个位置的方式。惊人的流畅——提供那行文字本应很简单,只要…额,出现就行了,但是这个动作给APP带来了生命和深度,我想那些看到这个动作的用户会对此由衷感激。

  当我开始往回滚动时,文字就按比例弹到里面去了,感觉很棒!

  七、钉图的细节

  这张动图想关注的是,当用户浏览APP时,他们体验到的整体流畅性。这里的每一处过渡都是经过慎重考虑和精心设计的。在有新模式的视图出现时,我喜欢主视图那种模糊、按比例缩放并回到界面深处的方式。反正,很爽滑。

  八、查看照片

  当你为某张照片点赞时,“红心”生动地跳动起来。

  这些都是那种很容易就被忽略和无视的细节,但是我觉得,正是这种细节给APP带来十足的生机和独特的气质。作为一个用户,知道APP背后的那些设计师和开发者们很关心这些小细节,对我来说很重要。

  九、钉图漂移

  需要敏锐一点才能发现这个,当一个钉图淡入、淡出视野时,它有一个微妙的倾斜。这个过渡效果太细小,来得太快——我爱不释手!页面的这个倾斜和新页面从底部摆入过渡的方式,给APP带来深度和可触性——这就是那种至关重要的细节。

  十、返回主版

  弹力十足!在钉图上下拉就可以回到主版,每个元素都很弹,每个过渡都很滑。

  十一、快捷操作

  在钉图上长按,可以触动这些快键操作——带有好玩的气泡小图标,可以用它们与内容即时互动或与好友分享照片。这里有一个值得注意的物理现象——这些图标和你的触控之间存在某种排斥和磁性引力。如果你还没动手试一试,我墙裂推荐!

  十二、快捷钉图

  无论什么时候快发钉图,Pinterest 都有很好的一致性。背景模糊、按比例缩回的同时,钉图界面滑入视野,干净利落。

  十三、快捷点赞

  当你给一个图“快赞”的时候,看看在图片上面蹦出的气泡小红心——是对用户操作成功的微妙反馈。

  十四、取消点赞

  这个太棒了。对一个帖子取消点赞的方式并不意外,意外的是原来的那个心,碎了。由于某种原因,这个微小变化为取消点赞的操作增添了感性因素——我有种预感,在用户测试中这个改变使取消点赞的用户减少了,当然,只是猜测而已。

  十五、发送钉图

  正如我们的预期,在Pinterest的生态系统中,图片的发送有同样的平滑的过渡和模糊效果。同样值得注意的是,当我们的信息发送成功后,在屏幕底部会出现一个黑色的确认小气泡。

  十六、添加文字

  当给分享图添加自定义信息时,文本区域会很流畅地扩展开来——扩展之后,标题栏被推到屏幕顶端,使得文本区域占满屏幕,排除了所有干扰,我很喜欢这个方式。

  十七、标签栏操作

  在标签栏添加内容非常流畅——加号图标(+)旋转变为叉形图标(x),为用户提供快速关闭和取消的方式,虽然我不太确定这个设计的易用性,但是哥们,这个看起来很棒的!我一如既往地欣赏图标到视图里的过渡,它利用规格大小和色彩的变化使用户关注屏幕上的按键动作。

  十八、Pinterest的登录页面

  作为该文的最后一处细节,我想突出说一下Pinterest主页上一些精妙亮点。背景上,缓慢向上滚动的成排的图片是与标题和价值表述直接相关的。我在这儿用几个动图来展示Pinterest正在用的一些不同内容:策划旅行、栽种花园、去跑步——我只能奢望设计师做的这个数据流能在这个登录页面的设计风格里滚完(这句话我不确定是不是这意思)。

-------------------------------------------------------------------------------------------------

  动态图太烂了太烂了,所以亲自去登录页感受吧。

更新:2014-09-20

收藏

45人已收藏

飞同学

写点什么吧

  • 18

    作品

  • 28

    粉丝

  • 24

    关注

  • 美妆,给爱美的你——淘宝手机主题皮肤设计大赛参赛作品
  • 天气app界面
  • 帆布鞋
  • 拟物和金属质感

    猜你喜欢

      2014-09-20 自译外文 经验/观点 原作者: Brian Lovin 举报 24190 45 16 5

      基于IOS Pinterest 设计细节

      0.0°

      你确定要举报基于IOS Pinterest 设计细节

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      16
      45
      5

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

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

      登录

      手机号

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

      登录
      第三方账号登录