編者按：什么樣的重設(shè)計(jì)作品才能給你的簡(jiǎn)歷加分？今天譯者Lisa 這篇重設(shè)計(jì)Instagram 的思路流程專業(yè)科學(xué)，非常適合學(xué)習(xí)。

挑戰(zhàn)

找一份自己喜歡的應(yīng)用，并且每天使用，通過徹底的重構(gòu)它，看看自己作為一個(gè)設(shè)計(jì)師能有多大的創(chuàng)造力。

我選擇 Instagram是因?yàn)槲覐?011年——在它發(fā)行后的一年便成為它的忠實(shí)用戶了。

起初，我開始使用它是因?yàn)樗臑V鏡。但是在過去的6年中，我已經(jīng)看到了它伴隨著App出現(xiàn)的各種各式的改變和創(chuàng)新。我現(xiàn)在仍然忠實(shí)使用Instagram是為了表達(dá)自己的思想并且和當(dāng)今潮流保持聯(lián)系。

你可以說我是一個(gè)資深I(lǐng)ns用戶。

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

△ ?一些我的重設(shè)計(jì)中的截圖

我在著手做這件事中的個(gè)人目標(biāo)

我對(duì)于重設(shè)計(jì)的目標(biāo)：

• 當(dāng)探索和在線時(shí)促進(jìn)一個(gè)更加沉浸和流暢的體驗(yàn)
• 設(shè)計(jì)一個(gè)平易近人和直觀的用戶界面
• 通過用戶同理心來設(shè)計(jì)（HCD以用戶為中心的設(shè)計(jì)）

我對(duì)于自身發(fā)展的目標(biāo)

• 學(xué)習(xí)如何執(zhí)行和分析用戶研究，制造流程圖和線框圖，用Sketch做設(shè)計(jì)圖，用Principle制作動(dòng)畫，用Invision做原型
• 從始至終基于我的設(shè)計(jì)原則完成我的第一個(gè)設(shè)計(jì)項(xiàng)目

在構(gòu)建這個(gè)重設(shè)計(jì)過程中我承擔(dān)的角色

• 用戶研究員
• 數(shù)據(jù)分析員
• UI/UX 設(shè)計(jì)師
• 產(chǎn)品設(shè)計(jì)師

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

了解Instagram這個(gè)公司

Instagram是一個(gè)通過視覺講故事的應(yīng)用，它為用戶提供了一個(gè)組織和分享生活中美和有創(chuàng)意時(shí)刻的平臺(tái)。自它第一次出現(xiàn)在2010，Instagram的用戶基數(shù)已經(jīng)增長到200,000,000。它讓來自全世界的人們保持聯(lián)系并且分享他們各自的生活。

為了保持它的成長速度，Instagram不斷的創(chuàng)新來推動(dòng)它們的使命“分享世界的時(shí)刻”。

我的用戶研究和數(shù)據(jù)

在我開展我的重設(shè)計(jì)項(xiàng)目之前，為了更深的理解我設(shè)計(jì)的對(duì)象，我和40個(gè)Instagram用戶開展了訪談：

• 一個(gè)典型的Instagram的用戶是怎樣的？
• 它們使用Instagram的原因是什么？
• 是什么讓他們一直堅(jiān)持訪問的？

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

以讀者統(tǒng)計(jì)為目標(biāo)

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

我感覺這是一個(gè)很符合當(dāng)前Instagram用戶基數(shù)的有代表性的樣本。因?yàn)?0%的Instagram用戶都是在35歲以下的。還有，在美國55%的18-29歲的人群都是Instagram用戶。

讓這個(gè)調(diào)查更有趣的是，我交談過的67.5%的用戶都把Instagram排在他們最常使用的應(yīng)用的前三名。另外，72.5%的人群樣本每天都會(huì)使用Instagram。

有趣的事仍在繼續(xù)

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

我總共收集到64個(gè)形容詞。

前三名形容詞分別是：創(chuàng)新，有趣和簡(jiǎn)單

我也問了他們喜歡Instagram的什么特點(diǎn)。下面是他們前三個(gè)理由：

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

一個(gè)典型Instagram用戶的性格

