起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識交互例推：好設計看得見（1）
《交互例推：好設計看得見》是我在體驗互聯網產品過程中對一些產品設計案例進行交互推導與分析的專題集合。
他山之石可以攻玉，關注這些好設計，給自己的設計思路帶來啟發，同時積累設計策略和學會設計總結，希望也能夠給你帶來一些思考。
01 PC端有道云筆記批量快捷操作
PC端有道云選中筆記區分2種場景，一種是單選筆記，另一種是多選筆記。
結合用戶實際應用場景給出相應的交互設計策略。
1. 單選筆記
單選筆記的場景對應對該筆記進行編輯。
2. 多選筆記
多選筆記的用戶場景多是需要批量移動或刪除，因此當選中筆記>1時，默認出現快捷按鈕。
02?美團點外賣備注快捷標簽
美團點外賣可選擇快捷標簽↑
沒錯，用戶都是“懶”的，我們時刻在想如何讓用戶在體驗產品的時候感覺到方便，其中一種方式就是減少用戶操作。
美團外賣提交訂單之后用戶可以填寫備注內容，快捷標簽能夠讓用戶不用填寫直接點擊標簽提交即可。
快捷標簽不可能完全擊中100%用戶的填寫內容，通過收集用戶填寫的備注內容進行文本分析，找出占據絕大比例的用戶會填寫的內容方向，提取關鍵詞，以此確定快捷標簽的內容。
延伸思考：
快捷標簽不宜過多，過多的內容會增加用戶辨別標簽內容的時間。
- 標簽越多，達不到用戶能夠快速篩選標簽的目的，反而達不到「快捷」目的
- 標簽也不宜過少，太少的話怎么擊中那個「大比例」
03 微信讀書書架為空引導
微信讀書書架為空引導↑
一句話文案希望引起用戶共鳴，另外附上找書按鈕方便用戶快捷操作。
04?鏈家聊天助手-引導用戶互動
發現越來越多的App越來越便捷，體驗越來越好，譬如上期所說的「美團點外賣備注快捷標簽」，比如「鏈家App聊天助手」。
參見案例，鏈家App的聊天助手「提問懸浮按鈕」有以下優秀之處：
1. 房源App的提問懸浮按鈕“如影隨形”，跟著頁面滾動，既不打擾用戶當前的瀏覽行為，也讓用戶注意到該快捷按鈕的存在
2. 當用戶瀏覽完當前房源，了解了房源情況后，若對該房源有興趣，那此刻的「進一步溝通」的欲望是最強烈的時候，而「提問懸浮按鈕」的存在讓用戶可以隨手一問
3. 提問的快捷問題也是契合用戶最關心問題，同時「新房」、「新盤」、「租房」、「二手房」等的快捷提問問題也因用戶關心的點不同而進行了差異化設計，如下所示：
二手房快捷提問問題↑
新房快捷提問問題↑
新盤快捷提問問題↑
租房快捷提問問題↑
4. 提交提問之后有3處反饋，分別是：提交的問題消失、toast提示、消息數量+1
05 蘑菇租房幫我找房長表單填寫案例
蘑菇租房App的幫你找房功能，用戶填寫提交一部分信息后，App可以根據用戶的愛好推薦房源。
從信息內容來看，需要提交的內容含：價格范圍、居住位置、出租類型、房屋戶型、特殊需求、入住時間。
如果全部內容放在一個長表單頁里頭填寫，用戶會覺得太多，該App的設計策略是：
- 分成2頁，同時通過右上角的頁面進度告知用戶當前頁/總頁數，用戶有心理預知
- 每頁的內容控制在手機一屏可以看全所有內容，減少用戶操作（頁面上下滾動）
- 按鈕統一放在頁面底部，保證瀏覽順序的順暢（用戶瀏覽和填寫的順序是從上到下的，填完之后自然點擊按鈕提交）
06 微信讀書互動方式-文章注解標注
微信讀書文章注解列表↑
文章某些句子若添加了注釋的內容（讀者自行添加），讀者都可以點擊查看（懸浮窗形式，微信讀書App定義了很多新的組件，有些真的不知道要怎么叫?。?/p>
懸浮窗的注釋列表，每個注釋的正文限定最多展示4行，點擊注釋進入到該注釋，可進行轉發、收藏和評論等操作。
懸浮窗的關閉圖標，放在了屏幕的左下角的，大多用戶左手握住手機閱讀（右手較為少數），左下角這個位置便于點擊。
07 iOSApp圖標長按手勢更新
手勢動作的更新會改變用戶的習慣和認知，所以輕易不更新，更新的話要考慮足夠周全，需要注意的點有：
1. 手勢是否符合用戶認知
目前的手勢動作如下：
- 長按App圖標，觸發快捷操作窗口
- 長按App圖標并移動，觸發App排列管理
上面2種手勢我認為都是合理的，手勢2的話直接覆蓋用戶的使用場景，比如我要移動某App
2. 同手勢觸發操作的更新（iOS原來長按App圖標觸發對App的排列管理「如圖2」，后來經過更新，長按App圖標觸發快捷窗口「如圖1」），新觸發的操作要“告知”用戶如何觸發舊操作，iOS將觸發原操作的按鈕放到快捷窗口里頭，比如圖1，第2個快捷操作就是重新排列App。
總結一下，手勢更新要考慮2點，一是手勢動作是否符合用戶認知，二是要告訴用戶舊操作如何觸發。
08 美團外賣取消訂單二次確認更懂用戶
有時候覺得美團App真的很“懂”用戶。
美團外賣點擊取消訂單，會有對話框進行二次確認，分析下用戶取消訂單的原因，主要包含以下幾種：
- 重復下單
- 信息填寫錯誤（比如備注、發票、收獲電話、餐具數量等信息）
- 改主意（想買其他的）
對于第1種和第3種原因，用戶勢必會取消訂單。
對于第2種原因，可以進行“挽留措施”，在二次確認對話框中提供一個文字鏈入口，方便用戶重新修改信息。
這樣做有什么好處呢？一方面可以減少無效訂單的冗余數據，另一方面也方便了用戶（若無快捷入口，用戶需要取消訂單后需要重新下單）。
09 懸浮標題輸入框及實時校驗案例
懸浮標題輸入框↑
來看一個優秀的輸入框。
1. 交互規范
- 輸入框標題：輸入框默認提示語即為輸入框標題，輸入框輸入內容后標題懸浮顯示
- 輸入框校驗：將表單輸入需要滿足的條件平鋪，用戶在輸入的過程中滿足某個條件，該條件轉為「符合狀態」，用戶在輸入的過程中即知道輸入出錯點在哪里
- 輸入框內容：默認明文顯示，為了方便用戶根據條件快速更改出錯內容
- 輸入框限制：輸入字符超過規定最大字符數作自動截斷處理
- 提交按鈕：輸入內容滿足全部條件后按鈕由「置灰狀態」轉為「可用狀態」
2. 適用場景
適合復雜內容且容易出錯的內容輸入，比如密碼輸入框，出于安全性考慮，往往會要求用戶將密碼設置的復雜一些，這種設計減少了用戶思考的時間（至少不需要計算字符數）
3. 可否優化？
我覺得可以加一個刪除圖標，若有內容顯示刪除圖標，無內容則不顯示，方便用戶一鍵刪除。
10?分期樂動態Banner出場形式
Banner位出場動畫↑
Banner位商品高光動畫↑
App中比較常見的Banner位多是靜態圖片之間的輪播切換，第一次看到分期樂商城Banner的動態出場方式，所有的注意力都被吸引到Banner位了。
動態Banner位的好處？
- 感官吸引強，瞬間抓住用戶注意力
- 動畫突出商品賣點，用戶過目不忘（有記憶點）
該動畫的設計點？
由一個主推的商品帶出場，轉場過渡到主題（文案+圖片）
轉場完成后高光循環掃過商品
文案簡潔突出核心宣傳
真想看看這個Banner位的點擊率和轉化率如何？
ps：這種動態圖片可能是Gif、Apng或是Json文件，動畫轉Json文件可以了解lottie+bodymovin，轉Apng可以了解iSparta。
以上，如果是你，你會這樣設計嗎？
作者：辛小仲；一名正在成長的交互設計師，公眾號：辛小仲。
本文由 @辛小仲 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
鏈家app問題的懸浮不會影響用戶對房源信息的查看嘛？
大多用戶左手握住手機閱讀
————
怎么得出的結論？