用Instagram 的案例，幫你學會專業科學的重設計過程

編者按：什么樣的重設計作品才能給你的簡歷加分？今天譯者Lisa 這篇重設計Instagram 的思路流程專業科學，非常適合學習。

挑戰

找一份自己喜歡的應用，并且每天使用，通過徹底的重構它，看看自己作為一個設計師能有多大的創造力。

我選擇 Instagram是因為我從2011年——在它發行后的一年便成為它的忠實用戶了。

起初，我開始使用它是因為它的濾鏡。但是在過去的6年中，我已經看到了它伴隨著App出現的各種各式的改變和創新。我現在仍然忠實使用Instagram是為了表達自己的思想并且和當今潮流保持聯系。

你可以說我是一個資深Ins用戶。

補充說明：我不為Instagram工作，并且這個案例中所有的觀點都是完全代表我自己的。 跟那些在Instagram工作的設計師不一樣，我手頭并沒有影響它們當前設計的充足用戶數據。所以，這個案例研究是不全面的，我這么做當然也不是在建議Instagram放棄它們當前的設計并采用我的設計。

△ ?一些我的重設計中的截圖

我在著手做這件事中的個人目標

我對于重設計的目標：

• 當探索和在線時促進一個更加沉浸和流暢的體驗
• 設計一個平易近人和直觀的用戶界面
• 通過用戶同理心來設計（HCD以用戶為中心的設計）

我對于自身發展的目標

• 學習如何執行和分析用戶研究，制造流程圖和線框圖，用Sketch做設計圖，用Principle制作動畫，用Invision做原型
• 從始至終基于我的設計原則完成我的第一個設計項目

在構建這個重設計過程中我承擔的角色

• 用戶研究員
• 數據分析員
• UI/UX 設計師
• 產品設計師

為了簡潔我在這篇文章之外留下了我的草圖和線框圖，但是還是歡迎你訪問這里（Instagram iOS Redesign）。

了解Instagram這個公司

Instagram是一個通過視覺講故事的應用，它為用戶提供了一個組織和分享生活中美和有創意時刻的平臺。自它第一次出現在2010，Instagram的用戶基數已經增長到200,000,000。它讓來自全世界的人們保持聯系并且分享他們各自的生活。

為了保持它的成長速度，Instagram不斷的創新來推動它們的使命“分享世界的時刻”。

我的用戶研究和數據

在我開展我的重設計項目之前，為了更深的理解我設計的對象，我和40個Instagram用戶開展了訪談：

• 一個典型的Instagram的用戶是怎樣的？
• 它們使用Instagram的原因是什么？
• 是什么讓他們一直堅持訪問的？

我通過電話或者視頻親自開展與他們的交談。

以讀者統計為目標

在我交談過的40個Instagram用戶中，有10個男性和30個女性。男性用戶的年齡分布在22到27歲，女性用戶年齡分布在19-25歲。65%的調查者都是大學生或者是計劃追求更高教育的高中畢業生。

我感覺這是一個很符合當前Instagram用戶基數的有代表性的樣本。因為90%的Instagram用戶都是在35歲以下的。還有，在美國55%的18-29歲的人群都是Instagram用戶。

讓這個調查更有趣的是，我交談過的67.5%的用戶都把Instagram排在他們最常使用的應用的前三名。另外，72.5%的人群樣本每天都會使用Instagram。

有趣的事仍在繼續

我要求我交談的40個Instagram用戶使用3個形容詞描述Instagram。你對Instagram有什么建議？它讓你感覺怎么樣？

我總共收集到64個形容詞。

前三名形容詞分別是：創新，有趣和簡單

我也問了他們喜歡Instagram的什么特點。下面是他們前三個理由：

1. 它是基于圖片的
2. 它很容易使用
3. 它幫助他們保持聯系

一個典型Instagram用戶的性格

△ 我交談過的40個人的平均分析集

誰和你更相似一點？你是不是像Alex一樣，用Instagram來分享他的生活并且總是用搜索功能來找一些很酷的事情？或者你是否像Sam一樣，用Instagram來和朋友和她的興趣保持聯系？或者你都像？

不管是哪個方面，我都會在腦海里為像你，Sam和Alex的用戶設計。

現在你對你為誰設計有一個更深的理解了，我們可以著手做一個很棒的事情啦！

體驗 1：主頁

△ Instagram當前主頁的分析

除了主頁的重復功能外，這有我注意到的三個主要問題。

問題#1：內容超載（Instastoriesvs feed）

在打開這個應用之后，Instagram用戶有兩個主要競爭的功能在吸引他們注意——他們應該在stories中滾動還是應該在feed中瀏覽呢？

兩個選擇都無止境的滾動著巨量的內容。根據選擇的悖論的研究，過多的選擇最終會導致選擇疲勞，幸福感減少，或者害怕錯過事情的愧疚感。特別是考慮到大約一半的用戶在他們剛醒來或者睡前瀏覽Instagram。

補充說明：我決定在2016年用最小改動來重設計Instagram，因為我看到了它背后天才的推理和邏輯。你可以在這里讀到它（https://medium.com/@ianspalter/designing-a-new-look-for-instagram-inspired-by-the-community） - 搭梯子訪問。

