起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識交互例推：好設(shè)計看得見（5）
《交互例推：好設(shè)計看得見》是我在體驗互聯(lián)網(wǎng)產(chǎn)品過程中，對一些產(chǎn)品設(shè)計案例進(jìn)行交互推導(dǎo)與分析的專題集合。
他山之石可以攻玉，關(guān)注這些好設(shè)計，給自己的設(shè)計思路帶來啟發(fā)，同時積累設(shè)計策略和學(xué)會設(shè)計總結(jié)，希望也能夠給你帶來一些思考。
一、滴答清單可智能待辦事項匹配對應(yīng)日期時間并自動提醒
滴答清單輸入待辦事項，會對其內(nèi)容進(jìn)行智能化識別，一旦用戶學(xué)習(xí)并了解了該種規(guī)則，會減少很多操作。
事項識別規(guī)則總結(jié)如下：
1. 包含特定日期
將輸入內(nèi)容含有口語化或具體日期的對應(yīng)事項識別為對應(yīng)日期的待辦事項，例：內(nèi)容含“周3”或“周三”將識別為本周三的待辦事項。
具體分類如下：
- 內(nèi)容含“大前天、前天、今天、明天、后天、大后天”以當(dāng)前日為參考日，匹配到對應(yīng)日；
- 內(nèi)容含“周x”、“本周x”匹配到本周對應(yīng)日，x可為數(shù)字也可為中文；
- 內(nèi)容含“上周x”、“下周x”以本周為參考日，匹配到對應(yīng)日，x可為數(shù)字也可為中文；
- 內(nèi)容含“x月x日”或“x-x”或“x/x”匹配到具體的對應(yīng)日期，例如：12月25日、12-25、12/25等。
2. 包含頻度詞
- 內(nèi)容包含頻度詞將自動匹配為符合規(guī)則日期的對應(yīng)待辦事項。例如：內(nèi)容含“每天”，自動將事項匹配為從今日開始的每日事項。
- 頻度需要覆蓋“每n年”、“每n月”、“每n周”、“每日/天”，n為N*(大于0的正整數(shù)，當(dāng)n為1時，n可以省略”。
- 頻度為周以上的往往會帶上日期，比如：每年1月1日、每月4號、每周三，都支持識別并自動匹配為重復(fù)事項。
3. 包含時間點(diǎn)
- 輸入內(nèi)容若包含時間點(diǎn)，將匹配到對應(yīng)的時間點(diǎn)，系統(tǒng)將自動為該時間點(diǎn)設(shè)置鬧鐘提醒。
- 另外，需要支持多種常用的輸入格式，例如：下午4點(diǎn)、下午四點(diǎn)、16:00、4pm等。
4. 多規(guī)則組合
以上3類輸入可以進(jìn)行組合輸入，組合規(guī)則符合且的規(guī)則。
二、美團(tuán)外賣以返利方式刺激用戶綁卡支付
毋庸置疑，線上支付是支付寶和微信的天下，通過這兩種支付方式，用戶既可以選擇其錢包支付（微信-微信零錢，支付寶-余額），也可以選擇綁定在微信和支付寶里頭的儲蓄卡/信用卡進(jìn)行支付。
若要用戶重新在一個App綁卡進(jìn)行支付，那么需要激勵來刺激，只要「返利>綁卡成本」，用戶會“愿意”綁卡。
美團(tuán)采取的方式是：
（1）返利，通過頁面元素和微動效進(jìn)行體現(xiàn)
- 體現(xiàn)的元素有：“推薦”標(biāo)簽、“6元優(yōu)惠券”標(biāo)簽、“百萬財產(chǎn)安全險”標(biāo)簽。
- 微動效，用戶選擇不同的支付方式，微動效切換對應(yīng)的金額，很明顯不同的支付方式金額有差異性。
（2）綁卡流程簡單，一個從未綁卡的用戶選擇新卡支付的話，點(diǎn)擊按鈕會先進(jìn)入【綁卡流程】，綁卡完成后可進(jìn)行新卡支付。
以上，返利是一個不錯的刺激機(jī)制，而Money是最直接的刺激物質(zhì)。
三、京東金融瀏覽頁面倒計時讓用戶心里有數(shù)
現(xiàn)在很多App為了促活，會策劃很多運(yùn)營活動，比如簽到、任務(wù)中心等。
京東金融App也同樣設(shè)計了賺錢中心讓用戶做任務(wù)薅羊毛，其中一項是讓用戶瀏覽指定頁面，瀏覽60s以上即達(dá)標(biāo)。
為了讓用戶直觀地感知到瀏覽時間，京東金融App在頁面上友好地放置了一個倒計時。
前置是瀏覽任務(wù)的話，點(diǎn)擊「去瀏覽」按鈕即進(jìn)入相應(yīng)的頁面可以看到倒計時，60s倒計時完成后點(diǎn)擊提示浮窗回到上一個頁面。
優(yōu)點(diǎn)：對用戶很友好，有倒計時告知用戶可以避免“白瀏覽”。
缺點(diǎn)：用戶可能停留在頁面并不進(jìn)行瀏覽行為，盯著倒計時直到完成。
四、商品搜索結(jié)果展示，你會如何設(shè)計？
交互例推案例《京東購物時無可使用的優(yōu)惠券之湊單思路》告訴我們遇到空白結(jié)果的時候多思考一步，除了占位圖，是否還有其他展示方案？本次介紹的案例類似。
當(dāng)我們在商城搜索商品時，搜索結(jié)果的展示設(shè)計思路通常如下：
思考下是否有更好的方式？對于無結(jié)果用占位圖展示，用戶進(jìn)入該頁面肯定會跳出，此頁面的跳出率肯定極高，是否能夠降低跳出率，對有目標(biāo)搜索的用戶做適當(dāng)?shù)霓D(zhuǎn)換，引流到其他商品呢？
對展示方案進(jìn)行進(jìn)一步拆解——
若搜索無結(jié)果，可是展示相關(guān)或熱門商品，比如用戶搜索某品牌手機(jī)無結(jié)果，可以給用戶推其他品牌的熱門搜索手機(jī)，同樣能夠擊中用戶的搜索需求。若搜索結(jié)果較少，用戶沒停留多久就看完了結(jié)果，所以同樣可以展示相關(guān)或熱門商品，讓用戶繼續(xù)瀏覽。
按此思路，設(shè)計方案如下：
五、搜狐資訊瀏覽頁面以能量球告知用戶任務(wù)是否完成
前有介紹《京東金融瀏覽頁面倒計時讓用戶心里有數(shù)》讓用戶清楚瀏覽任務(wù)是否完成。缺點(diǎn)有：
- 用戶可以預(yù)知任務(wù)完成的時間節(jié)點(diǎn)，可能會一直等到倒計時完成；
- 任務(wù)中斷的話下次瀏覽又從60s開始，意味著上次瀏覽時長作廢；
- 一個瀏覽任務(wù)完成后需要回到任務(wù)中心再次點(diǎn)擊開啟新的瀏覽任務(wù)；
- 還有一個技術(shù)問題是，一些頁簽頁面的切換會使倒計時失效。
本次看下搜狐咨詢?yōu)g覽內(nèi)容自動獲取狐幣的設(shè)計策略，將其封裝成能量球的形式，和倒計時對比，我認(rèn)為方案更佳。
理由如下：
- 能量球滿了+自動發(fā)放狐幣數(shù)量的展示，表示1個瀏覽任務(wù)完成，用戶同樣易感知。
- 倒計時的方式很明顯任務(wù)完成的評判規(guī)則就是“瀏覽滿60s”，用戶的視覺焦點(diǎn)會被倒計時吸引，忽視了任務(wù)本身。而能量球這種表現(xiàn)形式使得任務(wù)完成的評判規(guī)則較難推導(dǎo)，評判規(guī)則可以任意封裝，可以是瀏覽滿一定的時長，也可以是用戶有滑動頁面行為等等。評判策略就變得更有彈性，可以跟著數(shù)據(jù)進(jìn)行調(diào)整上下線，對于用戶來說，方式并沒有改變。
- 一個瀏覽任務(wù)完成后自動繼續(xù)下一個瀏覽了任務(wù)（能量球滿了后自動清空開始注入能量），不易打斷當(dāng)前瀏覽行為。
六、搜狐資訊首頁Tab按鈕雙功能
搜狐資訊App，停留在首頁Tab，點(diǎn)擊首頁Tab按鈕為刷新本頁面的內(nèi)容；停留在非首頁Tab頁面，點(diǎn)擊首頁Tab按鈕則進(jìn)入該Tab頁面。
首頁一個Tab標(biāo)簽欄兩種用法，有意思。
七、去哪兒有趣的加載動畫
去哪兒的加載動畫是典型的情感化設(shè)計，隨著等待時間的遞增用戶會越來越焦慮。
就像加載動畫里頭的駱駝，從悠閑散步到加快小跑再到加速快跑，文案分別映射為：努力加載中、瘋狂加載中、玩命加載中。
同時動畫設(shè)計中也融入了品牌形象，去哪兒的IP形象是一個駱駝，在動畫中露出形象，強(qiáng)化用戶感知。
八、火狐瀏覽器意外退出可返回上次瀏覽
作為產(chǎn)品設(shè)計師，異常狀態(tài)的設(shè)計也是不能遺漏的，比如在網(wǎng)絡(luò)異常時，要盡快解決網(wǎng)絡(luò)連接問題，若長時間無響應(yīng)，相應(yīng)要給用戶呈現(xiàn)解決方案，讓用戶能夠恢復(fù)正常瀏覽。
具體情況具體分析，在使用瀏覽器的時候有時候瀏覽器卡死，用戶會強(qiáng)制退出；有時瀏覽器自動異常關(guān)閉。
不管是什么原因，都打斷了用戶正常的瀏覽狀態(tài)，此場景下，對于正停留在某網(wǎng)頁頁面瀏覽或正在某平臺進(jìn)行著編輯操作的用戶，中斷后第一反應(yīng)就是重啟瀏覽器找回記錄。那火狐瀏覽器在瀏覽器異常關(guān)閉重啟后提供了2種選擇，一種恢復(fù)瀏覽，另一種就是開啟新的瀏覽行為，如上截圖所示。
那若用戶在某平臺進(jìn)行著編輯操作，作為該平臺的產(chǎn)品設(shè)計師。對于大篇幅的內(nèi)容編輯，需要考慮自動保存功能的加入，小篇幅的內(nèi)容無需考慮。
一是用戶無需花太多時間成本能夠再次編輯恢復(fù)內(nèi)容；二是自動保存功能對性能的要求以及額外功能的開發(fā)所增加的成本已經(jīng)超過了時間成本。
九、美團(tuán)問你點(diǎn)主食了嗎
在美團(tuán)點(diǎn)餐提交訂單沒有點(diǎn)主食，會提示用戶是不是忘記點(diǎn)主食了，點(diǎn)擊按鈕在本窗口彈出主食讓用戶添加。
對于「用戶未添加主食進(jìn)行提示并提供入口」該需求是興奮型需求（可了解KANO模型），若不提供此需求，用戶滿意度不會降低；若提供此需求，用戶滿意度會有很大的提升。
十、綠洲動態(tài)發(fā)布進(jìn)度以進(jìn)度條形式告知
在綠洲App發(fā)布動態(tài)后，在頁面頂部出現(xiàn)動態(tài)所含第一張圖的縮略圖+正在發(fā)布文案+一個進(jìn)度條。
整個發(fā)布流程可以是這樣的：
1.編輯動態(tài)發(fā)布->2.跳轉(zhuǎn)至首頁&頂欄顯示發(fā)布進(jìn)度->3.發(fā)布完成自動刷新首頁更新出剛發(fā)布的動態(tài)
綠洲App在2和3之間插入一個分享動態(tài)頁（如下圖所示），此步驟可有可無，加上的目的是增加App的曝光，吸引更多人下載使用（分享出去的海報圖上帶有品牌slogan和二維碼）。
如果是你，你會這樣設(shè)計嗎？
寫在后面
以上觀點(diǎn)帶有個人主觀性，如果你有建議或者更好的設(shè)計方案，請指教。
#相關(guān)閱讀#
作者：辛小仲；一名正在成長的交互設(shè)計師，公眾號：辛小仲。
本文由 @辛小仲 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
這個GIF錄屏展示是用什么軟件做的哦？
先手機(jī)錄屏，然后轉(zhuǎn)成GIF格式