本文由衣柜里的“換一換”發(fā)散到app的“換一換”，探究“換一換”的本質(zhì)和特點(diǎn)。

換一換是移動(dòng)應(yīng)用app中經(jīng)常會(huì)用到的操作，時(shí)間久了也就形成了固定的形式。但設(shè)計(jì)沒有終點(diǎn)，本文希望更加深入去探討換一換的本質(zhì)。

一、衣柜里的換一換

我們平時(shí)換一件衣服是怎么樣的呢？

下面是一個(gè)流程:

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

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

由于“換”包含了很多概念，于是在開篇之前我想澄清一個(gè)概念上可能會(huì)混淆的點(diǎn)：“換一換”的范圍包括哪些？

本文中的“換一換”，包括“切換”、“刷新”、“更換”等。凡是操作后會(huì)引起當(dāng)前內(nèi)容變化的，都在文中作為“換一換”討論。

二、我們?yōu)槭裁匆獡Q一換

• 當(dāng)我們?yōu)g覽新聞app的時(shí)候，看厭了現(xiàn)有的內(nèi)容，可以換一換。
• 當(dāng)我們聽音樂，不喜歡這首，可以換一換。
• 當(dāng)我們不喜歡現(xiàn)在的桌面壁紙，我們可以換一換。

人是追求新鮮感的動(dòng)物，換一換的機(jī)制給予整個(gè)系統(tǒng)翻篇換血的機(jī)會(huì)，使得用戶保持對(duì)系統(tǒng)的好奇，持續(xù)挖掘。

三、一般形態(tài)的換一換

一些內(nèi)容，加上一個(gè)“換一換”的按鈕，點(diǎn)擊就可以更換了，這是基本的形式。

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

圖2.一般形態(tài)的換一換

最近看了不同的產(chǎn)品，重新自己思考這個(gè)課題，發(fā)現(xiàn)換一換還是有可創(chuàng)新的地方的。

比如：qq錢包里面的優(yōu)惠券，需要支付一定的金額才可以更換，這樣就提高了門檻。提高門檻的同時(shí)，使得用戶會(huì)更加慎重地進(jìn)行考慮，同時(shí)更加珍惜更換的結(jié)果。

圖3.qq錢包換一換的設(shè)計(jì)

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

為了區(qū)分這些場景，找到這些場景的使用規(guī)律，我按照不同的維度搜集了一些競品，并進(jìn)行了分類。

在分類的過程中，我發(fā)現(xiàn)有一些換一換的特點(diǎn)：

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

被動(dòng)輸入的，例如資訊類的應(yīng)用，就會(huì)以快速的換一換為主。這種換一換不可逆轉(zhuǎn)，只能往后繼續(xù)推薦，所以是面向未來的換一換。

例如，圖4右側(cè)的知乎中，點(diǎn)擊“換一換”可以更換一批感興趣的人。而如果是用戶輸入為主的應(yīng)用，比如瀏覽器，用戶需要主動(dòng)輸入大量的信息，去檢索他們想要的內(nèi)容。那么就會(huì)提供追溯的歷史，用戶可以尋找過去的蹤跡，如圖4左側(cè)——百度的簡單搜索，點(diǎn)擊按鈕可以切換不同的瀏覽頁面。

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

五、換一換的手勢(shì)

換一換的操作方向會(huì)影響用戶的閱讀體驗(yàn)。

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

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

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

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

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

六、主動(dòng)or被動(dòng)

換一換雖然聽上去是一個(gè)用戶主動(dòng)的操作，但設(shè)計(jì)的時(shí)候也可以想一想：

• 這個(gè)內(nèi)容是不是真的需要用戶主動(dòng)來換一換呢？
• 如果可以的話，系統(tǒng)能不能幫用戶把這個(gè)事情做了呢？

比如圖6的右圖，一些更新比較快的新聞資訊、優(yōu)惠活動(dòng)，有時(shí)候也可以使用輪播自動(dòng)更新的方式呈現(xiàn)給用戶。

主動(dòng)的換一換給予用戶選擇權(quán)，使用戶感覺到對(duì)內(nèi)容的掌控。而被動(dòng)的換一換則給予用戶緊迫感，吸引用戶去點(diǎn)擊。

雖然平時(shí)我們對(duì)換一換的理解更多的是“主動(dòng)點(diǎn)擊”的換一換，但系統(tǒng)自動(dòng)變化的形式是否也是可以的呢？

比如優(yōu)惠券，如果在展示的時(shí)候是自動(dòng)變化的，是否就能產(chǎn)生緊張感，吸引用戶更快去點(diǎn)擊呢？

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

七、如何設(shè)計(jì)更好的換一換？

開頭提到了衣柜，于是我從衣柜開始發(fā)散。

怎么樣才能更好地?fù)Q衣服？

下面是一張換一換的細(xì)分流程圖：

圖7.衣柜與app的換一換細(xì)分流程圖

于是，針對(duì)細(xì)分的流程節(jié)點(diǎn)，我產(chǎn)生了一些構(gòu)想，供大家參考。可能并不一定能實(shí)現(xiàn)，因?yàn)檫€要結(jié)合業(yè)務(wù)和實(shí)際考慮，但也許可以擴(kuò)展一些思路。

1. 預(yù)覽與前饋

因?yàn)閾Q一換是不可預(yù)期的，那么也許可以提供一個(gè)預(yù)覽的小窗口，幫助用戶去預(yù)覽接下來會(huì)發(fā)生的事情，減少不確定的感覺。

圖8.換一換的預(yù)覽機(jī)制

2. 趣味的圖標(biāo)與文案

換一換一般是使用循環(huán)的圖標(biāo)表示，但我們也可以加一點(diǎn)微創(chuàng)新，比如熱門的新聞，可以用火苗圖標(biāo)，而對(duì)于地址，可以用地點(diǎn)圖標(biāo)等。

圖9.帶有不同圖標(biāo)示意的換一換

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

?圖10.換一換的不同文案

3. 有門檻的換一換

人類是糾結(jié)的動(dòng)物，太容易得來不會(huì)珍惜，太難又會(huì)容易放棄，因此把握好換一換的度是比較重要的。

比如用戶可以用自己的積分，或者經(jīng)過一定時(shí)間的等待，又或者完成一些簡單的任務(wù)進(jìn)行換一換，這樣換來的結(jié)果轉(zhuǎn)化率可能更高。

圖11.為換一換設(shè)置不同門檻

4. 更換的控制感

更換的時(shí)候的，如果系統(tǒng)不是那么精準(zhǔn)，可以適當(dāng)提供用戶反饋的機(jī)制，這樣得到的結(jié)果會(huì)更加精準(zhǔn)。這樣也使得用戶對(duì)整個(gè)更換系統(tǒng)的有一定的了解，更加放心地去更換。

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

5. 內(nèi)容出現(xiàn)的儀式感，回退的機(jī)制

更換之后，內(nèi)容的出現(xiàn)可以帶有一些巧思。畢竟是新的內(nèi)容，可以賦予一種登臺(tái)的、新鮮的感覺，給人耳目一新之感。

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

比如上次的內(nèi)容可以堆疊在下方，通過手勢(shì)或者按鈕返回。

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

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

當(dāng)然，這些內(nèi)容不是一次全部都要出現(xiàn)。只是作為參考與啟發(fā)，隨著業(yè)務(wù)屬性的不同，不妨試試在每個(gè)節(jié)點(diǎn)思考一下可以加點(diǎn)什么，使得換一換更加細(xì)致可感。

八、小結(jié)

本文針對(duì)平時(shí)常見的“換一換”作了一些發(fā)散和思考。

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

作者：交互小怪獸，微信公眾號(hào)：交互小怪獸

本文由 @交互小怪獸 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議