《交互例推：好設(shè)計看得見》是我在體驗互聯(lián)網(wǎng)產(chǎn)品過程中對一些產(chǎn)品設(shè)計案例進行交互推導(dǎo)與分析的專題集合。

他山之石可以攻玉，關(guān)注這些好設(shè)計，給自己的設(shè)計思路帶來啟發(fā)，同時積累設(shè)計策略和學會設(shè)計總結(jié)，希望也能夠給你帶來一些思考。

01 網(wǎng)易云音樂關(guān)注按鈕設(shè)計小心機

網(wǎng)易云「歌手主頁」，其關(guān)注按鈕的不同狀態(tài)如下下圖所示，涵蓋3個狀態(tài)，分別是「未關(guān)注狀態(tài)」、「關(guān)注中狀態(tài)」、「已關(guān)注狀態(tài)」。

單單從這3種狀態(tài)的視覺狀態(tài)來判斷其可點擊性，第1個狀態(tài)很顯然是可點擊的（面狀填充按鈕），第2個很顯然是不可點擊的（加透明度呈現(xiàn)不可點擊），第3種的話就不太確定，看起來像可點擊又像不可點擊。

如果你的想法和我一樣，那么這種狀態(tài)的區(qū)分設(shè)計的很成功。因為對于產(chǎn)品而言，希望用戶關(guān)注歌手（活躍社區(qū)正行為），但不希望用戶取消關(guān)注，此時已關(guān)注狀態(tài)被設(shè)計成可點擊性較弱的樣式，用戶會以為這是不可點擊不懂該如何取消關(guān)注的從而一定程度上減少了用戶的取關(guān)行為，是不是有正中下懷的感覺，其實是可點的。

上述案例其他優(yōu)秀之處：

• 在你關(guān)注該用戶之后，歌單列表會展示一組歌手出來，讓此時聚焦關(guān)注行為的用戶乘勝追擊關(guān)注更多用戶
• 若用戶取消關(guān)注，會進行二次確認，從文案的內(nèi)容進一步“挽留”用戶，畢竟用戶看到取關(guān)后關(guān)注的天數(shù)也一起清空心里難免會有些難以割舍

最后，我們看下下圖，網(wǎng)易云音樂「我關(guān)注的歌手列表」頁里頭，取消關(guān)注的話需要點擊右側(cè)三點圖標后彈出取消框，然后再執(zhí)行取消操作。

「網(wǎng)易云音樂」我的歌手列表取消關(guān)注↑

為什么不直接在歌手右側(cè)放一個取消關(guān)注的按鈕呢？而是用上述比較曲折的方式，其目的就是減少用戶取關(guān)。

是不是感覺很小心機啊，哈哈。

02 來看一種“暴力彈窗”設(shè)計

先看下案例，點擊下圖的協(xié)議單選框，會觸發(fā)上述的彈窗。每份協(xié)議是3s的倒計時，倒計時完成才能點擊查看下一份協(xié)議，直到所有協(xié)議都點擊了已閱讀并確認，彈窗會自動關(guān)閉同時下圖的協(xié)議單選框才會勾選上。

協(xié)議單選框沒有勾選的話，就無法進入下一步流程，所以上述彈窗里頭的3份協(xié)議的確認按鈕你是不得不點的，是不是感覺到一絲邪惡的氣息。

點擊同意協(xié)議觸發(fā)彈出“暴力彈窗”↑

是不是“夠暴力”，但這是實實在在的業(yè)務(wù)需求，法務(wù)需要強制用戶閱讀協(xié)議，我們不能摁著用戶強迫他去閱讀協(xié)議上的條條框框，但是可以通過交互的手段讓用戶不得不“過目”這些協(xié)議。

在實際項目中，會經(jīng)常碰到用戶體驗和需求相平衡的案例，這個案例便是。

是否可以優(yōu)化？

• 強制協(xié)議彈窗也可以是全屏的形式，考慮到協(xié)議屬于長文本，完全可以以全屏的形式出現(xiàn)，提高用戶的閱讀體驗（可視范圍內(nèi)閱讀的內(nèi)容最大化）
• 閱讀到第幾份協(xié)議，可以在界面上進行標識，切記不要讓用戶思考！另外，使用這種彈窗的前提是強制用戶“過目”的文件不超過3份，每份文件停留的時間3s為宜，想一想，若用戶不得不停留10s以上的時間才能進入下一步，那早應(yīng)該火冒三丈了吧
• 回到單選框的文案設(shè)計上，該案例的文案是“同意《xx協(xié)議》《xx協(xié)議》《xx協(xié)議》”，將3個協(xié)議的名稱都平鋪開來了，如果協(xié)議的名稱很長，那就災(zāi)難了，文案可以精簡為同意《xx平臺支付相關(guān)協(xié)議》

