一款優秀 APP 的交互設計，怎樣學習和借鑒呢？

01-02

現在有很多交互不錯的APP .作為一個新手交互設計師，從那些方面去借鑒這些作品呢？視覺設計，可以直接去臨摹，做效果圖，這樣的效果下次遇到就可以自己做了。
那面對一款APP ，交互設計師能夠怎麼學習吸收呢？從哪些方面下手呢？

「打散重構」。

通常產品經理和設計師看到其他產品里好的地方，立刻會想怎麼用到自己的產品里來，但是這還僅僅是表層。深層的思考，要拆開來看。

試試從用戶、需求、任務、信息、視覺幾個方面來看，交互是如何同不同的方面產生聯繫的。

一個應用，裡面最重要的任務是什麼，界面中最突出的部分是不是反應了這個任務的優先順序？

是不是在引導用戶的注意力和操作？希望用戶去做的操作，是如何巧妙的一點點推動用戶往前走的？（我將這稱為跨越臨界點）

信息是如何呈現給用戶的？有無層次？都用了什麼樣的形式？能否反應出他們的重要性和關係來？

有無考慮到用戶的感覺？視覺是否營造了氛圍，並和交互的框架緊密結合起來？

亮點的交互 Pattern，是不是可以啟發我們，找到更多的可能性？

—— 2017年9月更新 ——

學習 UI/UX 和產品設計

1、UI 和 UX 設計師的課程表

2、UI、UX交流QQ群：633293003，會定時舉行公開課和答疑。歡迎大家加入。

新手交互設計師需要關注幾個點：

App本身的規範，熟讀並能夠看出來App本身哪裡有沒有不符合規範的地方。
拆解掉這個優秀App所有的功能及體驗流程，思考每一步，及為什麼。
最好是找這個App的設計師，郵件請教他這裡是如何思考的。

我個人是用這些方法供你參考，祝你進步！

這事我最喜歡干。也是我的公眾號「Pinapps」主要工作之一。

介紹一下我的做法：

1. 界面截圖 or 錄屏。

把App整體的玩一遍，過程中截圖留檔。如果是對手勢支持較多或者動效較多的會錄屏留檔。

2. 頁面Sitemap

App里不宜層級過深，把截圖整理後「同頁面不同狀態可以合併」還原一下Sitemap。看看別人如何組織自己的結構。

3. 流程重現

還是利用前面的截圖，在畫圖工具里自己串一下。這裡就可以發現這些優秀apps對於自己設計規範的定義。比如對於某操作，什麼時候使用浮層，什麼時候使用頁面。

4. 競品分析

有對比才能看出設計差異和設計理念。找到同類型的優秀應用。看看每一個產品、設計上的不同處理。比如理財類和單位換算類，我就分別買了僅5款來做對比。你就會發現其中真正的差異。

5. 保持使用

如果你覺得他真的不錯，記得要時常用一下。因為我們不可能在一次使用中就能發現其中的每一個設計環節。如果是社交類的應用，最好找幾個有同樣興趣的同學平常一起來做測試。

6. 直接問
非常贊成 @劉雲天前面提到的這一點。就我的了解，大部分設計師「特別是海外的」是非常樂意與你溝通的。

看了所有人的答案後，我有一些不一樣的思路！大家無非是調研你參考的產品是如何好，如何牛B，這種思路興許有用，個人覺得太平面化了，讓我想起了老師讓我們在文章里提取中心思想一樣。

在所有的答案里， @馬力同學提到的「應用到自己產品中」的思路靠譜（這種方式菜鳥別模仿，容易走火入魔），我另外說一條對我非常有益的思路：

憑第一印象找到參考APP的核心功能，然後把參考的APP放一邊，自己從這個核心功能點上迅速構思你心中的APP，速度要快，十分鐘內即可，如果值得深層次研究的APP，可以花更多時間去構思。

這種思路的直接好處就是不會啃別人啃過的東西，而是自己嘗試快速啃一次。你在構思過程中，對於「功能，交互，可能性」等方面一定會發現很多苦思不得其解，或走不通的地方，沒關係，記下來；你或許也會發現你覺得特別佩服自己的地方，淡定，也記下來。然後回過頭來與參考的APP進行對比，你就知道人家為什麼那麼做，你為什麼這麼做。

