導航模式是提高可用性的捷徑。當你查看近年來最成功的交互導航設計時，顯而易見的贏家是那些完美執行基本原則的人。雖然跳出條條框框思考是一個非常好思維方式，但有些規則是你不能打破的。以下是創建出色的移動導航的四個重要原則：

簡單

首先，最重要的是，導航系統必須簡單。良好的導航應該感覺像一只無形的手，引導用戶。一種方法是根據移動用戶最有可能執行的任務來確定移動應用程序的內容和導航的優先級。

可見

正如雅各布·尼爾森（ Jakob Nielsen）所說，識別物體比記憶更容易。這意味著你應該通過使操作和選項可見來最小化用戶的記憶負擔。導航應該始終可用，而不僅僅是在我們預期用戶需要導航的時候。

明確

導航功能必須是不言而喻的。你需要以簡潔明了的方式傳遞信息。在沒有任何外部指導的情況下用戶應該一目了然的知道如何從A點轉到B點。試想一下購物車圖標，它作為一個標簽或查看項目的標識符。用戶無需考慮如何導航才能進行購買；此元素將指導他們執行適當的操作。

一致性

所有視圖的導航系統應相同。不要將導航控件放在不同頁面上的新位置。不要欺騙你的用戶，要始終保持言行一致。你的導航應該使用“最不意外的原則”。導航應該激勵用戶參與并與你所提供的內容互動。

大拇指設計法則

史蒂文·霍伯在對移動設備使用情況的研究中發現，49%的人依靠一個拇指在手機上完成任務。在下面的圖中，手機屏幕上的圖表是近似可達圖，其中顏色表示用戶可以觸及的屏幕區域，并與拇指交互。綠色表示用戶可以輕松到達的區域；黃色表示需要伸展的區域；紅色表示需要用戶改變握住設備的方式的區域。

在設計時，要考慮到你的應用程序將在多種環境中使用；即使是喜歡使用雙手握手機的人也不一定總是使用多個手指，更不用說雙手與你的用戶界面交互了。將最高層級且常用的操作放在屏幕底部非常重要。這樣，通過單手和拇指的交互即可輕松達到目標。

另一個重點是底部導航應該用于具有相同重要性的最高層級目標。是需要從應用程序中的任何位置都可以直接訪問的。

最后，也是很重要的一點，要注意點擊目標區域的大小。Microsoft 建議 你將觸摸目標區域大小設置為9平方毫米或更大（135 ppi顯示器上的48×48像素，縮放比例為1.0倍）。避免使用小于7平方毫米的觸摸目標區域。

觸摸目標區域不應小于44像素到48像素（或11毫米到13毫米），包括填充。

標簽欄

許多應用程序使用標簽欄來顯示應用程序最重要的功能。facebook只需輕觸一下就可以提供核心功能的主要部分，允許在功能之間快速切換。

底部導航設計的三個關鍵因素

導航通常是將用戶帶到他們想要去的地方的工具。對于具有相似重要性的指定目的地，這些目的地需要從應用程序中的任何位置直接訪問。好的底部導航設計應該遵循以下三個原則。

1.僅顯示最重要的目的地

避免在底部導航中使用五個以上的訪問標簽，因為TAP目標之間的距離太近。在標簽欄中放太多標簽會使人們很難點擊他們想要的標簽。而且，隨著每個額外的選項卡顯示，就會增加了應用程序的復雜性。

避免使用五個以上的目的地。

避免滾動內容

對于小屏幕來說，部分隱藏的導航似乎是一個非常好的解決方案，因為你不必擔心有限的屏幕空間，只需將導航選項放入一個可滾動的選項卡即可。但是，可滾動的內容效率較低，因為用戶必須先滾動才能看到所需的選項，因此最好盡可能避免。

該避免在選項卡欄中放置太多項目，以防止用戶滾動，然后才能單擊所需的選項。

2.明確當前位置

應用程序菜單上最常見的一個錯誤是沒有明確用戶的當前位置?！拔以谀睦铮俊笆怯脩粲龅降幕締栴}之一。用戶應該第一眼就知道如何從A點轉到B點，而不需要任何外部引導。你應該適當的使用視覺提示（圖標、標簽和顏色），這樣導航就不需要任何解釋。

圖標

底部導航應該與圖標的內容進行適當的結合。盡管有一些用戶熟悉的通用圖標，但大多數圖標代表的功能包括搜索，電子郵件，打印等。

在適用于Android的先前版本的Bloom.fm應用程序中，很難理解用戶的當前位置。

顏色

避免在底部選項卡欄中使用不同顏色的圖標和文本標簽。相反，遵循這個簡單的規則，用應用程序的主顏色為當前的底部導航（包括圖標和任何顯示的文本標簽）著色。

左：不同顏色的圖標使你的應用看起來像一棵圣誕樹。右：只使用一種原色。

這是iOS的Twitter應用程序中的底部欄菜單。消息視圖處于選中狀態。

如果底部導航欄是彩色的，請確保對當前位置的圖標和文本標簽使用黑色或白色。

左：避免將彩色圖標與彩色底部導航欄配對。右：使用黑色或白色圖標。

文本標簽

文本標簽應為導航圖標提供簡短且有意義的定義。避免使用長文本標簽，因為它們不會截斷或自動換行。

避免換行，截斷和縮小文本標簽。

菜單元素應易于理解。用戶應該能夠理解點擊元素時會發生什么。

目標尺寸

使目標區域足夠大，以使其易于點擊或單擊。要計算每個底部導航動作的寬度，請將視圖的寬度除以動作數量。或者，將所有底部導航動作設置為最大動作的寬度。Android建議移動設備底部導航欄的尺寸如下。

顯示了移動設備上的固定底部導航欄，單位為密度獨立像素（dp）

標簽上的微標

你可以在標簽欄圖標上顯示微標，以表明存在與該視圖或模式相關的新信息。

考慮對標簽欄圖標加微標以保持通俗易懂。

3.使導航不言而喻

良好的導航感覺就像是一只看不見的手，可以引導用戶前進。畢竟，如果人們找不到它，即使是最酷的功能或最引人注目的內容也沒有用。

行為

每個底部導航圖標必須指向目標目的地，并且不應打開菜單或其他彈出窗口。點擊底部的導航圖標可以引導用戶直接進入相關的視圖，或者刷新當前活動的視圖。不要使用標簽欄為用戶提供對當前屏幕或應用程序模式下的元素起作用的控件。如果需要提供控件，請改用工具欄。

每個底部導航圖標必須通向目標目的地。

上面的控件是工具欄而不是底部導航。

保持一致性

盡可能在各個頁面上顯示相同的選項卡。最好是你能給用戶一種視覺穩定性的感覺。

當選項卡的功能不可用時，不要刪除它。如果在某些情況下刪除了某個選項卡，但在其他情況下沒有，替換使應用程序的UI無法預測。最好的解決方案是確保所有選項卡都已啟用，但要說明為什么選項卡的內容不可用。例如，如果用戶沒有本地文件，則Dropbox應用中的“本地”選項卡將顯示一個頁面，說明如何獲取文件。

Dropbox應用的空狀態頁面

滾動時隱藏標簽欄

如果屏幕是滾動的，則當人們滾動查找新內容時，標簽欄可以隱藏，而當他們開始回到頂部時，標簽欄可以顯示。

標簽導航可以在滾動時動態消失。

視覺愉悅

避免使用橫向運動在視圖之間轉換。活動視圖和非活動視圖之間的過渡應使用淡入淡出動畫。

圖形圖標：創意導航

屏幕尺寸是將你的觀點傳達給用戶的主要挑戰。使用圖形圖標作為菜單元素是解決移動端屏幕空間有限問題的最有效的方法之一。圖標的圖形說明了點擊它后將會進入什么頁面，這種導航模式更加節省屏幕空間。

Google Material Design，浮動操作按鈕

Google Material Design 對這種類型的導航使用術語“浮動擦操作按鈕”。它們的區別在于浮動在UI上方的帶有圓圈的圖標，并具有運動行為。

像Evernote這樣的應用程序通過對最重要的用戶操作使用浮動操作按鈕簡化了操作流程。

Tumblr具有漂亮的圖形圖標以及適當的標簽。當你在應用程序中滑動屏幕時，這些圖標也很方便地消失。

然而，這種模式有一個明顯的缺點-浮動操作按鈕隱藏內容。從用戶體驗的角度來看，不便于用戶頻繁點擊操作

而且，許多研究人員表明，圖標難以記憶，而且效率極低。只有普遍理解的圖標才能被很好的記憶（例如，打印，關閉，播放/暫停，回復等）。這就是為什么使圖標清晰直觀*，并在圖標旁邊引入文本標簽的*重要原因。

結論

導航通常是將用戶帶到他們想要去的地方的一種媒介。在使用應用程序時，要始終考慮用戶角色以及他們的目標。然后，定制導航以幫助他們實現這些目標。為用戶設計。一個產品對他們來說越容易使用，他們使用它的可能性就越大。

轉自：UI中國-Coldrain1

在做交互文檔之前，我們先要明白什么是交互文檔、為什么要做以及做了給誰看。

一、什么是交互文檔 

交互文檔，即交互設計說明文檔。英文 Design Requirement Document ，簡稱DRD。主要是用來承載設計思路、設計方案、信息架構、原型線框、交互說明等內容。

二、為什么需要交互文檔          

有些人可能對文檔這種東西比較反感，尤其是從事工作不久的朋友。其實工作得越久，越會發現文檔的重要性，它可以幫助你理清思路，并記錄下來，便于回顧。

通常，一個比較基礎、規范的交互文檔（DRD）由：文檔封面、更新日志、文檔圖例、設計背景/思路、業務流程、頁面交互、全局通用說明、廢紙簍八部分組成。當然，這不是絕對，你可以根據你的實際工作需要進行增減。

比如，如果是C端產品的話，用戶調研的結論、用戶畫像、用戶體驗地圖等等，都可以放進去給看的人一個參考。尤其是在如今這么關注用戶體驗、產品思維的一個大環境下，這些數據支撐很有力量。同時還可以幫助開發人員、界面設計人員培養產品思維、體驗思維，大家一起將產品變得更好。

其次，交互文檔的整潔與美觀也很有必要。相信在過去幾年不少人有遇到過這樣的產品經理（兼交互），他們會輸出一些有時連他們自己都看不太懂或者直接從其它競品截圖來的線框圖。當開發和界面設計的人提出質疑的時候還美其名曰線框不重要，重要的是里面的業務邏輯。。。其實用產品思維想，交互文檔就是交互設計師的產品，而看的人就是用戶，保持良好的可讀性，可謂至關重要。

1、文檔封面

交互文檔的封面如上圖，通常包括產品的名稱、Logo、版本號以及版本發布時間、所屬部門、對接負責人/對接人。

2、更新日志

我們都知道，在產品的迭代的過程中，需求/功能是會不斷調整的。而更新日志，就是為了迭代而生。它一般由修改日期、修改內容、修改人、版本號和備注組成。如果是新增的功能或模塊，建議是要加上鏈接可直接跳轉至新增內容的，如上圖。

版本號也是同理，都應加上對應的版本鏈接，便于查看者回溯之前的內容，與當前的新版本形成對比。這一點對開發人員來說很重要，其次對于新同事深入理解產品也能起到很大的幫助。

修改日期，通常是按時間倒序排列，查看起來會比較方便。

3、文檔圖例

文檔圖例，顧名思義就是關于此文檔的一些輔助說明，目的是為了讓讀者更好地理解文檔。如上圖的：操作/跳轉圖例、標簽圖例、流程圖例以及手勢操作圖例。

4、設計背景/思路

因為我今年對接最久的是一個B端產品的項目，所以整理了一個產品畫像，僅供參考。

5、業務流程

業務流程圖，不是操作流程圖也不是頁面流程圖。它是產品的整體業務流程，直接和業務掛鉤，可以說是產品的核心流程。

例如淘寶APP，買家購物由始至終的流程就是它的業務流程。通常用泳道圖的形式展示，多數情況下是由產品經理繪制。

以上是我所負責產品的核心業務的流程圖。因為是B端產品，涉及角色較多，針對3個代表性角色分別進行了繪制，僅供參考。(涉及到保密協議，所有關鍵詞都去掉了)

6、頁面交互

（1）信息架構

信息架構屬于用戶體驗的結構層，是產品的骨架。一般是由產品經理或者更高層的管理人員給出大框架。除非是大的產品迭代，否則不會大改。

（2）權限說明

如果是C端產品，權限這一塊相對簡單，比較好整理的。B端產品涉及角色眾多，可能要單獨拎出來分析整理。以上僅供參考，大家具體情況具體分析。若是功能很單一的產品，交互文檔中也可省去這個模塊。

（3）操作流程圖

產品操作流程圖就是通過圖形化的表達形式，闡述產品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時，會產生的一系列操作和反饋的圖標。

上圖是登錄、注冊和找回密碼的操作流程圖。僅供參考。模板源文件下載，后臺回復“交互”即可。

（4）頁面線框圖

頁面線框圖，是通過圖形化的表達形式，闡述產品在頁面層面的信息。包括： 

【頁面標題】即每一個頁面的對應標題，一般就是導航欄標題

【頁面內容】以黑白為主，保證信息規整易讀

【交互說明】用標簽將其對應起來，包括交互邏輯、操作流程及反饋、元素狀態、字符限制、異常/特殊狀態、相關規則 等等

【主流程線】只需要畫出主流程線即可，千萬不可太多太雜，時刻考慮讀者的感受

以上是注冊/登錄的線框圖和詳細的交互說明。將重點內容用紅色標記，可以讓查看者一目了然更好理解文檔。

7、全局通用說明

（1）常用控件

常用控件類似UIKit，通常將極具復用價值的控制整理在一起，方便及時調用。

（2）復用界面

（3）時間規范

（4）缺省頁匯總

五、總結

文檔、軟件只是工具，最重要的還是要落地、實行起來才能對產品有所幫助。所以在撰寫文檔的每時每刻，都應該站在“讀者”的角度思考，他們看的時候感受會是怎樣的，會覺得很難理解嗎？

轉自-站酷

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

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

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

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

為什么要進行比較？

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

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

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

對直接競爭對手進行分析

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

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

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

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

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

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

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

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

競品分析時謹記五個原則

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

1.理解背后的需求

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

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

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

2.確定真正的競爭者

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

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中國

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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. 小結

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

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

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

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

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

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

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

總結

對本篇文章的拓展總結：

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

文章來源：站酷