眾所周知，人機交互是一門集調研，構思，設計和測試為一體的學科。作為一門覆蓋多領域的多學科，包括并不限于心理學，行為學，編程，工程，設計，調研，和工商管理，現代人機交互的核心已經不再是從技術層面去解決問題， 而是側重于以多個視角去挖掘問題的本質并思考問題背后的價值。也因此，人機交互學術界一直以來都試圖尋找一種思考模式，或者理論模型，去將復雜的思考流程提煉出來。

01

————————

主流交互模型

近三十年來，人機交互領域的方法論可謂百花齊放，盡管許多知名研究機構與院校都發布了不同的設計模型與流程圖，但是其內核終究大致相同（尋找問題——定義問題——設計——測試）。

以下是近年來國際最主流的七種人機交互設計模型：

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）。

02

————————

橋型交互模型

橋型模型是美國 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）等等。

總而言之，橋型模型作為國際人機交互院校最常用的模型，從多個角度描述了從一個問題從研究到解決的過程。我們可以看得出，設計從來都不是一個隨性而為的過程。從左側的無偏見而系統的分析問題到右側的遵循結構進行設計，設計師都應該在一個嚴謹的框架下進行思考和設計，這樣才能做到有針對性的解決問題。在這里也希望大家能多多關注各類人機交互設計理念并從中獲取靈感亦或找到適合自己的設計流程。

03

——————————

其他設計模型

下面是六種其他主流國際人機交互模型和官方鏈接供大家探索：

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)。

官網鏈接： https://www.designcouncil.org.uk/news-opinion/what-framework-innovation-design-councils-evolved-double-diamond

6. LUMA 學院設計流程（LUMA Institute Design process）

看(looking)，理解(understanding)，制作(making)。

官網鏈接： https://www.luma-institute.com/about-luma/luma-system/

04

——————————

結語

以上就是本篇的全部內容了，希望大家讀完后能對國際主流人機交互領域多了一些了解或者從中獲取一些啟發。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系。 



作者：騰訊ISUX團隊    來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

動效是用戶體驗的重要組成部分，也是產品調性的重要體現。如今動效設計也有了更多的解決方案，如Framer、Principle、Flinto、Protopie等，這些軟件在制作交互原型時，確實有更輕量便捷的優勢，但效果也有一定的局限性，或者要求使用者有代碼基礎，比較適合有針對性的人群。而After Effects作為動效軟件的鼻祖，以其強大的兼容性、效果豐富性和清晰明了的圖層操作邏輯深得設計師們喜愛，不論是UI、運營還是多媒體類型的設計都能滿足，無疑是目前最具有普適性的動效軟件。本文從AE的插件、操作以及落地三個方面，為大家整理了一波實用技巧，希望能幫助大家在工作中更加得心應手。

——————————

Part 1. 便捷靈活-不容錯過的精品插件

工欲善其事必先利其器，不論是AE還是其他軟件，好的插件都能配合軟件本身達到事半功倍的效果。這里介紹十款AE上不容錯過的精品插件。

1.1 文件導入

AE與PS有很好的兼容性，PS的圖層以及各種樣式都能無偏差的導入到AE，但同樣是Adobe家族的AI，要導入AE卻特別麻煩，更不用說沒有血緣的Sketch了。偏偏AI和Sketch卻經常需要和AE打交道，這時候以下兩款插件便應運而生。

Overlord：AI與AE互導

Overlord不僅可以實現AI導入AE，還能隨時從AE導回AI修改，這對本身不適合用于繪制圖形的AE來說，無疑是補上了一個短板。

最新的Overlord支持路徑、形狀、參數圖形、剪切關系、文本、甚至大部分的漸變參數都能無偏差互導，并且可以設置導成子圖層還是獨立圖層，可以說是非常方便了。

官網鏈接：https://www.battleaxe.co/overlord

AEUX：Sketch導入AE

如果說Overlord是AI和AE之間的一座橋梁，那AEUX就是Sketch和AE之間的一座橋梁。導入前在Sketch里將圖層整理好，導入AE后圖層關系也是一目了然。

官網鏈接：https://aeux.io/

1.2 使用過程

——————————

Motion Tools：常用功能合輯

如果說AE只能裝一款插件，那必然是Motion Tools了，它將很多常用操作整合到一個面板上，并且可以跳過繁瑣的常規操作。包括快速調整曲線、定位圖層錨點、克隆關鍵幀、制作回彈效果、錯位圖層序列、生成多圖層空對象等。這里演示幾個常用功能。

快速調整速度緩動曲線：

不用再通過輸入表達式，做出操控便捷又靈活的回彈效果：

錨點是元素變換時的基準點，更改錨點也是高頻操作。Motion Tools不僅可以快速修改圖層錨點，并且支持多圖層批量操作：

官網鏈接：https://motiondesign.school/products/motion-tools/

Auto Crop：預合成裁切

新轉成的預合成尺寸總是占滿畫布，不方便做動畫且干擾其他圖層選擇。手動調節的話會影響元素的位置、位移等屬性，Auto Crop很好地解決了這個問題，能夠將預合成裁切至適合當前元素的尺寸。

官網鏈接：https://aescripts.com/auto-crop

Auto Sway：飄動效果

Auto Sway能夠很便捷的制作頭發或者服裝飄動的效果，在日常運營設計中，讓你的人物快速變得生動靈活起來。

官網鏈接：https://aescripts.com/autosway

Trapcode Particular：粒子效果

AE自身帶有粒子效果器，點擊“效果 → 模擬 → CC Particle World ”就是。但更強大更為人所熟知的卻是這款粒子插件—Red Giant旗下Trapcode插件包里的“Particular”。

很多運營或游戲頁面中的氛圍元素，例如落花、飄雪、灰燼、火花、彩帶等，Particular都可以快速做出。

除了運營設計，粒子在很多UI場景也同樣適用，例如結合形變或路徑做的飄散和拖尾效果，就可以用在充電或掃描等場景。

官網鏈接：https://www.maxon.net/zh/red-giant-complete/trapcode-suite

1.3 高品質導出

Bodymovin：Lottie格式輸出

Bodymovin能夠將AE中矢量圖形做成的動效導成json文件，變成一串純粹的代碼，再被Lottie渲染還原出來。這就讓“尺寸”和“幀率”擺脫了以往體積的束縛，導出的即使是又高清又流暢的大圖，也可以保持很小的體積。

QQ最新的Q彈超清表情，就是用Lottie實現的，大家可以在手機QQ上親自體驗這種爽滑Q彈的感覺哦。

官網鏈接：https://aescripts.com/bodymovin/

PAG：完整的動畫工作流

PAG（Portable Animated Graphics ）是一套完整的動畫工作流，在動畫導出與渲染方面和Lottie相似，但更進一步的是，PAG還引入了視頻序列幀結合矢量的混合導出能力，這就保證了PAG能支持AE的所有特性和效果。

另外PAG還提供完善的桌面預覽工具、性能監測可視化、運行時可編輯等特點，能很好的打通設計與開發之間，從創作到素材交付上線的流程。

官網鏈接：https://pag.io/

Gifgun：導出小巧高清的Gif圖

Gif格式因為不支持半透明區域且容易有鋸齒，如今的實際開發中已經有了Apng、Lottie等很多更好的替代方案，但在網頁瀏覽、文檔編輯等許多場景，還是需要使用Gif來演示動效或者作為封面縮略圖。AE從2014版本后就不支持Gif導出了，而Gifgun就是一款能很好地導出Gif格式的插件。

Gifgun導出的格式小巧清晰，本文所有動圖就是用這款插件導出，真香。

官網鏈接：https://aescripts.com/gifgun/

Aftercodecs：導出小巧高清的MP4

AE本身不支持直接導出MP4，很多時候只能先導出體積龐大的MOV格式，再通過第三方軟件轉成MP4，操作繁瑣不說，還損失畫質。

Adobe自家的多媒體編碼軟件Media Encoder，也可以完美導出MP4格式，不過這款軟件本身體積較大，每次打開都要運行很久。

這里推薦使用更實用的MP4導出軟件 — Aftercodecs。安裝后在輸出模塊設置里，就能找到對應的導出項了，并且導出的MP4也是小巧高清的。

官網鏈接：https://aescripts.com/aftercodecs/

Part 2. 高效操作-效率翻倍的小技巧和快捷鍵

2.1 實用小技巧

小技巧這部分，整理了AE高頻操作經常會遇見的一些問題，以及對應比較高效的解決方案。

用空對象調整元素

當我們想調整的元素已經打上過關鍵幀，這時直接調整元素的位置或縮放屬性，就會影響到原本的效果，使用空對象就可以解決這一問題。

整體拉伸關鍵幀

關鍵幀比較多時，按住 “ Option ” 鍵，用鼠標拖動最末尾的關鍵幀，可以對所選關鍵幀進行整體等比拉伸，并且支持多圖層同時操作。

快速定位圖層中心錨點

新建形狀層的定位錨點總是不對齊圖層的中心，這在做一些帶縮放或旋轉屬性的動畫時就特別不方便，按住“Command”雙擊“平移錨點工具”，即可使圖層錨點快速對位到圖層中心。

還有更直接的方法，就是在“首選項”里將“在新形狀圖層上居中放置錨點”打上勾，以后新建的形狀層錨點都會自動對齊圖層中心啦。

中英文AE快速切換

AE的很多插件和表達式對中文版本不兼容，包括很多教程也都是國外案例，所以其實直接用英文版的AE是最好的。但是難免也有跟我一樣看見英文界面就抓瞎的同學，平時還是習慣用中文版，有需要時才換成英文版。這里介紹一種AE快速切換中英文的方法，對2018以上的版本都適用。

以macOS系統為例，在以下路徑找到：

前往 \ 電腦 \ Macintosh HD \ 資源庫 \ Application Support \ Adobe \ Adobe After Effects CC \ AMT \ application.xml

將“application.xml”這個文件用“文本編輯”打開，然后按“Command + F”使用查找命令，將“zh_CN”文本替換為“en_US”，保存后重啟AE就是英文版了。

Windows也是同理，對應路徑為：

C: \ Program Files \ Adobe \ Adobe After Effects CC \ Support Files \ AMT \ application.xml

然后將“application.xml”這個文件用“記事本”打開，同樣的查找“zh_CN”后替換“en_US”就好。

之后可以將“application.xml”文件分別存一份“zh_CN”中文和“en_US”英文的版本，下回再要切換時，直接將對應的“application.xml”文件復制到原路徑替換即可。

視頻素材循環

新置入一段想要循環的視頻素材時，很多人習慣將素材復制多次，或者通過時間重映射打上關鍵幀后在添加循環表達式。其實并不需要這么麻煩，在項目窗口右鍵對應的素材，選擇“解釋素材 → 主要”，在彈出窗口直接就可以設置素材循環次數。

2.2 高效快捷鍵