這可以突破別人的思路框架，發現參考APP的優缺點，更.重.要的是，你能發現自己思路的優勢點，慢慢地，你就有了自己風格，你也知道了自己的短板，如果你真的對這行感興趣，你一定會非常樂意彌補這些短板。。。

不久後，就有人開始研究你的APP了

希望對你有用。

回答討論的是對「一款」優秀App的學習和借鑒。

學習

學習，說白了就是思考，所以回答問題的關鍵在於思考什麼和怎麼思考。

為什麼自己認為這款App的交互設計很優秀？它的哪些地方打動了自己？這是踏出思考路途的第一步。我們覺得一款App的交互設計很優秀，往往是從局部開始的。不妨思考以下幾個問題：

隱喻做得好，一看就懂？
完成任務的步驟短平快？
對任務場景洞察深入？
突破常規，化繁為簡？
文案很贊？
有超預期的小彩蛋？
信息展示效果好？

局部優秀的產品往往整體也不錯，思考完局部再考慮整體就像是飯後甜點，收穫不一定有前者多，但能讓你的思考變得完整。就App整體的設計而言，只是符合設計規範的話其實算不上出彩，導航框架和頁面布局上的巧妙創新才算優秀。另外可以從以下幾個方面挑挑刺：

信息架構是否穩健精鍊，可擴展性強不強？
交互範式是否統一？
文案性格人格分裂了嗎？

把以上的都思考完了？那不妨把它們有條理地寫下來吧，寫作是知識沉澱的一個好方法。只想，不寫、不說、不做可是極大的浪費！

借鑒

借鑒就是行動，把學習的正果應用到正在做的項目中吧！實踐是最好的學習方式，實踐產生的記憶最久遠，實踐能夠進一步挖掘當中的巧妙之處。另外最重要的是實踐讓你更敏感，以後看到相同功能的設計時都能敏銳地洞察當中的優劣！當然，思想可以借鑒，形式不能照抄，借鑒的正道是把優秀的思想移植到自己的實踐當中。

曾經我是通過多用多體驗來學習優秀App，一段時間後發現不夠深入、不成體系、容易遺忘。目前正在嘗試一個笨方法——撰寫體驗分析文章。雖然這是個體力活，耗時耗力，但是總體來看收穫頗多。

寫體驗分析文章，與做競品分析類似，主要有幾個模塊——產品概覽、功能模塊分析、交互設計分析、用戶反饋、產品面臨的挑戰。其中交互設計分析是必須的，其他幾項可根據產品特性等情況來考慮是否撰寫。

1、產品概覽

主要包括產品定位、目標人群、用戶痛點、核心需求，可選內容有運營策略、內容來源。作為用戶體驗五要素-戰略層，是交互設計的基礎。了解這些，在體驗產品時才可能更了解設計背後的緣由。

2、功能模塊分析

主要是梳理功能、功能點，熟悉背後的產品邏輯、機制、要點，並記錄下來，對應用戶體驗五要素-範圍層。通過這一步可以非常全面的了解這個產品是如何滿足用戶需求，除了主要功能模塊還有哪些輔助功能。這樣在下一步能更系統的做交互設計分析。

3、交互設計分析

1）分析App的信息架構/層級結構，明白這樣設計的理由。

2）用戶完成主任務的流程。

以購物為例，主任務之一的流程是——挑選喜歡的物品、加入購物車、從購物車中結算。而挑選喜歡的物品，則可以通過首頁、頻道頁、搜索結果頁、詳情頁等頁面完成。

3）重點針對與主任務流程相關的界面進行分析，撰寫在界面布局和交互操作上如何做、有何亮點、是否有什麼問題和建議。

4、用戶反饋

在體驗App期間，可以多翻翻用戶的評論，有些資深用戶的反饋還是挺有代表性的。針對這些反饋，可以從產品功能、交互設計上思考改進方案。

5、面臨的挑戰

產品最大的問題是什麼？如果是我來做，我會怎麼改進這個產品？

6、競爭產品

競品有哪些？和競品比，這個產品的優勢是什麼？劣勢是什麼？

以上幾點，並不是每一點都得寫，針對產品特性、以及對產品的了解可以適當調整。有時候為了防止自己拖延，我也會適當降低要求，重要寫某幾個模塊。

這裡是幾篇我寫的體驗分析文章，供參考：

【產品體驗】小米手環，給我一個帶你的理由

【產品體驗】城覓，發現本地吃喝玩樂逛的好去處

【產品體驗】看 EasyCost 如何讓記賬變得簡單

通過這樣系統的分析之後，產品的設計亮點、設計模式能讓人印象更加深刻。在體驗的過程中也更會去考慮是否適用自家的產品、如何通過打散重構、轉譯等方式改進自家產品。

目前我也在摸索、調整方法，歡迎交流。

把玩的時候試試問自己以下問題：

產品面向的用戶可能是哪些，Ta們有什麼需要和特點？會有哪些潛在場景？
主要流程是否順暢？導航結構是否清晰？
為什麼要這樣設計？利弊？
有哪些用起來不爽的地方？
有沒有Design Pattern可以學習借鑒？

PS：感謝邀請！

目前中國很多公司里，交互和產品經理是同一個人，交互和視覺也是同一個人，所以你似乎不知道在哪裡著手去學習。

作為一個視覺設計師，雖然視覺設計與GUI，ID，UE等有區別，但是依然在這幾年裡在自己的工作和實踐中積累了一些經驗和心得體會，反正我在甲方品牌公司，也是啥都得接觸。╮(??? ????)╭

我認為一款好的APP產品要滿足這幾點：

一·邏輯上

必須邏輯上得很清晰，減少用戶的操作步驟；

二·細節

交互設計中有個叫做」預設用途」的原則，要讓用戶一看見它就知道如何使用。

三·動效

我們將交互過程拆分為：交互對象+交互行為+交互反饋。當然IOS與android也是有區別的，在交互行為上，android較為多操控層級。在設計上需考慮用戶使用時操作便利度，優化體驗感。

四·界面

UI設計上，當然要符合產品本身內容，你社交軟體就得有社交的感覺，配色各方面的；不然你學英語的軟體做成tao寶那樣，準備好被子和床在公司睡吧?乛?乛?

五·體驗與分析

就是要多下別的app到自己的手機上體驗，分析各個app產品和行業的區別。多點充實自己，多以背後邏輯去思考是否值得參考或應用到實際產品上。

舉個栗子：

這款app屬於學習類產品，主打文學型，ui的設計風格，無論字體和配色都與其行業符合，起碼我打開這個app知道是做什麼的。

其次是看邏輯，這個交互邏輯相當清晰，你甚至看不出有什麼功能，可人家就是想專心做好一件事，對就是文學賞析。張小龍說一個好的app是讓人用完就走，那可不一定，還必須讓你的交互邏輯使用戶具有粘性，一個沒有用戶粘性的app，用不了幾天你都覺得占內存。

這個app一個細節我個人挺喜歡的，就是分享功能，直接生成一張滿滿詩意的海報，滿足用戶虛榮感。

其他app的步驟分析也差不多，這裡就不累敘了。

總結一下，其實說到底交互設計不能只關注本身的設計，而應該縱觀產品一個協調以及運營需求；多維度的去站在用戶的角度去思考，慢慢的你擁有了多思考的思維後，你日後才能做出好的產品。不能一味找好的參考和練習，當然這必不可少，但是重要還是要知道為什麼，起碼理直氣壯的和老闆說老子不改了。哈哈哈?乛?乛?

希望能給初入交互設計行業的新人或者有興趣加入到這個行業的新人一點建議和啟發，也是對自己從事有關交互設計行業以來的一點總結吧，歡迎大家拍磚吐槽，和我交流。?:.?ヽ(?????)??.:?+?

學習和借鑒優秀APP的交互設計，主要是看它的動效。

決定APP成敗的關鍵是邏輯架構，怎麼把信息架構的邏輯最優化，怎麼讓用戶體驗得最舒服？是交互設計師最關注的問題。

一款優質的APP，其本身是進行大量用戶測試之後得出最優結果，因此我們可以通過它來學慣用戶的使用習慣。如果是用戶體驗的測試方法，光靠是一個APP是學不來的；但學習動畫是可行的，比如你點擊某些東西，它給出的動效是一些直接的自然性反饋，可以引導你去進行下一步操作，或者是一些間接的主動引導到其他功能的回饋。

更多相關內容在

JinCao 曹金的live

JinCao 曹金 - 知乎專欄

覺得視覺和交互都不是靠簡單的臨摹就能提升的，還是要自己的思考和總結。視覺和交互都是為產品服務的，是對產品功能的表達，好的視覺交互未必炫酷，但用在產品上是「合適」的，這就夠了。所以從偏產品的角度回答一下問題：

產品的交互有哪些特別之處？
這樣的交互對功能表達、用戶操作是否合適？原因是什麼？
這款產品用什麼樣的交互方式會更好？
這樣的交互用在什麼產品上會更好？

主要就是從後兩點裡提煉出結論，運用在以後做的設計中。

個人感覺吧：設定一些任務（提煉你學習對象有哪些功能可完成那些操作），完成一些操作流程；分類匯總吧。慢慢看的多了你可能會積澱下來，比如：

讓用戶登錄：是否已註冊--是怎麼處理的；註冊信息填哪些、排布、交互細節--是怎麼處理的。針對登錄這個你可能看很多產品，很多用了相似手法、很多則差異很大，哪種更好？各自優劣、利弊？你就這麼思考著、整理出感想。你是否有更好手法，仔細想想你的方式真的是比已有的方式好么？你看的足夠多麼？

然後看你能提煉到哪些點？比如彈窗的設計、列表的設計、出錯怎麼提示、新手如何引導。

結合你用一個軟體（或一類軟體）的使用流程，你會遇到什麼問題、需要軟體給你什麼指導和反饋。等等。多看，多想，提煉，總結吧。跟視覺也是類似的：臨摹——&>仿造——&>形成自己的觀點——&>表現出來。

修改測試一下

最好的學習方式應該是分享和交流

這裡推薦一款我最喜愛的天氣app：solar

推薦理由：天氣也可以快進，下一小時天氣早知道。

傳播學的5W方法 who用戶是誰 when什麼時候會用 where在什麼場景下會用 what滿足了什麼需求 why 為什麼選擇這種滿足方式

分享一下自己總結的「GIFT」方法，共分四步：

明確目的（Goal），歸納框架（Framework），模擬任務（Task），記錄亮點（Inspiration）；

一、明確目的（Goal）

首先，不同情況下我們分析一款產品的目的會有所不同。初學者的通常是為了：

了解一個領域產品的基本結構/模塊，建立基本認識；
熟悉成熟、優秀的交互設計Pattern，內化積累；

有一定經驗，尤其是因工作需要分析競品的設計師，可能會更著重於；

針對性的了解競品的設計細節與變化；
了解當前設計趨勢，發掘有價值的設計創新；

不同的目的決定了下面分析時的不同側重點，初學者可能從歸納框架和模擬任務中獲益更多，有一定積累的設計師也許更需要一些亮點啟發；

二、歸納框架（Framework）

梳理產品的用戶人群、用戶目標、主要任務、使用場景，歸納出產品模式的運作框架（大體量產品可以從單個模塊入手），形成文字或圖形輸出。即回答「產品為用戶解決什麼問題，用何種方式解決」的問題。

通過這種方式從高維度認識產品，可以為後續的具體分析提供思路和背景，並且有助於尋找設計創新的機會。

這一步中獲取信息的途徑不僅僅是體驗App，也可以搜索產品新聞、公關稿/廣告、產品負責人的訪談，查看Appstore中的產品描述、更新概述、評論等；

收集足夠信息形成思路後，可以用精鍊文字或拓撲圖表達出來。這一步根據個人習慣不同，語言思考者或許更青睞精準的文字，視覺思考者可能偏愛直觀的圖形。但不管怎樣，輸出的過程都可以明確思路、強化記憶，便於分享；

例如：

泛用型播客APP——Overcast，是一款旨在「幫助用戶完全控制體驗的簡單強大的播客播放器」，產品運作框架主要通過是定製化的播放列表、智能的播放器，緩解「用戶時間有限、聽音環境複雜——播客節目（數量多、時間長、錄音品質不一）」之間的矛盾。用戶使用Overcast的主要任務有：播放器控制、添加訂閱、創建播放列表等；

三、模擬任務（Task）

從前面整理得出的主要任務出發，體驗產品的頁面設計、操作流程和邏輯；

把自己代入用戶的情境，以「任務流程」為線索貫穿知覺、識別和記起、行動和反饋四個維度，由靜態到動態的分析產品的設計（這裡參考了Spell前輩曾介紹的方法，有興趣的話可以閱讀原文：知乎專欄）。「代入用戶情境」意味著不僅以自己日常的操作習慣體驗一款產品，而是嘗試扮演不同的用戶角色，模擬不同的情境場景。譬如使用電商App時，許多男性的習慣可能是直奔搜索框，但作為網購主力軍的女性消費者也許更樂意看看店家新品和主頁推薦。

