眾所周知，人機交互是一門集調研，構思，設計和測試為一體的學科。作為一門覆蓋多領域的多學科，包括并不限于心理學，行為學，編程，工程，設計，調研，和工商管理，現代人機交互的核心已經不再是從技術層面去解決問題， 而是側重于以多個視角去挖掘問題的本質并思考問題背后的價值。也因此，人機交互學術界一直以來都試圖尋找一種思考模式，或者理論模型，去將復雜的思考流程提煉出來。
近三十年來，人機交互領域的方法論可謂百花齊放，盡管許多知名研究機構與院校都發布了不同的設計模型與流程圖，但是其內核終究大致相同（尋找問題——定義問題——設計——測試）。
以下是近年來國際最主流的七種人機交互設計模型：
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咨詢、用戶體驗公司、軟件界面設計公司
什么是形式呢，就是組件在相同的功能和元素下，排版、視覺的呈現方式。形式的對比，就是在一個頁面中，不同組件的呈現方式上是否能形成差異化，讓頁面看起來更豐富多元。
分析上方的案例，組件之間并沒有拉開差異性，尤其在詳情頁中，劇情簡介和觀眾影評，影人和劇照，設計形式接近一致，這就是一個不好的開端。
再看看一些擁有相同問題的設計案例：
仔細點觀察就會發現，作為飛機稿，不是圖片、顏色用得花哨就夠了的，組件缺少差異性，設計感就完全無法體現。如果還沒法理解，就再看看下面幾個案例，是不是就沒有形式強行重復的尷尬，表現得更合理：
所以針對作業中的問題，我們在這個基礎上進行完善，第一步要做的就是在形式上做出區分。所以我們可以通過以下幾個思路來調整第一頁：
- 頭部分頁器和下方的上映/即將上映過于近似，控件形式上需要作出區分
- 圖片太多，模塊左右邊緣都是圖片，導致看上去呆板，要減少圖片出現的面積
- 底部新聞部分不能繼續使用大圖模式要作出調整
第二頁的調整上，主要在下半部分
- 演員和劇照應該有更加明顯的差異
- 評論和上方的簡介這兩個不同的組件，形式上卻看起來完全一致
通過原型上的調整，就可以得到一個初步改版的樣式，各個組件之間保證足夠的差異化和識別性，可以觀察看看是不是比原來的頁面更合理了。
色彩對比是很關鍵的對比，色彩決定作品給人的第一印象。那么如何為色彩做出對比呢？無非就是鮮艷對比淺色、暗色對比亮色、暖色對比冷色，不用特意套用配色的理論，用比較直觀的感受判斷就可以。
開始配色的過程中，我們首先需要確定主色和背景色，原圖中的主色棕色和背景色白色，搭配起來的效果給我們的感受并不強烈，所以我對原色的棕色做一定范圍的調整。
然后把主色添加到原型中，并為相關的一些元素添加合適的輔助色。先看第一頁添加后的效果。
然后我們再為原型增加配圖，這里要重點關注，以 “作品” 角度切入的話，配圖也是整個界面元素的一部分，包括它使用的色彩。如果一個界面中出現了多處需要應用配圖的地方的話，那么不同的模塊所使用配圖的風格和色彩，也應該有一定的對比，而不是一種風格擼到底的。比如還是之前的這個錯誤的案例：
所以根據這個原則，我們加入配圖后再看看效果：
如果頭部我們用了色彩主體比較強烈的配圖，那么在下方就應該用比較平淡簡約的，做出明確的對比。
在第二頁中也應用一樣的方法，那么思路如下：
- 頭部作為權重最高的組件顏色要更突出
- 頭部背景和封面的顏色應該具有更大的對比，并能讓文字更容易識別
- 頭部、劇照圖片較豐富，所以在影人和用戶頭像中應該使用更簡單的配圖
整體增加配圖后的效果：
到這里已經有了大致的設計效果，已經可以明顯感覺到比之前的設計有更好的提升，但是，對比不是到這里就結束了，我們接著往下做。
文字對比是最容易被忽視的細節，很多設計師都認為文字只要看得清就行，樣式變化越少越好，這是非常錯誤的思路。
文字樣式的多少主要取決于文字段的類型和需要重點體現的內容數量，而不是沒有理由的精簡到最少。例如看一篇排版成熟的期刊或是論文，其中標題、副標題、正文、引用、標注等作用不同的文字段，都會有不同的樣式來幫助我們去區分，如果從頭到尾出現的所有文字都應用一樣的格式，那么就毫無可讀性。
文字的對比，主要通過以下幾個屬性表現：
- 字號
- 字重
- 色彩
即：越重要的文字字號越大、字重越高、色彩越深，權重越低的則反之。
回到我們的案例，在原型階段，其實我已經對文字做出了簡單的對比處理，下面我們要進一步細化這個步驟。
修改的分析大致如下：
- 分頁器作為權重最高的文字段，所以模塊標題不應該比它更顯眼
- 多段文本比標題類文字權重低一級，可以統一它們的樣式并比標題稍弱
- 注釋類文字比多段文本再弱一級，用較低的灰度
- 為評分、點贊數、展開等有“特殊性質”的文本增加色相
然后我們可以看看下面修改前后的對比：
通過正確細化文字的對比以后，就能真正讓頁面精致起來，具備豐富的細節。當然，對于文字權重的安排和思考會根據不同的思路和產品需求得到不同的樣式結果，但絕對不能忽略這個過程。
通過正確細化文字的對比以后，就能真正讓頁面精致起來，具備豐富的細節。當然，對于文字權重的安排和思考會根據不同的思路和產品需求得到不同的樣式結果，但絕對不能忽略這個過程。
投影的使用既是視覺樣式，也是一個用來制造景深的技巧。只要在一個扁平的界面中，為任何一個元素添加了投影，那么這個界面就存在了上下的空間關系，處于上方的元素就會得到凸顯，例如蘋果官方應用中的案例：
既然是空間關系，就要有前后的落差對比，我們要為最重要的元素增加投影，而不是把它當成設計風格進行統一的添加。所有元素都帶上了投影，就沒有了對比，可看性也會大打折扣。
所以，在這些頁面中，需要突出的元素分析如下：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn