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

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

01 PC端有道云筆記批量快捷操作

PC端有道云選中筆記區(qū)分2種場(chǎng)景，一種是單選筆記，另一種是多選筆記。

結(jié)合用戶實(shí)際應(yīng)用場(chǎng)景給出相應(yīng)的交互設(shè)計(jì)策略。

1. 單選筆記

單選筆記的場(chǎng)景對(duì)應(yīng)對(duì)該筆記進(jìn)行編輯。

2. 多選筆記

多選筆記的用戶場(chǎng)景多是需要批量移動(dòng)或刪除，因此當(dāng)選中筆記>1時(shí)，默認(rèn)出現(xiàn)快捷按鈕。

02?美團(tuán)點(diǎn)外賣備注快捷標(biāo)簽

美團(tuán)點(diǎn)外賣可選擇快捷標(biāo)簽↑

沒(méi)錯(cuò)，用戶都是“懶”的，我們時(shí)刻在想如何讓用戶在體驗(yàn)產(chǎn)品的時(shí)候感覺(jué)到方便，其中一種方式就是減少用戶操作。

美團(tuán)外賣提交訂單之后用戶可以填寫(xiě)備注內(nèi)容，快捷標(biāo)簽?zāi)軌蜃層脩舨挥锰顚?xiě)直接點(diǎn)擊標(biāo)簽提交即可。

快捷標(biāo)簽不可能完全擊中100%用戶的填寫(xiě)內(nèi)容，通過(guò)收集用戶填寫(xiě)的備注內(nèi)容進(jìn)行文本分析，找出占據(jù)絕大比例的用戶會(huì)填寫(xiě)的內(nèi)容方向，提取關(guān)鍵詞，以此確定快捷標(biāo)簽的內(nèi)容。

延伸思考：

快捷標(biāo)簽不宜過(guò)多，過(guò)多的內(nèi)容會(huì)增加用戶辨別標(biāo)簽內(nèi)容的時(shí)間。

• 標(biāo)簽越多，達(dá)不到用戶能夠快速篩選標(biāo)簽的目的，反而達(dá)不到「快捷」目的
• 標(biāo)簽也不宜過(guò)少，太少的話怎么擊中那個(gè)「大比例」

03 微信讀書(shū)書(shū)架為空引導(dǎo)

微信讀書(shū)書(shū)架為空引導(dǎo)↑

一句話文案希望引起用戶共鳴，另外附上找書(shū)按鈕方便用戶快捷操作。

04?鏈家聊天助手-引導(dǎo)用戶互動(dòng)

發(fā)現(xiàn)越來(lái)越多的App越來(lái)越便捷，體驗(yàn)越來(lái)越好，譬如上期所說(shuō)的「美團(tuán)點(diǎn)外賣備注快捷標(biāo)簽」，比如「鏈家App聊天助手」。

參見(jiàn)案例，鏈家App的聊天助手「提問(wèn)懸浮按鈕」有以下優(yōu)秀之處：

1. 房源App的提問(wèn)懸浮按鈕“如影隨形”，跟著頁(yè)面滾動(dòng)，既不打擾用戶當(dāng)前的瀏覽行為，也讓用戶注意到該快捷按鈕的存在

2. 當(dāng)用戶瀏覽完當(dāng)前房源，了解了房源情況后，若對(duì)該房源有興趣，那此刻的「進(jìn)一步溝通」的欲望是最強(qiáng)烈的時(shí)候，而「提問(wèn)懸浮按鈕」的存在讓用戶可以隨手一問(wèn)

3. 提問(wèn)的快捷問(wèn)題也是契合用戶最關(guān)心問(wèn)題，同時(shí)「新房」、「新盤(pán)」、「租房」、「二手房」等的快捷提問(wèn)問(wèn)題也因用戶關(guān)心的點(diǎn)不同而進(jìn)行了差異化設(shè)計(jì)，如下所示：

二手房快捷提問(wèn)問(wèn)題↑

新房快捷提問(wèn)問(wèn)題↑

新盤(pán)快捷提問(wèn)問(wèn)題↑

租房快捷提問(wèn)問(wèn)題↑

4. 提交提問(wèn)之后有3處反饋，分別是：提交的問(wèn)題消失、toast提示、消息數(shù)量+1

