競品分析是UX設計師的標準工具之一， 且用戶體驗設計師的主要交付品之一就是競品分析報告。在設計一個新的方案之前，我們往往會查看其他類似的產品，了解其他人做的相關工作，希望從中找到任何弱點或者優點，并期望在此基礎上進行改進，這將利于你的設計。事實上，競品分析已經不再局限于一種工具方法，更是一種思維模式，如何對比分析，如何批判性的進行比較以及從差異中獲取價值。

UX設計項目會遇到哪些類型的競爭對手？

這個問題可以理解為，我們要分析哪些競爭對手？一般來講，所有UX項目都面臨兩種競爭，一種是直接競爭對手，即業務有直接沖突，涉及到具體的利益沖突，商業沖突。例如滴滴和uber，淘寶和京東。另一種則是“間接競爭對手”，往往針對某些相似的產品模塊，這里的競爭并沒有準確的定義，只是為了比較而給與的一個名稱。 例如你在進行自家產品登錄注冊模塊的設計，此時你不僅僅可以研究一些直接競品，也可以研究其他擁有此功能模塊的產品。而該產品與你的產品并沒有構成競爭的關系，只是提供了一個參考方向。

為什么要進行比較？

關于這個問題有兩個答案，首先，調研競品發掘哪些功能或服務是他們不能做或者沒有實現的，這就是我們的產品可以利用的機會點，以提供新穎的或者說更強大的功能，從而提高產品競爭力。例如順豐快遞首先開創了機器填寫快遞信息的功能，從而大大提高用戶填寫訂單的效率、準確度和滿意度，進一步提高品牌競爭力和服務水平。

其次，檢查其他設計師對相同需求的解決方案必然會對你有所啟發，有利于你從中獲取靈感來優化自家產品。例如信息架構的優化、或者簡單地操作流程的優化。參考競品意味著你可以不斷從中學習，把競品的每個模塊、步驟拆解開來，分析其背后的設計原因及它們如何發揮作用，這將有利于你的產品設計。

參考競品首先意味著你能夠達到和競品同一水平的用戶體驗，因為有了參照標準相當于指路明燈，競品的優秀體驗也會督促你不斷優化自己的產品。但競品雖然為你創造了一個標準，同時也會限制你的思路和想法，使你可能錯過一些更優秀的解決方案，參考競品能讓你追趕別人，但無法讓你完全超越他人。因此僅僅復制是不夠的，必須融入自己的見解且時刻保持創新意識。

對直接競爭對手進行分析

通常，競品分析發生在項目的早期，你或許會尋找市面上是否會有競爭對手，然后嘗試著從競品中尋找優點和弱點，以推動自己的產品。如果沒有競爭對手時，往往可以從目標用戶入手，因為用戶實際上擁有自己的解決方案或者說策略，例如在滴滴流行起來之前，對應的用戶群往往使用出租車來代替出行方式。目標用戶在這之前是如何解決他們的需求的？你應該可以獲得一些間接可比的方案，收集用戶的相關想法有利于推動你的產品設計。

在產品上線后的運行階段，仍然需要做競品分析，此時或許存在一些新興的的競品，雖然是后來者，但往往會在交互、體驗或者運營策略等方面碰撞出一些新的創意。根據競品的功能策略，你需要進行一定的調整，不斷對產品迭代優化。除此之外，產品有時需要做一些追隨趨勢的更新，例如視覺風格、新的交互設計語言等。

如何從間接競爭對手那里獲得靈感

間接競爭對手也會給你一定的啟發，作為一個用戶體驗各種產品時，留心那些優秀的設計，可能是視覺方面也可能是交互方面，總之這些優雅的設計將會成為你的靈感之源。然而所有的設計都有其適用場景及背后的設計原理支撐，在海外設計經驗中一再強調的 context（上下文）就是這個意思。

優秀的設計都是最適合自己的產品和策略的設計，而不是最美觀或最的。因為設計不僅僅包涵體驗更是要兼顧業務。同一個設計在一個地方發揮作用并不意味著移植到其他地方仍然有效。

例如一個簡單的登錄模塊的設計，按照常規經驗，以目前微信的受眾數量做參考，可以無腦選擇微信快捷登錄，這無疑是最便捷的方案，但為什么很多產品仍然采用手機登錄？因為一個注冊的手機號碼能為公司的未來帶來極大的增值，每個號碼背后都是一個用戶，且通過手機號可以對這個用戶進行持續的推廣營銷，如拼多多的短信推廣，移動聯通的電話推廣。

所以，一切的設計都應以設計背景，業務訴求為基本原則來進行，盲目的追尋極限的視覺和效率，盲目的信奉設計潮流趨勢都是不可取的。好的設計和時尚的設計不同，好的設計有持久的價值，是美學和體驗的結合，并以基于心理學社會學的用戶研究為后盾。這樣的設計符合用戶的需求同時能為企業帶來收益。而時尚的設計則會隨著時間流逝而銷聲匿跡。

一味追尋潮流的應用程序設計，公然違背基本的可用性慣例，違背交互設計的基本原理，很有可能在市場中失敗。——Prototyper.io UX首席負責人Miklos Philips

競品分析時謹記五個原則

為了保證你所進行的競品分析的有效性，需要謹記以下五個原則。 

1.理解背后的需求

分析任何設計之前都需要理解設計背后的核心需求，這并不是簡單的查看表面內容，除了交互體驗上的思考，更要深入產品本身，去更多的理解業務層商業策略等方面的內因。每個設計都有對應的場景、上下文甚至各種限制條件。只有理解這些你才清楚這個設計是否適合你的產品，或者是否有一定的參考意義。

比如觀察淘寶的搜索功能你會發現首頁的搜索和店鋪的搜索有很大差異，即首頁的搜索比重要遠遠大于店鋪的搜索。店鋪中的搜索按鈕僅僅展示一個雙指面積的btn，而首頁則是展示一個接近通欄的搜索條。那么分析下來，店鋪的搜索btn小巧精致，簡易美觀是否應該借鑒，答案是看情況。淘寶首頁入口提供的是一級搜索，涵蓋了淘寶百億級別的商品，因此搜索功能的優先級極高。而店鋪商品有限，用戶瀏覽商品往往按照分類，很少使用搜索功能，這種情況下搜索的優先級很低。 

因此，理解設計背后的理念，解決的問題、如此設計的原因才是競品分析重點關注的方向。切記浮于表面。

2.確定真正的競爭者

認清自己的競爭者，他們往往并不僅僅是表面的直接對手。事實上應用程序只是一種幫助用戶達成目標的技術手段從用戶角度，有很多可選方向，而你的產品想要獲得成功，你就要做那個體驗最好，滿意度最高的選項。回想一下，便利貼的功能應用程序是否能實現？答案是肯定的，但現在為止并沒有任何應用程序能夠撼動便利貼的霸主地位。因此，滴滴的競品真的只是其他網約車公司嗎，事實上滴滴最大的競品是出租車。通常，你最強大的對手并一定不是和你一樣的科技產品。

3.通過標準來判斷，而不是個人臆測

每次進行比較都意味著根據某個標準來進行判斷，如何決定兩者的功能孰優孰劣，最好的方法是引入標準或者用數據說話。例如競品某個模塊轉化率高，那必然有其內因。另外，我們可以根據業界的標準來評判產品的可用性體驗，如尼爾森的啟發式評估原則（后面會詳細講到）。

4.盲目模仿是導致失敗的罪魁禍首

在特定環境中行之有效的方法在另一環境中可能根本行不通。每個設計解決方案不僅是針對眼前的問題，而且還針對目標受眾。請記住，良好的設計是仔細的分析研究產生的，需要付出大量的努力來與用理解用戶，定義問題，并 根據上下文構思，最終產出最終設計和評估解決方案。

你可能會說，別人已經驗證了的功能，我們沒必要花費時間去重復測試，但他人的功能是針對特定的場景特定的業務目標，或許并不適用你的產品。所以，在模仿之前，請仔細考慮您的問題與原始設計師的方案匹配程度。

5.用戶測試無可替代

在競品研究中我們需要時刻保持懷疑的態度，在將競品的設計應用于自己的產品之前，需要評估設計背后的需求、場景，以判斷會否適合自家產品。這個過程可以沒有用戶參與，例如選擇專家進行的可用性評估。但最終，在你決定將設計投入自己的產品時，你需要意識到只有真實場景下的用戶測試，才能判斷該設計是否成功。 

無處不在的“漢堡菜單”按鈕。最初是Facebook率先取得成功的設計，現在有大量證據表明該設計帶來了很大的可用性問題。通過將圖標與其他導航方式（例如ios的菜單導航）進行比較的A / B測試，發現了這些問題。

時刻留意競爭對手的產品設計有利于你不斷更新和迭代，從而保持競爭優勢，但你必須知道，研究競品只能讓你和它處于一個水平，他不會教給你如何開辟新的想法，如何解決未解決的問題。并且能從競品分析中收獲的有效信息完全取決于你的個人能力和經驗。因此保持質疑，持續思考，以創新意識探索更可能是UX設計師長遠的目標。 

NNG的十項UI界面啟發評估的原則

前面提到我們應該通過標準來衡量產品的設計，而不是個人的主觀臆測。尼爾森的啟發式評估原則就是這樣一套可實踐的評估標準，共有十項，主要涉及到用戶體驗、可用性的評估。使用這是個標準能夠評估出大部分的可用性問題。

1系統狀態的可見性

任何情況下都應該顯示易于理解的界面信息和系統狀態，以保證用戶正確執行操作。

這其中其實不僅僅要求“可見”，也要求“隱藏”。因為系統界面的展示目的是使用戶易于理解其中的信息，因此要清晰展示有效信息，同時隱藏無效信息和干擾項。概括來說這一項原則的關鍵在于視覺傳達的效率，如CTA按鈕高亮來聚焦注意力，文字鏈按鈕添加下劃線或箭頭來傳達可點擊的狀態等。

2.系統與用戶習慣的匹配

設計師應根據目標用戶的經驗習慣進行界面設計，如使用符合用戶認知的語言、概念、預測用戶的常規行為方式如單手操作，減輕認知負擔，并使系統更易于使用。

在電腦屏幕右鍵彈出的菜單窗口恰好在鼠標附近，因為用戶當時視覺聚焦于此。移動端閱讀類產品的目錄按鈕總在右下角，因為大部分人使用右手單手操作，而在IPAD端的閱讀產品，目錄置于左下角，因為用戶一般需要雙手持設備，此時左手點擊目錄更符合用戶習慣。

當然，不僅僅要考慮用戶操作習慣，更要考慮用戶的心理預期。這就要用到隱喻，例如按鈕按下后模擬出下沉的視覺效果，再如最早的閱讀類產品模擬真實書架，還原用戶習慣的書架瀏覽查找書籍然后閱讀的體驗。

3.用戶控制和自由

產品應該允許用戶自由控制自己的操作行為，例如可以撤銷重做，或在不同內容間自由跳轉。

4.一致性

界面設計人員應確保在相似的平臺之間維護圖形元素和術語的統一。例如，代表一個類別或概念的圖標在不同的設備上使用時不應代表不同的概念。垃圾桶應當代表刪除、回收等操作，而不是其他的語義。

5.防錯

提前預測可能發生的錯誤，嘗試盡量避免它們，將潛在的錯誤保持在水平。用戶不樂意處理錯誤同時不擅長處理錯誤，為了減少用戶遇到錯誤的，試著消除問題部分。例如驗證碼部分只允許填寫數字，且自動喚起數字鍵盤無法切換字母鍵盤，這樣就防止用戶輸入錯誤信息格式的可能。

6.降低用戶認知負荷

人類注意力是有限的，不要嘗試一次行給用戶灌輸過多信息，試著一次只展示一個核心功能或內容，每個步驟只用來做一件主要的事情。目前主流的注冊流程都遵循這個原則，一次只進行一個步驟，輸入手機號、發送驗證碼、填寫驗證碼、登錄成功。

7.靈活性和效率

使用更少的交互，讓用戶更便捷的完成目標，例如使用縮寫、語音輸入、自動填充等技巧。目前有些產品通過自動填充手機號碼來提高登錄注冊效率，或自動填充短信驗證碼來提高驗證效率，這就是一種優化交互來提高產品使用效率的方式。（但這種方式對權限要求較高）

8.美學原則與極簡設計

減少混亂和多余的元素，不要爭奪用戶注意力，提供清晰可見的導航。根據海外的調研，有三到四成用戶離開一個網站的原因是導航混亂不易理解。

9.幫助用戶識別、診斷錯誤并恢復

采用通俗的語言解釋錯誤的情況并提供解決方案或說明情況。

10.幫助文檔

我們期望不需要說明文檔（類似說明書）也能讓用戶正常使用和產品和解決遇到的問題。但我們仍然需要一定的說明文檔，來解釋特殊情況或常見問題，以保證用戶在需要時能輕易找到解決方案。

文章來源：UI中國

Chartistic是一款通過交互快速編輯數據可視化圖表的app。本文通過對“Chartistic”app進行產品體驗與分析后產出的PRD文檔。該文檔由幾個板塊組成：全局說明、產品說明、頁面詳細功能說明等。

目錄

一、文檔綜述

1.1文檔輸出環境

1.2產品簡介

1.3產品總結

二、全局說明

2.1鍵盤說明

2.2按鈕說明

2.3默認設置

2.4限制設定

2.5頁面交互

三、產品說明

3.1產品操作流程

3.2產品功能導圖

3.3頁面流程

四、頁面詳細功能說明

4.1歡迎頁

4.2首頁

4.3圖表編輯頁

4.3.1柱狀圖/折線圖/面積圖/餅圖圖表編輯頁

4.3.2智能剪貼畫編輯頁

4.4X軸Y軸編輯頁（柱狀圖/折線圖/面積圖/餅圖）

4.5設置編輯頁

4.5.1柱狀圖/折線圖/面積圖設置編輯頁

4.5.2餅圖設置編輯頁

4.5.3智能剪貼畫設置編輯頁

4.6圖表完成頁

五、總結

一、文檔綜述

1.1 文檔輸出環境

1.2 產品簡介

Chartistic，一款備受好評的小眾數據可視化app。

在這個到處都充斥著數據，以數據為導向的年代，日常辦公中隨時隨地都有可能需要對或多或少的數據進行可視化處理來幫助分析與演示。

雖然有很多的功能強大的工具可以創建圖表，但是卻沒有多少工具可以使創建更簡單、更具有交互性。

Chartistic無需登錄，打開即用，在移動端以交互的方式編輯數據，一分鐘內創建漂亮的柱狀圖、折線圖、區域圖和餅狀圖。將圖表以圖像的形式導出，并將其嵌入到演示文稿、電子郵件、文檔、電子表格中!

交互便捷，操作簡單的它已在43個國家/地區投入使用。在新加坡、泰國、菲律賓和越南，名列App Store的年度十佳應用榜單。上線起至今共入選 App Store 精品推薦 9 次，下載量累計24萬次 。

1.3 產品總結

目標用戶：需要對少量數據迅速進行可視化處理的辦公人群

產品定義：快速、簡單的移動端數據可視化工具應用，導出圖表作為PPT等演示工具的補充。

產品特征：

1. 無需登錄
2. 交互式編輯
3. 外觀選擇多樣性

二、全局說明

2.1 鍵盤說明

在不同頁面需要輸入編輯時，對應的彈出鍵盤的類型，數字鍵盤只能輸入正數

2.2 按鈕說明

圖表編輯頁面：

• 圖表上默認的隨機數值除外，標題編輯按鈕、X軸編輯按鈕、Y軸編輯按鈕在未輸入值前呈現灰色
• 圖表類型按鈕：當前類型按鈕為黑色，未選擇類型為灰色

X軸Y軸編輯頁面：

• Y軸默認的隨機數值除外，X軸名稱編輯框、Y軸名稱編輯框、X軸的值編輯框在未輸入有效值前預填文字呈現灰色

設置編輯頁面：

• 圖表樣式選擇按鈕：當前樣式按鈕為黑色，未選擇樣式為灰色

2.3 默認設置

新建圖表時

1. 默認已有8組數據，Y軸數值在【0~1000】范圍內隨機，X軸不賦值待編輯
2. 標題默認可見、居中對齊
3. Y軸默認最大值為1000，最小值為0，不顯示小數
4. 網格可見，行計數10，每一間隔的值100，對齊線不顯示、簡單圖表不開啟
5. 邊框默認選擇無邊框
6. X軸標題/Y軸標題/X軸圖例/Y軸圖例默認顯示
7. 背景/風格/樣式隨機
8. 單擊增加一組數據按鈕，增加的數據Y軸數值在【最大值~最小值】范圍內隨機，X軸不賦值待編輯

2.4 限制設定

1. 最多可輸入12組數據
2. Y軸最大值可編輯范圍為1-10000，最小值編輯范圍為0-9999，最大值需要大于最小值
3. Y軸數值的編輯需在【最大值~最小值】范圍內
4. 首先確定的是（最大值-最小值）/行計數=每一間隔的值 ，行計數的數量需要在【0~15】。因此每一間隔的值需要在【0.07*（最大值-最小值）~ （最大值-最小值）】這個范圍內，確保最多只能有14行，考慮到（最大值-最小值）/輸入的間隔值得到的行數有可能不是整數的問題，實際顯示的行數為（最大值-最小值）/輸入的間隔值四舍五入取整后的行數
5. 最大值、最小值、行計數、每一間隔的值僅可編輯為整數

2.5 頁面交互

1. 彈屏時底部頁面虛化，單擊彈屏以外的虛化界面，彈層關閉，返回上一頁面；
2. 圖表編輯頁面下滑展開X軸Y軸編輯頁面，從屏幕下方上滑關閉；
3. 圖表編輯頁面左滑展開設置編輯頁面，從屏幕左側右滑關閉。

三、產品說明

3.1 產品操作流程圖

3.2 產品功能導圖

3.3 頁面流程

四、頁面詳細功能說明

4.1 歡迎頁

• 頁面名稱：歡迎頁
• 入口：打開App進入
• 頁面說明：打開App自動進入歡迎頁，停留0.5秒后自動進入首頁

4.2 首頁

圖一

圖二

圖三

圖四

頁面名稱：首頁

入口：歡迎頁后自動跳入

頁面說明：

序號1：點擊出現其他鏈接彈層，首頁頁面置于底部并虛化（如圖三）

序號2：點擊出現新建圖表類型彈層，首頁頁面置于底部并虛化（如圖二）

序號3：

• 點擊進入圖表編輯頁
• 長按或者左滑出現復制、導出、刪除三個快捷處理按鈕（如圖四）

序號4，5：點擊關閉彈屏，首頁頁面置于頂部并解除虛化

序號6：點擊快捷處理按鈕消失，回到首頁，在首頁圖表列表第一個位置添加復制的圖表

序號7：點擊彈屏關閉，快捷按鈕消失，回到首頁，該圖表刪除，列表中該圖表后面的圖表前移填充空缺位置

4.3 圖表編輯頁

4.3.1 柱狀圖/折線圖/面積圖/餅圖圖表編輯頁

圖5

圖6

圖7

圖8

圖9

頁面名稱：柱狀圖/折線圖/面積圖/餅圖圖表編輯頁

入口：

• 點擊圖表完成頁編輯按鈕跳轉
• 新建圖表類型彈屏中點擊圖表類型對應按鈕進入

頁面說明：

主頁面：左滑展開展開設置編輯頁面，下滑展開X軸Y軸編輯頁面

序號1：點擊返回首頁

序號2：點擊進入圖表完成頁面

序號3：點擊圖表類型切換為折線圖，數值背景等設置不變，折線顏色為柱狀圖同一風格的單個顏色（如圖6）

序號4：點擊圖表類型切換為面積圖，數值背景等設置不變，折線與面積顏色為柱狀圖同一風格的單個顏色，折線的顏色比面積顏色深一個色號（如圖7）

序號5：點擊圖表類型切換為餅圖，數值背景等設置不變，配色也不變（如圖8）

序號6：單擊–切換圖表顏色風格

序號7，17，18：按住上滑/下滑–修改圓點高度，上方或者下方的對應數值一起修改，左側提示目前高度對應的數值，修改值在設定的Y軸最大值與最小值之間

序號8，9，10，12：輸入值之前按鈕為灰色，輸入后字體顏色由背景設置決定；點擊展開X軸Y軸編輯頁面

序號11：

• 點擊一次增加一組數據按鈕，增加的數據Y軸數值在【最大值~最小值】范圍內隨機，X軸不賦值待編輯
• 最多可增加至12組數據，增加至12組數據后按鈕變灰，點擊無反應

序號13：點擊后小圈即序號7變成刪除符號如圖9，單擊刪除符號刪除該組數據，當刪除至只剩一組數據時刪除符號變回小圈，不可再刪除

序號14：點擊隱藏上面的下拉按鈕、添加按鈕、刪除按鈕、設置按鈕，隱藏后圖表變為左向，單擊后以上按鈕出現

序號15：點擊展開設置編輯頁面

序號16：輸入值之前按鈕為灰色，輸入后字體顏色由背景設置決定；點擊輸入標題

序號19：點擊餅圖需要修改占比的目標扇形后出現兩個半圓形按鈕，按住按鈕滑動分隔線調整目標扇形角度，按鈕相鄰一邊的扇形同時被增大/減小角度，餅圖中間提示目前目標扇形角度對應的占比

4.3.2 智能剪貼畫編輯頁

頁面名稱：智能剪貼畫編輯頁

入口：

• 點擊首頁圖表縮略圖跳轉
• 新建圖表類型彈屏中點擊圖表類型對應按鈕進入

頁面說明：

主頁面：左滑展開展開設置編輯頁面

序號1：按住上下滑動更改有色部分的高度，左側占比數值一起更改，更改范圍為0%-100%

4.4 X軸Y軸編輯頁（柱狀圖/折線圖/面積圖/餅圖）

頁面名稱：X軸Y軸編輯頁面

入口：

• 圖表編輯頁面下滑展開
• 編輯X軸名稱按鈕，編輯Y軸名稱按鈕，編輯X軸按鈕，下拉按鈕點擊展開

頁面說明：

餅圖沒有編輯X軸名稱按鈕與編輯Y軸名稱按鈕

序號1：點擊保留編輯結果，收起X軸Y軸編輯頁面，回到圖表編輯頁

序號2：點擊屏幕下半部分或者從下半部分上滑，收起X軸Y軸編輯頁面，回到圖表編輯頁

序號3：

• 點擊一次增加一組數據按鈕，增加的數據Y軸數值在【最大值~最小值】范圍內隨機，X軸不賦值待編輯
• 最多可增加至12組數據，增加至12組數據后按鈕變灰，點擊無反應

序號4：

• 初始狀態為隱藏，單擊刪除按鈕即序號5后出現，點擊刪除對應的該組數據，點擊屏幕其他任意位置再次隱藏
• 當刪除至只剩一組數據時自動隱藏，不可再刪除

序號5：點擊編輯文本框與數值框之間出現小刪除按鈕即序號4，點擊刪除對應的該組數據

異常提示：

• Y軸編輯的數值>最大值時，彈屏【警告 所輸入的值大于最大值】，輸入框內容回到修改前的值;
• Y軸編輯的數值<最小值時，彈屏【警告 所輸入的值小于最小值】，輸入框內容回到修改前的值;

4.5 設置編輯頁

頁面名稱：設置編輯頁面

入口：

• 圖表編輯頁面左滑展開
• 圖表編輯頁面設置按鈕點擊展開

4.5.1 柱狀圖/折線圖/面積圖設置編輯頁

標題設置功能

頁面說明：

序號1：屏幕左側頁面點擊或者右滑返回圖表編輯頁

值設置功能

頁面說明：

序號2：最大值最高可設置為10000，最大值設置的值需要大于最小值，僅可編輯為整數

序號3：最小值最小可設置為0，最小值設置的值需要小于最大值，僅可編輯為整數

異常提示：

• 最大值>10000時，彈屏【無效值 請輸入小于10000的值】，輸入框內容回到修改前的值；
• 最大值<=最小值時，彈屏【無效值 請輸入大于最小值的值】，輸入框內容回到修改前的值；
• 最小值>=最大值時，彈屏【無效值 請輸入小于最大值的值】，輸入框內容回到修改前的值；

網格設置功能

頁面說明：

序號4：可見性為關閉狀態時，行數與每一間隔的值無法選擇與編輯

序號5：初始默認值為10，可編輯范圍為【0~15】，僅可編輯為整數

序號6：對齊條開啟狀態見圖，在圖表編輯頁面滑動所編輯的數據對應到Y軸上的數值（圖中的0、100、200、300等數值）時停頓一下，左側提示所對應的數值；滑動編輯的數值（如323、546等）不在Y軸上時，不顯示左側的數值提示

序號7：簡單圖表僅保留圖表主體形狀，如上圖

序號8：初始默認值為100，僅可編輯為整數，每一間隔的值需要在 【0.07*（最大值-最小值）~ （最大值-最小值）】這個范圍內，考慮到（最大值-最小值）/輸入的間隔值  得到的行數有可能不是整數的問題，實際顯示的行數為（最大值-最小值）/輸入的間隔值四舍五入取整后的行數

異常提示：

• 輸入的每一間隔的值不在【0.07*（最大值-最小值）~ （最大值-最小值）】這個范圍內時，彈屏【警報 請輸入0.07*（最大值-最小值）到（最大值-最小值）之間的值】，輸入框內容回到修改前的值;
• 輸入的行計數不在【0~15】范圍內時，彈屏【警報 請輸入小于15的值】，輸入框內容回到修改前的值;

邊框設置功能

圖例設置功能

背景設置功能

頁面說明：
序號10：主題文字注釋

序號11：四種主題單選，設計出圖標作為按鈕外觀，下方會出現對應文字注釋，所選擇的背景按鈕外層加一圈黑色示意

圖表樣式設置功能

頁面說明：

序號9：柱狀圖/折線圖/面積圖樣式說明如圖

4.5.2 餅圖設置編輯頁

標題設置功能

頁面說明：

序號1：屏幕左側頁面點擊或者右滑返回圖表編輯頁

表格設置功能

頁面說明：

豎向表僅可選擇左對齊或者右對齊，橫向表可選擇左對齊/右對齊/居中。

值設置功能

背景設置功能（同4.5.1柱狀圖/折線圖/面積圖）

圖表樣式設置功能

頁面說明：

餅圖樣式說明如圖

4.5.3 智能剪貼畫設置編輯頁

圖像搜索功能

頁面說明：

序號1：僅可輸入英文名稱搜索，無編輯內容時文本框內容為Search，字體淺灰色，輸入內容后字體變為黑色

異常提示：

當移動端無網絡時，搜索框下方“在線搜索圖像”更改為“連接中斷”，搜索框點擊無反應

標題設置功能

值設置功能

背景設置功能（同4.5.1柱狀圖/折線圖/面積圖）

圖表樣式設置功能

頁面說明：

智能剪貼畫樣式說明如圖

4.6 圖表完成頁

頁面名稱：圖表完成頁

入口：

• 點擊首頁圖表縮略圖跳轉
• 圖表編輯頁點擊完成按鈕跳轉

頁面說明：

序號1：點擊返回首頁

序號2：點擊進入圖表編輯頁面

序號3：點擊導出保存到本地或者分享

五、總結

以上便是我本次倒推撰寫的Chartistic的產品需求文檔，格式參考倒推“潮汐”APP的產品需求文檔。

這款App是一款很實用的手機應用，交互很有特色，因為過于追求操作的簡便，導致功能局限比較大，對于App的未來優化方向，筆者認為可以在以下幾個方向嘗試：

1. 增加“編輯兩組不同指標數據”的功能，因為在很多場景下是需要將兩組數據進行對比的，比如銷售額與成本額的走向對比；
2. 在折線圖與柱狀圖的編輯中可以將數值編輯為負值，例如毛利率這種類型的數據可能會有負值出現，而且負值是需要在數據可視化圖表中突出表現的數據。

這是本人第一次撰寫的產品需求文檔，一定有諸多不足，希望各位前輩不吝賜教，感激不盡！希望可以成為一名產品經理，創造出對用戶有價值的產品，不求做改變世界的產品，只求改變自己，改變眼前。

 文章來源：人人都是產品經理

大部分交互設計師接到需求后，就開始分析下競品、然后結合自己產品和自己的想法，就著手交互原型制作了，在這樣一個設計流程中，交互設計師很難有體系化的思考。

有沒有一套體系化的設計思路，讓交互設計師做出的方案又專業、又全面、又經得起挑戰和用戶檢驗的設計方案呢？

本文是我梳理的一套體系化設計流程與思路，希望可以幫到大家。體系化設計思路大綱如下：

• 拆解目標
• 確定設計方法
• 設計方案過程
• 方案細化和走查
• 數據跟蹤
• 后續迭代

拆解目標

作為一個交互設計師。在我們接到需求之后，首先需要弄清楚的是產生需求的業務背景是什么。其次是基于業務背景了解產品的目標是什么。最后弄清楚產品的用戶人群有哪些，用戶目標是哪些。

交互設計師通過從產品經理或者其他需求發起方那里了解需求生產的業務背景，了解為什么要做這個需求。在了解清楚之后，追溯需求最原始本質。

在我們實際工作的大部分情況下，大部分產品經理不會在需求文檔中將業務背景寫清晰，這時候我們交互設計師就可以將業務背景在交互文檔中輸出，并清晰的展示出來。

1. 業務背景是什么？

業務背景通常是我們為什么要做這個功能。通過做這個功能，對業務有什么幫助。通過業務背景，我們可以推演出業務訴求，并得到對應的產品目標。

2. 產品目標是什么？

產品目標是產品能得到什么樣的結果，對產品來說可以獲得什么樣的好處。所以在交互文檔的設計中要重點體現出產品目標。通過明確產品目標，可以清晰的指導我們做交互方案。

3. 用戶人群是哪些？

用戶人群主要是通過我們對現有產品的用戶畫像得到，并推算出使用這個需求的用戶人群是哪一類人，通過明確的用戶人群，這樣我們在做設計過程中，可以很清晰知道這個需求為誰而做。

4. 用戶目標是什么？

用戶希望通過使用這個功能達到什么樣的好處或目的。

5. 設計目標是什么？

通過業務背景、用戶人群、用戶目標和產品目標拆解出對應的設計目標。

以登錄注冊為例。業務背景是目前產品的登錄和注冊的效果不理想。對應的用戶人群分為兩類，分別為新用戶的注冊流程和老用戶的登錄流程。用戶目標是方便快速的完成登錄注冊流程，越簡單越快越好。產品目標是提升登錄注冊的完成率。

設計目標是拆解，如何能提高登錄注冊的完成率。那么設計師可以拿到登錄注冊的完成流程，看看登錄注冊過程中，哪些步驟轉化率低，那么對轉化率低的地方進行設計優化。

目標拆解就是對頁面進行數據提升具體優化方案，例如文案問題、視覺布局問題、交互路徑問題等。

確定設計方法

對于設計師來說設計方法有很多種。例如常見的有：目標導向、數據分析、用戶調研、設計走查、場景化設計、用戶體驗地圖、競品分析等。

在做設計方案過程中，一般不會將上述的方法全部用到，更多的是使用其中的一種或者幾種混合使用。

根據具體的需求選擇適合的方法。例如在做登錄注冊這個優化流程方案過程中，可以通過數據分析找到轉化率低和設計走查思考如何提升數據，就可以完成設計目標。

設計方案過程

1. 不同場景梳理

我們需要以場景的思維做場景分析，通過場景分析就可以清晰地描述這些場景，從而確定用戶的需求，并在這基礎上用交互方案滿足需求。

舉個栗子，產品提出一個需求：應用添加「商品列表按照價格從低到高排序」的功能，這還是老思維，是在「定義我們的應用」；

而如果從場景的角度來思考，用戶搜索某種商品，在列表頁會列出一長串商品，而用戶此時只想快速找到符合他的要求的那一個；而有些用戶在挑選的時候，會需要買價格便宜的，此時排序功能就是用戶的需求。

這樣從場景來理解，會更清楚地理解需求發生的環境，便于做出好設計。

比如，順著排序的場景，可以進一步想：有這樣需求的用戶在我們的應用里多嗎？如果多，那么意味著用戶經常需要進行排序的操作，所以在設計的時候，可以把排序的入口放的明顯一點，好操作一點，方便用戶輕松地進行排序。

對于使用滴滴快車的用戶，整個流程包含三個階段，分別為上車前，坐車中和下車后。每個階段都存在多種用戶使用場景。

2. 不同角色用戶

有時候需要考慮不同角色的用戶，例如后臺系統，需要同時考慮普通用戶、管理員角色和超級管理員。

三個不同角色的使用權限也是完全不同的。權限：普通用戶 < 管理員角色 <超級管理員。三種角色的主操作流程也是不一樣的，在設計過程中需要差異化設計。

3. 設計不同流程

明確設計目標、設計方法確定、弄清楚不同場景。接下來就是設計不同的流程。

一般先設計功能入口流程，接下來就是主流程和支線流程。最后才設計異常流程。

4. 方案細化和走查

在涉及到異常場景，且可以全局性復用的情況，則只需要全局性組件說明即可，不用每個流程都展示其異常場景組件或者頁面。

全局組件指的是整個產品通用的組件，例如全局斷網，操作成功、操作失敗、加載、空數據界面，404 等

全局斷網：一般是在首頁使用 tips 提示。用戶在其他界面點擊操作時，也會出現 toast 反饋提示用戶。也有一些 app 在用戶進入后出現對話框提示用戶網絡異常。相對于對話框，使用 tips 對用戶的干擾度更小。

操作成功：一般操作成功都是根據具體的使用場景出現對應的提示。

操作失?。寒惓Ｇ闆r導致操作失敗，這時需要統一的提示，通常使用 toast，也有一些使用對話框強提示用戶。

加載：涉及到全局加載和局部加載，全局加載在設計中要統一說明，例如上一個界面點擊進入下一個界面，使用的全局加載就需要說明。如果是一些小場景的加載，那么需要特殊說明。例如上拉加載，下拉加載，局部小區域加載等。

空數據類型一共有三類：

• 初始狀態的定義：初始化狀態，沒有任何內容，需要用戶進行某種操作才能產生內容的界面。
• 清空狀態的定義：通過刪除或其他用戶操作，清空當前的頁面內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。
• 出錯狀態的定義：由于網絡、服務器或者沒有找他其他結果等原因導致無法加載內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。用戶操作反饋的無結果界面也可以用這樣的思路來設計。

數據跟蹤

通過核心指標判斷設計方案是否符合預期，以此驗證設計方案是否成功，并為后續產品的迭代優化做依據。

1. 關注設計的核心指標

設計過程中，要關注設計的核心指標，針對于核心指標，進行針對性的設計。

如果改版的最重要（核心）的指標是任務流程完成率，先查看用戶操作流失率，然后分析找出流失原因，給出對應的優化方案。等到優化方案的產品版本上線后，對比完成率數據變化。

如果改版的最重要（核心）指標是人均觀看次數，則要思考可通過哪些設計策略可提升產品的人均播放次數。

舉個例子，新浪微博，以前版本用戶看完視頻后，視頻會有重播按鈕和推薦視頻，用戶只有進行下一步點擊才能播放下一個視頻。

改版后看完視頻會自動切換到下一個視頻。這樣的設計策略雖然綁架了用戶的行為，用戶從一個主動接收者，變成了一個被動接收者，但是這種策略能有效的提升人均播放次數。

2. 核心指標帶來的價值/收益

當驗證了核心指標往好的方向發展，這時候，就需要總結核心指標帶來的價值和收益，這樣的話設計價值才可以直接被量化。

舉個例子：一個 banner 的點擊率達到 3% 的時候，每天 GMV 約 200 萬，當重新設計了這個 banner，同時其他條件保持不變，點擊率提升到了 6%，這時候通過數據查看每天的 GMV 是多少，如果達到了 400 萬，那么這增加的 200 萬的 GMV 則是通過設計優化所帶來的。

后續迭代

設計師在交付稿件后，容易松懈，以為項目告一段落，就疏于后續的跟進工作。其實后續的跟進也很重要。產品測試版上線后，交互設計師應該跟進后續的走查和設計問題的反饋。

通過數據分析，確定上線的方案有哪些問題需要優化，建立需求池方便后續跟進優化，不斷完善產品設計。

文章來源：優設

好的用戶體驗是不會讓用戶注意到并毫無察覺的一種體驗。表面上看似非常簡單，但實際上設計師已經做出了非常多的設計思考。用戶越少的去思考界面，用戶就越能專注他們要完成的目標。在瀏覽頁面時，用戶的注意力不應該停留在界面和設計上，他們更應該關注的是如何達成他們的目的。所以作為設計師的首要工作就是通過事先清除障礙，為用戶提供直達目標的途徑。

“通常，飛速行駛的貨車不可能輕松地停下來。因為運用更多的動能去改變運動狀態是非常困難的。與其強迫人們從他們的主任務上轉移注意力，不如直接帶他們去他們想去的地方。”

——Luke Wroblewski，谷歌產品總監

換個思路來看。復雜和混亂的界面會迫使用戶去尋找解決問題的方法，而通常情況下，這些方法并不是一目了然的。用戶會因為過多的選項、界面、導航等感到困惑，用戶可能會在思考過程中感到不知所措。即便是很短暫的停頓，也足以讓用戶離開。

這種過度的思考就被稱為認知過載，在這篇文章里，我們將為你解釋如何避免認知過載。首先，我們需要明白我們大腦中存在過載風險的原因。

認知超負荷的科學根源
認知過載是指工作記憶中腦力處理的信息總量過多。當你的工作記憶接收到的信息超出其可以輕松處理的信息時，就會發生認知過載，從而產生挫敗感。
但這究竟意味著什么？工作記憶到底是什么？針對這些我們又應該怎樣進行設計呢？那就讓我們先來了解一下認知負荷理論的起源吧。

JOHN SWELLER和認知負荷理論
雖然對認知的研究可以追溯到幾個世紀，但直到20世紀80年代，澳大利亞教育心理學家約翰·瑞勒才將這項研究應用于教學設計當中。Sweller試圖為每一種類型的學習者找出最適合他們的學習方法，讓他們可以記住他們學到的所有知識。換句話說，怎樣的課程設計才是最佳的呢？
Sweller在1988年出版了“ 認知負荷理論，學習難度和教學設計 ”，這使他的研究工作達到新的高峰，于1994年重新修改并重新發表。他的研究中運用了數據組織結構中的圖表數據庫，講述了有效和無效的教學方法，而他對于工作記憶負荷極限的研究結果才是設計師們找到的最有用內容。
Sweller的研究在許多方面擴展了George Miller的信息加工理論。George Miller是一位認知心理學家和語言學家，他在20世紀50年代測試出短期記憶的極限。Miller的研究在于數字化設計，尤其是分塊技術方面，這將在后面討論。另外，Miller還創作了論文“ The Magical Number Seven, Plus orMinus Two“，這個理論促使許多設計師將菜單項的數量限制在5和9之間。
雖然這些理論最初是針對教育領域的，但它們同樣適用于用戶體驗（UX）設計。

工作記憶
如果你每次打開冰箱，都必須回答一個像謎語一樣的問題，“什么東西小的時候四只腳走路，長大了以后兩只腳，而老了以后有三只腳？”這是一個老段子。但是，根據認知負荷理論，使用這種讓人無奈的用戶體驗設計會讓用戶產生挫敗感。

要理解認知負荷理論，你必須要了解什么是工作記憶，大腦在短時間內用于完成任務的過程便是工作記憶。工作記憶必須借助外部刺激和短期記憶，并在需要時從長期記憶中抽取。通俗一點說，工作記憶相當于計算機內存，而長期記憶則相當于硬盤驅動器。
工作記憶和短期記憶通?？梢曰Q使用，但它們略有不同。工作記憶是處理信息的過程，而短期記憶更像是一個信息的便簽本，它雖然重要，但卻沒有長期記憶重要。
讓我們看看這篇文章是如何解釋這些差異的。在你閱讀的時候，你可能會遇到一個用藍色字體書寫的陌生概念。你的工作記憶需要知道藍色文本是什么意思，才能夠理解文章更深層的含義。你的長期記憶知道藍色文本表示鏈接，因此你的工作記憶知道點擊該鏈可以獲得更多信息。與此同時，你的短期記憶會記住你在文章中的位置，這樣當你從外部頁面返回時你不會迷失，但到了第二天早上，該位置就會被遺忘掉。

設計中的應用
Steve Krug（史蒂夫·克魯格）是一位很有影響力的作家，他在網頁設計中極力推崇認知負荷理論。他的書《Don’t make me think》被許多設計師認為是有巨大影響力的著作。
書中記錄了許多寶貴的經驗，下面就列舉一些的：
1、每一個頁面都要清晰明了。
2、用戶傾向于“滿意” - 也就是說，采取一個最簡單的解決方案來解決他們的問題，而不是最好的解決方案。此外，作為習慣的生物，用戶將一遍又一遍地使用相同的方法解決問題，而不會刻意尋找一個更好的選擇。
3、當新用戶可以熟練使用該系統來實現他們的目標時，系統的可用性就足夠了。
4、用戶使用網絡的絕大部分是想要節省時間。因此，用戶的行為通常會像鯊魚一樣“保持移動，否則就會死亡”。
5、后退按鈕是Web瀏覽器最常用的功能。
6、屏幕上顯示的主頁按鈕即使從來不被用戶使用，但也能讓用戶感到放心。
總之，用戶在瀏覽網站過程中哪怕是一瞬間的思考，也會對他們的工作記憶造成負擔。例如 “這個可以點擊嗎？“首頁按鈕在哪兒？”和“我怎么保存？”等等問題，都會不同程度破壞用戶體驗。

認知超負荷最常見的原因
許多設計元素都有可能對用戶的大腦造成超負荷，外界環境中會有更多的因素它們超出了設計師的控制范圍。例如：一個用戶瀏覽網站的同時會擔心第二天的工作報告，或者被窗戶外裝修的噪音所打擾，此時，無論你的網站設計多么簡單，這些都會耗盡他們的工作記憶。
我們要知道每個用戶的工作記憶能力都不同。隨性的用戶比那些對每一件小事都無比關注的用戶更能專注于你的網站。不經常上網的用戶往往比經驗豐富的網絡用戶思考的更多。
雖然我們無法量化所有的認知過載，但我們可以盡量的去避免他的產生，下面，我們對網頁設計中最常見的類型以及避免它們的最佳方法進行了分類說明。
1.不必要的操作
用戶的每一步操作都會增加他們的認知負擔。過多不必要的操作會打斷用戶的思路或者會讓用戶抓狂。因為用戶的工作記憶都集中在完成特定的目標上，所以多余的操作將迫使用戶投入更多的精力，這樣就需要更多的工作記憶才能完成任務，所以，那些不必要的操作步驟很考驗用戶的耐心。
速度和節奏是讓認知負荷最小化的基本因素。用戶希望以輕快，目的性很強的步驟來完成任務，所以應該提前消除一切延遲。

用戶希望在他們提交郵箱地址之前就知道他們將要進入什么網站，但Touch of Modern卻要求用戶在使用之前必須進行注冊！這個強制而又多余的行為將會嚇跑很多的潛在用戶。
解決方案
下面這個方法，可以幫助我們找到不必要的操作有哪些：列出用戶要完成任務必須要去做的步驟。例如發送電子郵件：
1、點擊電子郵件圖標。
2、點擊“發送到”輸入框。
3、輸入電子郵件地址。
4、點擊“主題”輸入框。
5、等等....
現在，重新審視列表并且找出可刪減的操作步驟，想到什么了嗎？你可以通過將光標一開始就自動定位在“發送到”字段就可以刪除步驟2.這將減少用戶的操作，雖然很微小，但你消除的每一步對于用戶來說都是友好的。

我們來看看谷歌的主頁。光標一開始就在搜索輸入框當中，因此用戶所要做的就是開始輸入文字。這些微小的交互提升了整體的用戶體驗，所以不要忽視它們。
2.過度刺激
雜亂無章的頁面會分散用戶的注意力，使用戶無法專注他們想要完成的目標。就像有好幾個人同時與你交談時你會很難集中注意力，當頁面上太多的圖片、動畫、圖標、廣告、文本類型和鮮艷的顏色奪取你的注意時，就會很難集中注意力。
記住，每個人的工作記憶在完成目標的過程中，會因為外界的刺激對每一步工作重新排序。每一次分心，尤其是視覺上的強烈刺激，都需要消耗用戶的一部分注意力。

LINGsCARS就是個極端的例子，你可以看到有強烈對比的顏色和絢麗的動效沖擊著人們的感官。在屏幕上，即便在兩個不同位置同時進行的動效依然會對用戶造成過度刺激。
解決方法
首先，減少一切不必要的元素。僅保留必要的內容通常是最佳的選擇，減少加載時間并簡化體驗。用戶更喜歡視覺簡單的網站，而不是視覺上復雜的網站。
你還可以進行內容區分以達到平衡的效果。太多相同的內容（比如文字或圖像）會讓用戶感到厭煩。所以，視覺內容要進行合理的組合，圖像、視頻、信息圖表等，能夠使頁面和諧，并便于用戶理解。
影視網站IMDb本可以在很大程度上輕松地只依靠圖片進行排版，但它反而運用同量的文字內容來平衡網站頁面。

在抽取出一個頁面上必須要展示的元素之后，你應該采用一種讓用戶立即能夠理解的方式組織這些元素。對稱或者不對稱的信息布局顯示都可以很快的被用戶所理解，也就是說，用一種方式，盡可能的減少大腦的工作。這樣不僅對稱和不對稱都能讓眼睛感覺很舒適，而這樣的結構也能讓界面交互更容易。
下面來看一下Groupon是如何布置頁面的吧。左中是文本類的垂直菜單，右中是一個有特色的凍酸奶交易文本描述，插在文本中間的照片和色塊的使用，分分鐘創造出一個讓人喜愛的沙漏結構。
下面來看看Groupon是如何將它的垂直菜單（中間偏左）和描述凍酸奶的文字（中間偏右）進行布局的吧。大圖居中被文字包圍著，這樣就打造了一個舒適自然的沙漏形狀。

對稱不僅僅是在屏幕的兩側應用相同的布局，它是視覺重心和視覺方向的平衡。通過這種方式，非對稱頁面也能看起來很有組織性，如下圖的OTHR所示。

將你的頁面內容精減到只包含簡單的和非競爭性的元素，這只是完成了預防過度刺激工作的一半。。不要忘記要以簡單的布局呈現這些元素。
3、太多選項（希克定律）
這有點自相矛盾：用戶需要更多的選擇，但是往往太多的選擇會使他們的大腦超負荷。

席克定律（選擇困難癥）為我們揭示出了一種現象：用戶擁有的選擇越多，他們做出決定的時間就越長。

作為設計師要去理解庫克定律，可以把每個選項看作是明亮的閃光燈，如下所示，太多的閃光燈會過度刺激用戶。

甚至像Rakuten這樣的知名網站也會犯類似的錯誤，因為他們沒有真正的理解這個設計原則。給用戶需要的而不是給他們認為他們需要的。
解決方案
假如你已經解決了不必要的和多余的選項，你可以將他們分別放入不同的組進行分類，你可以在百貨商店的網站上看到很多例子，這些網站擁有廣泛的產品選擇。
它不一定是太多的選擇, 只是一次有太多的選擇。如果你可以用隱藏菜單，抽屜和拉出其中的一種方式隱藏一些選項，那么你將獲得兩全其美的效果，這些超級菜單雖然為用戶提供了許多選項，但一定程度上不會給用戶帶來很大的負擔。

但是，隱藏式的導航欄不利于發現，因此電子商務和新聞等行業的設計人員應該注意。你可以通過放置其他類似產品的鏈接使缺點最小化（比方說亞馬遜的“相關購買”）從而最大限度地減少隱藏菜單的缺點?；蛘吣憧梢詺w納導航菜單的類別，將它們精簡為單行導航（如Apple和CNN那樣）。

你還需要注意應該如何組織整個網站的導航。許多與庫克定律有關的問題可以通過管理信息架構（IA）來處理，我們將在下面的“難以查找的頁面和功能”部分中討論。
4.太多內容
就像過度刺激和選項過多的問題一樣，提供過多的內容會將用戶的工作記憶拉向不同的方向。
顯然，你希望展現的只是重要的內容，但對于一些網站來說，一切都是重要的，如果你的網站也有非常多的內容，為了避免讓用戶產生困惑，應該對內容信息進行和里的組織規劃。

Arngren的問題并不是它展示了很多的產品，而是它同時展示了太多的產品。在組織結構上的調整將會給網站帶來更好的體驗。
解決方案
如上所述，George Miller的解決策略是“分塊”，將需要展示的大量內容以可管理的方式組合起來，以便于記憶，電話號碼分為國家代碼，區號，一組三位數和兩組四位數字便于記憶，而一連串的11個數字會很難被記住。
你想在商店主頁上放大量產品的圖片嗎？比起將它們全部羅列出來，不如通過他們的類型將他們分組羅列。Etsy通過根據不同的店鋪將產品進行分組展示。

還有文本組塊，文本組塊包括簡短的自然段，合理利用標題和副標題以及足夠的留白。
對于需要大量數據的長表單字段，可以嘗試采用多步驟表單。長表單可能會令人生畏，有時會導致用戶流失。你可以將表單的信息分在不同的頁面里，減少信息過量給用戶帶來的影響。記得一定要有一個進度標記來讓用戶知道還剩下多少頁。（可以總結為復雜的頁面簡單化）

購買機票總是涉及填寫大量的信息，其中沒有一項是多余的。Virgin Atlantic通過將其分解在多個單頁面上填寫來改善其繁瑣的體驗：選擇航班，填寫乘客信息，輸入付款詳細信息等。將所有這些信息放在一個長頁面上會對用戶造成負擔，也有可能會放棄購買。
5.模棱兩可的界面
認知超負荷的罪魁禍首先就是用戶界面混亂。永遠不要讓用戶花費大量的時間來弄清楚他們如何才能完成想要的目標，以及花費時間來弄清楚圖標的含義是什么。

并非所有用戶都是經驗豐富的，從而可以理解SpeedCrunch這種含義模糊的圖標。即使他們能夠識別代表Windows系統和Mac OS X系統的符號，那么位于右下角的那兩個圖標也會讓用戶迷茫。
解決方案
使用用戶已經熟知的視覺提示。用戶通常會用他所熟悉的符號來進行操作，即便是在以前從未使用過的網站上也是這樣。如果你覺得沒有新意，可以融合品牌特征巧妙的結合成為用戶所熟悉的形式。Home Depot雖然運用了較為普遍的圖標，但同時也賦予了他們品牌獨有的橙色。

標準標簽（如“聯系人”和“提交”）的按鈕比非傳統標簽（如“地址”或“開始”）更容易識別。通常已知的標簽可以提高用戶的瀏覽體驗，而不常見的標簽會讓用戶暫停以了解按鈕的功能。不要為了個性化而喪失了識別性。
另外，你如果真的需要一個從未見過的圖標該怎么辦呢？如果這樣，可以運用現實生活中的場景展示來讓圖標進行自我解釋，這種做法是連接現實和虛擬的橋梁。例如：早期的互聯網先驅選擇了一個信封來代表電子郵件，因為信封是郵件系統的明顯標志。
此外，要避免含義模糊的圖標，特別是可能還會被誤認為是其他含義的圖標，就像下列Issuu的圖標，有些是被人熟知的，但有一些卻不是。如果用戶必須通過點擊這個圖標來發現它的功能，這就會中斷他們的操作進程。

任何一個表意不清的圖標都應該附帶說明，告訴用戶怎樣操作。新的并且不常見的用戶界面，就需要更多的分步教程。例如，Slack就給出了一個完整的視頻引導來說明界面的操作流程。

6.難以查找的頁面和功能
即使用戶已經擁有他們所需要的一切，但他們可能還是不知道如何去尋找它。這樣就會讓用戶費盡腦力去尋找他們所需要的。作為用戶體驗中不可或缺的元素，導航應該放在明顯的地方，給用戶信心去任意瀏覽網站而不會迷失。

如果你覺得漢堡包圖標不好，那可以在看看Mojo Yogurt，它會要求你將鼠標懸停在左上角的徽標上以顯示導航菜單。

雖然圍繞著Logo有個小的動效，但對于整個屏幕的顏色和動效來說，它并不夠明顯。
解決方案
根據用戶的偏好理順你的信息架構。你的目標用戶群可能并不認可你的做法。因此，要想他們學習如何組織網站，卡片分類試驗會告訴你你的用戶將會如何對頁面和話題進行分類。

如果你還希望通過組合頁面和菜單項來消除多余的頁面。設計工作室Waaark通過將其工作室的簡介，團隊成員簡介和聯系信息這三個頁面合并到一個頁面來簡化他們的導航。

如果某些功能或特征比其他功能或特征更重要，可以運用視覺手段來吸引他們的注意，增加大小，添加動畫以及使用對比色以此來吸引用戶的眼球。

PayPal期望有更多的老用戶而不是新用戶，并通過設置登錄按鈕與吸引注意力的白色塊背景來迎合前者。
7.內部不一致
假設網站的主頁使用標準的藍色和帶下劃線的文本來表示鏈接，但另一個頁面僅使用藍色而沒有下劃線。當用戶瀏覽其他頁面時就會停下來去想，“它沒有下劃線，這還是個鏈接么？”他們甚至可能不會再去關心鏈接，而會被其他頁面的不統一分散注意力從而影響整體的用戶體驗。
要記住，最好的用戶體驗是不會被用戶所察覺的，而像上面這樣通常都會被注意到。
總結
1、認知過載是影響工作記憶的因素。當過多的信息阻礙決策和整體經驗時，就會發生認知過載。
2、使用不同的內容類型和結構化頁面組合，可以避免視覺混亂。
3、隱藏式菜單可以幫助用戶一次管理可用選項的數量，但降低了可發現性。
4、“分塊”和“步驟”等的方式可以防止認知過載。
5、UI元素和圖標應該基于用戶現有的認知上，這樣他們就不需要過多的思考，新的獨特的功能要加上解釋說明。
6、圍繞用戶的實際思考方式構建你的信息架構。卡片分類等可用性測試可以為你的目標群體揭示最直觀的導航方案。
7、視覺和功能的不一致，以及打字錯誤和語法錯誤，都會分散用戶的注意力。
8、盡可能減少冗余。另外，請留意如何最大限度地減少用戶操作步驟量和他們必須花費的精力。

文章來源：UI中國

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

關于「撤銷」有很多設計細節可以講，所以我花了兩周時間，將其濃縮成 3000 字，幫助各位產品設計師更好理解撤銷的設計細節。

撤銷的目的是幫助用戶取消當前的操作行為。

撤銷可以對用戶使用產品起到一種安全保障作用，讓用戶在界面中自由地探索而無需擔心操作所可能導致的嚴重后果。

或者用戶刪除了一個視頻，撤銷可以幫助用戶恢復他所刪除的內容；以及用戶進行了一步操作，覺得不太好，就通過撤銷來回退到上一步操作。

與之對應的叫「重做」，就是當用戶撤銷了當前的操作，但是想了想，還是行進到剛才已經操作的步驟好了。既給了用戶安全感，還給了用戶反悔的余地。

類似于下象棋的時候，你覺得這一步走得不好，所以悔棋了，雖然對家沒說什么，但是你心里又覺得過意不去，畢竟落子無悔真君子，所以你又把棋子放回去了（真是不怎么恰當的比喻呢）。

這樣做的目的是提升用戶使用產品的信心，增強對產品的控制感；鼓勵用戶放心地探索，快速建立起自己熟悉的操作路徑。

所以關于撤銷，我們可以從下面幾點來聊聊：

• 依次序撤銷
• 選擇性撤銷
• 撤銷在界面中的運用
• 與撤銷沖突的元素

依次序撤銷

它的意思是，依次撤銷之前的操作。

在尼爾森可用性原則里，就有一條類似的原則存在，即 User control and freedom（允許用戶自由操控）。

很多人把這條原則解讀為「撤銷原則」，本質上是沒什么問題的，因為撤銷確實需要讓用戶自由操控。但是早期的撤銷，并不「自由」，而僅僅只是讓用戶在一定范圍內「可操控」。

比如早期在一些產品里，執行多步操作，但往往只能撤銷一次，要想繼續撤銷是不被允許的，所以它的操控自由度就很低。那時候如果把這條原則解讀為「撤銷原則」，顯然是不合理的。

于是，后來逐漸延伸出多次撤銷的功能。

我記得最早使用 PS 的時候，在 PS 里面就有關于撤銷次數的范圍設定，但是我忘了具體范圍的上限與下限是多少了。

使用的方式是，比如我設置參數為 10，那么之后我的撤銷也只能操作 10 次，要想繼續撤銷，就會告知無法繼續了。

現在的很多工具產品應該是沒有這些限制了，比如 Sketch，Word 都是可以無限次撤銷直至最初始狀態或剛打開文件的狀態。

相對早期撤銷的使用邏輯，后來可多次撤銷的操作在自由度上，確實是好了那么一些。

它就是在「單次撤銷」的基礎上，給了用戶「多次撤銷」的機會，并讓用戶回到自己滿意的位置。

但是這里的撤銷，它還不夠自由，因為它是「依次撤銷」—— 每一步撤銷用戶都得經歷。

選擇性撤銷

當撤銷隨著用戶場景的變化而進化之后，才真正具備了比較自由的操控方式。

讓撤銷具備「選擇屬性」，必須與另一個元素做一個結合，那就是「歷史記錄」。

繼續拿 PS 舉例。

大家看到上面這張圖，當你在 PS 的畫板里完成了一系列操作之后，發現后面有一些東西做得不是很好，想回去重做，但是依次撤銷又覺得不好把控，于是就通過操作歷史，來選擇具體回退到哪一步。

相比于依次序撤銷，選擇性撤銷的自由度更高，也更符合其對尼爾森可用性第三條原則的解讀。

或者再通俗一點的例子，瀏覽器。

假設這時候你打開了 5 個網頁，關掉了其中 3 個，但是突然想起第 1 個關掉的網頁還有值得收藏的內容，于是依次撤銷 3 次，才打開第 1 個關掉的頁面。

而現在有網頁歷史記錄，就可以直接幫你打開之前關閉掉的所有網頁中的其中一個。

解決了用戶每一步都要經歷的問題。

當「撤銷」與「歷史記錄」結合之后，「選擇性撤銷」的出現還能解決掉「依次序撤銷」的一個關鍵問題：撤銷重做之后，無法復原。

通俗點講，就是當用戶撤銷到之前的操作，進行了新的操作行為，那么原來舊的那條線路就被廢棄了?？磮D：

當用戶操作到第 5 步，然后撤銷至第 3 步，再執行一次新的操作，那么步驟 4 與步驟 5 就會被廢棄。

大家知道很多設計師都會做版本記錄，因為 PS 的歷史記錄雖然在撤銷操作上方便了很多，但無法復原之前的操作邏輯依舊不能滿足一些設計師的訴求。

畢竟不廢棄的話，撤銷操作的邏輯就會很復雜；且通?！高x擇性撤銷」伴隨解釋，說明用戶清楚知道自己當前行為會造成何種后果。但它并不能解決用戶操作過程中實際存在的這類問題。

而「選擇性撤銷」的「版本記錄」可以解決這個問題，來看下面這個例子。

結合歷史/版本記錄，比如用 Notion 或石墨寫了一篇文章，它們都會有版本記錄，過程中會根據時間維度與內容變更維度來判斷是否進行保存，那么當用戶想回滾到之前的那段內容，只要對這些版本進行點擊查看，然后選擇具體撤回到哪一步即可。

比如我今天（2019.11.05）早上花了半小時最后對文章做了一次整理，添加了圖片，它就會記錄其中的操作變化，且可進行選擇。這里無論如何撤至哪一步，其它內容都會有留存，不會消失。

也許這已經不是通常意義上的撤銷，但它確實是撤銷的升級版。

這樣看起來是不是自由操控度要高很多呢？

到這里，我只是講了「撤銷」的特性，下面來聊下它在界面設計中是如何應用的。

撤銷在界面中的運用

我們現在在很多產品里都能看到撤銷，在網頁里與移動 App 中，它的使用形式雖然多樣，但本質上并沒什么區別。

大多就是單次撤銷，因為用不到多次撤銷，多次撤銷更多是在工具里被使用。

比如油管的撤銷使用：

當用戶對一個視頻進行「不感興趣」的操作時，視頻內容會變成右邊這樣，可撤銷。這個內容會一直存在直到用戶刷新頁面時才會消失。

類似的還有淘寶網頁端的購物車，當刪除添加的任一商品后，其也會在附近位置出現可撤銷的操作。

在網頁產品中，撤銷的運用大多是這樣的。

我們再來看移動端產品對于撤銷的應用。

在 iOS 中比較常見的是微信的搖一搖手機撤銷正在鍵入的內容：

這類撤銷較為被動，經常是在無意間觸發，所以不是我們主要要聊的。

而有一類產品，撤銷會以 Snackbars 的形式出現，如圖：

當這類郵箱產品，刪除了某封郵件后，在底部就會出現這樣的提示，告知用戶可撤銷上一步行為。

更多的還是工具類產品，比如修圖類產品 Snapseed：

它有單次撤銷，也可以重做，還能多次撤銷，多次撤銷就是點擊「查看修改內容」之后，右圖出現的樣子，它會把所有步驟都呈現出來，給予用戶選擇具體撤銷至哪一步。

其實更多的也就是這樣了，但是，為什么呢？為什么在非工具類產品里撤銷很少見呢？難道用戶從來不會誤操作或操作之后反悔？

下面一節來解答。

與撤銷沖突的元素

先放結論：當某個功能具備撤銷屬性時，切勿再使用二次確認對話框，反之同樣成立。

撤銷與二次確認，是兩種東西，雖然有時候解決的是同一個問題，但是它們的屬性是完全不同的。

舉個例子：

上面這張圖，左邊是在執行操作前彈出的確認框，右邊是執行操作后彈出的提示框。

二者的區別很明顯，二次確認的刪除提示框更具警示效果，后者作為提示，較為弱化，且通常是在用戶操作完成后彈出。對于用戶來說，在非工具類產品中，前者更好的抑制了用戶的沖動行為或誤操作行為。后者作為提示類控件，不具備警示效果。

所以它們不應該同時出現，且它們雖然是解決同一個問題，但是是完全不同的情況。

于是，在大多數產品中我們很少看到撤銷的使用，因為大部分需嚴謹的操作都會有二次確認，并不嚴重的操作也就不需要任何提示。即使是上述提到的郵箱刪除，沒有二次確認也是因為它有撤銷作為提示且還有回收站允許用戶檢查確認。

所以，除非是場景與之密切相關的，比如社交產品內容發送后的撤回功能。

微信早期的撤回，只是撤銷，它并不具備「重做」屬性，現在撤回，內容會重新出現在輸入框讓用戶重新編輯。

它們之間的差異是：它并不會產生嚴重后果，但確實會產生小問題。比如誤操作發出信息，或發出后發現話術并不嚴謹。

所以這一段內容只是想告訴各位：二次確認操作與撤銷操作是兩種不同的東西，雖然看起來是解決同一個問題，但它們的差異也是非常明顯的。必須謹記。

另外還有個提示：心細的同學會注意到文章里或其他產品里出現的「撤銷」通常也會寫成「撤消」。在別的領域里這是兩種不同的內容，但在產品設計領域里，目前并沒有對這兩者做明確的區分，所以暫時不用過于糾結。

總結

這篇文章講了很多內容，我在這里梳理下：

• 撤銷分為依次序撤銷與選擇性撤銷；
• 依次序撤銷有單次撤銷與多次撤銷，以 PS 為例；
• 選擇性撤銷大多在工具類產品里被使用，它與歷史記錄結合，解決了依次序多次撤銷部分內容被覆蓋的問題；
• 在非工具類產品里，被使用更多的是單次撤銷，是因為場景限制；
• 撤銷與二次確認不可同時出現，它們看起來是解決同個問題，但之間存在較大差異。

所以當你設計的產品要用到撤銷時，也要注意這些細節問題。

這就是本篇文章的所有內容了。其實這篇文章里包含的內容有很多，而且有很多爭議點我都沒放出來，直接一筆帶過給出正確結論了。寫這種大部頭文章太累，要思考的點很多，需要幫助讀者從多視角排雷，很可能導致初學者在讀文章過程中出現閱讀吃力的問題。所以之后還是會挑一個點來寫吧。

文章來源：優設

我們通過門鈴聲兒得知門外有人來訪，也能通過電話鈴聲得知正被人呼叫。短信通知也有著類似的作用，包括各類產品的消息推送。

但不同的是，消息推送的重要性隨著「通知」被濫用而變得不那么重要了。它們變得不像門鈴或電話鈴聲起到的作用性那么大，包括短信現在也大多是垃圾信息。

而且，通知越來越多地通過各種方式去觸達用戶。比如消息未讀的紅點提示，或者顯示消息的數字統計，以及手機使用過程中的頂部提示與聲音或震動的提醒，等等。

但我們還是無法抑制點擊圖標的沖動，這僅僅是因為它具有未讀的計數或紅點提示，即使我們已經知道當中的內容并不重要。

而我要說的是，當通知內容變得次要且被濫用之后，它仿佛成了一種違背設計原則的功能 —— 中斷用戶當前行為。因為它打破了用戶與產品之間的層級關系，破局至產品之外來吸引用戶的注意力，這是一個非常打擾的行為。如果我在看書，突然收到一條并不重要的消息，那我一定會非常反感。

所以，為了不被「紅點」支配，以及不讓通知所打擾，我會把手機里所有產品的消息推送都給關了。

但是，以上內容并不能說明通知的無用論。同樣有許多用戶還是沉迷于通知的使用上，它所控制的是用戶對于某個產品的控制欲，擔心錯過某條消息，就好像我在豆瓣寫了篇隨筆，就想看別人給我點贊評論的消息，但我又不可能一直盯著，所以通知這時候就起到了一個很好的作用。

以至于對于優秀的產品人或設計師，包括運營來說，利用好通知，就能掌握用戶心理，巧妙的將用戶留在產品中。它們甚至有助于與打算放棄產品的用戶建立聯系并促進互動。

那么，我們應該如何更合理的設計通知呢？下面我們通過「通知的組成部分」以及「通知的使用類型與規則」來詳細做一次拆解。

通知的組成部分

關于通知的簡單定義：它是一種吸引用戶注意的功能模式，讓用戶獲悉新事件的信息動態。產品將其發送給用戶并與用戶產生交流。

因此從這個定義中我們可以知道，通知有兩種形式，分別是被動只讀型和操作反饋型。

被動只讀型，是指該信息可讀，但不可進行操作；操作反饋型，是指用戶可對該通知進行操作，如某寶訂單支付成功后的地址信息確認通知。

所以在梳理組件的時候也要注意掉這個差異。

1. 消息中心

這里的消息中心，是一個信息匯總中心，但并不一定是信息來源。意思是，信息來源可能是有很多用戶在你的文章下面點贊了，而這個點贊行為被匯總到了消息中心，再用消息中心指引作者去到文章頁面查看具體詳情。

所以它是一個匯總表。但也有可能它就是信息來源點，比如一些系統通知，告知要升級，因為它沒有其他功能可承載，所以只會在消息中心里出現。

或者類比 iOS 系統的通知中心，如果通知是 App 推送的，那么它會指引用戶進入某個 App；如果通知是系統行為，如勿擾模式，「6:00 前來電和通知將會靜音」這個通知，是只可在通知中心進行操作的。想要更改，就需要手動打開設置。

2. 通知指示符

它可以是點，也可以是計數器，只要表明目前消息中心有新的信息就可以。我個人一直覺得這就是讓我們多數人養成強迫癥的罪魁禍首。

3. 信息標題

它主要是指該信息來自于誰或屬于什么子類型，比如用戶互動點贊消息，評論消息，系統消息等等。用戶可以通過標題來獲悉該信息類型，再通過內容摘要來判斷內容是否重要。

當然，這里的摘要如果過長，就需要省略處理，引導用戶進入消息源或消息中心。

4. 推送時間

推送時間是一個看起來簡單，實際上也好像不是很復雜的邏輯。只要說明該通知的發送時間即可，但是需要注意的是時間段問題。比如幾分鐘前，幾小時前，幾天前，這里的邏輯是按照時間推進規則持續增加來告知用戶該消息的推送時間節點的。也就是過得越久，時間概念就越大。

5. 通知圖標

上面講到消息類型，我們也經常會在各類產品中發現不同通知的類型會匯總在各自的類型下。包括用戶所接收到的信息，通常也會告知用戶該信息屬于什么類型。有時候，標題可能會更細，但是用戶通過圖標可以判斷該信息屬于什么類型，甚至都不需要仔細查看標題與內容。

但是，并不是所有產品的信息都可以通過圖標來判斷，有時候圖標只是一個大方向，如果手機鎖屏，相對于用戶來說，這條通知只是告訴用戶該信息是由什么產品推送，而并不能指向至該產品的什么類型的信息。所以在使用的過程中，同樣需要根據業務的場景，謹慎地選擇圖標。

6. 閱讀指示器

它就像是上面提到的紅點，這里指的是進入 App 的消息中心之后，所顯示的內容。

7. 操作行為

這里的操作行為分兩種，分別是 App 外與 App 內，它們之間的操作邏輯是不同的。iOS 系統通知的清除操作，只是在系統的通知中心將該信息清除，進入具體 App 后，這條消息還是會存在。而在 App 內刪除該條信息，則該信息才會真正消失。

所以從上面可以看到，通知推送，是有兩大類別的，分別是 App 外與 App 內，它們之間的邏輯關系與展示形式會有所差異，需要根據具體情況進行設計分析。

8. 小結

對上面的內容進行總結，可以得到這樣一幅畫像：

大部分系統或產品的通知組成，都可以通過此圖概括，唯一不同的是，它們會隨著不同的業務而發生變化。

比如豆瓣的推送消息告知用戶近期有新的電影上映，那么通知來源要么是電影模塊的功能詳情頁，要么是通知中心的系統消息；而通知類型就是內容更新；詳情則根據具體內容來組合排列；最后送達至用戶。

而其中的差別就是，如果是通知中心推送的，用戶點擊之后則是進入通知中心列表。如果是具體功能推送的，那么用戶點擊進入的就是具體功能頁面。如下圖所示：

從這里可以看出，通知是有具體模式的。

一旦確定了通知的主要目標，以及想要解決的問題，包括它們如何對業務產生作用以及對用戶形成吸引力，就可以確定通知的具體樣式了。

在這一節里只要知道通知的組成部分與通知模式如何指引用戶進入 App 即可。后面我來帶大家理一遍邏輯，以及在設計通知時要注意哪些問題。

通知的使用方法

聊完上面的內容之后，我相信大家對通知的組成與使用模式已經有了全新的認識，但也僅此而已，我們還是不知道一個優秀的通知功能應該從哪些方面去提升用戶體驗。這里面所包含的不止是表象，還有內在的規則邏輯。所以從這一節開始，我們仔細來梳理一遍。

從我們平時使用到的，以及上文提到的，可以大概先梳理出幾類常見的通知類型。

1. 用戶信息類通知

這種類型的通知有很多，比如微信消息發送，知乎私信，手機短信等等，它們主要由用戶主動生成發送至其他用戶被動接收，作用就是促進用戶與用戶之間的互動關系，以提升用戶使用產品的頻率與時長。

這種通知，可給予用戶操作也可不給予操作，不操作就是讀取，并回復；操作就是可對該用戶的信息進行屏蔽、已讀、刪除等設置。

這是最常見的通知類型，在多數社交產品與有社交特性的產品里都能看到。

說明

之所以給予用戶信息的操作行為，是因為用戶信息可分為感興趣的與不感興趣的，它主要取決于人。不感興趣的人，頻繁的發送信息，會影響用戶對產品的好感度，畢竟有很多用戶消息并不是用戶想要接收的，所以在社交產品里，用戶可刪除好友，或拉黑好友；在有社交屬性的產品里，用戶可拉黑賬戶，以達到不被騷擾的訴求。

如果沒有到達刪除好友的程度，也可對該好友的信息進行屏蔽，甚至對該好友信息做已讀而實際上未讀的處理；或者對重要信息做未讀而實際上已讀的處理。

當然，用戶還能對群消息做更復雜的設置。這就是產品對這類通知的一種優化方式。

2. 系統推送類通知

我們經常會在手機上收到一種系統類通知，或者在 App 中也會收到類似的系統通知。大多是關于系統升級，密碼更新等。

這類通知多數是用戶被動接收，且對于系統與用戶來說是較為重要的。當然也有不重要的，比如 App 更新說明的通知，告知用戶新功能有什么變化，或系統更新了什么等等。

對于這類通知，用戶大多無法進行設置，因為它們比較強制，沒有可以商量的余地，類似于告知用戶：我們有新的消息，比較重要，你來看看，即使你不打算更新或執行也來看下。

說明

系統類通知，通常來說較為被動，要么強制用戶執行操作，要么就是提醒用戶系統近期做了更新，或者是一些并不重要的信息提示，比如勿擾模式。

強制類系統通知不能頻繁，否則會給用戶造成控制欲反制的副作用。類似于本身用戶使用產品需要對產品享有控制權，現在反而被產品控制了。這是不行的。

3. 通用推送類通知

這類通知就是第一節中提到的那些，比如點贊/評論，內容更新等等，這類通知如果是忠實用戶，那么或許不會反感它的頻率，當然還是需要適當。但如果是普通用戶，那么造成的影響就是直接關閉該 App 的所有通知。

我們現在的很多人，之所以開始反感通知的主要原因，就是這類通知所造成的。內容不斷更新，隨著時間的推移，每天推送多條對于該用戶來說無用的通知。包括只適合一些符合條件的用戶參與的活動通知也推送給所有人，那么用戶就會逐漸對這類產品的通知失去興趣，造成無法彌補的損失。

即便像某團一樣，經常彈出開啟通知的彈框，也依然無法召喚回用戶。這就是很典型的下場。

說明

通用型通知，如果是業務很復雜的產品，就必須建立通知推送的功能模塊，給予用戶進行選擇接受哪類信息的權力。允許用戶進行相應的設置，如活動類推送可拒絕接收。

在很多產品中都已經置入這樣的推送模塊設置，如下圖。

這類內容就是針對于產品的具體業務進行細分。

比如興趣精選，私信消息等做好類別劃分。用戶可對自己感興趣的通知做選擇性的推送接收。

另外就是，在相同賬戶的不同設備之間，推送應該同步推送與被處理。不能這邊推送了，那邊沒推送，或者這邊處理了，那邊沒被處理。

4. 智能推送類通知

不知道大家是否有印象，在使用如大眾點評等產品時，只要你切換了城市，產品就會推送通知告知用戶該城市有哪些值得游玩的景點與品嘗的美食。

雖然這類通知還算不上多少智能，但至少在用戶群體中是存在這類訴求的。而這類訴求有時候并不能主動感知，因為用戶可能會想不起來通過哪類產品來查找附近美食。當這么一條通知出現的時候，正好解決了用戶的問題，反而提升了用戶對于產品的好感度。

現在很多產品的通知都逐漸智能化，不會像以前那樣，三更半夜發來一條無關緊要的通知。而出現這類問題的主要原因還是在于產品、設計、運營，在這方面沒有下過功夫，只將通知作為一種普通的工具來使用。導致用戶開始排斥通知，將其強制關閉。之后，就很難再讓用戶開啟了。同理心效應，當做這類功能的時候，可以回想一下自己是如何被其他產品打擾的。

隨著大數據的發展，我相信未來的通知系統會更加全面，且能做到千人千面的模式，不過在此之前，各位產品設計師，還需要對通知下一番功夫才是。

5. 小結

我們還可以繼續舉例說明，但是基本大同小異，所以到這里為止，我再對上面的內容做一次總結，梳理出一個好的通知應該是如何設計的。

干擾最小化：通知本身具有強制性和干擾性。它的目的是把用戶的注意力吸引到產品上來，所以要認真思考發送通知的內容、時間、頻率；不要提醒用戶當前屏幕上已經處于展示狀態的內容；也不要推送與用戶無關的系統信息。

跨設備：當用戶讀過了某條信息，這條信息應該不再做展示。同理，用戶也應該能夠在其它更適合接收消息的設備上找到已讀信息。用戶通知應該在所有設備上進行同步。

允許設置：允許用戶在「設置」中禁止或調整通知的形式。如案例一，通過選擇推送內容，來影響接收推送的頻率。案例二，可選消息提醒的形式是紅點+數字，或僅是紅點。

時效性：良好的通知應盡可能實時推送。而不是等這件事情都過去很久了，才推送給用戶知道。

支持匯總：把同類型的通知合并為一條，并顯示信息未讀數量。也可以考慮一鍵展開通知，顯示信息詳情。

可操作性：把通知和操作結合在一起，讓用戶不需要打開首頁就能對特定通知進行常規操作。操作應該清晰明了，且僅在未重復默認操作時提供。同時操作應該是有意義、實時、和內容對應的，并且能讓用戶完成某個任務。如案例一，可以在不打開郵件的情況下，直接對通知進行管理、查看和清除。案例二中的操作針對的是未讀郵件，可便捷地在通知板面進行回復、刪除、標為已讀或垃圾郵件。

總結

對本篇文章的拓展總結：

• 通知具有召喚屬性，但是頻率過多就會變成打擾，所以要注意通知的頻率與內容重要性；
• 設計師或產品經理應該將通知的內容分類梳理出來，以便維護或新增必要需求可能需要用到的推送信息。
• 通知一般為兩種類型，一類是推送只讀型，一類是操作反饋型；設計師需根據不同類型的通知做好對應的設計，針對具體問題具體分析；
• 想要利用好「通知」，也需要對業務有詳細的了解，再代入本文所列舉的注意點，就可以設計出一個體驗更佳的通知模式。
• 通知規則不會脫離本篇文章的范圍，所以只要詳細研讀，必會有所收獲。

文章來源：站酷

先問一個問題：怎么樣衡量一個設計好與不好？工作中實踐越多次，越會發現華麗的設計稿并不是體現設計師專業能力的唯一標準。普通設計師和高級設計師區別在于，設計方案是否具備完整設計思路；設計對于業務有沒有真正的價值體現；以及設計方案的推動落地的完整性到底有多少。設計越往后走，越考驗產品思維，設計思維，以及設計推動能力。這是產品設計師需要關注的核心三要素。

設計師在工作中接到設計需求會不自覺的第一時間想著如何去進行視覺表達，視覺表達確實非常重要，也是公司對于設計師的核心價值的定位之一，但視覺表達只是其中設計專業本職工作中的一個環節。設計師還要應該能夠站在產品、設計、技術等不同維度去思考設計方案的可行性。產品打磨-視覺呈現-落地執行，在這三個核心點里面設計師分別有不同的定位和價值所在。 

  一. 產品“雙標”滿足   

產品打磨包含產品規劃，內容組成，界面布局，交互梳理等等…所有環節的工作是為了符合產品最終的目標。產品所有的能力會核心圍繞兩個點：1商業變現 2用戶需求滿足。這兩個目標在產品執行的環節有時候會有一些沖突，在產品打磨階段設計師通過怎樣的方式，做到既滿足產品商業目標又滿足用戶體驗需求？可以按照以下幾個步驟進行分析尋求切入點： 

這里用騰訊動漫付費模塊舉例說明： 項目背景是騰訊動漫產品要做付費體系升級設計，接到需求先有由產品源頭一步步深入，逐步展開設計方案的規劃。 

 01 產品目標確認  

通過對項目背景的解讀和產品方案的深入了解，以及總結當前存在的一些問題，可以明確得到項目中產品核心目是什么。付費升級核心原因是付費轉化低，用戶付費意愿不夠強烈。此次升級的核心目標是促進內容消費，提升付費率。 

 02 分析用戶路徑  

確認目標之后從哪個模塊兒開始進行首要需要考慮的。對于現有現有功能的升級，建議核心從產品本身著手，可以根據用戶行為分析，獲取用戶常規使用路徑，找到用戶使用場景下的核心目的，從而去挖掘用戶在付費路徑下的訴求點，根據訴求點找到付費升級的觸點。這里我們羅列了用戶閱讀產品的路徑。 

 03 觀察用戶核心需求是否被滿足 

 用戶在每個場景下都會有“痛點”和“癢點”。比如在閱讀前，核心目是想快點看到漫畫內容；閱讀過程中，想要及時宣泄對漫畫的故事情節的感受；閱讀后，希望找到更多相關內容或者能夠和內容有更多的互動。目前產品在這三個關鍵的路徑節點都存在一些問題，閱讀前對于付費缺乏正向引導，閱讀過程中互相行為較少，閱讀后沒有更多延展內容可供消費等。 

 04 洞察設計切入點  

根據用戶在閱讀 “前 中 后” 關鍵路徑的節點的不同情緒反饋，我們可以做出找到相應情感滿足切入點，并且制定解決方案 

 05 制定設計方案  

將之前找到的設計情感切入點用交互和視覺的形式呈現出來，盡可能完整的表達清晰。下面展示是關于付費升級優化的完整視頻DEMO。整個方案采用趣味情感化形式為核心設計思路，逐步去引導用戶付費。讓用戶在趣味互動中完成產品的商業轉化目標。 

https://v.youku.com/v_show/id_XNDM0NDg1MzY2MA==.html

 二. 設計呈現的“差異化”   

視覺呈現是設計師們都比較擅長的工作，但不同專業高度要求下方案最終呈現出的效果是完全不一樣的。好的設計方案，需要在設計上做出明顯的“差異化”，這里的差異化是指要區別于常規輸出一般的水平。差異化的可以從多個點入手：

優質的設計美感：

美感是作為設計師首先需要培養的技能之一，也是在后續職業生涯的一直需要用到的技能。設計師被神職化的很大一個原因就是因為設計師的美感比一般人要好，有懂得欣賞美、鑒別美、以及創造美的能力。單一從視覺層面，設計作品是合格品還是精品，最終取決于畫面的精美程度。項目不分大小，再小的一個項目都可以做出精致品質，這也是體現設計師專業度的核心衡量之一。

完整設計思路：

設計方案的完整性也能夠很好的設計師專業度的差異化，幾張圖的設計稿和一個有完整設計思路的設計方案在品質上自然是明顯差別的。設計師不光需要將設計呈現出來，更需要有嚴謹的設計思路并且表達出來讓受眾到你的設計想法。設計前期分析、中期執行、后期落地以及迭代優化，能夠讓設計師有意識的鍛煉和提升自己的設計思維，對于設計師能力提升有必然的幫助。 

獨特創意：

設計差異化呈現上，創意是一個非常好的切入點。行業大趨勢的前提下，現在同類產品越來越趨于同質化，受眾使用產品的時候都會有一些常規認知，關于功能的、交互操作的、內容組成的等等，淘寶和京東、大眾和美團、甚至QQ音樂和網易音樂在產品使用體驗上都有高度重合的地方，這些已經在用戶心智中形成習以為常的認知感受。如果能夠在用戶的常規認知里，用創意手法呈現出超出他們預期的內容使其驚喜，產品設計就會有明顯差異化體現。 

善用情感化：

具備美感的設計能讓作品看起來有高級感，但更為高級且有效的是能夠引起用戶情感共鳴的設計。設計是主觀的，對于設計每個人都有自己的想法，也正是因為主觀的設計感受，能讓設計在情感化打造方面可以有很多的嘗試方向。能夠引起受眾主觀情感上的共鳴和認同的設計，會形成產品的核心記憶點之一。設計師對于情感化設計往往會有一些誤區，認為圖形可愛，色彩羨慕，動效流暢且能夠形成一套視覺體系，就能夠算情感設計。真正的情感設計是需要從用戶角度出發，挖掘用戶的認知領域和喜歡，從而去進行符合用戶情感訴求的呈現。 

三. 方案推動的效能管理 

設計方案輸出只是整個產品生產流程中的一個核心環節，產品上線后體驗如何最終取決于落地實現的程度。在方案落地支持過程中，效率協調和實現能力是保證設計方案貫徹一致執行的關鍵因素：

 協作  

產品設計師工作協調分為內部協作和外部協作。內部協作即設計師之間的溝通協同，主要內容是如何保持設計語言一致性，除了制定設計規范，還可以建立公共控件庫，線上調用?？丶炷軌蚴乖O計師協作無學習成本，設計師輸出設計稿效率也能夠大大提升，同時保一致性。

外部協作主要是和下游的技術同事直接的工作對接，設計方案的交接方式以及開發獲取信息的效率很關鍵。在開發接收設計方案的時候，盡能力降低獲取成本以及理解成本。比如設計稿的標注，在標注上設計師一般會花很長時間，開發也需要逐步查看，偶爾還會有標注遺漏的地方。我們團隊會直接采用插件，設計稿及時同步，并且開發可以自己隨時查看每個元素的標注信息，便捷。

這里推薦兩款協調軟件：一款是InVision可以在sketch里進行控件協同調用，所有想用的元素直接源文件調用，不需要再問同事要源文件！另一款是Zeplin技術同學可以直接查看元素屬性以及間距等，設計師解放雙手不再需要標注！

官網鏈接： 

https://login.invisionapp.com/auth/sign-in   

https://zeplin.io/

實現能力   

專業技術之間的壁壘，也會成為設計方案實現的阻力。同樣的界面，設計人員用設計軟件實現，技術人員用邏輯代碼實現，實現的方式和成本存在很大的差異性，所以往往設計師認為很簡單的需求在開發層面的確非常難實現。當然，不是所有需求都是無解的，設計師在技術實現層面還是可以做一些事情：

01 方案前置溝通

設計一個新的功能的時候，如果有非常規的設計方案，可以提前和技術人員溝通實現的難易程度，讓技術人員有前期預判和預演的時間。并且，可以將設計做成簡易DEMO方便技術人員快速理解，避免雙方存在信息不對等的情況。

02 搭建開發控件庫

開發控件庫和設計規范一樣，是最基礎但應用最為頻繁的模塊兒。開發控件庫可以將最基礎的元素形成固有規范，所有開發實現都用同一套規范，以確保實現的高度一致性，同時也能夠提升實現效率和設計還原。設計可以輔助開發一起制定開發控件庫，確?？丶旌驮O計規格的一致性。

03 尋求技術語言共通性

盡量將設計方案轉化為技術能夠理解和復用的形式進行對接。除了靜態設計稿的標注，設計和技術實現最大的難點在于動態交互的實現上，對于動態設計，將設計方案轉換為代碼文件交付給技術實現，這樣能確保功能的正常實現同時減少后期設計還原性的偏差。

以上初步總結的關于產品設計師在設計過程中從前期產品規劃到中期設計執行再到后期開發落地應該注意的一些核心點：

第一條，設計方案既要滿足產品目標又同時要兼顧用戶體驗；

第二條，優秀的設計師，會保持設計方案的“差異化”；

第三條，設計師職責除了確保設計方案完整性，更重要的是推動設計方案的完整落地。

在產品設計過程中，設計師需要關注還有很多關鍵點，這里也歡迎大家一起補充交流，正是這些關鍵點，將設計師的思維逐步打開，使其成為一個具有全鏈路思維的設計人才。 

文章來源：UI中國

交互手勢是用戶操作的重要部分，交互手勢的設計好壞非常影響用戶體驗，那么，交互手勢的設計上對于容錯性和邏輯性需要注意什么？

隨著用戶體驗被愈發的重視，更多的 APP 偏向于使用多手勢優化用戶的操作流程，降低使用阻力。

點擊某個確定的按鈕的手勢操作雖然被普遍使用并被用戶熟知，但是增加更快捷的手勢操作可以大大增大操作熱區，提高操作效率，如下圖。

然而，我們可以發現由于不同產品的設計師對于用戶體驗的理解不同、交互層面的思考不同，導致設計的交互手勢也不同。

有時同一種操作在不同的 APP 中交互手勢也是不統一的，這無疑增加了用戶的學習成本和記憶成本。

舉個例子，iOS 端的得到和有書的播放頁的打開和關閉方式。

得到有兩種方式打開和關閉頁面，用戶可以通過點擊控件或上滑控件打開播放頁，通過點擊收起按鈕或下拉頁面關閉播放頁。但是有書只有一種方式打開和關閉，用戶只能通過點擊控件打開播放頁，通過點擊返回圖標關閉播放頁。

這讓習慣了使用得到的我去使用有書時，感覺非常別扭，每次都嘗試用得到的手勢去操作但是都失敗了，失敗后我下一次并沒有記住仍然用手勢去操作，如此反復令我相當沮喪。

容錯性

容錯性是一個很大的話題，今天我們僅僅在交互手勢層面上討論。

上面的例子中，有書并沒有設計滑動手勢去打開和關閉播放頁，那么我以我的經驗去進行的滑動滑操作在有書這個產品中就是錯誤的和不被產品識別的。但是這種手勢又廣泛存在于大量的音頻播放 APP 中，如喜馬拉雅、荔枝 FM 等。

一旦用戶從這些 APP 遷移到了有書，本來養成的操作習慣在有書就失效了，用戶就會感覺“這個 APP 很難用，用起來很不舒服”，進而可能放棄有書轉而投向其他產品懷抱。

與手勢設計類似，這也是為什么現在的同種類型的 APP 的信息架構設計越來越同質化，當我們打開淘寶、天貓、京東時我們有時感覺就像是同一個 APP ，本質上也是為了降低用戶的遷移、記憶和學習成本。

如下圖所示，提高手勢的容錯性對用戶的意義。

很多優秀的產品考慮到了上述問題，設計了多手勢來優化用戶體驗。

舉個例子，在 APP Store 的首頁點擊一個推薦卡片后進入詳情頁，由于詳情頁是直接由卡片放大轉場的，不同于傳統的新頁面右側進入和從底部彈出。

在用戶的使用習慣和認知中新頁面如果從右側進入就可以通過右滑返回，從底部彈出的話就可以下拉返回。因此，當用戶面對卡片放大進入新頁面這種全新交互時可能會疑惑如何返回，對此理解不同的用戶可能會嘗試右滑，也可能嘗試下拉。

APP Store 的設計在此就有很好的容錯性，用戶可以通過三種方式返回首頁，分別是、右滑返回、下拉返回和點擊叉號返回，這不但降低了用戶的記憶和學習成本，也便于不同習慣的用戶使用。

針對不同的場景，手勢的使用也會有不同。

一個很好的案例是知乎的評論：知乎的評論的關閉方式有三種，分別是下拉、右滑和點擊叉號。

用戶觀看評論的場景有兩種，第一種是只想看一下精選評論然后關閉，第二種是被評論吸引后一直往下看。當用戶單手操作不方便點擊叉號時，下拉對應的是第一種用戶；右滑對應的是第二種用戶，不管用戶看了多少屏的評論，隨時可以通過右滑關閉評論（因為用戶翻閱了很多屏評論后需要下拉到第一條評論時，下拉關閉評論手勢才會生效，所以第二種用戶一般不使用下拉去關閉評論）。

可能你會心生疑惑：“第一種用戶也可以使用右滑來關閉評論呀”，確實可以，但是對于人的操作習慣來說，上下滑動會比左右滑動更方便。

還值得討論的是蘋果自 iPhone 6s 開始加入的新交互方式 3D Touch，它允許用戶通過更大力度的重按呼出情景菜單快捷地使用高頻功能而不用先打開 APP，對于追求效率的用戶來說簡直不要更方便，但是對于不支持 3D Touch 的機型則無法使用情景菜單。

因此，在生活中我發現這樣的現象，很多使用慣了3D Touch 的用戶換到無 3D Touch 的蘋果機型后很不習慣，總是嘗試去重按但是是無效的。

其實在很多安卓手機上也有情景菜單這一功能，它巧妙地將卸載也加到了情景菜單中，因此用戶只需要通過長按就可以獲得所有需要的功能，而不是像蘋果那樣長按是卸載而重按是情景菜單。

我猜測蘋果為了適配所有機型，提高容錯性，從今年的發布會的 iPhone 11 和iPhone 11 pro 開始，取消了 3D Touch，轉而使用 Haptic Touch （有震動反饋的長按）代替。當你長按某個圖標時，感受到震動后松開，即可呼出二級菜單；如果震動后仍不松開，則進入到卸載 APP 時的抖動狀態，使得之后的即使不支持 3D Touch的機型可以使用便捷的情景菜單了。

對于不支持 3D Touch 的老款機型會不會在 iOS 13 更新后也可以使用 Haptic Touch 呢？

如果一致統一的話，容錯性將大大提高，我們將拭目以待。

不僅僅是 iOS ，Android 的版本 Android 10經歷了 6 個測試版迭代后正式發布，我們發現交互手勢是 Android 10 的一個巨大亮點。Android 10 在第三版內測系統開始引入全局手勢操作，用戶啟用后，屏幕底部便不會再出現虛擬按鍵和導航欄，只會剩下一個指示條，上滑返回主屏、側滑返回上一層的操作邏輯也均和 iOS 保持一致。

這可能標志著安卓手機一直以來在國內各家廠商的各種創新手勢的割裂生態中即將重歸統一，并和 iOS 保持一致。

這種妥協將大大提高在用戶使用一款新安卓手機時的容錯性，同時降低了今后用戶在兩大系統之間的遷移成本。

邏輯性

再談談邏輯性，在交互手勢的層面上，如果用戶能夠通過某個手勢進行某個操作后，按照邏輯，用戶也可以通過反向的手勢或對應的手勢進行逆向操作。

比如，在微信首頁下拉調出小程序頁面，之后可以通過上拉返回首頁。點擊加號呼出更多操作，再次點擊加號收起更多操作。

如果違背了用戶的心理模型和邏輯性，用戶就會感覺到混亂和不適。

這里舉一個反例， Uki 的個人主頁可以通過點擊或下拉底部的固定底板收起更多信息，但是收起后只能通過點擊展開更多個人信息而不能上拉，不符合邏輯與用戶的心理模型。

如下圖所示，邏輯性對用戶的意義。

有的時候，我們會發現為了提高容錯性，我們會犧牲一部分邏輯性。

就像上文提到的知乎關閉評論彈出框，邏輯上它是從底部彈出的，但是不但能夠下拉關閉還可以右滑關閉。盡管右滑關閉有些違背用戶的心理模型，但是確實給用戶帶來了很多操作上的便捷。

如何設計

1. 是否需要加入多手勢操作的考慮因素

我們需要考慮的因素包括使用頻率、危險程度和特殊體驗。

1. 使用頻率：當一個功能的使用頻率足夠高時，我們加入多手勢操作去提高用戶操作效率才是有意義的。一個低頻的功能的特殊手勢操作很容易被用戶遺忘。
2. 危險程度：如果一個操作不可撤銷且存在危險性質，我們最好不要加入多手勢操作。此時我們需要用戶更加專注，如果加入多手勢操作可能會增加誤操作的概率。
3. 特殊體驗：當我們需要加入特殊的模擬體驗時，此時我們可以加入多手勢操作。如探探左滑無感右滑喜歡，給用戶帶來的“翻牌子”感覺是點擊操作無法替代的。QQ 閱讀下拉擬物繩燈進行日間和夜間模式切換，這種存在我們記憶中的交互方式能夠喚起我們的情感。

2. 評估所選手勢的考慮因素

1）考慮不同平臺的硬件系統和操作系統特性

由于硬件與操作系統差異，iOS 系統支持很多手勢，但是安卓系統在手勢支持方面就不如 iOS 豐富。

安卓硬件設備的差異比較大，不同安卓手機廠商會在安卓系統的基礎上自定義系統的手勢操作，因此對于手勢的支持也有較大的差異。對于這種情況我們需要熟悉相應平臺的規范，做到心中有數。

2）考慮所選的手勢的學習成本和記憶成本，用戶是否已經被教育

如下圖所示，盡管設備支持的手勢數量多不勝數，但是日常使用 APP 時，大部分用戶習慣使用的手勢很少，比如單擊、雙擊、滑動、上拉、下拉、雙指擴張和收縮等。除此之外的手勢教育成本和學習成本很高。

一般比較通用的功能是沒有必要在此處創新的，但是如果一些特殊的操作確實需要加入時，我們就需要考慮下面的問題。

a. 如果沒有教育成熟，考慮加入教學或搭配簡易的操作方式

對于我們需要加入的手勢操作當前用戶并未被教育成熟時，我們需要考慮加入手勢教學，具體的手勢教學類型下一部分會詳細討論。

然而，大部分情況下用戶的記憶是短期的，教學內容可能會被快速遺忘，下次用戶使用 APP 時仍然不會使用特殊手勢。此時我們應該將一些比較難以記憶的手勢操作搭配一個簡單的手勢操作。

比如 QQ 閱讀的下拉擬物繩燈切換夜間模式的手勢操作設計，其考慮到了有些用戶在現實生活中并未見過擬物繩燈，并不知道是要進行下拉才能觸發操作。因此，QQ 閱讀貼心地搭配了一個簡單的點擊操作，用戶通過點擊繩燈也可以切換夜間模式，如下圖。

b. 考慮所選手勢是否可能導致沖突和誤操作，如果導致了，考慮如何避免和折中

最常見的手勢沖突情況就是 APP 的手勢與操作系統的全局手勢沖突。

解決方案有兩個，一是避免設計與全局手勢一致的手勢操作，例如 iOS 的在屏幕邊緣右滑返回、全面屏機型的底部上滑退出應用等全局手勢操作；二是仍然設計與全局手勢沖突的操作，但是將全局手勢部分禁用或以其他的方式區分開。

如下圖有書播放頁的案例，由于進度條滑動控件過于靠左，導致使用 iOS 全局右滑返回手勢時有時會產生誤操作，即本來想要右滑返回卻不小心滑動了進度條。

這種情況下我們可以標注一個右滑手勢禁用區域給開發工程師說明情況，將此情況避免掉即可。

誤操作指的是，我們設計的手勢操作與 APP 內的其他操作或系統全局手勢操作接近導致用戶觸發了非預期的操作。比如 iOS 端的知乎被吐槽的一個右滑返回手勢操作，經過研究發現，由于 iOS 端的知乎在瀏覽回答的頁面設計的右滑返回的熱區過大，導致用戶上滑瀏覽的時候如果手指的滑動角度變化幅度過大一不小心就觸發了右滑返回，再次進入回答后又需要翻頁很久才能找到之前離開的地方，很影響體驗。

我覺得知乎可以減少熱區，將熱區調整為 iOS 全局的右滑返回區域即可，如下圖所示。

當然，產品設計需要平衡與取舍，如果減少了熱區是否會影響其他用戶的體驗還需要考慮和調研，兩者并無絕對的對錯

3. 讓用戶了解并使用新手勢

當新手勢無法直接讓用戶感知時，我們需要加入一些手勢教學幫助用戶快速上手使用。

1）手勢教學方式

a. 浮層和動畫引導使用靜態或動態的手勢圖片或氣泡示例告訴用戶使用哪種手勢進行操作

相比于靜態，動態比靜態更為直觀和易學。

b. 內容隱喻通過微妙的視覺線索暗示用戶此處可以通過某種手勢進行操作

由于教學內容難免具有干擾性，對于高級用戶來說是不必要的，但是對于初級用戶又是必要的，因此以這種內容暗示的方式使教學極為輕量化，在低干擾的情況下使得用戶學習了手勢操作。

如下圖，嗶哩嗶哩在打開第一篇文章時會平移顯示下一篇文章的框架，暗示用戶可以通過左右滑動切換文章。

再比如陌陌在打開點點功能時，會在用戶進入頁面的時候播放一個動畫，暗示有很多卡片疊加在了一起，用戶可以通過滑動切換卡片。

2）教學的出現時機

a. 操作前當產品中設計了不容易感知的新手勢，在用戶操作前，通過教學讓用戶了解和學習新的手勢。

b. 錯誤操作后對于一些與用戶的心理模型和習慣不一致的手勢，提前預測用戶可能輸入的錯誤手勢，在用戶錯誤操作后進行提示，規范用戶的操作方式。

如下圖，由于知乎舊版本是通過左右滑動切換回答的，新版本調整為上下滑動后，需要糾正用戶使用習慣。因此，當用戶仍然使用左右滑動時，會出現浮層提示用戶正確的手勢進行教學。

結語

以上是日常思考和總結，有不恰當之處歡迎指出。希望本文在大家進行手勢設計的過程中能夠幫助做出合理的決策。

文章來源：人人都是產品經理