在前面提到的業(yè)務(wù)需求背景下，如果是你，你會這樣設(shè)計嗎？

如果你有更好的設(shè)計方案，可以在下面留言。

03 喜茶點餐前訂單進度告知

「喜茶」點餐前告知訂單進度↑

現(xiàn)在很多飲品都采用在線點單的形式，比如喜茶。我們分析下用戶點單場景：

1. 客戶提前點單，時間往往較為充裕；
2. 客戶突然想喝，客戶可能趕時間也可能接受等待

將一個門店的訂單量進行分類，分類維度為最新下單用戶的等待時間。比如（下面的數(shù)據(jù)為假設(shè)數(shù)據(jù)并非真實值）：0-20杯為正常（最多10分鐘），20-100杯為一般等待（10分鐘至1小時），100以上為超級等待（1小時以上）。

我們看到案例截圖，當訂單量超過一定的值時，喜茶會將門店的訂單制作進度進行顯示。其目的是讓用戶有個心里預(yù)知，對于上述用戶場景二中的用戶可以自己根據(jù)自己可支配的時間選擇是否下單，所謂的把主動權(quán)交給客戶。

如果是我，我會將一般等待的訂單量作為是否顯示進度的閾值，另外如果時間可以進行預(yù)估，前端也將用戶預(yù)計要等待的時間顯示出來。

04 帶有一點微動效，是有趣的標簽欄

現(xiàn)在看到越來越多的App的標簽欄在點擊的時候加上了微動效，比如美團外賣、小黑魚等。

前面的案例介紹過《交互例推：好設(shè)計看得見（02）-鏈家App點擊底部標簽欄可以回到頁面頂部》，當頁面上拉到一定的高度時，首頁標簽欄會切換為Top圖標，承載回到頂部的功能。

美團外賣的首頁標簽欄同樣有該功能，首頁圖標和Top火箭圖標的過渡動畫銜接地很好。

以上通過微動效的形式增加了App的趣味性，屬于讓用戶“會心一笑”的設(shè)計亮點，可以在項目中進行參考借鑒。

05 IOS手勢-通過滑動實現(xiàn)快速選擇

IOS手勢-通過滑動來實現(xiàn)快速選擇↑

在移動應(yīng)用中，常用的手勢主要包含：點擊、滑動、拖拽和長按；而PC端的主要手勢則是：點擊、懸浮、拖拽。

本次案例看下IOS管理圖片的手勢功能：

• 點擊：單選照片
• 滑動：多選照片

試想下，如果不能通過滑動來快速多選某些照片，要用戶一個個點擊的話，太浪費時間了。

06 重力感應(yīng)應(yīng)用，和App進行趣味互動

如果你在好好住App中獲得過徽章，進到「我的」頁面你會不經(jīng)意間發(fā)現(xiàn)一個小驚喜，如錄屏所示，徽章會跟著手機的晃動而晃動，從空中掉入地面，有地心引力般，與地面碰撞的時候還會有彈跳的效果。

充滿驚喜感，初次體驗會不時把弄手機，很有趣味性。

但……

徽章的活動區(qū)域占據(jù)那么高的高度，浪費了空間利用，另外這種互動效果比較“一次性”，初次體驗的用戶會被吸引，等“過完癮”之后就覺得不稀奇了，之后的作用就比較微不足道了。

我的建議是可以酌情保留該趣味互動，如若保留的話，可以適當縮短徽章活動區(qū)的高度，給重要的信息（比如用戶主頁）空出更多的展示空間。

07 新建地址交互方案總結(jié)

「菜鳥驛站」地址智能識別↑

「菜鳥驛站」地址輸入聯(lián)想↑

經(jīng)過對「京東」、「淘寶」和「菜鳥驛站」應(yīng)用新建地址的交互體驗，最后覺得「菜鳥驛站」更加智能化和快速便捷。