△ 我交談過的40個(gè)人的平均分析集

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

不管是哪個(gè)方面，我都會(huì)在腦海里為像你，Sam和Alex的用戶設(shè)計(jì)。

現(xiàn)在你對(duì)你為誰設(shè)計(jì)有一個(gè)更深的理解了，我們可以著手做一個(gè)很棒的事情啦！

體驗(yàn) 1：主頁

△ Instagram當(dāng)前主頁的分析

除了主頁的重復(fù)功能外，這有我注意到的三個(gè)主要問題。

問題#1：內(nèi)容超載（Instastoriesvs feed）

在打開這個(gè)應(yīng)用之后，Instagram用戶有兩個(gè)主要競(jìng)爭(zhēng)的功能在吸引他們注意——他們應(yīng)該在stories中滾動(dòng)還是應(yīng)該在feed中瀏覽呢？

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

補(bǔ)充說明：我決定在2016年用最小改動(dòng)來重設(shè)計(jì)Instagram，因?yàn)槲铱吹搅怂澈筇觳诺耐评砗瓦壿嫛Ｄ憧梢栽谶@里讀到它（https://medium.com/@ianspalter/designing-a-new-look-for-instagram-inspired-by-the-community） - 搭梯子訪問。

為了解決這個(gè)問題，我選擇直接將Stories整合進(jìn)Feed里，理由如下：

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

把Stories 和Feed 結(jié)合在一起后，它會(huì)在一個(gè)固定的時(shí)間軸上進(jìn)行操作。對(duì)于任何目標(biāo)行為來說這是能產(chǎn)生最高響應(yīng)的最強(qiáng)有力的操作條件。

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

問題#2: 頂部導(dǎo)航和滑動(dòng)手勢(shì)的分離

通過我的用戶研究我發(fā)現(xiàn)了一個(gè)主要的問題：Instagram主頁上滑動(dòng)手勢(shì)是否直接，這是一個(gè)主要問題。

簡(jiǎn)單來說，Instagram用戶是否意識(shí)到了左右滑動(dòng)與頂部的導(dǎo)航有關(guān)？

為了回答這個(gè)問題，我在訪談過程中進(jìn)行了一個(gè)簡(jiǎn)單的實(shí)驗(yàn)。

方法（n=40）

在我開始這個(gè)實(shí)驗(yàn)之前，我提醒用戶不能查看Instagram是實(shí)驗(yàn)的一部分。然后我要求用戶向我從頭到腳描述Instagram經(jīng)典簡(jiǎn)介頁面的布局，然后就是主頁。我問了他們4個(gè)簡(jiǎn)單的問題。

對(duì)于滑動(dòng)：

1. 主頁上，進(jìn)入哪個(gè)地方你需要從左向右滑動(dòng)？答案：相機(jī)到照片到Instastories
2. 在主頁上，進(jìn)入哪個(gè)地方你需要從右向左滑動(dòng)？答案：消息收件箱

對(duì)于頂部導(dǎo)航：

1. 你是如何點(diǎn)擊屏幕發(fā)送你的story？答案：頂部左邊相機(jī)icon
2. 你是怎么到達(dá)你的消息盒子？答案：頂部右邊箭頭icon

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

這里是我收集到的數(shù)據(jù)（https://docs.google.com）

基于我的調(diào)查，Instagram里的關(guān)于滑動(dòng)的知識(shí)都不是很好：

• 只有20%的人對(duì)所有滑動(dòng)響應(yīng)反應(yīng)正確
• 20%的人至少有一個(gè)正確，50%的人一個(gè)都不對(duì)
• 50%的人知道從左往右滑能夠引導(dǎo)他們?nèi)ハ鄼C(jī)功能
• 20%的人知道從右往左滑能夠引導(dǎo)他們?nèi)ハ⒑凶?/li>

頂部導(dǎo)航：

• 72.5%的人知道通過點(diǎn)擊頂部右側(cè)箭頭按鈕來引導(dǎo)他們?nèi)ハ⒑凶?/li>
• 55%的人知道通過點(diǎn)擊頂部左側(cè)相機(jī)按鈕來引導(dǎo)他們?nèi)グl(fā)布他們的story