分析時，可以截屏或錄屏記錄任務流程中的每個頁面，並隨時記錄發現的優缺點，形成一份分析記錄文檔；更深入的辦法是重繪一遍原型，把自己帶入該產品設計師的角度，感受頁面每個細節；

首先，從知覺維度（Awareness）入手，審視頁面布局和視覺是否有助於用戶發現重要的信息，或是找到執行任務的關鍵入口，不被冗雜元素干擾。即「讓用戶知道自己要做什麼」；這一步可以採用《交互設計精髓》提到的「眯眼測試」，用模糊的視線看看哪些元素是真正突出的；

以Overcast的播放器控制為例：經過眯眼測試，發現操作頻次和重要性最高的播放/暫停按鈕和進度條、節目名和播客封面的確是整個播放頁面中最顯眼的部分。這也得益於作者Marco Arment 所做的大量減法，對比Podcasts、Castro、喜馬拉雅電台，Overcast可謂充分詮釋了「刪除、組織、隱藏、轉移」的設計原則。

其次，是關於識別和記起維度（Recognition/Recall），看看界面控制項和元素是不是有良好的可供性（affordance），讓人容易理解所需操作，減少認知、記憶負擔，即「幫助用戶理解要怎麼做」；

Overcast在識別和記起方面的幾個細節：

極簡的整體設計中，仍然為進度條保留了一小塊手柄，提示用戶此處可拖動；

點擊調整Playback和Effects時，可以直接在浮動菜單中調整，點擊其他區域即可退出。不會跳到其他頁面，減少了額外的認知負擔；

播放按鈕在播放狀態時，會出現實時的音量柱，指示當前狀態巧妙解決了許多人對於「按鈕應當表達操作還是狀態」的糾結；

Overcast會記住每一條單獨節目的播放進度，讓用戶能立即找回之前的節奏；

此外，Overcast中取消了「上/下一首」按鈕，代之以長按「快進30S」切換節目，削弱了可供性，新手不容易發現。但一方面對於動輒一兩小時的播客節目而言並不算高頻功能，另方面也許Overcast考慮到自己作為第三方播客App，用戶群相比Podcasts、喜馬拉雅電台等大眾型產品更為專業、硬核，有能力發現這一功能（就像某TED演講中提到Chrome用戶比Safari IE用戶更具探索精神，因為他們會拒絕默認、主動選擇其他）；

然後，是動態的行動（Act）維度，看看產品是不是儘可能減少了用戶執行操作的阻礙，填平了用戶從「想」到「做」之間的鴻溝，避免不必要的跳轉、對話框。

繼續以Overcast的播放器界面為例：

極簡的布局中，Overcast讓少數幾個按鈕擁有巨大的熱區，減少了對手指精準定位的需求，利於通勤等移動狀態下的快速操作；

點擊或向上輕掃封面圖，下方的節目信息會自動定位到最合適的位置，減少了手指滾動需求；

進度條上的手柄，會始終與屏幕兩側保持一定距離，便於手指點擊。但進度條在界面的頂部，遠離拇指舒適區，有些不利於操作。（也許作者是處於視覺效果考慮，把視覺效果較瑣碎的進度條和同樣碎片化的頂欄放到一起，讓其他大部分界面得以保持簡潔。橙色的線形也可以和播放按鈕的橙色點元素形成平衡。同時單手握持時，頂部的位置相比底部視覺可見性更好。）

快進/退30S按鈕在連續點擊時，會自動加大幅度，最高達到每次3分鐘。真是機智的設計；

睡眠定時器採用按鈕累加時間的形式，相比Podcast和喜馬拉雅的菜單中直接選擇的做法更靈活，但效率稍低；

最後，反饋維度（Feedback），則是查看App是否及時反映了用戶每次操作的結果，呈現了被操作對象和系統的狀態；

Overcast在這部分並未表現出太多亮點，甚至存在部分缺失：
1. 睡眠定時器調整時間時，設定的時間數字會被手指擋住無法看清，影響操作；
2. 添加新播客的流程中，最後一步點擊訂閱新播客後，界面沒有任何反饋，直接跳回搜索界面。此時關閉搜索頁後，才能看到新播客出現在訂閱列表中；

四、記錄亮點

留心記錄產品微交互/細節設計亮點。除了體驗主要任務流程以外，充分瀏覽App的各個頁面，體驗設計者對細節的把握。可以從如下一些維度考慮：