為了解決這個問題，我選擇直接將Stories整合進Feed里，理由如下：

• Feed和Story將能夠一起工作，來為用戶促進一個更有結合力的體驗。
• 將Stories和Newsfeed結合起來可以防止它成為一個Julie Zhuo（Facebook的產品設計副總裁）曾經提到過的“屋頂甲板”。在當前的Instagram設計中，一旦用戶開始在反饋中滑動時，Instastories 就很容易被遺忘。眼不見，心不煩。

把Stories 和Feed 結合在一起后，它會在一個固定的時間軸上進行操作。對于任何目標行為來說這是能產生最高響應的最強有力的操作條件。

補充說明：不要擔心，我不會去掉Instastories這個功能。我只是將它們移到了消息收件箱里，這樣你通過直接點擊主頁頂部右上角便能獲得它。我將會在下面更深入的討論它。

問題#2: 頂部導航和滑動手勢的分離

通過我的用戶研究我發現了一個主要的問題：Instagram主頁上滑動手勢是否直接，這是一個主要問題。

簡單來說，Instagram用戶是否意識到了左右滑動與頂部的導航有關？

為了回答這個問題，我在訪談過程中進行了一個簡單的實驗。

方法（n=40）

在我開始這個實驗之前，我提醒用戶不能查看Instagram是實驗的一部分。然后我要求用戶向我從頭到腳描述Instagram經典簡介頁面的布局，然后就是主頁。我問了他們4個簡單的問題。

對于滑動：

1. 主頁上，進入哪個地方你需要從左向右滑動？答案：相機到照片到Instastories
2. 在主頁上，進入哪個地方你需要從右向左滑動？答案：消息收件箱

對于頂部導航：

1. 你是如何點擊屏幕發送你的story？答案：頂部左邊相機icon
2. 你是怎么到達你的消息盒子？答案：頂部右邊箭頭icon

筆記：如果用戶回答“左右滑動”這部分問題，我將會提示他們給一個可選擇的答案。（你知道其他的交互方式來____?）

這里是我收集到的數據（https://docs.google.com）

基于我的調查，Instagram里的關于滑動的知識都不是很好：

• 只有20%的人對所有滑動響應反應正確
• 20%的人至少有一個正確，50%的人一個都不對
• 50%的人知道從左往右滑能夠引導他們去相機功能
• 20%的人知道從右往左滑能夠引導他們去消息盒子

頂部導航：

• 72.5%的人知道通過點擊頂部右側箭頭按鈕來引導他們去消息盒子
• 55%的人知道通過點擊頂部左側相機按鈕來引導他們去發布他們的story

另外有趣的事實和數據：

• 在訪談中40個人中只有3個人能夠將4個問題都回答正確
• 當要求用1-5的程度描述他們對Instagram導航的熟悉程度時，75%的人將他們自己將自己描述為4或者更高。然而只有30%的人在滑動問題上只答對一個正確。
• 一個相當高比例92.3%的回答不正確的人相信或者猜測滑動左側將會帶領他們去探索／搜索頁。（因為搜索／探索icon在底部導航中位于主頁icon旁邊，所以這種想法說得通）

這個調查的分析表明Instagram用戶在導航和滑動手勢中沒有建立一個很好的聯系。

“我不知道。我只是到處點擊直到我發現我在找什么，并且突然我就看到了我的臉…”——當被問到他們如何到達消息盒子時一個Instagram用戶回答

有一個方式讓滑動手勢更加直觀的方式可能時讓它和底部導航聯系起來。然而，這對我來說可能是個好機會去創造一個新的功能…

滑動來看新的或早期的照片

我用戶研究的一部分是在從app store里觀看Instagram的評論。Instagram用戶里一個主要的抱怨是在動態里沒有按時間順序展示。

我想知道的是為什么用戶想要他們的動態按時間順序呢?為什么他們對這個改變如此失望？通過更深的挖掘，我發現用戶認為按時間他們才能瀏覽徹底。Instagram當前的算法，是將流行的照片放在動態的最頂部。這會讓Instagram用戶沮喪因為他們可能會錯過他們想要看的照片。

為了將用戶對時間順序的需求與Instagram當前的算法妥協，我決定將滑動功能與一個給用戶指引的指示器結合起來：

例如，如果指示器在中間。你將知道這不是最新的post所以你可以向左滑來看最新的posts。如果指示器在最左端，你能夠安心確保你現在在看這位用戶最新的post。如果想看更舊的posts，一直左滑就好了。

△ ?對http://xkcd.com的信任

問題#3：頂部左側角落——遙不可及

人們會用各種方式拿他們的手機，不管他們怎么拿它，對于用戶來說屏幕的左上角放導航將是最不便觸控和最令人難受的區域。因為這就好像在床上玩手機掉到臉上的感覺一樣。

研究表明導航最易到達和最少不適的點應該是手機底部——正在用戶大拇指旁邊。

