看似簡單的登錄框，暗藏了多少值得推敲的用戶體驗？這10個細節，就是你和設計高手的區別。
你不應該讓你的用戶到處尋找登錄區域。他們找的時間越長，就會越沮喪。他們越沮喪，最終登錄的可能性就越小。
一個很好的例子就是 Gmail 的登錄頁面。
你可以確切地知道你需要在何處登錄，以及要在輸入區域輸入什么內容，上面的例子，如果你沒有 Gmail 帳戶，它允許你通過單擊「創建帳戶」來輕松地創建一個帳戶。
好的用戶體驗是使你的登錄區域明顯，使你的用戶盡可能容易地進行登錄操作。
第三方登錄正迅速成為用戶登錄賬戶的方式，理由很充分。為不同的產品創建多個賬戶既耗時又令人困惑。很難記住一堆不同的密碼和用戶名。
通過允許用戶使用用戶的第三方賬戶中的信息來創建一個賬戶，可以解決所有關于這些問題。
讓我們來看看下面的石墨文檔和MONO登錄時的選擇方式：
甚至還有更方便的注冊登錄方式，手機短信驗證碼在注冊的同時登錄：
一些產品在用戶點擊第三方注冊登錄時還需要用手機號進行短信登錄，從用戶的角度看，這很明顯是一個不好的體驗，但是產品的角度去思考就不一樣了，產品為了獲取用戶更多的信息，則需要這樣來設計流程。
這種設計流程該不該用，這需要在產品和用戶之間進行權衡，第三方與手機短信驗證碼登錄，在提高用戶體驗的同時，可以提高用戶的效率，使界面更加直觀。
因為環境不同，在中國很多網頁端的網站，第三方登錄很的產品很少。
例如，如果你的 QQ 沒有在電腦端登錄，因為即使選擇第三方 QQ 登錄，你也要拿出手機—打開 QQ —打開掃一掃，進行掃碼登錄等一些列的操作。
又或者，當你想要登錄 behance，只要瀏覽器有記錄之前的第三登錄，點擊第三方登錄即可直接進入該網站，甚至不用注冊。
可以看下面的騰訊網與 behance 的網頁登錄：
好的登錄體驗應該只有賬號、密碼兩個輸入字段，或者手機號碼、短信驗證碼兩個字段，以及使用第三方登錄的選項。在簡單、的同時，并為用戶提供了很好的體驗。
如果一個用戶來到你的網站進行注冊，或者想他們返回登錄界面，這就需要讓用戶清楚的知道他在何處，下一步應該去哪里。
我們通過使用登錄字段與注冊字段的區別來幫助他們，讓我們看看下面的 dribbble 注冊界面：
創建賬戶的按鈕已 dribbble 的主題能很快突出在用戶面前。新用戶可以直接在頁面上注冊，而返回的用戶可以使用最上面右上角的登錄兩字?？吹缴厦妗竤ign in 」字段了嗎？
dribbble 使用了不同的顏色、布局去區分注冊按鈕與登錄的入口，這樣更加清晰明了。
同時可以看看 dribbble 的主頁面，他們會把 sign in 與 sign up 的進行區分，在 sign up 加上微邊框，讓用戶能更快區分兩者的不同。
讓用戶用他們的用戶名來進行登錄真的不是一和很明智的做法，為用戶省去記錄你產品的用戶名的麻煩，應該讓他們使用他們的電子郵件地址或電話號碼注冊來進行代替用戶名。
ins 讓用戶有機會用他們的電話號碼或電子郵件地址登錄。
反例：
盡可能讓用戶同時用手機號碼或郵件地址來登錄，因為用戶可能會忘記他們用來登錄你的產品的電子郵件地址，所以這時，用戶能使用手機號碼進行登錄。
給用戶提供可顯示密碼的按鈕，減少用戶輸錯密碼的操作，當輸錯的同時，可進行對錯的字段進行糾正，不用全部刪掉重新來。
讓我們來下面的脈脈和片刻：
還有什么比再次到你之前登錄的網站或 app，卻發現你需要再次輸入賬戶密碼登錄更令人沮喪的事情嗎?
當你的用戶返回到你的網站時，請確保他們已經登錄了，或者為了方便登錄，提前為他們預先填充賬戶和密碼等字段。
谷歌在這方面做得很棒。每當用戶需要重新登錄到 YouTube、Gmail 或任何其他谷歌品牌時，他們的登錄信息都會被記住，使登錄過程更加簡單。
盟友銀行允許用戶勾選 「保存用戶名」 復選框，允許網站在用戶到達網站時默認記住用戶名。這是記住用戶信息的另一個好方法，展示形式可以多樣化，可根據自己產品與用戶需求來進行把控。
有時你的用戶會忘記他們的登錄信息。當這種情況發生時，盡量讓恢復過程盡可能的輕松。
公眾號的賬戶密碼輸入欄有記住密碼復選框，以防用戶忘記他們的用戶名和密碼，不用每次進來都輸入賬戶密碼進行登錄。
印象筆記對他們的密碼做了一些巧妙的處理，讓用戶知道他們多久以前更改了密碼。
這個小小的提示可以喚起用戶的記憶，幫助他們記起密碼。
如果用戶忘記了他們的登錄信息，要讓他們清楚應該去哪里。如果你將使令人沮喪的情況變得不那么令人沮喪，你的用戶將因此會喜歡上你的產品。
我們都有過這樣的經歷：令人沮喪地輸入和重新輸入你的密碼都無濟于事，結果卻發現你一直開著大寫鎖定鍵。
可以通過警告你的用戶，防止這種情況發生。微軟的 Edge 瀏覽器還使用戶可以選擇在鍵入時打開大寫鎖定時打開通知。
讓你的移動用戶使用無密碼登錄，現在很多特別是金融類 app，都可以讓用戶進行指紋登錄，因為不像其他 app 一樣可以一直保持用戶已登錄狀態，在保障安全的同時能更便捷。
以上的設計技巧與案例希望能幫助各位讀者提高產品的用戶體驗。
歡迎關注作者的微信公眾號：「設計探」
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
心理學在我們生活中涉及的面很廣，是每個行業都要了解的，對于設計師來說，更要了解用戶的心理，因為我們的設計是面向用戶的
閱讀時間：大約9分鐘
目錄
前言
7±2法則
費茨定律
希克定律
格式塔原則
色彩心理學
馮·雷斯托夫效應
奧卡姆剃刀原理
總結
前言
最近正好在學習用戶體驗方面的知識，也查閱了相關的資料和文章，輸出是最好的輸入，所以把整理的相關文檔寫下了，也是將所學的知識再鞏固下，歡迎大家一起探討。
7±2法則的定義
7±2法則出于美國心理學家George A. Miller1956年發布的論文《神奇的數字7加減2：我們加工信息能力的某些限制》。Miller最早對短時記憶能力進行了定量研究，他發現人的短時記憶能力的廣度為7±2個信息塊。
這說明人的大腦短時記憶的容量大約為“7”，并在7+2與7-2之間浮動，因此，心理學家把這個神奇的記憶容量規律稱為“7±2法則”。由7±2法則我們可以得出，一般人接受新事物的記憶容量大約是7,最多不會超過9。
心理學家Alan Baddeley質疑7加減2規則。Baddeley（1994）翻出Miller的文章，發現那并不是真正的研究報告，只是一次專業會議的講稿。Miller基本上是自言自語，猜想人能夠同時處理的信息量有沒有固有的限制。
此外，Nelson Cowan（2001）等研究者也追隨了他的腳步?，F在研究表明，那個“神奇的數字”其實是4。（無論是7±2還是4，便于我們記憶同時也協助我們工作提升效率就是最好的數字）
George Mandler（1969）指出，人們能分門別類地記住信息，并且如果每個記憶類別里只有1～3條信息，那么人們能夠出色地回憶起來。當每類超過3條信息時，記憶效果就會相應下降，每類有4～6條信息時，人能記住80%；儲存信息條數越多，記住的比例就越低，當每類有80條信息時，人只能記住20%（如下圖所示）。
舉個直觀的例子，以下隨機給出10個詞語，你看一遍能記住幾個？
桌子 電腦 椅子 水杯 鉛筆 地圖 綠植 鍵盤 鼠標 文件
7±2法則的運用
1、組塊記憶
為了改善不穩定的工作記憶，人們會采取一些有趣的策略。其中之一就是將信息“組塊記憶”。
也就是把數字分為3-4-4來記憶，抖音的登錄賬號、美團的Dialog彈窗都是遵循的這一原則。
包括現在在生活中，我給別人發手機號碼或者是身份證號的時候都會選擇這個原則，自己看著也清晰，也便于對方將信息分類。
2、優化選項
網易新聞和今日頭條的導航都遵循了7±2法則，更多的信息左側滑動即可。
3、頁面布局
7±2法則還可以幫我們將頁面分組，將內容按照屬性分類，使頁面更有條理性和層次感，用戶能的完成自己的操作，例如：餓了么
費茨定律的定義
任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關，距離越大時間越長，目標越大時間越短。
用數學公式表達為時間 T = a + b log2(D/W+1)。
T=移動設備所需時長；a,b是經驗常量，D=設備起始位置和目標位置的距離；W=目標的寬度大小。
費茨定律的理解
1、設備當前位置和目標位置的距離D越長，所用時間越長；
2、目標的大小W越大，所用時間越短。
費茨定律的應用
1、按鈕放大，點擊更容易
閑魚和印象筆記，一個是直接發布閑置，另一個是直接創建筆記，都屬于核心功能，將用戶最想要或最直接想點擊的按鈕外漏、放大；增加可點擊區域來滿足用戶的需求。
2、讓相關的內容更接近
淘寶、京東的加入購物車和立即購買，在視覺上讓用戶增加了他們相關性的認知，也減少了兩個按鈕操作之間的距離和時間。
3、頁面的邊和腳適合放一些按鈕和菜單
安卓手機刪除應用時的操作、Potoshop軟件頂部菜單等、Mac操作系統的底部應用等，無論我們怎么操作，鼠標都不會超過這些區域。
希克定律的定義
?？硕?— 原稱?？撕Ｂ桑℉ick Hymalrs 1aw），是一種心理物理學定律。
一個人所面臨的選擇越多，做出選擇所花的時間就越多，當面臨選擇的數量增加，做出決定的時間也會跟著增加。
?？硕傻膽?/span>
希克定律的應用很廣泛，不僅是在產品上，在生活中也隨處可用。
和同事每天都會遇到的問題，一到中午，同事就會問，吃什么？每日一問，看著商場眾多美食，真是發愁，但如果她換種問法：我們今天中午吃海底撈還是和府撈面，這樣的詢問是不是就節省思考和作出選擇的時間？
遙控器的設計也是，看到下面兩個遙控器的樣式，你會感覺哪個好用，很明顯是右邊小米的遙控器，老人再不用教的情況下就可以自己操作，左邊的拿起來我們要花很多時間是研究如何使用，可能剛學會，想進行下一個操作的時候又要去花時間研究，是不是很鬧心？
猿輔導APP中，導航默認的是所有的課程，對于學員來說選擇自己想要學習的課程，比較浪費時間，右側的設計就是將我們不感興趣的課程關閉推薦，剩下的課程大大縮短了我們選擇和尋找的時間
格式塔的定義
格式塔（德式造型）是20世紀20年代由德國心理學家提出的一組視覺知覺原理。它建立在“一個有組織的整體，被認為大于其各部分之和”的理論基礎上。
格式塔的應用
在我們做設計的過程中，常用的是原則有：簡單性、接近性、相似性、連續性、閉合性等
1、簡單性原則
簡單原理適用于設計中的三角形構圖，均衡構圖，對稱構圖，向心構圖，攝影中的對角線，X型構圖等。這些構圖方式都是為了把復雜的信息元素通過簡單的方式讓觀者易于理解。
58同城和愛奇藝首頁都是均衡和對稱的構圖
2、接近性原則
一個頁面中，如果兩個元素是接近的，給用戶的感覺他們之間就有相關性
在支付寶我的頁面中，個人信息都是有相關性的，所以放一起遵循了接近性原則
3、相似性原則
我們的眼睛很容易關注那些復雜環境中外表相似的東西，可以利用相似原則組織好界面中的信息和層級關系。
相似性原則在UI設計中也很常見，網易郵箱、騰訊視頻都采用了相似性原則
4、連續性原則
人的視覺有追隨一個方向上的連續性，以便把不關聯的元素聯系到一起。
我們在APP中?？吹搅斜硪彩沁B續性原則的應用
色彩心理學定義
在自然欣賞、社會活動方面，色彩在客觀上是對人們的一種刺激和象征；在主觀上又是一種反應與行為。色彩心理透過視覺開始，從知覺、感情而到記憶、思想、意志、象征等，其反應與變化是極為復雜的。色彩的應用，很重視這種因果關系，即由對色彩的經驗積累而變成對色彩的心理規范，當受到什么刺激后能產生什么反應，都是色彩心理所要探討的內容。
色彩心理學應用
黑色：精致和力量
白色：干凈、精致、純潔
紅色：勇氣、激勵、力量；也能激發欲望
藍色：冷靜、安定、信任、安全
黃色：樂觀、歡樂
綠色：平衡、可持續的增長
紫色：皇權、精神意識、奢華
橙色：友誼、舒適、食物
粉色：平靜、女性化、性
一說到美食，我們能想到的顏色就是橘色，暖色系，因為這個顏色會增加食欲
插播一個知識點：美團外賣選擇的橘色，跟美食相關的顏色，我們可以理解，但餓了么平臺為什么會選擇藍色而不是暖色系呢？餓了么是以科技為主導的，核心并不是美食，所以選用了科技藍
在一些電商類網站都會將加入購物車、立即購買顏色設置為紅色，因為紅色可以刺激人的眼球，來增加點擊的欲望，還有微信群和朋友圈的未讀，都設置成紅色
顏色也是影響人們的情緒，比如長時間在橘色的環境下呆著，會使人焦慮不安，所以一些餐廳在顏色、燈光選擇上都會選擇用一些暖色系，藍色和褐色，會使人平靜，適合一些酒吧；
但色彩也不能濫用，它是具有聯系和含義的，例如：紅色代表赤字，即經濟困難；也可以代表警告、危險等；綠色代表環保、通行，所以在選用顏色上也要考慮它的含義和意義，要謹慎。
馮·雷斯托夫效應定義
馮·雷斯托夫效應告訴我們，某個元素越是違反常理，就越引人注目、令人難忘。
Hedwig von Restorff在1933年檢驗了這個理論。她讓實驗對象觀看一系列相似的物品。如果其中某個很特殊，比如說有聚光燈照射，那么相比其他物品，受試者就更容易回憶起這件物品。
比如，下面這個紅西紅柿
如果你想要讓某物引人們的注目，就要使它特殊化，可以通過色彩、尺寸、留白等方式來引起注意
例如：小紅色的紅色按鈕、蘇寧易購一套節日氣氛的首頁
奧卡姆剃刀定律定義
奧卡姆剃刀定律（Occam's Razor, Ockham's Razor）又稱“奧康的剃刀”，它是由14世紀英格蘭的邏輯學家、圣方濟各會修
士奧卡姆的威廉（William of Occam，約1285年至1349年）提出。這個原理稱為“如無必要，勿增實體”，即“簡單有效原理”。正如他在《箴言書注》2卷15題說“切勿浪費較多東西去做，用較少的東西，同樣可以做好的事情。”
奧卡姆剃刀定律的應用
我們在進行頁面設計的時候并不是內容越多越好，信息飛速發展的時代，大家都講究快、效率，我只要通過這個APP盡快達到目的為好，繁冗的功能對用戶來說只會降低用戶體驗感，抖音APP底部的導航開始是文字加icon，后來發現圖標會影響整體的效果，因為當視頻播放的時候，下面的Tab識別度會降低，經過改版，將icon去掉，文字放大，CTR也上去了，之后小紅書就開始參考抖音的改版：我不管你去掉的原因是什么，CTR上去就行
總結
一句話在回顧下文章的定律
7±2法則：一般人接受新事物的記憶容量大約是7,最多不會超過9
費茨定律：A和目標B的距離越長，所用時間越長；A大小越大，所用時間越短。
?？硕桑?/strong>選擇越多，花的時間就越多，選擇的數量增加，做出決定的時間也會跟著增加。
格式塔原則：常用的是原則有：簡單性、接近性、相似性、連續性、閉合性
色彩心理學：顏色也是影響人們的情緒，選用上要謹慎
馮·雷斯托夫效應：某個元素越是違反常理，就越引人注目、令人難忘
奧卡姆剃刀原理：簡單有效原理，去繁從簡
轉自：站酷-麥小兜Sarah
寫這篇文章的初衷，是在實際工作中遇到 PRD & DRD 文檔，對于一些交互設計圖，會產生不理解，或者說在實際落地畫圖的時候會發現一些前后不一致的問題，解釋過于冗余，不清晰。在接觸新的業務時，很難把新理解的內容從上至下的消化完整。所以希望通過這篇文章幫助剛接觸交互的同學更好地開展交互設計工作。
在傳統瀑布式需求分析流程中，我們設計師往往拿到的是已成型的信息架構圖&產品結構圖&關鍵業務流程圖，只是了解一下大概是什么類型的產品，很難發現企業產品中真正關鍵的流程價值點在哪里，或者說也不清楚后續發展的走向，只能卯足了勁去做圖做說明，整理完整。時間緊迫壓力大，又要照顧整個項目。往往決定產品成功與否的，是產品 20% 的主要功能（二八原則）。所以在面臨初期產品設計中，應該將主要精力放在重要功能流程中。
目前，在互聯網產品中，敏捷開發是所有產品設計者最推崇的。原因在于，能夠對業務、設計、開發更有前瞻性&敏捷性。
產品交互的成功一定是建立在業務需求提煉清晰的基礎上。業務需求的價值提煉，也是設計師需要參與完成的。業務需求是一個比較大的任務，來源可能是老板的要求，可能是產品提出的，也可能是用戶的反饋。通過業務需求，我們要分析出相關的業務目標。有個偶然的機會，了解到彩色 UML 的設計方法，在具體實踐中，感覺這個方法能夠快速適應任何業務流程，簡單方便，易懂，并能快速發現業務流程中的問題，加以修正完善。
有幸認識王海鵬老師，他推薦了早年他翻譯的彩色 UML 建模一書，作者 Peter Coad，是將彩色和企業組件集成到建模技術之中的第一本書的主要作者，是世界上經驗豐富的建模人員之一，他所創建的模型幾乎涉及到所有行業。
此書是第一本介紹用彩色來表達軟件設計的著作。作者用 4 種顏色來代表 4 種架構型，給定一種顏色，你就知道這個類可能具有哪些屬性、鏈接、方法和交互。得到的彩色構建塊能創建更好的模型，并獲得應有的認可。彩色和架構型僅僅是開始。作者更進一步將這些架構型發展為 12 個類的領域無關組件。作者在過去 10 年中創建的每個模型，都遵循這個組件所表達的基本形狀和職責。
筆者利用彩色 UML 建模的設計方法，用于業務梳理工作，達到了意想不到的效果。以下為彩色 UML 建?；靖拍睿ń厝〔噬?UML 建模書中的介紹）。
△ 《彩色UML建模書》第9頁
△ 《彩色UML建模書》第10頁
△ 事例會員注冊
定義：ER 圖是用來描述現實世界中的實體關系模型，所謂實體是指客觀上或者邏輯上存在并且可以區分的人事物。
作用：促使你以最適合技術理解實現的方法，來規范的描述功能模塊的核心要素，其實就是數據庫的物理結構。而這種描述是無二義的，最清晰傳達 PM 的設計思想。
功能結構圖就是按照功能的從屬關系畫成的圖表，在該圖表中的每一個框都稱為一個功能模塊。功能模塊可以根據具體情況分得大一點或小一點，分解得最小功能模塊可以是一個程序中的每個處理過程，而較大的功能模塊則可能是完成某一個任務的一組程序。用通俗的話來說，功能結構圖就是以功能模塊為類別，介紹模塊下各功能組成的圖表。
作用
信息架構屬于用戶體驗的結構層，是產品的骨架。一般是由產品經理或者更高層的管理人員給出大框架。除非是大的產品迭代，否則不會大改。
作用
信息結構圖構成要素
定義：產品結構圖是綜合展示產品信息和功能邏輯的圖表，簡單說產品結構圖就是產品原型的簡化表達。
作用：它能夠在前期的需求評審中或其他類似場景中作為產品原型的替代，因為產品結構圖相較于產品原型，其實現成本低，能夠快速對產品功能結構進行增、刪、改操作，減少 PM 在這個過程中的實現成本。
業務流程圖，不是操作流程圖也不是頁面流程圖。它是產品的整體業務流程，直接和業務掛鉤，可以說是產品的核心流程。
作用
通過業務流程圖，鉆研關鍵事件的流程，分析為什么要這么做，探索出更深層次的問題，從而對現有不合理的業務流程進行重組優化，進而制定優化方案，改進現有流程；闡述在項目中各個角色是如何產生相關聯系的。
繪制規范/建議
任務流程圖就是通過圖形化的表達形式，闡述產品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時，會產生的一系列操作和反饋的圖標。
作用：基于業務流程，進行任務流程梳理，闡述角色和程序發生交互的流程，你如何進行操作，系統如何進行反饋。
任務流程與需求文檔中的業務流程并不一樣。雖然它們都是流程圖，但業務流程更偏向于業務限制、后臺邏輯等，并不過分注重用戶的操作邏輯。而任務流程則需要關注用戶如何操作、界面如何反饋等，從而引導用戶完成用戶目標。
定義：指電子產品具體所呈現的頁面跳轉流程圖。其承載了業務流程圖所包含的業務流轉信息。
作用：
定義：頁面的模塊、元素、人機交互的形式，利用線框描述的方法，將產品脫離皮膚狀態下更加具體跟生動的進行表達。
作用：用例闡釋者，用來了解用例的用戶界面；系統分析員，用來了解用戶界面如何影響系統分析；設計員，用來了解用戶界面如何施加影響及它對系統「內部」的要求；類測試人員，用來制定測試計劃活動。
構成要素
限制
包含范圍值、極限值等。
范圍值主要指數據的取值范圍。比如，當你的界面上出現了下拉菜單、篩選按鈕、滑塊等控件時，你必須標注清楚它們的選擇范圍，否則開發人員就不清楚該如何設定，如圖所示。
極限值主要指數據的顯示限制。比如，最多應該顯示多少字數，過時如何顯示，是否折行等，如圖所示。
狀態
包含默認狀態、常見狀態、特殊狀態等。
「默認狀態」主要指默認顯示的文字、數據、選項等。這些內容需要注明，否則開發人員可能難以意識到這是用戶填完的效果，還是默認就有的。
「常見狀態」主要指針對某一個模塊，經常遇到的一些狀態。這些狀態都需要在原型上表述出來。比如一個普通的積分模塊，一般會出現 3 種狀態：未登錄狀態、登錄后未簽到狀態、登錄后已簽到狀態，如圖所示。
「特殊狀態」一般指非正常情況下的樣式、文案、說明等，如圖所示：
操作
包含常見操作、特殊操作、誤操作、手勢操作等。
「常見操作」主要指正常操作時得到的反饋狀態。比如一個普通的翻頁控件，在經過不同操作后會立即出現如下的狀態。
「特殊操作」主要指一些極端情況下的操作。一般，用戶不會這么操作，但是一旦遇到極端情況，還是要想好應對措施，因為對于開發人員來說，不管是正常的還是極端的操作情況，他們都要去編寫對應的代碼。如下圖，是填寫用戶信息的例子，當不寫交互說明時，開放往往會遇到很多問題：如果已經勾選了 2 個人，再勾選第 3 個人，怎么辦？如果勾選了「張XX」，下面區塊中會相應地出現張XX的信息，那么這時候允許修改張XX的身份證信息嗎？假如允許的話，修改后「張XX」還保持勾選狀態嗎？表單提交后要新增一個被保險人信息嗎？若修改的是除身份證號碼以外的信息，「張XX」 還保持勾選狀態嗎？提交表單時是覆蓋原存儲信息嗎？若修改后出生日期、性別與身份證號碼不吻合怎么辦？等等。
面對各種復雜的情況，一方面要和開發人員積極探討，看看有沒有其他的解決方法可以簡化各種邏輯判斷；另一方面，在得出結論后，要把交互說明寫清楚，避免出現讓開發人員感到棘手的情況。
「誤操作」主要指當用戶操作錯誤時的情況。不過我們在設計時要盡量避免有用戶犯錯的機會。如圖所示，提示中已告訴用戶「庫存5件」，如果這個時候用戶在「數量」一欄中輸入「6」會怎么樣呢？系統會自動幫用戶將其改為「5」省去用戶手動修正的操作。
「手勢操作」主要指用戶使用移動產品時的操作方式。常見的有點擊雙擊、長按、捏、伸、滑動等等。
反饋
用戶操作后得到的反饋動作，包含提示、跳轉、動畫等。
「提示」主要指操作后，系統反饋給用戶的文字說明等，如圖所示。
「跳轉」主要指點擊某個鏈接后，頁面跳轉到哪里。設計師需要在原型上注明跳轉時是「原頁面刷新」還是「新頁面打開」。如果是做手機應用的話，需要注明跳轉時的轉場方式，如圖所示。
「動畫」主要指用戶操作后，系統通過動畫的方式反饋給用戶。動畫給人的感覺比較友好、趣味性較強，是非常常見的一種反饋形式。比如刪除某條信息，該信息以漸變消失的形式告訴用戶：這條信息已經被刪除了。在移動應用中，動畫反饋的形式更為常見。因此設計師一定要在原型上表述清楚動畫的形式，必要時可以制作 domo 動畫演示效果給開發人員。
文章來源：站酷
作為UI設計師，我相信大家都是專注于界面設計的好不好看，至于界面與界面之間如何交互，點擊之后如何反饋，是一個比較容易被忽略的重要環節。
那么我們怎么處理好界面交互中的加載設計，減少用戶因等待產生的焦慮情緒，保證整個體驗無縫銜接，今天這篇文章就來總結下APP中數據加載模式設計。
一、為什么要加載？
1、用戶在進行某些操作時，都要從后臺請求數據，這個過程都需要時間，系統應該始終在合理的時間內做出適當的反饋，讓用戶了解正在發生的事情，讓用戶知道此時的操作是有反應，減緩用戶因等待而產生的焦慮感。同時加載方式也可以做的有趣，吸引用戶注意力，增加沉浸式體驗，讓用戶輕松自在的享受等待；
2、體驗無縫銜接，減少用戶跳失，正常的等待加載時間是0.3秒以內，同時不同場景對應有不同的加載方式。
二、常見的加載場景及方式
a.加載場景：
不同場景有不同的加載方式，常見的加載場景一般有以下幾種：下拉刷新、上拉加載、切換新頁面的數據加載、頁面局部模塊的加載、啟動頁加載、操作按鈕加載。實際工作中，要根據不同的場景搭配不同的加載樣式，才能更好的做到緩解用戶等待焦慮，降低用戶的跳失率。
b.加載方式：
1、全屏加載
主要出現在手機H5頁面，例如微信的文章詳情頁。一般會有進度條或有趣的動畫設計，減輕用戶等待時的焦慮感。加載失敗后，頁面通常為空白頁，且有重新刷新操作按鈕。
優點：將整個頁面的內容都加載出來才展現給用戶，能保證內容的整體性，全部加載完才能夠系統化的閱讀。
缺點：一般等待的時間較長，容易產生焦躁情緒，尤其是遇到網絡不好的情況
2、下拉刷新加載
主要出現在頁面內容為推薦類、或者信息更新頻次高的產品，通過刷新加載新數據，加載的loading樣式可以結合產品logo或IP形象進行設計，增加趣味性，吸引用戶注意力。
3.占位圖加載
如果頁面布局樣式比較固定，可以采用占位圖加載機制，先加載頁面布局和占位圖，先給用戶展示頁面框架，后加載頁面圖片細節部分，這種加載方式相對于直接展示白屏來說，呈現給用戶無縫銜接的感覺，體驗更加流暢。
4.分布加載
當頁面中有文字和圖片時，優先加載占網絡資源較小的元素，如先加載文字，后加載圖片，圖片加載完成前使用占位符顯示，保證用戶可以順暢閱讀，縮短用戶的等待時間，提高產品體驗。
優點：可以幫助用戶快速閱讀內容，了解信息。
這種加載形式更加適用于內容閱讀型的APP或圖片、視頻類資源比較多的頁面。
5.自動加載（懶加載）
當瀏覽信息時，不停的向上滑動，新的內容會不停的從底部出現，這種方式稱為自動加載。對于自動加載，要注意每次加載多少條內容，或者多少屏的內容。一般會在距下面內容一定距離時開始加載，當網速非?？斓臅r候，用戶并不能感知懶加載的動作，這樣可以營造一種無極限瀏覽的錯覺，很容易的把用戶吸引住。
優點：無需用戶操作，自動加載后續內容，營造沉浸式體驗。
應用：適合feed流、瀑布流、算法推薦類的內容。
6.預加載
提前加載好頁面信息內容，這樣當網絡不好的時候，可直接從本地緩存中渲染，就不用再加載了。
比如用戶在看A頁面的時候，App在后臺加載完B頁，等用戶打開B頁的時候就不需要等待加載了，因為App已經幫用戶提前加載好了，給用戶提供無縫鏈接的感覺，弊端就是服務器壓力很大，就是要預測用戶行為，加載其他數據，這樣會消耗不少流量，所以建議在WiFi網絡環境下采取這種預加載機制，而在蜂窩網絡狀態下則不采用預加載機制。
7.漸進式加載
一般出現在圖片類產品，比如pinterest、unsplash等，當瀏覽圖片的時候，經常是先看到一張模糊圖或與圖片較為相似的色彩值圖片，然后再漸漸的變得清晰，這種效果就叫做漸進式加載。漸進式加載能夠大大的提升體驗感。
8.后臺加載(異步處理)
用戶在前端執行操作后，客戶端立即給予操作成功反饋提示，然后把請求放到后臺與服務器交互，這一過程用戶是看不到的，也不需要等待，體驗是非常棒的。
例如在用微信發朋友圈時，會覺得特別流暢，即使在網絡不好的情況下，會看到你的動態立即展示在朋友圈列表，并不會提示你網絡不好，操作失敗，全部以操作成功來顯示，其實它只是將你發布的操作記錄了下來，等網絡一好就將動態上傳到服務器，從而完成發布行為，微信的點贊也是同樣的操作，你給好友點了贊，并不會提示你網絡不好，操作失敗，而是提示你點贊成功了，其實它只是將你點贊的操作記錄了下來，等網絡一好就將點贊的行為上傳到服務器，從而完成點贊行為會，給用戶帶來體驗流暢的感覺。
所以這種加載方式是需要根據具體使用場景來權衡使用的，對于一些重要的操作，建議還是使用模態的方式加載，對于一些小操作，如點贊、訂閱、關注，可采用后臺加載的方式。
9.模態加載
以上幾種方式都是采用非模態加載，不會對用戶造成干擾，用戶可以做別的事情，不需要等待加載完成，大大降低了等待的焦躁感。
模態加載對用戶干擾比較大，需要中斷用戶的其他操作，用戶只能等待加載結束，因為如果用戶執行了其他操作就會打斷正在進行的加載過程，實現不了用戶的目標。
應用：用戶執行的操作本身不能和其他操作同時進行，例如登錄，退出，應用啟動，手機支付等場景。
三、具體實施方法小結
1、能用非模態加載的盡量不要去用模態加載，如果非得用模態加載，也盡量給一個能取消的按鈕，方便用戶在不愿意等待的情況下取消操作。
2、如果加載的時間比較長，最好能告知用戶加載進度，讓用戶心理有個預期，這樣用戶更愿意等待，不會因為等待產生焦慮感，分分鐘卸載你的產品?？茖W的實驗證實，先慢后快的進度條是讓用戶心理感受上最快的設計，這是因為用戶最容易記住最后一瞬間的感覺，如果最后一瞬間，感知到了快，就覺得很順暢了。
3、數據加載本身就是很考驗用戶心態感受，所以盡量通過一些有趣的動畫來轉移用戶的注意力，營造沉浸式體驗，同時增加了趣味性，給予了產品人性化的設計。
總結
作為產品設計人員，盡量給用戶好的體驗，我們應該讓產品自己去解決問題，而不是把問題拋給用戶。在考慮人與客戶端交互的同時也要把客戶端和服務端之間的數據傳輸考慮進來，站在用戶、客戶端和服務器閉環的角度去思考產品，才能設計出體驗更好的數據加載方案。
轉自-站酷
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
導航模式是提高可用性的捷徑。當你查看近年來最成功的交互導航設計時，顯而易見的贏家是那些完美執行基本原則的人。雖然跳出條條框框思考是一個非常好思維方式，但有些規則是你不能打破的。以下是創建出色的移動導航的四個重要原則：
簡單
首先，最重要的是，導航系統必須簡單。良好的導航應該感覺像一只無形的手，引導用戶。一種方法是根據移動用戶最有可能執行的任務來確定移動應用程序的內容和導航的優先級。
可見
正如雅各布·尼爾森（ 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應用程序中的底部欄菜單。消息視圖處于選中狀態。
如果底部導航欄是彩色的，請確保對當前位置的圖標和文本標簽使用黑色或白色。
左：避免將彩色圖標與彩色底部導航欄配對。右：使用黑色或白色圖標。
文本標簽
文本標簽應為導航圖標提供簡短且有意義的定義。避免使用長文本標簽，因為它們不會截斷或自動換行。
避免換行，截斷和縮小文本標簽。
菜單元素應易于理解。用戶應該能夠理解點擊元素時會發生什么。
目標尺寸
使目標區域足夠大，以使其易于點擊或單擊。要計算每個底部導航動作的寬度，請將視圖的寬度除以動作數量?；蛘撸瑢⑺械撞繉Ш絼幼髟O置為最大動作的寬度。Android建議移動設備底部導航欄的尺寸如下。
顯示了移動設備上的固定底部導航欄，單位為密度獨立像素（dp）
標簽上的微標
你可以在標簽欄圖標上顯示微標，以表明存在與該視圖或模式相關的新信息。
考慮對標簽欄圖標加微標以保持通俗易懂。
3.使導航不言而喻
良好的導航感覺就像是一只看不見的手，可以引導用戶前進。畢竟，如果人們找不到它，即使是最酷的功能或最引人注目的內容也沒有用。
行為
每個底部導航圖標必須指向目標目的地，并且不應打開菜單或其他彈出窗口。點擊底部的導航圖標可以引導用戶直接進入相關的視圖，或者刷新當前活動的視圖。不要使用標簽欄為用戶提供對當前屏幕或應用程序模式下的元素起作用的控件。如果需要提供控件，請改用工具欄。
每個底部導航圖標必須通向目標目的地。
上面的控件是工具欄而不是底部導航。
保持一致性
盡可能在各個頁面上顯示相同的選項卡。最好是你能給用戶一種視覺穩定性的感覺。
當選項卡的功能不可用時，不要刪除它。如果在某些情況下刪除了某個選項卡，但在其他情況下沒有，替換使應用程序的UI無法預測。最好的解決方案是確保所有選項卡都已啟用，但要說明為什么選項卡的內容不可用。例如，如果用戶沒有本地文件，則Dropbox應用中的“本地”選項卡將顯示一個頁面，說明如何獲取文件。
Dropbox應用的空狀態頁面
滾動時隱藏標簽欄
如果屏幕是滾動的，則當人們滾動查找新內容時，標簽欄可以隱藏，而當他們開始回到頂部時，標簽欄可以顯示。
標簽導航可以在滾動時動態消失。
視覺愉悅
避免使用橫向運動在視圖之間轉換?；顒右晥D和非活動視圖之間的過渡應使用淡入淡出動畫。
圖形圖標：創意導航
屏幕尺寸是將你的觀點傳達給用戶的主要挑戰。使用圖形圖標作為菜單元素是解決移動端屏幕空間有限問題的最有效的方法之一。圖標的圖形說明了點擊它后將會進入什么頁面，這種導航模式更加節省屏幕空間。
Google Material Design，浮動操作按鈕
Google Material Design 對這種類型的導航使用術語“浮動擦操作按鈕”。它們的區別在于浮動在UI上方的帶有圓圈的圖標，并具有運動行為。
像Evernote這樣的應用程序通過對最重要的用戶操作使用浮動操作按鈕簡化了操作流程。
Tumblr具有漂亮的圖形圖標以及適當的標簽。當你在應用程序中滑動屏幕時，這些圖標也很方便地消失。
然而，這種模式有一個明顯的缺點-浮動操作按鈕隱藏內容。從用戶體驗的角度來看，不便于用戶頻繁點擊操作
而且，許多研究人員表明，圖標難以記憶，而且效率極低。只有普遍理解的圖標才能被很好的記憶（例如，打印，關閉，播放/暫停，回復等）。這就是為什么使圖標清晰直觀*，并在圖標旁邊引入文本標簽的*重要原因。
導航通常是將用戶帶到他們想要去的地方的一種媒介。在使用應用程序時，要始終考慮用戶角色以及他們的目標。然后，定制導航以幫助他們實現這些目標。為用戶設計。一個產品對他們來說越容易使用，他們使用它的可能性就越大。
轉自：UI中國-Coldrain1
在做交互文檔之前，我們先要明白什么是交互文檔、為什么要做以及做了給誰看。
交互文檔，即交互設計說明文檔。英文 Design Requirement Document ，簡稱DRD。主要是用來承載設計思路、設計方案、信息架構、原型線框、交互說明等內容。
有些人可能對文檔這種東西比較反感，尤其是從事工作不久的朋友。其實工作得越久，越會發現文檔的重要性，它可以幫助你理清思路，并記錄下來，便于回顧。
交互文檔其實要說給誰看，其實具體情況具體分析。有的公司老板也要盯交互文檔，以及甲方爸爸、運營部門同事，都有查看的可能。
【產品經理】產品經理與交互設計師可能是溝通最多的人，產品經理主要在文檔中確認設計思路和業務流程，然后過一下頁面交互模塊。
【視覺設計】UI設計師通常最關注的是頁面交互模塊，有著產品思維和體驗思維的設計師也會仔細看一下設計思路和產品背景，以便于自己更了解產品業務邏輯和用戶心理。
【開發人員】前端的開發同事和UI設計師一樣，最關注頁面交互模塊，其他的作為提升會輔助了解。而后端開發人員關注更多的是業務邏輯、信息架構、操作流程等，這些都清晰了，他們才能輸出一份準確合格的開發文檔。
【測試人員】因為測試人員是把關產品上線的一群人，所以各個模塊、步驟都應該去了解透徹，才能提出有效的bug。
本文主要闡述以Axure軟件為撰寫工具，大家可以根據實際需求決定用什么軟件（Sketch、PPT、Word、PS、AI 等）。比如小需求可以用Sketch，快而。如果是要給甲方爸爸/大老板看的，使用PPT會讓他們更好理解。
通常，一個比較基礎、規范的交互文檔（DRD）由：文檔封面、更新日志、文檔圖例、設計背景/思路、業務流程、頁面交互、全局通用說明、廢紙簍八部分組成。當然，這不是絕對，你可以根據你的實際工作需要進行增減。
比如，如果是C端產品的話，用戶調研的結論、用戶畫像、用戶體驗地圖等等，都可以放進去給看的人一個參考。尤其是在如今這么關注用戶體驗、產品思維的一個大環境下，這些數據支撐很有力量。同時還可以幫助開發人員、界面設計人員培養產品思維、體驗思維，大家一起將產品變得更好。
其次，交互文檔的整潔與美觀也很有必要。相信在過去幾年不少人有遇到過這樣的產品經理（兼交互），他們會輸出一些有時連他們自己都看不太懂或者直接從其它競品截圖來的線框圖。當開發和界面設計的人提出質疑的時候還美其名曰線框不重要，重要的是里面的業務邏輯。。。其實用產品思維想，交互文檔就是交互設計師的產品，而看的人就是用戶，保持良好的可讀性，可謂至關重要。
交互文檔的封面如上圖，通常包括產品的名稱、Logo、版本號以及版本發布時間、所屬部門、對接負責人/對接人。
我們都知道，在產品的迭代的過程中，需求/功能是會不斷調整的。而更新日志，就是為了迭代而生。它一般由修改日期、修改內容、修改人、版本號和備注組成。如果是新增的功能或模塊，建議是要加上鏈接可直接跳轉至新增內容的，如上圖。
版本號也是同理，都應加上對應的版本鏈接，便于查看者回溯之前的內容，與當前的新版本形成對比。這一點對開發人員來說很重要，其次對于新同事深入理解產品也能起到很大的幫助。
修改日期，通常是按時間倒序排列，查看起來會比較方便。
文檔圖例，顧名思義就是關于此文檔的一些輔助說明，目的是為了讓讀者更好地理解文檔。如上圖的：操作/跳轉圖例、標簽圖例、流程圖例以及手勢操作圖例。
因為我今年對接最久的是一個B端產品的項目，所以整理了一個產品畫像，僅供參考。
業務流程圖，不是操作流程圖也不是頁面流程圖。它是產品的整體業務流程，直接和業務掛鉤，可以說是產品的核心流程。
例如淘寶APP，買家購物由始至終的流程就是它的業務流程。通常用泳道圖的形式展示，多數情況下是由產品經理繪制。
以上是我所負責產品的核心業務的流程圖。因為是B端產品，涉及角色較多，針對3個代表性角色分別進行了繪制，僅供參考。(涉及到保密協議，所有關鍵詞都去掉了)
信息架構屬于用戶體驗的結構層，是產品的骨架。一般是由產品經理或者更高層的管理人員給出大框架。除非是大的產品迭代，否則不會大改。
如果是C端產品，權限這一塊相對簡單，比較好整理的。B端產品涉及角色眾多，可能要單獨拎出來分析整理。以上僅供參考，大家具體情況具體分析。若是功能很單一的產品，交互文檔中也可省去這個模塊。
產品操作流程圖就是通過圖形化的表達形式，闡述產品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時，會產生的一系列操作和反饋的圖標。
上圖是登錄、注冊和找回密碼的操作流程圖。僅供參考。模板源文件下載，后臺回復“交互”即可。
頁面線框圖，是通過圖形化的表達形式，闡述產品在頁面層面的信息。包括：
【頁面標題】即每一個頁面的對應標題，一般就是導航欄標題
【頁面內容】以黑白為主，保證信息規整易讀
【交互說明】用標簽將其對應起來，包括交互邏輯、操作流程及反饋、元素狀態、字符限制、異常/特殊狀態、相關規則 等等
【主流程線】只需要畫出主流程線即可，千萬不可太多太雜，時刻考慮讀者的感受
以上是注冊/登錄的線框圖和詳細的交互說明。將重點內容用紅色標記，可以讓查看者一目了然更好理解文檔。
常用控件類似UIKit，通常將極具復用價值的控制整理在一起，方便及時調用。
文檔、軟件只是工具，最重要的還是要落地、實行起來才能對產品有所幫助。所以在撰寫文檔的每時每刻，都應該站在“讀者”的角度思考，他們看的時候感受會是怎樣的，會覺得很難理解嗎？
轉自-站酷
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
競品分析是UX設計師的標準工具之一， 且用戶體驗設計師的主要交付品之一就是競品分析報告。在設計一個新的方案之前，我們往往會查看其他類似的產品，了解其他人做的相關工作，希望從中找到任何弱點或者優點，并期望在此基礎上進行改進，這將利于你的設計。事實上，競品分析已經不再局限于一種工具方法，更是一種思維模式，如何對比分析，如何批判性的進行比較以及從差異中獲取價值。
UX設計項目會遇到哪些類型的競爭對手？
這個問題可以理解為，我們要分析哪些競爭對手？一般來講，所有UX項目都面臨兩種競爭，一種是直接競爭對手，即業務有直接沖突，涉及到具體的利益沖突，商業沖突。例如滴滴和uber，淘寶和京東。另一種則是“間接競爭對手”，往往針對某些相似的產品模塊，這里的競爭并沒有準確的定義，只是為了比較而給與的一個名稱。 例如你在進行自家產品登錄注冊模塊的設計，此時你不僅僅可以研究一些直接競品，也可以研究其他擁有此功能模塊的產品。而該產品與你的產品并沒有構成競爭的關系，只是提供了一個參考方向。
為什么要進行比較？
關于這個問題有兩個答案，首先，調研競品發掘哪些功能或服務是他們不能做或者沒有實現的，這就是我們的產品可以利用的機會點，以提供新穎的或者說更強大的功能，從而提高產品競爭力。例如順豐快遞首先開創了機器填寫快遞信息的功能，從而大大提高用戶填寫訂單的效率、準確度和滿意度，進一步提高品牌競爭力和服務水平。
其次，檢查其他設計師對相同需求的解決方案必然會對你有所啟發，有利于你從中獲取靈感來優化自家產品。例如信息架構的優化、或者簡單地操作流程的優化。參考競品意味著你可以不斷從中學習，把競品的每個模塊、步驟拆解開來，分析其背后的設計原因及它們如何發揮作用，這將有利于你的產品設計。
參考競品首先意味著你能夠達到和競品同一水平的用戶體驗，因為有了參照標準相當于指路明燈，競品的優秀體驗也會督促你不斷優化自己的產品。但競品雖然為你創造了一個標準，同時也會限制你的思路和想法，使你可能錯過一些更優秀的解決方案，參考競品能讓你追趕別人，但無法讓你完全超越他人。因此僅僅復制是不夠的，必須融入自己的見解且時刻保持創新意識。
對直接競爭對手進行分析
通常，競品分析發生在項目的早期，你或許會尋找市面上是否會有競爭對手，然后嘗試著從競品中尋找優點和弱點，以推動自己的產品。如果沒有競爭對手時，往往可以從目標用戶入手，因為用戶實際上擁有自己的解決方案或者說策略，例如在滴滴流行起來之前，對應的用戶群往往使用出租車來代替出行方式。目標用戶在這之前是如何解決他們的需求的？你應該可以獲得一些間接可比的方案，收集用戶的相關想法有利于推動你的產品設計。
在產品上線后的運行階段，仍然需要做競品分析，此時或許存在一些新興的的競品，雖然是后來者，但往往會在交互、體驗或者運營策略等方面碰撞出一些新的創意。根據競品的功能策略，你需要進行一定的調整，不斷對產品迭代優化。除此之外，產品有時需要做一些追隨趨勢的更新，例如視覺風格、新的交互設計語言等。
如何從間接競爭對手那里獲得靈感
間接競爭對手也會給你一定的啟發，作為一個用戶體驗各種產品時，留心那些優秀的設計，可能是視覺方面也可能是交互方面，總之這些優雅的設計將會成為你的靈感之源。然而所有的設計都有其適用場景及背后的設計原理支撐，在海外設計經驗中一再強調的 context（上下文）就是這個意思。
優秀的設計都是最適合自己的產品和策略的設計，而不是最美觀或最的。因為設計不僅僅包涵體驗更是要兼顧業務。同一個設計在一個地方發揮作用并不意味著移植到其他地方仍然有效。
例如一個簡單的登錄模塊的設計，按照常規經驗，以目前微信的受眾數量做參考，可以無腦選擇微信快捷登錄，這無疑是最便捷的方案，但為什么很多產品仍然采用手機登錄？因為一個注冊的手機號碼能為公司的未來帶來極大的增值，每個號碼背后都是一個用戶，且通過手機號可以對這個用戶進行持續的推廣營銷，如拼多多的短信推廣，移動聯通的電話推廣。
所以，一切的設計都應以設計背景，業務訴求為基本原則來進行，盲目的追尋極限的視覺和效率，盲目的信奉設計潮流趨勢都是不可取的。好的設計和時尚的設計不同，好的設計有持久的價值，是美學和體驗的結合，并以基于心理學社會學的用戶研究為后盾。這樣的設計符合用戶的需求同時能為企業帶來收益。而時尚的設計則會隨著時間流逝而銷聲匿跡。
一味追尋潮流的應用程序設計，公然違背基本的可用性慣例，違背交互設計的基本原理，很有可能在市場中失敗?！狿rototyper.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圖表完成頁
五、總結
Chartistic，一款備受好評的小眾數據可視化app。
在這個到處都充斥著數據，以數據為導向的年代，日常辦公中隨時隨地都有可能需要對或多或少的數據進行可視化處理來幫助分析與演示。
雖然有很多的功能強大的工具可以創建圖表，但是卻沒有多少工具可以使創建更簡單、更具有交互性。
Chartistic無需登錄，打開即用，在移動端以交互的方式編輯數據，一分鐘內創建漂亮的柱狀圖、折線圖、區域圖和餅狀圖。將圖表以圖像的形式導出，并將其嵌入到演示文稿、電子郵件、文檔、電子表格中!
交互便捷，操作簡單的它已在43個國家/地區投入使用。在新加坡、泰國、菲律賓和越南，名列App Store的年度十佳應用榜單。上線起至今共入選 App Store 精品推薦 9 次，下載量累計24萬次 。
目標用戶：需要對少量數據迅速進行可視化處理的辦公人群
產品定義：快速、簡單的移動端數據可視化工具應用，導出圖表作為PPT等演示工具的補充。
產品特征：
在不同頁面需要輸入編輯時，對應的彈出鍵盤的類型，數字鍵盤只能輸入正數
圖表編輯頁面：
X軸Y軸編輯頁面：
設置編輯頁面：
新建圖表時
圖一
圖二
圖三
圖四
頁面名稱：首頁
入口：歡迎頁后自動跳入
頁面說明：
序號1：點擊出現其他鏈接彈層，首頁頁面置于底部并虛化（如圖三）
序號2：點擊出現新建圖表類型彈層，首頁頁面置于底部并虛化（如圖二）
序號3：
序號4，5：點擊關閉彈屏，首頁頁面置于頂部并解除虛化
序號6：點擊快捷處理按鈕消失，回到首頁，在首頁圖表列表第一個位置添加復制的圖表
序號7：點擊彈屏關閉，快捷按鈕消失，回到首頁，該圖表刪除，列表中該圖表后面的圖表前移填充空缺位置
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：
序號13：點擊后小圈即序號7變成刪除符號如圖9，單擊刪除符號刪除該組數據，當刪除至只剩一組數據時刪除符號變回小圈，不可再刪除
序號14：點擊隱藏上面的下拉按鈕、添加按鈕、刪除按鈕、設置按鈕，隱藏后圖表變為左向，單擊后以上按鈕出現
序號15：點擊展開設置編輯頁面
序號16：輸入值之前按鈕為灰色，輸入后字體顏色由背景設置決定；點擊輸入標題
序號19：點擊餅圖需要修改占比的目標扇形后出現兩個半圓形按鈕，按住按鈕滑動分隔線調整目標扇形角度，按鈕相鄰一邊的扇形同時被增大/減小角度，餅圖中間提示目前目標扇形角度對應的占比
4.3.2 智能剪貼畫編輯頁
頁面名稱：智能剪貼畫編輯頁
入口：
頁面說明：
主頁面：左滑展開展開設置編輯頁面
序號1：按住上下滑動更改有色部分的高度，左側占比數值一起更改，更改范圍為0%-100%
頁面名稱：X軸Y軸編輯頁面
入口：
頁面說明：
餅圖沒有編輯X軸名稱按鈕與編輯Y軸名稱按鈕
序號1：點擊保留編輯結果，收起X軸Y軸編輯頁面，回到圖表編輯頁
序號2：點擊屏幕下半部分或者從下半部分上滑，收起X軸Y軸編輯頁面，回到圖表編輯頁
序號3：
序號4：
序號5：點擊編輯文本框與數值框之間出現小刪除按鈕即序號4，點擊刪除對應的該組數據
異常提示：
頁面名稱：設置編輯頁面
入口：
4.5.1 柱狀圖/折線圖/面積圖設置編輯頁
標題設置功能
頁面說明：
序號1：屏幕左側頁面點擊或者右滑返回圖表編輯頁
值設置功能
頁面說明：
序號2：最大值最高可設置為10000，最大值設置的值需要大于最小值，僅可編輯為整數
序號3：最小值最小可設置為0，最小值設置的值需要小于最大值，僅可編輯為整數
異常提示：
網格設置功能
頁面說明：
序號4：可見性為關閉狀態時，行數與每一間隔的值無法選擇與編輯
序號5：初始默認值為10，可編輯范圍為【0~15】，僅可編輯為整數
序號6：對齊條開啟狀態見圖，在圖表編輯頁面滑動所編輯的數據對應到Y軸上的數值（圖中的0、100、200、300等數值）時停頓一下，左側提示所對應的數值；滑動編輯的數值（如323、546等）不在Y軸上時，不顯示左側的數值提示
序號7：簡單圖表僅保留圖表主體形狀，如上圖
序號8：初始默認值為100，僅可編輯為整數，每一間隔的值需要在 【0.07*（最大值-最小值）~ （最大值-最小值）】這個范圍內，考慮到（最大值-最小值）/輸入的間隔值 得到的行數有可能不是整數的問題，實際顯示的行數為（最大值-最小值）/輸入的間隔值四舍五入取整后的行數
異常提示：
邊框設置功能
圖例設置功能
背景設置功能
頁面說明：
序號10：主題文字注釋
序號11：四種主題單選，設計出圖標作為按鈕外觀，下方會出現對應文字注釋，所選擇的背景按鈕外層加一圈黑色示意
圖表樣式設置功能
頁面說明：
序號9：柱狀圖/折線圖/面積圖樣式說明如圖
4.5.2 餅圖設置編輯頁
標題設置功能
頁面說明：
序號1：屏幕左側頁面點擊或者右滑返回圖表編輯頁
表格設置功能
頁面說明：
豎向表僅可選擇左對齊或者右對齊，橫向表可選擇左對齊/右對齊/居中。
值設置功能
背景設置功能（同4.5.1柱狀圖/折線圖/面積圖）
圖表樣式設置功能
頁面說明：
餅圖樣式說明如圖
4.5.3 智能剪貼畫設置編輯頁
圖像搜索功能
頁面說明：
序號1：僅可輸入英文名稱搜索，無編輯內容時文本框內容為Search，字體淺灰色，輸入內容后字體變為黑色
異常提示：
當移動端無網絡時，搜索框下方“在線搜索圖像”更改為“連接中斷”，搜索框點擊無反應
標題設置功能
值設置功能
背景設置功能（同4.5.1柱狀圖/折線圖/面積圖）
圖表樣式設置功能
頁面說明：
智能剪貼畫樣式說明如圖
頁面名稱：圖表完成頁
入口：
頁面說明：
序號1：點擊返回首頁
序號2：點擊進入圖表編輯頁面
序號3：點擊導出保存到本地或者分享
以上便是我本次倒推撰寫的Chartistic的產品需求文檔，格式參考倒推“潮汐”APP的產品需求文檔。
這款App是一款很實用的手機應用，交互很有特色，因為過于追求操作的簡便，導致功能局限比較大，對于App的未來優化方向，筆者認為可以在以下幾個方向嘗試：
這是本人第一次撰寫的產品需求文檔，一定有諸多不足，希望各位前輩不吝賜教，感激不盡！希望可以成為一名產品經理，創造出對用戶有價值的產品，不求做改變世界的產品，只求改變自己，改變眼前。
文章來源：人人都是產品經理
大部分交互設計師接到需求后，就開始分析下競品、然后結合自己產品和自己的想法，就著手交互原型制作了，在這樣一個設計流程中，交互設計師很難有體系化的思考。
有沒有一套體系化的設計思路，讓交互設計師做出的方案又專業、又全面、又經得起挑戰和用戶檢驗的設計方案呢？
本文是我梳理的一套體系化設計流程與思路，希望可以幫到大家。體系化設計思路大綱如下：
作為一個交互設計師。在我們接到需求之后，首先需要弄清楚的是產生需求的業務背景是什么。其次是基于業務背景了解產品的目標是什么。最后弄清楚產品的用戶人群有哪些，用戶目標是哪些。
交互設計師通過從產品經理或者其他需求發起方那里了解需求生產的業務背景，了解為什么要做這個需求。在了解清楚之后，追溯需求最原始本質。
在我們實際工作的大部分情況下，大部分產品經理不會在需求文檔中將業務背景寫清晰，這時候我們交互設計師就可以將業務背景在交互文檔中輸出，并清晰的展示出來。
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 則是通過設計優化所帶來的。
設計師在交付稿件后，容易松懈，以為項目告一段落，就疏于后續的跟進工作。其實后續的跟進也很重要。產品測試版上線后，交互設計師應該跟進后續的走查和設計問題的反饋。
通過數據分析，確定上線的方案有哪些問題需要優化，建立需求池方便后續跟進優化，不斷完善產品設計。
文章來源：優設
藍藍設計的小編 http://www.syprn.cn
