面試蘋果被拒絕后，我重新設(shè)計了Apple Music，收獲5K贊！

譯者小船：今年早些時候，我向Apple Music（一生的機會）申請平面設(shè)計實習(xí)，但是被客氣的拒絕了，他們表示盡管非常喜歡我的這個項目，但是希望看到更多的練習(xí)和成長。

首先，我是非常受挫的——Northwestern University 沒有提供任何基本的平面設(shè)計課程，所以如果要成長都必須靠自學(xué)...

...但是當(dāng)我意識到后，我開始了對Apple Music長達三個月的研究。

對我來說，這是一個讓我可以深入了解UX研究和設(shè)計的好機會，可以花費更多時間學(xué)習(xí)Sketch和Principle的借口，可以跟周圍的人解釋為什么我在繪制粗略的線框圖...

你可以在下面的案例中找到一些為Apple Music存在的問題提供的解決方案，以及未來發(fā)展的想法。我的設(shè)計過程是基于本質(zhì)上的用戶研究，Apple官方設(shè)計原則，和自己的設(shè)計直覺。

介紹

作為一個擁有音樂作品和表演背景的設(shè)計師，我總是熱衷于把音樂和技術(shù)結(jié)合起來。通過設(shè)計，我希望有一天能夠使音樂的體驗更容易更令人愉悅。

然而，蘋果音樂總是讓我失望，它正在經(jīng)歷青春期，即意味著穩(wěn)步成熟但與完全成熟相比，如Spotify，仍未有足夠吸引力。

為了更好的了解Apple Music，我放下對它之前的印象并開始重新認識。

Apple Music 給人第一印象是混亂的界面和不成熟的視覺效果。

△ 音樂庫

在iOS 10，Apple公司以簡約為原則發(fā)布了版本的更新。

雖然這個新的界面有很清晰的導(dǎo)航，可我依舊覺得這里的空間很擁擠。界面讓人感覺凌亂，甚至?xí)a(chǎn)生幽閉恐懼癥，盡管也是使用的簡潔的色彩和大氣的排版，但與Apple的優(yōu)雅相差甚遠。

我的重設(shè)計分為三個步驟，分別包括：

• 核心體驗
• 品牌識別
• 視覺界面

1. 核心體驗：發(fā)現(xiàn)音樂

首先我發(fā)現(xiàn)使用者一般符合下面的范圍：

△ 標(biāo)記下自己的位置，我在中間的區(qū)域

左邊為收集者：

• 隨著時間收集了大量的音樂
• 更有選擇性的聽音樂

普通聽眾：

• 依賴播放列表/推薦內(nèi)容
• 可能已經(jīng)在使用Spotify

打開Apple Music 你可能會在說明中找到：

如果聽到你喜歡的音樂，把它加入你的音樂庫

將播放列表當(dāng)作發(fā)現(xiàn)音樂的工具來處理是Apple Music像iTunes一樣過時的原因之一。但是，播放列表目前實施的方式令人感到僵硬。我發(fā)現(xiàn)用戶對添加整個播放列表到音樂庫的體驗很不好，尤其是播放列表在不斷更新的情況下。

如果想擴大普通聽眾的人群，就必須在現(xiàn)有的用戶基礎(chǔ)上實現(xiàn)擴張。這就意味著需要在「藝人」和「專輯」這兩個地方代替播放列表創(chuàng)建發(fā)現(xiàn)音樂。

私人定制

我在基于了解用戶前提下，發(fā)現(xiàn)即使用戶進入音樂庫也不愿意通過播放列表添加新音樂。個人認為，一個好的體驗是用戶能夠通過視頻或案例可以得到更多的信息，方便他們選擇是否加入音樂庫或每周的播放列表。

進入私人定制，在用戶面前呈現(xiàn)出一系列藝術(shù)家的頭像和其對應(yīng)的歌曲。用戶可以提前聽到15秒的歌曲，并且可以通過向上滑動拒絕聽歌或向下滑動添加到個人的音樂庫。

我選擇用手勢交互，方便用戶在不看屏幕的情況下也能做選擇。一旦用戶結(jié)束了操作，他們選擇的內(nèi)容會被新建一個音樂列表，方便他們聽音樂。

這種做法的背后動力來源于下面的采訪：

“蘋果低估了游戲化的力量”

— 我在洛杉磯采訪的一位交互設(shè)計師同時是蘋果音樂的使用者

我已經(jīng)明白了，通過游戲化的體驗，用戶能夠很快的與發(fā)現(xiàn)音樂建立聯(lián)系。另外，私人定制可以為蘋果音樂提供關(guān)于聽眾喜好的信息，使APP和它的用戶一起成長和發(fā)展。

2. 品牌識別

我在Sony Music實習(xí)期間，我了解到，品牌視覺在流媒體服務(wù)中必須是可識別的。Spotify這點做的非常好，他們的播放列表專輯使用半色調(diào)封面就很有識別性。

相比之下，Apple Music 的視覺品牌現(xiàn)在是這樣的：

有很多不同的特征：3D效果，和黑白的照片。

另外，有關(guān)拼貼主題的封面并沒有真正給用戶傳達關(guān)于播放列表想表達的任何內(nèi)容。

主要的問題似乎是蘋果音樂把所有的東西都貼出來當(dāng)作封面，而不是真正設(shè)計一種統(tǒng)一的視覺語言，使蘋果音樂的封面在海量的專輯封面中脫穎而出。

我的解決方案遵循下面的原則：

專輯作品應(yīng)該被視為UI的一部分，而不是獨立的可視化組件

歌手展示

這個啟發(fā)來自于蘋果音樂的歡迎頁，我選擇在圓形圖案中展示歌手的頭像。圓形的靈感來自于iPod的輪播圖 — 蘋果音樂的標(biāo)志性部分。“頭像在圓形內(nèi)”的特征在iOS其他的也有使用，尤其是通訊錄。

另外，我選擇將歌手展示和UI視覺更好的協(xié)調(diào)在一起。最后，我將顏色限制在藍色，紫色，紅色這三個色系中，來呈現(xiàn)蘋果音樂的圖標(biāo)。

△ 歌手展示

重構(gòu)播放列表

對于播放列表，我的想法是和歌手展示保持一致，通過使用顏色展示播放列表的氛圍。列表的背景則選擇將該頭像高斯模糊后作為背景（靈感來自iOS的背景模糊）。對于部分封面，我會稍微添加些漸變的紅色（蘋果音樂的品牌色）來增加維度感。

△ 重新設(shè)計的播放列表

主要的播放列表

最后，我更新了主要的幾個播放列表的視覺，使用的排版依舊和前面歌手展示保持一致。

△ 主要的播放列表

3. 視覺界面

總體的改善

蘋果音樂當(dāng)前的頁面最大的問題是令人感到?jīng)]有激情，缺乏愉悅感。為了解決這個問題，我以細微的調(diào)整頁面寬度的方式優(yōu)化了整個頁面，如下圖所示：

我不認為對“音樂庫”的改變是必要的。所以對留白處和字體做了調(diào)整。取消了“我的下載音樂”，因為我覺得app可以根據(jù)當(dāng)前的網(wǎng)絡(luò)狀態(tài)自動判斷用戶可訪問的音樂。

下圖是為了增加互動添加了下拉交互動效（適用在不同的tab下）。

為你推薦

“為你推薦”是Apple Music的核心。Apple Music可以通過用戶根據(jù)喜好建立的播放列表和封面更深入地了解用戶。

我收集了關(guān)于“為你推薦”的反饋意見，因此對于重設(shè)計，我的主旨是減少用戶投放內(nèi)容的同時增加其余內(nèi)容的曝光度，就像Facebook和Instagram的“熱門文章”。

“為你推薦”中開始的內(nèi)容展示“私人定制”，代替了“我最喜歡的”和“我新添加的音樂”。“最近播放”不做改動，因為對用戶來說它是很有用的。

向下滾動，會發(fā)現(xiàn)我根據(jù)位置，時間和最近的社交媒體活動對“周播放列表”進行了調(diào)整。

就像在Facebook上搜索café?搜立即展示結(jié)果一樣，Apple Music 根據(jù)用戶的播放列表選擇更新Mood，這不是很好嗎？

我們在社交媒體上分享我們的生活，同時也可以從中得到一些反饋，你覺得如何？

下圖是每日推薦，根據(jù)用戶的喜好推薦給他們相應(yīng)的視頻。比如，我非常喜歡凱蒂·佩里，如果她的音樂發(fā)布，那就可以重點展示凱蒂的視頻。

向后滑動，你就會發(fā)現(xiàn)“藝術(shù)家聚集地”。我將新的品牌視覺效果與其他界面協(xié)調(diào)一致。

最后，如果用戶沒有在“為你推薦”中找到感興趣的內(nèi)容，為了方便他們能夠快速訪問更多的音樂，可以讓他們預(yù)覽“最受喜愛”或“最多播放”的音樂。

Connect功能發(fā)生了什么改變？

這是好問題。事實上，我并沒能從我的研究中看到任何數(shù)據(jù)來證明現(xiàn)在App中Connect Feed功能的存在是正確的。用戶們有更多的興趣通過音樂與朋友和家人建立聯(lián)系，而不通過Twitter與藝人建立聯(lián)系。

我認為Apple公司應(yīng)該注重整合現(xiàn)有的社交媒體與Apple Music的結(jié)合，而不是試圖向已經(jīng)有很多選擇的用戶再推一個社交媒體應(yīng)用。

瀏覽

我收到關(guān)于當(dāng)前“瀏覽”最多的反饋是它令人感到太乏味。也有些用戶對“為你推薦”和“瀏覽”之間的區(qū)別感到困惑。

我的方案是根據(jù)蘋果網(wǎng)站的風(fēng)格重新設(shè)計了幻燈片 — 寬度與屏幕寬度一致，底部的橫線標(biāo)記著用戶當(dāng)前所在的幻燈片位置。我相信這樣改變會更能突出精選內(nèi)容。

同時將 “收音機”列表合并到了“瀏覽”。

觀看

今年，蘋果公司確認Apple Music公司將要擴展視頻流媒體內(nèi)容，努力的將蘋果音樂變?yōu)榱餍形幕暮诵摹Ｎ液芎闷嬖撘绾尾シ乓曨l，尤其是在手機App上，所以我創(chuàng)建了獨立的標(biāo)簽頁專門用來瀏覽視頻內(nèi)容。

添加獨立標(biāo)簽頁的另一個好處是，“瀏覽”可以專門保留音頻內(nèi)容

以后這個標(biāo)簽下將會有豐富的內(nèi)容，但現(xiàn)在我的設(shè)計是基于蘋果音樂已經(jīng)爆料的信息和現(xiàn)有的視覺語言。

搜索

現(xiàn)在蘋果音樂搜索功能最主要的問題在于它的已有模式：必須分別在“蘋果音樂”和“音樂庫”下進行搜索。

使用這個app的兩年時間里，我發(fā)現(xiàn)自己依舊會在搜索功能下感到失望，尤其是音樂庫有不同的方式處理關(guān)鍵字：

這非常令人討厭，因為輸入錯誤的可能性會很大，尤其是他們在音樂庫中查找新發(fā)布的歌曲或藝人的時候。

我的解決方案是將兩個模塊合并在一起統(tǒng)稱為“搜索”，搜索結(jié)果優(yōu)先展示用戶的音樂庫的內(nèi)容，接著是蘋果音樂相關(guān)的內(nèi)容。

可以很明顯的看出我是Lady Gaga的粉絲嗎？

音樂庫的內(nèi)容也應(yīng)該支持關(guān)鍵字的模糊搜索。如果將來能夠通過關(guān)鍵字實現(xiàn)有關(guān)的情緒或活動內(nèi)容，那一定會很有趣。

播放頁面

我喜歡Apple現(xiàn)在的播放頁面，也覺得不需要太多的調(diào)整。所以決定保持現(xiàn)在的界面視覺效果。但是，我認為在現(xiàn)有的基礎(chǔ)上添加一些簡單的手勢交互會是一個很好的體驗方式。

對很多用戶來說，包括我自己，對通過“喜歡”和“不喜歡”評價歌曲的意義并不是很理解。并且目前這兩個操作是被隱藏起來的，當(dāng)用戶表示“喜歡”一首歌曲的過程需要在手機上打開一個獨立的菜單，這個過程很繁瑣。

“如果隱藏的這么好是不是意味著這個功能不是特別需要？”

我的解決方案是通過大多數(shù)用戶已經(jīng)很熟悉的手勢? ——? 雙擊來實現(xiàn)。我注意到，很多用戶試圖按動專題頁面...那為什么不在此基礎(chǔ)上給用戶一個反饋呢？

另外，用戶可以通過橫向滑動進行瀏覽。我相信這會給用戶更直觀的方式讓他們自行控制聽覺體驗。

接下來？

回顧我初次在頭腦風(fēng)暴期間潦草的筆記，我為自己三個月內(nèi)能取得的進步感到驚訝。

在這個項目開始之前，我對Principle完全沒有接觸，不會使用Sketch中混合編輯模式。現(xiàn)在...誠實的說，我仍然認為自己在app原型制作中是新手，但是，我會努力做到最好。

我并不認為Apple Music公司的優(yōu)秀人士能夠從這個案例中用到任何東西，但是如果在AppleMusic工作的人看到這篇文章我會很驚喜，同時也希望這個項目能夠帶給你一些想法。

通過這個項目，我了解了我戲劇專業(yè)背景與UX設(shè)計的關(guān)系 —— 設(shè)計師的經(jīng)驗和戲劇藝術(shù)家對人類的同理心的理解是相似的。

不久，我將開始我下一個重大的經(jīng)歷：羅德島設(shè)計學(xué)院的BFA平面設(shè)計。雖然對要告別這個過程（和西北大學(xué)）感到很不舍，但我真誠地希望這僅僅是體驗設(shè)計生涯的開始……通過同理心改變世界。

歡迎關(guān)注譯者的微信公眾號：

「干貨超足的5個改版實戰(zhàn)經(jīng)驗總結(jié)」

1. LOGO 改版：《揭秘LOGO設(shè)計流程！超詳細的騰訊云LOGO 改版記錄全過程》
2. 官網(wǎng)改版：《QQ官網(wǎng)全新蛻變！IM QQ 改版（第一期）設(shè)計總結(jié)》
3. Pinterest 改版：《改版實戰(zhàn)！聊聊PINTEREST官網(wǎng)再設(shè)計過程的經(jīng)驗思考》
4. QQ 新版表情：《騰訊ISUX丨揭秘QQ 新版表情背后的設(shè)計故事》
5. 提升數(shù)據(jù)：《騰訊ISUX丨通過優(yōu)化，我們將QQ會員付費用戶數(shù)提高了5倍！》

原文地址：medium

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

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com