2015年之后的中國互聯網，人口紅利、流量紅利逐漸退場。2019年遭遇第一場資本寒冬，上半年投資總金額同比下降了58.5%。也在2019年，“精益創業”、“精益數據分析”、“增長黑客”等一系列數據思潮開始流行。而UX設計師作為半個產品經理，我們很容易將這股“數據熱”遷移到自己身上：每個UX設計師都要學數據分析了嗎？數據和設計是什么關系？天天盯數據會限制設計師的想象力嗎？數據到底要怎么用？……
過往，設計師一般不會把“數據”掛在嘴邊。我們提倡“以用戶為中心，打磨極致用戶體驗”，較少考慮成本和商業效益。
通俗來說，就是產品經理負責“生意”，設計師負責“體驗”。以“造鞋”為例子，產品經理做了市場調研，決定要生產兒童運動鞋，設計師負責設計“適合4-11歲的兒童在城市公園玩鬧”的鞋子應該長什么樣、穿著它跑跑跳跳是不是舒服的。但是設計師不需要擔心運動鞋的銷量，產品經理則要跟老板匯報銷量業績。
在紅利消退、產品同質化嚴重和快速迭代的多重壓力下，UX設計迎來了更高的挑戰：僅憑主觀判斷“好不好用、好不好看”來打磨產品內在體驗，不考慮產品的生存、增長和盈利，很難在行業立足。與此同時，隨著數據采集工具的日漸成熟，數據以“客觀”和“便捷”兩大特點，幫助我們更快獲得“設計的依據”。精益化設計是必然趨勢，而“數據分析”是精益化設計的手段之一。
沿用“設計鞋”的案例，UX設計師要在自己所在領域思考：在設計調研的過程中，我們用什么數據指標來衡量這個兒童鞋好穿、好賣？在鞋進行批量生產前，我們有沒有數據資源支持我們研究父母/小孩對鞋子外觀的偏好、小孩運動時容易受到哪些物理傷害等等？如果有條件進行小范圍的數據實驗，我們如何設計數據實驗來評估好穿好賣？
“理解任何事物都需要先對它進行定義，這樣才能夠在頭腦中清楚地知道正在討論的是這個東西，而不是其他東西?！狈浅Ｏ矚g美國經濟學家Thomas Sowell在《經濟學的思維方式》里說的這句話。
如果我們對“數據”下定義，那么產品設計語境中的“數據”具體是什么？數據是怎么產生的？
從數據采集手段來看，互聯網產品的數據來源主要有3個：二手資料數據、問卷調研數據和應用埋點數據。
行業數據和競品數據一般通過二手資料獲得，包括商業交易數據、用戶群的態度和意愿、用戶輿論指數、競品的用戶規模和盈利狀況等宏觀數據。常用的搜索渠道有：百度指數、企鵝智酷、艾瑞、尼爾森、各大科技資訊平臺等。
我們可以將這些理解為“市場數據”，在立項期對產品方向有一定指導意義，能快速了解市場概況，也能幫助產品思考差異化定位的問題。
以“騰訊文檔為”項目為例，我們想提高騰訊文檔用戶創建文檔的成功率，通過模板創建文檔是關鍵路徑之一。研究用戶通過模板創建的路徑時，想大概了解用戶找模板時可能會在意什么。于是我們嘗試使用百度指數搜索“模板”、“文檔模板”、“PPT模板”、“Word模板”、“Excel模板”，從搜索量得知：PPT模板搜索量最高，符合我們的推測；Word模板內容中，簡歷、合同需求量較大，而部分用戶只是想要好看的Word背景等等。雖然我們得到的有效信息不多，但我們能夠通過二手資料的方式，快速了解用戶需求的基本面。
問卷調研數據是通過向目標用戶發放問卷獲得的，側重于收集人口學信息、用戶自述的歷史行為、主觀態度或意愿，比如用戶滿意度調查、流失用戶原因調查等。本質上是通過建立假設、再進行抽樣統計的方法來得到用戶口述的答案。也就是，問卷傾向于聽用戶說了什么、而看不見用戶真正做了什么。嚴謹的問卷分析也會比對后臺數據，校驗用戶說的和做的是否一致，以清洗無效數據。
較之于問卷調研數據，我們想看“用戶做了什么”，則通過分析應用埋點數據獲得。
“應用埋點數據”也叫“埋點數據”、“前端頁面數據”，我們可以簡單理解為“通過技術手段獲得用戶在應用內（網站、客戶端、小程序等）的操作行為數據”。其背后原理是：用戶和界面發生交互，系統需要向服務器發送請求和返回請求，把這些請求預埋一段計數代碼，就能得到頁面的曝光數據和用戶的操作數據。
埋點需要產品經理或設計師做好數據指標的定義，跟開發工程師提前溝通，讓開發工程師在代碼中嵌入埋點。一個埋點由多個字段組成，規范地定義字段，有利于我們在數據平臺搜索埋點更方便。當我們懷疑數據有效性時，也更方便排查埋點問題。
埋點類型可分為曝光埋點、操作埋點和時長埋點：
1. 曝光埋點可以捕捉頁面被展示的次數，可以是針對整個頁面，也可以是頁面中的某個區域。即我們常說的PV、UV。
2. 操作埋點則是在用戶對頁面某個區域（按鈕、卡片、提示條等）進行手勢操作（點擊、雙擊、長按、滑動等）時，進行打點記錄。對應的，也稱之為某個操作的PV、UV。
3. 時長埋點是通過標記以上兩類埋點、并計算時間差獲得的。比如，我們記錄用戶選取模板耗費的時長，可以通過離開頁面的時間（t2）-進入頁面的時間（t1）計算。而離開頁面則用點擊左上角返回按鈕、點擊具體模板等“離開”操作來核算。
基于以上3種原始數據，我們可以運算得出點擊率、功能滲透率、人均點擊次數、人均使用時長等具有對比價值的數據。
較之于二手資料和調研數據，埋點數據更加貼近用戶的真實表現，作為反饋指標的靈敏度更高，可挖掘性更強，也能作為客觀衡量指標引入到每一次產品迭代中。
設計師理解埋點的原理，有助于在數據采集環節跟數據開發更好地溝通，并提出合理的數據需求。另外，當我們拿到一組數據，也需要從根本原理上去判斷數據的信度和效度，確保數據沒有質量問題再進行下一步分析。
數據分析能力會在UX設計師的崗位招聘要求中被提及，但除了電商和廣告行業的數據化設計知識體系較為成熟，其他領域還在探索。另外，相比于市場營銷、產品經理、產品運營等職能，設計師的分析框架是相對晚熟的。
實際上，我們很難從招聘廣告中歸納“具備數據分析能力的設計師”長什么樣，但我們期望這樣的設計師對數據的感知力強、分析邏輯清晰、數據經驗豐富，對某個垂直領域的數據儀表盤了如指掌等等。
數據對UX設計有什么用？或者說，在設計鏈路的哪一個環節，數據和設計才能發生化學反應？
UX設計日常流程為：得到一個需求（需求評審/需求挖掘）——輸出設計方案（設計決策）——驗證設計方案（設計實驗）。順著這個流程，我們來看看數據在UX設計各階段的作用。
肖恩·凱利斯在《增長黑客》開篇就提到“倉筒組織”這個概念：職能組織有各自的KPI，但未必對最終的業務目標都有利。比如開發人力有限的情況下，產品經理想上線新功能，市場運營想搞推廣活動，設計想做UI大改版做炫酷的動畫——就像N匹馬有N個方向，馬車跑不快。
尤其是當產品進入成長期，我們會發現“能做的事情真的太多了”！不僅僅是來自老板和產品經理的需求，每天都有用戶想教你做產品，剛剛競爭對手又上線了N個新功能等等。另外，當多個產品經理分管不同業務線，每個產品經理都會認為自己提的需求優先級最高。那么，ABCD這幾個需求，哪個更值得即刻實現？
有目標導向和成本意識的設計師，不會拿到PRD就開始畫稿，而是做需求評審。下次產品經理給你提需求，或者自己想要主動提案，不妨從下面幾個問題開始思考效益。
如果這個新功能上線或對已有功能做這些優化點：
｜正向評估：如果做，能使哪些用戶在什么場景受益？用戶會因此使用、消費、甚至推薦我們的產品嗎？
｜負向評估：如果不做，是否會造成用戶口碑變差，甚至棄用我們的產品？
｜數據導向：預估這個需求對大盤數據（AARRR）有何貢獻？如果無法在短期看到對大盤數據的直接提升，應該取什么樣的數據指標來評估其價值（GSM模型）？
｜比對優先級：目前有ABCD四個需求，而人力資源有限，當下最應該解決哪個數據環節的問題？
我們以騰訊文檔的Excel按行填寫功能為例，闡述如何在需求評審階段就思考數據效益。
一開始，我們只是從用戶吐槽中了解到在手機端使用Excel錄入信息的困擾：協作人之間容易竄行誤刪誤改別人填寫的行，甚至把創建人輸入的表頭信息都給刪掉了。
我們模擬信息收集場景，摘出Excel移動端輸入的體驗節點，發現“在有限的屏幕內去處理表格信息，需要來回滾動/縮放表格，再回到自己的行再輸入”這一點最容易發生錯誤，尤其在沒有凍結首行的情況下。
我們有收集表功能，也支持表格轉收集表，但是都依賴創建人主動去使用這個品類/這個功能。我們是否可以在創建人不干預的情況下，直接把來回滾動的表格輸入變成縱向的表單輸入？
以上都是從“感知”角度發現和分析問題，確認了“存在這么一個問題”，然后提出了一個可行的想法。往往這個時候，我們容易為之興奮。
但是如果我們堅持更精益的投入產出比，我們應當評估“這是不是一個要優先解決的問題”，即評估收益：改變Excel移動端的輸入體驗，能帶來什么收益？
首先，我們做正負向評估。
｜正向評估：如果做，用戶可以在手機端更順暢地錄入信息，避免串行刪改的錯誤。雖然這不足以吸引新用戶使用我們的產品，但這個體驗未在競品實現，能形成差異化的記憶點，也許能帶來好的口碑。
｜負向評估：如果不做，手機端的Excel輸入體驗跟其他競品無差，用戶倒不會因此流失，但是創建人會因為協作者的犯錯苦惱，也許會因此轉為采用“IM一對一溝通”來避免出錯。
然后是設定數據目標：如果這個功能落到數據板上，能作何貢獻？
｜數據導向：我們預期這個功能能夠通過提升手機端的輸入體驗，來避免用戶出錯，降低創建人整理數據的負擔，以提高用戶留存（而非預期這是一個拉新功能）。并且，設計假設正確，應該能通過一些數據指標看到用戶的行為變化。
最后，對比同期提出的幾個產品需求，評估優先級。
｜比對優先級：假設Excel按行填寫的需求是A（圖中黃色點），同期有一個影響文檔安全分享的需求B。如果我們按照正負向評估去考量優先級，將AB兩個需求都放在象限圖里，越外層越應該優先處理，那么我們就應該優先處理需求B。
以上是為了將思維可視化呈現給讀者，實操時更重要的是數據意識和敏感度。圖示僅供參考，用何種形式表達不重要。
掌握一套清晰的需求評審思路，才有話語權去討論這個需求是做還是不做、即刻要做還是延后再做。這不僅僅是UX設計師需要具備的目標導向思維和需求分析能力，而是整個團隊都應該建立的數據意識和工作流。這也適用于對設計師提案的自我審查，避免自娛自樂。
產品在不同的成長階段關注的短期效益會有所不同。初創期，產品先要驗證其假設的需求是不是用戶真實需求、商業模式是否可行。當產品發展到一定的用戶規模，我們可以通過對比關鍵數據指標，去判斷現階段是否符合預期。這就像我們去醫院抽血做體檢，血樣指標可以反映我們當前是否健康。
如何檢驗產品健康度呢？我們首先關注宏觀的數據轉化是否符合預期，即AARRR。海盜指標這一套，想必大家耳熟能詳。但對設計師來說，難點在于如何將宏觀數據轉化與具體的用戶使用場景進行關聯，進而落實到具體的設計任務。
以騰訊文檔為例，在線文檔的核心用戶價值是“從創作到協作的多人多端無縫同步”，因此我們定義用戶的關鍵路徑是“創作→分享→協作”，即：
基于關鍵路徑，我們繼續下鉆分析每一個環節，建立用于監控“轉化質量”的行為漏斗。比如在“分享”這一步，落到APP里，這個行為漏斗是：
我們發現僅30%的創建人在分享文檔前設置了非私密權限——這個數據并不符合我們的預期，因為這會導致創建人分享文檔后，協作人無法直接查看或編輯文檔。協作人需要進行權限申請，創建人則需要處理相應的權限申請通知或更改權限，從“申請權限”到“審批通過”的時間差降低了協作效率。
我們進一步去找關聯的數據指標，來確認“這給用戶造成了困擾”——“有多少用戶在文檔分享出去之后再返回來設置權限”‘、“一個創建者平均要處理多少次權限申請”等等。
通過小范圍的用戶測試，我們了解到“權限設置”是一個視覺盲區。于是，我們優化分享頁的信息展示，來改善“用戶看不見權限設置”這個問題。另外，當創建人在處理權限申請的通知時，提供修改權限的入口，以避免重復處理同一個文檔的申請消息。
最終，我們將“分享前進行權限設置”的轉化提高到80%——吹牛的，業務數據太敏感，無法以真實數據跟大家分享，本文的數字皆為脫敏數據。
這就像一個剝洋蔥的過程。先找到產品的核心價值和對應的主路徑，再拆解到對應的多個用戶任務流，關注微觀的某個環節轉化是否有問題。利用數據診斷產品健康度，然后繼續用數據或其他研究方法下鉆，下鉆到可以落地到設計點的層面。
2016年聽了白木彰老師在杭州的一次現場分享，他對“Design”的理解非常透徹?！癝ign”是“標志”，應該是大家最共通的常識，就像國旗是這個國家的sign。那“De”是什么？臺下有人回答“重新定義”，而白木彰很自信地說：“不，這是一個否定詞”。
對于UX來說，同理。每一次的設計都是一次否定，否定現有體驗的合理性，否定現有的產品、服務或某一功能完全滿足需求。反過來想，則是審問自己的設計方案：每一次的“否定”，真的更好嗎？
這里舉一個“小需求”為例：騰訊文檔Excel的PC端右鍵菜單高度優化。筆者目前負責騰訊文檔編輯模塊的UX工作，日常就是很多這樣的“小優化”，其實這更加考驗數據敏感度和對“嚴謹”的堅持。
需求背景就是用戶反饋“右鍵菜單太長了，小屏幕看不到菜單底部的內容”。
“展示問題”的解法有很多：
解法1/ 用UI手段，降低單個menu item的高度。
解法2/ 重新歸類，通過折疊來縮短菜單。
解法3/ 當菜單無法完整展示，重新錨定其在屏幕的坐標。
對比競品，確實有表格產品通過（2）去解決這個問題，但是我們撈數據發現：右鍵菜單中，插入行列是高頻操作（紅色部分），點擊次數比其他功能高5～130倍，且人均點擊量分別是3次和2次。我們決定不去對增加行列進行菜單折疊，因為這樣做雖然我們解決了“菜單太高”的問題，但降低了點擊效率。
接到某個需求的“A問題”，我們容易一葉障目。但是，會不會因為我們解決了A問題而引發B問題呢？數據幫助我們快速決策，避免B問題的出現。謹慎對待每一次小設計，因為每一次小設計都是一次否定。
大家對數據實驗應該不陌生，常用的方法有AB測試和灰度測試，是一種控制變量的抽樣實驗方法。
AB測試是指通過抽取抽取等量用戶樣本進行AB兩個設計方案的投放，對比兩組數據，進行方案擇優。這兩個方案的差異要嚴格控制在“僅有一個因素的差異”。這跟我們初中做生物實驗論證“一棵小樹的生長需要陽光”的思路一樣：兩組等量的小樹，一組有陽光，一組沒有陽光，經歷相同的時間后對比生長的平均高度差。水、空氣、養分等其他條件要嚴格一致。因此大改版等“多變量”的設計并不適用于AB測試去印證。
大改版則通過灰度測試或拆分變量去做AB測試來確保效果?；叶葴y試是指如果軟件要在不久的將來推出一個全新的功能，或者做一次比較重大的改版的話，要先進行一個小范圍的嘗試工作，然后再慢慢放量，直到這個全新的功能覆蓋到所有用戶。也就是說在全量發布的黑白之間有一個灰，所以這種方法也通常被稱為灰度測試。
設計師需要觀察綜合的數據指標，以騰訊文檔為例常規的指標有：PV、UV、人均點擊次數、功能滲透率、使用該功能的留存率等等。另外是多渠道收集用戶反饋，包括騰訊文檔的“吐個槽”社區、微博搜索關鍵詞、隨訪身邊的用戶朋友等。
數據化設計不是對“精心打磨體驗”的否定。恰恰相反，對設計工匠來說，數據分析能力是一種新的“打磨工具”，提倡在設計實施和決策過程中更科學和客觀。UX和數據的關系，就像我們期望鞋子被量產之前能夠有數據佐證“這款鞋好看好穿好賣”，而不是否定“好看又好穿的鞋子能帶來更好的銷量”。
最后，“價值-設計-數據”是一個動態課題，必然隨著業界經驗的沉淀和數據工具的發展，不斷迭代。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：騰訊ISUX團隊 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
通知是產品中極其重要的一部分，它能快速將內容的狀態及變化通過不同的方式傳達給用戶，以便用戶在收到信息后根據所傳遞的內容及時做出應對策略。
在這里，有一個很現實的問題，很多產品喜歡一股腦的把有效的/無效的、重要的/不重要的、用戶想知道的/不想知道的等所有信息通通推送給用戶。那么，你的推送渠道真的用對了嗎？是否做了信息優先級區分？推送時間段是否有效？站在用戶角度，下面這些場景你肯定碰到過：
◇ 手機屏幕總是頻繁彈出信息，接二連三的震動、提示音讓你一怒之下卸載了一些不太常用的APP；
◇ 桌面圖標99+、主頁的消息入口99+、進入消息分類還是99+，清理起來非常麻煩，還不如關閉幾個分類通知，少一個也能緩口氣；
◇ 一天少看了幾個小視頻，好不容易節省出來的流量被通知無情的消耗，還不如關閉系統通知權限來得快；
◇ 每隔一段時間，都要在手機短信中回復一大堆TD（退訂），想吐的感覺；
◇ ......
在頻繁地打擾下，用戶關閉了一個個通知權限、甚至一度卸載APP。不難看出，好的消息通知能巧妙的將用戶求留?。ú糠钟脩衾猛ㄖ湍鼙３謱ξ⑿?、QQ的控制欲），做的不好就會起到負面作用、失去了消息通知的初衷，這里面最需要把控就是推送的一個“度”。
用戶可能因為一條走心的推送而轉化、也可能因為被打擾而放棄使用，站在設計角度，需盡可能打造讓用戶更喜歡的通知系統。那么，對于不同的業務需求及使用場景，又該如何差異化的進行消息推送，筆者通過本文進行分析總結，與大家一起了解。
一、消息推送的基本知識
二、消息通知渠道
三、讓用戶再次開啟通知權限
四、提高觸達率的小技巧
五、結語
消息通知是產品提供的一項服務，能夠及時將產品的期待或內容的變化、根據其等級權重合理的通過不同渠道及時同步給用戶，常見的如互動提醒、老用戶召回、活動拉新、產品更新或幫助提醒等，通過站內紅點、彈窗、短信、郵件等方式與用戶進行信息交換。
用戶層面，方便及時獲取到想要知道的信息、以及對信息交換的控制權。例如：用戶發布一條新的短視頻想要對評論/點贊及時掌控、給心上人發了信息想在第一時間看到回復...等，產品也是借此用戶對內容的控制欲，利用消息推送提升用戶的使用體驗。
產品層面，通過主動推送想讓用戶知道的信息，以達到新/老用戶轉化的目的。例如：通過手機短信形式發放優惠券對老用戶召回、應用內通知或桌面推送對用戶拉新...等，以此提高產品收益，獲取更大的商業價值。
首先，一個好的消息系統首先需要將消息內容設計的全面，以便用戶通過消息通知能準確無誤的了解到對應內容；
其次，消息的觸達方式需合理有效，必須提供便捷的操作入口以供用戶及時反饋；
另外，為了避免過于打擾用戶，需選擇合理的推送渠道，提高用戶觸達概率及反饋效率。
消息通知渠道分為應用內通知應用外通知。應用內通知主要來源于消息中心或系統主動觸發的彈窗來體現，而應用外通知包括桌面圖標紅點、手機短信、電子郵件、push、公眾號信息（需綁定）等渠道推送。
1）消息功能入口
消息功能入口提示也稱為紅點提示，主要有底部Tad欄、首頁右上角、個人中心右上角三種形式。當有新的通知出現時，對應圖標的右上角會出現小紅點提示，清晰明了，關于小紅點設計，之前《小紅點篇 | 用好這招，讓用戶的觸達率大幅度提升！》這篇文章有詳細說明。
紅點提示的用戶觸達率較高，但需要用戶在登錄狀態下才能查看，比如訂單狀態變化、用戶與用戶/產品之間的互動消息、產品活動通知等。
2）消息列表
當產品的消息類型較多時，點擊消息功能入口即可跳轉至二級分類列表。與上述相比，消息列表的內容則更加清晰，通過第一次消息入口功能的引導觸發，這里的用戶觸達率將成倍增加。
3）彈窗通知
以彈窗的形式覆蓋在頁面內容頂層，阻礙用戶的當前操作并迫使用戶對彈窗做出決策，可以是系統主動彈出或用戶手動觸發，對用戶的干擾極大。
彈窗通知最大的優勢在于會100%被用戶看到，無法忽略，否則將不能進行其他操作，很適合產品的一些重要事件提醒，例如應用升級、活動通知、優惠券引流等。
4）Toast 通知
Toast通知是用戶在操作之后給出的即時反饋，與當前頁面內容關聯性極強，但不會中斷用戶的操作，出現的時間很短，一般持續3秒后自動消失，對用戶的干擾也比較小。
需要注意的是，Toast容易在用戶不注意的情況下被遺漏，所以適合用于操作后不影響大局、且不可二次操作、不可逆轉的輕量提示，例如刪除成功、提交成功等。
1）桌面小紅點
小紅點通常以圓點+數字的形式出現在圖標右上角，用來提示應用內的未讀消息數量，進入應用查看或清除后小紅點則會消失。桌面小紅點有一個必備前提，需要同時開啟設備和應用內的通知權限方能接收提醒通知。
在部分應用中，桌面小紅點具有較大的價值，能對用戶產生積極的影響，使用頻率得到進一定的提升。例如：社交類應用中的私信、評論、點贊等；商家端的咨詢信息、下單提醒等，用戶在看到后都會有強烈的點擊欲望，對一些數據的提升起到推動作用。
2）PUSH推送
PUSH推送通知常見于設備頂部橫幅（幾秒后消失）、通知中心以及鎖屏后的中部區域，用戶可從卡片中的內容獲取信息類型及重要程度，用以決策是否需要立即打開。
這種推送方式，用戶幾乎很難忽略，不處理的話會長時間浮于屏幕之上，非常適合價值及時效性較高的消息通知。除視覺提醒之外，還可通過聽覺觸達用戶，例如支付號、微信的收款信息等，不過依然要同時開啟設備和應用內的通知權限。
3）手機短信
短信推送是大家很熟悉的通知渠道了，畢竟現在都是用手機注冊賬號，手機號獲取難度幾乎為“0”，常見的有驗證碼短信（用戶請求）、營銷短信（產品推送）兩種：
驗證碼類似“一問一答”的互動，沒有什么特別的玩法；
營銷類短信對于拉取新用戶、老用戶召回、節日/活動促銷能起到不可替代作用，產品可通過短信發送圖片、文字以及超鏈接，內容的時效性、用戶的觸達率都相對較高。
著重說明一點，因為短信通知的成本較高，在使用之前需要足夠的思考分析，細分用戶群體做到精準投放，避免所花費的成本與產生的價值不成正比。另外，如果需要放超鏈接，那么短信內容一定要有足夠的說服力及吸引力，總是被用戶當做詐騙短信刪除、舉報的話還不如不放。
為了減少對用戶的打擾，讓產品更人性化，一般會在短信結尾提供TD（退訂）提示，用戶回復即可取消后續的推送，但是否真的取消成功，這就得看產品了(???)...
4）電子郵件
電子郵件推送方式使用的并不多，一方面需要產品有web端服務，純粹的移動端APP郵件推送不會有什么效果；另一方面，絕大多數的用戶登錄電子郵箱并不頻繁，還容易被用戶一鍵清理或誤刪。
電子郵件唯一的好處就是用戶可通過超鏈接直達內容出處，相比APP應用，免去了下載等一系列操作，還可以長時間滯留，便于用戶隨時查看或添加星標，處理時間段選擇較為靈活，很適合web端服務。針對一些商業化的郵件推送，也需要花費一定的經濟成本。
產品獲取用戶郵箱地址的難度較大（郵箱賬號除外），不難理解，使用手機號一鍵登錄、驗證碼登錄、第三方賬號登錄遠比郵箱地址登錄要方便的多。除此之外，還可以通過個人設置的添加郵箱、問卷調查的郵箱地址預留來獲取，不過這就要看用戶的主動意愿了。
5）公眾號消息
公眾號背靠社交應用，普及程度及用戶觸達率是極高的，不過這需要產品利用部分業務、活動為導向，引導用戶關注公眾號后方能接收到消息通知。
目前公眾號只能向用戶發送符合部分場景要求的服務通知，例如刷卡通知、物流軌跡變化、商品購買等。如果預算足夠的話，還可以購買公眾號列表、內容詳情頁、朋友圈等產品廣告位進行特定用戶群體推送，無需用戶關注也可以看到并進行轉化。
用戶一旦關閉通知權限，對產品來說無疑是一個損失，這意味著沒有消息通知的推動，用戶的使用頻率以及與產品之間的互動顯然會減少（就連夫妻之間都需要時?；优c溝通交流，何況對于有選擇余地的產品），時間長了，用戶轉投其他產品的“懷抱”也不是不可能。
有沒有想過，用戶只是關閉通知權限而已，并沒有卸載APP，真的就沒辦法了嗎？是不是該做點什么...
用戶之所以還未卸載APP，說明還有價值，歸根結底，關閉通知權限的原因都是因為消息的“狂轟亂炸”帶來的無盡騷擾，幾乎沒有例外，而產品還會添上一把火，用戶再次打開APP時無底線的催促用戶再度開啟，耗盡用戶最后一點耐心后，或許再也沒有機會了。
這個時候，設計師考慮的不是頻繁提醒用戶開啟，而是用戶關閉通知的真正原因（“狂轟亂炸”只是概括），細化各種可能性，然后從中找出機會點，但凡有所改進都值得試一試，畢竟相比什么都不做不會更糟。這么解釋似乎毫無說服力，下面舉個例子：
當產品中的某項免費服務突然有一天開始收費了，但受到了大多數用戶的抵觸，這個時候你該怎么做，是無視用戶訴求繼續收費、還是恢復到之前的免費？這并不是一個選擇題，繼續收費會導致大量用戶流失、恢復免費可能連維持運營成本都難，所以不經思索的選擇草草收場、連下下策都算不上。用戶抵觸的原因可能收費過高或是與實際價值不符，有沒有想過利用限時折扣、附加其他增值服務（成本較小）或者組合捆綁銷售也不失為一種策略。
那么，到底該如何做既能愉快的發送消息通知、還能能挽回用戶的心呢？
用戶關閉通知權限，并非沒有需求，最典型的就是在某寶、某東加了滿滿一“車”商品等待降價，然后抱怨消息通知太吵關掉了通知權限，最后就是無法收到折扣通知、還把問題怪在了APP身上，著實太冤。用戶只要還有需求，通知權限就還有被重新開啟的機會。
1）損失厭惡/利益引誘
首先，我們需要找出對應的價值點，利用優秀的文案給予用戶思考的余地，用戶每多思考一會，結果都有可能發生改變。
人們都討厭失去，對于損失的不可控很難接受，在引導用戶開啟通知權限時，需要強調不開啟會失去什么，畢竟面對“得到”和“失去”時，損失更加讓人難以忍受，例如物流產品告訴用戶“未開啟通知，將錯過重要的快遞信息”。還可以通過激勵等進行利益引誘，如“開啟后能及時獲取紅包卡券、折扣通知”等，并提供快捷通道，促使用戶重新開啟通知權限。
2）消息分類/分別處理
每種類型的通知都不可能符合所有用戶的“胃口”，針對社交、電商類產品，可將通知類型分類處理，用戶希望接收哪種類型的消息單獨開啟即可。
例如支付寶將消息拆分為多個類型；京東還增加了午休免打擾設置，開啟后在12：30-13：30不會收到任何消息提醒；微信群過多、消息太吵時，開啟免打擾又擔心錯過重要人的信息，于是微信在去年上線了開啟群消息免打擾后、可設置群內4個人的消息正常通知，算是比較人性化的設計了。
3）提供關閉/關不徹底
部分產品提供了關閉消息通知功能，但又關不徹底，這是產品基于妥協的基礎上，依然在低頻推送消息的“流氓”玩法，與用戶完全關閉相比，已經算是不錯的結果了。
常見于PC客戶端，就像很多軟件的插件一樣，不管怎么關，總是無法徹底關閉，甚至還將開啟操作偽裝成其他內容引導用戶誤觸；手機短信推送也會有這種情況，用戶回復過“退訂”后依然會收到相關短信。
這種方式需謹慎使用，在用戶關閉通知后，需通過后續推送內容的質量、頻率試探用戶底線，然后逐漸提升，切不可無視用戶操作。
反復推送相同的內容只會讓用戶更加反感，回復退訂、卸載應用都可能在這一刻發生。
很明顯，消息發出后，如果用戶的觸達率較高就沒必要再次推送。反之觸達率較低，重復推送會讓用戶有種被催促、脅迫的感覺，適得其反，觸達率低有沒有可能是文案不夠友好、表達不夠清晰或者吸引力不夠？即便同一件事情，也盡量使用不同的表達方式，如何想辦法重新引起用戶的關注才是關鍵點。
中華文字博大精深，且有56個民族，其性格習慣各異，特別在利用當前社會熱點、媒介進行的營銷推送時，盡可能規避掉敏感信息，如地域/民族歧視、性暗示等。
很多時候，消息推送太少無法滿足產品目標、太多則會惹惱用戶導致通知權限被徹底關閉，所以不僅要考慮消息推送頻率，更重要的是對受眾群體進行分類、分別推送，不要每次都一股腦的將消息發給所有用戶，當然，能做到千人千面（成本大）則會更好。
沒有用戶愿意在不明所以的情況下來看長篇大論的內容，需確保消息內容簡單直接、清晰易懂，并符合用戶認知習慣，還得保持友好的語氣以及富有創造力的品牌形象。
處于營銷目的時，可利用感興趣的事件/事物勾起用戶的點擊欲望，例如網絡熱詞、時下熱點等，筆者雖然并不提倡“標題黨”，但不得不說，很多標題黨都能起到不錯的效果。
消息通知需要一個有效操作入口，并且在消息內容中有對應的指向，點擊應用內通知切換APP界面、應用外推送鏈接跳轉至web頁，從始至終都需要為用戶提供一個查看更多內容或參與的有效途徑。
消息通知設計的主要目的是在正確的時間、以正確的方式將內容呈現給用戶，并提高產品的轉化率，不管用戶愿不愿意接受，這始終都是一個呈現信息的不錯途徑。
本文主要總結了消息的通知渠道、常見問題處理、提升用戶觸達率的方法，以幫助新手設計師快速掌握完整的消息系統。或許最終的結果事與愿違，但不能否認其魔力，需要做好的是確保消息內容質量、對應的受眾群體及合理的推送渠道，相信總有一種方式適合你產品。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
文章來源：站酷 作者：大漠飛鷹CYSJ
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
眾所周知，人機交互是一門集調研，構思，設計和測試為一體的學科。作為一門覆蓋多領域的多學科，包括并不限于心理學，行為學，編程，工程，設計，調研，和工商管理，現代人機交互的核心已經不再是從技術層面去解決問題， 而是側重于以多個視角去挖掘問題的本質并思考問題背后的價值。也因此，人機交互學術界一直以來都試圖尋找一種思考模式，或者理論模型，去將復雜的思考流程提煉出來。
近三十年來，人機交互領域的方法論可謂百花齊放，盡管許多知名研究機構與院校都發布了不同的設計模型與流程圖，但是其內核終究大致相同（尋找問題——定義問題——設計——測試）。
以下是近年來國際最主流的七種人機交互設計模型：
1. 尼爾森諾曼集團設計流程 （Nielsen Norman Group）
2. 斯坦福大學設計學院設計流程（Stanford Design Thinking Process）
3. 《情景化設計:為生活而設計》 中的設計流程 （Contextual Design: Design for Life）
4. IBM環形設計模型 （IBM Loop Model）
5. 英國設計協會雙鉆石設計模型（Design Council Double Diamond）
6. LUMA 學院設計流程（LUMA Institute Design process）
7. Dubberly Design Office 橋型設計模型（Analysis-Synthesis Bridge Model）
其中，前6種應該都是大家相對熟悉的，我們在文末也附上了官方鏈接供大家探索。今天這篇文章我們將簡要的帶大家了解列表中最后一個也是最有特色的一個人機交互模型：橋型模型（Analysis-Synthesis Bridge Model）。
橋型模型是美國 Dubberly Design Office發表的設計流程圖（Analysis-Synthesis Bridge Model），對于不清楚的讀者，此公司的創始人Hugh Dubberly 曾發布超五十篇人機交互領域的研究型文章，在多個知名設計協會掛名，并被錄入美國 ACM 的 SIGCHI Academy， 成為公認對人機交互領域做出最杰出貢獻的人之一。Dubberly 也曾在多個美國知名大學任職，因此，此模型也是多數國際人機交互學科的公認理論。
盡管相較于其他的流程圖，這個流程圖較為抽象，但是其所用的多維度分類卻相對明了的闡釋了設計的本質。如圖所示，橋型模型的x軸分為現在和未來，y軸分為具象和抽象，以此來定義設計的狀態。同時也加入了動詞“形容”，“分析”，“研究”，“制作”去定義設計中的操作。在這個橋型設計流程中，設計師從左下角到右下角的過程代表從現象走向抽象再從抽象走向產品的過程，與此同時也代表著從今天走向明天，或者說從問題的現在態走向解決問題后的未來態。
起點從左下角開始，（what “is”）代表著問題本身，而左上角的（model of what “is”） 代表問題的抽象模型或者問題的本質。這兩個階段代表著設計中的調研階段（Researching）。此時的設計師應該通過“形容具象的現象”（左下角格子 Describe+Concrete）即收集信息來拓寬對問題的了解然后再進行“分析抽象的模型”（左上角格子Interpret+Abstract）去制作問題模型來更清晰的看到現象的本質和規律。
在這個階段，“世界并不清楚他想要什么樣的設計”—— Paola Antonelli
在開始階段之所以要抽象出問題模型，是因為作為設計師不能單純的聽從人們的訴求。當生活中出現一個問題時，生活中人們往往不太清楚自己煩惱的本質是什么，要么他們只看到了問題的表面，要么他們被太多因素混淆了。因此在這個階段，設計師的責任就是去分析問題存在的環境與原因，并且以人為中心的角度去分析表象下人們的真正需求。也是因此，避免以技術為中心的分析（machine-centered-research）而選擇以人為中心的研究（human-centered-research）才是交互設計師應有的職責。
在做以人為中心的研究時，收集和分析信息時避免內隱偏見（unconcious bias）是非常重要的。這里指由于生長在固定社會和文化下的而無意識帶有的偏見，比如身體健全的人忘記考慮殘疾人的需求，或者經常用電子產品的人下意識認為一些復雜操作很常規。在設計里，歧視不止包括在搜集用戶信息時忽略了個別群體，同時也包括設計師本身所帶的特定視角。一個成功的設計縱然應該滿足大多數人的需求，但是一個向善的設計也不應該忽視特殊群體的情況。這里不得不提到，雖然現如今很多設計往往依靠大數據來進行設計，但是大數據本身就代表著忽略少部分群體的需求，導致少數群體的歧視愈發嚴重，甚至一度威脅到一些小眾的題材。因此在調研時考慮到人種，年齡，經濟情況，教育程度，是否殘疾，和對科技的熟悉度可以更嚴謹的分析不同視角下問題的影響。
左下角常用的用戶研究方法有情景調查（contextual inquiry），利益相關者邏輯圖（stakeholder map)，和參與型研究(Participatory Research)等等。左上角常用的分析方式有帶入虛擬人格（persona）和流程圖（journey mapping）等等。
右側的兩個階段則代表問題的未來態或者設計原型態（prototyping）。右上角的 （model of what "could be")代表問題的未來的可能性，也就是一般說的設計和構思部分，而右下角的（what “could be”）就是將這些未來的可能性做出來，從概念化為產品。
然而如何從右上角的抽象模型到右下角具體設計呢？在這里便需要了解一個大致的設計信息層級。
如圖所示，一個設計的是由多層結構組成的，從抽象到具象分為五個階段，策略（Strategy），內容（Scope），結構（Structure），框架（Skeleton），視覺（Surface）。一個嚴謹的設計應該是從下而上發展的（從深層的策略到淺層視覺），并且每次在考慮深層的策略時應該避免淺層的干擾。這是因為淺層只是策略的表現的方式，而深層策略才是決定產品核心價值的關鍵。決定策略（Strategy）時應該直接依據模型左上角“問題的本質”來決定要設立什么樣的產品目標。只有策略定了，才能確定這個產品的內容與受眾群體。假如目標是讓盲人點餐，那么內容有可能就是在這個頁面提供特殊的菜單形式和電話快捷鍵。而假如目標是讓人聽音樂，那么內容可能就是提供音樂推薦與保存。而在結構方面，確立內容后只需要一個完善的邏輯，比如用戶的具體使用流程是什么，就可以快速具現這個產品的結構。最后，框架和視覺階段則更多只是一種表現手法的選擇。無論最終選擇如何設計，只要保證框架和視覺元素在整個產品中保持一致并且符合產品定位即可。
從策略到視覺的過程也就是模型中從右上角到右下角的過程。每個設計師的目標都應該是以具象的產品實現相對抽象的策略。而要想讓視覺和策略緊密聯系，就應該盡可能在每一步的過度時都考慮到前后步驟的銜接是否邏輯通順，避免層與層之間脫節的現象發生。盡管在現實中，層與層之間的分隔往往沒有這么清楚，但是這種分層的設計邏輯可以作為一個有用的構思框架，讓設計師在發散思維的時候不偏離目標。
而最后即便到了右下角的產品產出，一個完整的設計流程也不算結束。一個成功的設計總是需要多個設計迭代的。盡管在每一個一個迭代中，右下角可能是最終產出，但是在一個完整設計流程里，右下角還應該連接左下角，將已經完成的設計再一次進行分析和測試并總結出優缺點，再進行下一輪的設計。
在右上角的設計部分中經常使用的方法有故事模版（story boarding），紙質低保真模版（paper prototyping），和以人為中心設計（human centered design）等等。
總而言之，橋型模型作為國際人機交互院校最常用的模型，從多個角度描述了從一個問題從研究到解決的過程。我們可以看得出，設計從來都不是一個隨性而為的過程。從左側的無偏見而系統的分析問題到右側的遵循結構進行設計，設計師都應該在一個嚴謹的框架下進行思考和設計，這樣才能做到有針對性的解決問題。在這里也希望大家能多多關注各類人機交互設計理念并從中獲取靈感亦或找到適合自己的設計流程。
下面是六種其他主流國際人機交互模型和官方鏈接供大家探索：
1. 尼爾森諾曼集團設計流程 （Nielsen Norman Group）
研究問題領域（discover），探索不同可能（explore），測試設計（test)，和傾聽反饋(listen)
官網鏈接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf
2. 斯坦福大學設計學院設計流程（Stanford Design Thinking Process）
抽離問題(empathize)，定義問題(define)，尋找靈感(ideate)，制作原型(prototype)，測試成品(test)。
官網鏈接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf
3. 《情景化設計:為生活而設計》 中的設計流程 （Contextual Design: Design for Life）
理解問題(understand)，發明未來(invent)，情景話設計(design)，制作原型(validate)，和開發產品(develop)。
書本鏈接：https://www.goodreads.com/book/show/33805307-contextual-design
4. IBM環形設計模型 （IBM Loop Model）
觀察(observe)，反思反饋(reflect)，和制作（make）。
官網鏈接： https://www.ibm.com/design/thinking/page/framework/loop
5. 英國設計協會雙鉆石設計模型（Design Council Double Diamond Model）
發現(discover)，定義(define)，制作(develop)，傳遞(deliver)。
6. LUMA 學院設計流程（LUMA Institute Design process）
看(looking)，理解(understanding)，制作(making)。
官網鏈接： https://www.luma-institute.com/about-luma/luma-system/
以上就是本篇的全部內容了，希望大家讀完后能對國際主流人機交互領域多了一些了解或者從中獲取一些啟發。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：騰訊ISUX團隊 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
平時用QQ音視頻來做什么呢？和好友聊天？與家人聯系？還是工作開會？現在你有了新選擇，解鎖視頻娛樂新方式，QQ一起派對讓你不必出門，也能和好友一起玩聚會游戲。
挖掘更好玩的娛樂社交場景，能帶給用戶更愉悅的體驗。疫情期間，線下聚會因此受限，線上娛樂應運而生，在此契機之下，期望借助音視頻實時互動、聲影重現的特性，開啟了新的娛樂形態——QQ一起派對。
觀察競品普遍存在不足之處，即缺乏真實聚會游戲的氛圍與互動。因此，解決社交游戲產品缺少真實情境的問題，成為QQ一起派對的創新機會點，有利于在競品中突圍，塑造差異化優勢。
QQ一起派對是基于音視頻展開的線上聚會游戲，結合了實時互動與娛樂化內容。為了讓游戲過程更貼近真實聚會場景，我們從游戲氛圍和自然交互兩方面切入，尋找創新突破口。
游戲氛圍
構建適用于游戲類型的界面框架，讓線上聚會更貼近真實世界，并運用視覺感染力，營造環境氛圍，包括場景具象化、增強代入感等方法，實時感知好友的情感變化，從而獲得社交臨場感，在心理上感到彼此的存在。
自然交互
有別于競品需通過點擊按鈕作答，QQ一起派對利用實時語音識別，讓用戶通過更自然的人機交互方式，在游戲過程中進行語音搶答，彷佛置身于真實世界中與好友互動，成為QQ一起派對的獨特賣點（Unique Selling Proposition）。
綜上所述，QQ一起派對的設計要素包括：、
1. 社交臨場感（Social Presence）：場景具象化、高度同步實時響應、感知他人情感變化
2. 沉浸感（Immersion）：營造氛圍、增強代入感、突出內容與主角
3. 可玩性（Playability）：游戲界面、游戲機制、游戲互動
4. 凝聚力（Cohesion）：將好友聚在一起、吸引更多用戶來玩
舞臺場景化布局
QQ一起派對能讓用戶創建房間，邀請好友參加線上聚會，促使游戲氛圍具象化。游戲類型聚焦于〝你演我猜〞、〝明星問答〞等猜題游戲，為了增強代入感，讓用戶融入情境之中，我們采用舞臺表演的界面隱喻（Interface Metaphor），借由深色背景突出內容與表演者。界面框架選擇一個大畫面與多個小畫面的組合，更貼近輪流上臺表演的游戲類型。通過舞臺場景化布局，模擬線下互動的真實感。
我們真實還原了線下搶答的互動體驗，通過倒計時動效、實時分數標簽，以及搶答成功反饋，增添游戲的緊張感與刺激感。
在游戲過程中，除了通過視頻畫面感知好友的情感變化，用戶的語音狀態也會實時反饋在頭像上，響應搶答題目、好友交談，以及各種表達情緒的聲音，借著聲音視覺化的效果，搭配視頻與人聲的重現，交織出多層次的感官體驗。
發送邀請是召集好友的重要途徑，而作為〝邀請函〞的消息，需要傳達明確的信息，讓用戶一眼就能感知房間內的狀態，包括準備開始、游戲中、游戲結束等，避免用戶點擊加入游戲時，卻因游戲已開始或結束而無法加入。為此，我們將邀請消息實況化，持續更新當前狀態、參與成員等，讓用戶能實時感知派對房間的變化。
QQ一起派對初期聚焦于好友一起玩，但仍不免發生創建了房間，當下找不到好友，或因等待過久而退出房間的狀況，使得創建房間到實際參與的轉化率受到影響。從用戶訪談結果來看，用戶存在排解寂寞的心理訴求，但對象不一定得是熟人好友，因此渴望找到游戲伙伴、快速開始游戲，成為QQ一起派對擴展至陌生人玩法的契機。
針對找不到好友的問題，我們新增了匹配陌生人的能力，用戶可從游戲大廳進行隨機匹配，倘若創建房間后找不到好友，也能在房間內匹配玩家，降低游戲參與門檻。
此外，進一步優化房間內的界面布局，將游戲卡片縮小平鋪排列，讓用戶一眼就能看到多款游戲，提升對游戲數量的感知與轉化率。在游戲類型上，新增了猜歌與知識問答兩款游戲，并提升現有題庫質量，避免游戲趣味性不足，影響用戶留存率。
為了增強游戲氛圍，我們通過情感化設計帶領用戶進入情景中，讓用戶更好地理解每個玩法，并從游戲玩法與情感訴求提煉出場景元素，以此搭建游戲世界觀，并將故事情節加以推演，增強趣味性與獨特性，還能進一步提升記憶度。
光效有利于吸引和聚焦視線，并以不同的表現形式來影響情緒。我們從光的色彩、動效、光感和造型等層面，創造出五種增強感官體驗的光效設計，將其應用在游戲大廳入口，借由不同的光效類型與動畫形態，強化用戶的世界觀感知。
帶有情感的故事會在記憶中發酵，引領用戶進入場景。我們將游戲入口的功能屬性，轉化為富有故事性的場景設計，當用戶被故事所吸引，多感官區域被激活，將會激發用戶情緒，有利于記憶與理解游戲入口，對游戲產生共情，進而超出產品的功能價值，與用戶建立情感鏈接。
例如匹配陌生人入口，使用QQ的IP形象駕駛UFO，準備召集用戶前往神秘的太空之旅，意味著通過陌生人匹配，你將擺脫寂寞，以光速般的速度找到游戲伙伴、快速開始游戲。通過故事劇情激發情感共鳴，并適當結合IP滲透品牌價值，吸引用戶參與游戲。
破格設計能夠加強張力、突出游戲主題，我們運用破格效果的3D圖標造型，彰顯游戲的獨特調性，樹立鮮明的品牌印象。
組件化除了提高設計效率，還能從整體一致性考量差異化。我們將游戲卡片、題庫卡片、提示卡片和入口卡片等功能界面，構建一套組件系統，讓框架布局貫通全流程，打造體驗一致的可玩性，利于后續的擴充與延展。
根據游戲可玩性研究，提供挑戰與磨練技巧的機會，對持續參與游戲的動機有正面影響。有鑒于此，除了提供隨機匹配、召集同好共樂，我們還設計了極限生存戰玩法，希望借著1v1淘汰賽制增添樂趣與挑戰性，激發用戶持續參與的動力，特別是年輕人酷愛這種競技感，擊敗的對手越多，獲得的獎勵就越高，有利于勾起用戶的勝負欲。
為了營造同場競技的臨場感，我們利用匹配動效強化氛圍。隨著已加入玩家的數字不斷增加，底部會實時展示用戶頭像，具象化呈現玩家數量，烘托熱鬧氣氛，消除等待時的焦慮感，讓用戶處于蓄勢待發的狀態，而紅藍對戰布局則進一步強化PK宣戰的氛圍。過程中若有玩家遭到淘汰，用戶也能通過底部頭像感知剩馀玩家數量，以此增強游戲臨場感與成就感。
每輪擊敗對手時，答題區域將變為全屏的慶祝畫面，搭配撒花特效、頭像聚光燈，營造歡愉的勝利氛圍。而在游戲結果頁，我們同樣利用色彩和動效的差異對比，塑造勝敗雙方的情緒氛圍，以此增強榮譽感與儀式感。在生存戰登頂挑戰成功的用戶，將會站上頒獎臺授予最高榮譽，在舞臺聚光燈的照耀下，迎接光榮勝利。排行榜有助于強化擊敗眾多好手的感知，激發勝利者的分享欲。
QQ一起派對推出后深受用戶喜愛、獲得廣泛好評，調研結果顯示，用戶整體評價相當高，也樂于將QQ一起派對推薦給好友。
綜而觀之，音視頻除了廣泛應用在通訊場景，正逐漸賦能更多創新場景，而娛樂場景更成為兵家必爭之地。QQ一起派對開啟了新的娛樂形態，充分發揮音視頻聲影重現的獨特優勢，消弭了空間距離，嘗試解決社交游戲產品缺少真實情境的問題，讓游戲過程更具臨場感，就像面對面進行游戲一般。未來將從玩法豐富性、游戲挑戰性、題庫可玩性三方面持續優化，打造更好玩的音視頻體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：騰訊ISUX團隊 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
距離業界首次提出“全鏈路設計師”這個概念已經過去了幾年，從稱謂的變化我們就可以感受到設計師這一角色職責的變化。在近幾年的產品設計工作中，我們和上下游之間的協作越來越緊密，介入階段越來越往前，新的趨勢對設計師也提出了更高的要求，包括更深入的產品思考，對用戶的時時洞察，高效的溝通合作，以及細致的質量把控等等。那么如何成為一個全能型的互聯網設計師呢？本文以日常工作流程為路徑，為大家整理了一波實用小技巧和小工具。希望能夠幫助大家在保持設計的專業度的同時，在工作的方方面面都能夠得心應手。
有效的設計積累讓我們事半功倍。養成隨手記錄的習慣，逐漸形成自己的素材庫，不僅能夠讓我們在需要的時候能夠快速檢索靈感，偶爾回顧也總能有新的感受。
字體識別神器：WhatFont
當你想知道一個設計精美的網站設計使用了什么字體時，可以安裝一款叫做 WhatFont 的瀏覽器插件，開啟時鼠標 hover 到文字上即可快速識別出字體、字號、字重、行高和顏色。對于不習慣使用控制臺的朋友來說非常簡單實用。
插件最新的版本停留在 2017 年，不過在大部分網頁上都是可以正常使用的。同類產品還有 Fonts Ninja 等，除了識別字體還可以收藏和管理字體，可根據你的需要進行選擇。
用戶體驗設計檔案: UXArchive
該網站收集了來自世界一流的科技公司的產品用戶體驗流程。例如，你正在設計“忘記密碼”體驗，需要參考時通常都是打開不同的 App 一個一個體驗和截圖。而通過這個網站，你可以根據場景快速瀏覽其他公司的示例，對比不同的解決方案。
地址：https://uxarchive.com/
素材管理: Eagle
Eagle 應該是很多設計師耳熟能詳的素材管理產品了，它支持圖片和視頻等基礎格式，有豐富的標簽系統和智能分類功能。此外還支持可視的字體管理，也能夠預覽 PSD 格式（常用的圖形和文稿格式基本都支持），可用于放一些 mockup 素材。自動解析圖片色板，從而允許按顏色搜索也是相當實用。
地址：https://cn.eagle.cool/
靈感速記: Flomo
Flomo 是一款非常輕量的筆記工具，用類似發微博的方式快速記錄一些知識片段。相比 Eagle 用于“剪藏”已有的內容，Flomo 更注重主動創造和記錄。產品的功能目前非常簡單，但背后的「卡片筆記法」理念很有意思，提倡先快速積累卡片，然后通過標簽和關聯讓結構涌現，積累知識的復利。感興趣的朋友可以了解他們對于“知識管理”的思考。
地址：https://help.flomoapp.com/weekly/orgin
當我們進入到產品設計工作中時，了解用戶往往是最重要的前提和基石。大公司的團隊往往有專職的用戶調研團隊來協助產品設計，但對小型一點都團隊可能用戶調研這個流程是全部歸到設計師角色里的。而且即使有專門的用研報告，直接觀察用戶的行為和描述往往是最直觀的，也更容易洞察到問題和機會。這里介紹兩種我們常用的低成本的方法。
用戶反饋什么: 七麥
如果你的產品是一個成熟的上架了各大應用商店的 App，可以通過一些第三方平臺看到各應用商店的評分評論匯總，構成和趨勢，也可以將自己的 App 和競品放到一起對比。例如我日常使用的“七麥”，可以通過微信訂閱每日評分變化，也可以導出指定時間段的評論的匯總表格，做更深入的檢索和分析。
用戶談論什么: 微博
商店評分和用戶反饋通常的內容通常比較有針對性，大部分都是圍繞已有的功能。如果想要看到用戶在生活中如何使用我們的產品，使用過程中有什么樣的情緒和感受，看他們如何理解在用的這個東西，則可以去社交平臺上搜索產品的關鍵詞，常常會有些很有趣的發現。據說早期微信的剪刀石頭布的想法就來源于一個微博用戶的分享。
來到我們最熟悉的設計實操階段。設計類工具非常多，Sketch 和 Figma 也都有相對豐富的插件市場，這里選擇了幾個我們日常使用的小工具來進行分享。聰明地使用已有資源，可以幫助我們呈現最好的設計概念。
Mesh Gradient 網格漸變工具
一款 Figma 插件，Illustrator 里強大的 Mesh 功能在 Figma 里也能用了。做好的漸變還可以保存下來多次復用。
Runner Pro
如果你主力使用 Sketch，習慣鍵盤操作，熟悉各種指令名稱，而且有完整的組件庫，那么 Runner Pro 將會是一個很好的 Sketch 助手。它的使用方式就像在 Mac 中使用系統聚焦搜索，通過一個搜索框即可快速完成組件插入，指令運行，插件安裝，以及快速前往某個畫板。
Runner 的組件搜索支持中文，但對于多個關鍵詞的模糊搜索還是對英文支持比較完整。
Blush 插畫插件
一個由 Pablo Stanley 設計的免費可商用的手繪風格的插圖庫。任務造型有數十種選項可供選擇，可以自定義角色的頭發、褲子、膚色等等，無需打開 Illustrator 即可創建獨一無二的插圖。適合用來做運營插畫，拼用戶故事版，PPT配圖等。
地址：https://blush.design/zh-CN
另外也有越來越多的設計師開始用 Figma 的原型功能直接做 PPT 了，順應這個趨勢他們還提供同系列的 ppt 模板，一鍵套娃。
POSE 人體姿勢參考
在自己畫人物插畫的時候，如果對人體動作和比例難以把握，那一定不能錯過這個插件—POSE。它是我發現的用于創建解剖學和身體插圖的最佳工具。Gal Shir 在 Behance 和 Dribbble 上都有眾多的粉絲，這是他在 Snapchat 做插畫師時創作的軟件。
地址：https://galshir.com/pose/
動畫曲線預覽
細膩的動畫能夠讓體驗更有溫度，這個網站提供了五種簡單的網頁版式和最基礎的三組動畫曲線，你可以選擇最適合你的 demo，體驗不同動畫曲線在實際頁面上的感受。底部還可以調整具體參數來達到想要的效果。
地址：
需求過程中我們需要反復和上下游溝通，在這個階段里設計稿是解決方案的可視化呈現，是中間產物，首先要滿足方便溝通和傳遞的訴求。方案定稿后，交付的則是產品的設計藍圖，首要確保方案的完整性，要能夠拆解和執行。
Design Project Template
這是由 Dropbox 團隊整理的設計項目模板，可以從 Figma Community 中復制一份使用。每份設計稿都包含基礎的項目信息，責任人，進度等概覽信息，尤其對于直接和開發、產品經理共享 Figma 稿件的團隊而言很好地保留了相關的上下文信息，提升項目溝通效率。
設計協作工具 XSHOW
XSHOW是一款由 ISUX 研發的高效設計協作平臺，通過其官方 Sketch 插件，你可一鍵將設計稿上傳到云端，XSHOW 會保留完整的版本記錄和成員操作。上傳到云端后分享給開發人員即可在線查看標注，多端預覽。除此之外 XSHOW 的團隊管理還可以控制權限時效，這一點在敏感項目對外合作的場景下可以說非常實用了。
地址:
https://xshow.tencent.com
還原自檢 Window Resizer + Zeplin
Window Resizer 是一款 Chrome 插件，正如其名就是可以把瀏覽器窗口固定到指定尺寸，可用于檢查網頁的自適應策略，或截特定尺寸的圖。
我們常常配合標注工具 Zeplin 的疊圖功能使用。將瀏覽器設置為和設計稿相同的尺寸，再將半透明設計稿疊上去即可一眼看出網頁是否還原到位，還有哪些地方需要調整。一圖勝千言，再也不怕開發哥哥說“看不出來”了，顯著提升了溝通效率和團隊和諧氣氛。
使用示例: 上層為設計稿，下層為對應瀏覽器尺寸的實現效果。
圖片壓縮工具
如果仍采用非在線的較為傳統的交付方式，通常需要導出為圖片發給對方。有時輸出網頁設計或者完整流程交互稿的尺寸較大，可以多做一步壓縮工作。一來同步方案的時候合作方更容易打開，另外需要導出多個版本時占用我們自己電腦空間也比較少。
如果圖片在 5M 以內或者需要批量處理，可以用 ImageOptim 或者 Tinypng 應用來進行無損壓縮，通?？梢詼p少 60-90% 左右。但如果圖片尺寸超過 5M ，使用以上兩個應用耗時較長而且容易失敗，此時可以試試在線壓縮網站 https://compresspng.com/，即使是超過 20M 的大圖也可以穩定壓縮。
Rotato 動態 Mockup
Rotato 提供了很多常見的動態 Mockup 效果，只要將你的設計稿放進去（圖片或視頻皆可），即可快速實現高端大氣的展示效果，支持非常完備的蘋果設備以及部分主流安卓設備，效果包括界面的反轉，拉近，滾動展示等。
地址：
https://www.rotato.app/mockups
設計上線后效果如何？有效的驗證能夠幫助我們有目的持續迭代精進。
AB 測試用戶樣本計算小工具
AB 測試，也稱為分桶測試或分批測試。AB測試本質上就是把平臺的流量分為為幾個不同的組進行實驗，然后觀察不同組的用戶數據指標，例如：點擊率、次日留存、人均觀看時長等等核心指標，最終選擇一個更有效的實驗組上線。
在開始設計實驗之前，需要明確實驗的目標。基于假設方案中的元素個數，AB 測試可以分為單一變量測試和多變量測試。這里以單一變量為例來進行簡單的說明，如何進行流量分桶。我們推薦這個免費的小工具，來進行流量分配：https://www.evanmiller.org/ab-testing/sample-size.html，根據實驗的預期結果，大盤用戶量，來確定實驗所需最小流量。
以騰訊文檔里面某一個按鈕的點擊率為例，目前大盤點擊率為5%，預期實驗能夠提升0.5pp。
這個工具還可以進行很多其他維度的流量配置，感興趣的同學可以進行深入的研究。我們希望大家在設計的同時，能夠大膽創新的提出假設，然后進行科學的驗證，從而得到一個更有效的設計。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：騰訊ISUX團隊 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
Meet more beautiful colors.
在《騰訊文檔-構建科學有效的色彩系統》這篇文章中，我們闡述了騰訊文檔如何升級了新的品牌色，為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和品牌認知，以及如何構建一個科學有效的調色板。
在設計系統的實際運行中，我們也需要著眼于如何應用調色板，建設協同工作流，并給各個角色提供有關色彩的擴展指導，以達到在騰訊文檔中構建一致且有品牌感的數字界面并有效提升效率的目的。
在建設騰訊文檔色彩系統的工作中，我們首先構建了一個包含品牌色、灰色、輔助色的調色板，但僅有這個調色板不足以支撐我們流暢、無障礙的協同工作。日常工作中，“這里我用哪個藍色？”“這里我用哪個灰色？”“開發同學能否快速的變更某些元素的顏色？”等等問題層出不窮，建設系統的協同工作流迫在眉睫。
HIG強調不要在APP中使用“硬代碼”，即十六進制色值進行編碼，但前期我們構建的調色板僅有色值，這種硬代碼應用到app中導致項目效率低下，維護也會成本激增。
于是在騰訊文檔中，我們開始采用顏色變量（color token）和主題（theme）來管理顏色，顏色變量（color token）基于任務（role）、主題（theme），為UI中的任務指定十六進制代碼的色值（hex value），以弭平設計師之間、開發與設計師之間的溝壑，將顏色變量（color token）嵌入設計組件中與開發代碼形成聯動，便于開發利用程序中的變量來做全局修改，橫向提升團隊的協作效率。
所謂顏色變量，通俗的意思就是可以將一個顏色按任務用途去抽象，抽象成一個有命名的顏色樣式，這個顏色樣式就是顏色變量。
在設計或者代碼中，可以通過修改這個顏色變量的值來進行全局顏色的更新。例如，我們現在需要給button一個顏色，不要將其寫為 #1E6FFF這樣的色值，而是將button的顏色指定為命名是Fill-01的顏色變量， 如果有重大版本更新，僅需將顏色變量Fill-01的色值更新，即可實現全局顏色的高效更新。如果在不同的主題下（例如淺色/深色模式）button有不同的顏色表現，顏色變量Fill-01可以在不同主題下，映射不同的十六進制色值。這就是我們建設協同工作流的的基礎邏輯。
調色板的各個色值（hex value）是最底層的基礎樣式，我們將色板上的顏色進行規則化命名，以方便后期將其引用到顏色變量中。
騰訊文檔包含核心藍色、藍灰色、中性灰色及其他輔助色，按照顏色屬性，將其命名為：Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red，并在命名中加入色階后綴。
*騰訊文檔調色板命名圖表
1、 從調色板中選擇合適的顏色并測試
從調色板中根據UI中的任務挑選合適的顏色并進行可用性測試，做具體任務中顏色選擇的最優解。
例如，我們需要選擇一個藍色作為鏈接色，作為文本，對比度必須達到4.5:1以上才符合WCAG2.0的可用性標準。經過測試我們選擇了primayblue-02作為鏈接色。
騰訊文檔的界面中，灰色系列占主導地位，起著至關重要的作用，為產品界面創造結構、表達邊界、建立信息層次。在調色板中，我們選擇了兩種灰色：中性灰色和藍灰色，來支撐系統的設計。藍色系列是騰訊文檔產品和體驗的主要動作顏色。
同時我們也使用了其他顏色以滿足一些沖突性任務（警示等）的顏色使用，這些顏色需要謹慎、有目的地使用。
經常會有設計師問，“這里我能用這個灰色嗎？”出現這種問題，根本上還是顏色使用規則定義的不夠清晰，含混的口口相傳的規則會導致更多的混亂。于是，需要我們根據任務和使用場景把顏色的使用規則清晰的定義。
首先定義在界面中占主導地位的灰色、藍色的使用規則。
在騰訊文檔中，藍灰色與品牌藍共同建立品牌印象，由此，藍灰色主要應用于與風格相關的場景。包括：圖標色、填充底色及大面積的背景色等。
中性灰色主要應用于一些全局系統行為。如：文本、分割線及交互反饋hover、press等場景。
品牌藍色主要應用于系統中的各種行為，如藍色圖標、button、文本鏈接等。
其次定義在界面中用于警示、狀態提醒的其他顏色的使用規則。
紅色主要應用于系統中需要警示的場景，如紅色警示圖形、錯誤文本、紅色tag等。
在騰訊文檔中，會針對不同的任務應用不同的顏色，如左滑操作、成功提示、高亮顯示等。
在騰訊文檔中，不同的品類有不同的基準色。
定義了顏色在系統設計中的使用規則后，我們需要根據顏色變量的使用用途對其進行語義化命名。一套好的語義化命名規則需要易于維護且具備可拓展性，如果只是將調色板的色值命名為 blue-01、blue-02... ，語義化的收益并不明顯。哪天設計團隊需要調整品牌風格，或是蘋果又掀起什么新潮流，把所有命名為 blue_x 的變量改為 gradient_serenity， 對于開發來說也是巨大的災難。
根據 HIG 的建議，語義化命名不應該描述外觀或者色值，而是指明這個顏色的任務用途——標簽 Labels，分割線 Sepatators 或者填充 Fill。
在思考如何賦予顏色語義化的命名時，設計師也需要用更概括和結構化的視角來看待界面設計，同時也需與開發同學達成一致，使用同樣的命名，滿足以更好地維護一套收斂和統一的設計語言。
在騰訊文檔中，顏色的任務用途定義為為以下幾種：背景色 Background、文本色Text、圖標色Icon、分割線 Border、透明填充 Transparent fill 、實色填充 Opaque fill 、默認交互反饋 Feedback、語義 Intent。統一使用ultrastrong、strong、medium、weak、ultraweak作為后綴來表達顏色強度。在需要更明確的用途說明的任務中，直接描述其用途，例如：hover，pressed、disabled等。
以上種種，最終目的在于建設團隊的協同工作流，將顏色變量（color token）嵌入設計組件中與開發代碼形成聯動，便于設計利用變量及組件、開發利用程序中的變量來做全局修改，橫向提升團隊的協作效率。
在設計系統中，顏色變量屬于底層的設計原子，需要將其生成為顏色變量并嵌入到設計組件中，便于設計內部使用。我們將已根據任務用途命名的色值，生成figma中的顏色樣式（color style），后續無論是進行組件的設計，還是項目的設計，都可以直接賦予設計元素明確的顏色樣式。
我們生成了一個面向內部、外部的顏色變量表，進行顏色變量的說明和信息的同步，沉淀落到實處的資料文檔。（此處推薦使用騰訊文檔，多人協作實時溝通～）
最終形成了設計組件庫與開發組件庫的聯動，構建了一個協同工作流，橫向提升工作效率。
上篇的調色板設計后，一直在醞釀這篇調色板的實際應用。在設計一個較為復雜、龐大的產品時，提效是永恒的課題。痛過、踩過坑的設計師應該深有感觸，溝通的無力、推動的困難都推動著我們發動自己的能量去想辦法提效。
設計師們可以在自己的項目中與開發同學多多溝通，嘗試這種方法，去建設更高效的色彩設計系統。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：騰訊ISUX團隊 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
交互文檔，是一份用來解釋項目交互方式、內容、規則的說明文檔，也叫 DRD ( Design Requirement Document )。
在過去的分享中，我們有解釋過，B 端項目會包含大量的交互內容，需要前期繪制交互原型來展示和確認交互方案。
如果是比較簡單的小型項目，或成熟產品的小迭代，那么這樣的連線圖確實就足以表達交互的意圖和方案了，寫太多注釋文字反而會畫蛇添足提高觀看者的認知成本。
但是，如果項目和展示的流程內容，邏輯非常復雜，包含非常多的選項和狀態，那么單靠原型和連線是絕對不夠的，添加更多的圖文說明就變得非常有必要了。
同時在團隊協作場景中，就需要將這些內容制作成一份規范的 “文檔”，用來進行統一的展示、備份、歸檔。
所以做交互光靠畫交互原型是不夠的，“文檔” 就成為必要的輸出成果。
在產品側（非開發），文檔就有好幾類：
- 商業需求文檔:BRD,Business Requirement Document
- 市場需求文檔:MRD,Market Requirement Document
- 產品需求文檔:PRD,Product Requirement Document
- 交互說明文檔:DRD,Design Requirement Document
- 設計規范文檔:DGD,Design Guidline Document
BRD 和 MRD 是一個產品經理行業內部也在反復科普討論的東西，和我們沒多大關系可以暫時忽略。設計規范文檔 DGD 大家應該也有概念，比較容易辨識，也不需要在這里強調。
而產品需求文檔 PRD，是和交互文檔最撞臉的文檔類型。它們的文檔規格、樣式幾乎一致，還包含大量界限模糊、相互交叉的內容范疇，會對新手的理解造成很大的不便。
要理解產品文檔和交互文檔的核心差異，就得從他們各自的工作職能說起，產品經理的主要產出是解釋產品要做的功能和邏輯，所有的原型和連線的目標都是為了解釋功能本身。
部分產品經理會 “順帶” 在這個基礎上增加交互的元素，以及相關的說明。這恰恰是問題的關鍵所在，因為產品經理制作產品原型的過程是可以覆蓋一部分交互信息的，所以很多設計師也天真的認為交互內容是應該由產品來出的。
這當中一定要關注里面的 “順帶”，因為一份有效的 PRD 主旨一定不是以交互為核心的，在面對需要大量圖例、連線、方案、解釋的交互問題下面，產品經理往往選擇直接跳過，只把功能描述清楚，剩下的就交給交互設計師還是 UI 設計師來完成具體的交互方案。
所以，交互文檔就是在產品文檔的基礎上，進行交互內容的補充，專注于解釋項目的交互內容，讓設計師和前端開發可以更直觀得理解后續的工作內容。
來自 UEDART 的付費文檔，案例地址：http://vip.uedart.com/interactive.html
交互文檔和產品文檔是相互獨立和補充的，當產品文檔無法完成對產品交互的有效解釋時，我們就應該選擇輸出獨立的交互文檔，來提升項目協作的效率。
主流的交互文檔輸出有三種方式：
1. Axure/墨刀 導出
2. 一般文檔制作
3. 線上 Wiki 記錄
Axure 和墨刀是用來制作產品原型的軟件工具，也是目前在產品經理、交互設計行業中應用最廣泛的原型工具。
它的主要優勢，在于可以比較方便的制作可交互的組件、連線、導出。
當然，光制作原型圖并不能叫交互文檔，它們還提供了比較全面的內容標注、文本記錄、圖形繪制的功能。
這就可以讓我們完成原型繪制以后，結合頁面結構的管理，添加交互文檔所需的其它信息，并最終輸出文件。
而在一些比較傳統的行業或外包領域，使用的記錄文檔往往要使用 Word 或 PPT（方便開會演示或要打?。?。這就要在原型完成以后，導出原型圖例，并使用這些文檔軟件進行文字的記錄和連線。
受限于 Word、PPT 的布局限制（強行分頁），使用它們做交互文檔是非常難受的，并且這些文檔需要保存到本地，存在各種文檔版本管理的問題。
所以還有另一部分也希望使用普通文檔格式記錄，并滿足云端同步、備份、版本管理的團隊，就會使用 Wiki 類的工具來制作交互文檔。如語雀、飛書、Confluence、Notion 等工具。
如果只是一些比較小的項目迭代、一次性使用的交互文檔，使用前兩種方法都可以勝任。而真正大型、系統性的交互文檔，往往都使用團隊內部的 Wiki 進行創建和管理。和設計稿不同，這些使用了內部賬號或需要內網訪問的文檔資料，是不會沒事發到網上來分享的，這也是在網上找不到完整交互文檔的主要原因。
和你們網上可以找到的大多數交互設計干貨不同，我即不推薦你們使用 Axure/墨刀 來畫原型，也不推薦用它們或普通文檔、Wiki 的形式來輸出交互文檔。因為：
—— 太低效了！
產品經理和交互設計師的主要產出物就是文檔，自然可以耗費比較多的精力和時間去制作原型和編寫內容。而 UI 設計師的主要工作肯定是最終的視覺界面和交付，所以用最復雜的方法去制作交互文檔，顯然是不合理的。
同時還要提一句，Axure/墨刀 等軟件用來制作一般的線框圖原型，效率實在是太低了。且絕大多數情況下的頁面跳轉、交互都是可以忽略不做的。而且隨頁面增加，它的左側導航層級、數量會非常龐大，導致查找和瀏覽的效率進一步降低。
在我自己的所有課程和分享中，我始終都建議直接使用你們正在用的云端 UI 設計軟件直接繪制產品、交互原型并輸出文檔，如即時設計或 Figma。
原因包含：
- 速度快：能用 Axure 五分之一的時間完成所有原型繪制
- 可復用：做好的原型方便復用，而且可以直接在原型上完成后續設計
- 交互性：對于表達交互流程所需的基礎跳轉和動效都能滿足
- 更自由：一些需要復雜圖文結合的說明方式不再受到普通文檔布局限制
比如下面這樣的原型案例，就可以通過一個簡單的鏈接快速分享出去，或者添加團隊成員自由查看。
在我過去長期的實踐體會中，這種方式是優勢最明顯，效率最高，最易懂，也符合 UI 設計師工作需要的。如果項目中有其它因素要求，你們也可以選擇前面的方式輸出。
任何文檔的目標都是為了書面記錄和讓看的人更容易理解我們要表達的信息，不要被固定的方法局限住，要努力去探索適合團隊當前場景的方式。
前面把基本的信息聊完了，這里就來具體講講交互文檔應該如何進行輸出。
當然，輸出交互文檔前需要先理解交互是什么，交互設計的具體設計內容和步驟。交互文檔是對你已經設計出來的方案的書面記錄，你不能在對交互一無所知的情況下強行編寫文檔。
交互文檔制作首先要確認文檔的記錄內容和文檔結構。
記錄內容指的是你在該文檔準備放哪些交互內容進去，并不是每次項目設計都要把項目所有頁面和流程交互都重做一遍。
比如一次中等規模的迭代，新增幾個通用的列表頁面，調整了一些細節字段，增加了一個功能流程。那么文檔重點記錄內容肯定就是流程而不是所有頁面。畢竟通用的列表頁和細節更改，在產品需求評審階段就可以完整的解釋，而功能流程則不行。
如果是全新的項目，包含數十上百個頁面。把所有流程、頁面的交互內容全部表現出來的工作量是頂不住的，在繪制原型的過程中，你就會發現有大量的重復頁面、流程和交互。所以制作文檔就要有目的性的對重復的內容進行合并，以及只保留重要的頁面和流程。
具體該放什么要考慮項目的實際情況，需要設計師自己評估。除此以外，標準的交互文檔里面會包含背景介紹、編輯日志、文字圖例、業務流程、名詞解釋、頁面結構等等。
這些 “文縐縐” 的細節，并不是必備的，你可以根據當前場景自己決定需要加哪些。比如項目、業務背景前面的產品需求已經講清楚了，業務流程、名詞解釋團隊成員也都了如指掌的時候，那么這些頁面模塊就完全沒有放的必要。
并且，基于前面對放置內容的考慮，結構的順序并不一定要類似下方案例，完全按照產品的導航目錄來走。
所以，根據一個中等規模的迭代項目，我會制定一個這樣的一級文檔結構。
- 基本信息：項目的簡單信息，快速目錄，參與人信息等
- 基本組件：涉及的相關組件展示和交互規則說明
- 原型一覽：本次迭代涉及的所有頁面原型和連線一覽
- 流程介紹1：流程1的所有頁面、狀態、說明展示
- 流程介紹2：流程2的所有頁面、狀態、說明展示
- 流程介紹3：流程3的所有頁面、狀態、說明展示
每個1級文檔結構對應 UI 軟件中的 Page 目錄，力求所需的 Page 數量越少越好，而不是像 Axure 的做法一樣密密麻麻的。
結構可以根據復雜程度做進一步的細分，它像寫文章的大綱一樣，幫助我們提前規劃好后續完成文檔所需的內容和工作量。
有了結構，就要在對應的 Page 中填充內容了。其中一般的文字介紹、流程圖、思維導圖，只要正常輸入或將導出的圖例黏貼進來就可以。
而針對具體的交互內容，流程解釋上，則重點處理連線和標注說明。比如下面是我自己在課程演示中的一個簡單的交互流程演示案例。
在 UI 軟件中，制作連線其實是很簡單的事情，只要畫出一個直線，再設置箭頭和尾部圖形、描邊色彩和粗細即可。
然后，將該線段的圖層放置在畫布之外，起點放置在觸發交互的區域之中，終點尖頭則緊貼目標畫布的邊緣（不用特意延伸進畫布內）。如果使用水平、垂直的方式連接兩個畫布，那就可以雙擊進去添加錨點制作 90 度的折角。
連線的應用是非常簡單的操作，不要舍近求遠通過插件或是其它的一些功能來實現。而除此之外，我在文檔中添加的解釋性文本主要有兩種，交互事件和交互規則。
交互事件代表了連線的兩個頁面是如何被觸發跳轉的，所以我會在線段中帖一個文字卡片，解釋觸發的條件和交互操作是什么。
然后，就是頁面或流程中的交互細則，包含兩個部分，數字標簽和對應文字注釋。它們都是用 Auto layout 可以快速制作出來的組件，每次要做備注的時候，只要復制標簽到頁面上，設置對應的數值，再將右側的文字卡片復制到頁面旁邊，再加上對應的數字、內容信息即可。
在設計軟件中，畫布的自由度極高，你想要怎么備注和添加內容都沒關系，只要在內容翔實的基礎上保證 —— 團隊成員能看懂，就是一份優秀的交互文檔。多在繪制過程中和同事溝通，優化展示的做法，可以避免很多會出現的問題，進一步加速我們的制作效率。
將文檔全部做完以后，最終就是關于交付和協作的問題了。
既然我們使用線上的 UI 軟件來完成交互文檔的制作，那么文件設置公開訪問權限，再分享鏈接自然是最簡單的辦法。
但每次項目分享個網頁鏈接，或者并行有好幾個項目，需要其它成員自己去收藏網址，也是挺麻煩的。所以盡量充分應用軟件中的團隊協作功能，通過創建一個團隊，添加成員，讓他們自行查看當前文件目錄中的交互文檔。
查看過程中，團隊其它成員可以通過評論的功能對交互內容進行糾錯、提問、建議，方便我們進行優化改進。
通過這種簡單高效的文檔協作模式，我們可以非?？斓猛瓿烧w交互內容的定稿，并開始后續的工作。
再回到前面的話題，我們是 UI 設計師，不是全職交互設計。原型文檔輸出完了，下一步可是要做視覺界面的，所以交互文檔就可以不用管了嘛？
交互文檔的最佳狀態是 —— 應用最終界面圖例解釋交互內容。
也就是當我們把所有頁面內容設計完成后，強烈建議將界面的展示和交互文檔進行整合。除了前端和產品可以看到最終的交互落地效果外（有時候最終設計和前面的交互不一致），還可以直接通過這個文檔查看界面數值標注，而不用往返于交互和設計文檔來回切換，這才能讓文檔作用最大化。
以上就是關于交互文檔的相關解釋。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網上對介紹導航文章已經有很多，有部分已過時，今天自己再重新整理一遍，方便自己也方便更多人理解。
如2、社區產品引導用戶發帖子
如3、凸顯核心功能，如百度地圖、高德等
優點：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：UX設計筆記 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
視覺設計排版：
第一步，先把文字內容做好排版；
第二步，思考場景設計與信息層級處理；
第三步，進行排版設計的布局；
第四步，最后做好色彩和細節的優化，從整體出發到細節處理再回歸整體性的原則，做好包裝的設計展示。
一 格式塔原理在排版中的應用
格式塔原理是 20 世紀早期的德國心理學家研究小組發現的人類視覺工作原理。人類視覺是整體性的，我們會對看到的事物自建結構，并且在神經系統層面上感知形狀，圖形和物體。「形狀、區域」在德語中是 Gestalt，所以這些理論也就叫做視覺感知的格式塔原理。
格式塔原理的設計原則如下：
1. 鄰近性原則
物體之間的相對距離會影響我們認知它們的關系。相互靠近的元素被認為是一組，那些距離較遠的則自動劃分為組外。整體看來，距離近的關聯性更緊密。
下面左圖中的圓相互之間在水平方向比垂直距離近，那樣我們看到了4排圓點，而右圖看成2列。
如何應用于UI設計：
鄰近性原則，在網頁端或移動端的排版布局中有非常廣泛的應用。設計師應用此原則，調整距離或者用分割線等來分開不同設計模式的構建。此原理應用在設計中，界面層級好，視覺清晰。
按照原理，我們會將內容相似的元素位置放置得更接近，在 UI 設計中的卡片化設計，列表組合等信息整合設計都會應用到此原理。并且不同內容之間我們使用分割線，留白，卡片區分等方式來使不同的內容區分更為明顯。
2. 相似性原則
格式塔原理中的相似性通常和鄰近性原則一起運用在產品設計中。它指出了影響我們感知分組的另外一個原則：有共同視覺元素的物體看起來更有關聯性。我們傾向于將看起來相似的對象視為一組或者一個模式，并且將它們與特定含義或者功能聯系在一起。
如何應用于UI設計：
利用顏色，形狀，大小，方向，以及紋理等視覺元素，組成相近的樣式。UI 設計規范中的控件組合成的組件，大部分都會使用到相似性原則，統一視覺樣式，來表達統一的功能性。
3. 封閉性
人的眼睛在觀看時，大腦并不是在一開始就區分各個單一的組成部分，而是將各個部分組合起來，使之成為一個更容易理解的統一體。這個統一體是我們日常生活中常見的形象，如正方形、圓形、三角形等，讓用戶容易理解。
如何應用于UI設計：
這個原則也非常適用于圖形用戶界面的圖標設計或界面設計中
4. 連續性原則
人的視覺具備一種運動的慣性，會追隨一個方向的延伸，以便把元素連接在一起成為一個整體。下圖是兩個交叉的圓弧軌跡，人們往往傾向于使視覺流跟隨著相同顏色的軌跡，而不會被干擾，我們能夠感知這是兩條弧線。
如何應用于UI設計：
連續性目前在 app 產品中應用非常廣泛。比如在電商產品中 banner 區域的左右滑動交互模塊，滑動組件和進度條展示。
主要應用范圍如下：
1 導航欄中的連續性設計
2 卡片模塊中的連續性設計
3 模塊的連續性設計
5. 主體/背景
我們的大腦將視覺區域分為主體和背景 2 個部分。這個特征有利于我們對重要信息和次要信息的感知。
主體和背景的區別可以從以下兩個方面來控制：
1 場景大?。何覀儍A向于將處于大場景中的中間小區域部分視為主體，而大場景視為背景；
2 層級關系：如果在同一個平面中，我們傾向于將處于視覺第一層級的物體視為主體。
如何應用于UI設計：
此原則可以幫助設計師在設計界面的過程中抓住用戶注意力，并且讓用戶優先看到我們想讓他們看到的事物。比如重要信息的彈窗提示，以及弱化背景從而突出內容等界面中都有運用到此原則。
二 移動端版式設計原則：
版式設計，在有限的版面空間中，將版面構成元素，如：文字、圖片、線條和顏色等，根據特定的內容，進行組合排列，并運用造型要素及形式原則，把構思與計劃以視覺的形式美感，表達出來。
一個優秀的排版要考慮到用戶的閱讀習慣和設計美感，幫助用戶區分重點、提升可讀性。遵循平面設計原理，排版中的對齊、對比、重復、親密性 4 大原則。
對齊原則
對齊是版式設計的最重要的原則之一，對齊可以建立一種整齊的外觀，帶給用戶舒服的一致性的瀏覽體驗?；趶纳系较?，從左到右的閱讀習慣，應用在界面設計中，一般是左對齊、居中對齊和右對齊，同時同一豎線上的元素，要保持居中對齊。
對比原則
做排版設計時，重點的元素通過尺寸、色彩、造型等引起用戶關注，這樣重點內容，才會突出出來。設計要有輕重緩急之分，不要讓用戶去找重點，Don't let users think，讓用戶順利的接受重要信息。
例如：圖片大小的對比，讓用戶感受到最重要的信息。
親密性原則
根據親密的原則來組織復雜的信息，將彼此相關的同一類的元素靠近，同時把遠離不相關的元素，這樣就可以大大提高界面設計的可讀性。
三 作品集排版法則
設計排版法則：
1 左對齊
在頁面排版時，將你的文字設置為左對齊。為什么？在西方文化中，人們的閱讀習慣是從上到下，從左到右的。通過左對齊文字，眼睛能夠更容易地找到邊緣，更易于閱讀。避免因為這個原因縮進段落的第一行。
2 使用一種字體
優秀的設計師在排版設計中能夠完美使用兩種字體，是因為他們能夠把握和了解所選的字體的類型，并保證他們是互補的。
但是一般情況下，避免使用兩種相同類型的字體。例如，不要使用兩種以上的非襯線體、粗襯體或手寫體。
使用一種字體，直到你能夠很好的運用和掌握它。如：蘋方字體或Dinner字體。
3 跳過一個字重
在改變字體權重時，從細體到粗體，或者從中粗體到超粗體。大師級的設計關鍵就是對比。
粗體和細體對比的標題字體組合，獲得最大的對比。
4 雙倍字號尺寸
當改變字號大小時，一個好的經驗法則是，你使用的字號大小是現有字號的兩倍或一半。
5 對齊到一個軸線
沿著一個主坐標構建你的字體排版，并將字體元素對齊到網絡線。無論文字類型或大小如何，在垂直軸上，字體對齊軸線的左邊緣。在水平軸上，尋找最佳水平元素，或對齊文字的大寫字母字高，或對齊文字基線即可。
6 使用條框分類
使用形狀/線條將相關的內容信息塊進行分類編組。這樣會使不同的元素排列很有順序。
7 注意間距
段落排版中到處都是間距。如果文字左對齊。右側會出現文字的參差不齊、起伏留白等。避免在段落的最后一行出現單字成行的情況，切勿使用強制對齊設置。
注意段落右側的起伏形狀，在一個句子中標點符號之間使用單個空格，以避免形狀和角度不美觀。
間距的重要性。越是間距接近的元素，讀者就會假設在不同的信息塊之間存在這一種關系。
最后推薦 優秀設計師的作品排版 ：
如下圖：來自國際化設計師 MIKE 的設計作品
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：峻溪POINTVISION 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
這些年里，這款工具進行了快速的迭代和更新，響應設計師們的需求，不斷完善功能，成為設計行業推薦率（NPS）最高的軟件之一。
尤其是作為一款優秀的買斷制軟件，不僅定價合理，甚至 5 年來 ￥199 的售價分文未漲。
而我同期開始用的 Ulysses（用它寫了兩本書，寫過的公眾號內容超100W字）、MindNode、Notability 等，全都在這期間從買斷制改成訂閱制，甚至訂閱價格還逐年上漲？？
我從來不吝嗇于贊美優秀的軟件工具，尤其是保持初心以純粹的產品功能來服務用戶的那種更甚。五年前我作為最早就推薦它的人之一，五年后我不介意再夸它一次。
它就是 —— Eagle。
Eagle官網：https://cn.eagle.cool/
前面說過，Eagle 是一個設計資源管理器，它可以做的事情非常多，但我不是要在這里寫功能介紹的，而是來分享一下，我都用它做了什么。
圖片采集是我使用 Eagle 的核心目的，他包含豐富的采集形式完美覆蓋我的實際使用需要。
第一類采集形式就是通過瀏覽器插件或截圖工具，將網頁中看見的圖片下載到本地。
第二類采集形式，則是通過粘貼花瓣或 Pinterest 的畫板地址，批量采集該畫板的所有圖片。這是我最喜歡的功能，沒有之一。
花瓣和 Pinterest 這類網站，真正的精華是優質用戶自己收錄的圖庫，而不是直接搜索出來的結果。批量采集，就是讓我在找到優質圖庫后，用最簡單的方式下載這些被精挑細選出來的圖集。
因為批量下載很方便，我可以很快的針對同一類目收集出成千上萬的內容。但同一個類目下載那么多圖片或素材有意義嗎？
數量從來不是我追求的目標，我會將任何類目的內容數量進行精簡，只保留其中最精華的一小部分，即使它們是由一批最優秀的設計師收藏的圖庫，我也只取精華中的精華。
但是，光靠一張張圖看過去打星再篩選，會把我累死。于是，我就會利用 Eagle 的篩選與排序功能，快速剔除劣質內容，縮小選擇范圍。
比如之前我分享過的 UI 配圖的素材，包含十幾個顏色的分類和上千張精選圖片。原始圖片超過五萬張，是我從上百個攝影畫板里批量采集下來的。
應用到大小、尺寸排序，色彩篩選，星級篩選等多種手段配合，幫助我快速篩選出各自質量最好的 100 張圖片。而這前后大概只用了兩小時的時間。
通過前面兩個功能，我收集和篩選了海量的靈感元素。但這么多元素我們不可能無序放置，需要根據一定的規律進行編組和管理。所以這里就要分享 Eagle 的資源管理功能了。
Eagle 的資源管理包含三個方向：
1. 普通文件夾：類似電腦文件夾的邏輯，可以進行排序和上下級設置，收納
2. 智能文件夾：通過一定條件設置，篩選出對應圖片和素材的動態文件夾
3. 分類標簽：即可以作為分類來使用的標簽系統，可以為一張圖片或素材打上多個分類標簽
我的資源管理方法論一直崇尚的是極簡主義，能用普通文件夾管理的情況我就一定不用智能和標簽。不是說這些功能不好，而是因為它們需要對素材進行二次的處理和維護，只有在必要條件下才會使用。
我的素材資源管理是首先構思我會用到的幾個大類，每個大類下會包含幾個二級分類，即 Eagle 中的1級文件夾，然后再創建對應的文件夾并命名和添加色彩，比如下面示例。
不要奢望一開始規劃分類能做到盡善盡美，只要大的方向上確定了，然后再根據日常收集的需要慢慢去添加下級文件夾，而這一級就沒有那么嚴格的限定，用到哪加到哪。
只有在一些非常特殊類目下，我才會去為圖片和素材增加標簽，而不是為了打標簽而打標簽。比如我收集的學員作業也存在 Eagle 中，會包含課程期數、作業類型兩個維度，我就需要用標簽進行管理，方便我后續進行跨文件夾的查看與篩選。
除了基礎的靈感圖片外，我還往里面存了很多其它文件素材，包括但不限于下面這些種類。
Eagle 能作為一個設計資源管理工具，并不是因為可以添加文件夾和標簽，再實現一遍 MacOS 的資源管理功能。而是因為它支持多種文件格式的快速預覽。
它比 Mac 自身的快速預覽更高效（后面會解釋），同時作為雙系統用戶，我得以在 Windows 系統下如下圖快速查看素材預覽，而不是安裝格式支持零碎的插件（或流氓軟件）來實現。
尤其是 Sketch、XD、Mindnode 文件，有了縮略圖，就不用通過打開源文件來查看內容。并且字體文件支持在目錄中直接啟用和停用，可以非常方便的實時管理本地字庫，保證我在設計軟件中只會出現必要的字體，而不會全部顯示出來。
Eagle 還有個特別的功能 —— 網址記錄，這也是我最常用的功能之一。
早前有先用 Pocket 然后轉移 InstaPaper 和 Cubox 來收錄網上看到的優質設計文章，方便我需要引用原文和整理思緒的時候回看。
雖然最后采用的 Cubox 也是一個優秀的稍后閱讀工具，但長期使用下來我還是想盡量打開少的軟件來完成我的工作。所以，自然而然的，我還是把網址全部遷移回 Eagle 中。
只要安裝 Eagle 瀏覽器插件，我就可以快速收集網址到 Eagle 目錄中，之后隨時進行查看。
可能有的同學喜歡用網頁整頁截圖來收集文章，只是我不太喜歡用圖片格式查看文本，所以這個根據個人喜好即可。
同時，我不止拿 Eagle 管理靈感和素材，也直接拿來做項目管理。
在 Eagle 庫文件進行團隊同步以后，針對每個項目創建獨立的項目文件夾，用來收錄相關的文檔、靈感圖、情緒版、配圖和設計文件。
尤其是項目前期收集靈感圖和情緒板的階段，多人共同收集和編輯的結果可以最方便的查看和進行評價，非常好的優化我們的協作流程和效率。
作為一個設計講師，要觀察學生的作業和進行點評。自然而然，我也會優先將所有作業添加到 Eagle 中去。
通過對每份作業前期的打分，標注，來進行后面點評課程的分享和講解。
同時，這些收集的作業，需要在后續其它場景中作為正、反面的案例。所以對作業的評級和標簽就變得必要起來，在相關場景下通過創建智能文件夾快速篩選出范圍內的圖例。
以上就是我使用 Eagle 最重要的 7 個場景，雖然實際應用還遠遠不止它們，但因為篇幅關系就先介紹到這里。
Eagle 作為一款被我長期使用和推薦的工具，不僅僅是因為上面的使用場景，它們是結果。所以，我要從更底層的角度，來解釋它的不同之處和特點。
從上線以來，Eagle 有一個飽受誤解和詬病的底層設計，就是它的 “素材包” 文件 .eaglepack 。用戶需要先創建一個 “庫“，之后添加的所有素材、文件，都會被保存到這個庫文件中去。
換句話說，相當于 Eagle 在你的電腦中創建了一個特殊的文件夾，用來保存你置入的文件。即使你添加的素材是已經下載到本地，它也會再 “復制” 一份到這個庫中。
很多設計師對這個邏輯感到很費解，為什么本地存的好好的，Eagle 要再復制一份，完全就是浪費系統資源和時間的做法。如果無法理解這個邏輯，就是不具備 ”產品思維“ 的特征之一。
我們先從和多人舉例的 Bridge 和 Lightroom Classic 講起。
它們的運作機制，是通過運行該軟件，來讀取你的硬盤目錄和對應文件。使用它們并不會額外復制文件出來，即使你在軟件中置入素材，它們也只是幫助你正常保存到硬盤的對應位置。
為什么這類工具會被我們放棄，有下面這些原因：
第一，它們的核心一直都不是全領域的設計資產管理，而是圍繞在 Adobe 體系下的照片、視頻、矢量圖等多媒體項目素材管理，尤其是攝影相關項目。
第二，就像對比 Photoshop 相較與 XD 一樣，龐大的軟件體積和功能，對啟動速度和硬件資源消耗帶來沒辦法忽視的負面影響，降低操作的效率。
第三，就是比較值得深入思考的地方，那就是管理范圍太廣。直接讀取硬盤就是讓所有文件夾被暴露在管理器中，多出大量非必要的目錄和文件，嚴重增加我們的決策成本和管理成本。
范圍太大或自由度太高并不是什么好事，就像 iOS 的相冊一樣，它是個封閉的圖片庫，不像安卓一樣讀取其它硬盤文件夾，從而讓相片的管理更簡單明了。
自由雖然可以做更多事，但這些沒有必要的可能性增加就只會變成決策和行為中的負擔。簡潔明了，才是高效的前提條件。
第四，就是設計文件的 ”預覽效率“ 問題。不管電腦的性能怎么提升，大型位圖的渲染都是非常消耗資源的工作。不管是動輒幾 G 的 PSD 素材文件，還是高達幾億像素的超清圖片，加載都是需要等待的。
比如下方目錄中的作業文件，因為很多同學導出畫布不考慮圖片質量尺寸，所以往往會出很多 1W*1W 像素以上超過 30M 的位圖。
當這么多大型位圖聚集在一起，Bridge 完全加載出它們的縮略用了整整 2 分鐘的時間……雖然 Bridge 會讓你覺得久第一次打開慢以后就好了，這個功能的代價是生成了大量的 ”緩存”，即這些縮略圖會暫時保存到緩存文件夾中。
緩存文件都只是過客，在你格式化系統，換另一臺電腦打開，或者緩存超過了上面設置的 50G，那么舊的文件就會被刪除，你還是要重新加載該文件的縮略圖。相信我，超出緩存容量是非常容易的事，即使你加到 100G 也一樣。
Eagle 的庫特性，是在添加素材進庫之前，會生成一個對應的縮略圖文件，之后 Eagle 讀取素材列表的時候就是加載這個只有幾十 KB 不到的小文件，而不是解析原圖。
這種策略帶來的幫助除了在文件夾之間切換高效自如，也對本地內存的壓力有非常大的緩解。
在一般資源管理中，一個文件夾內有幾千張高清圖片時，持續滾動到目錄底部就會發現越來越卡，因為占用的內存越來越多，直至達到臨界點釋放掉上方列表加載的內容（上滾會重新加載）。相信有用相機的同學一定很了解這種感受。
綜合各種問題和影響，自建庫，并為每個素材生成不會被刪除的縮略圖就是最好的選擇。
這不僅僅是 Eagle 一個工具的做法，即使 Adobe 也在 Lightroom 應用了相同的策略，新 LR 導入圖片素材到它的自建庫中進行管理，同時生成縮略圖用于列表加載（降低高像素調節延遲）。而老版的 LR 雖然還沒下架，但為它增加 Classic（古典） 的后綴，所以它們認為哪種做法更有潛力，你們自己也能判斷了對吧？
今天我們使用的絕大數軟件都是 SaaS（微軟：基于web的軟件服務），自帶聯網備份和同步，但是 Eagle 只能保存本地卻不符合我們的 “習慣”，這是為什么？
因為成本是沒辦法控制的，重度用戶成百上千 G 的硬盤占用，是不可能輕易使用云服務來實現同步的。這些動輒幾 G 的 PSD 文件或其它大型設計文件，會讓整個同步過程充滿不確定性和沖突。
同時，云同步是一種成本特別高的服務類型，和一般的云存儲空間不是一種概念，想要大容量又要免費，是不可能的。Adobe 同步盤 1T 容量港區售價 68 港幣，蘋果 iCloud 同步盤是 2TB 68 元/月。
算起來他們的價格并不貴，但一定要清楚 Adobe 和蘋果云都是為了自家生態服務的，而且作為軟件業巨頭有自己的大型數據中心，降低云服務成本。類似 Eagle 這樣的初創團隊是不具備這種條件的，即使推出了，價格也不會便宜。
可能還有人會對比花瓣 Pro，它就支持云同步。但是，花瓣 Pro 只是官方網站的本地客戶端，更方便的訪問自己的官網個人中心，無法收集和整理圖片以外的其它素材，所以同步起來容易。
Eagle 的數據就只能保存本地，或者保存在笨拙的移動硬盤內，隨身帶著嘛？肯定也不是。
庫文件的另一個管理好處，就是方便做備份。在今天同步盤服務逐漸成熟的環境下，你可以選擇購買類似 Dropbox、堅果云這類同步網盤，通過它們實現備份和多設備同步。
或者，可以購買群暉、威聯通、極空間為主導的個人云盤硬件，實現空間更大、更靈活的使用體驗。
如果有同學不知道怎么同步的，我會在后面分享。
最后一點，就是對蘋果 ARM 架構的適配了。在 Eagle 2.0 版本中，快速適配了 Mac 的新硬件架構，從而讓軟件的運行、讀取效率遠遠高于上一個版本，做到了絲般順滑的地步。
對軟件本身的優化也是速度的保障之一，相信 Bridge 用的多的同學一定忽略不了它無處不在的延遲與卡頓。
Eagle 如果要進行網絡的備份和同步，那么一定要分清楚同步盤、網盤、移動硬盤的區別。
其中，網盤和移動硬盤基本上是一樣的，它們的使用特點就是我們要主動把要保存的東西，拖拽進硬盤目錄內。移動硬盤備份速度還好點，網盤的備份就要非常久的時間。
如果你有兩臺電腦，使用移動硬盤的方案就得一直隨身帶著，用哪臺插哪臺上。非常容易在第二天忘記拔掉，然后回公司的時候沒庫可用。使用網盤的方案，那就更不可能的頻繁的備份和在另一臺電腦中下載。
類似 Dropbox 或 同步盤工具，就是用來解決這類問題的。簡單點說，同步盤的原理就是本地安裝一個同步軟件和云端的服務器進行通信，這個同步軟件會綁定相關的本地文件夾。于是，這個文件夾內有任何文件的變更，同步軟件就會自動把變更的軟件傳輸到服務器上。
而同步盤的特點并不是只能客戶端和服務器一對一傳輸，而是可以多對一同步。如果服務器內容更新，它就會把更新的數據實時推送給其它客戶端，更新它們本地的文件。
通過這種模式，就能實現自己多臺設備，或者團隊多個成員設備的文件夾實時同步，無需你手動進行操作。
當然，同步盤對服務器的資源占用與消耗遠遠大于一般網盤，所以基本只有付費的工具，而這種帶給我們生產力的提升和數據安全的預算是有絕對必要的。
如果使用蘋果的同學，可以通過將 .eaglepack 保存到關聯 iCloud 的文件夾即可（最好“文稿”里）。蘋果系統就會自動開始同步，其它 Mac 電腦就能實時接收。 默認的空間肯定不夠用，建議開通 200G 容量的服務。
如果用專業同步云軟件，以堅果云舉例，下載完客戶端，只要完成關聯包含 .eaglepack 的文件夾，那么該文件夾就會啟動同步。再在別的電腦中安裝堅果云，就可以把該文件夾下載下來并自動同步。
我收集靈感素材是非常有目的性的，比如一個項目需要的配圖素材，我會一口氣去收集幾十張覺得合適的圖。
Eagle 有一個瀏覽器的采集插件，這個插件非常好用。只要拖動瀏覽器的圖片，就會出現對應的采集彈窗，把鼠標移動到對應目錄上就可以完成采集。
如果你覺得整個頁面的圖片都想保存，也可以在插件圖標中使用批量收藏按鈕（或快捷鍵），就可以采集整個頁面中的所有圖片，以及通過尺寸篩選對應尺寸。
應對日?？吹降膬炠|作品、靈感圖，也可以非?？焖俚膶崿F采集?？梢宰罘奖愕氖占{我們自己的采集資料。
作為移動端 UI 設計師來講，收集日常見過的優秀 APP 界面，是必要的職業素養。而使用 iPhone + MacOS 再結合 Eagle 的話，這個過程就會變得非常的簡單。
首先以完整頁面收集為例，之前看過不少人推薦使用 iOS 的跨設備復制圖片到 Mac 中黏貼的操作，是完全沒有必要的，因為一次只能復制一張截圖。
你要做的就是開啟相冊的云同步，日常使用 iPhone 時把想要收集的頁面進行截屏即可。每過一段時間，在電腦的相冊中打開 ”截屏“ 相冊，就有你這段時間收集的所有截屏?？蜻x相關內容，拖進 Eagle 對應文件夾中就完成收集，然后再刪除原圖。
而且因為相冊特殊的機制，直接拖拽出的圖片是壓縮后的版本，讓截圖的文件的體積大幅度縮小，從3M 變成 300K（完全夠看），非常好的降低硬盤占用量。
除了收集頁面，更重要的 UI 靈感是頁面中的 ”組件“，我們需要根據組件為目標去收集相關的案例。直接拖進整頁截圖的方式就不太合適，比如下面的瓷片區案例區。
所以，我們要開啟 Eagle 的自帶截圖功能，并設置好你覺得順手的快捷鍵。
記得打開第一個選項 ”彈出分類“，就可以每次截圖后選擇指定的文件夾。不管是你的截圖，還是網上的其它案例，你都可以用最高效的方式收集這些組件樣式，輕易搭建自己的組件靈感系統。
前面講過，我會用 Eagle 來放 Mindnode 這類思維導圖文件。但是，Mindnode 先創建保存，再拖進 Eagle 的步驟太麻煩了。
所以，我正常新建并保存 Mindnode 思維導圖會到它默認文件夾中，然后使用 Eagle 的文件夾檢測功能關聯它，之后所有保存的文件就會出現在 Eagle 的目錄中。
之后，我編輯和查看老的 Mindnode 文件就在 Eagle 中進行了。這么做的好處，還可以讓我使用 Windows 系統的時候能夠正常預覽思維導圖。
Eagle 是可以管理字體的，我把所有正在用或收集的字體都放進了 Eagle 的字體文件夾中。
可能你們會有疑問字體丟進字庫就行了，還管理它們干什么？或者說有字由之類的字體軟件，用 Eagle 干什么。
一方面是我會盡量精簡使用工具的數量，另一方面，就是使用團隊同步盤的時候，我們的團隊字庫是統一的，隨時可以找到啟用的，最快解決其他人的設計文件字體缺失問題。
同時，當我在使用 UI 軟件設置字體覺得選擇起來太困難時，就會去關閉掉大多數最近不會用的字體。實現這個操作非常的簡單，只要新建 ”智能文件夾“，并添加選項 ”字形文件“ 和 ”已安裝“，那么啟用的字體就會全部出現在這個列表中。
用一兩分鐘的時間就可以批量選擇你想要停用的字體，右鍵停用即可，它們就會自動從智能文件夾中消失。你可以一直保留這個智能文件夾，每次清理只需要一兩分鐘時間。
目前上方截圖中的很多案例還不是最終的完整版，最近上海疫情居家隔離，大多數工作暫停中，我在閑暇時就開始重新整理 Eagle 庫。因為以前堆積了很多冗余的東西，所以這次我把整體素材都導出后重新進行整理中，也是為什么會寫這篇內容的原因。
Eagle 帶給我最大的價值，就是為我和團隊節省了海量的時間，讓我有可以更快的找到參考素材，更快的整理分類，更好的同步項目文件。
上面分享的很多體驗和總結，都是在 5 年來長期使用中一點點摸索，適應，并形成習慣的。任何工具的使用與自己工作學習的結合，都是漸進磨合的，每個人都可以在這個工具中挖掘出適合自己的用法。
但依舊要給大家一個建議，不要為了收集而收集，也不要沉迷與堆積素材的數量，讓它為我們服務，恰到好處的出現在我們的實踐過程中。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn