上次優(yōu)設(shè)分享《最近這個超火！23個FACEBOOK PAPER中的設(shè)計細(xì)節(jié)》后，很多童鞋表示有啟發(fā)。今天繼續(xù)分享一篇@Sitsism?妹子的好文，從內(nèi)行的角度說下這個廣受好評的APP，究竟有哪些出彩的細(xì)節(jié)。

@Sitsism?：從設(shè)計上講，Paper 是我個人很喜歡的產(chǎn)品，除了它創(chuàng)新的移動 App 交互方式和眾多令人驚喜的設(shè)計細(xì)節(jié)，初次使用時的磁性女聲引導(dǎo)也頗為令人稱道。這篇文章是在看過 4 月 18 日 Facebook 在 YouTube 上發(fā)布的 Paper 團(tuán)隊小范圍技術(shù)分享會中關(guān)于新用戶引導(dǎo)的演講后，想與大家分享所作。

背景：4 月 18 日，F(xiàn)acebook 在 YouTube 上發(fā)布了 Paper 團(tuán)隊小范圍技術(shù)分享會的視頻，會中 5 位 Paper 團(tuán)隊成員分別介紹了在 Paper 的開發(fā)過程中包括新用戶引導(dǎo)、UI、動畫、手勢交互等方面的設(shè)計思路和具體方法，并配以案例說明；也是在這場分享會中，官方首次公布了 Paper 背后的動畫引擎 Pop 即將開源的消息（昨天 Github 上已開源，動作很快）。

打開 Paper 可以看到，不像常見的 App，Paper 的主界面中是沒有導(dǎo)航欄的。這樣做的目的是，在有限的屏幕上盡可能多地呈現(xiàn)給用戶有用的內(nèi)容，而不是被各種功能按鈕所占領(lǐng)?？梢员容^一下 Facebook for iOS 和 Paper 的首屏：

后者的有效內(nèi)容占比明顯多于前者（下圖，黃色之外）：

但這樣做是有風(fēng)險的：用戶已經(jīng)習(xí)慣了進(jìn)入一個 App 中點擊導(dǎo)航按鈕來進(jìn)行各類操作了，現(xiàn)在失去了導(dǎo)航，必須得想其它的辦法來告訴用戶如何使用這個 App——什么樣的方式比較好呢？

Paper 的辦法是引導(dǎo) / 教程（Tutorial）。Tutorial 有不少好處，例如會讓用戶學(xué)習(xí) App 使用的過程變得有趣，像尋寶一般；但缺點也耳目昭彰，例如可能會打斷用戶體驗（想想如果正在進(jìn)行某項操作，卻被屏幕上飛出來的引導(dǎo)打斷的感覺有多糟；更不要提當(dāng)看到與當(dāng)下操作無關(guān)的引導(dǎo)時的心情了），以及可能會給用戶強(qiáng)迫感（為什么一定要逼我學(xué)習(xí)這些功能？特別是當(dāng)剛打開 App 就出現(xiàn) 5 步 Tutorial 時：我還不清楚你的 App 是做什么的，怎么可能學(xué)會記住？），等等。

Paper 做 Tutorial 的原則

• 不要一次性告訴用戶所有功能及操作方法
• 每個功能點的 Tutorial 在用戶操作的相應(yīng)場景中才出現(xiàn)
• 及時給用戶反饋（如下圖，當(dāng)用戶按照引導(dǎo)傾斜手機(jī)后，顯示成功反饋）
• 保證整個過程在 App 中
• Tutorial 可被關(guān)閉（避免給用戶強(qiáng)迫感）
• 通過觀察各類游戲的交互獲得靈感，讓 Tutorial 盡可能有趣
  

Tutorial 的出現(xiàn)機(jī)制

為了適時提供用戶需要的幫助，同時秉承避免打擾用戶的原則，Paper 定義了 Tutorial 出現(xiàn)的機(jī)制：

• Tutorial 必須在相關(guān)的場景中出現(xiàn)

也就是說，假如用戶正在 Settings 頁，那么系統(tǒng)決不會顯示與 Settings 無關(guān)的 Tutorial。

• 根據(jù)相關(guān)性測試判斷一段 Tutorial 是否該出現(xiàn)

舉個例子：用戶正在瀏覽一個帖子，此時系統(tǒng)本應(yīng)為他 / 她顯示與瀏覽帖子相關(guān)的 Tutorial；突然用戶點擊了通知按鈕，若此時繼續(xù)顯示帖子相關(guān) Tutorial，則與用戶正在進(jìn)行的操作（查看通知）無關(guān)。

Paper 不想向用戶顯示與當(dāng)下動作無關(guān)的引導(dǎo)，因此設(shè)置了 Tutorial 的相關(guān)性變量。當(dāng)檢測狀態(tài)顯示相關(guān)性為 True 時才啟動 Tutorial；若為 False，則擱淺當(dāng)前 Tutorial 至教程中心。

• Tutorial 的啟動延遲

這樣做的好處有二：
1、用戶在 A-B-C 連貫操作時，避免在操作 A 和操作 B 間出現(xiàn) A 和 B 的 Tutorial。
2、給用戶自己弄明白功能的時間，只有系統(tǒng)認(rèn)為用戶需要幫助時才啟動 Tutorial。

Paper 團(tuán)隊做引導(dǎo)的感悟

• 用戶喜歡引導(dǎo)，前提是引導(dǎo)對用戶真的起到幫助的作用
  因此引導(dǎo)要做到真正幫助用戶解決問題，在合適的時間點給用戶合適的內(nèi)容。
• 用戶面對新 App 的典型反應(yīng)是「我想先自己試試，搞不懂的話再查看幫助」
  因此要給用戶自己嘗試的機(jī)會，而不是立刻就出現(xiàn)引導(dǎo)。
• 找到「幫助用戶」和「煩用戶」之間的平衡
  過多的、非當(dāng)前場景相關(guān)的引導(dǎo)會令用戶厭煩，合適且適時的引導(dǎo)才真正會起到引導(dǎo)的作用。

p.s. 這段視頻，對于從事移動應(yīng)用開發(fā)、尤其是對類似 Paper 的動態(tài)動畫有興趣的同學(xué)是非常值得一看的，干貨很多。本人不才，不懂動畫，只看得懂 General Principles，講到具體實現(xiàn)方式就歇菜了 T^T。因此，如果有同學(xué)有興趣看看后 4 個演講并與大家分享，go for it！

視頻地址：http://v.youku.com/v_show/id_XNzAzMDA5NDY0.html

原文地址：daily.zhihu
作者：@Sitsism

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量68萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：