郝允妮的優質必買清單

作者分享一些App的令人印象深刻的交互體驗，希望能夠給同學們一些啟發。

今天和大家聊一聊，我在日常體驗不同App的時候發現的一些好的體驗。

主要是想通過這些點給設計師一些啟發，思考工作中可以從哪些緯度去打磨我們的產品。

01 美團標簽提示

當用戶在首頁向下瀏覽時，當瀏覽一些店家后，如果還沒有發現想吃的餐廳時，頂部會提示用戶：糾結吃啥點這里，引導用戶點擊“發現好菜”，長時間的瀏覽沒有行動時，可以引導用戶關注其他的信息。

02 美團外賣下拉刷新

下拉刷新融入品牌logo和吉祥物是常見的方式，而美團則賦予更深的內涵。

用戶下滑刷新時，小袋鼠在送外賣路上，會飛速地前行，寓意美團的送餐速度，遇到紅燈就會停住，寓意美團的騎手遵守交通安全。小細節可以改善外界對美團外賣小哥飛速送外賣時，瘋狂亂竄不守規矩的印象，

小細節，也可以裝下很大的內涵。

03 美團外賣提交訂單提示

如用戶在提交訂單時沒有點主食，會提示用戶是不是忘記點主食了。結合用戶場景和常識，提供貼心的防錯提示，設計上用底部動作欄的交互樣式讓用戶快速添加，也防止了用戶的外跳，可以在當前入口快速添加主食。

場景結合常識，提供防錯機制。

04 美團金剛區引導

如用戶所在城市未開通打車、單車服務時，會在首頁icon上做視覺提示，用戶點擊會出現彈窗并帶有詳細說明和引導，同時用戶也可選擇“移除服務”移除無用的功能，與此同時移除時可以讓其他功能入口得到更多曝光。

用戶遇到消極狀態或失敗等情況時，應當給用戶詳細的說明以及引導。

05 支付寶輸入框交互

用戶在對話窗口輸入數字后，會出現氣泡提醒，提醒用戶是否需要轉賬。在特定情況下為用戶提供防錯機制，同時又為用戶提供快捷的轉賬入口，這一切都基于產品屬性和對用戶行為的預判。同樣的功能

不僅要知道自家產品定位，還需要了解用戶對自家產品的定義是怎樣的。

06 支付寶輸入框

聊天窗口，可以點擊底部輸入框內的轉賬，快速進行轉賬，根據產品屬性為用戶前置常用的操作。

結合用戶常用操作，可以考慮前置用戶常用的功能或操作。

07 微信安全提示

在“收付款”頁截屏時，會提示用戶保護好二維碼，以防泄漏。

信息敏感相關頁面，可以考慮提供安全保護提醒。

08 微信截屏引導

在“二維碼收款”頁截屏時，會出現彈窗并引導用戶將收款二維碼保存至手機。

用戶在不同的頁面截屏，可能會有不同的目的，不同的頁面可以設置不同引導。

09 微信朋友圈設置權限

刷朋友圈時，朋友圈總是充斥著各種微商，或不想看到一些人的朋友狀態，但又不好意思刪除時，則可長按頭像“設置權限”選擇不看ta的動態。

充分考慮了用戶在當前場景可能產生的情緒變化，分析用戶情緒可能產生的潛在操作行為。

10 微信讀書左滑交互

閱讀到最后時，可以繼續左滑退出當前閱讀。利用用戶習慣性左滑翻頁的交互手勢，自然地完成退出閱讀操作，一切都是那么絲滑。

利用流程中用戶熟悉或使用過的手勢，可以讓體驗更一致。

11 QQ截圖引導

如在QQ應用內截圖，優先引導用戶將截圖發送給QQ好友，目的是讓用戶優先使用qq完成本次發送，也可以防止用戶跳出，也可點擊“分享”選擇分享至自家的其他產品中。

結合自身產品社交屬性，改變常規截屏交互體驗。

12 脈脈文案定制

添加好友時根據關系屬性來個性化定制特定打招呼文案。

關系的不同，直接影響對話內容的不同。

13 脈脈文章引導

在脈脈閱讀文章時，如閱讀到底部時，會出現彈窗引導用戶將文章推薦給同行，通過這種方式促進用戶參與感，同時讓作者文章得到更多的曝光。

在合適的時機引導用戶完成產品商業目的，會降低用戶被打斷的感受。

14 蘋果手機鍵盤

手小的用戶在單手操作較大屏幕手機時，可以選擇讓鍵盤靠左或靠右，無論左手持機還是右手持機都可以很方便的進行操作。

利用用戶左右手的操作情況，未來也有可能針對頁面進行個性化設計。

15 蘋果信息分類

ios13.3更新后，對信息進行了分類處理，更新后可快速從眾多垃圾信息中找到“已有聯系人”信息，再也不用擔心大海撈針了。

當面對海量信息時，用戶會不自覺的對信息進行分類，分類可以讓用戶便于理解與管理。

16 哈咯單車故障報修

哈嘍單車，在故障報修時，用圖片替代文字，讓用戶快速并直觀的選擇單車的故障位置。

比起文字，圖片可以讓用戶快速獲取信息。

17 閃送地址復制交互

使用文本文本識別時，只需要在其他應用內復制文本，回到當前頁面后，系統會將剛剛粘貼的文本自動粘貼到輸入框內才，減少了用戶的操作成本。

結合用戶上一步操作，預判用戶下一步可能的操作。

18 Behance瀏覽體驗

在瀏覽作品到底部時，如果沒有更多推薦作品時，用戶可以繼續上滑退出當前瀏覽，結合用戶瀏覽路徑為用戶提供快速的返回方式，學習成本低。

可在用戶瀏覽信息時，結合用戶當前瀏覽進度，預判用戶下一步可能的操作。

19 餓了么錄入交互

新增地址時，點擊“電話”一項時，會出現氣泡提示用戶自己的號碼，用戶可點擊快速完成電話號碼錄入，相比手輸和通訊錄選擇，更加快捷。

結合產品屬性，優先選擇本機手機號。

20 夸克瀏覽器搜索交互

進入夸克瀏覽器后，可以拇指下滑調起鍵盤輸入內容，通過快捷手勢“滑動”降低用戶操作成本。

很多時候，滑動比點擊要高效的多，巧用手勢可以起到四兩撥千金的作用。

21 Dropbox照片選擇交互

當用戶在Dropbox選擇照片時，可以多個手指同時點擊選擇多個照片，下面中間圖即是我用五個手指點選的五張圖，右側圖是選中后的效果。

這種交互方式很少見（在微信IOS端中見到過，當時只是好奇，所以在消息列表中隨意用多個手指一起向左滑動，效果你可以自己試試）Dropbox的這種選擇邏輯可以滿足選擇目標照片多張不相鄰的情況。

其實如果和蘋果的選擇邏輯結合，會更好，蘋果系統相冊在選擇時有三種選擇邏輯，分別是點選、橫向滑動選擇、框選滑動選擇。

我認為，可以將Dropbox和蘋果做結合結，不同選擇方式滿足用戶不同情況下的不同交互手勢：

• 點選（滿足選擇單張或不相鄰的多張圖片）
• 多指點選（滿足選擇多張不相鄰的多張圖片）
• 橫向滑動選擇（滿足選擇少量相鄰的圖片）
• 框選滑動選擇（和電腦中的框選一樣，可以快速滑動框選大量多張相鄰的圖片）

22 Twitter相冊前置

Twitter發布狀態時，通過對相冊入口的前置，可以快速添加近期的照片，可以向左滑動選擇更多照片，當滑動到最后時，會有調起相冊的入口，方便選擇更早的照片。通過這種方式可以讓用戶快速添加照片，也可以促進更多的用戶在發狀態時配圖。

23 微信二維碼識別

微信版本更新到7.0.9后，無論是在朋友圈還是在其他地方看到二維碼時候，只需要打開二維碼，長按就可以快速識別出二維碼的名片（底部動作欄喚起后，會有一個識別名片的過程，這個過程很快，幾乎看不到，圖二還是我在網差的情況下出現的）識別后可以直接打開對方名片并添加好友。

24 Twitter二維碼

Twitter在分享二維碼時，用戶可以點擊二維碼更換不同顏色，一共是五種顏色，用戶可以挑選自己喜歡的顏色并分享給朋友，滿足用戶個性化的同時，也區別其他黑色二維碼給人的嚴肅感。

25 Twitter照片選擇

Twitter在發文選擇照片時，可直接點擊單張圖片整個區域選中照片，當需要預覽或編輯圖片時，可點擊右下角的🖌️實現編輯和預覽。這種圖片的選中方式，再也不用擔心選擇照片時不小心卻點開了預覽，也不用在小心翼翼點擊右上方的⭕️區域了。

可能有人會覺得這樣做弱化了編輯和預覽功能，我的建議是：如果你的產品沒有對圖片的再編輯功能，可以選擇這種方式。如果你的產品有預覽也有編輯功能（比如微信）建議還是使用這種方式，因為我認為預覽和編輯都是低頻的操作，先說預覽，首先用戶在選擇時可以通過縮略圖識別是哪張照片，再說編輯，編輯本身就是低頻操作。

26 滴滴地址防錯提示

當在滴滴輸入目標地點時，如果輸入的地點與其他城市的地點高度相似時，會在輸入框下面用提示框提醒用戶仔細核實地址。之所以提示框會特別明顯，因為如果用戶沒有發現地址存在相似問題時，選擇一個錯誤的地址后，會增加用戶的無用操作。

27 微信表情

這是微信前幾次改版，改動主要有幾個點：

1. 增加了下面圖一中紅色的區域，也就是增加了表情的標簽導航，可以快速切換不同的表情類型，這么做也是為了給用戶提供更豐富表情選擇；
2. 將左右翻頁的交互改成上下滑動的交互方式，也就是圖二；
3. 當用戶給好友發送表情時，如選擇了表情面板偏下的表情并發送后，如果用戶再與其他任意好友聊天時，點擊表情時，系統會定位用戶上一次發送表情時的位置。

以上三個點，只有第二點改版算是讓用戶比較爽的（因為上下滑動的交互成本是要比左右滑動或翻頁成本要低的），第一和第三點都存在一些問題。

先說第一點的問題如下圖，改版后整個表情的區域增高了。當然，增高擴大了表情的展示區域，用戶在不需要滑動就可以看到更多的表情。

但有一個非常高頻的場景體驗有一些差，如下圖，就是當用戶發送完表情后，再次點擊圖中A區域，再次輸入文字時，拇指在點擊A點就有些遠了，當然一個七尺男兒手指肯定沒問題，大致可以忽略不計。但是女孩的手呢，可以問問身邊的女性朋友在使用時候是否存在這個問題。

總結

不同場景下用戶會產生不同的情緒變化，設計師可以根據用戶情緒分析出用戶可能產生的潛在操作。

結合用戶所處流程、步驟、頁面，在恰當的時機，為用戶提供相應內容及功能；了解用戶前一個操作，和下一個可能的操作，為用戶提前準備相關信息和操作。

本文由 @Tanruy 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協議