從我的數據得出，和我交談過程中100%的人知道怎么拍照片發動態（因為他們平時會用到）。然而在那些人中只有57.5%既不知道怎么拍Instastories或者從不使用它。為了提高Instastories的使用頻率，我將這兩個功能合并起來，理由是 1）拇指更容易夠著。2）不用再花時間去普及Instastories。

體驗 2：探索和發現模式

現在你有2個選擇渠道來自發的探索。1. 通過Instagram的當前的算法。2. 通過你自己收藏的標簽來有目的的發現。所以Sam和Alex能夠看“#ecgtracing”或者“#fitness”來和他們的興趣保持更新。

就我看來，我也許會關注“#coffeefliicks”和“#dametravelers”來看一些咖啡喝景點的藝術的圖片。你也能夠點擊加一些新的標簽，刪除標簽，或者通過你的標簽收藏來搜索（當然，這是一個按字母表的排序）。

體驗 3：滑到相機和instastories

在我交談過的用戶中只有42.5%的用戶使用過Instastories。兩個為什么人們不用Instastories是因為兩個原因。1）他們已經有Snapchat了 2）他們會不斷看到那些他們并沒有關注的人的Instastories。

為了修復第二個原因，我實現了一個新的功能叫做“你喜歡的人的故事”來發掘更多價值和目的來使用Instastories。以此來使更多的人使用Instastories。

現在，為了你能更方便地瀏覽，你喜歡的人，你崇拜的人的Instastories都在你屏幕上方。交流保持聯系！

你可以通過點擊他們名字旁邊的心形很輕易的移除或增加用戶到你的喜歡列表。

備注：我將Instastories移進相機的原因是什么？首先，我需要一個位置來方式Instastories。其次，當你要發送照片或者Instastories時，你只需直接進入消息收件箱。因此，將Instastories和相機放一起就顯得非常有意義。

另一個需要注意的是：現在的消息收件箱沒有底部導航界面，如果用戶知道如何使用滑動手勢，他們就會知道如何回到主頁，而正如我上面提到的——只有20%的人知道向左滑能到達相機。考慮到這一點，我決定保留底部導航欄，這樣用戶才不會感到迷茫。

體驗 4：通知和簡介

哈哈哈哈…終于到了最后一個部分。對于通知和簡介，我想通過加更多負空間和群聊來給用戶界面更多呼吸的空間。

△ ?我想你能夠猜到那些通知是真實的

另外，你可以直接在你的通知頁面里通過長按用戶名來給人點贊或者評論（短按進入用戶簡介）。當你按住用戶名時會觸發出一個自動@用戶ID的評論框、然后你只要輸入你的評論點擊“發布”。

我認為這個將會成為一個很棒的功能因為在很多時候，你會在post的評論的海洋中迷失方向。剛才他們的用戶名是什么？評論在哪？剛才那個評論說的什么？

“關注”通知

在這期間一個有趣的事實是——在我訪談過只有35%的Instagram用戶查看過正在關注的人的動態。是否保持這個功能可能是我不得不做的最難的一個決定，我決定保留它并且在某種程度上簡單的重設計它，因為我希望通過讓圖片變大來吸引更多的注意力。

簡介

老實說，我喜歡Instagram當前的設計。為了增加極簡主義，我對瀏覽icon做了一些輕微的改變，并且加了一些負型空間來保持設計的一致性。

反思我已經做了的工作

進入這個項目，對我來說是鍛煉我設計技巧的完美機會。上個學期我剛從醫學學習轉換過來，希望追求一個產品方面的事業。所以我認為對我來說最好的方式就是把我投入在一個項目中學習，然后從那里起飛。

現在回頭看，上面說的這些好像很簡單。但是在過去的兩個月中，我為了能夠完成這個項目學習了遠遠不止上面的內容。

我認為學習和創造最好的一件事情就是你開始管理自己。你學會什么方法是有效的，什么方法是無用的。你學習怎么更快更好更有效的做一件事情。你在你嘗試的過程中開始學習一些你原本想學但沒有學的東西。

前進之路永遠不會結束。學習的過程是不停息的。

“設計并未變得簡單，只是你變得更好了。”

就到這兒吧，非常感謝你的閱讀！

可以點擊這里查看我的完整交互原型：Loading...

歡迎關注微信公眾號：非科班設計

「用一個案例教你學東西系列」

1. 智能對象丨《用一個實戰教程，讓你學會智能對象》
2. 直方圖丨《用一個后期教程，幫你學會利用直方圖破解圖像的方法》
3. 圖層樣式丨《做一個實戰教程，讓你學會圖層樣式9大技能》
4. 設計流程丨《用一個實戰案例，幫你認識完整的設計流程》
5. 總監思考方式丨《用一個簡單的體重記錄功能，揭秘UI設計總監的思考過程》
6. 交互思考方式《用一個文本框，讓你學到交互設計師的邏輯思考方法》
7. 交互面試題丨《用一個框架，幫你學會這個最常見的交互面試題》
8. 數據驗證交互丨《用一個實戰案例，幫你學會用數據驗證產品設計》

原文地址：medium.freecodecamp

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com