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

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

一、頁面拉倒底部了，需要提示嗎？

一些App，將頁面拉到底，可以看到一句文案提示，告知用戶頁面已經(jīng)到底部了。

這句文案的意義是提醒用戶頁面到底，還有其他意義嗎？

對于一些短頁面，頁面有沒有到底顯而易見，比如錄屏中的消息頁面。

我認為“到底提示”適用于信息流的使用場景。

App中的信息流往往采取瀑布流的形式，在上拉刷新頁面的同時新的內(nèi)容也自動加載出來了，對于“有盡頭”的信息流加載完了所有內(nèi)容，“到底提示”就像是終點告知一樣，告訴用戶你已經(jīng)瀏覽完內(nèi)容了。沒有提示的話，用戶可能會短暫地以為內(nèi)容還在加載中，或是不是網(wǎng)絡(luò)有點問題導(dǎo)致內(nèi)容還沒加載完。

最后，信息流長頁面需要配上一個功能按鈕回到頁面頂部。

二、一起看下滴答清單的全屏互動型操作指引

本次案例錄屏時間太長上傳受限制，所以拆成了4段。

「滴答清單」是一款工具型App，核心功能是日程管理。

下載「滴答清單」首次啟動App，系統(tǒng)會自動出現(xiàn)一個簡短的教程進行操作指引，教程拆分成了3步：建立清單>設(shè)置提醒>任務(wù)完成。教程采用和用戶互動的形式讓用戶沉浸式體驗其中，用戶根據(jù)指引進行操作后才能進入下一步，任務(wù)完成后即進入App首頁。

在App啟動的時候加入引導(dǎo)并不會突兀，同時用戶也學習了基本用法。

總結(jié)：

工具型App其一特點是初次使用時需要花費一定的時間成本學習如何上手，所以可以考慮對用戶進行全屏互動型操作指引。

• 出現(xiàn)機制：用戶首次啟動App，非首次啟動不再出現(xiàn)；
• 教程設(shè)定：可將教程拆分成2～4步，加入用戶互動強化學習記憶；
• 其他注意：用戶在整個過程中隨時可以終止，所以要讓用戶能夠跳過教程。

三、UC瀏覽器搜索輸入真的“懂你”？

「UC瀏覽器」的搜索欄可供用戶搜索關(guān)鍵詞或網(wǎng)址，我們看到此案例，用戶點擊搜索欄進入搜索頁面，默認呼出鍵盤。

因為網(wǎng)址的規(guī)則決定了它的規(guī)律性，所以鍵盤上部分提供了網(wǎng)址快捷輸入標簽。

輸入規(guī)則有：

輸入框無內(nèi)容時，快捷標簽的內(nèi)容是網(wǎng)址前綴，有：www.、m.、https//，同時“滑塊控件”禁用（還沒有內(nèi)容，不禁用沒意義）。

一旦輸入內(nèi)容，快捷標簽的內(nèi)容進行了切換，切換為：.com、.cn、/、.等，同時“滑塊控件”切換為可用狀態(tài)。

“滑塊控件”真的很友好，碰上需要修改輸入內(nèi)容的場景，假如輸入的是中文，中文單字的寬度此英文單字母的寬度稍大些，手指在屏幕上點擊滑動中文較英文操作順利些，然而輸入的網(wǎng)址大多是字母，使用“滑塊控件”能夠在輸入內(nèi)容間自由移動光標，大大降低了光標移動的出錯率。

另外，“滑塊控件”離鍵盤較近，直接在輸入框移動光標的話，還要移到頁面頂部，所以還是“滑塊控件”友好些。

總結(jié)：

若用戶輸入的內(nèi)容具有規(guī)律性，可以提供快捷標簽。

四、有道云筆記告訴你在什么時機露出會員服務(wù)

先看下錄屏，如果是你，主動點擊了解會員服務(wù)細則，你在看這些服務(wù)的時候有強烈的購買欲望嗎？

反正我不會。

打個比方，你現(xiàn)在饑腸轆轆，剛好經(jīng)過一家飯店，你大概率會進去消費。

同理，會員服務(wù)只有你需要的時候你才會購買。

「有道云筆記」在每個需要會員服務(wù)的使用場景中都進行了宣傳露出，如果你剛好需要，那“這家飯店”就出現(xiàn)得很及時了。

比如：

1）你想要保存譯文至筆記的時候

2）你將筆記生成長圖想要使用高逼格背景圖的時候

3）你在書寫筆記想使用喜歡的背景的時候

4）分享私密筆記給他人需要設(shè)置查看密碼和查看到期時間（發(fā)給他人閱讀）

5）給筆記加密，IOS用戶可以用Touch ID或面部來解鎖（在自己手機App打開閱讀）

6）想要搜索圖片中包含某內(nèi)容的相關(guān)筆記的時候

同理，其他會員服務(wù)不再贅述。

總結(jié)：

會員服務(wù)可以在會員服務(wù)涉及的使用場景中進行曝光露出。

所以，你在設(shè)計會員體系時，構(gòu)思會員權(quán)益后可以進一步對相應(yīng)的使用場景給用戶提供會員購買的入口。

五、網(wǎng)易云音樂在用戶切換播放模式的同時進行提示告知

網(wǎng)易云音樂在用戶切換播放模式的同時會toast告知當前播放模式是什么。

三種播放模式分別是：單曲循環(huán)、列表循環(huán)和隨機播放，如果單看對應(yīng)的圖標一時半會也反應(yīng)不出對應(yīng)的播放模式是什么？

toast則給出了對應(yīng)的提示，讓用戶不迷茫。

六、介紹幾種點贊反饋方式

你有注意到你給他人點贊的時候，App是如何反饋的呢？

體驗了幾款A(yù)pp，目前常用的幾種點贊反饋方式有3種，分別是：

1. 點贊圖標微動效

用戶點贊的圖標會有微動效。

以「好好住」、「荔枝」點贊為例：

「荔枝FM」點贊↑

2. 點贊圖標微動效+toast輕提示

用戶在點贊的時候，點贊圖標會有微動效，同時會出現(xiàn)toast提示告知用戶點贊成功。

以「網(wǎng)易云音樂」點贊歌曲為例：

「網(wǎng)易云音樂」點贊↑

3. 點贊圖標微動效+屏幕居中動效

與上面所說的方式類似，將toast提示替換為動效提示。

以「微博」、「豆瓣」、「小紅書」點贊為例：

「微博」點贊↑

「豆瓣」點贊↑

用戶在App操作成功或失敗的時候，應(yīng)用都需要給予正確的反饋，點贊反饋方式不管設(shè)計如何光鮮亮麗都不會讓用戶喜歡上點贊。但是，情感化的設(shè)計會讓用戶覺得“溫暖”，獲得好心情。

七、微信讀書會員卡購買頁面微動效

進入「微信讀書」會員中心，“無權(quán)卡權(quán)益”向上滑動展開+底部逐漸顯示購買須知。

“無權(quán)卡權(quán)益”向上滑動的同時露出購買會員的四種付費形式，具有優(yōu)惠力度的付費形式和無優(yōu)惠的付費形式文字樣式進行了區(qū)分。

• 文字顏色；
• 有無優(yōu)惠標簽。

向下滑動“無權(quán)卡權(quán)益”內(nèi)容模塊，將隱藏付費形式以及購買須知，同時露出購買按鈕和購買協(xié)議。再次點擊購買按鈕，觸發(fā)“無權(quán)卡權(quán)益”向上滑動展開+底部逐漸顯示購買須知。

可當作微動效學習案例。

八、微信讀書注釋詳情頁跳轉(zhuǎn)-差異化顯示

用戶在「微信讀書」可以對任何內(nèi)容進行注釋添加，而其他用戶則可以對他人的注釋進行評論或點贊。點擊「微信讀書」注釋列表中的某一個注釋內(nèi)容，即進入該注釋的詳情頁面，注釋詳情頁含注釋內(nèi)容、被注釋的內(nèi)容、用戶信息、該注釋的評論/贊等數(shù)據(jù)。

從列表頁進入詳情頁，「微信讀書」根據(jù)該注釋是否有評論/贊的數(shù)據(jù)進行了差異化顯示。

1）注釋詳情頁“只有評論”、“有評論+有贊”默認定位到「評論頁」

2）注釋詳情頁“0評論+0贊”默認定位到「評論頁」，其「評論頁」占位圖顯示

3）注釋詳情頁“只有贊”默認定位到「點贊頁」

總結(jié)：

我想差異化顯示的目的是能夠讓用戶關(guān)注到用戶間的互動信息。

而“評論”相對“點贊”數(shù)據(jù)來說更具有“可看性”，所以在有評論的前提下優(yōu)先查看評論；若無評論有點贊數(shù)據(jù)的話則默認定位到點贊頁簽，因為此時點贊頁簽相對無評論的占位圖又更具有“可看性”。

九、京東收銀臺選擇不同支付方式時隱藏次級內(nèi)容

先看錄屏，京東收銀臺選擇除白條以外的支付方式時，會將各個分期選項隱藏起來，我認為原因有：

1. 如下圖所示，若用戶進入收銀臺沒有滑動頁面，可能就會以為只有這兩種支付方式，當選擇第二種支付方式后，白條的分期選項收起，同時也將更多支付方式暴露出來了。
2. 用戶選擇除白條以外的其他支付方式，關(guān)注點進行了轉(zhuǎn)移，分期選項的內(nèi)容屬于比較次級重要的內(nèi)容可以適當隱藏。

如果支付方式并不多，在一屏頁面就顯示全了，分期選項可以不隨選擇其他支付而做隱藏，因為此時隱藏的作用并不明顯。

十、京東購物時無可使用的優(yōu)惠券之湊單思路

我們常常見到空狀態(tài)的頁面用占位圖來告知用戶當前數(shù)據(jù)為空。

而京東優(yōu)惠券的邏輯是，如若商品結(jié)算時無可用優(yōu)惠券，將湊單后可使用的優(yōu)惠券露出并提示，如上圖所示，其目的是作為刺激用戶增加購買的“一把推手”。

線下商場會推出一些優(yōu)惠活動，比如“滿一件打8折、滿2件打5折”，“滿199減100”等此類促銷活動，通常用戶都會湊單達到最大的優(yōu)惠力度，從心理上，消費者會覺得“便宜了很多”。

京東將用戶湊單后即可使用的優(yōu)惠券進行露出是值得借鑒的。

寫在后面

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

#相關(guān)閱讀#

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

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

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

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

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

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