雖然AE的全部快捷鍵可以寫滿長長一串列表，但在精不在多。實際使用時，其實只要記住一些常用的關鍵快捷鍵，就已經可以效率翻倍，享受“鍵步如飛”的感覺了。

以最常用的“添加關鍵幀”為例，在不使用快捷鍵的前提下，想要給對象添加一個“位置”關鍵幀，需要至少3個步驟：

而使用快捷鍵 “ Option+Shift+P ”，一步即可完成，并且不會展開不相關的屬性：

這對于一個工程里需要用到成百上千次的k幀操作來說，著實可以省下不少時間，可以說是不得不用的一個快捷操作。

秉持在精不在多的原則，整理出以下一些高效又常用的快捷鍵，親測好用哦！

因為作者是MacOS系統，所以下文中提到的 Option 可以對應 Windows 的 Alt ； Command 對應 Windows 的 Control 。

五大基礎變換屬性

在對應圖層使用這五個快捷鍵，即可快速展開或收起對應屬性。

位置：P（Position）

縮放：S（Scale）

旋轉：R（Rotation）

不透明度：T（Transparency）

錨點：A（Anchor）

常用工具選擇

選擇工具：V

形狀工具：Q

鋼筆工具：P

攝像機工具：C

關鍵幀操作

快速添加關鍵幀：Option + Shift + “ * ”（ * = 對應屬性快捷鍵）

向右移動關鍵幀一幀：Option + 右箭頭

向左移動關鍵幀一幀：Option + 左箭頭

向右移動關鍵幀十幀：Option + Shift + 右箭頭

向左移動關鍵幀十幀：Option + Shift + 左箭頭

緩動關鍵幀：F9

時間指針操作

定位到上一可見關鍵幀：J

定位到下一可見關鍵幀：K

定位到圖層入點：I

定位到圖層出點：O

設置當前為工作區開始：B

設置當前為工作區結束： N

圖層操作

將圖層拆分 ：Shift + Command + D

裁去時間線左側圖層：Option + [

裁去時間線右側圖層：Option + ]

設置當前為入點： [

設置當前為出點： ]

復制圖層：Command + D

其他常用操作

展開/收起帶關鍵幀的屬性：U

展開/收起所有屬性：UU

展開/收起遮罩屬性：M

展開/收起音頻屬性：L

轉為預合成：Shift + Command + C

圖像自適應合成寬高：Shift + Option + F

After Effects官方快捷鍵大全：https://helpx.adobe.com/cn/after-effects/user-guide.html/cn/after-effects/using/keyboard-shortcuts-reference.ug.html

Part 3 .實際落地-動效輸出與標注

設計再好的動效如果不能實際落地，那一切也只是徒勞，所以動效輸出在對接開發時非常關鍵。按照輸出和實現的方式不同，我們可以將動效分為兩種類型，一種是播放型動效，一種是交互型動效。

3.1 播放型動效輸出

播放型動效是指在輸出時效果就已經固定的動效，滿足觸發條件后播放出來，過程中并不會有影響效果的元素。

例如常見的APP底部導航點擊效果，icon動效在用戶點擊時觸發播放，這個效果在輸出時就是固定的，不受任何其他因素影響，可以由設計師直接導出。

播放型動效有以下幾種比較常見的輸出格式：

Gif、Apng、Webp本質上都是將位圖進行壓縮和轉換，而Lottie則是基于代碼層面的動畫渲染，PAG則結合了兩者的特性。目前一般使用Apng、Lottie、和PAG就已經可以覆蓋大部分的輸出場景，是可以優先考慮的動圖格式。

3.2 交互型動效標注

交互型動效是指變換內容跟我們的交互操作相關聯的動效，并且包含無法由設計師直接導出的元素，比如用戶的頭像、名稱等。

比如這個支付面板切換的效果，變換的元素中包含了用戶的余額和綁卡信息，這些信息是無法由設計師輸出的。

這種動效需要開發在代碼側還原。如果只是輸出視頻demo，開發同學很難將其中的細節（例如時間出入點、曲線速率等）還原出來。這就需要設計師有一份清晰的標注文檔，將動效的細節參數跟開發更好的明確下來。

一份規范的動效標注文檔，至少應該包含以下幾個方面，

觸發：在什么條件下觸發動效，例如點擊、雙擊、滑動、長按等；

對象：發生變換的對象，例如按鈕、列表、文字等；

屬性：具體變換的屬性，例如位移、縮放、不透明度等；

參數：換化屬性的具體參數，例如不透明度值從0到1；

時長：變換的起始時間點、持續時間；

曲線：變換的速率曲線，描述在固定的時長范圍內，速度是如何變化的；

以上圖的支付面板首次切換過程為例，我們的標注文檔是這樣的：

第一步定義好頁面的起始和結束狀態，并標明動效元素

第二步則是將各元素的運動細節用具體參數描述清楚

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系。 



作者：騰訊ISUX團隊    來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

平時用QQ音視頻來做什么呢？和好友聊天？與家人聯系？還是工作開會？現在你有了新選擇，解鎖視頻娛樂新方式，QQ一起派對讓你不必出門，也能和好友一起玩聚會游戲。

01

——————————

音視頻娛樂新形態

挖掘更好玩的娛樂社交場景，能帶給用戶更愉悅的體驗。疫情期間，線下聚會因此受限，線上娛樂應運而生，在此契機之下，期望借助音視頻實時互動、聲影重現的特性，開啟了新的娛樂形態——QQ一起派對。

觀察競品普遍存在不足之處，即缺乏真實聚會游戲的氛圍與互動。因此，解決社交游戲產品缺少真實情境的問題，成為QQ一起派對的創新機會點，有利于在競品中突圍，塑造差異化優勢。

02

——————————

打造真實聚會游戲體驗

2.1 回歸本質，突圍創新

QQ一起派對是基于音視頻展開的線上聚會游戲，結合了實時互動與娛樂化內容。為了讓游戲過程更貼近真實聚會場景，我們從游戲氛圍和自然交互兩方面切入，尋找創新突破口。

游戲氛圍

構建適用于游戲類型的界面框架，讓線上聚會更貼近真實世界，并運用視覺感染力，營造環境氛圍，包括場景具象化、增強代入感等方法，實時感知好友的情感變化，從而獲得社交臨場感，在心理上感到彼此的存在。

自然交互

有別于競品需通過點擊按鈕作答，QQ一起派對利用實時語音識別，讓用戶通過更自然的人機交互方式，在游戲過程中進行語音搶答，彷佛置身于真實世界中與好友互動，成為QQ一起派對的獨特賣點（Unique Selling Proposition）。

綜上所述，QQ一起派對的設計要素包括：、

1. 社交臨場感（Social Presence）：場景具象化、高度同步實時響應、感知他人情感變化

2. 沉浸感（Immersion）：營造氛圍、增強代入感、突出內容與主角

3. 可玩性（Playability）：游戲界面、游戲機制、游戲互動

4. 凝聚力（Cohesion）：將好友聚在一起、吸引更多用戶來玩

2.2 游戲界面設計

舞臺場景化布局

QQ一起派對能讓用戶創建房間，邀請好友參加線上聚會，促使游戲氛圍具象化。游戲類型聚焦于〝你演我猜〞、〝明星問答〞等猜題游戲，為了增強代入感，讓用戶融入情境之中，我們采用舞臺表演的界面隱喻（Interface Metaphor），借由深色背景突出內容與表演者。界面框架選擇一個大畫面與多個小畫面的組合，更貼近輪流上臺表演的游戲類型。通過舞臺場景化布局，模擬線下互動的真實感。

多層次感官體驗

我們真實還原了線下搶答的互動體驗，通過倒計時動效、實時分數標簽，以及搶答成功反饋，增添游戲的緊張感與刺激感。

在游戲過程中，除了通過視頻畫面感知好友的情感變化，用戶的語音狀態也會實時反饋在頭像上，響應搶答題目、好友交談，以及各種表達情緒的聲音，借著聲音視覺化的效果，搭配視頻與人聲的重現，交織出多層次的感官體驗。

邀請消息實況化

發送邀請是召集好友的重要途徑，而作為〝邀請函〞的消息，需要傳達明確的信息，讓用戶一眼就能感知房間內的狀態，包括準備開始、游戲中、游戲結束等，避免用戶點擊加入游戲時，卻因游戲已開始或結束而無法加入。為此，我們將邀請消息實況化，持續更新當前狀態、參與成員等，讓用戶能實時感知派對房間的變化。

03

——————————

拯救孤獨，陌生人玩法登場

3.1 讓你隨時找到伙伴

排解寂寞心理訴求

QQ一起派對初期聚焦于好友一起玩，但仍不免發生創建了房間，當下找不到好友，或因等待過久而退出房間的狀況，使得創建房間到實際參與的轉化率受到影響。從用戶訪談結果來看，用戶存在排解寂寞的心理訴求，但對象不一定得是熟人好友，因此渴望找到游戲伙伴、快速開始游戲，成為QQ一起派對擴展至陌生人玩法的契機。

引入陌生人匹配

針對找不到好友的問題，我們新增了匹配陌生人的能力，用戶可從游戲大廳進行隨機匹配，倘若創建房間后找不到好友，也能在房間內匹配玩家，降低游戲參與門檻。

此外，進一步優化房間內的界面布局，將游戲卡片縮小平鋪排列，讓用戶一眼就能看到多款游戲，提升對游戲數量的感知與轉化率。在游戲類型上，新增了猜歌與知識問答兩款游戲，并提升現有題庫質量，避免游戲趣味性不足，影響用戶留存率。

3.2 游戲大廳情感化設計

搭建游戲世界觀

為了增強游戲氛圍，我們通過情感化設計帶領用戶進入情景中，讓用戶更好地理解每個玩法，并從游戲玩法與情感訴求提煉出場景元素，以此搭建游戲世界觀，并將故事情節加以推演，增強趣味性與獨特性，還能進一步提升記憶度。

利用光效聚焦視線

光效有利于吸引和聚焦視線，并以不同的表現形式來影響情緒。我們從光的色彩、動效、光感和造型等層面，創造出五種增強感官體驗的光效設計，將其應用在游戲大廳入口，借由不同的光效類型與動畫形態，強化用戶的世界觀感知。

會講故事的界面

帶有情感的故事會在記憶中發酵，引領用戶進入場景。我們將游戲入口的功能屬性，轉化為富有故事性的場景設計，當用戶被故事所吸引，多感官區域被激活，將會激發用戶情緒，有利于記憶與理解游戲入口，對游戲產生共情，進而超出產品的功能價值，與用戶建立情感鏈接。

例如匹配陌生人入口，使用QQ的IP形象駕駛UFO，準備召集用戶前往神秘的太空之旅，意味著通過陌生人匹配，你將擺脫寂寞，以光速般的速度找到游戲伙伴、快速開始游戲。通過故事劇情激發情感共鳴，并適當結合IP滲透品牌價值，吸引用戶參與游戲。

破格設計能夠加強張力、突出游戲主題，我們運用破格效果的3D圖標造型，彰顯游戲的獨特調性，樹立鮮明的品牌印象。

組件化卡片設計

組件化除了提高設計效率，還能從整體一致性考量差異化。我們將游戲卡片、題庫卡片、提示卡片和入口卡片等功能界面，構建一套組件系統，讓框架布局貫通全流程，打造體驗一致的可玩性，利于后續的擴充與延展。

3.3 生存戰增添挑戰性

激發持續參與動力

根據游戲可玩性研究，提供挑戰與磨練技巧的機會，對持續參與游戲的動機有正面影響。有鑒于此，除了提供隨機匹配、召集同好共樂，我們還設計了極限生存戰玩法，希望借著1v1淘汰賽制增添樂趣與挑戰性，激發用戶持續參與的動力，特別是年輕人酷愛這種競技感，擊敗的對手越多，獲得的獎勵就越高，有利于勾起用戶的勝負欲。

匹配動效強化氛圍

為了營造同場競技的臨場感，我們利用匹配動效強化氛圍。隨著已加入玩家的數字不斷增加，底部會實時展示用戶頭像，具象化呈現玩家數量，烘托熱鬧氣氛，消除等待時的焦慮感，讓用戶處于蓄勢待發的狀態，而紅藍對戰布局則進一步強化PK宣戰的氛圍。過程中若有玩家遭到淘汰，用戶也能通過底部頭像感知剩馀玩家數量，以此增強游戲臨場感與成就感。

增強榮譽感與儀式感

每輪擊敗對手時，答題區域將變為全屏的慶祝畫面，搭配撒花特效、頭像聚光燈，營造歡愉的勝利氛圍。而在游戲結果頁，我們同樣利用色彩和動效的差異對比，塑造勝敗雙方的情緒氛圍，以此增強榮譽感與儀式感。在生存戰登頂挑戰成功的用戶，將會站上頒獎臺授予最高榮譽，在舞臺聚光燈的照耀下，迎接光榮勝利。排行榜有助于強化擊敗眾多好手的感知，激發勝利者的分享欲。

04

——————————

結語

QQ一起派對推出后深受用戶喜愛、獲得廣泛好評，調研結果顯示，用戶整體評價相當高，也樂于將QQ一起派對推薦給好友。

綜而觀之，音視頻除了廣泛應用在通訊場景，正逐漸賦能更多創新場景，而娛樂場景更成為兵家必爭之地。QQ一起派對開啟了新的娛樂形態，充分發揮音視頻聲影重現的獨特優勢，消弭了空間距離，嘗試解決社交游戲產品缺少真實情境的問題，讓游戲過程更具臨場感，就像面對面進行游戲一般。未來將從玩法豐富性、游戲挑戰性、題庫可玩性三方面持續優化，打造更好玩的音視頻體驗。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。 

作者：騰訊ISUX團隊    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

距離業界首次提出“全鏈路設計師”這個概念已經過去了幾年，從稱謂的變化我們就可以感受到設計師這一角色職責的變化。在近幾年的產品設計工作中，我們和上下游之間的協作越來越緊密，介入階段越來越往前，新的趨勢對設計師也提出了更高的要求，包括更深入的產品思考，對用戶的時時洞察，高效的溝通合作，以及細致的質量把控等等。那么如何成為一個全能型的互聯網設計師呢？本文以日常工作流程為路徑，為大家整理了一波實用小技巧和小工具。希望能夠幫助大家在保持設計的專業度的同時，在工作的方方面面都能夠得心應手。

Phase 1

————————————

日常積累

有效的設計積累讓我們事半功倍。養成隨手記錄的習慣，逐漸形成自己的素材庫，不僅能夠讓我們在需要的時候能夠快速檢索靈感，偶爾回顧也總能有新的感受。

字體識別神器：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

Phase 2

——————————

調研和分析

當我們進入到產品設計工作中時，了解用戶往往是最重要的前提和基石。大公司的團隊往往有專職的用戶調研團隊來協助產品設計，但對小型一點都團隊可能用戶調研這個流程是全部歸到設計師角色里的。而且即使有專門的用研報告，直接觀察用戶的行為和描述往往是最直觀的，也更容易洞察到問題和機會。這里介紹兩種我們常用的低成本的方法。

用戶反饋什么: 七麥

如果你的產品是一個成熟的上架了各大應用商店的 App，可以通過一些第三方平臺看到各應用商店的評分評論匯總，構成和趨勢，也可以將自己的 App 和競品放到一起對比。例如我日常使用的“七麥”，可以通過微信訂閱每日評分變化，也可以導出指定時間段的評論的匯總表格，做更深入的檢索和分析。

用戶談論什么: 微博

商店評分和用戶反饋通常的內容通常比較有針對性，大部分都是圍繞已有的功能。如果想要看到用戶在生活中如何使用我們的產品，使用過程中有什么樣的情緒和感受，看他們如何理解在用的這個東西，則可以去社交平臺上搜索產品的關鍵詞，常常會有些很有趣的發現。據說早期微信的剪刀石頭布的想法就來源于一個微博用戶的分享。

Phase 3

——————————

設計和打磨

來到我們最熟悉的設計實操階段。設計類工具非常多，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，體驗不同動畫曲線在實際頁面上的感受。底部還可以調整具體參數來達到想要的效果。

地址：

https://easings.co/

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系。 



作者：騰訊ISUX團隊    來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

Meet more beautiful colors.

在《騰訊文檔-構建科學有效的色彩系統》這篇文章中，我們闡述了騰訊文檔如何升級了新的品牌色，為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和品牌認知，以及如何構建一個科學有效的調色板。

在設計系統的實際運行中，我們也需要著眼于如何應用調色板，建設協同工作流，并給各個角色提供有關色彩的擴展指導，以達到在騰訊文檔中構建一致且有品牌感的數字界面并有效提升效率的目的。

在建設騰訊文檔色彩系統的工作中，我們首先構建了一個包含品牌色、灰色、輔助色的調色板，但僅有這個調色板不足以支撐我們流暢、無障礙的協同工作。日常工作中，“這里我用哪個藍色？”“這里我用哪個灰色？”“開發同學能否快速的變更某些元素的顏色？”等等問題層出不窮，建設系統的協同工作流迫在眉睫。

Chapter 1

——————————

如何建設？

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可以在不同主題下，映射不同的十六進制色值。這就是我們建設協同工作流的的基礎邏輯。

Chapter 2

——————————

為調色板的基礎色值命名

調色板的各個色值（hex value）是最底層的基礎樣式，我們將色板上的顏色進行規則化命名，以方便后期將其引用到顏色變量中。

騰訊文檔包含核心藍色、藍灰色、中性灰色及其他輔助色，按照顏色屬性，將其命名為：Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red，并在命名中加入色階后綴。

*騰訊文檔調色板命名圖表

Chapter 3

——————————

定義顏色使用規則

1、 從調色板中選擇合適的顏色并測試

從調色板中根據UI中的任務挑選合適的顏色并進行可用性測試，做具體任務中顏色選擇的最優解。

例如，我們需要選擇一個藍色作為鏈接色，作為文本，對比度必須達到4.5:1以上才符合WCAG2.0的可用性標準。經過測試我們選擇了primayblue-02作為鏈接色。

騰訊文檔的界面中，灰色系列占主導地位，起著至關重要的作用，為產品界面創造結構、表達邊界、建立信息層次。在調色板中，我們選擇了兩種灰色：中性灰色和藍灰色，來支撐系統的設計。藍色系列是騰訊文檔產品和體驗的主要動作顏色。

同時我們也使用了其他顏色以滿足一些沖突性任務（警示等）的顏色使用，這些顏色需要謹慎、有目的地使用。

2 、根據任務定義顏色的使用規則

經常會有設計師問，“這里我能用這個灰色嗎？”出現這種問題，根本上還是顏色使用規則定義的不夠清晰，含混的口口相傳的規則會導致更多的混亂。于是，需要我們根據任務和使用場景把顏色的使用規則清晰的定義。

首先定義在界面中占主導地位的灰色、藍色的使用規則。

藍灰色_Grayblue：

在騰訊文檔中，藍灰色與品牌藍共同建立品牌印象，由此，藍灰色主要應用于與風格相關的場景。包括：圖標色、填充底色及大面積的背景色等。

中性灰色_Gray：

中性灰色主要應用于一些全局系統行為。如：文本、分割線及交互反饋hover、press等場景。

品牌藍色_Primayblue：

品牌藍色主要應用于系統中的各種行為，如藍色圖標、button、文本鏈接等。

其次定義在界面中用于警示、狀態提醒的其他顏色的使用規則。

紅色_Red：

紅色主要應用于系統中需要警示的場景，如紅色警示圖形、錯誤文本、紅色tag等。

其他顏色：

在騰訊文檔中，會針對不同的任務應用不同的顏色，如左滑操作、成功提示、高亮顯示等。

品類圖標基準色：

在騰訊文檔中，不同的品類有不同的基準色。

Chapter 4

——————————

顏色變量的語義化命名

定義了顏色在系統設計中的使用規則后，我們需要根據顏色變量的使用用途對其進行語義化命名。一套好的語義化命名規則需要易于維護且具備可拓展性，如果只是將調色板的色值命名為 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等。

Chapter 5

——————————

建設團隊協同工作流

以上種種，最終目的在于建設團隊的協同工作流，將顏色變量（color token）嵌入設計組件中與開發代碼形成聯動，便于設計利用變量及組件、開發利用程序中的變量來做全局修改，橫向提升團隊的協作效率。

1、 設計內協同：在Figma中生成顏色變量

在設計系統中，顏色變量屬于底層的設計原子，需要將其生成為顏色變量并嵌入到設計組件中，便于設計內部使用。我們將已根據任務用途命名的色值，生成figma中的顏色樣式（color style），后續無論是進行組件的設計，還是項目的設計，都可以直接賦予設計元素明確的顏色樣式。

2、 設計組件與開發代碼聯動：利用顏色變量表進行信息同步

我們生成了一個面向內部、外部的顏色變量表，進行顏色變量的說明和信息的同步，沉淀落到實處的資料文檔。（此處推薦使用騰訊文檔，多人協作實時溝通～）

最終形成了設計組件庫與開發組件庫的聯動，構建了一個協同工作流，橫向提升工作效率。

結束語

上篇的調色板設計后，一直在醞釀這篇調色板的實際應用。在設計一個較為復雜、龐大的產品時，提效是永恒的課題。痛過、踩過坑的設計師應該深有感觸，溝通的無力、推動的困難都推動著我們發動自己的能量去想辦法提效。

設計師們可以在自己的項目中與開發同學多多溝通，嘗試這種方法，去建設更高效的色彩設計系統。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系。 



作者：騰訊ISUX團隊    來源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

1.1 交互文檔是什么

交互文檔，是一份用來解釋項目交互方式、內容、規則的說明文檔，也叫 DRD ( Design Requirement Document )。

在過去的分享中，我們有解釋過，B 端項目會包含大量的交互內容，需要前期繪制交互原型來展示和確認交互方案。

如果是比較簡單的小型項目，或成熟產品的小迭代，那么這樣的連線圖確實就足以表達交互的意圖和方案了，寫太多注釋文字反而會畫蛇添足提高觀看者的認知成本。

但是，如果項目和展示的流程內容，邏輯非常復雜，包含非常多的選項和狀態，那么單靠原型和連線是絕對不夠的，添加更多的圖文說明就變得非常有必要了。

同時在團隊協作場景中，就需要將這些內容制作成一份規范的 “文檔”，用來進行統一的展示、備份、歸檔。

所以做交互光靠畫交互原型是不夠的，“文檔” 就成為必要的輸出成果。

1.2 它和產品文檔的區別

在產品側（非開發），文檔就有好幾類：

- 商業需求文檔: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

交互文檔和產品文檔是相互獨立和補充的，當產品文檔無法完成對產品交互的有效解釋時，我們就應該選擇輸出獨立的交互文檔，來提升項目協作的效率。

2.1 主流的交互文檔工具說明

主流的交互文檔輸出有三種方式：

1. Axure/墨刀 導出

2. 一般文檔制作

3. 線上 Wiki 記錄

Axure 和墨刀是用來制作產品原型的軟件工具，也是目前在產品經理、交互設計行業中應用最廣泛的原型工具。

它的主要優勢，在于可以比較方便的制作可交互的組件、連線、導出。

當然，光制作原型圖并不能叫交互文檔，它們還提供了比較全面的內容標注、文本記錄、圖形繪制的功能。

這就可以讓我們完成原型繪制以后，結合頁面結構的管理，添加交互文檔所需的其它信息，并最終輸出文件。

而在一些比較傳統的行業或外包領域，使用的記錄文檔往往要使用 Word 或 PPT（方便開會演示或要打印）。這就要在原型完成以后，導出原型圖例，并使用這些文檔軟件進行文字的記錄和連線。

受限于 Word、PPT 的布局限制（強行分頁），使用它們做交互文檔是非常難受的，并且這些文檔需要保存到本地，存在各種文檔版本管理的問題。

所以還有另一部分也希望使用普通文檔格式記錄，并滿足云端同步、備份、版本管理的團隊，就會使用 Wiki 類的工具來制作交互文檔。如語雀、飛書、Confluence、Notion 等工具。

如果只是一些比較小的項目迭代、一次性使用的交互文檔，使用前兩種方法都可以勝任。而真正大型、系統性的交互文檔，往往都使用團隊內部的 Wiki 進行創建和管理。和設計稿不同，這些使用了內部賬號或需要內網訪問的文檔資料，是不會沒事發到網上來分享的，這也是在網上找不到完整交互文檔的主要原因。

2.2 B端設計師的交互文檔工具建議

和你們網上可以找到的大多數交互設計干貨不同，我即不推薦你們使用 Axure/墨刀 來畫原型，也不推薦用它們或普通文檔、Wiki 的形式來輸出交互文檔。因為：

—— 太低效了！

產品經理和交互設計師的主要產出物就是文檔，自然可以耗費比較多的精力和時間去制作原型和編寫內容。而 UI 設計師的主要工作肯定是最終的視覺界面和交付，所以用最復雜的方法去制作交互文檔，顯然是不合理的。

同時還要提一句，Axure/墨刀 等軟件用來制作一般的線框圖原型，效率實在是太低了。且絕大多數情況下的頁面跳轉、交互都是可以忽略不做的。而且隨頁面增加，它的左側導航層級、數量會非常龐大，導致查找和瀏覽的效率進一步降低。

在我自己的所有課程和分享中，我始終都建議直接使用你們正在用的云端 UI 設計軟件直接繪制產品、交互原型并輸出文檔，如即時設計或 Figma。

原因包含：

- 速度快：能用 Axure 五分之一的時間完成所有原型繪制

- 可復用：做好的原型方便復用，而且可以直接在原型上完成后續設計

- 交互性：對于表達交互流程所需的基礎跳轉和動效都能滿足

- 更自由：一些需要復雜圖文結合的說明方式不再受到普通文檔布局限制

比如下面這樣的原型案例，就可以通過一個簡單的鏈接快速分享出去，或者添加團隊成員自由查看。

在我過去長期的實踐體會中，這種方式是優勢最明顯，效率最高，最易懂，也符合 UI 設計師工作需要的。如果項目中有其它因素要求，你們也可以選擇前面的方式輸出。

任何文檔的目標都是為了書面記錄和讓看的人更容易理解我們要表達的信息，不要被固定的方法局限住，要努力去探索適合團隊當前場景的方式。

3.1 文檔框架結構制定

前面把基本的信息聊完了，這里就來具體講講交互文檔應該如何進行輸出。

當然，輸出交互文檔前需要先理解交互是什么，交互設計的具體設計內容和步驟。交互文檔是對你已經設計出來的方案的書面記錄，你不能在對交互一無所知的情況下強行編寫文檔。

交互文檔制作首先要確認文檔的記錄內容和文檔結構。

記錄內容指的是你在該文檔準備放哪些交互內容進去，并不是每次項目設計都要把項目所有頁面和流程交互都重做一遍。