提升效率減少負擔/阻礙
消除擔憂
特殊狀態處理
情感化設計
動效設計
為特定使用場景的優化
……

例如對於工具類產品，設置菜單往往能體現一些設計者的細微洞察和巧思：微信最近更新6.3.5版後，在個人設置中增加了「只顯示最近6個月動態」的功能；Overcast中，設計者也在設置菜單和其他一些位置使用了人性化的注釋說明，讓產品多了一些溫度和態度；例如：
1．設置菜單中「為Overcast評分」的入口旁邊，有一句「Overcast永遠不會因為求評分打擾你」。與一些頻繁彈框乞求評分的App形成鮮明對比；
2．添加播客訂閱時，標題欄有提示「只添加一個節目也可以，沒有壓力」；

另外值得一提的是，Overcast的殺手級功能Smart speed和Voice Boost 的確擊中了播客用戶的痛點。可以說這兩點特性，才是Overcast真正吸引用戶的理由，相比之下操作行為層面的精緻設計只是錦上添花；

分析中發現的亮點細節，可以統一記錄在類似如下的表格中，歸檔成為自己的資料庫，便於日後查閱參考。

以上就是自己總結的GIFT方法：明確目的（Goal），歸納框架（Framework），模擬任務（Task），記錄亮點（Inspiration）；

這個App是給什麼人用的

這些人會在哪些場景下用

這些人在不同場景下會怎麼用

以上，都過一遍弄清楚以後，再按走查的場景去用這個app

用的時候每一步的目的是想做什麼，應該得到什麼反饋，得到了什麼反饋，可以看到交互合理與否

同時，想一想每一步的交互，設計師想讓用戶做什麼，給了用戶什麼

這樣會發現這個app好的和不好的地方，能了解到app設計者的設計思路，個人覺得所謂優秀的app設計，值得學習和借鑒的更多是設計者的設計思路，而不是你看到這個app被公認優秀，它用了個下拉刷新你就把下拉刷新照搬到自己app上

設計者是如何分析用戶行為後得出的交互設計，它好好在哪裡，是否還有不好的地方，如果不好自己做的話會怎麼去設計，這樣對自己的提高會更大

東西都是做給人用的，設計師就是思考人應該怎麼用東西，怎麼用會用的更爽

從你為什麼覺得它優秀入手……

思考幾個問題：

1、這個APP面向的用戶群是怎樣的，這些用戶的共同點是什麼。這個APP主要是滿足怎樣的需求的。

這個APP是否貼合用戶的需求，有沒有給你的需求調研帶來一些新的想法。

2、你在什麼情況下下載了這個APP，你在使用之前的預期是怎樣的，你希望通過他得到什麼。

3、第一次使用，你對這個APP的印象是什麼，為什麼覺得它好。他是否達到了你的預期，他是如何達到你的預期的。

並且可以梳理一下他的用例、界面設計規範、體驗設計規範等等。

4、這個APP它的亮點在哪裡，吸引你的點在哪裡。超出你預期的地方在哪裡。

最後你再去總結沒一個過程中，你吸收到的點，可以借鑒到自己的APP裡面的東西。

分析優秀APP的框架，了解APP的功能目標，用戶操作流向，最終的轉化目標。在每一個轉化節點上，關注交互行為的設計。

交互設計的關注點：組件一致性（降低用戶學習成本，降低開發迭代成本），組件耦合度（窮舉用戶行為路徑，逆向思考之所以那樣設計的原因），組件高效性（迅速完成轉化，提高用戶轉化率。需要跟耦合度做一定的權衡）

讓用戶思考的設計一定不是好設計。—— Steve jobs

前段時間一個朋友給我展示了他們公司在運營的一款原創音樂APP，於是就隨手下載體驗了一把，呵呵，爛的有點過分了啊。。。

個人的一個疑問，青桔音樂到底是想做音樂還是社交，或者說是想主打音樂還是主打社交，目前給我的感覺就是產品決策者傾向於兩者兼顧。

最近抽了時間希望能夠對該產品進行簡單的梳理和重設計。

首先這款APP在體驗過程中主要出現有以下五個問題：

結構邏輯混亂，主次不分
交互方式單一，操作不流暢
視覺設計和展示體驗不佳
操作流程複雜
不說人話

（青桔音樂APP原版結構邏輯圖）

（青桔音樂APP重設計結構邏輯圖）

治標先治本，調整邏輯，分清主次。

首張圖是【青桔音樂的原版APP】的結構邏輯圖，下圖是我修改的【青桔音樂APP結構邏輯圖】，在不改變主要內容的情況下，我只要修改了以下幾個部分。

首先打開青桔音樂APP應用後首界面顯示的並不是音樂，而是【動態】，就象我想聽歌你卻給我拉進了聊天室。。。那你乾脆改為「青橘聊天室APP」不是更直接？想做內容社交，是需要內容有足夠的粘性和濕度才會吸引用戶圍繞內容進行互動的，你生拉硬拽我進聊天室幹嘛，難道有大保健？
動態就動態吧，我們硬著頭皮繼續唄。突然又懵逼了。。界面左上角有一個表示添加的icon，在「聊天室里添加好友」是很正常的，而且按照【動態】邏輯也是需要有一個添加關注的按鈕，然而，這次我又錯了。。（啪啪啪打臉啊。。）點擊icon進去竟然是【搜索歌手】，我連歌都還沒聽著，你讓我搜誰？
搜索。在原版APP中只有在動態中有一個貌似搜索的按鈕（但事實上不是），因此在主界面個人認為需要常保持搜索按鈕，並增加智能搜索類目。
點擊【好友】頭像竟然可以看到ta有多少金幣，金幣這個個人「財產」信息不應該只有自己才能看到么，另外你給我看這個信息是有什麼用，誰多誰在炫富么，還有其他用途么，至今沒有發現。
在【我】中最後一項竟然是【發現好友】，這個不應該是動態里的功能么，而且既然有意做社交，【發現好友】這麼重要的功能怎麼能隱藏在【我】的個人頁面呢，想不通，可能想要考驗下普通用戶的智商。
另外打開大賽界面，不多說，毫無邏輯可言。。同時沒有任何內容粘性，，完全沒明白大賽存在的意義。。。
我想著這已經夠爛了，呵呵，還有比這更爛的邏輯么。真TM有。。。動態上方爍然兩個大字【全部】，我是用了好長一段時間才知道，原來點擊【全部】，竟然會有下拉框。。。下拉框顯示【全部】，【同城】，【同校】，【關注】，我要不是手賤誤點了全部，還真不知道你還給我們準備了驚喜。只是這個驚喜真的是驚喜么。。如果你的交互要靠用戶手賤才能知道，那交互設計獅完全可以早早下班陪老婆嘿咻去了…(怎麼感覺像是碼農同時干著設計師的活兒？)

左圖：【動態】展示界面右圖：【動態】部分功能截圖

交互方式單一，操作不流暢。

青桔音樂還是挺堅持自己的原則的，什麼原則，當然是「一點到底」，然而目前主流的幾款APP已經趨向「能用劃的，不用點的」了，這方面可以參考網易雲音樂APP、蝦米音樂APP等的交互方式啦。
點擊某單曲播放按鈕可以看到播放鍵變成了暫停鍵，這是常規操作，但是問題來了，播放界面要再點擊才能進入，另一個問題就是。。。你如果粗心你會發現並沒有播放欄，但事實上，青橘只是想測試一下用戶的智商夠不夠高，因為在播放歌曲同時，它會在你完全無意識的在界面右上方悄悄跳出一個旋轉的唱盤icon，這也是我玩了段時間才發現的。我也不知道這麼做的好處在哪，但是我認為對用戶習慣來說，必將是「順我者昌，逆我者亡」，隨意揣測和修改用戶習慣必將被打臉。

大家注意右上角那個圓坨，不錯就是那個播放按鈕。。

視覺設計與展示體驗不咋地。。。

視覺設計和用戶體驗也是息息相關的，這一點不可否認，而青桔音樂在這一方面明顯腦子又抽了風。。。

（很想知道為什麼有的狀態有點贊按鈕有的就沒有呢？）

（或者點贊位蹦出來一朵新鮮的菊花。。。）

（為什麼虛化背景四邊顏色深淺不一，是有意為之么，但是總有種粗製濫造的感覺。。）

個人覺得播放界面雖然區別於其他大多數音樂播放界面，但是效果也並不太好，比如筆者想快進活倒退都比較難操作（因為我不擅於畫圈圈。。）

類似這樣的還有很多，感興趣的同學們可以繼續尋找更多刺激哦～～

話不多說，該產品部分用詞必將讓你「敗興而歸」。