另外有趣的事實(shí)和數(shù)據(jù)：

• 在訪談中40個(gè)人中只有3個(gè)人能夠?qū)?個(gè)問題都回答正確
• 當(dāng)要求用1-5的程度描述他們對(duì)Instagram導(dǎo)航的熟悉程度時(shí)，75%的人將他們自己將自己描述為4或者更高。然而只有30%的人在滑動(dòng)問題上只答對(duì)一個(gè)正確。
• 一個(gè)相當(dāng)高比例92.3%的回答不正確的人相信或者猜測(cè)滑動(dòng)左側(cè)將會(huì)帶領(lǐng)他們?nèi)ヌ剿鳎阉黜摗＃ㄒ驗(yàn)樗阉鳎剿鱥con在底部導(dǎo)航中位于主頁icon旁邊，所以這種想法說得通）

這個(gè)調(diào)查的分析表明Instagram用戶在導(dǎo)航和滑動(dòng)手勢(shì)中沒有建立一個(gè)很好的聯(lián)系。

“我不知道。我只是到處點(diǎn)擊直到我發(fā)現(xiàn)我在找什么，并且突然我就看到了我的臉…”——當(dāng)被問到他們?nèi)绾蔚竭_(dá)消息盒子時(shí)一個(gè)Instagram用戶回答

有一個(gè)方式讓滑動(dòng)手勢(shì)更加直觀的方式可能時(shí)讓它和底部導(dǎo)航聯(lián)系起來。然而，這對(duì)我來說可能是個(gè)好機(jī)會(huì)去創(chuàng)造一個(gè)新的功能…

滑動(dòng)來看新的或早期的照片

我用戶研究的一部分是在從app store里觀看Instagram的評(píng)論。Instagram用戶里一個(gè)主要的抱怨是在動(dòng)態(tài)里沒有按時(shí)間順序展示。

我想知道的是為什么用戶想要他們的動(dòng)態(tài)按時(shí)間順序呢?為什么他們對(duì)這個(gè)改變?nèi)绱耸客ㄟ^更深的挖掘，我發(fā)現(xiàn)用戶認(rèn)為按時(shí)間他們才能瀏覽徹底。Instagram當(dāng)前的算法，是將流行的照片放在動(dòng)態(tài)的最頂部。這會(huì)讓Instagram用戶沮喪因?yàn)樗麄兛赡軙?huì)錯(cuò)過他們想要看的照片。

為了將用戶對(duì)時(shí)間順序的需求與Instagram當(dāng)前的算法妥協(xié)，我決定將滑動(dòng)功能與一個(gè)給用戶指引的指示器結(jié)合起來：

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

△ ?對(duì)http://xkcd.com的信任

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

人們會(huì)用各種方式拿他們的手機(jī)，不管他們?cè)趺茨盟瑢?duì)于用戶來說屏幕的左上角放導(dǎo)航將是最不便觸控和最令人難受的區(qū)域。因?yàn)檫@就好像在床上玩手機(jī)掉到臉上的感覺一樣。

研究表明導(dǎo)航最易到達(dá)和最少不適的點(diǎn)應(yīng)該是手機(jī)底部——正在用戶大拇指旁邊。

從我的數(shù)據(jù)得出，和我交談過程中100%的人知道怎么拍照片發(fā)動(dòng)態(tài)（因?yàn)樗麄兤綍r(shí)會(huì)用到）。然而在那些人中只有57.5%既不知道怎么拍Instastories或者從不使用它。為了提高Instastories的使用頻率，我將這兩個(gè)功能合并起來，理由是 1）拇指更容易夠著。2）不用再花時(shí)間去普及Instastories。

體驗(yàn) 2：探索和發(fā)現(xiàn)模式

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

就我看來，我也許會(huì)關(guān)注“#coffeefliicks”和“#dametravelers”來看一些咖啡喝景點(diǎn)的藝術(shù)的圖片。你也能夠點(diǎn)擊加一些新的標(biāo)簽，刪除標(biāo)簽，或者通過你的標(biāo)簽收藏來搜索（當(dāng)然，這是一個(gè)按字母表的排序）。

