Instagram Design Detail(下)

作者: skhalilc | 来源:发表于2015-03-23 17:45 被阅读242次

    因本文内容由大量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/

    Instagram Design Detail(上):http://www.jianshu.com/writer#/notebooks/595459/notes/804793

    以下为本人的翻译内容:

    10、点按对焦

    虽然这块没什么亮点,但是我很喜欢的是,当你在拍照时点击拍摄区域时,会出现一个脉冲震动式的对焦环!就我个人而言这个脉冲环的动画效果有点太快了,相较于app众的其他过度动画效果有点不和谐。我希望它可以给我更慵懒一点的感觉。

    11、编辑切换

    当你在编辑添加滤镜时点按照片时,你可以快速比对目前编辑的与原始的图片。使用某一具体的工具(这里是饱和度),点按该图片可以比对这一具体工具的使用前后效果。

    12、重排滤镜

    最近Instagram更新的一个内容,就是让用户可以通过重新排列或隐藏滤镜,帮助用户更高效的使用他们喜爱的滤镜。这个功能使用的交互方式,让使用的体验非常棒。

    这里我只想到一个优化的地方,就是在隐藏滤镜的时候,增加一些反馈效果,帮助用户进一步了解这些隐藏的滤镜去了哪里?如何重新放回来?隐藏的操作是把某一滤镜拖到“hide”区域内还是空白区域即可?

    13、添加滤镜

    这里有个细节非常微妙却大大增强了Instagram的编辑体验:

    当你使用滤镜或工具编辑照片时,并没有立刻就在照片上展示这些变化,取而代之的是快速闪现一下你的原照片,然后从边缘开始快速的实现编辑后的效果。

    14、添加标签

    看完20遍视频演示后才明白这是怎么一会事儿。Instagram上添加标签这件事儿涉及大量的细节和交互。这些小细节包括,搜索用户名时背景上的半透明遮罩,删除标签时的弹性效果。这一切的细节汇聚到一起形成了优秀的使用体验。

    15、二次确认

    我曾犹豫是否要提这个细节,因为大部分人应该都有用过,但还是提一下吧。

    当你准备发布照片时,你可以点击缩略图查看最后一眼照片来确认效果。每次在Instagram上发布照片时我都会使用这个功能来确保发布的照片是我觉得满意的。

    16、反向操作

    终于在2015年大部分的app在这方面开始变好了,但我不得不再次强调:app中通过视图和流程的连续引导,帮助用户了解“现在在哪里”,“之后去哪里”是至关重要的。Instagram在照片编辑流程上的反向操作方面做的非常出色。

    17、相机胶卷的快速启动

    暂时就提一个亮点:点按相机icon后直接跳到相机胶卷。我的承认,今早重点研究不同的设计细节时,我才发现了这个交互,但这也变成我在Instagram上添加照片的默认方式。省略一步操作让用户在过程中感觉更智能这种做法深得我心。

    18、欢迎界面

    当你注销账号时,背景的欢迎界面的色彩随着时间而转变。这个变化非常的慢,当我第一次注销的时候甚至都没发现。

    多年来我至少可以描述出三种不同的Instagram欢迎界面——每种都有截然不同的体验和风格,最新版本的欢迎界面非常有意思。无论原因是什么,这种设计并不符合Instagram的整体(不论是app还是web)设计风格。如果Instagram内部有人可以分享做这个功能点原因,我很愿意了解一下!

    19、修剪

    Instagram的朋友提醒了我这个小细节,真的很棒!如果你在视频编辑倒入了一个长度超过15秒的视频片段的话,app会出现一个弹动效果的剪刀icon提示你的视频已经被修剪过了。之后你可以点击剪刀icon来编辑修剪的视频范围。我非常欣赏这种用微妙的动画效果来抓住用户眼球,并引导他们下一步操作的做法!

    感谢大家的支持和鼓励,之后不定期的翻译一些关于优秀app设计和体验方面的文章。

    相关文章

      网友评论

        本文标题:Instagram Design Detail(下)

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