05 蘑菇租房幫我找房長(zhǎng)表單填寫(xiě)案例

蘑菇租房App的幫你找房功能，用戶填寫(xiě)提交一部分信息后，App可以根據(jù)用戶的愛(ài)好推薦房源。

從信息內(nèi)容來(lái)看，需要提交的內(nèi)容含：價(jià)格范圍、居住位置、出租類型、房屋戶型、特殊需求、入住時(shí)間。

如果全部?jī)?nèi)容放在一個(gè)長(zhǎng)表單頁(yè)里頭填寫(xiě)，用戶會(huì)覺(jué)得太多，該App的設(shè)計(jì)策略是：

1. 分成2頁(yè)，同時(shí)通過(guò)右上角的頁(yè)面進(jìn)度告知用戶當(dāng)前頁(yè)/總頁(yè)數(shù)，用戶有心理預(yù)知
2. 每頁(yè)的內(nèi)容控制在手機(jī)一屏可以看全所有內(nèi)容，減少用戶操作（頁(yè)面上下滾動(dòng)）
3. 按鈕統(tǒng)一放在頁(yè)面底部，保證瀏覽順序的順暢（用戶瀏覽和填寫(xiě)的順序是從上到下的，填完之后自然點(diǎn)擊按鈕提交）

06 微信讀書(shū)互動(dòng)方式-文章注解標(biāo)注

微信讀書(shū)文章注解列表↑

文章某些句子若添加了注釋的內(nèi)容（讀者自行添加），讀者都可以點(diǎn)擊查看（懸浮窗形式，微信讀書(shū)App定義了很多新的組件，有些真的不知道要怎么叫?。?。

懸浮窗的注釋列表，每個(gè)注釋的正文限定最多展示4行，點(diǎn)擊注釋進(jìn)入到該注釋，可進(jìn)行轉(zhuǎn)發(fā)、收藏和評(píng)論等操作。

懸浮窗的關(guān)閉圖標(biāo)，放在了屏幕的左下角的，大多用戶左手握住手機(jī)閱讀（右手較為少數(shù)），左下角這個(gè)位置便于點(diǎn)擊。

07 iOSApp圖標(biāo)長(zhǎng)按手勢(shì)更新

手勢(shì)動(dòng)作的更新會(huì)改變用戶的習(xí)慣和認(rèn)知，所以輕易不更新，更新的話要考慮足夠周全，需要注意的點(diǎn)有：

1. 手勢(shì)是否符合用戶認(rèn)知

目前的手勢(shì)動(dòng)作如下：

• 長(zhǎng)按App圖標(biāo)，觸發(fā)快捷操作窗口
• 長(zhǎng)按App圖標(biāo)并移動(dòng)，觸發(fā)App排列管理

上面2種手勢(shì)我認(rèn)為都是合理的，手勢(shì)2的話直接覆蓋用戶的使用場(chǎng)景，比如我要移動(dòng)某App

2. 同手勢(shì)觸發(fā)操作的更新（iOS原來(lái)長(zhǎng)按App圖標(biāo)觸發(fā)對(duì)App的排列管理「如圖2」，后來(lái)經(jīng)過(guò)更新，長(zhǎng)按App圖標(biāo)觸發(fā)快捷窗口「如圖1」），新觸發(fā)的操作要“告知”用戶如何觸發(fā)舊操作，iOS將觸發(fā)原操作的按鈕放到快捷窗口里頭，比如圖1，第2個(gè)快捷操作就是重新排列App。

總結(jié)一下，手勢(shì)更新要考慮2點(diǎn)，一是手勢(shì)動(dòng)作是否符合用戶認(rèn)知，二是要告訴用戶舊操作如何觸發(fā)。

08 美團(tuán)外賣取消訂單二次確認(rèn)更懂用戶

有時(shí)候覺(jué)得美團(tuán)App真的很“懂”用戶。

美團(tuán)外賣點(diǎn)擊取消訂單，會(huì)有對(duì)話框進(jìn)行二次確認(rèn)，分析下用戶取消訂單的原因，主要包含以下幾種：