比如一次中等規模的迭代，新增幾個通用的列表頁面，調整了一些細節字段，增加了一個功能流程。那么文檔重點記錄內容肯定就是流程而不是所有頁面。畢竟通用的列表頁和細節更改，在產品需求評審階段就可以完整的解釋，而功能流程則不行。

如果是全新的項目，包含數十上百個頁面。把所有流程、頁面的交互內容全部表現出來的工作量是頂不住的，在繪制原型的過程中，你就會發現有大量的重復頁面、流程和交互。所以制作文檔就要有目的性的對重復的內容進行合并，以及只保留重要的頁面和流程。

具體該放什么要考慮項目的實際情況，需要設計師自己評估。除此以外，標準的交互文檔里面會包含背景介紹、編輯日志、文字圖例、業務流程、名詞解釋、頁面結構等等。

這些 “文縐縐” 的細節，并不是必備的，你可以根據當前場景自己決定需要加哪些。比如項目、業務背景前面的產品需求已經講清楚了，業務流程、名詞解釋團隊成員也都了如指掌的時候，那么這些頁面模塊就完全沒有放的必要。

并且，基于前面對放置內容的考慮，結構的順序并不一定要類似下方案例，完全按照產品的導航目錄來走。

所以，根據一個中等規模的迭代項目，我會制定一個這樣的一級文檔結構。

- 基本信息：項目的簡單信息，快速目錄，參與人信息等

- 基本組件：涉及的相關組件展示和交互規則說明

- 原型一覽：本次迭代涉及的所有頁面原型和連線一覽

- 流程介紹1：流程1的所有頁面、狀態、說明展示

- 流程介紹2：流程2的所有頁面、狀態、說明展示

- 流程介紹3：流程3的所有頁面、狀態、說明展示

每個1級文檔結構對應 UI 軟件中的 Page 目錄，力求所需的 Page 數量越少越好，而不是像 Axure 的做法一樣密密麻麻的。

結構可以根據復雜程度做進一步的細分，它像寫文章的大綱一樣，幫助我們提前規劃好后續完成文檔所需的內容和工作量。

3.2 關于連線和標注信息

有了結構，就要在對應的 Page 中填充內容了。其中一般的文字介紹、流程圖、思維導圖，只要正常輸入或將導出的圖例黏貼進來就可以。

而針對具體的交互內容，流程解釋上，則重點處理連線和標注說明。比如下面是我自己在課程演示中的一個簡單的交互流程演示案例。

在 UI 軟件中，制作連線其實是很簡單的事情，只要畫出一個直線，再設置箭頭和尾部圖形、描邊色彩和粗細即可。

然后，將該線段的圖層放置在畫布之外，起點放置在觸發交互的區域之中，終點尖頭則緊貼目標畫布的邊緣（不用特意延伸進畫布內）。如果使用水平、垂直的方式連接兩個畫布，那就可以雙擊進去添加錨點制作 90 度的折角。

連線的應用是非常簡單的操作，不要舍近求遠通過插件或是其它的一些功能來實現。而除此之外，我在文檔中添加的解釋性文本主要有兩種，交互事件和交互規則。

交互事件代表了連線的兩個頁面是如何被觸發跳轉的，所以我會在線段中帖一個文字卡片，解釋觸發的條件和交互操作是什么。

然后，就是頁面或流程中的交互細則，包含兩個部分，數字標簽和對應文字注釋。它們都是用 Auto layout 可以快速制作出來的組件，每次要做備注的時候，只要復制標簽到頁面上，設置對應的數值，再將右側的文字卡片復制到頁面旁邊，再加上對應的數字、內容信息即可。

在設計軟件中，畫布的自由度極高，你想要怎么備注和添加內容都沒關系，只要在內容翔實的基礎上保證 —— 團隊成員能看懂，就是一份優秀的交互文檔。多在繪制過程中和同事溝通，優化展示的做法，可以避免很多會出現的問題，進一步加速我們的制作效率。

3.3 文檔的團隊協作應用

將文檔全部做完以后，最終就是關于交付和協作的問題了。

既然我們使用線上的 UI 軟件來完成交互文檔的制作，那么文件設置公開訪問權限，再分享鏈接自然是最簡單的辦法。

但每次項目分享個網頁鏈接，或者并行有好幾個項目，需要其它成員自己去收藏網址，也是挺麻煩的。所以盡量充分應用軟件中的團隊協作功能，通過創建一個團隊，添加成員，讓他們自行查看當前文件目錄中的交互文檔。

查看過程中，團隊其它成員可以通過評論的功能對交互內容進行糾錯、提問、建議，方便我們進行優化改進。

通過這種簡單高效的文檔協作模式，我們可以非常快得完成整體交互內容的定稿，并開始后續的工作。

再回到前面的話題，我們是 UI 設計師，不是全職交互設計。原型文檔輸出完了，下一步可是要做視覺界面的，所以交互文檔就可以不用管了嘛？

交互文檔的最佳狀態是 —— 應用最終界面圖例解釋交互內容。

也就是當我們把所有頁面內容設計完成后，強烈建議將界面的展示和交互文檔進行整合。除了前端和產品可以看到最終的交互落地效果外（有時候最終設計和前面的交互不一致），還可以直接通過這個文檔查看界面數值標注，而不用往返于交互和設計文檔來回切換，這才能讓文檔作用最大化。

以上就是關于交互文檔的相關解釋。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。 

作者：酸梅干超人    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司