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），后續無論是進行組件的設計，還是項目的設計，都可以直接賦予設計元素明確的顏色樣式。
我們生成了一個面向內部、外部的顏色變量表，進行顏色變量的說明和信息的同步，沉淀落到實處的資料文檔。（此處推薦使用騰訊文檔，多人協作實時溝通～）
最終形成了設計組件庫與開發組件庫的聯動，構建了一個協同工作流，橫向提升工作效率。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
動效是用戶體驗的重要組成部分，也是產品調性的重要體現。如今動效設計也有了更多的解決方案，如Framer、Principle、Flinto、Protopie等，這些軟件在制作交互原型時，確實有更輕量便捷的優勢，但效果也有一定的局限性，或者要求使用者有代碼基礎，比較適合有針對性的人群。而After Effects作為動效軟件的鼻祖，以其強大的兼容性、效果豐富性和清晰明了的圖層操作邏輯深得設計師們喜愛，不論是UI、運營還是多媒體類型的設計都能滿足，無疑是目前最具有普適性的動效軟件。本文從AE的插件、操作以及落地三個方面，為大家整理了一波實用技巧，希望能幫助大家在工作中更加得心應手。
工欲善其事必先利其器，不論是AE還是其他軟件，好的插件都能配合軟件本身達到事半功倍的效果。這里介紹十款AE上不容錯過的精品插件。
AE與PS有很好的兼容性，PS的圖層以及各種樣式都能無偏差的導入到AE，但同樣是Adobe家族的AI，要導入AE卻特別麻煩，更不用說沒有血緣的Sketch了。偏偏AI和Sketch卻經常需要和AE打交道，這時候以下兩款插件便應運而生。
Overlord不僅可以實現AI導入AE，還能隨時從AE導回AI修改，這對本身不適合用于繪制圖形的AE來說，無疑是補上了一個短板。
最新的Overlord支持路徑、形狀、參數圖形、剪切關系、文本、甚至大部分的漸變參數都能無偏差互導，并且可以設置導成子圖層還是獨立圖層，可以說是非常方便了。
官網鏈接：https://www.battleaxe.co/overlord
如果說Overlord是AI和AE之間的一座橋梁，那AEUX就是Sketch和AE之間的一座橋梁。導入前在Sketch里將圖層整理好，導入AE后圖層關系也是一目了然。
官網鏈接：https://aeux.io/
如果說AE只能裝一款插件，那必然是Motion Tools了，它將很多常用操作整合到一個面板上，并且可以跳過繁瑣的常規操作。包括快速調整曲線、定位圖層錨點、克隆關鍵幀、制作回彈效果、錯位圖層序列、生成多圖層空對象等。這里演示幾個常用功能。
快速調整速度緩動曲線：
不用再通過輸入表達式，做出操控便捷又靈活的回彈效果：
錨點是元素變換時的基準點，更改錨點也是高頻操作。Motion Tools不僅可以快速修改圖層錨點，并且支持多圖層批量操作：
官網鏈接：https://motiondesign.school/products/motion-tools/
新轉成的預合成尺寸總是占滿畫布，不方便做動畫且干擾其他圖層選擇。手動調節的話會影響元素的位置、位移等屬性，Auto Crop很好地解決了這個問題，能夠將預合成裁切至適合當前元素的尺寸。
官網鏈接：https://aescripts.com/auto-crop
Auto Sway能夠很便捷的制作頭發或者服裝飄動的效果，在日常運營設計中，讓你的人物快速變得生動靈活起來。
官網鏈接：https://aescripts.com/autosway
AE自身帶有粒子效果器，點擊“效果 → 模擬 → CC Particle World ”就是。但更強大更為人所熟知的卻是這款粒子插件—Red Giant旗下Trapcode插件包里的“Particular”。
很多運營或游戲頁面中的氛圍元素，例如落花、飄雪、灰燼、火花、彩帶等，Particular都可以快速做出。
除了運營設計，粒子在很多UI場景也同樣適用，例如結合形變或路徑做的飄散和拖尾效果，就可以用在充電或掃描等場景。
官網鏈接：https://www.maxon.net/zh/red-giant-complete/trapcode-suite
Bodymovin能夠將AE中矢量圖形做成的動效導成json文件，變成一串純粹的代碼，再被Lottie渲染還原出來。這就讓“尺寸”和“幀率”擺脫了以往體積的束縛，導出的即使是又高清又流暢的大圖，也可以保持很小的體積。
QQ最新的Q彈超清表情，就是用Lottie實現的，大家可以在手機QQ上親自體驗這種爽滑Q彈的感覺哦。
官網鏈接：https://aescripts.com/bodymovin/
PAG（Portable Animated Graphics ）是一套完整的動畫工作流，在動畫導出與渲染方面和Lottie相似，但更進一步的是，PAG還引入了視頻序列幀結合矢量的混合導出能力，這就保證了PAG能支持AE的所有特性和效果。
另外PAG還提供完善的桌面預覽工具、性能監測可視化、運行時可編輯等特點，能很好的打通設計與開發之間，從創作到素材交付上線的流程。
官網鏈接：https://pag.io/
Gif格式因為不支持半透明區域且容易有鋸齒，如今的實際開發中已經有了Apng、Lottie等很多更好的替代方案，但在網頁瀏覽、文檔編輯等許多場景，還是需要使用Gif來演示動效或者作為封面縮略圖。AE從2014版本后就不支持Gif導出了，而Gifgun就是一款能很好地導出Gif格式的插件。
Gifgun導出的格式小巧清晰，本文所有動圖就是用這款插件導出，真香。
官網鏈接：https://aescripts.com/gifgun/
AE本身不支持直接導出MP4，很多時候只能先導出體積龐大的MOV格式，再通過第三方軟件轉成MP4，操作繁瑣不說，還損失畫質。
Adobe自家的多媒體編碼軟件Media Encoder，也可以完美導出MP4格式，不過這款軟件本身體積較大，每次打開都要運行很久。
這里推薦使用更實用的MP4導出軟件 — Aftercodecs。安裝后在輸出模塊設置里，就能找到對應的導出項了，并且導出的MP4也是小巧高清的。
官網鏈接：https://aescripts.com/aftercodecs/
小技巧這部分，整理了AE高頻操作經常會遇見的一些問題，以及對應比較高效的解決方案。
當我們想調整的元素已經打上過關鍵幀，這時直接調整元素的位置或縮放屬性，就會影響到原本的效果，使用空對象就可以解決這一問題。
關鍵幀比較多時，按住 “ Option ” 鍵，用鼠標拖動最末尾的關鍵幀，可以對所選關鍵幀進行整體等比拉伸，并且支持多圖層同時操作。
新建形狀層的定位錨點總是不對齊圖層的中心，這在做一些帶縮放或旋轉屬性的動畫時就特別不方便，按住“Command”雙擊“平移錨點工具”，即可使圖層錨點快速對位到圖層中心。
還有更直接的方法，就是在“首選項”里將“在新形狀圖層上居中放置錨點”打上勾，以后新建的形狀層錨點都會自動對齊圖層中心啦。
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”文件復制到原路徑替換即可。
新置入一段想要循環的視頻素材時，很多人習慣將素材復制多次，或者通過時間重映射打上關鍵幀后在添加循環表達式。其實并不需要這么麻煩，在項目窗口右鍵對應的素材，選擇“解釋素材 → 主要”，在彈出窗口直接就可以設置素材循環次數。
雖然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
設計再好的動效如果不能實際落地，那一切也只是徒勞，所以動效輸出在對接開發時非常關鍵。按照輸出和實現的方式不同，我們可以將動效分為兩種類型，一種是播放型動效，一種是交互型動效。
播放型動效是指在輸出時效果就已經固定的動效，滿足觸發條件后播放出來，過程中并不會有影響效果的元素。
例如常見的APP底部導航點擊效果，icon動效在用戶點擊時觸發播放，這個效果在輸出時就是固定的，不受任何其他因素影響，可以由設計師直接導出。
播放型動效有以下幾種比較常見的輸出格式：
Gif、Apng、Webp本質上都是將位圖進行壓縮和轉換，而Lottie則是基于代碼層面的動畫渲染，PAG則結合了兩者的特性。目前一般使用Apng、Lottie、和PAG就已經可以覆蓋大部分的輸出場景，是可以優先考慮的動圖格式。
交互型動效是指變換內容跟我們的交互操作相關聯的動效，并且包含無法由設計師直接導出的元素，比如用戶的頭像、名稱等。
比如這個支付面板切換的效果，變換的元素中包含了用戶的余額和綁卡信息，這些信息是無法由設計師輸出的。
這種動效需要開發在代碼側還原。如果只是輸出視頻demo，開發同學很難將其中的細節（例如時間出入點、曲線速率等）還原出來。這就需要設計師有一份清晰的標注文檔，將動效的細節參數跟開發更好的明確下來。
一份規范的動效標注文檔，至少應該包含以下幾個方面，
觸發：在什么條件下觸發動效，例如點擊、雙擊、滑動、長按等；
對象：發生變換的對象，例如按鈕、列表、文字等；
屬性：具體變換的屬性，例如位移、縮放、不透明度等；
參數：換化屬性的具體參數，例如不透明度值從0到1；
時長：變換的起始時間點、持續時間；
曲線：變換的速率曲線，描述在固定的時長范圍內，速度是如何變化的；
以上圖的支付面板首次切換過程為例，我們的標注文檔是這樣的：
第一步定義好頁面的起始和結束狀態，并標明動效元素
第二步則是將各元素的運動細節用具體參數描述清楚
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
UI設計中，除了界面整體的布局，還有一些圖標、插畫的設計，大部分都是素材的填充，而這么重要的部分往往被設計師所忽略。
對于素材的隨意挑選，殊不知選圖的技巧和方法有很多，眾多素材中如何找到我們心儀的配圖呢？這就是今天要和大家分享的主題，用科學合理的方法找到最合適的素材。
一、選擇配圖的常見錯誤
在為產品尋找配圖素材時，是一個長久過程。所以素材的運用即能幫你提升界面的效果，也能拉低界面的效果，很多設計師不在意選材的重要性，往往因為配圖后界面效果還不如原型圖看起來規范好看。下面我總結出三個方法可以提升配圖的效果。
1、素材與用戶預期：
不真正調研產品的用戶群里和心里。搭配的素材必然達不到用戶預期。每款產品的使用人群是不同的，我們的素材配圖要符合產品使用人群的預期。
如下圖：是一款有關于售車的界面效果，此項目的用戶的目標已經確定，主為高端用戶，我們來看看左右配圖的區別。
左圖中我們在找配圖時如果不能保證對高端車的認知，必然會有低端車的產品圖的出現，由于不符合產品的使用人群，給用戶造成心理落差；而右圖則是我們了解高端車后的選圖，內容是符合用戶心理預期的，同時通過配圖再次提升產品的逼格。
PS：我上面說到圖片內容的心理預期與用戶不符，其實在關于選圖上，也是存在這個問題的，例如左側是通過百度找到的素材，不夠精致，無法提高界面的整體效果，而右側則是在站酷海洛找到的素材：
只要進行裁剪，縮放比例即可使用，界面整體檔次也提升很多。
2、素材與主視覺：
說到主視覺，就先要說說有關顏色的歸類，顏色主要分為暖色系，冷色系和中性色系三種，在界面中不同的顏色可以帶來不一樣的感受，如果不理解主視覺所要表達的感受，便找不到合適的配圖，無法提升界面效果。所以我們在選擇配圖時一定要追尋界面的主色系所以傳達的情感。
如下圖：左側是以冷色為主的直播界面，右側是以暖色為主的產品詳情頁。
左圖由于忽略了主視覺的關系，配圖為顏色過多，頁面整體表達出來的情感不夠直觀，無法產生共鳴。
右圖中我們通過控件可知主色為暖色系，選擇同色系的素材進行搭配，通過素材和主視覺的完美搭配才能明確傳達產品想要給用戶的感受。
3、素材與素材：
這是最容易出現的錯誤，我們通常只關注于素材的整體感覺，反而忽略同類素材之間的差異，不是所有的同類素材都可以放到一起來用的，我們還要注意素材與素材內容的差異化。
如下圖：左圖為一款外賣食品列表的效果圖，右圖為商品列表的效果圖，大家可以分別感受一下左右兩側的哪個更舒服些。
左圖中列表的素材與素材的內容是不同的，雖然都是食物圖，但有的是實物，有的是適量圖，給人的感覺是不同的，這也是大家總是覺得哪里不對，卻又說不出來的問題。
再看右圖中的列表，配圖元素統一，同為國外真人模特，符合素材與素材之間風格的統一。
PS：我們平時在做概念稿時，找同類型的產品圖消耗的時間也是很大的，不是圖片少，而是同質量的素材太少了。
所以一定要在專業的素材平臺找查找，因為專業的素材平臺會根據設計師的需要提供方便快捷的素材集合。
例如上圖，我在站酷海洛中的搜索水果，便的到各個角度和不同風格的同質量圖片，可以有更多的選擇去搭配。
二、運用配圖的常見錯誤
上面我們說的是如何選擇素材，而下面一部分主要是讓大家了解到沒有量身定做的素材，不是什么素材都可以拿來直接用的，理想是豐滿的，現實是骨感的。
辛辛苦苦找到的素材，就差一步便可以提升作品的效果，卻因為嫌修改麻煩而失之交臂，我們來看看下面三種方法是如何將素材進行優化的。
1、統一素材比例：
在設計界面時，素材被拉伸變形，填充不滿等低級問題出現的已經越來越少了，所以這里要說的不是基礎的尺寸問題，而且是素材內容的占比比例。要保證素材中的內容與背景的占比是一致的，才能提升界面規范性。
如下圖：兩張運動類產品的界面列表，我們來分別單獨預覽兩個界面，有沒有發現同樣的界面同樣的產品，但預覽產品的順序是不同的，這是什么原因導致的呢？我們往下看。
左圖中的產品展示內容與背景的占比不統一，可能是按現實中的比例進行擺放的，有大有小，界面顯亂，干擾用戶的閱讀順序。
右圖通過更改圖片比例后，統一了圖片內容與背景的比例，不會干擾用戶閱讀界面的順序。
2、統一素材角度：
素材因為角度不一，給人的感受也是不同的，在一個界面中的素材如果角度各式各樣，會影響到用戶的點擊欲望。所以在挑選素材時應該注意參考圖的角度，統一的拍攝角度可以讓界面變得更有秩序。
如下圖：左右兩張界面的產品展示部分。
左側界面中產品配圖角度各異，有正視拍攝，有俯視拍攝的界面毫無秩序感。而右側則對配圖進行了規范，都為正視圖，讓界面看起來更統一規矩。
3、統一顏色：
很多素材的構圖和內容都很棒，但放到界面中卻顯得格格不入，主要原因在于顏色之間的差異。選用素材后，如果對差異較大的顏色不做改變，便會造成顏色混亂，弱化了主視覺的顏色，用戶對其產品的認識便會漸弱。
如下圖：播放器界面中唱片封面的顏色差異。
左圖我們為播放器尋找到了合適的素材封面，但素材的顏色是橙色的，素材與整體的顏色調性是不融洽的，破壞了界面的統一性，并不適合。
所以我們可以將封面改變其顏色變為符合我們界面中按鈕以及播放時長的進度條的藍色即可。
三、線上運營用圖
前面說到的都是關于概念稿選擇素材用到的一些技巧，可能大家看了會覺得這是概念稿，在實際的線上是沒辦法控制的，這個觀點我并不同，實際線上的配圖就真的沒辦法提升了嗎？還是我們選擇性忽略了呢？也許我們最初的選擇就是美麗的謊言。
1.確保真實用圖：
在設計初期我們就應該使用真實的運營圖片進行設計，防止上線后才發現圖片與設計風格不符的情況，為時已晚。
如下圖：兩組圖為圖書展示模塊區域。
左圖為設計時擺放的封面，都是精心挑選的優質素材，美化了模塊的效果。
而右側為線上效果，無法保證封面設計的統一性，所以切勿使用與實際上線不符的圖片，會影響產品最終效果的判斷。
2.不可重復用圖：
很多設計師在做設計稿時，通篇只用一張素材圖，交給開發，其實這樣做出的設計，和原型無太大差異。
但是我們的設計稿是為了給運營提供參考的基礎模版，為了能和線上效果保持一致，所以設計稿中的素材不可在一個界面中出現兩次。
如下圖：視頻App中的頻道頁，左側為復用素材設計，右側為選擇不同素材設計。
左側的復用設計其實和原型區別不大，無法根據界面中的素材選擇運營圖，可利用性不大。而右側更貼近線上效果，可以給運營提供找素材圖的方向，避免返工。
3.圖片的清晰度：
模糊的圖片會使用戶的視覺體驗變得糟糕，現在的用戶對于圖片的瀏覽量每天都是不計其數的，如果想要在配圖上得到用戶的親睞，就必須要清晰且看著舒服的圖片。
如下圖：兩張同樣的界面展示，分別用了模糊的素材和清晰的素材。
左圖中圖片清晰度不夠，影響用戶的瀏覽，同時也會給用戶造成未加載完成的錯覺。
右圖中的素材則清晰可見，增加界面的美觀度。所以我們在用圖時，不可以用小尺寸的圖片強行拉伸，會導致圖片模糊不清，請選擇高清大尺寸的配圖。
4.圖片比例：
同一張圖片可能需要在多個界面中進行展示，而展示的尺寸也有可能存在差別，所以我們需要統一制定界面中運營圖的尺寸規則，也可以做好安全區，避免界面因比例不對造成的圖片拉伸或者顯示不全等情況。
如下圖：下面的圖片是原圖素材，接下來要將原圖分別放入不同的區域內，他們的尺寸也不同。
在左側界面中，如果任由系統自動適配比例就會出現前兩種的錯誤，留白或變形，所以我們應該把較大的圖片制作規范，畫出安全區。
如右圖banner通過上面等比例縮放到剛好填充滿即可，下面的素材也是等比縮放大填滿整個擺放區域后在進行裁剪。
5.元素太多不使用：
很多運營的用圖元素過多，一心想把能放的都放進去，最后圖片內容中沒有重點，用戶看的也是一頭霧水，元素少，突出重點的圖來使用。
如下圖：同為視頻App中熱播模塊，同樣的美劇和字段，只是素材有所不同。
左側素材中元素過多，影響用戶對圖片閱讀，無重點，沒有點擊欲望。
而右側的配圖簡單清晰一目了然，不會給用戶帶來閱讀負擔，更是挑選影片中簡單清晰的畫面作為封面使用，增加用戶點擊欲望。所以我們要選擇元素少的運營圖作為配圖。
6.格式太大：
圖片格式過大是一件很嚴重的問題，用戶預覽時加載速度過慢影響用戶體驗的流暢性，圖片過大也會增加用戶流量的使用費用。所以我們在導出運營用圖時，一定要記得壓縮圖片，對于壓縮到什么程度，要看圖片本身的大小，只要保證壓縮完依然清晰就可以。
如下圖：兩張同樣的素材圖，他們的清晰度是一樣的，可大小卻有區別。
左側為原圖大小，右側為壓縮后的圖片大小，我們可以看到壓縮后的圖片明顯占用的內存更小了。
7.不要使用白色背景：
目前線上產品中白色背景的產品占比還是很高，所以我們在選用素材時，要避開白色背景的素材，當界面背景也為白色時，會造成無邊緣感。
如下圖：兩個模塊中選擇用了不同背景底色的素材圖。
左側素材中用了大量的白色背景的素材，無法判斷圖片與圖片之間的距離，同時也會造成圖片大小不一的錯覺。
右圖中使用有背景色的素材，可以清晰的區分每一個模塊的間距，整齊規范。
總結
我們在做概念稿時都知道需要精心選擇配圖，為什么在做線上稿時，圖片的質量就變得那么差，是一件需要思考的事情，難道沒有好的素材，我們就放棄了產品的美觀度嗎？
我們不應該把美化調整運營圖變成日常的流程中嗎？這樣才能保證產品的最終質量。好看的素材不是找出來的，而是通過我們優化出來的。
作者：海邊來的設計師
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
轉載請注明：學UI網》線條是新開始
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
整個導航欄通常分為左、中、右三部分，左側和右側主要用來放置功能控件，中間部分主要用來放置文字標題，接下里展開分析左中右三部分的構成。
左側導航
放置在APP頂部導航欄左側的控件很多都跟動作相關，例如執行返回動作、關閉動作或者點擊漢堡菜單進行展開動作等。
除了在左側放置表示動作的控件，還可以在放置頭像框、消息提示等優先級較高的內容，用來引起用戶的注意。
在網頁端的頂部導航欄中，左側都會放置品牌logo，因為網頁端頂部的空間更大，所以還可以在LOGO周圍結合徽標、搜索框、下拉菜單等空間。
中間部分
APP頂部導航欄的中間部分主要用于放置標題，當然根據使用場景的不同，還可以放置頭像、搜索框、下拉框、導航等控件。
1) 標題
最常見的是在中間使用加粗的文字作為標題，也可以使用主標題+副標題的形式來展示更多的信息。
還可以把標題區域做成支持下拉的樣式，擴展更多的功能全。
2) 用戶頭像
在社交類產品或對話框中，會在中間部分放置用戶的頭像和信息，用來展示用戶的詳細信息。
3) 產品Logo
有些產品還會將Logo放在導航欄的中心位置用來展示品牌形象，在APP的首頁可以考慮這樣設計，起到強調作用。
4) 分段控件
在移動端產品中，還可以在中間部分放置分段控件，通常2-3個標簽，在早期的網易云音樂APP中就用到了這樣的設計，通過點擊標簽或者左右滑動頁面完成內容切換。
5) 搜索框
導航欄中間經常能看到搜索框，然后搜索框左右兩邊放置其他的控件。當導航欄的內容太多，比如有文字標題、頭像、按鈕等控件，搜索欄和這些控件可能無法并排放置時，可以將搜索欄橫向拉長，放在下一行單獨展示。
現在淘寶APP首頁的導航欄就做成了兩行，上一行用來放置文字標題和功能圖標，搜素欄集合掃碼、拍照等功能單獨作為一行。
6) 導航選項
在網頁中，標簽、按鈕、面包屑導航等常見的導航組件，通常會固定在網頁導航的中心位置。當頁面縮小到移動端時，考慮到移動端尺寸較小，如果頂部導航內容太多，可以嘗試把功能組件放到第二層級。
右側導航
相對于左側和中間，APP導航欄的右側部分更加靈活，沒有固定的要求說必須放哪些內容，根據需求放置各種類型的功能控件。
1) 頭像
如果想調用與用戶屬性相關的功能，就可以將頭像放在導航欄的右側區域，點擊彈出相關的選項。
2) 圖標
在右側區域放置功能圖標是最常見的設計，把用戶最常使用的功能，例如消息圖標、搜索圖標，都可以集中到導航欄的右側區域。
如果右側需要展示的圖標太多，可以把這些圖標聚合在一起，處理成類似微信首頁右上角的設計，點擊之后出現更多功能。
3) 按鈕
按鈕也可以放在右側區域來引導用戶操作。當出現多個按鈕時，要使用樣式和顏色來靈活區分按鈕的主次關系。
按鈕的形狀包括圓形、方形、圓角矩形等，按鈕樣式包括顏色填充、描邊、圖標和文字結合等多種風格，通過靈活的設計抓住用戶的注意力。
4) 搜索框
在網頁端中會看到搜索框放在右側的設計，將搜索框作為單獨的控件或者和其他控件組合使用放在右側，方便用戶快速訪問。
5) 下拉菜單
在Pad端和網頁端中，可以使用嵌套在應用欄右側的下拉菜單進行切換帳戶、語言等操作。
頂部導航欄設計風格需要與與整個產品的UI相匹配，常見的導航欄設計樣式有
扁平風格、陰影懸浮效果、顏色填充效果、使用半透明導航等。
扁平風格
頂部導航區域完全融入到背景中，和整個頁面融為一個整體，頁面看起來比較簡約。
陰影懸浮風格
通過在導航欄下方增加一層陰影效果，讓導航欄有懸浮在頁面上的感覺，同時便于和頁面其他內容作區分。
顏色填充風格
將導航欄背景進行色彩填充，不透明度降低到8-12%，使用一些簡約而高級的色彩來增加頁面的豐富度，體現品牌特點。
深色風格
APP頁面的背景大多都是淺色，這個時候如果使用深色的導航，能夠產生很強烈的對比效果，用來突出導航中的內容。比如早期的微信APP頁面，頂部就是采用深色的導航，和淺色的頁面作對比。
透明風格
圖片詳情頁的UI設計中常用到透明的導航風格，既能避免導航欄將圖片內容遮擋，還能突出頁面的高級感。
選中狀態
當用戶與導航欄交互時，導航欄上的控件要能夠動態切換來為用戶提供即時反饋，比如當選中頁面中的內容時，導航欄要出對應的操作提示，是否刪除、分享等。
滾動狀態
當頁面上下滾動時，原本扁平的APP導航欄出現陰影懸浮的升高效果，狀態的改變會讓操作看起來更自然。
背景模糊
當頁面滾動時，頂部導航出現毛玻璃的模糊效果，這是現在很流行的視覺效果，會讓整體的用戶體驗更流程。
尺寸調整
當頁面尺寸變小時，要考慮將多余的導航選項折疊并隱藏在“更多”圖標里面，這樣才會讓設計更合理。
以上就是導航欄(App Bar)設計中能用到的知識點和設計細節，希望通過這些內容能幫助你對導航欄有更多的設計想法和思考。
「組件系列」的其他文章，近期也會不斷更新，歡迎大家關注??
設計夾將近期分享的設計資源整理成了一份清單合集，如果其中有大家需要的資源，直接在公眾號后臺回復對應的關鍵詞即可免費領取，這份清單也會不斷更新更多的資源，建議大家收藏起來隨時查看。
慢慢來比較快，希望對你有幫助！
領取方式：關注公眾號，后臺回復【資源】獲取高清素材清單
作者：Clippp
轉載請注明：學UI網》APP導航欄設計分析：5種設計樣式+4種交互狀態
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
原文地址：站酷
作者：君小陽
轉載請注明：學UI網》一組復古風格logo嘗試
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
什么是汽車HMI呢？咱們先把這個概念拆分成兩個關鍵詞：汽車+HMI。
先來說一下HMI，HMI是Human Machine Interface的縮寫，“人機接口”，也叫人機界面。
HMI(人機界面)是系統和用戶之間進行交互和信息交換的媒介，它實現信息的內部形式與人類可以接受形式之間的轉換。
知道了HMI的定義后，我們把“汽車”這個前綴加上，汽車HMI是指用戶與汽車系統之間進行人機交互的媒介。
當然汽車HMI并不局限于界面中，而是作為功能的集合，例如汽車儀表盤、HUD抬頭顯示器、交互媒介(語音、觸覺)等，都是汽車HMI設計包含的內容。
目前我們說到的汽車HMI最早是在80年代初推出的。
在當時，普通汽車需要實現的功能在迅速增加，設計師的任務之一就是為駕駛員提供控制，保證駕駛員能夠使用和管理這些新功能。
對于新功能的增加，主要遵循兩種方法：
第一種方法在德系車中比較流行，而第二種方法在美系和日系車中比較流行。
現在看來也是這樣，雖然現在汽車都在用車載大屏來代替物理按鍵，但德系車的物理按鍵仍然要比日系車多。
別克汽車在1986年最早推出了車載屏幕系統，用戶可以在單色觸摸顯示屏中控制電臺和天氣。
另一個典型的案例是日產推出的CUE-X概念車，具備可觸摸和彩色圖形的車載系統。能夠看出來，當時車內功能控件的位置和設計跟現在的車內飾已經很像了。
現在的汽車HMI更像是汽車控制中心與娛樂系統混合的數字座艙，提供的功能更多更強大，同時兼備娛樂屬性。
設計美觀有效的HMI，需要將藝術性與功能性合為一體。藝術性和功能性應該是平等和諧地協同工作，讓用戶沉浸在體驗中。以下是一些基本的設計原則：
給用戶控制感
汽車HMI應該始終在合理的時間內，通過適當的反饋，告知用戶當前的狀態。
這一點在用戶開車時尤為重要。如果系統在沒有通知駕駛員的情況下就采取某個行為，很可能會對駕駛員造成干擾，產生不好的后果。
駕駛員駕駛汽車，實際上就是在控制汽車做出各種行為。這既是一種控制，也是一種反饋，控制的是汽車的功能，反饋的功能帶來的結果。例如利用指示燈、速度儀表等各種動態化信息，隨時告知駕駛員當前的狀態。
遵循“安全第一”法則
HMI系統主要的好處是可以幫助我們避免事故。現代汽車配備了許多傳感器，傳感器可以收集信息，再利用這些信息跟蹤駕駛狀況。
HMI系統可以實時監控情況，防止交通碰撞和事故的發生。系統對條件的響應包括：
反應型：系統會通知駕駛員剛剛發生的事，例如胎壓過低或疲勞駕駛，并向駕駛員發出警告。
主動型：系統分析狀況，預測可能發生的情況，并基于潛在的不良情況向駕駛員發出警告。例如系統分析天氣狀況，并建議用戶避免在道路結冰的日子開車。
在設計系統響應時，重要的不是用大量信息淹沒用戶，而是要制定可靠的通知策略。發送給用戶的反饋應該是：
認知負荷最小化
認知負荷是使用系統需要付出的腦力成本、思考成本。用戶在使用產品時付出的成本越小，說明這個產品至少是簡單易用的。
話說回來，如果一個車載系統要求用戶承擔大量認知負荷時，說明這個系統存在很大的改進空間。
首先，不要去強迫用戶記住汽車駕駛相關的信息。大家都知道，用戶在短期記憶中不能記住太多信息，特別是多個容易混淆的功能或抽象的概念。
預先考慮用戶在駕駛過程中可能遇到的問題，例如機艙溫度是多少？現在在聽什么音樂？怎么導航去商場？基于這些場景和問題進行系統的設計，以此來解答用戶的問題。
其次，基于現有的心智模型構建HMI至關重要。為什么大多數汽車的儀表、中控的分布位置都很相似呢？
實際上這些都是在用戶與汽車的交互行為中建立起來的使用習慣，遵循熟悉的設計方式，能最大限度減少學習使用系統所需的工作量。
減少不必要的分心
駕駛過程中，駕駛員沒有什么理由去看手機，因為HMI能夠做任何在手機上能夠做的事情。可能會有人說，現在車載大屏尺寸那么大，會吸引用戶的注意力，對駕駛造成一定影響。
所以現在越來越多的智能汽車推出各種車載語音助手，將聲音——而不是觸摸，作為用戶與系統交互的主要媒介，通過語音來控制場景，例如切歌、撥打電話、調節溫度等。
不言自明的導航體驗
可發現性(在系統中找到特定功能)和導航體驗應該在設計中處于最高級別。
現在很多車載系統面臨著操作層級過多/過深的情況：用戶需要點擊很多次才能找到他們想要做的功能。
通過仔細規劃系統的信息架構，將常用的功能放置在第一層級，可以避免這種情況。
改進視覺效果
在美即適用效應的影響下，用戶更傾向于認為好看的、有吸引力的產品更實用。
設計師可以通過改進系統的視覺效果，改善用戶對系統的感知態度。例如為導航渲染逼真的3D模型，能幫助用戶更快地理解他們現在所在的位置和要去的地方，并獲得很好的體驗。
驗證HMI是否合理，不僅要衡量操作完成的時間和發生錯誤的數量，還要注重用戶滿意度。
用戶對汽車HMI的期望很高，有時候甚至會依據汽車HMI體驗的好壞來決定是否購買汽車。
如果你下次設計HMI系統，可以將這些要求作為基準：
原文地址：Clip設計夾（公眾號）
作者：Clippp
轉載請注明：學UI網》還不知道什么是汽車HMI設計？進來帶你快速了解
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
輕量漸變
首先值得一說的是輕量漸變，輕量漸變屬于弱漸變范疇，其特點為漸變色彩鄰近，幅度輕柔，節奏緩慢，融合感和細膩感較強。
因為輕量漸變多會選擇那些明度高、飽和度低的鄰近色，所以能很好地表達出設計中的“呼吸感”。這種呼吸感和通透感給人的感覺非常清新，所以在2022年應該還會持續地流行下去。
高飽和度撞色
高飽和度色系的應用在2020年就已經成為了重要趨勢之一，因為高飽和度的色彩更能吸引人的注意力，從而有效的吸引用戶的視覺落點。
可盡管“吸睛”對品牌來說非常重要，但我們在使用時仍需克制，因為過高飽和度的搭配，往往會給頁面的一體性造成一定程度上的背離，且非常容易帶來視覺疲勞。
所以設計師在使用這類顏色時，也通常會對其飽和度和明度進行一定程度的降低，讓顏色“豐盈卻不擁擠”，從而保證我們視覺上的舒適性。
另外，從高飽和的UI案例中我們也能夠看到，在搭配色彩時，選用大量的鄰近色營造氛圍，再用一兩個對比色產生沖突，就會使得整個頁面輕重相平衡，帶來不錯的視覺體驗。
糖果色
糖果色以粉色、粉藍色、粉綠色、粉黃色、明艷紫、檸檬黃、寶石藍和芥末綠等甜蜜的女性色彩為主色調，它能帶來一種纖細,柔軟的感覺。所以哪怕一個畫面中出現過多的色彩，也不會讓人覺得很沖突和背離！
emoji表情
表情符號在現如今是一個超越文本并且能夠得到廣泛認知、跨越文化和多領域的一種視覺語言，在文字段落的末尾加上 Emoji 能夠更好傳達情緒，這使得表情符號不僅在網頁、文本甚至在海報中作為主視覺，都能帶來非常不錯的氛圍感。
在2021年，emoji不僅被廣泛應用起來，還被廣泛3D化。加上陰影效果的emoji，其情緒的傳達也變得更加豐富。
2022，emoji的表達依舊會持續進行，只是其形式會更加豐富，例如這種“假3D”效果等
3D化
說到了emoji的3D表達，就不得不說2021最為流行的一個設計趨勢，那就是大量的平面內容通過增加了陰影的效果而被立體的表達了出來。
像我們熟悉的蘋果應用程序icon等，其設計細節都因此變得更加的豐富而有層次。
而2022，3D設計趨勢也會通過不斷的發展進一步明確了其自身的地位。它能夠為設計師提供無限的可能性，為任何你能想象的東西提供更多可發揮的空間。
2022年我們也會看到更多關于2D和3D之間完美結合的設計，像下圖的案例，手繪線條的手指和球體表情之間的互動，不僅讓整個頁面顯得更加有趣生動，還能使2D3D這兩種設計方式的優點都能得到更充分的展現。
玻璃擬態
同樣，在2021年超級流行的毛玻璃效果，我們也會在2022年看見更加豐富的表達~
比如最近在dribble上很火的這組效果圖，就是在平面的基礎上，將毛玻璃的效果運用在3D的物體上，讓整體的虛實感更加的生動，也會給設計增加一點與眾不同的活力。
除此以外，我們還可以看到的，這一趨勢已經明顯轉移到了玻璃和水晶質感上，而且以令人難以置信的用立體擬真度將圖形設計提升到了一個全新的高度。所以，2022我們也將看到更多與全息和3D趨勢相輔相成的透明質感和逼真的玻璃背景等元素的設計。
幾何抽象
完全不同于寫實的3D風格，2022年的設計風格可能也會開始往抽象發展。用幾何圖形來表達意象，用色彩傳達情感。少了繁瑣的裝飾，用更簡潔有力的方式去傳達設計理念。
當分形形狀與色彩完美結合時，就可以創建出極具吸引力的視覺效果。
的確，每年的設計趨勢似乎總有相似的地方，2022年的設計風格也是在2021的基礎上進行演變和發展的。所以更重要的是，我們要學會持續地積累這些設計素材，并不斷地審視自己的設計作品，學會將他人的設計思路結合在自己的設計靈感上，才能成為一個一直擁有輸出能力的設計師~
原文地址：CSDN
作者：摹客
轉載請注明：學UI網》2022最新盤點，這些設計趨勢今年會怎樣？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在數據可視化的分析過程中，用戶是所有行為的主體，通過獲取的可視信息形成認知，在交互分析過程中獲取解決問題的方法。
在這個過程中，感知和認知能力直接影響著信息的獲取和處理進程，進而影響用戶對外在世界環境做出的反應，這也是設計數據可視化產品服務藍圖的基礎邏輯。
從數據到知識有兩個途徑:交互的可視化方法和自動的數據挖掘方法。
我們可以看到，下圖展示的便是一個典型的可視分析流程圖和每個步驟中的過渡形式。這個流水線的起點是輸入的數據，終點是提煉的知識。
可視化的首要任務是準確地展示和傳達數據所包含的信息。根據預期和需求，提供有效輔助手段以方便用戶理解數據，從而完成有效的可視化。
但是當出現數據尺寸大、結構復雜的情況時，有限的空間大大限制了靜態可視化的效果，有限的可視化空間和數據過載之間的處理是非常復雜的。有時我們會通過物理環境的變化來改變服務模型，但是更多時候我們需要通過交互設計來完成對復雜信息的處理，提升用戶對數據解讀的便捷性。
那么當我們在設計一張數據大屏時，我們該如何通過交互提升用戶獲取有效數據的效能呢，下面我們一起來探討如何完善大屏設計中的交互設計：
一、信息架構
1、清晰易理解、可拓展的信息架構
2、清晰易理解的導航關系
3、清晰易理解的層級關系
案例分析：
在我們收到原型圖時，首先我們需要梳理清楚大屏的信息架構，比如整個大屏的模塊比例是按照1:1:1還是1:3:1的結構。又或者是如何設計重要功能的入口，比如整屏的導航tab選項，在布局設計上用戶是否可以明晰它是是否是全屏篩選，在交互邏輯上用戶是否可以通過最短的路徑快速篩選抵達內容。那么當用戶進行了導航的切換后又返回到上一頁面，整個行為是可以形成路徑閉環的。
二、流程設計
1、可下鉆的模塊需給用戶以引導
2、相同功能的用戶體驗路徑需保持一致
3、逆向流程的功能設計能形成閉環
案例分析：
我們經常會在大屏中間設計地圖的樣式來展示某個省的數據情況，比如，如圖所示，當業務側需要從湖北省跳轉至武漢市，查看武漢市的詳細數據，那么我們可以在省級地圖輪播的數據氣泡上給予用戶以提示，用戶可以清楚獲取到跳轉市級大屏的路徑方法。
三、界面展示
1、一致可控的圖表組件
可視化大屏中最核心的數據展示形式就是圖表模塊，我們需要正確地展示圖表組件外觀與組件關系，把控好相似功能的橫向一致性，我們可以細分為以下幾點。
（1）選擇正確清晰的圖表組件
（2）正確表達組件元素之間的關系
（3）一致性的組件樣式和交互行為
（4）不要忽視組件的不可用狀態（按鈕）
（5）刪減影響用戶視線和注意力的冗余元素
案例分析：
當一個模塊內需要展示數據的多個維度，我們如何將該模塊設計得更加清晰呢。如下圖，根據人從左往右的閱讀習慣，在左邊展示數據1和數據2的總指標數，在右邊展示數據1和數據2的詳細走勢，右上角我們還可以添加tab選項，用戶可以進行tab切換查看更多維度的數據內容。
所以，我們可以將用戶使用習慣和交互行為很好地結合起來，不僅免去了圖表多亂雜的場景，用戶也可以更快地查看到想要獲取的數據信息。
2、清晰的數據展示
配合圖表展示的就是我們的“數據數字”內容了，在我們將設計稿傳遞給前端同事后，填充真實數據后的視覺效果可能看起來沒有效果圖規整，一方面在進行繪制效果圖之前，可以與產品業務側共同探討數據內容，盡量給視覺設計師提供真實的數據，另一方面，在我們作圖搬磚的時候，也要注意一下幾點：
（1）不要遺漏了“無數據”的缺省空界面，當無法獲取到數據時，我們需要給前端提供這樣的缺省圖；
（2）清晰的數據排序規則，比如環形圖中，總起始點到終點，數據對應的數值量應該是遞減的排序規則；
（3）考慮數據的極值情況，比如在搜索列表中學校名稱文字的極限字數是多少，超出多少字用省略號顯示，這些我們都需要考慮到；
（4）是否需要標明數據的更新時間節點，有的大屏強調數據實時性，我們經常會在右上角增加數據截止更新時間來來引導用戶；
（5）特定的數值按照特定的格式和單位顯示，比如羊字符能讓用戶第一時間識別到是人民幣，而如果金額數字過長后面再加元會降低識別效率。
案例分析：
3、選擇與輸入的信息反饋
（1）展示合適的首選項或默認值
（2）輸入前有效的文本提示
（3）輸入完成后需及時反饋
案例分析：
4、用動效進行有效的交互引導
利用動效進行交互引導，即使大屏操作鏈路過長，也可以讓用戶快速上手操作，減少流程學習時間。進入下一場景后，又會有對應的區域提示用戶返回全局或查看其他場景；當做到層層有響應，就能減少用戶在每一步操作上的困惑時間，幫助用戶快速上手操作流程，并且大大提升工作效率。
但是我們需要注意的是，不要為了酷炫而做太多無用的動效，不僅會讓頁面加載速度慢，也會讓用戶覺得雜亂無重點。
總結：
交互可提高可視化系統的效率，幫助用戶處理更多的數據，完成更復雜的任務。然而，實現交互本身也有額外成本?；拥南到y可以使用戶能探索更大的信息空間，但隨之而來的成本是用戶需要花費更多的時間與精力去瀏覽和探索數據。
因此，可視化系統應當采用數據挖掘算法自動發現用戶可能會關心的數據或者模式；并通過可視化呈現給用戶，用戶在這個基礎上通過互動進行更深入的挖掘。設計師的設計決定了系統的可理解性，一旦掌握了這個邏輯，再復雜的頁面也會變得有條不紊。
我們仍需在數據可視化的道路上不斷探索挖掘數據價值，給決策者提供有效的數據分析支撐，讓設計驅動數據價值最大化。
藍藍設計的小編 http://www.syprn.cn