這些年里，這款工具進行了快速的迭代和更新，響應設計師們的需求，不斷完善功能，成為設計行業推薦率（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 時把想要收集的頁面進行截屏即可。每過一段時間，在電腦的相冊中打開 ”截屏“ 相冊，就有你這段時間收集的所有截屏。框選相關內容，拖進 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咨詢、用戶體驗公司、軟件界面設計公司
這兩年互聯網行業在 C 端市場上的增長已經不足以吸引大眾和投資者的視線，B 端作為一個新的熱點開始被追捧。
但 B 端是一個泛指，它是由若干面向商業場景的不同細分行業組成。包括云服務、SAAS、PAAS、定制系統、數據可視化、智慧平臺、商用 HMI 等等。
不同 B 端細分行業差距是非常大的，就像游戲 APP UI 和一般軟件 APP UI 完全是兩種職業一樣。每當我們討論 B 端行業前景，就一定要聚焦到具體的行業類型，否則就沒有討論下去的基礎。
而我們今天重點聚焦的，就是目前聲勢極大的數據可視化行業。
這是最近很多同學咨詢和關注的領域，也是各大顯卡廠商、3D 引擎發布會上的?？?。
各種讓人眼花繚亂的圖例和技術應用解說，很容易讓我們產生未來已經加速向我們走來的 “幻覺”，此時不抓緊時代的機遇投身數字化界面的設計，更待何時？
但我還是要勸大家別光顧著雞凍，冷靜下來好好分析這些行業和市場狀況，當你了解的越多，你就越會發現，這個職業方向和你們想的不太一樣……
首先，數字可視化領域也是一個比較籠統的行業，它依舊可以拆分出若干細分領域。但我先簡單根據視覺展示類型把它們分成兩大類，平面展示型和3D展示型。為什么根據這個分而不是商業場景，下面會做進一步解釋。
首先，數據可視化不是用了花哨的 3D 視覺才叫可視化，平面展示類型是絕對不能忽視的一個方向。它的主要應用場景集中在商業 BI ，統計分析工具等。
比如統計并查看網站、應用、店鋪數據的平臺。
這類產品有非常廣泛的使用場景和需求，是現代企業和產品運營的基石，它存在的價值是毋庸置疑的。
而另一類 3D 展示型的細分發展方向，包含展示大屏、數字孿生、智慧項目、商用 HMI 等類型。
這類項目更多是由技術發展催生而來的 “新需求”，和 5G 的發展是高度相似的。我對這個行業的發展潛力是認可的，但對設計師從事這個行業的總體前景持悲觀態度。
下面，針對真正的數據可視化設計師，我會從下面幾個維度展開討論（唱起反調）：
- 知識門檻
- 行業特征
- 團隊價值
數據可視化是對數據信息進行圖形化設計的過程，這個行業不是這兩年才出現的，而是由來已久。
從世界上第一個圖表的誕生之后，就有無數統計學家和設計師投身到這個領域中，發明和設計出各種精妙絕倫的圖形。
數據可視化的重要性不會比任何其它設計行業低，但是，數據可視化重要性的來源，是由數據本身的價值賦予的。因為詮釋數據的方式精彩，所以有價值，而不是僅僅是因為你做得好看且花哨。
更進一步說，就是數據可視化的價值是被統計學賦予的，而統計學是被這個世界真實需要的。
但很可惜，極少有 B 端設計師會投入精力到統計學的基礎知識和應用，這就導致很多設計稿中，連對數據的展示應該用折線還是柱狀都分不清。
或許你依靠經驗可以提升對一些基本圖表使用的心得，但是，進階的可視化設計需求就靠幾個簡單的折線、柱狀、餅圖就能解決嘛？那下面這些圖形應用需要掌握什么？
復雜的可視化應用場景，不僅需要設計師對統計內容和數據應用有主動地分析，還需要對計算機圖形學有一定的掌握。先不說門檻極高的 R 語言應用，但凡涉及到區級以上的地理信息可視化，就一定需要應用 GIS 工具的應用，導出并轉化數據包。
除了 2D 以外，3D 可視化的項目，所需的知識儲備就更進一大步。很多新人的認知以為設計師的工作只要用 3D 軟件建模并輸出就可以，學會 C4D 就可以做可視化項目。
這和以為掌握烤箱的功能就可以做出美味的蛋糕性質是一樣的……
前面說過，3D 可視化是由技術發展催生出的行業，它的應用受到技術的影響非常大。因為 3D 應用實在是太復雜了，比 2D 圖形復雜好幾個量級，這就導致設計可以落地的限制遠遠超出新手的認知。
常規的 3D 項目，必然要借助相關的圖形協議或者引擎。比如新手剛開始都以為的 3D 可視化就是網頁中運行 3D 效果，而網頁運行 3D 就是借助 WebGL 圖形協議實現的。
由于各種技術和硬件限制，WebGL 的性能是奇差無比的，因為它的圖形繪制渲染主要依靠 CPU 來完成，只要項目稍微復雜一點，多邊形和圖元數量一多，立馬就會讓電腦變卡（CPU占用量暴漲）。同時，它可以使用的渲染效果、著色器也必然不等同于 3D 軟件的高階渲染插件 OC 或 Redshift。
因為 WebGL 太弱，目前封閉的可視化項目就轉而使用其它的技術解決方案，即虛幻 Unreal 和 Unity。沒錯，就是你們玩游戲啟動畫面中顯示的那倆引擎。
換句話說，現在的高端 3D 可視化項目，就是用做游戲的方式做可視化應用，只要在指定設備里安裝，就可以調用 GPU 資源，實現更高級復雜的效果。
但是，只要應用了對應的引擎，就必須使用配套軟件來完成渲染、動畫、交互事件。即通過 C4D 或者 Blender、犀牛等軟件完成建模（不同可視化項目應該用的建模軟件也不一樣），再導入到虛幻或者 Unity 編輯器中進行下一步的操作，然后再和開發進行交付。
因為 3D 的復雜性，導致獨立 3D 可視化項目的開發流程被大幅度拉長，從而讓設計師需要掌握的知識面也大大增加。中間每個步驟都充斥著各種屎尿屁的限制，我就不繼續展開了。
3D 可視化設計師，幾乎就等同于游戲行業中的技術美術(Technical Artist)，因為游戲開發更復雜，分工更明確，技術美術作為設計師和開發之間的橋梁，幫助項目的美術能盡量在技術上被實現。
而因為可視化項目的建模精度與視覺效果要求不高（對比游戲），這些工作就要由同一個崗位包攬，設計師就沒辦法回避這些讓人絕望的知識信息。
還有一點對比游戲行業更讓人絕望的，就是 3D 可視化實際應用的技術方案是高度碎片化、沒有體系的，而且技術迭代周期遠比游戲行業短（WebGPU已經在路上了），這在客觀上增加了設計師的從業壓力（歡迎體驗前端開發的壓力？）。
一個專業的可視化設計師知識門檻，是遠遠高于一般 UI 設計師的。
當我們研究一個行業的前景時，就是研究它未來的趨勢和潛力。數據可視化嚴格意義來講并不是完全獨立的一個行業或市場，而是其它多個大市場中的某個組成部分。
如前面提到的數字分析、物聯網、工業物聯，都是層次更高的商業化市場。這些都是近年來高速發展的熱門行業，是帶動可視化行業發展的客觀依據，我就不一一找公開統計數據佐證了。
而可視化除了商業場景外，還有個在國內做可視化繞不開的話題 —— 政策。
如果具體關注過地產、5G、電動車產業的發展歷程，就應該明白國家意志的貫徹可以怎樣在短時間內催生出市場的高度繁榮（或者泡沫）。
而政策對于可視化的利好，就在于 “數字政府” 概念的規劃中。從幾年前開始就興起的政務數字化轉型，到最近國務院發布的 《關于加強數字政府建設的指導意見》，都是中央直接 “指導” 地方發展數字化的指標，是行政意志與力量的體現。
說更具體點，下面是指導意見中的目標說明，非常直白，大家可以自己體會：
到2025年，與政府治理能力現代化相適應的數字政府頂層設計更加完善、統籌協調機制更加健全，政府數字化履職能力、安全保障、制度規則、數據資源、平臺支撐等數字政府體系框架基本形成，政府履職數字化、智能化水平顯著提升，政府決策科學化、社會治理精準化、公共服務高效化取得重要進展，數字政府建設在服務黨和國家重大戰略、促進經濟社會高質量發展、建設人民滿意的服務型政府等方面發揮重要作用。
到2035年，與國家治理體系和治理能力現代化相適應的數字政府體系框架更加成熟完備，整體協同、敏捷高效、智能精準、開放透明、公平普惠的數字政府基本建成，為基本實現社會主義現代化提供有力支撐。
原文鏈接： http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm
正因國情在此，所以這些年 G 可視化項目才如雨后春筍一般涌現。智慧城市、智慧農村、智慧水利、智慧交通、智慧民政等等，都是借助這股東風蓬勃發展。
所以，商業和政務的迫切需求，催生出一大批可視化服務公司，如 EasyV、ThingJS、觀遠等。即使頭部大廠也生怕錯過這個機會，紛紛組建團隊進行行業布局。如騰訊云的 Raya Data、阿里云的 DataV、網易的數帆等等，都已經小成氣候，初現鋒芒。
市場需求旺盛，規?？焖僭鲩L，前景理應一片大好！但是……
市場總規模的擴張，帶給個體的收益卻不一定有表面看起來那么理想，尤其是設計師崗位。
這要先從常規 UI 設計行業說起，UI 設計師工資已經是國內設計行業工資最高的類型之一，從10年前的屌絲行業到今天能和老牌貴族建筑設計叫板，是非常了不起的成就。
而之所以有這種收入，除了移動互聯網爆發以外，最重要的原因就是互聯網產品的 “利潤率”，可以用非常少量的職員撬動上億甚至上百億的利潤。
如王者榮耀 2021 年全年盈利 28 億美元，接近 200 億人民幣的利潤。一款游戲的利潤直接達到萬科（2021年利潤225億）和中國人保（2021年利潤216億）的水平，他們都是在冊員工超過 10W 人的大型企業，也是國內各自行業里的巨頭，而王者的員工只是他們的幾百近千份之一。
再如螞蟻金服、微信、抖音之類的國民級互聯網應用，都是用極少的員工達到讓人難以置信的估值和利潤，這在傳統行業是無法想象的。
所以能盈利的公司會給員工開出滿是行業紅利的待遇，拔高行業上限的同時，也迫使那些有志于挑戰巨頭的新公司愿意抬高工資價碼，吸引人才。
總結起來，UI 之所以平均收入遠超平面、服裝、工業、室內等老牌設計行業，并不是因為 UI 專業門檻更高，而是以行業規模、項目規模、利潤率三個核心指標的共同作用形成。
其中，項目規模和利潤率的重要性，其實遠遠大于行業規模，這是很多職場新人最想不通的地方。
例如廣告行業已經是一個萬億市場了，除了分眾這家互聯網獨角獸外，其它老牌廣告營銷公司每年財報的營收和利潤大家感興趣的可以去搜搜（下圖為 21 年財報）。
看看他們的營收總額和凈利潤比例，以及員工總數，你自己就會得出，作為普通平面設計師的待遇，是絕對不可能超過頭部互聯網企業的，甚至能達到中游水平都是超常發揮的結論。
行業規模大，但是頭部企業規模和利潤卻不高，除了行業本身的平均利潤率因素外，還有一個原因就是業務是高度分散的，沒有被集中在少數頭部企業，供應商數量龐大，不像多數 C 端市場都由少數幾家公司或者產品把持或直接壟斷。
在可預見的未來，可視化行業也會處于這樣的情況，競爭激烈，利潤率低。而且作為 B 端服務商，不要看各家企業需求旺盛，政府各級單位招標不斷，實際上每個項目的規模都不大，百萬內的項目才占行業的絕大多數，這是不太符合滿足我們收入期待的項目規模。
而單個項目規模在未來高速擴大在我看來也不太現實，有兩個原因，一個是項目使用人數極少（通常也就幾十上百人…），另一個就是對可視化項目實用性的質疑。
如果看過航天相關的報道，就會看到指揮室數據大屏相比我們網上看過的案例比起來，簡陋得發指。這會是因為總局沒有預算，請不起設計師和團隊開發嘛？
為什么航天指揮中心沒有用下面這種 “科技感” 滿滿，復雜的我坐下面保證除了標題一個字也看不見的 “高端設計”？
原因說出來讓人沮喪，因為他們 —— 真的要看上面的信息??！
真正能發揮可視化價值的場景并不多，很多項目出發的意義，就是為了表面工程（各級ZF單位需求，自行體會），裝飾屬性大于實用性。既然實用性不夠高，很多甲方心里也清楚，是花錢裝裱門面的，那么投入的預算就更不可能太高。
所以，我對可視化行業的整體的發展是認可的，但對單家公司或項目的預期，卻是悲觀的，它們沒法達到我們已經習慣的 C 端和 SAAS 行業的高度。
最后，還要探討下數據可視化中設計師的團隊價值。
我們知道，一個完整的可視化項目設計與開發門檻都是非常高的，但因為高，創造的價值就高嘛？項目營收的成本占比就高嗎？
答案依然是否定的！因為可視化行業的絕大多數項目都是 “傳統” 的外包項目。
不管是商業是政務領域，外包最重要的任務，都是找到業務（中標）。樸素的價值觀會認為，只要技術和服務夠好，業務自然源源不斷，其實不然。技術服務都是后驗的，客戶沒有合作過之前是不知道的，在市場上挑選服務商，可不是打開淘寶買家評論查看分數和具體評價篩選。
所以，外行了解服務商的窗口，更多是通過熟悉的中間人介紹，或者銷售的嘴。誰能拿到項目，誰就為公司創造了最大的價值。后面怎么做那是后面的事，換誰做不是做……
這就是最常見的外包企業思路，所以技術人員或者設計往往都是消耗品，沒有那么強的依賴性。而在具體外包實踐環節中，項目的執行決策也和一般 B 端、G 端項目不同。
我以前一直強調，B 端項目的存在價值，是用來解決業務問題，為企業 —— 降本增效。但是可視化項目往往不是用來解決問題，而是用來 —— 解決產生問題的人！
尤其是面向政務的項目，在領導的需求面前，是沒有體驗這一說的，首先考慮的應該是 ”科技感“（結合前文理解），不然怎么展示自己貫徹上層指導意見……
這種環境對于創意類職業是非常不利的，一方面創造的價值并不顯著，另一方面是由別人 “教你” 怎么做設計。長此以往，你會越來越缺失職業競爭力和發展可能。
問題二，則是因為可視化項目獨立開發成本太高昂，做的視覺內容又非常固定。于是有實力的團隊就紛紛投入可視化編輯工具的研發，解決最麻煩的底層圖形方案。
這和 B 端的前端開源框架非常類似，把底層的代碼、交互、動畫、性能優化都幫你做好了，設計師和程序員可以用非常省事的完成項目的視覺內容落地。
但是，常規 B 端管理項目中，界面樣式一直就不是最重要的事情，而是解決復雜頁面流程和組件交互的問題。所以資深的 B 端設計師樂于應用第三方的框架來完成復雜的項目。
而在可視化領域中，多數項目并沒有那么多和復雜的交互需要考慮，視覺展示效果才是第一位，絕大多數團隊應用第三方框架是大勢所趨。核心工作內容被影響，那才叫觸及靈魂的打擊。
所以，在我看來可視化設計師可以創造高價值的場景，只會出現在兩種團隊中。
第一種，是給其它可視化團隊提供圖形服務的 SAAS 工具，比如 Raydata、EasyV 這類。都需要團隊有非常優秀的前端程序員和技術積累，換句話說，就是既要有技術實力又要有資金保障的團隊。
第二種，則是走優質項目輸出路線的小團隊或公司。會有一些優秀的開發人員坐鎮，再由設計師主導來推動業務發展，不會什么項目都做，會選有價值的用心交付。例如早年的 UI 外包團隊 ARK、Eico、TangUX 等都是這種路線。
這兩種對比目前海量的服務商來說都是鳳毛麟角，第一種類型是可視化設計師發展最好的歸宿，因為設計產出和圖形技術發展高度捆綁，只有這樣的團隊才會最早最快接觸新的專業技術方案。
除了這兩類，不要對其它外包類公司有太多的期待。在整個互聯網行業中，成熟產品團隊非常不喜歡招外包設計師不是沒有原因的。
至于未來是不是可視化內容會在 C 端領域打開局面，發展出一些新的應用場景，我就不過早下定論了。
最后，做個總結，給目前還沒有進入可視化設計行業，或者是誤打誤撞進入這個行業的設計師一些職業方向的建議。
可視化設計行業和廣告業非常類似，就是從業人員收入構成是沙漏狀，而不是像 UI 這樣呈金字塔狀的，缺乏健康的增長梯度和充足的腰部崗位。
可視化設計師從菜鳥進入專業階段所需的知識量更大，準備周期更長，技能門檻更高。在初中級階段和一般 UI 行業對比起來 —— 毫無性價比。
如果本身熱愛可視化，想將 FUI 那些東西搬進真實的世界和項目里，也做好了艱苦學習的準備（說不定是你樂在其中的），那么這個的行業的頭部崗位就是為你這種人準備的。
畢竟行業體量大，當然就會有真正優質的崗位出現，只是它的門檻高，沒有那么多水分能擠。
如果不是異常熱愛這個行業，具備較強的自學能力，或有一定的 3D 和圖形技術知識積累，那么不太建議往這個職業深入發展，一般的 B 端和 SAAS 項目才會是更好的選擇。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖表的作用在于對數據的合理的詮釋而不是美觀。所以，在了解圖表怎么繪制前，更重要的是了解圖表是什么，包含哪些類型。下面就做下相應解釋方便大家理解～
在今天，隨著大數據和數據分析理念深入人心，圖表在 B 端設計的地位越發重要。
那么什么叫圖表呢？
圖表指的是可以直觀展示統計信息屬性和數值的圖形表格，對于多數人來說第一次接觸圖表概念都源自中小學計算機課程中的 Office Excel 表格教學。
要理解圖表，你就繞不開 Excel 這個軟件或其功能形式。我們都知道 Excel 是一個表格工具，可以任意填寫表格化的信息內容進去。
但那只是呈現出來的表象，Excel 的真實身份應該是一個數據記錄工具，通過這種表格形式記錄，比如班級學生成績、客戶聯系方式、倉庫進銷記錄等等。每一條記錄下的信息都是一條獨立的 “數據”。
盯著表格看，我們確實可以看到一些具體的信息、數據、內容。但是，數據的作用只是讓我們自己去精確定位想要的內容而已？顯然是否定的。
我們統計數據的目的，還包括要從眾多的數據條目中獲得反映真實情況的 “規律”、“趨勢”，如果我們只盯著數據條目一條條的瀏覽，是很難找出這些信息的。
于是，人類就發明了圖表這種可視化工具，幫助我們對數據進行總結，用更直觀的視覺方式來認識數據和找出規律和趨勢，這也是為什么 Excel 是最強大的圖表生產軟件的原因之一。
總結：圖表是統計學的子學科，它幫助我們更好的找到數據背后的真相，并做出正確的決定。
圖表既然由數據內容生成，這個生成和轉化的過程當然具備一些基本的規則和條件。要滿足圖表生成的數據必須要包含兩種基礎信息 —— ”維度“ 和 ”數值“。
它們是組成絕大多數圖表的基石，比如看下面的表格，一次體檢中有三個班級的5個同學，他們的身高、體重、體脂率、肌肉含量、視力各不相同。
我們可以從中挑選維度和數值，比如姓名做緯度（X軸），體脂率作為數值（Y軸），那么就可以生成基礎柱狀圖表。
從上面案例可以知道，橫向緯度表示的是你圖表中要包含多少不同的展示對象，縱向數值則表示你要顯示該維度的哪一類數據。
緯度通常指某個具體的人、日期、事件、分類，通常是 不可量化 的內容。而數值則是指包含 可量化 的數據類型，重點要記得數值是指 “數據類型”，而不是指具體的參數值。
再進一步，上方生成的圖表，雖然直接反映了我們選擇的緯度、數值的情況，但顯然對于不了解數據背景的人來說太簡陋了，不知道它們代表的意義。所以，一個完整的圖表還會包含一些 “解釋” 性元素，來讓觀看者更好的理解圖表內容。
所以，一個完整的圖表中除了中心圖形，還會包含標題、單位、緯度圖例、網格、選中提示等內容，用來提升其閱讀性。
以上只是最基礎的示例，不同圖表、內容，對說明信息的要求各有不同，我們會在下方做出一定的解釋。一個優秀的設計師要學會如何因地制宜，優化圖表的內容構成，并對展示的信息進行取舍。
隨著統計學的發展，圖表也經歷了一系列的增長與創新，除了我們常見的幾種圖表外，還發展出了大量平常看不到，只存在于各自專業領域的特殊種類。但是，它們對我們的生活和工作也起到產生了重要的影響。
比如在新冠危機中，政府和專業機構對民眾開放的數據就大量使用了圖表進行解釋，讓我們可以很清晰的了解事情的走勢和真相。
之所以有這么多不同圖表，讓人眼花繚亂，在于數據所包含的信息和特性不同，導致了它們所總結的規律類型也不同。
業界將圖表展示類型分成了四個大類，包含比較、分布、構成、聯系，雖然比較簡陋，但這是新手認識圖表最簡單的方式。
我們簡單解釋下這四個分類代表的作用：
之后我們就會以這個框架，來解釋不同分類下的圖表，幫助大家建立對圖表的正確認識和設計方式。除了這種標準分類以外，我還額外做了一個歸類，就是基礎和高級圖表。
前面提到，一般圖表就只反映緯度、數值兩個方面的圖表類型，很容易理解。但復雜的圖表，就會超過這個范圍，它可能包含了多個維度、多種數值、甚至第三、第四。
比如下面這個散點圖，除了身高（緯度）、體重（數值）外，還表現了個體（圓點）、性別（色彩）。在圖表本身的解釋性元素中，還包含分布區域、最大最小值標識、體重/身高均值。
這已經超出一個沒有接觸過統計的新手認知范疇了，是需要具體學習才能學會如何閱讀和應用的圖表。
這還是比較簡單的高級圖表，往后還有類似?；鶊D、K線圖（韭菜的自我修養）、和弦圖等類型，它們有各自使用的規范、參數，以及應用的場景。
高級圖表的復雜度和抽象性，決定了它的使用門檻較高，識別效率較低。而隨著數據各行各業數據重要性的提升，對圖表的需求已經不再局限在二維抽象圖形的應用上，而是提供了視覺效果更精美，制作過程更復雜，閱讀門檻更低的可視化數據展示內容。
雖然我們在本篇文章不會拓展到大屏可視化的領域，但是掌握好平面二維的統計圖表，提升對統計目的的認識，是深入學習可視化的必要條件。
接下來，我們就要來介紹一下如何繪制圖表了。雖然圖表之間有比較大的區別，但它們有很多細節是具有統一規范的。優先掌握這些一致的內容，再理解不同圖表的具體繪制差異，可以幫助設計師快速上手圖表設計工作。
上面我們提了，一個成熟的圖表會包含不少解釋性信息，怎么放置解釋信息和圖形元素是我們在設計時的第一個考慮要素。
常見的抽象圖表都有一個完整的矩形區域，我們要先確定該圖表的具體占比尺寸。然后，對這個區域進行布局的規劃，而這個布局的規劃就和解釋信息的展示有非常大的關系。
比如，你需要在圖表中增加標題和圖形解釋，那一開始把圖形做成了上、中、下三欄。有的情況下我們可能還會增加一個默認存在的文本型解釋模塊，那么還會再右側再切割出一個區域出來。
除了解釋信息外，我們在設計中有時候還不能忽視交互內容，比如要包含分類篩選、時間線控制、開關等控件時，它們準備放在哪里，也要在這個階段確定出來。
經過前面的切割，其實我們就能確定出中間的圖形區域了。在開始繪制前，我們還要對圖形具備的信息做進一步的確認，XY 軸坐標是否包含文字解釋，餅圖類是否包含延長指示線說明。
將這些區域先確定出來，減去它們的空間，就留下了最終要圖形展示的區域了。
合理的圖表繪制流程變是先布局，確定信息內容，最后才集中處理圖形元素。如果對于前端適配有一定了解的同學，也就知道在完成這些步驟以后，圖表的適配規則制定就暢通無阻了。
有了圖形區域，接著就可以開始動手畫圖形了。不管是基礎還是復雜的圖形，你想要讓自己輸出的作品嚴謹、質量高，就需要應用專業的繪制方法。
圖表圖形的繪制類似尺寸作圖，需要應用各種參考線、輔助工具來完成。圖形本身并不是我們用來做創意的地方，而是要以準確的方式繪制出來。它包含兩個重點，分布和比例映射。
以一個柱狀圖表舉例，該圖表中維度包含了 7 個對象，即應該出現 7 個柱形。那么首先就要通過等分圖形區域，來確定柱形的分布，XY軸文字的對齊對象。
如果你不羅列對象具體數值的話，到這步也就結束了，但如果對象數值是必要顯示內容的話，那么就要盡量確保柱狀的顯示比例和數值是一致的。
假設在上方案例中，Y軸總高是 100px，那么數值中每 1 小時的高度就是 100/16 = 6.25px，我們就要用你寫下來的數值 * 6.25，保證柱狀圖高度比例和你的數值一致。
而類似餅圖這樣的圖形中，只要添加了具體數值內容，那么餅圖中不同的扇形角度，也要符合對應的比例。比如占比 10%、20%、30%、40% 的四個對象，它們的角度就分別為 36、72、108、144。
這就是分布和比例映射的基本邏輯，不管是什么圖表，只要它根據數值在區域中進行繪制，就一定會受到數值的影響。不管學習什么新的圖表，都只要確定這兩個步驟就可以輕松準確的完成繪制。
至于具體該怎么實現，用插件還是參考線，就是軟件基礎的問題了，不在這里展開。
在圖表設計中的最后一個問題，就是關于配色的方案了。圖表配色的技巧主要關注兩點，選色邏輯和搭配方法。
選色邏輯，就是圖表用色的一些基本規范。我們知道圖表往往非常的復雜，或者頁面一屏中會包含大量的圖表。
在這個基礎上，圖表的用色就注定是不能太 “剛猛” 的，飽和度要偏低，明度要適中。在選色面板中，它大概處中部偏上的區域。即使產品主色用的飽和度非常高，圖表要和主色統一，也建議在主色基礎上做適當調節，在色系上接近即可。
并且，建議新手在繪制圖表的過程中千萬不要用漸變色。即使在各類飛機稿中，漸變色的展示效果也非常的不理想，沒有任何可讀性。
有了選色邏輯，多色搭配的思路也就變得而非常簡單了，只要重點關注色環的配色模式即可。
配色模式多種多樣，包括補色、三角對立、類似、四元、方形、臨近等等，不用想的那么復雜，只要牢記根據你的設計風格需要，你是要相鄰配色，還是等分配色。
相鄰配色，即以一個色系的臨近色系為標準的搭配。以 H（色相）、S（飽和度）、B（明度） 配色模式為準，飽和度和明度數值基本不變的情況下，小幅度變更色相。
等分配色，也是保持飽和度、明度的一致，根據需要的色彩數量（大于三個）在色環中按角度等分，獲得均勻的色彩過度。
配色的方法很簡單，難的是你們如何根據頁面的需要、視覺的體驗，合理的運用配色的方案，這沒有統一的標準。要記得圖表配色不是僅僅針對自身，會和頁面其它色彩產生聯系。
保證相對平緩、不太激進的圖表配色思路，是最安全的做法。
首先解釋第一類圖表 —— 比較。
比較圖表的作用，是用來對緯度的數值做對比的圖表類型，直觀對比不同對象的強弱、排序、趨勢。
柱狀圖，是一個使用柱狀圖形反映緯度數值的二維坐標軸圖表，也是我們最常見的圖表類型。
在這個二維坐標軸中，我們可以用縱軸代表數值，也可以用橫軸代表數值，另一個軸代表緯度。即在顯示的過程中可以使用縱向或者橫向的（橫向的也被叫成條形圖，都是一回事）。
柱狀圖除了每個對象包含一類數值的做法以外，也允許包含多個數值類型，每個類型使用一種顏色表示，這種圖表叫分組柱狀。
并且，柱狀圖作為最基礎的圖形，衍生了非常多下級的柱狀類型。包括：堆疊柱狀、子彈圖、正負混合、瀑布圖、直方圖等。但要注意的是，并不是所有柱狀類圖表，都是作為對比來使用的。后續會有進一步提示。
柱狀圖通過柱體的長短，可以直接對比不同緯度數值的高低，但使用也有一定的差別。
緯度之間關聯性不是太強，或者按時間順序排列的就適合用橫向排列的方式，比如下方記錄我隨時可能猝死的打工人一周睡眠時間（見左圖）。而涉及排名或者時間的數據組，就適合使用縱向排列的，比如 Geekbench 展現不同 Mac 處理器強弱的排行榜（見右圖）（os：Pro 居然比 M1 還低？）。
兩種圖表的選擇還和 UI 環境的交互方式有關，在APP中，橫向排列的柱狀圖可以顯示的數量非常有限，想放更多緯度就要左右滾動，體驗不佳。而使用縱向排列則對空間的要求沒那么高。
折線圖也是基礎圖表，通過創建端點并使用直線連接的方式展示出高低不平曲折的線段。折線圖在圖表形式上和柱狀圖非常類似，但兩者在使用上是有一定區別的。
當我們要選擇使用柱狀圖的時候，往往關注數值的總量，或者維度代表的是不同的對象，比如不同 CPU 之間的跑分對比。但是折線圖的使用就沒有那么單一，它主要應用在單一對象的單個維度變化對比中。
比如，我們監控 CPU 的占用頻率，那么維度使用時間，數值用百分比，這里面產生的數據都是圍繞 CPU 的占用頻率展開，但如果維度改成了當前時間不同核心的占用數值、溫度，那么我們就肯定不會用折線圖來表示。
折線圖的使用是要通過線段的曲折來反映數值的波動，在應用過程中往往不作為一個靜態的圖表展示，而是應用于監控的場景，比如監控股市市值、網站在線人數、CPU溫度、同一地區降水量等等。
在折線圖中，最大的認知誤區就是對于曲線線段的應用了。在數之不盡的網上飛機稿中，使用曲線的折線圖表 90% 以上都是錯誤的。
這要回歸本質來探討，折線圖也是進行對比的圖形，如果沒有直觀的波動，那么這個圖形帶來的信息量就非常有限。曲線會因為圓角的緣故而降低波動帶來的沖擊力，甚至抹平這種對比。
只有在必定會連續出現極大波動的圖表中才適合使用曲線，例如圍繞在會有一個中間值數值，曲線進行正負兩端移動的類型，比如監控呼吸中含氧量（呼和吸一個周期的維度）。
所以，盡量避免曲線的應用，不僅畫起來麻煩，而且實際使用效果極差。
作為折線圖，在一些數值代表完成、占滿、填充的概念時，往往就會覺得單純的線段表示不夠直觀，于是就產生了將下方的區域填充色彩的 —— 面積圖。只展示一個數值類型不夠要加入多個數值和線段的就叫折線堆疊圖。
雷達圖，相信大家看到最多的地方就是在游戲的角色面板或者武器面板中。雷達圖是一種偏向概括性的圖表，并不能用來體現大數值和高頻變化，是用來對比同一個對象不同維度數值的圖表。
雷達圖的應用，首先要確認出不低于5個的維度，并且這些維度可以使用相同的數值體系，比如0-10分，0-100%等。并且，這些維度最好是由同一個對象身上拆分出來的，而不是 5 個維度指代不同的對象。
簡單來講，就是我們可以用雷達圖來表現一個學生不同科目的水準，這樣雷達圖可以大致概括這個學生科目掌握情況和相對的強弱。
但是不應該用雷達圖來表示不同學生同一科目的水準，那就只是更基礎的對比，用柱狀圖就可以了。
當然，雷達圖中的占用內容，也可以添加多個對象，一個雷達圖中可以放多個同學不同科目掌握水平的疊加圖形，以此對比他們的差異。
雷達圖的繪制，也是優先制定說明內容區域，然后再開始圖形的設計。
因為在雷達圖中，我們對維度的描述，基本只能設計到不同端點外部，那么文字本身的數量、占比，就會對圖形的顯示產生非常大的影響，并且在雷達圖中維度的描述文字是必須的，過度精簡還是用其它方式體現都很不直觀，所以優先預留足夠的文字空間。
然后，根據我們需要的維度數量繪制一個等邊的多邊形，并設置合理的數值。
之后，才是確定出這個多邊形內所包含的數值刻度數量。假設除圓心外總共要顯示5級，那么就要畫 5 個堆疊的等邊形，那么我們就從最大的那個等邊形入手，再復制4個出來，對它們分別乘以 80%、60%、40%、20% 即可。
最后，再將每個維度對應數值根據百分比將端點打在維度的直線上，用鋼筆工具將每個端點連接起來創建一個完整的不規則多邊形，就完成了雷達圖的設計。
如果想要在一個雷達圖添加多個對象，只要用不同顏色描邊繪制對應數量多邊形即可，如果要填充這些圖形，就一定要使用透明度填充來完成，否則可能遮擋后方的端點，導致圖形不全。
階梯圖是一種用來對比前后數值漲跌的圖形，它是柱狀和折線圖的合體。它和折線圖的不同之處在于，更關注每個對象增減的份額大小。
不僅僅是關注波動，而是更具體的值。類似關注一只股票全年的股價漲跌情況，每個月漲跌的具體額度，就適合使用階梯圖表現。
漏斗圖因為長得像漏斗而聞名。雖然這個圖形看起來像一個錐形或者三角形，但本質上漏斗只是條形圖（橫向柱狀圖）的變體。
漏斗圖是一種對階段進行分層表現的圖形，從上到下的順序中，數值一定會呈現衰減的趨勢（起碼不會變大），然后從上到下的柱體就越來越小。
例如，UX 數據分析經常用的漏斗模型，就會建立一個從用戶訪問主頁，到最后完成下單的轉化率，每一個步驟都會有一定的用戶流失。
在基礎漏斗圖之上還有進一步拓展，比如對這個轉化本身有一個預期，那么可以做對比漏斗圖，比較現實和預想中的差距。如果要對比 iOS 和 Android 端的漏斗數據，還有比較漏斗圖，對比兩側的長短數據。
第二個解釋的圖表類型 —— 分布。主要是用來研究數據分布情況的圖表，對不同數據的統計分布狀況進行描述。
直方圖是一個看起來和普通柱狀圖非常接近的圖表類型，是一個用來表示同一個緯度范圍中，不同區間頻率的圖形。
直方圖是一個二級圖表，是對一級數據的進一步轉化。比如看上圖案例，散點圖（下面會說）本身記錄了不同的數據的位置，而直方圖就是記錄在發生在這個緯度內的次數。
直方圖乍一看很像柱狀圖，但實際應用場景往往使用了非常密集的柱體，讓它看上去像折線圖。對于設計師來說和直方圖打交道是非常普遍的，那就是在 Lightroom 和 Photoshop 中的通道直方圖。
當視覺設計師、攝影師在學習處理位圖的時候，就必然要學會直方圖的讀取，它并不是用來讓我們學習如何對比前后數據差異的，而是讓我們可以快速掌握這張圖片中像素點在不同通道的分布量。
直方圖是統計學中的 “頻率分布” 的視覺表現形式，需要確保使用的場景符合直方圖的定義，以及確保用戶能理解圖表內容。
對于直方圖來說，如果維度對象少，只要獲得相關的信息和數值，就可以像柱狀圖一樣來繪制。
如果是針對一些比較專業的場景，如上方的通道直方圖，那么就要放棄自己完成的目標，一定要借助相關插件，或者使用 Excel 等工具實現后再導入進來。
箱型圖也叫盒須圖，和直方圖類似，它也是一個二級圖表，即它不是直觀反應原始數據，而是對原始數據的狀態進行轉譯。圖表中的每個箱型反應一組數據的分散情況資料，每個箱型包含下面這些信息元素。
箱型圖反應的是一種 “大概” 情況，它不是一種用來進行精確數值展示的圖形。箱體主要是上四分衛和下四分衛的區間組成，下/上四分衛指的是 “樣本中所有數值由小到大排列后的 25%/75% 的數字”。
這里的排列主要通過 “數值大小” 來決定，而不是分布數據。比如一個班上100個同學包含身高 150、160、170、180、190 五種身高，雖然每個身高包含的人數不同，但 160 就是它的下四分衛，180 是它的上四分衛。
那么160-180身高包含的人數就是箱體本身的區域，上四分衛到上邊緣是 180-190 的人數，下四分衛到下邊緣是 160-150 的人數。
箱型圖可以反應的信息是非常豐富的，它可以非常有效的反應不同數據組的虛實、占比、上下限，可以獲得非常多有趣的結論。
在箱型圖的設計中，對于箱體和觸須的表達要依據數據本身的重要性來判斷。有些場景對最大最小值更在意，則箱體顏色就淺，線段更矚目。而要重點關注箱體的話，則可以對觸須進行弱化使用虛線。
同時，箱型圖的主要識別信息是 Y 軸的長度，一個美觀易度的箱型圖，箱體寬度盡量控制在一個比較纖細的水平，不要為了填充畫面的空白強行做寬。
相信稍微了解過股票還是基金的同學，對K線圖那可就一點也不見外了，下陽線、收盤光頭陽、小陽線，開口就是老韭……不對，老股民了。
K線圖是箱型圖的一個變種，也叫蠟燭圖，主要應用在股票、幣市、期貨等市場的交易數據上。一個K線圖包含了陽線、陰線兩個大類。陽線代表上漲，陰險代表下跌。
每個類型中，同時還表示當日成交中的最低價和最高價，柱體代表的是開盤價和收盤價。在我國股市，上漲用紅色，下跌用綠色，在幣市則相反。
K線圖實際上動手設計它的情況微乎其微（只用開發好的），我們只要了解它的原理即可。
K線圖基本只應用在和理財有關的證券行業中，在會出現 K 線圖的圖表模塊中，必然會出現相應的交互操作。如左右滑動、放大縮小，它是一個具備響應模式的圖表類型，包含兩種狀態。
如果空間足夠，則使用箱體和虛線的常規設計。如果顯示的對象密集，那么就會以一條直線來顯示，忽略掉箱體的部分。
同時，不同的場景，對于陰陽線箱體的展示會有一定區別，除了色彩外，還會應用實心和描邊的區別。
因為涉及財產、交易，針對K線圖的設計，一定要做好前期的業務調研，以及對比不同的競品，降低設計出錯的概率。
散點圖是一個使用也非常頻繁的圖表，它通過在 XY 坐標軸中添加圓點來表示不同對象的分布情況。
常見的散點圖就是對普通二維坐標軸進行 “打點” 的圖表，每個點代表統計學中的一個 “樣本” 或數學概念中的一個 “定量”，下面我們就用樣本來稱呼每個散點。
每個樣本在散點圖中必然包含兩種以上的信息，一個是緯度值，一個是數值，這樣我們才能確定它在坐標軸中的位置。
當然，針對樣本并不是只可以包含兩種信息，比如表示班級成員身高體重的散點圖，我們可以再引入男女的對比，對散點圖進行色彩的區分。再者，還可以添加體脂率，用每個點的大小來表示。
散點圖是一個很直觀的樣本分布圖表，它是概率論中做回歸分析的主要工具。所以往往我們會看到散點圖內出現了一個線段，那條線段叫做 “回歸線”，他是通過散點分布情況，計算出來的一條均值線段。這個線段不僅可以大致標識數據的趨勢，同時可以用來做概率計算和預測。
回歸線包含指數、線性、多項式三種，對應繪制出來的回歸線是曲線、直線、還是波浪線。
散點圖的圓點可以使用軟件的 Symbol 功能進行創建，確保后續可以統一修改配色和樣式，尤其是在包含多種色彩的散點圖中。
散點圖的繪制不一定要完美契合數據內容，但是在大致的分布和數量上要和實際情況貼合。如果僅僅是隨意的進行分布、均分，那么這個圖表就會顯得非常的不嚴謹和隨意，比如下圖圖表。
地圖圖表，是將抽象的 XY 二維坐標軸替換成地圖類圖形的圖表。本質上它們也包含 XY 軸，所以一樣可以將數據內容進行映射。
最常見的，就是地圖散點圖了。背景由實際的地圖完成，坐標則由經緯度體系來記錄。這是可視化設計中非常常見的中心圖表應用類型。
同時，背景的地圖并不是只包含地理信息地圖，還可以是球場、商場、網頁、建筑表面等內容。
熱力圖則是地圖和散點圖的合體，也是在二維坐標體系中顯示樣本，只是熱力圖更注重的是這些樣本之間的對比。例如區域的降水量、臺風風力表現、網頁的點擊區域等等。
熱力圖本質上也是將坐標軸切割成了若干小塊（樣本），每個小塊有一個對應的數值，然后通過算法繪制邊緣和不同的漸變。
它也是很少直接通過設計軟件繪制的圖表，需要借助插件導入數據來實現，我們只需要確認色彩樣式即可。
構成圖表相對其它圖表來說是最簡單的一種，包含扇形、環形、餅圖、堆疊、矩形樹等類型。
前面看到的圖表大多是遵循我們小學就看過的 XY 軸坐標系（笛卡爾坐標系）建立的，但是餅圖并不需要考慮坐標空間的問題。它是一個依靠角度來反映數據的圖表類型。
餅圖作為一種常見圖表，包含兩個大類，一般餅圖和環形圖。如果沒有一些特殊的交互或者復雜衍生類別的話，環形圖其實就是餅圖中間鏤空的版本……
餅圖繪制的主要依據是需要表現幾條維度，以及它們對應的百分比值。餅圖的顯示有比較大的局限性，那就是顯示的維度數不能過多?？刂圃?2-9 條比較合理，數量過多就會導致圖形失去實際的使用意義。
除此以外，南丁格爾圖、旭日圖，也是餅圖的延伸，通過添加額外的維度或者子分類，對餅圖中的每個對象進行額外的示意。
餅圖作為基礎圖形，多數情況下也是由設計師自己完成的。但很多新手沒有找到要領，導致做出來圖形非常的別扭。我提供一個繪制的簡單的思路，那就是通過繪制不同的三角形來拼裝出一個餅圖。
這類圖形繪制的要點是確保三角形在圓心中的頂點時一致的，如果對比例的繪制有比較精確的要求，可以通過 Excel 之類的工具生成一個基礎圖形做背景，貼著它畫即可。
南丁格爾圖也可以沿用上面的畫法，那就是對每個維度的三角形采取不同直徑的圓做蒙版，就可以畫出不同半徑的占比區域了。
這么做的好處，是將圖形的每個維度獨立成一個單獨的矢量圖形，方便我們后續進行上色。
堆疊類圖表算是一個相對不那么嚴謹的類別，因為它多數由其它基礎圖表發展而來。主要包括柱狀堆疊圖、面積堆疊圖、百分比堆疊圖。
之所以把它歸類到分布而不是其它大類下的圖表子項，原因是只要出現堆疊，就意味著這個圖表的核心目的是展示構成內容而不是對比或者分布。
在柱狀類堆疊圖中，通過將每個柱體切割成不同的更小柱體來呈現子分類的占比。面積堆疊圖，則是單純的把折線圖進行填充然后疊加的圖形。
而百分比堆疊，雖然看起來和面積堆疊和接近。但它是以最上層數據為 100% 標準，往下的每一級對象都根據頂層百分比呈現的分布樣式。
堆疊類圖形的設計，最難的不是圖形，而是色彩的應用上。之所以說堆疊只要應用就比原先圖形的作用更大，原因就是堆疊使用不同的色彩表現層級，對于我們的視覺吸引力遠遠大于圖形本身的輪廓。
而將豐富的色彩無縫拼接在一起，是最容易翻車的配色場景。在這種狀態下，建議大家只用臨近色來實現下級分類的搭配，千萬不要使用色相差異過大的色彩。
而對于面積和百分比堆疊圖，都建議在配色的過程中，直接使用帶有透明度的色彩。因為這些折線并不一定會完美上下覆蓋，當中間出現交匯的時候，不至于信息被遮擋。
矩形樹圖最初是一個設計用來表示磁盤空間占用情況的圖形，通過將一塊矩形切割成不同的區域來表示不同維度的占比，以及位置。
雖然也表示占比，但它比餅圖類圖表表示的信息更豐富。第一點是位置信息和并列關系，比如下面的 M1 芯片的示意圖，就是矩陣樹圖的一種直觀體現，在矩形中不同位置應用的不同芯片以及其占用的具體面積。
當然上方是最理想的情況，通常矩陣樹圖是為了對一些更抽象的概念實現矩陣化的排列。而這個排列中，還有個非常關鍵的要素是其中的 ”樹“ 字。
因為矩陣中的每個切割出來的矩形，都可以作為一個獨立矩形進行下一級的分割，實現一個類樹狀圖結構的信息收納。所以，完整的矩陣樹圖，是可以支持縮放或點擊進入下一層級的。
而使用矩陣樹圖不使用樹狀圖，原因也在于我們需要表現它的占比，而不是單純的結構。所以如果只是簡單表現層級結構，如企業組織架構、知識點拆分之類的，要用樹狀圖而不能使用矩陣樹圖。
在這類圖表在項目中基本不會獨立開發出來，因為其復雜度基本都會使用開源代碼。
設計師的主要工作，就是根據對應開源圖表，指定配色的方案，切割的邊緣大小，以及文字的顯示規范即可。
聯系圖表，是用來展示維度之間聯系的圖表類型，包含?；㈥P系、和弦、韋恩圖、依賴關系圖等。
聯系類圖表中，多數是非常復雜的圖形，已經脫離直接手工繪制的范疇，所以我們只簡單介紹其中幾個有代表性的圖表且給出設計建議了。
?；鶊D是一個用來描述某維度值 ”流動“ 到其它維度走勢的流動圖表。
這是一個比較復雜的概念，比如下面的概念，不同國家人口的流動，人還是原來那些人（數值），但他們以不同的數量比例，移動到不同的國家（維度）。
?；鶊D的應用，關鍵在對數值遷移流向的關注上，它適合應用的場景在監控產品用戶的跳轉去向，貨物的外貿出口狀況，或類似新冠患者流動城區、地點的表示。
?；鶊D的數值總量通常是不變的，會包含起點和終點的維度，而維度的長短即代表其包含的數值總量（權重）。
它有非常多的變種，只有借助特定的圖表生成工具，才能繪制出曲率、比例精準的流線。
關系圖是大家比較不會陌生的圖表類型，它在各類工具性軟件、網站中都有應用。比如天眼查股東關系圖、Wolai 頁面關系圖等。
關系圖中包含了大量的節點，節點之間還有對應的關系，同構線段進行鏈接。常見的關系圖有兩種類型，一種是力導圖，一種是弧長鏈接圖。
力導圖這名字也很難理解，源于力學中粒子存在某種互斥又具有引力的規律，粒子在兩種力的作用下從初期的隨機性會不斷位移趨于平衡有序（讀書多的好處？）。
力導圖通常有一個起點，然后去關聯后續的其它節點，如果節點之間還有關聯，它也可以對這些節點的關聯做出連接。它不僅表現一對多的關系，也表現多對多的關系，甚至在極其復雜的關系網中可以呈現成一定的強關聯 ”聚類“ 信息。
而弧長鏈接圖，則是通過弧線對節點進行關聯的圖表，它既可以是環形，也可以是水平橫線的展示。
和弦圖是環形關系圖和?；鶊D結合的圖表，它表示結構之間的依賴關系和強度，鏈接的線段不再是粗細統一的而是具有粗細比例的標識，且維度之間的長度也有表示。
這類圖表常用于社會學、生物學等學科的研究統計結果繪制上。如果單純瀏覽，看上去非常復雜，所以正確的使用形式是可以進行指定維度的展示和隱藏的。
韋恩圖，它是所有學 UI、UX 設計的老朋友了，一個用圖形層疊相交來表示它們關系的圖形。RGB、CMYK 的色彩介紹里韋恩圖的身影必不可少。
韋恩圖的使用相比起來沒有那么嚴格的數學運算，它只是一種關系表現的方法，可以對各種無法量化的對象進行關系的陳述。比如，UX 設計師應該具備的知識點……
下面是超人的電話亭團隊持續整理收集到的可視化組件庫工具網站，以供參考：
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
目錄：
一、設計前的思考
1、設計思維模式
2、設計理念的確立
3、案例分析（9點）
二、設計時需注意
案例分析（12點）
一、設計前的思考
首先需要思考的問題：設計思維模式、設計理念的確立
1、設計思維模式：
設計思維是一套在設計前需要思考的結構化的流程，用來解決以人為本的問題。其目的是把在設計前所遇到的與設計相關的問題結構化，化繁為簡，形成一套流程，從而進行有序的思考。
設計思維是一種思維模式和認知方式，其最大的特點是已知需要解決問題的結果，如何在已知最終結果的情況下更好更高效的解決問題是其核心目標。
思維方式的確立，可以有效的為設計做好前期準備，提高設計的效率，更準確的為“以人為本”出發而服務。
作者 Timo Kuilder
2、設計理念：
設計理念是在設計構思前所確立的主導思想，它不僅是設計的精髓，也賦予作品文化內涵和風格特點。
好的設計理念很重要，可以使你的設計擁有屬于自己的獨特風格。
設計理念必須以人為本，針對用戶年齡、職業、愛好等特點，進行整合，根據用戶主觀方面的個人喜好，從而進行設計。
作者 Timo Kuilder
3、案例分析：
1、專注：確定產品的主要功能，功能的明確可以幫助用戶最高效的完成任務
案例1：百度網盤
百度網盤是一款云存儲服務產品，用戶將可以輕松將自己的文件上傳到網盤上，并可跨終端隨時隨地查看和分享。
案例2：有道云筆記
有道云筆記是一款專注辦公提效的筆記軟件，支持多端同步，用戶可以隨時隨地對線上資料進行編輯、分享以及協同。
2、特色：每款產品都有屬于自己的特色，區別于同行產品的不同之處，結合產品調性設計，不要盲目跟風；它可以是功能、體驗、或者是視覺
案例：每日故宮
每日故宮是一款以日歷的形式推出故宮藏品的應用，“每天一件故宮藏品”，“讓觀眾隨時隨地看到故宮藏品”。其主要特色功能就是以日歷的形式展示內容，在視覺和圖標上也有自己的特色。
3、情感：在設計的過程中，可以加入情感化設計，使用戶將情感融入產品中，關系更緊密
案例：淘票票
有趣的文案結合IP可以快速的將用戶代入產品中，增強與用戶之間的親和力，有種身臨其境的感覺
4、互動：動效的運用可以給用戶帶來不一樣的感官視覺，即使只是一個小小的按鈕
案例：最右底部Tab欄切換狀態，其互動可以增強用戶與產品之間的互動
5、調研：調研可以了解產品所在行業的情況、市場需求、競爭力、同類型產品的優劣勢等，從而更好的設計產品
調研方法：按調研途徑分為文案調研、在線訪問、電話訪問和實地調研
調研工具：問卷星、問卷網等
分析工具：Origin是一款常用的數據分析軟件，操作簡單，可視化直觀；SPSS是一款專業分析工具，其功能包括數據管理、統計分析等
6、用戶：研究用戶特征、細分用戶，站在用戶角度思考，了解用戶想要什么樣的產品
用戶研究：
是一種理解用戶，將他們的目標、需求與產品宗旨相匹配的理想方法，能夠幫助定義產品的目標用戶群
用戶研究重點工作在于研究用戶的痛點，包括前期用戶調查、情景實驗等
作者 Timo Kuilder
7、場景：需要考慮用戶使用場景是怎么樣的，不同場景功能需求不同，可以用故事板的形式展示用戶場景
使用場景：
包括時間、空間、設備支持、社交及用戶情緒等，進行應用場景的判斷和描述的時候，需要考慮全面，不同的場景下存在著用戶不同的需求。
故事板：
故事板也叫分鏡腳本，雖然更多用在電影、動畫、電視劇、廣告等影像媒體的創作前期
故事板工具：Boords
Boords界面簡約美觀、操作簡單，滿足制作故事板的基本功能
8、數據：以數據為依據從而進行設計，不做沒數據支撐且無意義的設計
數據統計：百度統計、百度指數、阿里指數等
百度統計：全球最大的中文網站流量分析平臺,幫助企業收集網站訪問數據
百度指數：
百度指數是以百度海量網民行為數據為基礎的數據分享平臺。在這里,你可以研究關鍵詞搜索趨勢、洞察網民興趣和需求、監測輿情動向、定位受眾特征
阿里指數：
是定位于“觀市場”的數據分析平臺，旨在為中小企業用戶、業界媒體、市場研究人員,了解市場行情、查看熱門行業、分析用戶群體、研究產業基地等
作者 Timo Kuilder
9、少即是多：突出用戶所需的主要功能即可，其他功能可弱化或者直接去掉
少即是多：
現代主義設計建筑大師——米斯·凡德羅提出
在設計中：
少即是多就是明確目標，專注地圍繞用戶目標進行設計，將產品打造得簡單易用，同時又能夠解決用戶的需求
案例：留白
留白是一款提供多種圖文排版樣式，可以將文字、署名和日期安置在圖片以外的留白區域，讓你記錄的每一個精彩畫面都變成有故事的留白卡片
二、設計時需思考
設計時需要思考的問題：
1、簡約：簡潔的界面可以減少用戶發生錯誤操作，減少認知成本，便于用戶了解和使用
案例：字里行間
字里行間是一款文學性非常清新的文字閱讀與創作軟件，可以讓用戶靜下心來閱讀與創作，整體設計簡潔，界面結構清晰，減少了用戶的學習成本。
2、易用：容易上手的產品才是成功的產品，從用戶思維入手，功能一目了然，操作更方便
案例：句讀
這是一款不錯的掌上語句社區，每天可以輕松的看到豐富的優質語句，解決了用戶想要一款可以體驗精彩文學內容產品的APP，功能按鈕明確，操作快捷，符合用戶需求。
3、視覺：產品是否好用為第一重要性，視覺也不可缺少，強烈的視覺可以抓住用戶的眼球，給用戶留下印象，讓用戶記住你的產品
案例1：CCtalk
這是一款致力于為學習愛好者打造的在線互動學習平臺，疊加圖標的運用在界面上特別突出，整體視覺給人強烈的感覺。
案例2：飛豬
這是一款提供機票、酒店、旅游線路等商品的綜合性旅游出行網絡交易服務平臺，金剛區的圖標設計得很精致，給人印象深刻，吸引用戶點擊。
4、色彩：品牌色和輔助色的確立，確定適合產品的品牌色，品牌色可以加強用戶對產品的認知
品牌色：品牌色可以決定產品的基本調性，讓用戶在眾多產品中一眼就看到你的產品，容易被記住和識別。
案例：網易云音樂、BOSS直聘
網易云音樂、BOSS直聘的品牌配色都很簡單，BOSS直聘的配色只有綠色和白色，配色單一卻顯得突出。品牌色運用到界面可以加強用戶對產品的認知。
5、規范：規范設計的統一，在視覺上起到整齊的效果，保證產品的統一性
案例：QQ音樂圓角的設計，圓角的統一和運用使頁面看上去圓潤有親和力，適合聽歌的時候那種放松的心情
6、習慣：遵循用戶的操作習慣，設計是為了讓用戶更好的體驗，而不是讓用戶用的不舒服
案例1：淘寶
案例2：京東
搜索欄和分類：搜索欄和分類都是電商類平臺最重要功能，兩款產品都遵循用戶的操作習慣，放置了右上側，是因為用戶已經對這些功能的位置形成記憶
7、安全：在設計中要考慮的重要因素就是安全性，以及操作和選擇都是可逆的，可以減少用戶的懷疑和心理疑惑
案例1：微信聊天撤回和重新編輯功能
案例2：智行火車票退票功能
案例3：淘寶退款、退貨功能
8、人性化：用戶可以根據自己的操作習慣、所需功能或者愛好制定界面
案例1：UC頭條的頻道選擇、形象選擇
案例2：酷狗新版選擇主題皮膚
兩款產品都很人性化，用戶可以根據自己喜好選擇關注的內容和風格
9、反饋：用戶操作出現異常的時候，及時給予用戶反饋信息，并出現正確引導
案例1：QQ閱讀的書架還沒有任何書本的時候
案例2：虎課網在沒有登錄賬戶的時候出現的反饋界面
案例3：Soul網絡異常
案例4：喜馬拉雅未成年模式
10、警告框：在緊急中斷、需要確認和通知用戶的情況下使用，友好的文案，可減少用戶心理的不適
案例1：微博在無WiFi網絡的情況下播放視頻
案例2：騰訊課堂網絡異常
11、加載：分為靜態和動態兩種形式，動態加載可以吸引用戶的注意力，減少用戶等待的焦慮和無聊
案例1：嗶哩嗶哩首頁和頁面加載狀態，首頁加載是動態，而頁面加載的形式是靜態
案例2：虎牙直播動態加載狀態
12、引導：引導功能，便于用戶了解功能和操作界面，產品更新后也可以使用引導來告訴用戶
案例1：芒果TV功能更新指引
案例2：酷狗功能更新指引
案例3：每日故宮功能解說和功能更新引導
小結
希望通過這次的UI設計思考總結，讓自己變得更好更優秀，總結是對自我的成長和監督，不僅可以提高工作的效率，還可以加強對產品的思考能力。結合UI設計思考過程，體驗不同的產品，感受不同的設計，注意細節、認真分析
作者：黑澤雙熾 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
Neumorphism / soft ui（新擬態也有人叫同化、軟UI）是什么？在前一段時間，大家即使沒有看過，但是應該也聽到過一些關于這種新風格的介紹，或者是在某某趨勢中有類似作品的出現，不太了解或者一看而過。簡單的介紹一下，標題并非判斷結果，而是希望同大家一起探尋一起交流，一起討論這種風格是否會是接下來的新趨勢...
起因是源于2019年11月5日，來自烏克蘭的設計師 Alexander Plyuto 在追波和ins上發布了下圖的一張作品，作者說明信息：
“讓我們想象一下，如果在移動界面設計中，投影的形式發展的更好的話，那將來的界面將會是什么樣的，這是我的愿景?！?/span>
Dribbble-Alexander Plyuto的作品
目前作品在追波平臺收獲贊量4000+，瀏覽量23W+，一路飆升至追波2019年pop排行第一熱門的作品，同時在ins上的傳播也是異常的火爆，獲得很多設計的喜歡，評論頓時炸開了鍋，其中有設計師稱呼這種風格為“Neumorphism 新擬態”或者“Soft UI 軟UI”，于是這種叫法慢慢傳開，可能并不準確。
為什么這個風格會火？你怎么認為？
先拋開作品發布的平臺帶來的熱度，很多設計師認為這本身也是一種潛在的趨勢，隨處可見的C4D的輕質感在不同領域和不同方向的使用，IOS13更新后的部分拋棄了純扁平，重拾了3D的感覺。它會火的主要還是在視覺上，這種風格剛一出現，它是非常新穎的，在長達半年的幾乎高度一致的風格下，它是新的嘗試，讓人憧憬的方向。
能有不斷創新的設計師帶給我們不同的設計風格，首先需要感謝，其次再去以個人的視角看待它。那么多風格的作品，那么擬態就變成趨勢了？我們帶著這個問題，一起繼續探討（我們先把代碼實現等話題放在文章最后討論）。
帶著疑問，仔細看一下上面的作品，第一眼看有點像早期的寫實風格（如下圖），接近真實感，有強烈的質感和空間感......但是不同的是也帶了一點當前依舊流行的多彩模糊陰影的感覺。我們試著去找一下這種風格的特點有哪些......
IOS 13 圖片編輯界面
by Mike | Creative MintsMike
通過觀察，我們不難發現這種風格的一些基本特點：
元素并不浮動
元素色彩相對單一，與背景高度統一
左上角亮色投影，右下角深色投影
多以卡片樣式出現
更加適合大圓角圖形
...
克服恐懼最好的辦法就是 —— 臨摹它！
這種表現方式，其實并不難，去閱讀了幾乎全部相關的資料，也去查閱了作者相關的介紹和說明，試著去了解一下這種風格。首先我們先以按鈕為例，請看下圖：
這三個圖標，你更愿意點哪一個？
這是我們比較常見的三種也是相對比較流行的表現方式，我們分別從常規的頂部視角和側面視角去觀察它們：
扁平的：首先在層級上，扁平的通常給我們的感知就是與背景是同為一個平面，視覺層級也沒有特別強烈的前后關系（不考慮圖標本身），對背景沒有太大的依賴，如果本身背景與畫面整體背景有區分，色彩就劃分了層級。
投影的：帶投影的給我們的感知就是漂浮起來的，單獨看它，它漂浮在背景之上，與扁平并列看，它還要高于扁平的，通常大家為了突出某些內容，某個模塊會去使用這種樣式。投影的使用對背景的依賴幾乎可以忽略，因為投影除了形狀可以調整，包括色彩、大小等都可以調整，且它是無邊界的漂浮著，即你可以隨意定義它的高度。
新擬態：頂面看，它似乎是介于扁平與投影之間，側面看，同樣也是漂浮的，但是它有厚度卻又沒有離開平面，它的范圍相對于投影的無邊界，似乎還有一些模糊的界定。對背景的有一定的依賴，需要幾乎相同的色值去實現。
回到上面的問題，這三個你會更傾向于點哪個？當然上面的案例沒有示意在不同色彩下的情況，也有認為拋開體感上，前面兩張白色背景的已經高于新擬態，因為它與背景的高度融合，在對比度上已經弱了很多。
可能這時候有人會有疑惑，單獨看這一個按鈕不是很有對比性，尤其是在視覺上體現的也不明顯。所以我們簡單繪制了一些卡片試試在作為信息承載的時候，這種風格的效果如何，同時也去將不同的樣式融合，看看脫離背景的約束，局部是否可用與協調。
我們可以從上圖看出，當這種風格用做內容承載時候，不管是文字圖片按鈕或者圖標，僅僅在用做卡片的時候，效果還是蠻好的，它同前面兩種風格一樣，仍然可以清晰的區別內容層次、間距等，但是親測如果大面積使用，頁面會變的更加復雜，整體的層級較難清晰劃分，那么局部使用效果如何？
局部使用在某種特定的場景是可以用的，如下圖的計算器界面。在的卡片、按鈕、進度條等樣式下也能得以很好的展現。但是它比起投影卡片，除了視覺上，點擊感、移動效果......差了很多。
看的這里，大家應該會有一個自我評定標準，這應該（目前）不會是一個大趨勢，至少明年不會，雖然這種風格很受人喜歡，但是這種風格還存在很多弊端：
首先，除了卡片等樣式，它不能有效的提高信息的傳達，頁面內容密集，過多使用容易導致混亂，如果靠投影的大小或深淺來區分，即使達到效果，畫面會變得復雜沉重。
按鈕的凸起和凹陷的狀態，絕大部分需要通過投影來識別，這是比較困難也是比較嚴重的問題，這樣是幾乎很難區分點擊的前后狀態的。
背景色的依賴太大，色彩對比度較低，相對于白卡投影等形式的應用，目前的樣式不能讓內容與背景產生良好的對比，不利于信息傳遞。
實現問題，其實現實難度到還真不難，話筒交給你們......
所以這種風格就涼了嗎？
這種風格其實在某些局部地方還是可以使用的，小面積的和其他風格進行混合使用。無數的可能性需要大家去做更多的嘗試和創新。通過對趨勢的了解，結合我們認知范圍內正確的組合和排列，說不定會創造一個意想不到的“船新版本”。
我們只有在這樣的思考和創造的過程中，獲得更多的靈感。不能不考慮實現問題，但是我們更需要順應趨勢，不管這個趨勢能火多久，在將來能否得到應用，只有不斷的探索更多更新的東西，設計才會變得更加美好。動起手來吧~
下面還是簡單的分享一下實現的方法，并分享一下相關的源文件與作者的源文件供大家學習交流哦！
凸起部分：
第一步：確定配色，最好是淺色或者是深色，選取高光色和投影色（非同色系的不同組合大家可以多去嘗試）
第二部：創建對象，更加適合圓角的對象，可以是純色，或者輕微的漸變效果也更好
第三部：添加投影，投最好是X和Y軸的位移是一致的，至于角度，大家自由發揮吧，這里建議亮色投影和深色投影分別復制一份制作，如果是在同一圖層上做，交界處效果不理想，更模糊。
凹陷部分：
步驟幾乎一致，投影換成內陰影做對角線的深淺添加可以。
這里說一下，凹陷部分完全按照這種風格去實現，顯示效果其實不好，作者包括其他設計師都在這里做了優化，優化后的實現方式上已經不屬于這個風格了，因為最后的實現效果，側面觀察它已經是脫離背景的，如果融合背景也可以，只是邊界會更加模糊，所以仔細觀察作品，細心的同學應該已經發現是如何處理的：其實就是添加一個邊框，再讓投影充當淺色高光。
作者：Frannnk 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( 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咨詢、用戶體驗公司、軟件界面設計公司
通過用各類對比繼續為大家帶來視覺“熱”知識~目錄如下
海報視覺如何做的有創意？有哪些方法呢？
比如從構圖、擬物、光影、嫁接、對比、或者反差？等等等等
每一種又都可以拆分成很多細類。
比如對比在視覺海報中的運用，又有明暗對比、顏色對比、大小對比、虛實對比等等、太多了！
首先我們來分析一下大小對比是如何應用的。
我們先看下這張圖：
兩個元素， 如果一樣大，平鋪在畫面中，就會顯得普普通通的，沒有任何亮點。
如果我們把其中一個放大，另一個縮小，再來看：
畫面是不是有特點了很多，并且有了節奏感， 就連文案排版也有更多的方式。
所以對比就是讓畫面的兩個組成部分/元素，以夸張的手法，布局構圖，以讓畫面產生強烈的反差。以提升畫面沖擊力，畫面縱深，內容豐富層度。是非常有效提升畫面品質的方法之一。
那大小對比如何玩的精通，玩得高級呢？
我們一起來看一下：
1.2.1 全身與半身對比
這種半身人物和小人物的對比，或者頭部表情眼神與小人物的對比主要可以展示人物細節，后面的人物放大表情傳遞情緒，前面的人物展示全身，傳遞狀態，可以很好地傳遞內容，常常用在各類視覺海報中。
(下面右側的圖是江湖哥2017年做的圖，分析兩次了，哈哈，備注下）：
這種對比有強烈的大小反差，并且可以很大程度地拉伸畫面縱深，表現出很強的空間感！
并且還有一個細節：這兩張都是三角形構圖，非常穩定。
所以我們在設計的時候要也要注意畫面的構圖方式，夸張對比同時，要保證畫面的穩定和飽滿！
1.2.3 全身與全身對比
全身的人物對比很小的人物，讓畫面有更多的空間可以利用， 可以留白想象，也可以打造場景氛圍，展示更多場景氛圍。
1.3.1 小場景與大人物
夸張化的對比，讓本該小巧的人物矗立在場景里，很容易就營造除了一種巍峨磅礴的視覺感受。
一般需要很高的設計成本，工時不小。簡單點的做法我們可以直接在人物下面拼接一些小場景，比如這樣：
一些日常小需求中，沒有那么多的時間去打磨細節，就可以這樣做，既能保證按時完成需求，也能有一定的創意性。
1.3.2 小人物與大場景對比
這種方法也非常具有創意性，把一些很小的物體放大，人物縮小， 反差表現兩個主體的大小對比。往往也能有出人意料的效果，需要更多的靈感和想法。
創意本身就是打破常規，把不可能變成可能，達到出人意料的效果就是創意。大小對比在畫面中的各種玩法就是可以很好達成這種目的的方法之一，大家可以多去嘗試，和練習，單這一種方法用好了就很牛逼了。
光影是在平面視覺里常用的一種技法方式，再說光影的創意之前，我們先說一下光影的作用。讓大家對光有所了解。
我們為了直觀一些，直接用幾個圖片說明。
現在這張圖，這是一個瓶子的圖形：
我們給瓶子加入光影：
瓶子就變得立體了！
我們給背景加入光影：
空間變得有縱深了，畫面層次也豐富了起來！
所以光在畫面中最基礎的有兩個作用：
⑴讓物體變得立體，更加真實！
⑵增加空間縱深，豐富畫面層次！
那我們應該如何利用光影，去做更有創意性的設計呢？
光影、光影，先有光后有影。那我們就先來說說主要表現光的幾個玩法：
2.2.1 逆光
逆光就是主體在正前方，光源與主體重疊的一種使用方式，可以說是我們最常用的光影塑造方法之一了：
它的特點是光源與主體重合，形成很強的對比，在畫面可以可以非常好地聚焦視線，強化主體。
2.2.2 側光
側光是光從主體側面打過來的光，一般不會太強：
主要是起到一個豐富畫面層次，營造氛圍的作用。
2.2.3 頂光
從主體頂部打下來的光：
這種光，可以有效引導視覺，把需要的部分亮起，不需要的部分暗下去，由上至下，吸引人的視線范圍和順序。
2.2.4 聚光
從前方照射過來的燈光：
聚焦視線，不要的地方全部暗下去，是一種最能收攏視線的打光方式了。有些細節比較豐富的聚光畫面，暗部也會保留一定的細節，不會是一個純黑色。
2.2.5 造型
給光賦予一個造型，可以達到一種形式創意上的突破，
比如這種：
把光塑造成一個人物的造型，下面放置對應的人物錘喪的狀態，形成很強的人物情緒反差，可以說是非常有創意了。
還可以把光塑造成物體，比如這種：
把偷過來的光塑造成與主體相關的某個物品造型，中間放置一個小的人物，同樣也是一種很棒的創意方式。
2.2.6 分割
除了打光方向，造型之外，其實還可以用光來風格畫面，也可以起到一些非常亮眼的視覺效果，比如這樣：
以上就是光的玩法了，可以看到，光的玩法多種多樣，利用好了可以讓畫面非常具有創意性。
說完了光，我們來接著說說影子的玩法都有哪些呢？
2.3.1 投射
投射相交來說是比較常規的一種處理方式了：
用投影的方式加入到畫面中，可以增加畫面層次，渲染氛圍，讓畫面更有深度。
2.3.2 造型
影子也是可以改變造型的：
本來是應該與人物動作一致的影子，被改變造型與人物產生互動或對比，映射出了非常強的故事性，和內容深度，非常具有創意性了。
在一些插畫或者游戲視覺中同樣也可以應用起來：
內容深度和想象空間直接拉滿！
2.3.3 剪影
配合逆光的形式，將主體以剪影的形式表現出來：
剪影的表現形式，為了凸顯剪影，背景上都會有一個逆光源存在，并且輪廓要清晰，在素材上刻畫一些輪廓光源以讓人物變得立體，可以營造出很棒的神秘感，常常應用在神秘嘉賓、新品發售、新角色發布等活動中。
應用在一些游戲中，強烈的明暗對比配合富有氣勢的人物造型，也可以打造出一些很有視覺沖擊力的海報視覺！
光與影的玩法多種多樣，既可以讓畫面變得立體，又可以提高空間縱深。打光方式、造型、剪影、分割等等用法，可以讓我們的視覺變得不太平淡單調，讓畫面擁有無限想象力的創意方式。
陣營對比的特點是5:5分畫面，以對比色鋪墊畫面，形成強烈的視覺對比，和陣營感。常用于表現兩個不同的陣營，或者正反派的視覺表現中。
除了影視海報、游戲，競技類體育類也常常使用這種對比方法：
主要表現：對抗、競爭、陣營
狀態對比常用于表現同一個人或主體物的多種狀態，比如人物的正常狀態和特殊狀態對比。通過一些技法讓兩種狀態和諧地拼接到一起，是讓單薄畫面豐富起層次和內容的一種有效方法。
比如用畫面拼接的方式：
或者是同一主體，把兩種狀態表現到一起的方式：
主要表現：人或物的的兩種不同的狀態，冰對火、明對暗、正常對黑化等等。
讓兩個不同的時空聯系到一起，形成時間地點上的反差對比。
3.3.1 兩個不同空間的對比
由同一個元素貫穿兩個不同空間，提供畫面的延續性，表現出打破/穿越空間的意境，非常具有沖擊力。
3.3.2 兩個不同時段的對比
同一人物不同時期通過倒影等巧妙的表現方式，與主體形成時間上的對比。具有延續時間長河的感覺，為觀者提供非常大的想象空間，是一種很有創意性的的方法。
主要表現：空間穿越、時間變化的對比。
這種創意方式更多是傳遞人物的情緒，安靜的狀態
對比憤怒的狀態，快樂的狀態對比悲傷的狀態，
也可以表現人物的兩面性，正常狀態和陰暗面等等:
會讓觀者感受到強烈的情緒傳遞，視覺表現上反而不會那么注重。
主要表現：重視情緒的傳遞
此虛實非彼虛實。
和我們常說的虛實對比不同，這里指的是虛幻和真實的對比，比如：
用線條或者影子打造一些和實體區別開的虛構元素，和實體的元素形成對比，會有一種很虛幻浪漫文藝的感覺，可以用于表現一些幻想，不切實際的愛戀類似的主題中，能達到很少見的一些視覺效果。情感和創意都能得到很充分的傳遞。
作者：菜心工作室 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、官方規范
對于剛開始思考 UI 元素尺寸的新人，通常第一反應都是去看官方規范，新人都以為官方設計規范的作用就是告訴你們元素的大小和怎么設置，只要看完了就能懂得如何設計 iOS 或 Android 應用。而實際上，這些規范并不能幫助你們解決這個問題，因為設計規范涵蓋的內容遠遠比這些復雜，比如我們之前翻譯過的 iOS 規范。
我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫所示。
官方并不會提供一個列表，逐一羅列每個元素的長寬和其它參數，所以想要弄明白參數的問題，要自己在這兩套素材庫中選中元素才能查看其尺寸。如下圖左側這個按鈕，我們就能看見它的各項屬性：寬 359pt、高 57pt、圓角 14pt；右側的 Alert 提示框則寬 270pt、高 230pt、圓角 14pt。
因為 iOS 組件庫下載下來的都是 dmg 格式的文件，很多 windows 用戶不知道該怎么打開它，這里只需要百度搜索「DMG 提取器/查看器」就能下載到專門的解壓工具了。
在初期，我們想要設計出符合官方規范的界面，就可以嚴格照搬官方的元素設置。但是，即使官方的源文件所包含的元素及字體已經非常多了，在實際設計過程中，還是會出現它們無法覆蓋的元素類型，需要依靠我們自己去給出尺寸。
還有如字體的應用，官方源文件使用的語言是英文，光是官方應用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應用面板中密密麻麻的字體類型。在真實的中文設計場景下，我們是不可能照搬這種規范的！
所以每一個學習UI設計的新手，都必須要明白，官方的規范終究只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內容，我們是無法設計出有趣個性化的界面的，比如下面這幾款已經看不到 “ iOS 設計 ”的應用。
官方的參數決定我們設計的下限，當你不知道該怎么做，或者設計的目標就是以系統原生的體驗和視覺為準，那么照搬就行了！后面文章要說的，就是脫離開這些束縛之后，該怎么自定義 UI 元素的尺寸。
二、尺寸設置原則
UI 和平面不一樣的地方，就是極其關注元素屬性的具體數值。平面的排版無論是海報或畫冊，使用百分比、目測的形式就足以讓我們做出很多優秀的作品，無需緊盯著其中出現的每個元素的長寬高的數值。而 UI 的設計中，無論字體、圖標還是按鈕，都需要我們嚴謹地定義它們的長寬高，如下圖設計一個按鈕的操作：拖拉出矩形之后，我們依然需要到屬性設置的對話框中去輸入精確到1pt的數值。
這么做是因為在電子屏幕中，圖像的呈現是由屏幕中的像素點來完成的，像素點是最小的顯示單位，一個像素只能顯示一個顏色，所以如果設置了帶有小數點的數值，那么這個元素的邊緣就會虛化。所以為了避免這種情況的出現，我們就得用整數來定義元素的長和寬。
這當中還涉及到不少比較復雜的屏幕顯示原理問題，尤其是和像素倍率相關的基礎知識，我會在另外的文章里分享。
需要注意的是，文章中出現的所有尺寸數值的單位，默認以 iOS 官方規定的邏輯像素單位「pt」為準，即 XD 和 Sketch 默認畫布的單位，若在 PS 中設計需要在這個基礎上乘以 2。
只有分隔線，是唯一可以不使用整數的特例。因為 1pt 的分隔線看起來會非常粗，一點也不精致，感興趣的同學可以自己在 Sketch 或 XD 中畫個列表然后用 1pt 的線條做分隔，再導出到手機里觀看效果。即使是官方應用，也主要使用 0.5pt 的線條做分隔。
無論是在 iOS 還是在 Android 的規范中，都提到過使用 8 x 8 的網格做輔助，這導致網上有很多片面的文章會反復強調對元素的尺寸使用 8 的倍數。
iOS: 使用 8px 網格系統：網格系統可以讓線條和圖像內容在所有尺寸上保持清晰，無需太多的修飾和銳化。將圖形邊界對齊到網格上，減少按比例縮小圖像時出現的半像素和內容模糊的情況。
Android：所有組件都與間隔為 8dp 的基準網格對齊。排版/文字與間隔為 4dp 的基準網格對齊。在工具中的圖標同樣與間隔為 4dp 的基準網格對齊。
實際上，我們在真實的設計環境中，建議大家使用 4 的倍數作為一般元素的尺寸倍率即可，如 8、12、16、20、24……等，它的好處我會在后面的文章中做說明。如果發現 4 的倍數無法滿足某些特定的需要，如：多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數如18、22、26 等。
以上就是我們一開始要建立的元素尺寸原則，精簡完即：
使用整數，只有分隔線可以使用 0.5 的小數
使用 4 的倍數，根據實際情況可以切換成一般偶數。
有了這樣的原則，并養成習慣，我們就能在每次設計前對元素尺寸有個大致判斷，然后再根據需要按 4 的倍數調整
開始我使用 280pt 寬，44pt 高的尺寸，但是覺得有點僵硬，太正式了！這時候反思認為應該是輸入框太矮導致的，所以高度上改成 44+(4x2)=52pt 。這時候又覺得太高了，實際輸入內容也沒那么寬，于是再對高減 4，寬減 40，獲取最終結果。
所以，因為這樣的操作原則，決定了 UI 元素的尺寸不是憑感覺用鼠標拖拽出來的（拖動效率太低），而是在元素的屬性欄中填入它們的數值。UI 的設計過程就是一個不停鍵入參數和調整參數的過程。
這里要聲明，在我的描述體系中，控件指的是：界面中最基本的交互單位，如按鈕、滑塊、開關、分頁控件等，更復雜的如動態卡片，功能快速入口等，就歸入組件中，便于我們理解。
下面，我會根據前面定義的基礎原則，分別講解控件應該使用的尺寸范圍。
一、按鈕 ( Buttons )
按鈕是界面交互操作中使用最頻繁的控件了，當然按鈕呈現的形式也多種多樣，比如可以是文字、圖片、圖標、卡通形象等等。在這里，我們只聚焦于矩形的基礎按鈕。
在進入具體參數的講解前，要先理解一點，按鈕實際上是所有控件中最復雜的一個。并不是因為在設計樣式上復雜，而是因為按鈕承載了最多的產品訴求，權重差異極大，例如看下面的案例。
在上圖里，可以點擊的東西不少，我們只說外觀是標準樣式的按鈕，就有 9 個。而這里面，權重最高的必然是 “加入購物車”。權重最低的，則是前往新品頁。
要定義按鈕尺寸，我們首先需要整理清楚不同的按鈕在界面或整個應用中的權重。尺寸和權重是成正比關系的。當然，顏色也是對重要性表現的關鍵因素，不過不在這里展開。
按鈕高度
當我們設計按鈕時，優先從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來匹配權重，分成高、中、低三類：
- 高權重：40-56pt
- 中權重：24-40pt
- 底權重：12-24pt
高權重的按鈕，類似登錄頁的注冊、登錄，購物詳情頁的購買，流程頁中的下一步，它們的最小高度應該從 40pt 開始遞增。低于這個數值，那么按鈕就很難在頁面中起到視覺支撐的作用，因為會感覺到它太細了。
中權重的按鈕，類似個人主頁的關注、點贊、評論按鈕等。這個層級的按鈕依舊有比較高的交互頻次，所以我們必須得保證它易于點擊。24pt 是在我經驗中便于點擊得最小尺寸了。這種按鈕通常是組件中的一部分，不像層級最高的按鈕常常是處于一個孤立的空間，所以高度如果超出 40pt，就會對當前模塊產生直觀的破壞。
低權重的按鈕，就類似查看更多、標簽、詳情等類型，相對于交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內部文字或圖形元素即可。
按鈕寬度
主流的按鈕都是橫向的長方形，正方形的也有，但就是不能變成縱向的矩形。
按鈕的寬度主要和內容掛鉤，內容數量越多，按鈕自然也就越寬。唯一的例外，只有高權重的按鈕，可以無視內容的長度。因為它們需要更多的區域，往往都是撐滿屏幕內容區域或橫跨屏幕的，可以特殊處理。
普通按鈕，左右邊界與內容的距離過大，就會讓按鈕看起來非常的不協調。所以我們要根據內容的長度來設置按鈕的寬。左右間距的大小，應該小于或等于上下間距的 2 倍。
按鈕圓角
最后，按鈕尺寸還有一個屬性，就是按鈕的圓角。矩形的四角有三種類型，即直角、圓角和半圓。
為矩形設置圓角，是為了讓按鈕看起來有一定的圓潤感不會顯得太尖銳鋒利，這種圓角的數值要給得更加謹慎，只要超出了一定的范疇，就會對視覺的和諧產生影響，我習慣稱呼為——半圓不圓，如下圖右側的錯誤案例。
所以，我們在設計圓角的過程中，一定要仔細感受圓角在畫面中的和諧性。而圓角的設置范圍，小于等于高度的 1/4。例如，一個 24pt 的圓角矩形，圓角的尺寸就應該不大于 6pt。
以上就是按鈕相關尺寸定義的說明，當然，在真實的設計需求中可能遇到很多無法滿足的情況，這就需要大家多做嘗試了。
二、輸入框 ( Text Fields )
輸入框也是比較常用的控件之一，它和按鈕有非常接近的外形。最常見的就是登錄頁賬號密碼輸入框，以及首頁上方的搜索欄了。
輸入框的高度，常規在 36-56pt 之間。低于 36pt 時則輸入框看起來會非常擁擠，比如我用下面學生的案例做個演示。
三、步進器 ( Steppers )
常見的步進器，就是輸入框和按鈕的結合。左右有兩個用來增加數量的按鈕，中間是允許我們直接鍵入數字的輸入框。在尺寸上，它也介于兩者之間，高度在 28-40pt 之間。下面我再用學員的作業做次演示，當低于 28pt 以后，就會發現在屏幕中的占比實在太小了。
步進器中常見的錯誤，是在我們在繪制左右兩個按鈕，設置外框的圓角時，并沒有合理的去掉內側的圓角，這是絕對不應該忽略的細節。
四、下拉菜單 ( Dropdown Menus )
下拉菜單要注意它具有多種狀態，默認、展開和選中。默認狀態與輸入框類似，主流的高度也使用 36-56pt。但是，當菜單展開后，下方多出來的選項菜單，就值得注意了。
菜單的寬度正常情況下與默認狀態相同，而高度根據里面包含的選項數量決定。單行選項的高度，不大于默認的選項框。但也不能過小，新手很容易在彈出菜單中設定過小的高度，使個控件看起來會非常的別扭。
五、開關 ( Switches )
開關也是按鈕的一種形式，通常出現在設置頁的列表中，上方就是它主流的幾種樣式。在設計開關的時候，要先確定一個矩形區域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt，之后再將其他細節填入。
六、滑塊 ( Sliders )
滑塊形式接近開關，通常在中間有一個操作節點，下面有一個用來表示區間的線條。實際上我們該做的就是分別決定它們的尺寸。
節點如果做的太小，不僅會顯得難看，而且會讓人覺得很難操作。它的直徑應該在 16-28pt 之間。而下方的橫線，寬度由所在內容區域的寬決定，高度一般在1-4pt 之間。
七、頁面指示器 ( Page Controls )
指示器用來展示元素序列，雖然在 APP 中沒有太重要的作用，但既然我們加進去，就要讓它看起來和諧。大多數人在定義指示器時，不是太大，就是太小?？梢灾粡暮竺嫣峁┑某叽缰羞x擇，就能保證指示器的尺寸不會出錯。
指示器主要是圓形和矩形兩種形式：
- 圓形：8、10、12pt ( 直徑 )
- 矩形：14×2 pt、16×2 pt、20×3 pt
八、提示紅點 ( Badges )
提示紅點也是大多數應用會使用的一個控件，它的大小應該在 24-32 pt 之間。作為一個圓形，這個控件設計起來很容易，但設計師往往忽略一件事，那就是如果中間的數值超過 10 變成 2 位以后，要怎么處理。
在設計這樣的元素時，我們要用一個矩形元素來表現，即畫一個正方形，然后將圓角設成最大，那它看上去就是一個圓形。那么每增加一位字符，我們就需要為這個矩形增加該字符的寬度，可以用左右間距判斷。
因為相同字號下，不同英文、數字的寬度都是不一樣的，所以我們要根據實際輸入的字段長度去決定圓角矩形的寬度。
九、分頁控件 ( Tabs )
后一個控件，就是分頁控件了，安卓中的 Tabs。這個元素在設計時也受到排版空間的影響。較為寬松的排版風格，高度就比較大，若擁擠則反之。下面是高度的取值：
- 高權重：40-48pt
- 低權重：28-36pt
分頁控件主要應用在頭部和頁面中部的組件中，如下方的案例：
雖然很多時候分頁器沒有背景色，但是背景的矩形框是必須畫出來的，即隱藏填充和描邊，這樣我們就可以通過垂直居中的方式，來確定中間文字的位置。
一個完整的分頁控件，里面會包含兩個或以上的選項，所以定義每個選項的寬是必要的。通常，我們有兩種定義方法，一種是選項少時，直接進行均分顯示，另一種是選項較多，采取定寬模式，寬度最小建議在 64pt以上，才不會顯得過度擁擠。
分頁控件選項處于選中狀態時，有的設計是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個元素如果定義得不好，會讓整個控件看起來非常粗糙，它需要在樣式中能起到畫龍點睛的作用。
下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應該使用的高度都不應該大于 2pt。寬度的話，前者和每個選項背景區域相等，后者則可以在 8-16pt 間（小于文字總寬）。下面是正確設計效果：
十、尾聲
前面說到了不少控件的尺寸，那么真實應用的效果會如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁面中去。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
從視覺空間、字體性格、顏色情緒三個大方面來談一下我對視覺知識的部分理解！目錄如下
空間感：空間感( sense of space)是指藝術形象通過一定手法引起的類似現實空間的審美感受。藝術家通過特定的瞬間造型和空間深度的追求，使人聯想到其活動、生活的環境空間。在繪畫、攝攝影藝術中，形象存在于二維平面中，但通過構圖、透視、線條走向、光影和色彩處理，使人感受到空間的整體性、立體性。
而在我理解總結，空間感其實就是運用各種手法，打造出畫面的空間縱深感，讓二維的畫面變成三維，從而提升畫面的品質、細節、沖擊力。
我們以人物海報為例對比幾張圖，直觀感受一下：
無空間感：
有空間感：
我們直觀的可以看到，都是人物海報，下面的兩張明顯更有品質感。有空間感的圖，畫面會更高級。
那是因為空間感會讓你的畫面更有層次，更靈動和富有場景感。這就是空間感的有點。
空間感，其實就是打造畫面縱深，讓元素之間形成前后關系，那有哪些方法來打造畫面縱深呢？我們總結了5個方法來分享給大家：
1.3.1 構圖
富有極強透視線的構圖能很直觀地表現出空間感。
比如
這類
這類擁有很強透視的構圖，不用做別的，光構圖就能體現出很強的空間感了。
實際運用中，我們還可以利用標題文案排列出這種透視構圖來打造空間感：
1.3.2 虛實
虛實分為：
1.輪廓虛實
2.顏色虛實
輪廓虛實：兩個相同的元素，輪廓模糊的在空間上會感覺處于輪廓實的元素后方。
這是兩個元素，放到一起就會感覺上是在同一個平面上的。沒有虛實關系。
如果把其中一個圓的輪廓虛化：
是不是就會感覺出右邊的會在左邊的前面，拉出了前后的空間感。這就是我們的輪廓虛實了。
顏色虛實：越貼近背景色的顏色，在空間上會感覺處于后方。
還是這兩個元素，如果把其中的一個顏色調成和背景貼近：
兩相比較，顏色更實的飛碟，會處于顏色較淺的飛碟前面。
1.3.3 大小
越大元素會感覺越近，越小的元素感覺越遠。
在實際操作中我們一般可以利用不同元素來制作這個效果。
比如這是一堆元素，如果大小都差不多，就會感覺是平鋪在一起的，沒有空間關系。
如果調整它們的大小， 重新擺放，通過近大遠小的原理，就可以很輕易地打造出元素之間的前后關系，從而營造出空間感了。
大小對比空間再其他畫面中的應用：
1.3.4 明暗對比
除了虛實、大小之外，明暗也能對比出前后關系，從而營造空間感。
通過紋理層次的明暗對比，一明一暗的對比，也能拉出前后關系。從而營造空間感。
1.3.5 穿插
利用元素相互穿插產生的前后關系，也能營造出空間感。
這是1個元素和兩個圓的平鋪，沒有交集。
如果我給他們穿插重疊在一起：
那就能產生元素之后的疊壓前后關系，從而也能營造空間感。
利用在海報中：
以上這五種方式就是我們今天分享給大家的方法啦，
在視覺海報的打造中，基本都不是只靠其中一種方法去打造空間感，而是3種，甚至5種一起運用，可以讓塑造的空間感的更有層次細節和沖擊力。
比如：輪廓虛實+顏色虛實+大小，或者：穿插+大小+明暗。
大家一定要靈活運用，自由組合，以畫面最優效果為目標去做，不要局限在某一個框架里。
字體也有字體的性格，不同的字體會呈現出不同的字體性格特征，比如高矮胖瘦、敏捷、邪惡、可愛、優雅文藝等等等等。通過精準地對字體的結構，筆畫粗細，細節調整，字體效果等的處理表現字體的差異化，使字體的性格調性，與畫面內容相匹配。
2.2.1 力量感、沉穩
特點：橫細豎粗/留白少/重心偏下/轉折筆直
2.2.2 可愛
特點：圓潤/不規則/擴張
2.2.3 優雅
弧度/纖細/重心偏高
2.2.4 活力
特點：傾斜/筆畫延伸/筆畫干脆，轉折彎曲很少
字體還有各種各樣的性格，比如魔幻、哥特、血腥、恐怖等等。
我們在做項目的時候，字體的感覺就一定要抓得準，符合整個畫面的調性：
比如這種歐式哥特的畫風， 字體就可以加一下哥特元素，點綴點玫瑰、藤條。
剛硬科技的畫風，字體筆畫就可以粗一些，添加點科技感和幾何圖形，營造超前科技的感覺：
植物自然的風格筆畫就可以柔和一些，帶有弧度，把一些畫面元素圖形化點綴在上面：
2.3.1 字型特點的提取
具體實操怎么做的呢？我們今天就給大家分享一個案例，看看是怎么操作的：
這是一張視覺，我們要給他做一個主標題，這個主標題的字型特點應該如何從圖里提取呢？
我們要提煉出三個點出來才能知道如何去做：
1.風格
我們先分析這張圖，它的一個風格是有點魔幻+復古，神話傳說加西域古代的一種史詩感。
我們可以找一些神話類史詩的類似的參考看看：
特征：
1.復古
2.重心高.
3.不用那么特別復古可用襯線體變形
2.特征
這個我們可以從人物身上去提取，人物有盔甲，我們可以把盔甲的特征提取出來：
3.配色
顏色也不是亂選的，一定要和圖能呼應關聯起來，那顏色怎么選呢？其實畫面里已經幫我們選好了配色。我們觀察一下畫面：
整體偏冷調，墨綠色居多。，對比色有紅色和黃色。
那我們為了突出字體，又能和畫面呼應，那黃色就是再好不過的選擇了。
那到這我們的設計目標就比較明確了：
2.3.2 字型設計
1.基礎字型：
雖然是往復古了去做，但也不是真做成甲骨文，還是結合一下使用場景，和識別度。參考中也有部分是使用宋體去變形的，所以我們可以先選一個宋體的字體出來當做基礎字型。
為了保證識別度，我們可以只做部分復古。
這里我挑靈下面“火”字，因為這個字處在中間，比較顯目。
2.調整重心
參考復古類型的字體重心都會往上偏移，讓字體稍顯長一些。
3.加入特征
（1）鋒銳：默認字體上有很多圓潤的地方，我們都改成尖銳的感覺。
把每一個筆畫都改掉：
（2）彎曲的尖角：
圖形提煉：
加入到字體當中：
字型到這里就完成啦。
（3）字體轉折的厚度：
字型完成了，字體轉折的厚度我可以再字體效果上去做。在筆畫中間加一個層次，以明暗分隔開，以實現盔甲上這種轉折的厚度：
全部加上，看下完成效果：
結合到畫面中看下：
效果還是很不錯的，整體風格也比較統一。
這一塊就是關于字體性格的內容，我們繼續往下看！
接下來我們來說下關于顏色情緒的問題！
配色感覺不對？顏色臟？配色不高級？
這些問題一直困擾著我們。應該怎么配色呢？其實顏色也是有規律可循的，這篇文章就是帶給大家一些顏色方面的啟發，讓你了解配色的底層邏輯，從而更明確快捷地配出想要的顏色。
認識色彩飽和度的情緒：
因為不同的配色會帶給觀者不同的情緒感受，只有在先了解不同顏色特性的基礎上才能為我們的配色指明方向。我們做出的畫面想要傳遞什么感覺，這種感覺對應什么顏色？
只有搞懂了邏輯，在之后的工作中，才能為我們的配色方案指明方向，而不會一開始就被難住。
如果我想配一個積極熱鬧活潑的畫面，顏色怎么配呢？ 如果想配一個溫柔恬靜小清新的畫面顏色又該如何選擇呢？他們都有什么特點，為什么會這樣？往下看
3.1.1 積極活力
我們先來看幾組圖片
用吸管工具提取一下它們的顏色觀察
我們可以看到這類海報視覺上都能給人一種熱鬧、動感、活力的feel。
通過顏色提取，再觀察它們選色的位置，可以發現它們的的配色的純度和飽和度都非常高。
這是為什么呢？接下來我們降低飽和度看看會發生什么：
可以很明顯的感受到畫面中已經失去了那種動感、熱鬧和活力的感覺了，整體更趨于平穩和安靜。
所以，高飽和度的配色會帶給觀者活力，動感，熱鬧的情緒。常常應用于一些電商、運動品牌的視覺項目中，用來渲染or打造年輕、活力、熱鬧、動感等氛圍。
3.1.2 溫柔平靜
我們再來看一組:
這一類圖片就會給人一種文藝小清新的feel，這類配色和熱鬧、運動的感覺完全不同。
都是低飽和度高明度的顏色。所以，低飽和度的顏色會給人傳達平和、放松、舒適的心情。
3.1.3 輕松休閑
這一類的圖片就給人以中正休閑的感覺。飽和度都趨于中性，不過高，也不會過低。
其實原理就是在取色器里，
我們看同一張圖片，給我們的感覺：
高飽和度配色給人感覺沖擊力很強，具有活力，對比非常強烈。
中飽和度畫面就弱了一級，視覺沖擊力沒那么強。畫面會放松一些，適合傳遞休閑的感覺。
使用低飽和度的顏色時，我們看到畫面更冷靜了，有些高級灰的感覺。
在以往的實際工作當中，我也是先用飽和度來定畫面的大情緒基調，只有大的感覺對了，后面才不會出大問題。比如像一些戰斗、pk、熱血類的banner，都用高飽和顏色:
我們可以來吸取他們的顏色看看：
基本都是靠右邊的顏色。
而像我在做下面這種類型的banner時，就會使用到中飽和度的顏色，給人一種輕松休閑的感覺：
我們再看下他們的色域：
都是趨于中間的位置。
最后一種低飽和的顏色，像下面這種作品，就有一種文藝、清新的感覺：
再來看看他們的顏色色域
都是比較靠左的顏色。
用飽和度來定畫面的大基調，還是非常好用的，可以說是屢試不爽，大家可以好好理解并且用起來！
總結：
高純度，高飽和度的顏色，會讓人感覺激動、積極、動感、醒目、記憶深刻等特點感官，常常應用于一些電商、運動品牌的視覺項目中，用來襯托年輕、活力、熱鬧、動感等氛圍。
中飽和度的顏色飽和度和純度都適中，顯得中正平和，又不會有低飽和度那樣的“平緩“，想要視覺年輕一些，但又不想飽和度那么的強烈，可以嘗試選擇中度的顏色。
低飽和度的顏色，會給人平和，舒適的感受，常常會結合大量無彩色一起使用，讓畫面傳遞出簡約，自然，小清新文藝的感覺。
配色的方法有很多，搭配在一起千變萬化，但都離不開一個點。你想給別人傳遞什么感覺？是要年輕、活躍，還是安靜、唯美？只有明確方向，在想想這個方向上的顏色有什么規律可循？搞清楚目的，我們再去做配色是不是就會輕松很多？
作者：菜心工作室 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn