文章共：5070字 预计阅读时间：13分钟
这篇译文是设计师 Kim Thuy Tu 对 Instagram redesign 过程的介绍，从用户调研到原型、界面设计。很多同学在 redesign 的时候都只关注表现层，而忽略了设计以解决问题为目的这个本质。翻译此文目的是帮助读者了解 redesign 的基本思路和实际操作方法。
以下为正文：
挑战：选择一个我喜欢并且每天使用的应用程序，看看作为一个设计师我能为它改变多少。
我选择了 Instagram，因为我从它推出的一年后，也就是 2011 年开始就一直使用它。
最初，我开始使用 Instagram 是因为它的滤镜。 但在过去的 6 年里，我已经看到了在应用程序内出现的各种变化和创新。 而我现在使用 Instagram 只想真实地表达自己，并保持与当前趋势的同步。
你可以说我是一个 Instagram 老兵。
附注：我没在 Instagram 工作，这个案例研究的意见是我自己的。 与在 Instagram 上工作的设计师不同，我并没有完整的用户访问数据。因此，这个案例研究并不详尽，我的目的不是建议 Instagram 放弃他们目前的设计，并采纳我的 redesign。
我的一些 redesign 的截图
我给自己设定了以下目标：
redesign 的目标：
-
在探索和保持联系时，增强更具吸引力的流畅的体验
-
设计更加人性化和直观的用户界面
-
关注用户情感（人本设计）
自我提升的目标：
-
学习如何进行和分析用户研究，创建流程图和线框，通过 Sketch 设计，通过 Principle 制作动画，以及通过 Invision 实现原型
-
完成我第一个从头到尾完整的设计项目，同时坚持我的设计原则
我在 redesiagn 的过程中所承担的角色：
-
用户研究员
-
数据分析师
-
UI / UX 设计师
-
产品设计师
了解 Instagram 这家公司
Instagram 是一个用视觉讲故事的应用程序，为用户提供一个平台，策划和分享生活之美丽和创意时刻。自 2010 年推出以来，Instagram的用户群已经发展到数以亿计，允许来自世界各地的人们连接和分享他们生活的片段。
为了跟上其不断增长的用户量，Instagram 不断创新，推进其“分享世界瞬间”的使命。
我的用户研究和数据
在我开始重新设计项目之前，我对 40 位 Instagram 用户进行了访谈，以更好地了解我正在设计的产品的用户：
-
一个典型的 Instagram 用户是什么样子？
-
使用 Instagram 的原因是什么？
-
是什么原因让他们再次使用？
我亲自或通过电话或视频电话进行了这些访谈。
目标受众特征
在我采访的 40 位 Instagram 中，有 10 位男性和 30 位女性。 男性使用者的年龄范围为 22-27 岁，而女性使用者的年龄范围为 19-25 岁。 65％ 目前是大学生或高中毕业生，有继续高等教育的计划。
我觉得这是 Instagram 当前用户群的一个公平的代表性样本，因为 90％ 的 Instagram 用户小于 35 岁。此外，在美国 18-29 岁的人中有 55％ 是 Instagram 用户。
在我采访的用户中 Instagram 是他们前 3 名最常用的应用程序的占到了 67.5％ 。 此外，72.5％ 的人每天使用他们的 Instagram。
用户使用频次
在 Instagram 上你使用哪些功能？
还有一些有意思的研究？
我让受访的 40 个 Instagram 用户用 3 个形容词来描述 Instagram。你对 Instagram 有什么看法？它让你感觉如何？
我收集了总共 64 个形容词。
前三名形容词是：Creative（创意），Fun（娱乐） 和 Simple（简单）
我还问了他们为何喜欢 Instagram。 这是他们原因中的前 3 名：
-
基于图片
-
简单易用
-
帮助他们保持联系
典型的 Instagram 用户角色
选 Alex 还是 Sam?
这是我对受访的 40 人的平均分析
你和谁更像？你像 Alex 使用 Instagram分享他的生活，偶尔使用搜索功能找到很酷的东西？ 还是像 Sam，使用 Instagram 对她的朋友和她感兴趣的内容保持关注？还是两者都是？
无论哪种方式，我的设计将考虑到像包括你、Alex 和 Sam的所有用户。
现在你对我的设计应已经有了更好的理解，我们往下继续！
1.主页
分析 Instagram 的当前主页
除了主页中的重复功能，我注意到三个主要问题。
问题1：内容超载（Instastories vs Feed）
在打开应用程序后，Instagram 的用户立即遇到两个主要的功能，同时在争抢他们的注意力 - 然而是应该水平滚动看 Story呢，还是纵向滚动看 Feed 流呢？
这两个选项的内容都极其饱和，看起来像一个能无限加载的巨坑。根据对选择悖论的研究，更多的选择实际上可能导致决策疲劳，不开心，内疚或是害怕错过。值得一提的是，在受访用户中几乎一半的人在刚醒或晚上睡觉前检查他们的 Instagram，所以这种决策疲劳的弊害可能加倍。
对于解决方案 ，我选择将 Story 直接集成到 Feed 中，原因如下：
Feed 和 Story 现在将一起运行，为用户提供更加一致的体验。
将 Story 集成到 feed 中也阻止了它成为 Julie Zhuo（Facebook 产品设计 VP）所说的“空中花园”。在当前的 Instagram 设计中，Instastories 很容易被忘记，一旦用户开始刷 Feed 流，根本看不见 Story。
请在原文章连接中查看动图
通过 Story 集成到 Feed ，状态不唯一的 Instastories 的点击率大大提高 。
附注：不要担心，我没有去掉 Instastories。 我只是将它们移动到邮件收件箱那里，你可以通过点击主页的右上角获得。我将在下面进一步讨论。
问题2：顶部导航和滑动手势之间的关联
通过用户研究我发现另外一个主要问题是，Instagram 的主页上的滑动功能是否直观。
简单地说，Instagram 用户是否能意识到向左和向右滑动对应顶部导航？
为了回答这个问题，我在采访中进行了一个相对简单的实验。
方法（n = 40）
在我开始这个实验之前，我提醒用户不要在这部分采访期间看 Instagram，然后向他们描述主页的基本布局和有哪些功能。描述完毕，我向他们提出四个简单的问题。
滑动：
1.在主页从左向右滑动对应什么功能？答案：通过相机发布 Story
2.在主页从右向左滑动对应什么功能？答案：消息收件箱
顶部导航：
3.你如何发布你的 Story？答案：左上相机图标
4.你如何访问你的邮件收件箱？答案：右上角的“箭头”图标
注意：如果用户使用“向左/向右滑动”回答此部分问题，我会提示他们给出另一个答案。 （你知道另外一种操作方法吗？）
这里是我收集的所有数据。
实验结果表现，用户对 Instagram 滑动大多没有什么认知：
-
只有 20％ 的受访用户正确回答了这两个滑动对应的功能。
-
30％ 回答正确了一个，50％ 全部答错。
-
50％ 的受访用户知道从左向右滑动对应相机功能。
-
有 20％ 的受访用户知道从右向左滑动会将他们带到邮件收件箱。
顶部导航：
-
72.5％ 的受访用户知道通过点击右上角的箭头图标访问他们的邮件收件箱。
-
55％ 的受访用户知道通过点击左上角的相机图标发布他们的 Story。
其他有趣的事实和统计：
-
受访的 40 个人中只有 3 个回答正确了四个问题。
-
把用户对 Instagram 导航功能的熟悉程度划分成 1-5 档，75％ 的受访用户认为自己 4 或更高。只有 30％ 的受访用户能回答正确一个问题。
-
相当高的 92.3％ 的受访用户回答错误或猜测向左滑动会将他们带到探索/搜索页面。 （这是有意义的，因为搜索/探索图标位于底部导航上的主图标旁边）
从结果的分析表明，Instagram 用户没有建立顶部导航和滑动手势之间的关联 。
“当我寻找收件箱的时候，突然看到我的脸。”一个随机受访的 Instagram 用户当被问到如何进入邮件收件箱。
使滑动手势更直观的一种方式可能是将其与底部导航链接，为此我设计了一个新的方式。
请在原文章连接中查看动图
滑动可查看新旧的信息
我的用户研究的一部分是通过应用商店阅读 Instagram 的评论。Instagram 用户的主要抱怨之一是缺乏时间顺序的 Feed。
我想了解为什么用户希望他们的 Feed 按时间顺序？为什么他们对这种变化感到不爽？通过深入挖掘，我发现用户十分在乎按时间顺序的信息。使用 Instagram 的当前算法，热门信息（被视为你希望看到的信息）位于 Feed 的顶部。这让 Instagram 的用户感到沮丧，他们害怕这种排序使他们错过了想看的信息（害怕错过心理）。
为了 Instagram 的当前算法和用户按时间顺序的需要，我决定通过滑动功能来实现，以满足用户预期：
请在原文章连接中查看动图
例如，如果滑块在中间。你会知道这不是最新的信息，你可以向右滑动以查看较新的信息。 如果滑块在最左边，你可以确认你看到的是该用户的最新信息。要查看较旧的信息，只需向左滑动即可。
问题3：左上角够不着且容易忽略
人们在许多方面握着他们的手机。 不管它们如何拿手机，屏幕的左上角总是最不方便和痛苦的位置。
研究表明，放置导航的最舒服的地方是手机的底部——紧挨着用户的拇指。
请在原文章连接中查看动图
根据我的数据，100％ 的受访用户知道如何发布信息到 Feed 中（因为他们使用它）。然而，有 57.5％ 的受访用户不知道如何发布他们的 Story 或根本不使用它。为了增加 Instastories 的发布，我选择了整合这两个发布功能，它现在更容易访问了。
2.探索和发现模式
现在你可以选择通过 Instagram 的当前本地算法或自己收集保存的主题标签主动发现。因此，Sam 和 Alex 只需打开“#ecgtracing”或“#fitness”即可随时了解他们的兴趣。
我时常要打开“#coffeefliicks”和“#dametravelers”看相关的图片。当然，你也可以单独单击主题标签，一次查看一个，然后向下拖动以刷新，查看主题标签下的所有内容。你也可以点击添加新的主题标签，删除主题标签，或在你的主题标签集合中搜索（按字母顺序排列）。
请在原文章连接中查看动图
3.用滑动连接 DM（消息）和 Story
只有 42.5％ 的受访用户使用 Instastories。人们没有使用 Instastories 的两个最大的原因是 1）他们已经有 Snapchat 2）他们不停地看到不特别关心的人的新 Story。
为了补救第二个原因，我实现了一个新的功能，名为“喜欢的人的 Story”，以增加使用 Instastories 的价值和目的。
现在你的爱人，崇拜和欣赏的人的 Story 都在你的 Feed 的顶部，增加了内容浏览的体验。
你可以点击名称旁边的心，轻松删除或添加人。
请在原文章连接中查看动图
附注：我把 Story 和 DM 放在一起的理由是什么？首先，我需要有个地方放 Story，因为我把它从 Feed 中去除了。其次，当你回复 Story 或发送照片时，它会直接进入你的邮件收件箱。 因此，将 Instastories 和 DM 组合在一起是有意义的。
4.通知和个人页
对于通知和个人页，我想通过增加负空间和分组/嵌套类似的组件，给界面更多的喘息空间。
请在原文章连接中查看动图
此外，你现在可以“喜欢”并直接在你的通知内回复评论，只需长按该用户的用户名（轻触即可进入其个人资料）。当你长按用户名，它将触发评论框，自动显示 @用户名。然后你需要做的就是输入你的答复，并按“发布”。（译者认为点击评论内容，例如朋友圈、微博，这种体验更佳。此处仅以介绍原作者的思考过程为目的）
“关注中”的通知
最后一个有趣的事实——只有 35％ 的 Instagram 受访用户检查他们关注的人的动态。是否保持这个功能或许是最难抉择的。我决定保留它，并简单地 redesign，通过放大照片以引起更多关注。
个人页
说实话，我喜欢 Instagram 当前的设计。为了增加极简主义，我对查看图标做了一些轻微的改变，并添加更多的负空间中，以保持设计的一致性。
这些是我对这次工作的思考
这个项目是磨练我的设计技能的完美机会。原本我是学医的，上个学期刚刚换了专业，我想在产品设计方向职业发展。所以我想，最好的学习方式，是把自己投入一个项目。
在过去两个月内，我完成了设定的学习目标，以交付这个项目以及学到更多。
我认为学习和创作过程最好由你自己制定。因为只有你自己知道什么是有效的，什么不是。学习如何更快，更好，更有效地做事情。在你实际上开始学习的过程中，你可能还会随机学到一些其他东西。
蛋糕顶上的樱桃不是终点，学习过程是持续的。
“设计不会变得简单。而你可以越来越好。”
谢谢阅读，希望对你有帮助！
来源： Medium.com
作者： Kim Thuy Tu
译者： SketchU&I
以上内容来自知乎专栏《 Sketch 中文教程》，仅供学习交流
·End·
微交互 ∣细节设计成就卓越产品
长按，识别二维码，加关注
分享文章,让更多的人知道微交互
