Instagram Design Detail(上)

作者: skhalilc | 来源:发表于2015-03-17 16:25 被阅读380次

    因本文内容由大量GIF演示内容,加载速度稍慢请耐心等候

    本文翻自Brian Lovin在2015年2月24日发布的“Design Detail:Instagram for iOS”,转载请注明出处

    原文地址:http://blog.brianlovin.com/design-details-instagram-for-ios/#1

    Podcast地址:http://designdetails.fm/

    以下为本人的翻译内容:

    大胆猜测99%正在看这篇文章的亲们都用过Instagram。它改变了我们与朋友们分享照片的方式,并在数年间变身为300,000,000多位用户手中不可或缺的app之一。

    我之前从未考虑把Instagram加入到“设计细节”这个帖子的原因是:Instagram的大部分设计细节都显而易见。这不是给Instagram天赋异禀的设计团队挑刺,因为一目了然的设计往往是最难的设计。

    最后我还是决定好好研究一番。沉浸在Instagram优美的图片流中,我找到了许多着实让到整个产品更显优雅的精彩细节,请尽情享受!

    1、菜单栏

    “精简而优雅的开始”,这可能是Instagram里我最喜欢的设计之一。当你滚动界面时,顶部的菜单栏漂亮地缩放并消失。

    或许很多人会认为,底部的标签栏也应该使用这种过渡效果,但我认为“功能栏始终存在并可见”才能带来更好的体验。

    2、快速搜索

    如果你点按底部工具栏的搜索icon,app将会直接跳转至搜索栏的输入状态。这种做法帮助用户省去了一次多余的操作,更重要的是人们不再需要为了点击顶部的搜索栏而再次调整手机的握持姿势,这些小事情都是细节的一部分。

    3、弹性按钮

    不要低估微妙的点触反馈,带来的UI体验上的提升。以此为例,“follow”按钮在点击的时候非常轻微的反弹和缩放,给用户带来的是非常优秀的体验。

    4、按钮的一致性

    当然如果你打算为按钮添加某种交互效果时,最好确保这种模式是涵盖整个app的!

    需要提到的一点是,从用户增长的角度来说,Instagram的“推荐的关注者”功能非常强大。通过“关注-发现-关注”这个超强的循环机制,我已关注了将近100多人。我希望他们能够分享更多关于这类“参与感设计“模式的影响力!

    5、快速评论

    小贴士:如果在评论栏中点击用户的ID,app将跳转至评论界面,且输入框内已预先填了该用户的ID。这是我发现过的最微妙的互动模式。一旦你用过了这种回复方式,你就再也回不去了。

    6、拍照-摄像切换

    拍照模式下,你可以点击摄像的icon或者向左滑动来切换摄像模式。我很享受这个切换过程中快门关/开的效果;这类的UI反馈绝对是有益的,同时我也想知道他们这么做是否也涉及到一些技术的原因?

    7、致敬复古的情怀

    这个细节非常的微妙,当你没有进行拍摄的时候,在进程栏上将会出现一个处于闪烁状态的白色小条。这个可能是对老款摄像机在屏幕上闪烁的“待机”圆环的致敬。

    8、提示

    当你点击“摄像”按钮时,弹出提示引导你通过长按的方式进行摄像。这真是一个机智的设计,因为这个按钮的操作交互多少有点有违常理(即点按而非点击)。

    在iOS的系统相机中,摄像的操作是通过点击摄像的按钮进行的。但Instagram试图向用户展示,在合适的时间通过长按的方式,把多段视频剪辑到一起。我不太清楚Instagram是否在第一次使用app的时候会预演这个功能,但不管怎么说这个提示很好的帮助到了用户。

    9、删除视频

    当你录制了一段视频后,相机的icon立即变成了删除的icon。需要点击来二次确是否删除这段视频,同时icon和进程栏也变成红色来提示用户。

    有时候我会比较不同的app是如何处理摄像这个功能(第一反应就是Vine,Twitter和Instagram)。比较摄像过程中微妙的用户体验设计是种很赞的体验。看来似乎不同app对摄像功能的展现风格有不同的看法(Twitter尤其让人印象深刻)。

    下半部分的内容数天后也将发布,尽请期待。

    相关文章

      网友评论

        本文标题:Instagram Design Detail(上)

        本文链接:https://www.haomeiwen.com/subject/pywixttx.html