體驗(yàn) 3：滑到相機(jī)和instastories

在我交談過的用戶中只有42.5%的用戶使用過Instastories。兩個(gè)為什么人們不用Instastories是因?yàn)閮蓚€(gè)原因。1）他們已經(jīng)有Snapchat了 2）他們會(huì)不斷看到那些他們并沒有關(guān)注的人的Instastories。

為了修復(fù)第二個(gè)原因，我實(shí)現(xiàn)了一個(gè)新的功能叫做“你喜歡的人的故事”來發(fā)掘更多價(jià)值和目的來使用Instastories。以此來使更多的人使用Instastories。

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

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

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

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

體驗(yàn) 4：通知和簡(jiǎn)介

哈哈哈哈…終于到了最后一個(gè)部分。對(duì)于通知和簡(jiǎn)介，我想通過加更多負(fù)空間和群聊來給用戶界面更多呼吸的空間。

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

另外，你可以直接在你的通知頁面里通過長按用戶名來給人點(diǎn)贊或者評(píng)論（短按進(jìn)入用戶簡(jiǎn)介）。當(dāng)你按住用戶名時(shí)會(huì)觸發(fā)出一個(gè)自動(dòng)@用戶ID的評(píng)論框、然后你只要輸入你的評(píng)論點(diǎn)擊“發(fā)布”。

我認(rèn)為這個(gè)將會(huì)成為一個(gè)很棒的功能因?yàn)樵诤芏鄷r(shí)候，你會(huì)在post的評(píng)論的海洋中迷失方向。剛才他們的用戶名是什么？評(píng)論在哪？剛才那個(gè)評(píng)論說的什么？

“關(guān)注”通知

在這期間一個(gè)有趣的事實(shí)是——在我訪談過只有35%的Instagram用戶查看過正在關(guān)注的人的動(dòng)態(tài)。是否保持這個(gè)功能可能是我不得不做的最難的一個(gè)決定，我決定保留它并且在某種程度上簡(jiǎn)單的重設(shè)計(jì)它，因?yàn)槲蚁Ｍㄟ^讓圖片變大來吸引更多的注意力。

簡(jiǎn)介

老實(shí)說，我喜歡Instagram當(dāng)前的設(shè)計(jì)。為了增加極簡(jiǎn)主義，我對(duì)瀏覽icon做了一些輕微的改變，并且加了一些負(fù)型空間來保持設(shè)計(jì)的一致性。

反思我已經(jīng)做了的工作

進(jìn)入這個(gè)項(xiàng)目，對(duì)我來說是鍛煉我設(shè)計(jì)技巧的完美機(jī)會(huì)。上個(gè)學(xué)期我剛從醫(yī)學(xué)學(xué)習(xí)轉(zhuǎn)換過來，希望追求一個(gè)產(chǎn)品方面的事業(yè)。所以我認(rèn)為對(duì)我來說最好的方式就是把我投入在一個(gè)項(xiàng)目中學(xué)習(xí)，然后從那里起飛。

現(xiàn)在回頭看，上面說的這些好像很簡(jiǎn)單。但是在過去的兩個(gè)月中，我為了能夠完成這個(gè)項(xiàng)目學(xué)習(xí)了遠(yuǎn)遠(yuǎn)不止上面的內(nèi)容。

我認(rèn)為學(xué)習(xí)和創(chuàng)造最好的一件事情就是你開始管理自己。你學(xué)會(huì)什么方法是有效的，什么方法是無用的。你學(xué)習(xí)怎么更快更好更有效的做一件事情。你在你嘗試的過程中開始學(xué)習(xí)一些你原本想學(xué)但沒有學(xué)的東西。

前進(jìn)之路永遠(yuǎn)不會(huì)結(jié)束。學(xué)習(xí)的過程是不停息的。

“設(shè)計(jì)并未變得簡(jiǎn)單，只是你變得更好了。”

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

可以點(diǎn)擊這里查看我的完整交互原型：Loading...

歡迎關(guān)注微信公眾號(hào)：非科班設(shè)計(jì)

「用一個(gè)案例教你學(xué)東西系列」

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

原文地址：medium.freecodecamp

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com