交互輸出文檔的作用
文檔這個東西，我們又愛又恨，愛的是它能夠記錄并且在工作中讓大家高效的協調合作，恨的就是很多人對文檔嗤之以鼻非常敷衍，以至于文檔不但沒有起到它應有的作用，反而成為了一個不負責任的借口。所以一份合格或者優秀的交互輸出文檔對于一個項目的流轉以及團隊的配合來說是至關重要的。交互文檔的主要利益相關者通常是以下幾個角色：交互、產品、開發、UI
交互
首先優秀的交互文檔必須在交互組內部進行過審核，包括一致的撰寫標準和模式的使用，一個比較規范的交互設計組對于交互的撰寫標準也是有嚴格的規范的，以及在什么情況使用什么交互模式還有組件庫的調用都會有詳細的說明，那么你的交互輸出文檔就必須滿足團隊設定的規范。
其次對于其他交互設計師來說，你的設計方案中是否會出現其他人負責的模塊，那么在評審的時候需要同步，雖然交互輸出文檔對于其他交互來說不是直接受益人，但是在團隊同步過程中也是非常重要的。
產品
每個公司對于文檔的要求和規則不一樣。小公司可能沒有交互設計這個崗位，那么可能產品連prd文檔也沒有，僅僅只是一個簡易的需求說明文檔，就更不用說針對交互規則的說明文檔了。
很多有完善規模和流程的團隊不僅會有詳細的需求說明文檔也有很完善的交互說明文檔。我們首先要明確的一點是那么多文檔最后是給誰看的，一共在項目中會有多少文檔產生。
通常產品經理會在項目初期做一份prd文檔（Product-RequirementDocument，需求說明文檔），這個prd文檔主要是給業務方、交互和開發看的，在這個文檔中需要包含一些業務規則以及交互規則，所以交互的輸出文檔是需要和產品的prd文檔合并的。
當然如果你是一位很有自驅力的人，那么你可以自己推進需求并落地，一個人就可以完成prd文檔的撰寫和需求的落地了。
開發
特別想給各位提個醒，在開發需求評審的過程中，請一定記住你們評審的目的，開發同學也要注意，請把重點放在需求是否能實現以及開發相關的地方即可，請不要考慮為什么要這樣做，或者你覺得應該怎么設計，一旦進入了開發對需求和設計的評頭論足那么這個會議效率就相當低下。專業的事情就交給專業的人去做吧，可以私下討論但不要在評審會上各抒己見。
交互輸出文檔對于開發的作用就是，開發可以更好的還原該功能中交互的跳轉以及邏輯，所以我們盡量把交互規則寫明白寫詳細，比如按鈕在press和default時候是否樣式會有變化，或者頁面轉場的方向，這都是一些細節，減少不必要的低效溝通。你會發現有些時候為什么開發總是來問一些規則，就是因為文檔中沒有描述準確，所以開發和交互都需要花時間去同步這個細節。
所以這個也非?？简灲换ピO計師對需求文檔撰寫的功底，并不是圖片文字隨意擺放就可以的。和開發合作時也是一項內部的體驗設計，你把文檔寫好了，開發看起來也舒服，滿意度也高。如果是一堆文案，連基本的對齊都沒做到的話，誰來看都會看不下去。
UI
交互輸出文檔對于UI來說，作用就非常簡單了，但是這里也會碰到問題，那就是交互同學只需要把信息的層次表示出來即可，千萬不要畫到連視覺同學都沒有發揮余地的程度。所以為什么現在UXD體驗設計那么火，就是因為交互和UI其實重合度是很高的，只要有智能化組件庫和工具做支撐，那么在交互和UI的設計流程中，時間就會大大降低。
交互輸出文檔的內容
在這里，我們就將整個prd文檔的內容給大家分享一下，不僅僅是交互需要輸出的部分。因為一個高階的交互是需要能夠獨自產出prd文檔的。然后不同的公司對與文檔的要求也是不同，大家做參考即可。
一份基礎的prd文檔主要由這幾部分組成（其實就是這個需求的來源以及推導過程和如何落地的說明）：
1.項目概要
a.需求背景
這個是一個項目最重要的部分，可以說背景沒有搞清楚，后面都可以不用做。這個指的就是我們做這個需求的價值和原因。比如我們app中業務方（運營）需要做一個掃一掃功能，那么這個功能首先我們就從業務價值和用戶價值兩個方面去評估，根據對業務方的溝通之后我們發現掃一掃功能將會在周年慶的時候通過物流包裹上的二維碼，讓用戶進行掃碼參與活動這樣的玩法。
所以這個需求對于業務方來說是一個轉化手段，通過掃碼參與活動-領券-消費，確實是一個不錯的玩法，但是大家如果只盯著眼前的問題或許就不夠了，比如當周年慶結束之后這個功能還有什么用，他在以后的規劃中的存在是怎樣的。在所有的包裹中印上活動的二維碼這個時間周期和成本有多大。
其次，對于用戶來說，掃一掃并不是幫助他們解決了某個問題，而是我做了一個東西，同時搭配著這個功能讓你們去使用，對用戶來說是一個很可有可無的功能，如果線下包裹上的二維碼破損了也是非常影響體驗并且是不可控的。那么綜上所述，既然要做一個臨時的活動用其他的方式會不會更好？
所以在這個文檔中的第一步，首先就是要確定需求的背景、價值，也就是說，你這個需求是怎么來的，比如再來講我們一個店鋪的優化項目，在這個項目中，首先我們必須在評審的時候說清楚我們為什么要對其進行優化和改版，一定是出現了或者我們定義到了某個比較嚴重的問題，這邊大家對我們app業務可能不是很了解我就簡單說了，就是個人中心和店鋪營銷場景重合過多，并且賣家的同時可以買和賣兩個場景存在，所以店鋪頁通過我們的數據分析和用戶的訪談我們發現了一些機會點，以及我們必須突出一個核心場景讓用戶有明確的分辨。
另外就是背景的描述也可以帶上你的調研結果和分析，比如之前我們做首頁優化，我們觀察了近5個月的數據，都呈現下降的趨勢，所以之后有進行了一系列的訪談和用戶體驗地圖分析才有了這個需求的背景產生。
b.需求目標
目標很好理解，就是我們希望通過這次需求迭代達到一個什么成果，比如我們之前做過一次整體的體驗優化改版，那么我們的目標就是減少用戶的流程跳失、提升整體體驗滿意度、提高用戶的任務轉化率，其中我們做了一個商品關注的功能，由于是限時特價商品所以是限量的，在規定時間進行搶購，為了讓用戶的使用場景統一我們打算在應用內做一個商品關注功能，所以在這個需求的初期，我們對這個功能的目標和預期是提升xx百分比的轉化，提高x%比的gmv，提高用戶對關注商品下單的效率和滿意度，之前很多用戶想要購買商品需要自己在手機端設置鬧鐘，不方便。所以這個功能的一個目標就是解決用戶場景遷移的問題。設定目標之后，就是為了在上線后對其進行復盤和數據跟蹤還有用戶跟蹤。
可以用一句話來描述：針對什么用戶在什么場景下解決用戶的什么問題，達到什么目的？
c.需求范圍
需求范圍也相當于范圍層，指的就是在該需求中我們需要做哪些相關功能以及功能涉及面。舉個例子，之前說的掃一掃功能，不同的產品定位對于掃一掃功能的要求也是不同的，比如說微信在掃一掃功能中承載了：掃一掃、相冊、封面、街景、翻譯、手電筒等諸多功能，再比如淘寶，有掃一掃（ar、拍立淘）、相冊、歷史、幫助、手電，這說明了不同產品對掃一掃功能有不一樣的要求，所以在需求范圍內我們需要把本次需要做的功能進行描述，并且該功能是否影響其他功能的使用和對整個產品的影響范圍。并且我們也會講所需要的功能進行拆解和優先級拆分，在表格中編輯。
d.調研分析
調研分析其實就是為我們第一步背景和價值做準備，由于匯報方案和評審，或者在項目推進時，我們需要有相應的論據來支撐我們方案的客觀性，所以在這一板塊中輸出的結論就非常重要，比如之前的首頁改版，經過用戶研究小組的訪談和數據分析得出相關的結論，通過埋點找到相應板塊的點擊數據和異常點，然后再進行一系列的問卷和訪談研究，找到結果，都是為了輔助項目的背景以及在評審中大家對需求價值的靈魂拷問。由于數據和調研結果比較敏感就不過多放了。
e.版本日志
日志是一個非常重要的組成部分，做過開發的同學都知道log 的重要性，當我們跑不通的時候我們都會去檢查log，然后多測試幾遍可能就找到問題所在了，其實我們的版本日志的作用也是這樣，但是一個是對自己來說可以記錄自己的工作過程，還有思路的變化，第二就是對外，包括和需求方的討論，會議的紀要等。
要注意的是會議紀要在備注中需要詳細說明，以做證據。同時也要郵件通知相關人員和負責人。可能有些公司還會放一些評審記錄，比如各部門負責人對方案和需求的建議，業務方和技術負責人的一些建議也會放在項目概要中，而這個prd文檔也可通過內部服務器進行實時更新和保存，如svn。方便大家對需求的進度和迭代有一個直觀的追蹤。
f.項目成員
這個就不用多說了，產品、運營、交互、視覺、開發各司其職，照相館人員即可，就不至于當項目開始進行了人員分配還沒到位就尷尬了。
2.需求方案設計
a.業務、任務、界面流程圖
有些同學不是特別明白業務流程圖和任務流程圖的區別，這邊給大家簡單介紹一下
業務流程圖：
意思就是在這個需求系統中，相關利益者的業務關系，任務信息的流向的一個圖標。比如這個簡單的例子，用戶在點外賣這個場景中，相關的利益者有用戶、店家、外賣員三者，那么當用戶開始觸發流程后，這3者在這個流程中就會各司其職，而業務流程圖也很明顯的告訴大家所有聯動者的指責和流程走向。
任務流程圖：
用戶在具體執行某一個任務時候的工作流程，以及其核心任務的操作步驟，比如在登錄注冊這個任務中，用戶需要進行一系列的操作，在這個流程中用戶的操作引發的系統判斷需要詳細說明。
界面流程圖：
界面之間的跳轉關系和路徑，在這個流程圖中，我們不需要吧詳細的說明寫上，只需要將需求中涉及到的頁面跳轉進行敘述即可。
b.相關說明和規則
接下來就要開始我們交互文檔最為關鍵的部分了，如何書寫交互說明，以及交互說明應該包含的內容。
1.全局思考
在做交互方案也就是我們畫原型的時候會思考一些問題：
a.整體思考
1.信息架構是否容易理解，信息分類是否合理，比如我們的信息架構是否采用了用戶容易理解的，市面上常用的信息架構。
2.信息層級和路徑是否合理，不一定要最簡，但是要高效，信息的優先級是否放置準確，信息組織是否具有相關性、邏輯性。
3.主題是否清晰，3秒內告訴“我”在哪里，并且可以做什么
4.方案的延展和后續功能規劃的可擴展性
b.用戶權限
根據不同用戶的權限對該需求進行檢查，比如普通用戶、vip用戶、內外網用戶、游客用戶，在登錄未登錄時候對需求內功能的使用是否有影響
c.登錄方式
用戶登錄和注冊、終端的兼容，不同方式注冊的用戶是否需要補填相關信息等等
d.流程
1.該需求中的功能流程是否和其他類似或者相同功能流程保持一致性；
2.逆向流程和非正常流程的思考有沒有完全；
3.流程的閉環有沒有做好；頁面跳轉的方式是否合理；
4.中斷后的恢復狀態如何呈現；
5是否保留原信息等等
2.內容、狀態和顯示
a.內容的獲取來源
例如下方的圖片為例，banner的圖片來源和發現feed流的圖片來源肯定是不同的，那么就要寫清楚，圖片或者數據的來源是來自于用戶的上傳還是系統后臺的配置獲取；并且獲取的方式是如何的，是需要手動下啦刷新還是切換頁面自動刷新，還是設定時間自動刷新。
字段、圖標是從接口獲取還是前端寫死，以及氣泡展示的規則等等。另外一張圖片可能用在多個地方，而可能呈現的尺寸不同，所以在涉及到相關圖片使用時要注意剪裁規則和圖片的來源。
b.緩存機制
圖片以及一些資源通常我們需要對其進行緩存，有些同學不清楚什么是緩存，緩存是在計算機上的一個原始數據的復制集，一般來說需要緩存的內容是通過瀏覽產生的，包括圖片以及cookie等，瀏覽過的視頻和廣告也會被緩存。同時在不同的網絡環境下緩存的時間標準也不同，無網絡那肯定只能讀取緩存文件，wifi環境下緩存時間可設置的短一些，而流量環境下時間就可以設置的偏長。
c.狀態
狀態大家都應該都會寫，主要包含的就是初始狀態（冷啟動無緩存第一次進入）、空狀態（無任何內容比如空的購物車）、常規狀態、異常狀態（網絡中斷、接口報錯）還有過期狀態等
d.顯示
數據和內容的極限值，最大和最小，比如粉絲和關注的數量，小于1萬人則顯示完整的數量，大于等于1萬小于11000則顯示1萬，大于11000小于12000則顯示1.1萬，這樣的方式。另外包括標題極限為一行顯示，超過部分的顯示規則。敏感信息、錯誤提示以及超時的信息提示。金額的格式使用￥xxx還是xxx元，小數點保留的規則。日期的顯示格式是xxxx年xx月xx日還是xxxx-xx-xx還是xxxx/xx/xx等等
3.反饋、提示、手勢
反饋和提示的樣式有很多種，一般反饋指的是用戶對某一個控件進行觸發后獲得的反饋，比如按鈕按下的反饋，以及之后收到的反饋，是進行跳轉還是給用戶提示，采用的是模態還是非模態的提示。比如點擊關注某個人的按鈕后會提示關注成功，比如退出某個圖文編輯會二次確認是否退出，再比如抖音長按后出現的3個操作反饋，還有支付成功后的動效提示、惡意多次操作后的提示等等
如果有手勢交互也需要說明，比如滑動后內容置頂、拖拽、左右輕掃的tab滑動、重按的3dtouch等等
4.加載
使用模態還是非模態，如果是模態加載請盡量使用情感化設計來減少用戶焦慮。如果是非模態，根據信息呈現和體驗采用分步加載還是預加載還是智能加載。如果是分布加載就選擇先加載資源較小的內容，再加載圖片，可以先將圖片模糊化粗渲染給用戶呈現，包括在瀏覽信息流的時候的分頁加載也是可以的。如果更智能化一些也可以預判用戶的行為進行內容加載，例如當用戶在某個圖文前停留時間達到某個值后就預先給用戶加載里面的內容。
加載的全局方式在方案中需要考慮，頁面加載、下啦刷新等等，需要統一。
5.環境、設備與場景
a.不同設備、廠商的不同版本
都會影響到方案的落地和用戶體驗這個要非常注意。比如一些交互控件我們在6、iphonex和大屏幕尺寸上使用起來效果很好，但是小屏幕的時候這個交互控件顯得就很難受，所以需要仔細斟酌用戶的使用情況。另外還有橫豎憑情況的交互方案是否兼容、是否需要與其他硬件進行兼容。
b.白天和晚上是否需要做不同的風格設計，以及在是否需要給用戶遮擋隱私的功能。
6.文案
文案這點很多設計師都忽略了，你們有沒有聽說過一個叫文案設計師的崗位。其實文案在我們產品設計中是非常重要的。首先一個產品的文案對應的語氣和產品調性也是相關的，就好比我們說產品有它自己的性格一樣，另外文案的使用直接就影響用戶對該信息的理解，比如一個對話框的文案是：確定退出嗎？下面會有兩種不同的選擇，一個確定，一個是退出，大家覺得哪個比較好？還有就是不加“嗎”，就變成了：確定退出？這樣描述出來的語言給人感覺很冰冷，甚至有一些威脅。
所以首先我們的文案是否有溫度，和產品的個性是否相匹配。其次文案的表述是否準確和通俗易懂，比如你告訴程序員一句話，幫我去菜市場買西瓜，如果有西紅柿，幫我買兩個，你會帶什么東西回家？程序員版：if（看到西紅柿）西瓜等于2；else 西瓜=1。buy 西瓜。條件：看見西紅柿 執行命令：買兩個西瓜一語道破版：其實吧，看到西紅柿呢是賣兩個西瓜的觸發條件…沒看到就買一個西瓜，看到就買兩個西瓜。所以這里出現的不僅僅是程序員的思維和我們的差異化，也說明了一句話沒有表述清楚所帶來的問題是很大的。
另外就是文案用語的一致性，在整個產品同樣的場景中，我們需要統一文案用語。
7.常見控件
具體見下方列表
8.撰寫方式
作為一個設計師，不管是否在做視覺，我們都需要對文檔有一個美化意識，如果你的文檔非常凌亂，那么在別人眼里就會覺得你是一個比較粗心大意，不夠負責任的人，所以我們盡量在做交互輸出文檔的時候也畫的美觀一些。
目錄
首先在目錄的撰寫時候要進行分類，通常我做的時候會對該需求以頁面父子集關系進行創建，父集為核心頁面，子集為其下的相關子頁面，這樣頁面的流轉和歸屬關系就不會搞錯。
說明
在撰寫規則與說明時可以通過標簽法進行標簽說明的撰寫方式，同樣在視覺上保持美觀，對比與對齊的運用，具體該寫什么東西上面已經說明就不贅述了。除了交互規則以外，高階的交互設計或者產品經理還需要補充業務規則，比如排序、商品抓去規則、權重、算法、活動規則等等這里就不展開說了。
總結
文檔的形式有非常多種，針對不同的公司和產品也需要作出相應的調整，能夠滿足需求和方便協作，目的就達到了，我們并不希望過多的時間花在文檔的撰寫上，而是希望大家在做設計時多思考業務，本次分享就到這里啦～
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在數據可視化的分析過程中，用戶是所有行為的主體，通過獲取的可視信息形成認知，在交互分析過程中獲取解決問題的方法。
在這個過程中，感知和認知能力直接影響著信息的獲取和處理進程，進而影響用戶對外在世界環境做出的反應，這也是設計數據可視化產品服務藍圖的基礎邏輯。
從數據到知識有兩個途徑:交互的可視化方法和自動的數據挖掘方法。
我們可以看到，下圖展示的便是一個典型的可視分析流程圖和每個步驟中的過渡形式。這個流水線的起點是輸入的數據，終點是提煉的知識。
可視化的首要任務是準確地展示和傳達數據所包含的信息。根據預期和需求，提供有效輔助手段以方便用戶理解數據，從而完成有效的可視化。
但是當出現數據尺寸大、結構復雜的情況時，有限的空間大大限制了靜態可視化的效果，有限的可視化空間和數據過載之間的處理是非常復雜的。有時我們會通過物理環境的變化來改變服務模型，但是更多時候我們需要通過交互設計來完成對復雜信息的處理，提升用戶對數據解讀的便捷性。
那么當我們在設計一張數據大屏時，我們該如何通過交互提升用戶獲取有效數據的效能呢，下面我們一起來探討如何完善大屏設計中的交互設計：
一、信息架構
1、清晰易理解、可拓展的信息架構
2、清晰易理解的導航關系
3、清晰易理解的層級關系
案例分析：
在我們收到原型圖時，首先我們需要梳理清楚大屏的信息架構，比如整個大屏的模塊比例是按照1:1:1還是1:3:1的結構。又或者是如何設計重要功能的入口，比如整屏的導航tab選項，在布局設計上用戶是否可以明晰它是是否是全屏篩選，在交互邏輯上用戶是否可以通過最短的路徑快速篩選抵達內容。那么當用戶進行了導航的切換后又返回到上一頁面，整個行為是可以形成路徑閉環的。
二、流程設計
1、可下鉆的模塊需給用戶以引導
2、相同功能的用戶體驗路徑需保持一致
3、逆向流程的功能設計能形成閉環
案例分析：
我們經常會在大屏中間設計地圖的樣式來展示某個省的數據情況，比如，如圖所示，當業務側需要從湖北省跳轉至武漢市，查看武漢市的詳細數據，那么我們可以在省級地圖輪播的數據氣泡上給予用戶以提示，用戶可以清楚獲取到跳轉市級大屏的路徑方法。
三、界面展示
1、一致可控的圖表組件
可視化大屏中最核心的數據展示形式就是圖表模塊，我們需要正確地展示圖表組件外觀與組件關系，把控好相似功能的橫向一致性，我們可以細分為以下幾點。
（1）選擇正確清晰的圖表組件
（2）正確表達組件元素之間的關系
（3）一致性的組件樣式和交互行為
（4）不要忽視組件的不可用狀態（按鈕）
（5）刪減影響用戶視線和注意力的冗余元素
案例分析：
當一個模塊內需要展示數據的多個維度，我們如何將該模塊設計得更加清晰呢。如下圖，根據人從左往右的閱讀習慣，在左邊展示數據1和數據2的總指標數，在右邊展示數據1和數據2的詳細走勢，右上角我們還可以添加tab選項，用戶可以進行tab切換查看更多維度的數據內容。
所以，我們可以將用戶使用習慣和交互行為很好地結合起來，不僅免去了圖表多亂雜的場景，用戶也可以更快地查看到想要獲取的數據信息。
2、清晰的數據展示
配合圖表展示的就是我們的“數據數字”內容了，在我們將設計稿傳遞給前端同事后，填充真實數據后的視覺效果可能看起來沒有效果圖規整，一方面在進行繪制效果圖之前，可以與產品業務側共同探討數據內容，盡量給視覺設計師提供真實的數據，另一方面，在我們作圖搬磚的時候，也要注意一下幾點：
（1）不要遺漏了“無數據”的缺省空界面，當無法獲取到數據時，我們需要給前端提供這樣的缺省圖；
（2）清晰的數據排序規則，比如環形圖中，總起始點到終點，數據對應的數值量應該是遞減的排序規則；
（3）考慮數據的極值情況，比如在搜索列表中學校名稱文字的極限字數是多少，超出多少字用省略號顯示，這些我們都需要考慮到；
（4）是否需要標明數據的更新時間節點，有的大屏強調數據實時性，我們經常會在右上角增加數據截止更新時間來來引導用戶；
（5）特定的數值按照特定的格式和單位顯示，比如羊字符能讓用戶第一時間識別到是人民幣，而如果金額數字過長后面再加元會降低識別效率。
案例分析：
3、選擇與輸入的信息反饋
（1）展示合適的首選項或默認值
（2）輸入前有效的文本提示
（3）輸入完成后需及時反饋
案例分析：
4、用動效進行有效的交互引導
利用動效進行交互引導，即使大屏操作鏈路過長，也可以讓用戶快速上手操作，減少流程學習時間。進入下一場景后，又會有對應的區域提示用戶返回全局或查看其他場景；當做到層層有響應，就能減少用戶在每一步操作上的困惑時間，幫助用戶快速上手操作流程，并且大大提升工作效率。
但是我們需要注意的是，不要為了酷炫而做太多無用的動效，不僅會讓頁面加載速度慢，也會讓用戶覺得雜亂無重點。
總結：
交互可提高可視化系統的效率，幫助用戶處理更多的數據，完成更復雜的任務。然而，實現交互本身也有額外成本?；拥南到y可以使用戶能探索更大的信息空間，但隨之而來的成本是用戶需要花費更多的時間與精力去瀏覽和探索數據。
因此，可視化系統應當采用數據挖掘算法自動發現用戶可能會關心的數據或者模式；并通過可視化呈現給用戶，用戶在這個基礎上通過互動進行更深入的挖掘。設計師的設計決定了系統的可理解性，一旦掌握了這個邏輯，再復雜的頁面也會變得有條不紊。
我們仍需在數據可視化的道路上不斷探索挖掘數據價值，給決策者提供有效的數據分析支撐，讓設計驅動數據價值最大化。
一、什么是格式塔原理？
格式塔心理學誕生于1912年，是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象并對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的：我們的視覺系統自動對視覺輸入構建結構，并在神經系統層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區域?！靶螤睢焙汀皥D形”在德語中是Gestalt，因此這些理論也稱做視覺感知的格式塔原理。
格式塔學派主張人腦的運作原理屬于整體論，“整體不同于其部件的總和”。例如，我們對一朵花的感知，并非純粹單單從對花的形狀、顏色、大小等感官資訊而來，還包括我們對花過去的經驗和印象，加起來才是我們對一朵花的感知。
格式塔心理學家認為這些原則之所以存在，是因為頭腦具有天生的傾向，可以根據某些規則感知刺激中的模式。（是不是覺得hin神奇）
比如，這是著名的“人臉花瓶幻覺”圖。如果以黑色為背景，白色為圖形，則是一個花瓶；如果以黑色為圖形，白色為背景，則是兩個人的側臉。它也反映了圖形和背景對一幅圖的影響。
二、格式塔原理分析
使用不同數量的空格來合并或分離元素是傳達有意義的分組的關鍵。例如，在Ant Design的標題區域中，“ 搜索”功能與站點的主要導航位于同一行。但是，主導航和搜索之間的多余空格表示它們屬于不同的組，因此具有獨特的功能。對于使“ 搜索”功能在主菜單的其余部分中脫穎而出，此空格至關重要。
但是，在較小的屏幕上，無法保持此間距。為了避免將這些區域視為一個整體，頁面收縮寬度的時候，搜索后的文字隱藏了。
應具有固定或鎖頭標題的網站特別可以從使用獨特的背景顏色或清晰的邊框中受益，從而有效地將標題與下面滾動的頁面內容區分開。此外，大頁腳的單一統一背景色 可有效地表示該區域中的所有鏈接都屬于一個組。
創建清晰的邊界是一種強大的視覺提示，可以壓倒其他分組原則，例如接近性或相似性。因此，當需要包含幾種不同類型的UI元素或無法調整對象之間的空白量時，它是一種強大的工具。我們做頁面時如果需要把兩個元素放成一組與其他元素區分，那么我們可以用線框畫出邊界來達到目的。
如果其它因素相同，那么相似的物體看起來歸屬于一組。接下來從形狀、顏色、尺寸上來說明相似性原理，這也就是我們平時做視覺設計時的原理，比如我們設計稿宣講時可能會被開發、產品以及測試同學問到“為什么用這個形狀？為什么這里用這個顏色？為什么這兩個尺寸不一致？等等，細細體會這個相似性原理就會給我們答案，讓我們在畫設計稿時能夠有理有據。
在上圖中，我們頭腦中自然而然的會分成“四列”，也就是圓形一列，三角形一列，然后再圓形一列，三角形一列，而不會看成“三行”
應用共享的顏色來表示某些項目是相關的，因此可能具有相似的功能，這很有效。通用顏色往往比其他特征（例如形狀）更加突出，因此可以用于組合不同類型的元素并傳達它們確實相關。
在用戶界面設計中，顏色通常用于指示常用功能。例如，使用單個鏈接顏色作為與用戶交流可點擊內容，鏈接顏色應僅保留給交互式文本和其他可單擊元素，因為用戶會意識到所有具有此特征的項目都是相關的，并且以相同的方式工作。因此，鏈接顏色不應用于關鍵字，不可點擊的標題或實際上不可點擊的附近圖標。
如上圖，就是一個用色的反面例子，“ 消息中心”中的所有按鈕均為綠色，因此用戶必須花時間確定哪個是提交表單的主要按鈕。（此外，“ 提交”按鈕離消息區域很遠，并且根據Fitts的定律，這種缺乏接近性也會降低用戶的速 度。）
相同顏色的按鈕將被視為具有相同的重要性級別。因此，應為主要操作性按鈕保留單獨的顏色，以幫助它們在輔助按鈕中脫穎而出。
在用戶界面中，我們經常使用大小來強調內容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度，并且在所有其他條件相同的情況下，將共享該屬性的所有元素連接在一起。一致地使用大小會創建視覺層次結構，并使頁面易于掃描，因為人們可以立即看到并理解這些類型分組。
例如，在產品列表頁面中，每個單獨的產品列表都以相同的大?。ê拖嗤男螤睿╋@示。這種一致的視覺樣式告訴我們該區域中的所有物品都是產品。共享大小將其與其他不同的UI元素分開。當某項商品在此列表中以不同的大小或形狀出現時，就會突出顯示為不屬于產品分組。下面這個產品集合的促銷以單個產品列表大小的兩倍顯示。
下面是我最開始嘗試的招聘系統首頁的改版：
根據上面的相似性原理和接近性原理就可以很容易看出來，這個頁面結構和邏輯不清晰：
1.待處理和招聘日程兩個模塊之間的區分不夠清晰：因為這兩個模塊右側應用了同樣的形狀和顏色的按鈕（相似性原理），讓用戶在心理上產生聯想，同時這兩個模塊之間只靠間距來區分，區分的太弱了（接近性原理）
2.招聘日程頭部日期與下面的面試安排卡片聯系太弱：因為面試卡片用了非常強的邊界區分的線條（接近性原理-構建清晰的結構）確實在面試模塊之間構建了清晰的結構，與此同時卡片與頭部的日期之間看起來沒有什么關聯。
3.首頁的選中效果太弱，分析這個頁面的層級，左側首頁選中才應該是最重的，能讓用戶第一眼就知道在系統中的位置，很顯然目前來看很容易忽視首頁這個位置，關注點被吸引到了快捷入口。這并不是我們想要傳達給用戶的。
根據格式塔原理中的相似性原理和接近性原理，對頁面的結構進行了調整，就看起來清晰多了。
所以，我們在制作完設計稿后，可以應用格式塔原理，分析下最終呈現給用戶的結構和邏輯是否清晰。而這也是做視覺的理由和底氣。
視覺傾向于感知連續的形式而不是離散的碎片。
連續理解起來是很簡單的，但連續卻解決了非常復雜的問題。通過找到非常微小的共性將兩個不同的環連接成一個整體。在引導頁中經常會用到這個。
視覺系統自動嘗試將敞開的圖形關閉起來，從而將其感知為完整的物體而不是分散的碎片。
閉合可以實現統一整體，這不難理解。但是有一個非常有趣的現象值得我們去觀察和思考，就是不閉合時候也會實現統一的整體，更確切的說，這種現象是一種不完全的關閉。這些圖形與設計給人以簡單，輕松、自由的感覺。所以，完全的閉合是沒有必要的。最著名的應用便是蘋果公司的logo，咬掉的缺口喚起人們的好奇、疑問，給人巨大想象空間。
我們傾向于分解復雜的場景來降低復雜度。
我們的大腦將視覺區域分為主體和背景。主體包括一個場景中占據我們主要注意力的所有元素，其余則是背景。這個原理經常會在海報設計中應用，這也是為什么我們做海報，做平面時，一定要制作好背景，背景的氛圍很重要。
提到輪播首先可能想到的是廣告，我們經常在移動端首頁或網站首頁會看到各式各樣的輪播banner，不管在移動端還是網頁上通常點擊數據都是非常差的，本篇文章帶你深入了解banner輪播。
如果需要設計一個輪播，我們應該考慮哪些因素？如何讓輪播更具有價值？如何讓輪播的體驗更好？如何避免輪播常見的問題。
本篇文章通過以下幾點探索輪播的特性，預計閱讀20分鐘
1、用戶真的使用輪播嗎
2、輪播的輪換形式
3、輪播的進度展示
4、輪播定位
5、輪播的切換
6、對輪播進行分類
7、使用縮略圖進行預知
8、輪播異形化
9、輪播時間
10、總結
用戶是否對輪播有感知，這個則需要根據不同的場景進行判斷，包括每個產品中的每個輪播對用戶用戶的定位也不相同，常見的應用場景品牌曝光、活動營銷、產品展示，每個場景下相關的數據也不相同。
促銷輪播banner
品牌推廣輪播banner
產品介紹輪播banner
同時還有個關鍵因素，輪播的占比，這里以pc端為例若是產品是以品牌效應吸引用戶的，大多輪播是以大的屏幕占比為主通常會占首屏的50%，如果是以營銷、內容為主的產品，輪播通常以16:9、7:4的常規比例進行展示。
用戶在使用產品時會默認忽略輪播區域，一般輪播都會有自動輪換機制，一定時間后自動輪放下一張banner，那么每當頁面上進行輪播時便會吸引用戶進行關注，效果上會有一定的提升，所以在輪播中第二張第三張的效果往往會比第一張輪播的效果更有效一些。
還有一種用戶比較喜歡關注輪播過去的banner以此來滿足好奇心。
如果banner是作為內容傳播希望用戶通過banner了解內容，那么則要避免放在最后一位置，對于用戶而言最后一張輪播路徑過于長，并且用戶很少會手動滑動banner。
國外一家公司在針對輪播中進行了相關的研究測試，隨著頁數的增加用戶的點擊逐步下降。
那么如果想讓產品中的輪播更具有效果，則需要根據不同的場景設定策略達到目的。
不管在移動端還是手機端，輪播都有各種交互形式和尺寸，以pc為例在交互上會多樣化一些，常見的幾種則是通過滾輪滑動、通過點擊切換兩種。
如下圖某藝術網站，它則是通過鼠標滾輪進行切換輪播banner，并且banner的占比也是鋪滿首屏，這種輪播形式適合一些品牌、產品宣傳等相關的網站以此來突出產品的亮點，同時也符合用戶目標。
在看下面這個醫美網站它的切換方式則是通過鼠標點擊進行切換，并且占比也是鋪滿首屏，在醫美領域用戶更關注美感，而輪播形態也是符合用戶的心理預期更加沉浸美觀。
而在移動端輪播的形式就比較統一，大多都是自動播放+手指滑動進行切換。
在網頁中輪播都會有當前的定位點，許多用戶的習慣是點擊進度條進行切換banner這樣能夠更快的達到目標，不用一張一張切換，但是在有些產品中會忽略這一點，設計中會做的非常小導致用戶在點擊上可用性不太友好，如下圖中的banenr進度點設計上過于小導致點擊上有些阻礙。
如以下網站去除進度定位的方式，通過縮略圖預覽來告知用戶下一個banner的內容，空白區域也可以添加縮略圖引導介紹等關鍵信息，幫助用戶提前預知在體驗上相對較好。
以下國外某網站在進度定位的設計上采用了標簽文案方式進行設計，能夠幫助用戶更加全局的了解banner內容
定位主要是用來指示當前輪播的進度，像上圖中講的便于用戶更加全局的觀看banner的張數和當前進度。
以下網站的設計中則把定位與進度相結合，進度條展示該banner預計多久會切換下一張，對于自動切換的產品輪播這個更直觀的進度展示體驗上相對較好。
以下是某個國外網站，不管是pc還是移動端都在輪播底部添加了水平條，告知用戶當前位置
隨著市場上產品同質化嚴重，產品的競爭力也更依賴體驗，在下圖中的數據可視化的網站上，在進度條上就利用了產品的特性以餅狀圖的形式進行展示。
在剛才上面舉的例子中很多優秀的網站在設計上都很有創新性，但是需要注意一個點，在輪播中不只有自動播放，還需要考慮用戶手動切換，因為在實際用戶瀏覽中可能會對產品的播放時間達不到預期，此時則會使用手動切換，除去可點擊的進度點，還需要上一張和下一張的入口切換。
在此基礎上需要注意，在處于最后一張banner時，下一張切換還能不能點擊，第一張時上一張切換還能不能切換，這個取決于產品特性和輪播張數，如果輪播張數過小的話則需要進行循環播放，如果過多的頁數則第一步和最后一步不可點擊。
上一張和下一張的距離遠近取決于banner的大小，如果輪播banner占比較大時則需要考慮用戶的操作時長，距離越短時間越快，為了避免用戶操作失誤在相對較近的切換按鈕則需要在視覺上做的比較突出，便于用戶尋找。
如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大，保持視覺平衡，因為小區域banner用戶能夠更加全局的觀看，在使用上不會猶豫。
反觀移動端在輪播中除了展示banner進度外很少展示切換按鈕，移動端更加依賴手勢交互。
當輪播banner過多時利用標簽進行分類，用戶通過點擊標簽進行查看相關的輪播組合。
此方式更適合一些電商平臺、新聞網站這種內容過多的產品
如下圖國外社交媒體網站則使用了標簽進行分類，此處提一句輪播不僅限于首屏banner。他的用處可落地在各個場景。
在banner首屏中，顯示的內容越多，越能激發用戶進行點擊，像上面講過的農業產品網站就使用下一張預覽圖的形式進行展示，當然不僅局限于這種形式，如下圖中的餐飲網站把所有的輪播banner展示給用戶觀看。
相對于縮放圖，圖標展示效果上也較好，空間占用更少，使用這種方式需要謹慎，對圖標的識別性要求較高，我印象中能夠使用的這種方法的網站是蘋果官網，讓產品抽象化展示。
在移動端也存在這種設計手法，但是基于分辨率原因移動端的縮略圖展示過少，最常見的如下圖中的馬蜂窩和企鵝電競。
輪播最大的缺陷則是像剛開始講的用戶會默認為廣告，對此可以使用個性化設計突破用戶心理障礙，使輪播banner更具備親和力。
如下圖中的數碼科技網站，利用產品與背景的結合營造出一種功能性的展示。
再例如下圖中蘋果官網入口，結合百度的定制化功能在大搜中進行個性化處理，把常規的banner輪播以功能卡片形式進行展示，同時卡片承載產品動畫引導用戶進行點擊。
蘋果官網進入后隨意點擊產品介紹頁后會發現，蘋果把輪播結合鼠標滾輪營造沉浸式觀看，每個屏效內都展示產品一個功能特點，打破傳統banner的展現形式。
自動播放的輪播會根據用戶的耐心和用戶的訴求進行調整優先級，如我們平常使用產品時會忽略banner廣告，我們會更加關注移動中的東西，特別是在移動端上通常是banner進行輪播時才會關注。
谷歌設計團隊曾對banner輪播的時間進行測試，測試結果得出5s-7s的輪播時間最佳，在這個時間內用戶有足夠的時間對輪播banner上的產品內容進行了解。
如下圖谷歌商店的輪播時間設定在6s。
同時還需要注意，在自動播放的過程中如果用戶鼠標hover上去后，則需要判定播放暫定，避免用戶錯過感興趣的內容。
本文從輪播的樣式、特性、用戶對輪播的認知等多方面的介紹，在實際產品中輪播有很多可用性上的問題存在，我們在設計中則需要根據自己產品的特性、用戶群體特點等多維度去思考適合什么樣的輪播形式。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前兩篇，探討了個人對交互設計價值觀的理解，以及其對從業者和用戶的價值。
這一篇，我們就來探討一下，如何做到之前提到的 4 點價值觀。
先從“周到“開始。
僅為一家之言。歡迎留言交流，說出你的看法。
本著嚴謹的態度，先捋一捋概念。
常言道，金杯銀杯，不如百姓口碑。
同理，周不周到，最終還是用戶說了算。那用戶是怎么評判的呢？通常是憑主觀感受。
拿上篇文章中網易號文章編輯頁面的例子來說，因為“保存”和“存草稿”功能做的不夠好，所以給筆者留下了不夠周到的印象。
翻譯過來，就是，一些體驗細節，影響了用戶的印象。
《設計師要懂心理學》這本書中有條原則，叫“整體認知主要依靠周邊視覺而非中央視覺”。
講的是視覺和 UI 層面的用戶認知。就是說，用戶會關注并不顯眼的邊邊角角的設計，而且這些邊邊角角的設計會影響用戶對整體設計的認知和印象。
舉個例子。假如說，微博信息流頁面的掃一掃圖標，在風格、大小等方面和其它圖標不統一，就會給用戶留下比較糟糕的印象，用戶很可能會覺得微博的設計不夠專業。
這些是 UI 設計層面的。在交互設計層面，也是類似的道理：體驗細節會影響用戶的認知。
總的來說，至少在常用的交互細節上，不要給用戶留下負面印象，也不要讓用戶產生負面情緒，避免所有的不周到，才算是周到。
個人覺得，最關鍵的地方，是滿足好小需求。
啥是小需求？
個人觀點，籠統的講， 小需求是一種共性需求， 主要是一些體驗細節。比如信息的分類與展示、銜接不同頁面的各種彈窗與提示、對各種狀態的提示、對各種情況的到位解釋，等等。
有小需求，就有大需求。
所謂大需求，更多是一種個性需求， 不同的產品，會有不同的大需求。比如短視頻產品，它的大需求會包含視頻的拍攝、上傳、播放等；資訊類產品，它的大需求則包含文章的撰寫、編輯、發布、查看等。
工作經歷，筆者見過一些交互設計不夠周到的產品。它們的共同特點就是： 大需求基本上得到了很好的滿足，小需求沒有得到很好的滿足。
這一大段，就圍繞如何更好的滿足小需求來展開。主要建議如下。
筆者有個客戶，是從事教育行業的，之前并沒有接觸過互聯網行業的產品與設計工作。
這位客戶找到筆者的時候，是想要設計一款小程序的界面。當時客戶非常自豪的對筆者說，這個（原型）是我用墨刀畫的，現學現做。
說起墨刀，本人也用過。和 Axure 相比，確實好用太多，在簡潔性和智能性方面，感覺和 Sketch 有異曲同工之處。
關于墨刀如何好用，網上已經有太多溢美之詞。筆者就結合自己的使用經歷，簡單總結一下：
1 好用，上手快。零基礎，只要會操作常用辦公軟件，簡單學一下就能上手
4 能查看頁面之間的跳轉邏輯。借助工作流功能，可實現這一點
以上主要是墨刀自身的優點。結合本段主題，我們再探討一下，對于日常工作，墨刀這把利器有哪些優勢。
1.1 可以把更多精力花在創作上
當我們不會用一款工具時，通常會有一些挫敗感。如果必須要用，接著很可能就會有一點焦灼了。
而墨刀，基本上不會讓我們體會到這些感覺。
我們也不用花無謂的時間去學習一些艱難的高深的技法，而是可以把更多的時間花在“創作”這件事上。
1.2 可以更好的去滿足小需求
部分公司，可能面臨如下情況。
公司沒有專門的交互設計師，產品的原型由產品經理來畫。產品經理本身還兼任項目經理。
如果項目又特別趕，客觀上，產品經理確實沒有太多時間去關注交互的體驗細節。
主觀上，如果產品經理對這些交互細節的興趣或重視程度不足、同時產品經理上面的決策層也不去抓這些體驗細節，最終的結果，就是產品的原型上可能會丟失很多體驗細節。
筆者就有類似的經歷。
一款 App，產品經理用 Axure 畫的原型。評審或宣講需求的時候，大家都是在電腦或會議室大屏幕上來看這個原型，同時所有人最先關注的是大需求。
理解完大需求，會有部分同學就大需求提出自己的看法或建議。最后，才會有部分同學就小需求指出不足并提出建議。
受限于職責、時間等各種因素，大家也不可能針對小需求提出太多建議。結果就是，仍然會有相當數量的小需求被遺漏，或者沒有被很好的滿足。
墨刀有兩個功能，可以較好的規避這些問題。一個是工作流功能，一個是手機端預覽功能。
工作流功能，類似流程圖，即把所有頁面以合乎邏輯的方式鏈接起來。客觀上，會促使我們畫出所有包含小需求的頁面，包括彈窗、狀態提示等。
支持多人的手機端預覽功能，使得我們在手機上，可以通過點擊等方式來模擬體驗這款 App。這樣的環境下，我們會更容易理解大需求，也更容易發現小需求存在的問題。
所以，個人的建議，就是用墨刀來畫原型，同時把工作流和多人手機端預覽（針對 App、小程序）這兩項，作為硬性標準。
一款產品，在體驗或使用時，非常容易發現問題。
因為這時候，我們可以松弛下來，把自己切換成普通用戶。忘掉所有費腦子的需求和設計原理，只依賴經驗和直覺來用這款產品。我們的主觀感受，會告訴我們，這款產品的交互，到底周不周到。
據陸樹燊的《微信團隊的實驗室文化》一文顯示，張小龍評審微信的功能，不看原型圖，不看設計稿，也不看 Demo，而是體驗前后臺代碼開發好后的產品。這就意味著，如果一個功能在給到用戶前有 N 個方案，就會有 N 個方案對應的前后臺代碼。
一定程度上，微信團隊就是通過這種在正式發布前反復試錯、不斷打磨的方式，最終給用戶提供了優秀的交互體驗。
估計，絕大部分團隊和公司，都做不到微信這樣，開發 N 個版本，并去一一體驗和比較這 N 個版本。
無法體驗已經開發好的 N 個版本。但是，在真實的設備上體驗 N 個原型，我們還是可以做到的。
原型雖然沒有開發好的產品那么順暢和流暢，但是，如果用墨刀在手機端體驗一款加了鏈接和動效的 App 原型，一樣可以發現很多問題。
不過，根據經歷和觀察，筆者發現，我們人類，是不喜歡體驗原型的。
想一想，平常工作中，我們可能會樂此不疲的去體驗開發好的測試版產品。但對于原型，大部分時候，都是匆匆忙忙就過掉了。
個人有個猜測，就好像人類喜歡逗貓遛狗、卻不太喜歡逗桌子上的模型貓和模型狗一樣，我們人類是不太愿意花費太多時間和精力去和原型這種“假產品”互動的。
所以，某種程度上，體驗原型，是一種反人性的行為。
但卻是一種非常經濟和高效的方法。
因為首先，大部分時候，我們都是先選中一個原型方案，然后去設計、去開發；其次，等到開發好進入測試環節，這時候，原型往往就成了測試的標準，依靠測試來優化原型是不現實的。
所以，結合現狀，綜合來看，小需求能不能得到很好的滿足，很大程度上還是要依靠原型。
也就是說，很有必要對原型進行優化。具體方法，就是在真實的設備上體驗原型、反復體驗、多人體驗，并進行相應優化。
如前所述，用利器來創作原型，反復在原型里體驗產品，這些強調的是內部力量，即自身的努力。
下面，再談一談外部力量，即外界海量的知識與經驗。
說起外界知識，除了直接參考其他產品的設計以外，大家參考最多的，可能就是《iOS Human Interface Guidelines》和《Material Design》這些設計規范了。
根據筆者的實際經驗，這兩個來自蘋果和谷歌的設計規范，很多時候，我們都是拿它們當字典用。即哪一點不會或不太確定的時候，去翻一翻查一查。
雖然這倆規范很優秀，但是卻很難被我們“物盡其用”，因為它們的知識體系過于龐大，有點像一本字典。拿著“字典”里的每一條原則去檢驗我們的交互設計，這是很難做到的。
但是有一個設計規范，去非常適合拿來檢驗我們的交互設計，那就是尼爾森十大可用性原則。
太詳細的就不贅述了，這里我們再簡單回顧下這十條原則。
1) 狀態可見
用戶時刻清楚，正在發生什么
2) 環境貼切
營造一個用戶熟悉的環境，比如語言、詞語、圖標等
3) 用戶可控
控制權交給用戶，并且多數時候，考慮支持撤銷重做
4) 一致性
方方面面的統一，比如文案、視覺、操作等
5) 防錯
盡最大可能，幫助用戶，避免用戶犯錯
6) 易?。鹤R別比記憶好
通過把組件、按鈕等元素可見化，降低用戶記憶負擔
7) 靈活高效
優先考慮人數最多的中級用戶，同時兼顧高級和初級用戶
8) 易掃：優美且簡約
閱讀體驗要好，掃視體驗也要好；保持簡約和美觀
9) 容錯
幫助用戶識別、診斷，并從錯誤中恢復
10) 人性化幫助
日常的使用最好脫離幫助文檔，但有必要提供幫助文檔
個人非常建議，在日常工作中，把尼爾森十大可用性原則作為一把標尺，來時時刻刻檢驗我們的交互設計。
交互設計，在涉及體驗細節的小需求上，避免所有的不周到，方才是周到。
用利器創作原型，要包含流程圖；多體驗原型或產品，以體驗結果為準、而非討論結果為準；參考優秀的設計規范，用尼爾森十大可用性原則來檢驗原型。
以上三點，可以幫助我們做到交互設計的周到。
其中，個人認為，最為核心的是第二點：多體驗原型或產品，直到自己覺得周到為止。
因為，正如電影《霸王別姬》的一句臺詞所說：人，得自個兒成全自個兒。
最近有同學問老王，UI設計師是不是需要交互設計能力？
當然需要，不懂交互的UI不是好UI~
首先UI設計不僅僅需要把功能需求可視化，還需要注重用戶體驗。所謂用戶體驗，其實就是用戶與頁面的交互。而在交互設計中有很多的方法和理論，如格式塔心理學、尼爾森可用性原則、7+2法制、3次點擊法制、功能可見性原則、菲茨定律等。他們大多的方法也是共同的。
所以呢，今天老王來說說交互設計用的最多的原則——尼爾森十大可用性原則。
很多情況用戶是不知道當前狀態的，所以在適當的時間內做出反饋很重要。不僅能讓用戶知道情況，還能防止用戶發生錯誤操作。常見反饋有刷新提示、新頁面加載提示、支付提示、下載提示。除了結果反饋提示外，對于進程中的頁面會用進度條進行表現。
今日頭條APP首頁中，看過的文章標題變為了灰色、而沒讀過的文章標題依舊保留了黑色字體。
簡單來說就是讓軟件看起來跟符合真實世界，還原現實認知。通過直觀的視覺快速傳達給用戶。
音樂軟件通過模擬現實唱片并結合旋轉的播放動畫，從而降低了學習成本，更輕松的理解界面。
說白了就是給用戶發后悔藥，當用戶誤操作時要給用戶提供提供撤銷、取消、重做等相關功能。買錯商品可以無條件包郵退回。
拼多多凸顯了“退貨免運費”“7無理由退回”服務，解決了用戶買到不滿意產品的售后擔心。減少了承擔運費的成本，從而促使了用戶快速下單。
一個好的產品從視覺上首先是統一的，色彩、字體、元素保持統一，能加強用戶的記憶力。在交互中同樣如此，頁面結構、操作反饋都需要保持一致性。
QQ首頁列表中不管你點擊那一條目，下一級界面都是由右往左滑出。點擊左上角返回按鈕，會從左往右滑回，體驗完全一致；幾乎所有產品進入下一層級頁面的交互方式都是如此。
為了減少用戶錯誤的可行性，進階是給出錯誤反饋是不夠的，用心一點的設計師其實會發現很多的產品是這樣做的。為了防止錯誤的發生，會進行防錯設計。
比如在發朋圈時，點擊返回按鈕出現的提示彈窗。彈出框方式會增加不可逆操作的難度，減少操作刪除帶來的順勢。更人性化的是，提示給出了保留和不保留按鈕選擇，選擇保留退出還可以再次編輯。
通過把組件、按鈕及選項可見化，減少用戶的記憶負荷，讓使用更輕松。在使用過程中不需要記住上一頁面的信息就能完成當前頁的操作。
通常更新完APP之后，會出現新功能引導。引導提示能告訴用戶新功能所在的位置和作用。這也是協助記憶原則的體現。
好的產品不僅僅需要滿足新用戶，還需要滿足深度用戶。保證第一次使用者，能清晰明白功能。對于老用戶需要提供更高效使用方式。
對用戶重復使用的功能，提供便捷按鈕。比如叮咚買菜的再次購買。
適當的留白能讓頁面功能突出，也能讓視覺更加舒服。精致的圖形元素能給用戶留下好的印象。
很多K12的產品會運用IP形象進行延展，不僅強化了品牌記憶力，更增強了互動感。
好了，以上就老王對尼爾森十大原則的解析。其實原理很簡單，甚至很多都是很直觀的廢話，但如果不把它們一條條列出來，還是有很多人連這些廢話都做不到。
關注細節，才能成就大事！
一、什么是交互設計？
先來看一下百度百科的定義
交互設計（英文Interaction Design, 縮寫IXD)，是定義、設計人造系統的行為的設計領域，它定義了兩個或多個互動的個體之間交流的內容和結構，使之互相配合，共同達成某種目的。交互設計努力去創造和建立的是人與產品及服務之間有意義的關系，以“在充滿社會復雜性的物質世界中嵌入信息技術”為中心。交互系統設計的目標可以從“可用性”和”用戶體驗“兩個層面上進行分析，關注以人為本的用戶需求。簡而言之，交互設計是解決特定場景下的人群如何高效使用機器或軟件的目標行為。
為什么要做交互設計
在使用網站，軟件，消費產品或各種服務的時候（實際上是在同它們交互），使用過程中的感覺就是一種交互體驗。隨著網絡和新技術的發展，各種新產品和交互方式越來越多，人們也越來越重視對交互的體驗。當大型計算機剛剛研制出來的時候，可能為當初的使用者本身就是該行業的專家，沒有人去關注使用者的感覺；相反，一切都圍繞機器的需要來組織，程序員通過打孔卡片來輸入機器語言，輸出結果也是機器語言，那個時候同計算機交互的重心是機器本身。當計算機系統的用戶越來越由普通大眾組成的時候，對交互體驗的關注也越來越迫切了。因此交互設計作為一門關注交互體驗的新學科在二十世紀八十年代產生了。
從用戶角度來說，交互設計是一種如何讓產品易用，有效而讓人愉悅的技術，它致力于了解目標用戶和他們的期望，了解用戶在同產品交互時彼此的行為，了解“人”本身的心理和行為特點，同時，還包括了解各種有效的交互方式，并對它們進行增強和擴充。
通過對產品的界面和行為進行交互設計，讓產品和它的使用者之間建立一種有機關系，從而可以有效達到使用者的目標，這就是交互設計的目的。
二、交互設計常用原則和定律有哪些？
尼爾森十大可用性原則
1、狀態可見原則
系統應該讓用戶時刻清楚當前發生了什么事情，也就是快速的讓用戶了解自己處于何種狀態、對過去發生、當前目標、以及對未來去向有所了解，一般的方法是在合適的時間給用戶適當的反饋，防止用戶使用出現錯誤。
即在用戶操作界面功能時給予實時反饋，例如：頁面加載狀態提示、按鈕點擊后的狀態變化、進度條提示等。
2、環境貼切原則
設計的一切表現和表述，盡可能貼近用戶所在的環境，將現實環境的操作功能巧妙的轉化為線上功能，使其貼近用戶。使用用戶能聽懂的專業術語，涉及到專業化語言時要轉化成用戶熟悉的語言。
即模擬真實的事物，使用戶更容易理解。例如：天氣應用中的天氣插圖、音樂播放器的膠片都是生活中熟悉的場景和物品，降低理解成本。
3、操作可控原則
對于用戶的誤操作，提供二次確認或者撤銷的功能，這樣可提高用戶的操作可控性。
例如：刪除聯系人二次確認提示、消息可撤回操作。
4、一致性原則
遵循統一的產品設計規范／邏輯。這里的一致性包含產品和跨平臺產品之間的一致性。
一致性包含視覺交互、文案描述、組建樣式等，例如：微信小程序設計規范。
5、防錯原則
設置防錯的機制，減少用戶犯錯。在用戶選擇動作發生之前，就要防止用戶容易混淆或者錯誤的選擇。
例如：用戶名稱校驗提示、手機號碼位數限制等。
6、易取原則
減少用戶記憶負荷，在適合的時機給用戶需要獲取的信息。
例如：驗證碼讀取、找人轉賬提示等。
7、靈活高效原則
提供靈活的操作和高效的獲取信息能力。
例如：手機號碼一鍵登錄、消息關鍵字識別等。
8、優美簡約原則
保留產品最主要的信息，如果不是優先級最高，要盡一切可能避免去影響產品的簡潔和美觀。
9、容錯原則
用戶在使用產品過程中出現了問題，及時準確的告知用戶出現問題的原因。
例如：信息輸入提示、搜索無結果等。
10、提供人性化幫助
在用戶需要的時候提供必要的幫助說明。
例如：新功能引導、解釋說明文案等。
七個交互設計定律
1、菲茲定律
點擊一個目標的時間同以下兩個因素有關：
（1）設備當前位置和目標位置的距離（D）。距離越長，所用時間越長；
（2）目標的大小（S）。目標越大，所用時間越短。
該定律經常運用于鼠標從點A到點B的運動。
例如常用按鈕的尺寸設計等。
2、?？硕?
一個人面臨的選擇（n）越多，所需要作出決定的時間（T）就越長。
交互設計中要合理設置選項，以免用戶使用中決策時間過長，降低使用效率。
3、米勒7±2定律
喬治米勒對短時記憶能力進行了定量研究，他發現人類頭腦最好的狀態能記憶含有7（±2）項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。
例如：手機號碼的分位顯示、應用中標簽欄數量等
4、鄰近性法則
人們通常將距離近的事物劃分為一組。
界面設計中可以用對象間的相對距離來區分信息層級。
5、復雜性守恒定律
每個應用程序都具有其內在的、無法簡化的復雜度。無論在產品開發環節還是在用戶與產品的交互環節，這一固有的復雜度都無法依照我們的意愿去除，只能設法調整、平衡。
例如：在智能手機出現之前，手機上的操作按鈕都是實體按鈕。在智能手機出現手，手機被整個屏幕占據后，所有的操作都集合在了手機系統之中，等于把物理操作轉移到了系統操作中，其本身的功能復雜程度并沒有發生改變，只是轉移了而已。
6、防錯原則
大部分的意外都是由設計的疏忽，而不是人為操作疏忽。因此，在設計中要有必要的防錯機制；在此，特別要注意在用戶操作具有毀滅性效果的功能時要有提示，防止用戶犯不可挽回的錯誤。
例如：登錄時用戶名校驗，手機號碼位數限制等。
7、奧卡姆剃刀原則
“切勿浪費較多東西去做，用較少的東西，同樣可以做好的事情。
”這個原理稱為“如無必要，勿增實體”，即“簡單有效原理”。
在設計中可以使用戶關注最主要的信息而非其它無關緊要的事物，從而提升使用效率。
三、交互設計如何開展工作
首先在交互設計師拿到需求后不要急著打開軟件開始繪制線框圖，而是要先分析需求，了解產品的戰略層和范圍層的業務目標。把握產品設計大方向，只有方向對了后面的工作才是有價值的。
把握了產品方向，下面就該進行需求的分析，
首先針對需求考慮5個問題：
1、為什么要做這個功能？（業務需求）
2、產品期望得到怎樣的成果？（業務目標）
3、誰來使用？（目標用戶）
4、他們要怎樣使用？（用戶需求）
5、如何讓他們都來使用？（將業務目標轉化為用戶行為）
清楚這5個問題后，再根據交互設計流程進行一步一步的進行
這實際上就是對需求的戰略層分析。
我們進一步分析業務需求（業務目的、業務目標）和用戶需求（目標用戶、用戶體驗目標），把握關鍵因素（用戶的動機、擔憂和影響目標達成的障礙）。
歸納這些需求，明確設計策略。
將“業務目標”轉化為“用戶行為”，通過引導用戶的使用來幫助產品實現目標。
從設計“用戶行為”到設計“用戶界面”，用戶行為決定了用戶界面，用戶界面也導致了用戶會出現什么樣的行為。
設計需求分析方法就是要幫助用戶創造動機、排除擔憂、解決障礙。
四、如何進行用戶研究，方法有哪些
評估的形式及方法
常見的評估形式分為三類：
1、評估主體：根據評估的主體不同來進行區分，即誰來做評估。
按照評估主體來區分主要有兩個主體：用戶和專家
用戶評估主要靠收集用戶使用數據，也就是用戶測試，它的數據相對客觀，但時間和費用較多，評估范圍較窄。
專家評估是讓工程師及設計師等專家基于自身的專業知識和經驗進行評估的一種方式。專家評估相對主觀，但費時少、費用少、評估范圍窄。
兩種評估方法可以相互補充，并結合使用。
2、評估性質：例如定性評估、定量評估或著其它方式。
按照評估的性質來區分可以分為定量評估和定性評估。
定量評估是指對可以計量的部分進行評價，如點擊量、使用率等，可以用數據來說明。
定性評估是指對非計量性的部分進行評價，如流暢度、舒適性、創造性等進行評價。它只能表示一個度，無法準確用數據來說明問題。
3、評估過程：按照評估的過程來進行區分。
從評估的過程來區分可以分為理性評估和感性評估。
理性評估相對客觀，從客觀的角度出發判斷客觀事物。
感性評估更為主觀，評估結果并沒有客觀規律。
在實際應用中也需要將理性評估和感性評估結合使用，才能完整的完成我們的任務，達到我們的目標。
常見的評估方法有四種：
1、原型評估方法：在產品研發過程中，對于界面設計以及程序的測試來獲得用戶的反饋是至關重要的。以用戶為中心和交互式設計的重要因素之一就是原型方法，原型方法的目的是將界面設計與用戶的需求進行匹配。
一般來說原型評估方法分為三大類型：
（1）快速原型：原型迅速成型并分配實施，在原型實驗收集的信息基礎上，系統從草案中得以完善。
（2）增量原型：應用與大型系統，從系統的基本骨架開始，需要階段性的安裝，及系統的本質特征是在初次安裝完成后允許階段性測試，以減少遺漏的重要特征。
（3）演化原型：對前期的設計原型不斷進行補充和優化，直到成為最后的系統。
2、簡易測試評估方法
在條件不允許的情況下，可以采取簡易的方法來對用戶體驗進行評價。步驟是：
（1）實驗室環境準備：準備好測試用的電腦或其他媒介。兩個房間，房間1用來對被測試者進行測試，房間2用于設計師和工程師的觀察。
（2）被試選擇：分為用戶組和專家組。
（3）進行測試：房間1中被試者根據自己的選擇進行操作和測試，同時說出自己的內心想法，觀察員在調查表上記錄被試者的每一次的操作情況，包括出錯情況和被試者的口語描述，當被試者在測試過程中遇到困難或操作無法進行時，觀察員要給予一定的客觀提示。房間2中通過相關設備將房間1的情況傳輸到房間2，設計師和工程師實時觀察和記錄被試者的情況，以便今后對產品做進一步的修改和完善。
（4）結果分析：通過多次測試后，將測試結果匯總，提取出交互設計中存在的問題，以及對交互設計有益的建議形成測試報告。
3、眼動評估方法
眼動追蹤可以用來評價對產品（包括硬件產品和軟件產品）設計的感性意象，評測產品設計特征。眼動評估的主要指標有注視熱點圖、搜索過程測量指標、興趣區域即用戶視覺注意的焦點區。可以結合口語分析法了解用戶的所想 和所做。
4、腦電評估方法
通過對腦電信號的分析，研究者可以探索大腦的認知加工過程和受試者的心理狀況。近年來腦電評估方法在人機交互心理學等領域應用廣泛，被用來評估交互設計、人機界面、產品設計等方面的內容。但是腦電評估也有一定的缺陷，例如空間分辨率上的局限性，因而對某些認知過程和腦區的定位并不是很準確。第二，在許多相似的實驗研究中，由于研究者采用了不同的實驗材料和方法等，實驗結果也存在差異性。第三 ，由于采集記錄時間的滯后性，腦電所記錄的并不一定是當下被試者所想到的內容。
采取哪種方法來開展用戶測試和評估，要根據不同的任務結合不同的環境來開展，比如：時間、成本、資源等。
啟發式評估法
是專家評估法的一種，也被稱為經驗性評估，最初由Nielsen博士提出。簡單來說，啟發式評估是一種簡易的可用性評估方法，使用一套相對簡單、通用、有啟發性的可用性原則，讓幾個評審根據專業知識和經驗來進行評估，發現產品潛在的可用性問題。
啟發式評估的兩大要素：評估者和評估參照的原則。
對評估者的要求主要有四個方面：
（1）人數：推薦3-5人，有時會更少
（2）知識：最好同時具有可用性知識及設計知識
（3）身份：最好是非設計者本人，否者不具有客觀性
（4）崗位：設計師或用戶研究員
評估參照的原則有：尼爾森十大可用性原則、八項黃金法則、首頁可用性指南、ios設計指南、拓展原則、HHS網頁設計與可用性指南等。具體需要根據實際項目來選擇，常用的是尼爾森十大交互原則。
什么時候適合使用啟發式評估法？
交互設計和UI設計階段、測試優化和產品發布后的階段。
啟發式評估的優缺點有哪些？
優點：成本低、效率高、發現大多數可用性問題，甚至是用戶測試時不會出現的問題。
缺點：不能代表真實用戶，相對主觀、有時候發現問題過多、對評估人員知識背景要求較高。
什么時候適用？
（1）適合時間、資源有限的情況下快速發現可用性問題，降低風險及成本。
（2）版本變動不大的情況下，小成本檢驗。
（3）作為可用性測試的之前準備。
啟發式評估流程是什么？
（1）準備階段：確定范圍、背景調查、參考評估原則、評委邀約、材料準備
（2）執行階段：任務走查、整體走查、結果記錄
（3）分析階段：匯總討論、報告總結、優化方案
可用性測試
先來看一下我們在平時工作中常常會聽到這樣的問題
產品經理：我們的用戶覺得產品好不好用？使用過程中會不會遇到問題？他們是否滿意？
設計師：設計的過程有一些糾結的地方，不知道實際用戶是怎么理解和操作的怎么辦？
產品開發后：想在大推前檢驗一下產品是否靠譜，適不適合大推？
當我們遇到這樣的一些問題時，如何找到方法快速得到答案呢？
那就是接下來要介紹的可用性測試方法。
可用性測試是一種常用的、高效的方法。
它的定義是：通過觀察具有代表性的用戶，完成產品的典型任務，從而找出產品可用性問題并解決，目的是為了改善產品，讓產品更容易使用。
什么時候適合做可用性測試呢？
一般是在：交互設計或UI設計、測試優化、正式發布三個階段來做。當然是越早做越好，可以盡早發現問題并及時調整。
類型分為兩種：形成式和總結式
形成式特點：小樣本、發現問題為主、不能做定量對比。
總結式特點：大樣本（30人以上）、定量的評估、可以做對比評估
可用性測試可以解決什么樣的問題？
1、發現問題，產品在體驗上是否存在問題
2、檢驗實現，期望的設計目的有沒有達成，是否滿足了用戶的期望
3、產品評估，用戶是否會滿意
4、理解用戶，了解用戶行為習慣，了解用戶認知，找到某些問題的原因
測試流程是什么？
整體上分為4個階段：1、準備 2、測試 3、分析 4、優化
1、準備階段要做的有哪些？
確定目標：確定測試目標決定了后面測試過程要怎樣去設計
常見的測試目標有：
·對整個產品做可用性評估
·對新增的功能模塊進行評估
·提前觀察新方案對新老用戶有怎樣的影響
·提前檢測改版是否達到預計目標
·設計時存在爭議，如何選擇解決方案
·某個環節流失率較高，檢測是否為設計原因導致
·需要拓展某一類特殊用戶，測試針對這類用戶在設計上是否需要作出調整
準備測試方案
方案中應當包含以下內容：
·測試目的：明確測試的目的及范圍，測試目的決定了測試方案
·測試關注點：與負責的設計師一起梳理測試中要關注的問題
·用戶招募：招募要求，樣本配比，招募渠道
·經費預算：獎勵的形式和額度
·時間計劃：用于把控時間計劃
撰寫測試腳本：設計測試任務，通過用戶行為去觀察提問來獲得我們想要的內容
基本的流程有：
·暖場：3min，簡單聊天，消除用戶的緊張情緒
·測試說明：2min，對測試內容規則做說明
·測試前訪談：10min，了解用戶基本信息
·簡單試用：3min，讓用戶熟悉產品
·測試執行：30-45min，提示任務并觀察
·事后訪談：15min，針對疑點問點追問，填寫評價表
·道別：5min，支付禮金，送用戶離開
招募用戶
招募什么樣的用戶呢？
·根據測試目的來定，找出與測試目標有關的篩選緯度
·特別考慮用戶使用行為相關的特征，例如競品使用經驗，使用產品的目的，用戶的活躍度等
·挑選最核心的緯度，轉化成用戶招募的條件，并盡量客觀化，具體化，可衡量
·避免設置交叉條件過多，導致樣本代表性降低
·學會辨別真假的用戶信息
招募多少用戶合適？
·以發現問題為目的快速可用性測試，6-8名即可
·考慮產品的復雜性，覆蓋人群差異性，適當做調整，拓展到10-15名
招募渠道有哪些？
·公司內部
·現有產品用戶庫
·公司其他產品用戶庫
·熟人，朋友等
·推廣渠道：官微、公眾號、門戶網等
·社區，論壇，qq群等
·第三方調研公司
準備測試素材：低保真或高保真原型，或線上已經可以使用的產品，也可以準備一些量表工具來輔助測試。在測試
過程中需要用到的電腦或手機設備，攝像頭，紙，筆，桌椅等。
測試場地選擇：
·專業可用性測試實驗室：一般對測試質量要求較高，旁聽人數較多且需要采集豐富的數據的時候采用此方法。實驗室有兩個房間，一個測試間，一個觀察間，中間有單向玻璃分隔。測試間中有多角度的攝像頭，用來記錄測試過程，觀察間可以同步看到測試間里的情況，
·普通測試環境：在觀察人數較少（小于3人），條件有限時使用。
預測試階段：正式測試前進行預測試，保證測試流程通暢
·走查：記錄可能出現的問題
·預測試：找人先測試一下
·調整：調整測試流程
正式測試階段
測試參與人員有
·主持人：引導整個測試流程
·記錄員：記錄操作行為，訪談內容，發現問題等
·產品團隊：參與旁聽，觀察，結束后交流
·用戶：完成測試及訪談任務
測試過程中需要觀察的要點：
·用戶是否獨立完成了任務
·是否存在無效操作或不知所措的情況
·用戶是否滿意
結果分析
邊測試邊總結，越及時越好
·測試完一個用戶，做一次小結
·測試結束當天寫小結，與設計師當場討論
·重要問題反饋后再總結分析報告
·邊測邊改，邊改邊測
結果分析4個步驟：1、對發現分類 2、整理不確定項 3、評定優先級 4、結果記錄
撰寫報告
從4個方面來寫：
·總體如何
·有哪些問題
·嚴重程度如何
·建議是什么
·除此之外，還可以圍繞關注的問題，未滿足需求補充分析
優化跟蹤
在測試之后需要出優化的方案，測試優化的過程是循環的。
測試之后如果還有其他問題沒有得到解決，可以結合其他的一些測試方法來得到。
問卷調研
問卷調查法是以書面提出問題的方式搜集數據的一種研究方法，研究者將所要研究的問題編制成問題表格，讓受訪對象以郵寄、當面作答、在線作答或追蹤訪問的方式填寫，從而了解被試者對某一現象或問題的看法和意見。問卷調研可以用于需求挖掘階段，也可以用于產品上線后的評估階段。
如果是想了解用戶對產品上線后的滿意度，可以使用問卷調研的方法。它比較適合去了解用戶的認知態度，也可以附帶了解用戶的行為習慣，
問卷調研的優缺點
優點：統一性、靈活性、量化性、匿名性
缺點：（1）只能獲得書面的信息，而不能了解到生動、具體的情況。（2）缺乏彈性，很難做深入的定性調研。（3）調查者難以了解被調查者是否認真作答，是不是自己填寫的。（4）填寫問卷比較容易，有些別調查者會隨意選擇，或者按照社會主流觀點選擇，這樣會使調查失去真實性。（5）回復效率低，對無回答者的研究比較困難。
問卷調查的使用場景
適用于：（1）需要進行定量分析的調研。（2）需要匿名進行調研的問題。（3）對已有假設進行檢驗。（4）尋找問題隱藏的關聯。（5）對產品設計用戶認知及態度的評估。
不適用于：（1）發現和描述具體問題。（2）探索受訪對象的模糊態度。（3）獲取創新想法。（4）獲取精確的行為數據。
問卷調研流程
1、確定目標：確定調研目的、對象、分析目的和應用對象。
2、調研方案：通過訪談、經驗、理論等，確定調研框架，題目選項，分析思路，投放渠道，相本配比等。
3、問卷設計：問卷設計，問題美化，投放渠道。
4、問卷測試：多人測試，確保問卷的可讀性，邏輯通暢
5、問卷投放：按照計劃好的投放渠道進行投放，回收數據，數據清洗
6、問卷分析及填寫報告：分析及報告填寫，調研結果落地
數據分析
概述：通過在網站或應用中進行數據埋點，獲取用戶對產品的使用和行為數據，并進行基于產品體驗優化的數據進行分析。
數據分析可以做什么？
1、可以做到用戶從哪里來，來了多少
2、獲取用戶屬性，用戶地域，用戶設備
3、訪問了哪些頁面，使用了哪些功能，消費了多少錢，消耗了多少時間
4、哪些流量可能存在問題，忠誠度如何，活躍度如何，有沒有達到目標，和行業相比如何
5、流失情況如何，離開之后是否還回來
可以作為產品的眼鏡和大腦，提供客觀衡量的依據，可以持續優化改進。
數據獲取方式的對比
日志文件：優勢，完整的服務端請求記錄。
缺點，日志的獲取和清洗有過濾成本，許多頁面操作無法記錄。
JS頁面標記：優勢，數據獲取可控、靈活，可以對頁面操作記錄進行記錄，獲取數據比較完整豐富。
缺點，需要在頁面植入JS標記代碼，某些情況下無法獲取，如當用戶禁用JS功能時。
常用的數據監控平臺
1、第三方監控平臺：如Google Analytics、百度統計、騰訊云分析等
2、自研平臺
數據分析流程
1、監控 2、定義 3、埋點 4、測量 5、分析 6、優化
Web分析常用的指標
PV：是指頁面瀏覽量，網頁瀏覽數實施評價網站流量最常用的指標之一，用戶每一次訪問網站中的頁面均被記錄，對統一頁面多次訪問，訪問量累計
UV：是指獨立訪客，是通過互聯網訪問、瀏覽這個頁面的自然人
UPV：是指唯一身份綜合瀏覽量
訪問：是指在一定時間范圍內，網站所有訪問者對網站發起訪問的總次數，從訪客來到網站到最終關閉網站所有頁面，記為一次訪問
識別用戶的方式：IP、IP+User Agent、cookie、User ID、設備ID、其他
復合指標
跳出率：指用戶來到網站，只瀏覽了一個頁面就離開的訪問次數，占全部訪問次數的百分比，簡稱“來了就走”。跳出率可以被用來衡量流量和頁面質量，高跳出率表示訪問者對著陸頁面不感興趣，沒有繼續訪問更深入的頁面。也可能頁面設計存在問題，也可能是導入的用戶不匹配。跳出率可以通過調整廣告渠道，優化頁面內容來降低。
退出率：訪問者離開網站一次被記錄為一次退出，某一范圍內退出的數量/該范圍的綜合訪問量就是退出率。如果關鍵流程中的某一頁面退出率高，代表某一頁面可能出現了問題。
訪問時長：網站停留時長，頁面停留時長，應用使用時長。訪問量是訪問質量的一個衡量指標，較長的訪問時間說明用戶與產品進行了較多的互動。
訪問深度：可以理解為單個用戶平均訪問的頁面數，是PV/UV的比值。訪問深度也是訪問質量的一個衡量指標，可以考察用戶是否和網站進行了較多互動。這個比值越大，代表網站的粘性越高。
轉化率：指在一個統計周期內，完成轉化目標行為的次數占總訪問次數的比率。根據設置不同目的進行計算，例如注冊轉化率、付款轉化率等，是一個重要的分析指標。
移動端基礎指標
移動端的基礎指標監測與web端略有不同，但分析思路大致相同。指標分為：新增設備、累計設備、啟動次數、單詞使用時長。
常見分析內容
流量分析（哪里來？）、用戶分析（什么樣的用戶？）、行為分析（如何使用的？）、路徑轉化（表現如何？）、流失分析（粘性如何？）
A/B test
A/B測試是一種幫助網頁優化實驗的方法。A/B測試的目的在于通過科學的實驗設計和采集數據的方式，來獲得具有代表性的實驗結論，從而尋找到更好的產品策略。
簡單來說，就是為同一目標制定兩個方案，讓一部分用戶使用A方案，另一部分使用B方案，記錄用戶的使用情況，對比兩個方案的結果，選擇更符合的方案。
A/B test一般會在產品改版正式上線之前使用，來驗證新的設計是否可以提高產品的表現。
A/B test可以測試的元素有：標題、圖片、顏色、社交元素、段落文本、按鈕、導航、任務流程、頁面布局、價格、視頻等?？梢淮沃桓淖円粋€元素或一次改變多個元素的方式來測試，這就是兩個測試類型單變量測試和多變量測試。
A/B test工具
Google Website Optimizer：搜索巨頭提供的免費A/B test工具，一個很好的入門級工具，但是沒有一些先進的功能。
Visual Website Optimizer：一個易于使用的A/Btest測試工具，包含功能有所見即所得的編輯器，單機地圖，訪問者分割和標簽等。
Unbounce and Performable：集成著陸設計的A/B測試工具。
Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target：企業級測試工具
App Adhoc Optimizer：國內A/B Test工具，同時支持前端（Web/H5、IOS、Android）及后端（Node.JS、PHP、Java）AB測試服務的專業Saas平臺
Optimizely：是網上現有的最專業的AB測試工具之一，它的價格要比其他的工具高很多（也可以免費使用一個月），它提供了一些非常好的功能。
Unbounce：對于登錄頁面的測試來講非常不錯，而且它不僅僅是個測試工具，還可以在無需自己編寫任何代碼的情況下來創建登錄頁面。
如何做A/Btest
1、確定目標，例如提高網站的付費轉化率，降低跳出率等
2、測試方案，建立假設：購買按鈕的顏色會影響點擊率？縮短流程可以提高復費率？改變導航可以降低跳出率等？
3、創建相比較的兩個版本，改變其中的變量
4、發布測試，將部分流量導向B方案，但不一定是5：5
5、數據分析，收集數據，對比AB版本的轉化率、跳出率、留存率等
感謝閱讀！
米勒定律背景：
1956年經美國心理學家發表了一篇名為《神奇數字7》的論文，論文中討論了一維絕對判斷的極限和短期記憶極限之間的關系：一維絕對判斷的備選數目與短期記憶極限的數目大致相當，數字都在 7 左右徘徊。在后來的好些研究雖然也對論文中的一些概念進行了改善，但這個數字7依然被保留。這也是人們關于短時記憶內容最早期的研究結果，現在也普遍適用在設計中，也就是現在的米勒定律。
米勒定律定義：
從心理學的角度來看，人類處理信息的能力是有限度的。人腦在處理信息塊的時候會受到7±2規則的限制，即人的大腦最多同時處理5到9個信息塊。原因是短期記憶儲存空間的限制，超過9個信息團，將會使得大腦出現錯誤的概率大大提高。
思考結論：人們的短期記憶有限，通常只能記憶7±2信息塊。信息塊越多，人們能記憶的信息精準度越小，越容易出錯。
米勒定律應用：
在產品設計中，米勒定律可以說是信息內容處理的一條規范準則。通過減少對信息層級的劃分、歸類分組、輔助記憶等，來提高用戶對信息的高效識別與記憶。在追求極致用戶體驗的趨勢下，用戶對信息的預見與計劃在產品設計中也是極為注重，無論在產品設計的初期還是成熟期，合理的信息處理將會大大提高用戶對產品的好感度。
01、控制數量，減少用戶選擇
人們對信息的記憶處理是有限的，通常信息越多我們將越難以記憶。所以在做產品設計的過程中應該控制好信息塊的數量，增強輔助用戶識別與記憶，提高用戶體驗。
02、信息分段，輔助用戶記憶
在產品設計時我們經常能遇見一連串信息（數字、文字、段落等）的情況，當信息數量較大的時候，我們可以采用對信息分段的處理方法，將一連串的信息以7±2個內的信息數量為一個段點，輔助用戶記憶。
03、流程分步，優化用戶操作
經常會遇到信息特別多或者復雜業務場景，特別是在B端產品設計。通常我們都會先梳理業務流程，然后分步驟處理對應的信息。從而減少單屏信息內容過多給用戶帶來的急躁，讓用戶每個步驟都沉浸與當前的操作。
04、信息排序，引導用戶記憶
人們在記憶一組多數據信息塊的時候，通常都會對首末的兩個位置信息塊的記憶會相對比較強，所以在產品設計的時候，需考慮把重要的信息放在首位/末尾位置，引導用戶去記憶該信息。這也就是系列位置效應（首因效應、近因效應）。
A、首因效應：指在整個序列的信息塊中，相比中間位置的信息，人們對最前面的信息記憶更加清晰。
B、近因效應：指在整個序列的信息塊中，相比中間位置的信息，人們對最后面的信息記憶更加清晰。
C、設計思考：人們對信息流排序的時候應把重要的元素放置在首位或者末尾。若用戶是長期記憶的的話考慮首因效應、短期記憶思考近因效因，人們的記憶不僅受到位置的影響，同時也受時間影響，在不同的場景下合理應用系列位置效應.
米勒定律在產品設計中的應用主要是解決信息塊對用戶的記憶問題，合理的信息布局和信息處理可以大大的提高用戶對信息的閱讀和記憶。還可以根據不同的業務場景引導和輔助用戶識別和交互，增強用戶對產品的好感與體驗。
文章來源：站酷 作者：TerryChen_
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、
BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎上，提煉出的十項交互設計原則。被廣泛運用于網頁、APP以及各種人機交互領域。
要注意的是，這10項原則是啟發式（heuristics）的、通用的經驗法則，而不是具體的規定。
系統應該通過在合理時間內的適當反饋，向用戶通知正在發生的事情或者當前的狀態。
不要蒙蔽用戶，溝通是所有關系的基礎，無論人還是設備。
當系統響應時間小于1秒時，通常正常反饋即可；
當響應時間長于1秒時，我們通常會通過加載動畫、分步加載、占位符加載等方式，減緩用戶等待的焦慮感；
如果超過10秒還沒有得到響應，那么通常會認為這次請求是失敗的，需要給予用戶失敗提示。例如：刷新提示、新頁面加載提示、支付提示、下載提示。
當然加載時間并沒有固定的規定，有個例子是這樣的：
某個APP的用戶反饋說他們的頁面加載太慢了，希望提高服務器反應速度……于是他們對此進行了優化，優化后用戶的反應：新版很給力，很快！
那這個團隊的優化方案是什么呢？
。
。
。
——他們把小菊花轉圈的速度提快了
對用戶操作的適當反饋是用戶界面設計的最基本準則。讓用戶了解當前狀態、位置、是否成功、進度如何，減少不確定性；并引導他們在正確的方向上交互，而不是浪費精力在重復操作上。反饋有：
·狀態反饋
用戶需要知道自己的操作是否被系統感知，所以用戶操作后，應該第一時間給出反饋。最常見的就是各種按鈕的不同狀態，比如未點擊、點擊、不可用狀態，以及選中、未選中狀態。
就拿小說類批量訂閱列表來說，起點通過明顯的線面和顏色區分選中和未選中的章節；而長佩我買的時候是需要反應一下：免費不可選中是淺灰色、未選中是深灰色，選中是綠色……但是初始狀態時深灰色看起來像是選中？？
·進度反饋
進度通常有頁面加載進度、下載進度、視頻播放進度等
比如下圖的invision網站，在閱讀文章時通過頂部進度條的反饋，讓用戶知道自己的閱讀進度。
·位置反饋
因為網絡空間中用戶無法像物理空間那樣感知到自己的位置，所以我們需要在視覺上進行提醒，以免用戶迷失。
比如標簽欄、導航欄通過選中狀態來定位當前所在頁面，閱讀、看視頻、聽音樂時系統會記錄當前的位置，下次打開后繼續。
·反饋方式多樣化
反饋可以通過元素的顏色位置、文字、聲音和震動，甚至動效去表達變化。
比如京東，通過產品圖縮小-加入購物車的動效來反饋“商品已加入購物車”，直觀形象。
使用用戶熟悉的語言，單詞、短語、圖形，而不是系統導向的術語；遵循現實世界的慣例來呈現信息。
這里的語言不僅僅包括文案層面的語言，還包括產品的設計語言（圖形、配色和風格）。
產品使用的語言應該使目標用戶能夠清晰理解的。如果用戶不能理解，他們會感到被忽視和受挫敗，許多人將選擇其他產品完成目標。
特別是現在很多公司選擇耕耘細分市場的產品來分一杯羹，比如針對中老年、青年、兒童的產品，抑或商務、娛樂的產品，都要分別使用符合自己的定位的語言。
比如bilibili的設計語言和每日優鮮的文案語言——
模仿現實世界的產品或者使用映射，能夠利用人們現有的知識，降低學習成本，使他們輕松快速的理解界面。
像早期擬物化的設計，以及MD的魔法卡片模擬了物理世界中的紙張。IOS的指南針也類似現實世界中的指南針，以便用戶輕松的使用。
熟悉是這些體驗讓用戶愉快的原因。
比如微信閱讀打開書的動效就像現實世界的打開一本書一樣、給medium文章進行標記就像我們現實中使用馬克筆一樣。
用戶經常會在使用時發生誤操作，所以產品需要一個非常明確的“緊急出口”幫助他們——即提供取消和重做的功能。
用戶在使用產品時可以自由進退，遵循從哪里來就可以返回哪里去的原則；比如常用的各種二三級頁面左上角必備的返回按鈕。
當用戶誤操作時要給用戶提供提供撤銷、取消、重做等相關功能，比如聊天類產品的信息都可以短時間內撤銷。
（突然發現這張圖暴露了我每天點外賣的事實 ヽ(。>д<)ｐ
不可逆的操作需要給用戶明顯的提示，以免對用戶產生嚴重的影響。比如刪除功能通常需要二次操作，重要操作會有彈框類提示。
設計者應遵循一致性原則，統一標準能確保用戶理解各個元素在設計中，并且知道去哪里尋找哪些功能。
移動市場成熟的今天，已經有很多約定俗成的慣例。和用戶的習慣一致，意味著用戶不再需要重新學習，各種應用的切換之間沒有學習成本。這也是我認為設計的趨同化未必不是一件好事情的原因。
比如常用的幾種操作手勢、下拉刷新功能、我的/地圖/購物車圖標等
在同一個產品中，同一層級的信息應該使用一致的設計語言。
比如導航、彈窗、按鈕、列表，這是我們推行設計組件和規范的一個原因。
除此以外，顏色、文字、圓角、陰影等也是需要注意一致性的。
△谷歌google visual guidelines-google ads
用戶經常分心于手頭的事情，因此需要通過提供建議、利用約束來防止無意識錯誤。
其實限制用戶的選擇并不是一個好主意，但是如果有明確的規則來定義可接受的選項，那么限制用戶可以輸入的類型是一個很好的策略。
比如訂房時，對可訂房日期進行限制，防止用戶選錯時間。
提供清晰的提示，也能防止用戶犯錯，提示包括標簽、文字、顏色、以及反饋狀態等。
比如IOS的鍵盤，選中的字母會放大，提示用戶；輸入文字光標會放大，防止用戶操作失誤。
比如負向操作通常為紅色，紅色是一種警示色，給用戶預警防止誤操作。
盡可能減少用戶的記憶負擔，向用戶顯示他們可以識別的內容，而不是自己記憶和填寫。
選擇和輸入的操作成本相差巨大。產品應該給用戶提供選項，讓用戶可以直接選擇，而不是自己輸入。比如淘寶填寫收貨地址
在用戶使用產品的過程中，會有產生一些需要記憶的內容、或者操作路徑，這個時候我們要避免用戶記憶，把信息直接提取出來，送到用戶手里。
比如自動讀取短信驗證碼，比如bilibili會提醒上次播放的位置
內容可預期，減少用戶操作路徑，防止來回跳轉。
比如起點章節付費時可以直接看到當前的余額、
比如京東金融首頁直接顯示了余額和代還金額（本來應該打個碼的，但是想想我三位數的資產打碼還不夠費勁呢(?_?)
好的產品需要同時兼顧新用戶和資深用戶的需求。
對新用戶來說，需要功能明確、清晰，對于老用戶需要快捷高效使用高頻功能。不可迎合某一種用戶，把不必要的信息占據重要部分。
在首頁放置常用功能，比如淘寶、支付寶、bilibili等等；或者提供自定義入口，比如猿題庫可以自定義科目
對用戶頻繁使用的功能，提供重復操作入口或者模板。比如美團外賣，可以直接選擇再來一單
通過提供系統默認選項，而減少用戶多余的操作。比如美團、攜程、每日優鮮等當地服務類產品，會默認選擇當前定位的城市；購物會選擇默認收貨地址等
不要包含不相關或低頻次的信息/操作。頁面中的每個額外信息都會降低主要內容的相對可見性。
能夠方便用戶無障礙的瀏覽信息，越重要的內容越突出。
通過顏色、大小、字體的字重、對比度、元素的間距、特殊造型、動效等來表現。
頁面中背景、裝飾元素視覺過重的話，就會干擾到用戶對于信息的閱讀。
比如以圖片為背景，我們要考慮圖片上文字的識別性；列表頁過重的分割線、頁面內過多的裝飾元素都會給干擾信息閱讀……
比如下廚房菜單推薦的卡片，字體識別度特別差；移動掌廳的這個模塊，字體色和背景色對比不清晰、以及字體太小，都會干擾用戶識別信息——我們需要做的是降低這些干擾
錯誤消息應以簡單的語言表示，準確指出問題，并提出解決方案。
當發生錯誤時，提示信息一定要直觀，視覺上能夠引起用戶注意，可視化處理，文案要簡單概要。比如賬號密碼錯誤、以及各種異常狀態
當用戶遇到錯誤時，不要只是報錯，盡可能提供詳盡的說明文字和指導方向，遇到了什么問題，以及如何解決等等。
幫助性內容有一次性提示、常駐提示和幫助文檔。
多用在用戶第一次使用，或者產品更新后，通常為氣泡形式，或者snakebar的形式呈現。
用于操作時必須注意到的內容，在頁面中以文本或者標簽形式呈現。
一般用于解釋規則或者熱點問題，通常以超鏈接的形式存在于頁面中；或者以集合形式位于設置頁中，此時需要注意要易于檢索。
本篇文章主要介紹了尼爾森的10大可用性原則，以及介紹了適用范圍和案例說明。最后我們再來復習一遍加深記憶吧~
藍藍設計的小編 http://www.syprn.cn