用戶新建地址有兩種場景，一種是手動輸入熟悉的地址，比如家里的公司的地址；另一種是寄東西給他人，這種場景他人往往會先將地址發(fā)給我們，這時我們就希望能夠直接復(fù)制到頁面上一鍵生成。

「淘寶」不能對地址進行智能識別，而「京東」地址識別又不夠智能?！覆锁B驛站」除了將用戶復(fù)制粘貼的內(nèi)容智能識別成姓名手機號地址以外，還可以對圖片上的地址信息進行識別。

另外，在地址欄手動輸入地址后進行輸入聯(lián)想（相關(guān)地址聯(lián)想）「菜鳥驛站」體驗最佳，大家可以自行體驗下。

是否可優(yōu)化？

在用戶進入新建地址頁面時進行復(fù)制識別，若讀到用戶已經(jīng)復(fù)制了地址，可進行對話框提示用戶是否進行粘貼，若是，將結(jié)果智能識別至頁面。

若在「菜鳥驛站」按原始操作來看，用戶需要三步走完：

1. 點擊智能錄入地址按鈕
2. 點擊輸入框粘貼地址
3. 點擊右下的確認圖標（長得像回車鍵）提交給系統(tǒng)進行識別

而按優(yōu)化方案來看，一步即可?！妇〇|」有采取該方案，如下錄屏所示：

總結(jié)

1. 用戶新建地址更加智能化，比如智能識別地址、地址輸入聯(lián)想等；
2. 表單填寫，若存在用戶復(fù)制文本粘貼的場景，考慮加入系統(tǒng)自動識別。

08 列表項設(shè)置前后狀態(tài)案例

「荔枝App」賬號設(shè)置↑

列表項常用于設(shè)置中，看到本次案例截圖，「綁定賬號」、「手機綁定」、「實名認證」均存在“未完成”或“已完成”的狀態(tài)。排布策略為“左側(cè)設(shè)置主題，右側(cè)設(shè)置狀態(tài)標識”。

比如：

• 綁定賬號：已綁定的賬號類型圖標正常顯示，未綁定的賬號類型圖標置灰顯示，這樣用戶就不需要進入下個頁面才知道哪些賬號已被綁定
• 手機綁定：未綁定用文案加警示圖標，已綁定則是文案加成功圖標
• 實名認證：同上

09 有復(fù)制需求的文本可進行區(qū)分

本次案例不說廢話，在列表項清單中，對于有復(fù)制需求的文本內(nèi)容，往往會設(shè)計上可點擊狀態(tài)（如品牌色顯示文案+復(fù)制圖標）。

如上錄屏中，用戶往往需要訂單編號查詢訂單信息或需要物流單號查詢物流狀態(tài)，所以這里用戶直接點擊訂單號或快遞單號即可完成復(fù)制，同時App通過toast告知用戶“已復(fù)制到剪切板”。

10 你在綠洲App可以懶到評論都不用輸？

微博“嫡子”綠洲，是一個比較小眾的社交App，主打生活分享。

在首頁會自動推動你所關(guān)注的博主分享的信息流，快速瀏覽的過程中可以對某分享內(nèi)容進行評論，「綠洲」WOW按鈕點擊后系統(tǒng)會自動生成一段文案，再次點擊WOW可以快速切換文案內(nèi)容。

從自動生成的評論來看，都是正向積極的內(nèi)容，后臺應(yīng)該有一個WOW評論庫，用戶點擊后隨機選取一則評論內(nèi)容進行顯示。

從用戶體驗來說，點擊即可進行評論，不需要輸入內(nèi)容，快速又方便。

但從用戶意向來說，真的有意向進行評論的用戶會選擇該種方式嗎？畢竟自動生成的評論內(nèi)容模版統(tǒng)一，這類評論在被評論者看來有那么一點“無誠意”。

簡單看了一些熱門分享的評論內(nèi)容，大多是用戶自主輸入發(fā)送的內(nèi)容，通過WOW發(fā)送的評論少之又少。

當然，如果是自己的產(chǎn)品，可以通過數(shù)據(jù)來判斷“WOW”功能是否真的太雞肋了。

寫在后面

以上觀點帶有個人主觀性，如果你有建議或者更好的設(shè)計方案，請指教。

#相關(guān)閱讀#

《交互例推：好設(shè)計看得見（1）》

《交互例推：好設(shè)計看得見（2）》

作者：辛小仲；一名正在成長的交互設(shè)計師，公眾號：辛小仲。

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

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