如何分析學習一款產品的交互設計

前言

不論對於交互設計初心者還是已經有經驗的設計師、產品經理，分析學習優秀APP都是提高姿勢水平的有效方式。

然而分析的方法將影響到我們能從中吸收多少養分。就像面對一隻大閘蟹，「武吃」固然過癮，用蟹八件「文吃」卻更能品得滋味；

瀏覽了許多文章後，發現對於「如何從產品經理視角分析一款APP」已經有了許多優秀的思路和分析報告，但具體到交互設計部分時往往較簡略，缺乏系統性。因此覺得可以整理一套自己適應的分析方法，讓拆解的過程有跡可循；

這一方法可以簡稱為「GIFT」，共分四步：

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

一、明確目的（Goal）

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

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

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

1. 針對性的了解競品的設計細節與變化；

2. 了解當前設計趨勢，發掘有價值的設計創新；

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

二、歸納框架（Framework）

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

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

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

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

例如：

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

三、模擬任務（Task）

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

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

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

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

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

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

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

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

2. 點擊調整Playback和Effects時，可以直接在浮動菜單中調整，點擊其他區域即可退出。不會跳到其他頁面，減少了額外的認知負擔；
3. 播放按鈕在播放狀態時，會出現實時的音量柱，指示當前狀態巧妙解決了許多人對於「按鈕應當表達操作還是狀態」的糾結；
4. Overcast會記住每一條單獨節目的播放進度，讓用戶能立即找回之前的節奏；

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

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

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

1. 極簡的布局中，Overcast讓少數幾個按鈕擁有巨大的熱區，減少了對手指精準定位的需求，利於通勤等移動狀態下的快速操作；
2. 點擊或向上輕掃封面圖，下方的節目信息會自動定位到最合適的位置，減少了手指滾動需求；

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

4. 快進/退30S按鈕在連續點擊時，會自動加大幅度，最高達到每次3分鐘。真是機智的設計；
5. 睡眠定時器採用按鈕累加時間的形式，相比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）；

在此作為一份2017新年GIFT分享給大家，希望能給其他小夥伴一些啟發，期待大家共同交流進步，一起創造更美的產品！?(＾?＾●)?

推薦閱讀：