「站內分享」什麼鬼，普通用戶真的看得懂如何操作么

「複製鏈接」指向模糊。

最想吐槽的是第二頁「說倆句」？？？說「倆」句，兩——liang ,倆——lia，來跟我念。

接下來的界面redesign中主要針對應用首頁，動態頁以及相關跳轉頁，播放頁以及相關跳轉頁等作出重設計，旨在理清青桔音樂目前邏輯問題以及整體界面設計優化等。

一、青桔音樂redesign界面中主要修改了以下幾處：

將原應用底部導航中的「推薦」修改為「音樂」，區分出首導航欄和次導航欄內容差別。
設置全局搜索按鈕。
播放提示按鈕常在右上角。有歌曲播放時播放提示按鈕旋轉表示。
單曲信息設置較為詳細的音樂人和來源，點擊音樂人可進入該音樂人主頁。
增加播放量提示。
在次級專題板塊增加擴展按鈕，點擊可以跳轉頁面按時間順序選擇更多音樂。
將原應用導航欄中「動態」改為「發現」按鈕。
整體更改該應用以往沉悶的黑色背景為青綠色主色調，使整體氛圍輕鬆簡潔。

下圖中修改處有紅線框標註。

二、首頁設置頁選擇使用抽屜式布局，重新整合各信息功能，使使用更加整體方便。

三、「發現」界面重新整合信息『

增加「全部」擴展角標，明確提示用戶可以按照分類進行選擇。
增加「關注」，「已關注」按鈕。快速便捷關注好友動態。點擊「已關注」可以選擇取消關注。
「點贊」、「評論」增加數量提示，並且顯示最近評論信息，點擊「更多」可以顯示全部評論。
評論增加點贊功能。
在「發現」主界面刪除用戶等級提示等次要信息，如需查看可以點擊該用戶頭像進入詳情頁。
增加懸浮「編輯」按鈕，突出該界面主要功能。

四、個人主頁

重新整理界面信息布局。
去除「金幣」數量顯示，保留「關注」、「粉絲」、「人氣」數字提示。
按照時間流順序布局動態內容。
增加詳細時間以及評論次數、點贊數。
點擊個人主頁右側更多按鈕可以顯示「推薦」界面（如圖）
點擊單曲右側按鈕可以顯示分享等功能界面。
分享界面增加「更多」按鈕。增加更多分享平台或鏈接。

五、播放界面延續原界面設計風格，在以下幾處做了完善和修改。

整體界面分為三部分，上部分為歌曲基本信息板塊，中間部分是旋轉播放和歌詞顯示主界面，下部分是音樂人基本信息界面。
鑒於與目前該產品運營情況相符合以及對其商業模式理解，在redesign播放界面時考慮增加「秀」功能，即後台可以自動完成圖片與歌詞結合形成完整圖文內容的圖片並可以分享到若干平台。
通過手勢左右滑動可以顯示「播放旋轉界面」和「歌詞界面」。
點解音樂人下拉鍵可以跳轉到詳細音樂人信息界面。

以上是部分redesign青桔音樂界面以及簡要分析說明，純原創內容希望大家多多支持和關注，新人入行，必定出現各種問題，也希望各位看官多多指教嘍。

從三個方面看：

它的層次結構是怎麼樣的？
它是如何保證體驗的一致性的？
它是如何幫用戶最快的達到使用目的的？

我的理解是將幾款優秀的 App 做一個競品分析。

在平時工作中，都會對自己業務的產品做一個競品分析，可以很好的了解產品的處境，一方面能快速了解業務，一方面了解競品的戰略、功能、差異點從而得出結論找到產品的切入點。

可以從五個層面去分析：

戰略層：產品定位、目標人群、盈利模式、用戶需求

範圍層和結構層一般是一同進行的：功能範圍

框架層：產品功能結構圖

表現層：視覺設計

在分析過程中，通過同一個維度，對比每個競品為什麼這麼設計，比如目標人群的分類、需求決定了範圍層的功能，對於功能對比每個競品的用戶體驗路徑是怎麼樣的，在路徑中有哪些點是值得學習的，哪些點做的不夠好。接著具體到頁面信息架構上，對於核心功能是否突出，主要行為路徑是否順暢，核心內容是否突出。最後視覺上品牌的基調怎麼樣的，為什麼主色選這個顏色，每個競品的視覺風格如何，營造了什麼氛圍。

That『s all.