關於移動App「換一換」的發散和思考

本文由衣櫃裡的「換一換」發散到app的「換一換」，探究「換一換」的本質和特點。

換一換是移動應用app中經常會用到的操作，時間久了也就形成了固定的形式。但設計沒有終點，本文希望更加深入去探討換一換的本質。

一、衣櫃裡的換一換

我們平時換一件衣服是怎麼樣的呢？

下面是一個流程:

圖1.衣櫃使用流程示意圖

人是喜歡新鮮的動物，換衣服如此，與世間的物體交互也是如此。

由於「換」包含了很多概念，於是在開篇之前我想澄清一個概念上可能會混淆的點：「換一換」的範圍包括哪些？

本文中的「換一換」，包括「切換」、「刷新」、「更換」等。凡是操作後會引起當前內容變化的，都在文中作為「換一換」討論。

二、我們為什麼要換一換

• 當我們瀏覽新聞app的時候，看厭了現有的內容，可以換一換。
• 當我們聽音樂，不喜歡這首，可以換一換。
• 當我們不喜歡現在的桌面壁紙，我們可以換一換。

人是追求新鮮感的動物，換一換的機制給予整個系統翻篇換血的機會，使得用戶保持對系統的好奇，持續挖掘。

三、一般形態的換一換

一些內容，加上一個「換一換」的按鈕，點擊就可以更換了，這是基本的形式。

這似乎也滿足了用戶的基本需求了？

圖2.一般形態的換一換

最近看了不同的產品，重新自己思考這個課題，發現換一換還是有可創新的地方的。

比如：qq錢包裡面的優惠券，需要支付一定的金額才可以更換，這樣就提高了門檻。提高門檻的同時，使得用戶會更加慎重地進行考慮，同時更加珍惜更換的結果。

圖3.qq錢包換一換的設計

但，如果每次我想看一個新聞，我就要付錢，豈不是很貴？因此換一換也是有它適用的場景的。

為了區分這些場景，找到這些場景的使用規律，我按照不同的維度搜集了一些競品，並進行了分類。

在分類的過程中，我發現有一些換一換的特點：

四、面向過去與未來的換一換

被動輸入的，例如資訊類的應用，就會以快速的換一換為主。這種換一換不可逆轉，只能往後繼續推薦，所以是面向未來的換一換。

例如，圖4右側的知乎中，點擊「換一換」可以更換一批感興趣的人。而如果是用戶輸入為主的應用，比如瀏覽器，用戶需要主動輸入大量的信息，去檢索他們想要的內容。那麼就會提供追溯的歷史，用戶可以尋找過去的蹤跡，如圖4左側——百度的簡單搜索，點擊按鈕可以切換不同的瀏覽頁面。

圖4.(左)簡單搜索，(右)知乎

五、換一換的手勢

換一換的操作方向會影響用戶的閱讀體驗。

如果方向與閱讀瀏覽的順序一致，會呈現更多的內容以及使得閱讀更加順暢。如果方向與閱讀順序不一致，則需要用戶停留，進行思考。

如圖5的最左邊，是可以左右撥動更換卡片的。中間的新聞app則需要下拉刷新進行更換，右圖的音樂app則是通過左右滑動進行更換。

相比較而言，中間app的自動切換方式與閱讀順序一致，用戶只需要一直下滑，就可以持續刷新更換的信息。而如果左右滑動或者撥動，則會讓用戶停下來思考「我是不是真的要切換到下一首音樂呢？「我是不是確定不需要這一張卡片了呢？」。

當然並不一定切換越快就是越好的，比如新聞流，更新速度快、有時效性，快速更換便於用戶閱讀。但一些精品的內容——比如推薦關注的人、沉浸式的音樂，我們更期待看到用戶多多地駐足，去關注，去享受。那麼快速的切換，就不太合適了。

圖5.(左)即刻，(中)今日頭條,（右）qq音樂

六、主動or被動

換一換雖然聽上去是一個用戶主動的操作，但設計的時候也可以想一想：

• 這個內容是不是真的需要用戶主動來換一換呢？
• 如果可以的話，系統能不能幫用戶把這個事情做了呢？

比如圖6的右圖，一些更新比較快的新聞資訊、優惠活動，有時候也可以使用輪播自動更新的方式呈現給用戶。

主動的換一換給予用戶選擇權，使用戶感覺到對內容的掌控。而被動的換一換則給予用戶緊迫感，吸引用戶去點擊。

雖然平時我們對換一換的理解更多的是「主動點擊」的換一換，但系統自動變化的形式是否也是可以的呢？

比如優惠券，如果在展示的時候是自動變化的，是否就能產生緊張感，吸引用戶更快去點擊呢？

圖6.(左)喜馬拉雅，(右)小米資訊

七、如何設計更好的換一換？

開頭提到了衣櫃，於是我從衣櫃開始發散。

怎麼樣才能更好地換衣服？

下面是一張換一換的細分流程圖：

圖7.衣櫃與app的換一換細分流程圖

於是，針對細分的流程節點，我產生了一些構想，供大家參考。可能並不一定能實現，因為還要結合業務和實際考慮，但也許可以擴展一些思路。

1. 預覽與前饋

因為換一換是不可預期的，那麼也許可以提供一個預覽的小窗口，幫助用戶去預覽接下來會發生的事情，減少不確定的感覺。

圖8.換一換的預覽機制

2. 趣味的圖標與文案

換一換一般是使用循環的圖標表示，但我們也可以加一點微創新，比如熱門的新聞，可以用火苗圖標，而對於地址，可以用地點圖標等。

圖9.帶有不同圖標示意的換一換

另外在文案上，換一換也可以用比較吸引人的親切話語來表達，這樣就可能可以更加吸引讀者去點擊。

 圖10.換一換的不同文案

3. 有門檻的換一換

人類是糾結的動物，太容易得來不會珍惜，太難又會容易放棄，因此把握好換一換的度是比較重要的。

比如用戶可以用自己的積分，或者經過一定時間的等待，又或者完成一些簡單的任務進行換一換，這樣換來的結果轉化率可能更高。

圖11.為換一換設置不同門檻

4. 更換的控制感

更換的時候的，如果系統不是那麼精準，可以適當提供用戶反饋的機制，這樣得到的結果會更加精準。這樣也使得用戶對整個更換系統的有一定的了解，更加放心地去更換。

圖12.可供用戶選擇的換一換

5. 內容出現的儀式感，回退的機制

更換之後，內容的出現可以帶有一些巧思。畢竟是新的內容，可以賦予一種登臺的、新鮮的感覺，給人耳目一新之感。

另外，如果更換的內容用戶不喜歡，還是有可能回退的。這個時候稍微保留上一次更換的痕跡，給予用戶返回的操作，可能也可以提升用戶的體驗。

比如上次的內容可以堆疊在下方，通過手勢或者按鈕返回。

圖13.出場儀式感，飄舞的彩帶

圖14.用戶上次更換的內容沒有直接消失，而是疊在下方

當然，這些內容不是一次全部都要出現。只是作為參考與啟發，隨著業務屬性的不同，不妨試試在每個節點思考一下可以加點什麼，使得換一換更加細緻可感。

八、小結

本文針對平時常見的「換一換」作了一些發散和思考。

作為設計師，希望鞭笞自己從設計理所當然的舒適圈中跳出，去嘗試更多的東西，也與大家分享。

 

作者：交互小怪獸，微信公眾號：交互小怪獸

本文由 @交互小怪獸 原創發布於人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基於CC0協議

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}