1. 重復(fù)下單
2. 信息填寫(xiě)錯(cuò)誤（比如備注、發(fā)票、收獲電話、餐具數(shù)量等信息）
3. 改主意（想買(mǎi)其他的）

對(duì)于第1種和第3種原因，用戶勢(shì)必會(huì)取消訂單。

對(duì)于第2種原因，可以進(jìn)行“挽留措施”，在二次確認(rèn)對(duì)話框中提供一個(gè)文字鏈入口，方便用戶重新修改信息。

這樣做有什么好處呢？一方面可以減少無(wú)效訂單的冗余數(shù)據(jù)，另一方面也方便了用戶（若無(wú)快捷入口，用戶需要取消訂單后需要重新下單）。

09 懸浮標(biāo)題輸入框及實(shí)時(shí)校驗(yàn)案例

懸浮標(biāo)題輸入框↑

來(lái)看一個(gè)優(yōu)秀的輸入框。

1. 交互規(guī)范

• 輸入框標(biāo)題：輸入框默認(rèn)提示語(yǔ)即為輸入框標(biāo)題，輸入框輸入內(nèi)容后標(biāo)題懸浮顯示
• 輸入框校驗(yàn)：將表單輸入需要滿足的條件平鋪，用戶在輸入的過(guò)程中滿足某個(gè)條件，該條件轉(zhuǎn)為「符合狀態(tài)」，用戶在輸入的過(guò)程中即知道輸入出錯(cuò)點(diǎn)在哪里
• 輸入框內(nèi)容：默認(rèn)明文顯示，為了方便用戶根據(jù)條件快速更改出錯(cuò)內(nèi)容
• 輸入框限制：輸入字符超過(guò)規(guī)定最大字符數(shù)作自動(dòng)截?cái)嗵幚?/li>
• 提交按鈕：輸入內(nèi)容滿足全部條件后按鈕由「置灰狀態(tài)」轉(zhuǎn)為「可用狀態(tài)」

2. 適用場(chǎng)景

適合復(fù)雜內(nèi)容且容易出錯(cuò)的內(nèi)容輸入，比如密碼輸入框，出于安全性考慮，往往會(huì)要求用戶將密碼設(shè)置的復(fù)雜一些，這種設(shè)計(jì)減少了用戶思考的時(shí)間（至少不需要計(jì)算字符數(shù)）

3. 可否優(yōu)化？

我覺(jué)得可以加一個(gè)刪除圖標(biāo)，若有內(nèi)容顯示刪除圖標(biāo)，無(wú)內(nèi)容則不顯示，方便用戶一鍵刪除。

10?分期樂(lè)動(dòng)態(tài)Banner出場(chǎng)形式

Banner位出場(chǎng)動(dòng)畫(huà)↑

Banner位商品高光動(dòng)畫(huà)↑

App中比較常見(jiàn)的Banner位多是靜態(tài)圖片之間的輪播切換，第一次看到分期樂(lè)商城Banner的動(dòng)態(tài)出場(chǎng)方式，所有的注意力都被吸引到Banner位了。

動(dòng)態(tài)Banner位的好處？

• 感官吸引強(qiáng)，瞬間抓住用戶注意力
• 動(dòng)畫(huà)突出商品賣點(diǎn)，用戶過(guò)目不忘（有記憶點(diǎn)）

該動(dòng)畫(huà)的設(shè)計(jì)點(diǎn)？

由一個(gè)主推的商品帶出場(chǎng)，轉(zhuǎn)場(chǎng)過(guò)渡到主題（文案+圖片）

轉(zhuǎn)場(chǎng)完成后高光循環(huán)掃過(guò)商品

文案簡(jiǎn)潔突出核心宣傳

真想看看這個(gè)Banner位的點(diǎn)擊率和轉(zhuǎn)化率如何？

ps：這種動(dòng)態(tài)圖片可能是Gif、Apng或是Json文件，動(dòng)畫(huà)轉(zhuǎn)Json文件可以了解lottie+bodymovin，轉(zhuǎn)Apng可以了解iSparta。

以上，如果是你，你會(huì)這樣設(shè)計(jì)嗎？

作者：辛小仲；一名正在成長(zhǎng)的交互設(shè)計(jì)師，公眾號(hào)：辛小仲。

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

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