Logo 勝過千言萬語。一個偉大的 Logo 不用一個字就能講述一個故事。
最近，許多公司的商標都經歷了一次轉變。從通用汽車（GM）這樣的汽車公司，到漢堡王（Burger King）這樣的餐廳，再到品客（Pringles）這樣的食品公司，很明顯，許多公司都在嘗試重新設計商標。
然而，在重新設計的同時，也有反對聲音。反對改變的聲音是向來常見，然而不喜歡某一個特定的設計語言卻比較鮮見的，那么到底發生了什么?
通用汽車（General Motors）改變了自 1964 年以來一直使用的標志是廣為周知的，它用以保證電動汽車的發展。Dezeen /通用汽車
為什么要修復一些沒有損壞的東西，為什么要改變一個已經受到喜愛的標志?這是每個人都會問的問題，每當一個新的標志出現，我們就必須考慮到一個標志的重新設計是不便宜的，往往會花費數百萬美元和多年的研究。乍一看，一家公司這么做毫無意義，然而每隔幾年就會有很多公司這么做。
雖然我不是平面設計師，但我個人認為 Logo 和品牌的重新設計有兩個主要驅動因素：技術和市場。
技術對設計影響很大，它既支持又限制了它。計算機硬件和軟件的采用和改進等技術進步為設計師們提供了嘗試新事物的機會。技術對設計也會有限制，比如有限的屏幕尺寸或能量消耗，但同時也會驅使設計師發揮創造性。雖然技術可以影響設計決策，但市場(在某種程度上可以等同于消費者)才是主要的決策者。
市場，無論是企業客戶還是目標消費者，在設計決策方面自然是最高的權威。如果一個公司覺得自己不能從中獲益(畢竟 Logo 的設計并不便宜)，重新設計 Logo 就很少發生，即使這可能會引起現有消費者的強烈反對和抵制。重新設計 Logo 可以是一個新的開始：向消費者傳達他們對未來的期望。
動物星球的標志變化過程，它隨著每一次迭代變得越來越簡單。
所以讓我們來談談這個非常顯而易見，而又容易被忽略的問題。從 iOS 7 到純果樂——極簡、極簡或扁平化的平面設計風格已經興起近十年了。我們已經討論了技術和市場是如何決定趨勢的，但是對于我們今天所面臨的當前趨勢：以最小的、扁平的、最簡單的標志重新設計，它又說明了什么呢?
技術的訴求——對在線展示的日益增長的需求是公司簡化其標識的主要原因?？焖僭鲩L的移動設備使用率導致高度詳細、高度程式化的徽標設計的舊設計方案越來越難以實現。在可伸縮性和文件大小等方面，矢量的圖像變得更加流行，與柵格圖像相比，它們更容易創建、操作和編輯。像 Airbnb、Animal Planet 和谷歌就采用無襯線和塊狀字體的商標，之所以這樣做，是因為這樣在手機等設備上更容易閱讀。
市場需求——企業和消費者似乎都支持（當然并不是沒有阻力），應該走更簡單的道路。更簡單的平面設計意味著它更容易被廣大用戶理解和識別。許多扁平化設計的支持者認為有效、友好、干凈和中性的特征是扁平化風格的優點。誰還記得在 2000 年代，Windows Aero 的頂級設計是多么的混亂不堪?時代當然變了。
當平面設計成功時，就可以創造出華麗而有意義的標志，它們經得起時間的考驗；IBM 和 Shell 的標志就是我最喜歡的幾個。但是，盡量簡單更容易創造出一些最好的標志一樣，也很容易失去目標。
是不是過于簡單了？
最近十年間，平面和極簡主義設計的標志重新設計正在興起。
在最近的十年里，很多公司一直在用扁平化風格來重新設計 Logo，Logo 隨著時間的推移變得越來越簡單，盡管在線社區的用戶們的感受各不相同。
任何重新設計都會遇到各種各樣的反對。沃爾什（Walsh）、凱倫?溫特奇（Karen Winterich）和維卡斯?米塔爾（Vikas Mittal）的一項研究顯示，消費者對品牌(品牌態度)的認知，在消費者對重新設計的看法中扮演著重要角色。
2003年，像蘋果這樣擁有高品牌忠誠度的公司決定更換 Logo，在宣布后數小時內就收到了網上請愿書，這一點就很明顯。沃爾什、溫特奇和米塔爾認為，商標的重新設計擾亂了已經形成的相對穩定的關系，消費者顯然對此感到不安。
一位推特用戶對 firefox 徽標的改變非常憤怒，盡管它并沒有被實現。——UnfunnyLuigi
有一些被重新設計的 Logo，比如漢堡王卻受到了熱烈歡迎，而其他的，例如火狐和動物星球則受到了嚴厲的批評。漢堡王不僅采用了更簡單的設計，還抓住了人們的懷舊情緒，因此比動物星球（Animal Planet）這樣的 Logo 更容易被接受。
需要指出的是，扁平化的 Logo 設計本身并沒有什么錯，許多 Logo，如可口可樂、IBM 和殼牌，都由于其簡單易記的特性成為永恒的杰作。導致人們強烈反對扁平化 Logo 設計的原因可能是人們對企業和企業文化越來越反感和憤世嫉俗。像企業藝術風格、企業孟菲斯和全球同質化等概念通常會被指責為“過度簡化”標識設計浪潮的罪魁禍首，因為很多設計決策都是冷血的，缺乏人文特征的，讓人感覺不自然或虛假。
不喜歡過于簡化的商標已經成為網絡熱點，尤其是在YouTube上?！猂evified
由于許多內容創造者和互聯網熱點已經導致了文化抵制現象出現，人們不再只是隨意在社交媒體上發泄不滿；人們把這些過度簡化的商標描繪成冷酷無情的科學實驗的結果，有些人甚至證明了如果這種趨勢繼續下去，過度簡化的商標會導致什么，它們會創造出一個乏味的世界，每個商標都是一樣的，沒有個性。
Youtube 用戶 Solar Sands 在他的視頻文章《為什么企業的藝術風格讓人覺得非常虛假》( Why do corporate art styles feel fake )中指出，許多公司，尤其是大型科技公司，這些公司曾經多次產生消費者的信任問題，而它們恰好使用了許多扁平化設計風格。我們就把負面問題與這種設計風格的聯系了起來，對這種風格留下了糟糕的印象，因此我們憎恨它；我們覺得這些冷血的公司正在奪走我們所愛的東西。在這波憤世嫉俗的浪潮之后，Solar Sands 以一段出人意料的評論結束了他的視頻：任何潮流都有保質期。
接下來將是什么?
百事可樂不斷演變的標志讓我們很好地洞察了各自時代的設計趨勢?！狶ogaster
設計趨勢總是周期性的，每個趨勢都有保質期。百事可樂的商標就是一個很好的例子，它說明了設計世界是多么地充滿活力：從簡單的設計到復雜的設計，再到簡單的設計。沒有一種設計風格是絕對好的，但它必須與時代相適應。
微軟的 Fluent Design 吸收了一個新的風格,強調光,深度、材料和尺度。——微軟
隨著大眾對當前設計趨勢的不滿不斷發酵，扁平化設計風格可能要終結，但人們永遠不知道什么時候或者什么會取代這個簡約至上的時代。許多蘋果和微軟等公司都將新擬物風格和玻璃擬態的元素融入自己的設計語言，試圖為其添加性格和細節。雖然我們肯定不會在一夜之間回到過去那些充滿華麗而又過分精細的 Logo 的日子，但扁平化設計的流行趨勢可能會開始消退。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一個好的設計不僅是解決正確的問題，還要為用戶創造積極的情感。一個實體產品可以通過人類的 5 種感官來創造情感；但對于數字產品來說，因為它只是在設備屏幕上進行干巴巴的交互，然后提供服務，所以很難創造良好的情感體驗。
所以數字產品設計師需要深入了解每一種情感，以及能夠創造情感的心理學原理，才能更好地設計相關產品。
唐·諾曼認為，可以從三個方面對用戶的情感體驗進行設計：本能層、行為層和反思層。
本能層："用戶想要的感覺"
行為層："用戶想做什么"
反思層："用戶想成為什么樣子"
在第一個層面，設計將通過用戶的視覺和與產品的互動產生情感。因此，這也是 UI 設計師大顯身手的地方。除了審美和基本的平面設計原則外，以下是我目前在設計中運用的心理學規則。
1. 格式塔原則
相似性原理
人的眼睛往往會把相似的元素連接成一組，大腦會認為這些元素有相同的作用。
因此，在設計具有相同功能或內容的界面元素時，要使其一致。
應用場景：導航、畫廊、卡片、橫幅、內容、分頁。
連續性法則
人的眼睛將排列在連續體中的元素視為一組。這個規律與對稱性和相似性頗有關系。通過在一個序列上創造相似和重復的元素，我們可以將用戶往我們想要的方向驅動。這使得閱讀信息更加連貫和清晰。
輪播圖就是應用了這一規則的設計，為用戶提供了還有信息可看的提示。
應用：菜單/子菜單、列表、產品排列、輪播圖、進度指示器。
封閉法則
當看一個不完整的圖像時，大腦會依靠以前的經驗，把剩下的填滿。
這是圖形或 Logo 設計中常用的規則。但在產品設計中，我們可以將其用于圖標和加載。
應用：圖標、加載、數據可視化。
鄰近法則
這是 UI 設計中必不可少的規則，因為人的眼睛會把任何相鄰的元素當作一組。
在設計的時候，我非常注意利用間距將元素組合在一起。我通常用大的空間來分隔大的內容群，然后用小的空間來分隔大的內容群中的小的內容群。
應用：導航、圖庫、卡片、橫幅、內容、分頁。
對稱法則
我們的大腦喜歡看到對稱和平衡的事物。這是在所有設計領域中最常用也是最安全的法則。它幫助我們創造一種穩定和秩序感。
在設計需要簡單、視覺化、和諧的產品時，我經常會將對稱性應用到其中。當觀眾需要專注于重要的東西時，這也有助于他們感到更舒適。缺點是，如果過度使用，產品會變得枯燥單調。通常，我應用于頭部或行為召喚按鈕，以更好引導用戶產生行動。
應用：圖庫、焦點圖、重要內容、產品展示、列表、導航。
主體/背景原則
這個規律是關于人的眼睛傾向于注意到脫離背景的事物，或是被框為一組的內容。
我用這個規則來引導用戶的視線去預覽重要信息。通常是在卡片設計中，用淡淡的下影在背景上方鋪設一層。此外，構圖組也是應用這個規則的一種方式。
應用范圍：卡片、內容、列表、服務、摘要。
共同命運法則
在同一方向上移動的元素被認為比靜止的元素或在另一個方向上移動的元素更有關系。這一規則的應用有助于我們建立群體和狀態之間的關系。
我在做動畫的時候，經常比較明確地使用這個規則。但是，我們也可以應用到更多方面。
應用：導航/下拉菜單、折疊菜單、折疊面板、工具提示、滾動條、視差滾動和指標。
2. 焦點
當我們看某樣東西的時候，我們的眼睛往往會先關注最突出的元素。理解這種行為將幫助我們在設計中創建一個 "錨點"，從而推動用戶按照我們的方案去瀏覽內容。
應用：內容頁、落地頁、價格頁、產品頁、焦點圖。
3. 馮·雷斯托夫效應
又稱隔離效應，它表明人們傾向于注意和記住與其他部分不同的部分。這個規則很容易與焦點法則相混淆。不同的一點是，應用這個規則的元素往往是獨立存在的，并沒有額外的功能和信息。
應用：定價表、促銷橫幅、權益升級。
4. 本能反應
基于真實世界的用戶體驗，創造出具有視覺吸引力的體驗。就像我們看一個視頻時，每一個高潮笑話都有笑聲的配音，我們就更容易笑。如果我們的設計能讓用戶感覺很好很舒服，用戶就會喜歡我們的設計。
應用：產品形象、插圖、攝影。
5. 色彩心理學
有許多研究表明，顏色對我們的潛意識有特別的影響。不同性別、不同宗教、不同文化的人對色彩的看法也不同。
另外，我們也不要忘了早期被廣泛使用的系統的顏色：
紅色：錯誤
綠色：成功
藍色： 進行中
黃色：警告。
6. 形狀心理學
和顏色一樣，人的潛意識對不同的形狀也有不同的反應。比如:
圓形 、橢圓形：傳遞一個積極的信息，通常與社區或關系有關。
正方形和三角形：傳遞強烈的信息，通常與力量和穩定有關。
豎線：代表強度、力量或侵略性。
水平線：代表平靜、平等或安靜。
7. 雙重編碼理論
這個理論解釋了人類需要視覺和語言信息來盡快處理信息。而且，人類是視覺動物，我們的大腦處理圖像的速度是文字的 6 萬倍。而為了達到設計的最大效果，我們不應該刪除說明性文字。
一個明顯的例子就是應用程序的導航欄。大多數新的應用程序或具有復雜功能的應用程序都是用圖標和標簽來設計的。
另一個例子。
8. 并行設計
相較于其他元素，人的眼睛往往會更容易注意到平行的元素。我經常用這個原理將同一屏幕內的兩組不同內容進行分類。最容易看到的相關案例可能是 Facebook 的消息界面，“故事”并排而消息水平平行排列。
9. 共同區域
這個原理就像《格式塔原理》中的相似性法則一樣，但它并不以相同為終點。共同區域是通過我們使用劃分的方式，通過線條、形狀或顏色來創建的。
如果一個屏幕需要用戶大量滾動來查看內容，我們應該有一些方法來將其劃分得更清晰，而不是僅僅使用間距。
應用：列表、信息流。
10、掃描模式
根據 NNGroup、UXPin 等機構或團體的各種研究，最常用的兩種掃描模式是 "F 模式"和 "Z 模式"。
其中，"F 模式"的應用最為廣泛，尤其是對于內容較多的網站。
“Z 模式”用于那些不太注重文字的網站，往往在最后強調行為召喚按鈕。
當我們了解了這些模式的使用方法后，我們就可以有效地選擇布局和安排元素來實現我們的設計目標。
第一印象是最難忘的，積極的體驗可以在用戶和產品之間建立長久的關系。如果我們能讓用戶在第一時間愛上設計，我們就為我們的產品創造了相當好的優勢。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作為設計師保存的珍藏
設計領域充斥著無數的設計工具、插件、網站、資源。這些工具能夠幫助你改善你的工作流程，讓你成為更優秀的設計師。多年來，我已經嘗試過很多工具，但只有少數幾個真正脫穎而出。
本篇匯總文章可謂是精華中的精華。其中有些是有趣的網站，你可以從中獲得靈感；有些是工具和資源，絕對會讓你成為更好的設計師。
我希望你能喜歡!
1. The preposterous web portal of Erik Bernacchi
這很可能是我見過的最古怪、最令人印象深刻的網站。在這個網站里亂搞一下還蠻有趣的。這個網站充滿了古怪的小程序，在這里我能消磨很多時間。
2. Cofolios
Cofolios是一個企業實習相關的網站，包含了作品集、文章、實習機會、案例研究等相關內容。
在這里你可以從其他設計師的作品中獲取靈感，向他們學習。
當我開始我的產品設計生涯時，我也曾是一名設計實習生，現在我仍然認為這是初級設計師進入大廠的最佳途徑。我喜歡看人們進入設計領域的所有非常規路徑，也喜歡閱讀設計師們的經歷。Cofolios上分享的許多博文都提供了在不同的科技公司實習的情況，以及你如何也能做到這一點的技巧。
3. ShareKit
ShareKit可以幫你實現便捷地為自己的圖片添加鏈接。
我一直在使用ShareKit來定制LinkedIn簡介中的鏈接，因為默認的預覽圖經常是模糊的，而且與我分享的內容不相關。我在Sketch中設計的圖形，將它們上傳，然后就可以了。ShareKit還提供了數據分析功能，可以顯示多少人推薦了我的作品和我收到了多少點擊。
4. Saasframe & UX Archive
www.saasframe.io & https://uxarchive.com/
Saasframe和UX Archive是我在網站設計的某一環節被卡住的時候獲得靈感的好網站。
這個資源展示了來自前沿科技公司的不同用戶體驗流程，以及優秀的設計。例如，當我我好奇其他公司是如何布局他們的 "忘記密碼 "頁面的體驗的時--有了這些網站，我可以快速瀏覽其他公司的例子，看看他們是如何做的。
5. Startup Jobs
無論是實習、兼職還是全職工作--startup.jobs都能滿足你的需求。
他們有各種角色的職位，主要為熱門的科技創業公司服務。在尋找任何級別的職位時，這個網站都是不可或缺的工具。
6. Mesh Gradients
products.ls.graphics/mesh-gradients/
Mesh gradients提供了100個免費漸變選擇。
我喜歡這些漸變中使用的柔和和充滿活力的色調。它們可以用來為界面、登陸頁面或其他任何你正在進行的工作添加一抹色彩。
7. POSE by Gal Shir
POSE是我發現的創建解剖學和人體插圖的最佳工具。
在插畫中獲得恰到好處的比例從來沒有像使用POSE那樣容易。當我還是Snapchat的插畫師時，我偶爾會完成一個角色的插畫，但卻發現腿部與身體其他部分的比例不協調。如果當時有POSE的話，就能幫我解決很多頭疼的事情。
8. Brand Colors
Brand colors是一個來自家喻戶曉的品牌色彩的大規模集合。
無論你只是在尋找靈感、有趣的調色板，還是需要特定品牌的顏色，Brand Colors都是你的首選。
9. Let’s Enhance
Let's Enhance是一款革命性的工具，可以在不損失分辨率的情況下將任何圖像放大到16倍。其結果是令人震驚的。
10. BeyondUI
作為Pávlo Sanchez的創意之作，Beyond UI是一篇關于界面、資本主義、政府和公民的視覺文章。這是一個有趣的卷軸，其中充滿了關于我們現代世界的發人深省和令人頭疼的圖形。
11. Figma Templates
Figma Templates為你提供了很多免費的模版比如Instagram模板、流程圖生成器、線框工具等。在Figma網站上就有十多個免費模板，可以改善你的工作流程，讓你在制作下一個旅程圖或維恩圖時，更加輕松。
12. Remove.bg
Remove.bg是一個一鍵刪除圖片背景的網站。
下次當你有一張圖片，但不想花半個小時用Photoshop中的鋼筆工具摳圖，可以先在Remove.bg中試試。雖然它并不總是完美的，但如果它能完成90%的工作，那么我就不用在Photoshop中浪費一下午的時間了。
13. Whimsical
我曾猶豫過要不要把這個放在這里，但Whimsical是一個很好的工具，不能不提。
我相信很多人都聽說過它，但這是給沒有聽說過的兩個人的。Whimsical是我工作流程中不可缺少的工具--無論是線框圖、創建用戶流程圖，還是安排導航，Whimsical都是我的首選。
14. Fluid Simulation
paveldogreat.github.io/WebGL-Fluid-Simulation/
這不是一個工具，更多的只是一個有趣的網站。
你能做的就是浪費一些時間盯著屏幕。我承認我花了很多時間來搞亂各種設置，看看會發生什么豐富多彩的爆裂效果。
15. Brennon Leman
Brennon Leman是一位非常有才華和古怪的藝術家，他創造了一些我喜歡的奇異的藝術作品。
他的風格簡單而友好，同時也很有趣味性。我喜歡時不時地滾動瀏覽他的作品，看看他創作的作品。
16. Beeple Crap
Beeple Crap是在另一個層面上是一件不尋常的藝術作品。
我關注他的Instagram有一段時間了，每當我看到他的一個經常怪誕的作品出現在我的頁面中時，我都會感到一絲厭惡、好奇和著迷。這是我見過的最令人印象深刻的3D作品，更多的時候絕對是搞笑的。
17. Hamburgers
Hamburgers是一個免費的動畫漢堡圖標動畫庫，可以供設計師或開發人員使用。
漢堡圖標動畫是一種很酷的方式，能為您的個人網站增添色彩或個性。你可以按照頁面上提供的步驟輕松實現這些效果。
18. SVG Backgrounds
SVG Backgrounds是一個超級娛樂的網站，可以亂七八糟的創建各種色彩和幾何背景。
有幾十種背景選項，可以用滑塊調整和自定義它們的外觀。我還沒有實際應用過這個工具，但我很喜歡用它來搗亂，希望有一天能在我的一個項目中把它變成現實。
19. Picular
Picular是一個搜索引擎，你可以搜索一個詞，然后就會出現與該詞相關的各種顏色。
這是一個可以讓你獲得與我們的情緒版上的術語相關的顏色的想法的好地方。在為我的一個品牌或平面設計項目確定調色板時，Picular特別有幫助。
20. Lordicon
在Airbnb的動畫SVG庫Lottie的強大推動下，Lordicons用他們精美的動畫圖標集為界面帶來了生命。
我真的很欣賞他們對細節的關注以及這套圖標的完美執行。網上的圖標比比皆是，但能找到一個設計精良的套件，而且還有奇特的動畫效果，真是難能可貴。
21. Emojione
Emojione在過去的幾年中已經炸開了鍋，所以你可能已經聽說過它。
如果沒有，它是一個有趣的網站，有精心制作的表情包、貼紙、動畫等。他們對傳統的表情符號進行了自己獨特的旋轉，甚至還創造了一堆自己的新表情符號，但在iOS或Android上還不存在。
22. Rotato
Rotato是我最近很喜歡的一款設備模擬工具。它是為我的UI設計創建快速而專業的樣機圖的最省力工具。
以前，我一直在Photoshop的樣機博客中搜尋，直到找到符合我需求的東西（還得希望它是免費的）。Rotato讓生活變得更簡單，現在我可以拖放我的設計，然后調整設備的角度，并在幾秒鐘內有一個完美的樣機圖。
23. Interns.design
Interns.design是一個最新的招聘網站，提供設計領域的實習機會。
我非常欣賞這個網站的簡潔性和分享的職位質量。如果你正在市場上尋找實習機會，可以自己去看看。就像我之前說的那樣，實習是進入設計和技術行業的最佳途徑之一。
24. Blush
由巴勃羅-斯坦利帶來的 Blush，是一個與眾不同的插畫網站。
有幾十個選項可供選擇，你可以自定義人物的頭發、褲子、膚色等等。這個工具的靈活性和可能性讓你甚至不用打開 Illustrator 就能創作出真正獨一無二的插畫。
25. Fonts Ninja
Fonts Ninja 可以讓你識別在網絡上遇到的字體，甚至有時還會告訴你在哪里可以購買或下載你找到的字體。
我使用 What Font 已經有一段時間了，但最近才嘗試Font Ninja，在比較了兩者之后，Fonts Ninja 占了上風。
26. Tabler Icons
Tabler圖標是一個850多個可調整筆畫圖標的集合。
我最喜歡這個網站的部分是，我不需要為每個我想要的圖標下載SVG。只需點擊你需要的圖標，然后它就可以粘貼到任何使用筆畫的設計程序中。
27. Hallway Chat
Hallway chat是Slack的擴展，它可以讓你的團隊在一天中一起進行10分鐘的聊天。
類似于你在辦公室與同事的走廊對話，Hallway讓這些類型的對話在虛擬世界成為可能。將它免費添加到你的Slack頻道，你就可以與你的設計師同事或團隊成員享受一些輕松的聊天，讓你離開工作幾分鐘。
28. Cool backgrounds
Cool Backgrounds是一個工具集，可以為博客、社交媒體和網站創建引人注目的彩色圖像。除了背景，生成的圖片還可以作為桌面壁紙或裁剪為手機壁紙使用。
29. Google Color & Type Tool
Google Typescale Generator & Google Palette Generator
谷歌材料設計系統包含了大量有用的工具、資源、技巧、指南等。我發現在我的工作中最有用的兩個工具是字體工具和調色板工具。調色板提供了一個已經調整好的顏色，你可以直接使用，實在是太方便了
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
UI 設計，是用理性方法，來滿足需求，并帶來美學享受。
本篇探討 UI 設計如何做到理性。全文共有三部分：有哪些理性，如何做到理性，止步于理性嗎。
UI 設計主要有四類理性：基本原則，基礎知識，風格設定，風格把控。四類理性有一個共同核心：活學活用。
共有四個基本原則：對齊，對比，親密，重復。
先說對齊。
秩序產生美。對齊作為一種基本秩序，主要事關整齊美觀和閱讀體驗。
對齊一般分左對齊、右對齊和居中對齊。
從閱讀體驗角度來講，左對齊通常勝過居中對齊，所以絕大部分文章和 UI 界面都是左對齊為主。
從美感角度來講，居中對齊往往勝過左對齊，所以一些強調美感勝過強調閱讀效率、篇幅不長、同時需要細品的詩或歌往往采用居中對齊。
從空間利用率角度來講，右對齊往往是左對齊的一種補充。比如微信的發現頁面，最重要的圖標和文字左對齊，次要的右箭頭和其它信息右對齊。
UI 設計追求閱讀體驗、美感和高空間利用率，所以這三種對齊方式大部分時候都會同時出現。整體而言，是以左對齊為主，居中對齊和右對齊為輔。
再說對比。
嘈嘈切切錯雜彈，大珠小珠落玉盤。音樂講究韻律和節奏，設計也追求錯落有致的節奏感。這種節奏感，很大程度上靠對比實現。
好的對比可以帶來視覺張力，就是抓人眼球的吸引力，同時也能起到主次分明和視覺引導的作用，最終帶來良好的閱讀體驗。
一定程度上，對比是無處不在的。只要存在不同，就存在對比。比如大小之間的對比，不同顏色之間的對比，文字與圖標/圖片之間的對比，不同對齊方式之間的對比，等等。
一般而言，對比需要果斷：若不同，就徹底不同。因為一般情況下，充分的對比能帶來更好的視覺張力和更好的閱讀體驗。
第三說親密。
設計就是分類，張小龍曾如是說。分類中最重要的原則是親密，還有一個副產物是留白。
性質相同或相似的元素，我們會讓它們看起來離的更近，關系更親密。親密成就分類，分類能化繁為簡。
最后說下重復。
設計追求一致性，一致性主要靠重復來實現。被大量“重復”的元素，比如這篇文章里的字體大小和字體顏色，既保證了一致性，又提高了效率。
基礎知識主要包括：手繪、顏色、版式設計、字體設計、品牌設計、動效設計、插畫設計等專業知識。
UI 設計師可能不用畫卡通人物或插畫，但一定會畫圖標和 logo，這些也會用到手繪。作為造型基本功，需要掌握一定手繪技能。
顏色方面，最重要的是能夠很好感受和理解顏色傳達出來的感覺，也即顏色的“精神之美”，這塊主要依賴審美和練習。
配色方面，推薦軟件里的 HSB（色相、飽和度和亮度） 模式，這種模式很好理解，也方便調色。另外還強烈推薦從照片中吸取顏色，因為照片往往會和“生活”、“自然”有一定關聯，“生活”和“自然”是非常重要的素材和靈感來源。從色卡中選擇顏色也是一個不錯的選擇。
版式設計就像是選秀節目中練習生的舞臺表演，考驗的是唱跳、表情管理、舞臺魅力、臨場應變等綜合實力。
“活學活用”環節，會結合例子分享版式設計。
字體設計、品牌設計、動效設計、插畫設計等方面，個人經驗不多，就不分享了。文末會附一份推薦書單，囊括基本原則和部分基礎知識。
風格設定，即上篇提到的“精確描述”，是在動手設計之前，先探索出合適的風格，并把它精確描述出來。
好的開始是成功的一半。風格設定是一個開始，極其重要。如果風格設定只做到 60 分，稍微打點折扣的執行結果就是不及格。所以，如果要把設計做到 85 分，風格設定一般要做到 90 分。
風格設定猶如在茫茫大海中行船，首要目標是把握方向，核心訴求是精準。海上并無現成道路和導航可循，只能依靠繁瑣而嚴謹的推理和計算。
風格設定的次要目標是劃一個既清晰界定風格、又清晰指明“發揮范圍”的“圓圈”，核心訴求是周密。因為需要清楚知道“圓圈”以內代表什么，“圓圈”以外代表什么。
在“精準”和“周密”上同時做到優良，風格設定才能做到優良。
既精準又周密的風格設定，通常無法一蹴而就：“風格設定”階段一般只能做到七成，剩下三成需要在設計過程中繼續探索和打磨。下一大段會結合案例分享具體方法。
風格把控有兩層含義，一是實現當初設定的風格，二是在實現的基礎上做到統一和規范。
只要嚴格在“圓圈”里發揮，實現當初設定的風格并不難。那做到統一和規范難嗎？往難了說就是需要做大量瑣碎工作：以聯系的眼光看待所有設計元素，并把它們分類規整好，注意分類不宜過多，同時分類邏輯上不能出現明顯問題。往簡單了說就是大量復用已有的設計樣式。
風格把控就是在劃定的“發揮范圍”內，利用設計知識和經驗，以規范的方式實現規劃好的風格。
活學活用作為四類理性的共同核心，最典型的應用場景是版式設計。
活學活用有兩個要點：正反結合，風格第一。
所謂正反結合，是指設計知識既能正著用，也能反著用。最常見的例子是對齊原則，大部分時候是正著用，但如果想要營造活潑的感覺，也會反著用：故意打破對齊原則。
除了對齊原則，其它設計知識，比如重復原則，也可以反著用。
本文配圖就是一個例子：圖片左上角、右上角和右下角分別散布著裝飾元素（橫線、圓環）和 logo，在裝飾元素的出現次數上，沒有用重復原則。過年家里掛燈籠一般至少掛兩個，同一裝飾元素一般至少出現兩次，以達到一種和諧和較為熱鬧的裝飾效果。
我在裝飾元素的出現次數上沒有用重復原則，而在出現位置（相似位置）、元素大小（相似大?。┖驮仡伾ㄏ嗨祁伾┥嫌昧酥貜驮瓌t，同樣達到了和諧效果。之所以沒在裝飾元素的出現次數上用重復原則，是想放一個隱喻在這里。
所謂風格第一，是指設計風格永遠第一，設計知識永遠第二。知識服務風格，切不可重知識輕風格。
《倚天屠龍記》中，張三豐教張無忌練習太極劍時，要他忘記劍招，只記劍意。某種程度上，版式設計也要將“劍意”放在第一位，“劍招”服務“劍意”。
對比原則也有反著用的時候。有一條關于對比的知識：對比要果斷，若不同，就徹底不同。這條知識能解釋百事可樂 logo 里紅色與藍色的強烈對比，但解釋不了山本耀司旗下大部分服裝那千篇一律的黑色——單色，無對比。
設計最重要的是感染力，感染力主要來自個性、態度、價值觀這些風格層面的東西，而非設計知識這些技法層面的東西。
當一個設計，技法高超而風格不足時，感染力和魅力就會不足，這也是設計師經常會犯的錯誤，大家需要注意。
可以簡單分成三步：規劃，成形，細化。下面結合微信 Redesign 這個案例來說明。
設定風格，用到的方法姑且稱之為“紅綠燈”法。“紅綠燈”法借鑒并改良了我在網上看到的一種“紅黃綠卡片法”（在紅、黃、綠三種顏色的卡片上寫下不同的設計關鍵詞），并和“情緒板”法有相似之處：都包含關鍵詞定位和圖片參考兩部分。
先說關鍵詞定位，共有兩步。
第一步類似頭腦風暴，結合產品屬性、用戶屬性、市場情況、個人喜好等因素，把能想到的設計關鍵詞全部寫下來。合適的不合適的都要寫，只要想到了就寫下來，確保有二三十個。如果關鍵詞數量不夠，這個步驟可以多重復幾次，直到夠了為止。這一步設計師和需求方都要參與進來，在提供關鍵詞上雙方是平等關系。
這個微信 Redesign 是個具有探索性質的小練習項目，基于微信 7.0，有兩個目的：首先保留原有交互體驗和品牌識別度，其次在視覺上更年輕、更流行。可以通俗理解成：一款微信“皮膚”，主要給年輕用戶和趕新潮的中老年用戶用。
結合產品屬性（社交類、工具類、內容類）、用戶屬性（年輕用戶為主）、市場情況、個人喜好這些因素，這一步想到的關鍵詞如下圖所示。
第二步是歸類，就是把第一步產生的所有關鍵詞歸成“紅黃綠”三類。如果關鍵詞不夠，還可以再補充。這一步依然是需求方和設計師共同參與，但需要設計師來主導。
紅色關鍵詞代表不能踩的紅線：不能這樣做；黃色關鍵詞代表黃燈警告：這樣做不太合適；綠色關鍵詞代表暢通無阻：應該這樣做。
需要注意的是，綠色關鍵詞最好控制在 3-4 個之間，如果超過 4 個，就需要分成主綠關鍵詞和次綠關鍵詞，主綠關鍵詞依然要控制在 3-4 個之間。這樣做有兩個考量，一是確保簡單和重點突出，二是也更容易實現。
回到第一步的關鍵詞上來。設計中當然可以用“擬人”、“隱喻”等手法，所以“擬人”這個關鍵詞顯得意義不大，故刪去?！皽貪櫋焙汀坝H和”，“老少皆宜”和“大眾”在語義上都存在一定的重復，所以刪去后者。刪除這類不合適的關鍵詞后，剩余關鍵詞就按“紅綠燈”法歸類，歸類后情況如下。
（微信 Redesign 之按“紅綠燈”法歸類后的設計關鍵詞）
關鍵詞定位已就緒，再來找參考圖片。
可供參考的圖片有兩大類：照片和 UI 界面。UI 界面也有兩類：線上作品（真實項目、練習作品等）和上線作品。
做 UI 設計，參考什么樣的圖片？個人建議，做什么類型的設計，就重點參考什么類型的圖片。比如 UI 界面就重點參考 UI 界面，banner 就重點參考 banner。
UI 界面的設計，個人喜歡重點參考知名產品的上線作品。單從視覺角度來說，上線作品的質量可能比不過一些線上練習作品。但是已經上線的知名產品的 UI 設計，其風格的形成往往都會經過很多推敲，會有很多比較成熟的設計思路在里面。
參考別人的設計，最重要的是參考設計思路，其次才是參考表現形式。這種設計思路，有時候能從網上找到，但更多時候靠自己推測。
微信 Redesign，根據“很多年輕人在用，且風格比較流行”這條主線，找來了 QQ、抖音、B 站、小紅書、陌陌、Soul、騰訊視頻、愛奇藝等產品的截圖。這些產品的截圖，看完一圈后，就會面臨一個問題：以圖標為例，這幾個產品的圖標，風格各異，但基本都具備“年輕”和“流行”的特點，那應該參考哪一個？
這時就要求助關鍵詞定位。除了“年輕”和“流行”，主綠關鍵詞還有一個“輕微老少皆宜”。最符合“輕微老少皆宜”的是愛奇藝和騰訊視頻：很多老人和小孩也會用這兩個 App 看視頻，網上公開的數據也能佐證這一點，所以它們的設計一定會照顧中老年用戶的審美。
最后，出于個人偏好，我選擇重點參考愛奇藝的圖標風格，具體而言就是：深淺雙色、較粗(1.5pt)描邊、圓潤風格。
紅黃綠三色關鍵詞及重點參考圖片就緒后，就可以動手設計。
我一般會把界面設計粗略分成三大部分：版式風格、元素風格、元素大小，元素為圖標、圖片、按鈕等，然后去一一實現。
先說版式風格。
用的主要綠色關鍵詞是“更流行”和“更年輕”?！案餍小卑ǎ焊笞痔柕捻撁鏄祟}、盡可能用留白代替分割線和卡片的“無界”風格、圓形頭像、更多留白更多舒適、等等?！案贻p”包括：更圓潤的搜索框、輸入框和圖標、更年輕更具活力的配色、等等。
再說元素風格之圖標風格。
圖標主要參考愛奇藝 App：其一，底部導航和發現頁的圖標都是深淺雙色加較粗的描邊；其二，除了更圓潤以外，部分圖標還變 Q 了。
最后說元素大小。
以這個小項目為例，最主要的元素大小是圖標大小和字體大小，它們會影響整個設計的感覺。通常情況，元素越小，給人感覺越精致、越高端，此其一；其二，可能是年輕人和老年人視力存在差別的原因，越小的元素往往代表年輕人的審美，反之則代表老年人的審美。
元素大小主要運用的綠色關鍵詞是“輕微老少皆宜”。也就是說，需要在年輕人和中老年人的審美中找到一個平衡，所以元素大小基本直接參考了微信 7.0 的設計，個別地方做了微調。
最后，出來的效果如下圖所示。
這份設計我發在了網上，部分網友留言說看著不夠好，不太舒服，有一個表達的比較具體——“雖然用了大面積留白，卻讓人感到緊迫...”。
基于網友的留言，我仔細審視了這個設計，最后發現問題主要出在頁面（發現頁為例）左右兩側：留白過小。
當初之所以這么設計，是想通過頁面左右兩側較少的留白制造一種內容將要撐破屏幕的感覺，從而營造一種活潑的感覺。注意，彼時“活潑”還沒出現在“黃色”關鍵詞里，上文兩張關于關鍵詞的圖都省略了中間探索和優化的過程。
很多網友之所以沒有感受到活潑而只是覺得不太舒服，至少有兩個原因：第一，整個設計的基調是簡約、清爽，有一定的年輕感和流行感，但沒有太明顯的活潑感，硬往里面某個地方塞“活潑感”并不和諧，大家也難以感受到；第二，單純就“活潑感”而言，做的依然不到位，比如圖標與右側文字的留白，可以比圖標與左側邊界的留白大，方能更好彰顯活潑與活力。
考慮到“輕微老少皆宜”這個綠色關鍵詞及微信主要是工具型和內容型產品，“活潑感”用在這里并不十分合適，于是放棄，并將“活潑”歸為“黃色”關鍵詞。此處留白的目的就回歸其本職工作：整體和諧與舒服。于是就把留白相應調大了。
另外一個優化的點是“眼睛”的形狀：微信圖標、看一看圖標、表情圖標、朋友圈里將點贊和評論折疊起來的圖標都有一雙“眼睛”，這雙“眼睛”起初是豎著的橢圓形，很萌，也比較低齡化。為了盡可能的“輕微老少皆宜”，這里統一把“眼睛”由豎著的橢圓形改成了圓形，弱化了“萌”和“低齡化”的感覺。
還有一塊是顏色上，拍攝視頻動態的圖標有用到藍紫色。這個紫色基本符合“更年輕”、“更流行”，但不太符合“輕微老少皆宜”，所以最后放棄了紫色，保留了藍色。
遵循主綠關鍵詞里的“輕微老少皆宜”，其它優化的點有：微信圖標尖角處的圓角調小，刪除啟動頁與黑色"WeChat"字形成對比的綠色圓點。另外還有一些視覺層面美觀、和諧、舒適度的優化，比如顏色、留白、圓角大小、字體大小方面的微調。
優化后的微信 Redesign，整體效果如下圖所示。
凡事預則立，不預則廢。UI 設計如何做到理性，最核心的是設計風格，規劃、成形和細化都緊密圍繞設計風格展開。
最后，嘗試總結下“紅綠燈”法的優勢，主要有四點：精確、周密、穩妥、高效。
關于設計風格，傳統規劃方法一般只有三四個“綠色”關鍵詞。
“紅綠燈”法擁有“紅燈”、“黃燈”和“綠燈”三種顏色的關鍵詞，從而確保大方向更準確?！凹t綠燈”法會產生20個以上的紅黃綠關鍵詞，從而確保劃出來的“發揮范圍”更周密，極少有疏漏。
在“成形”這個設計環節，一旦踩到“紅線”和“黃線”，規劃好的紅黃綠關鍵詞都會馬上發出警報，從而大大降低“違規踩線”行為的發生次數，確保設計執行環節的穩當可靠。
“紅綠燈”法通俗易懂門檻低，需求方可以較為深度參與“規劃”環節。需求方在“規劃”環節的深度參與，理論上可以降低后期的返工和修改次數，從而確保整個設計過程的高效。同時理論上也能夠提高設計師和需求方雙方合作的愉快程度。
UI 設計，始于理性，但無法止步于理性，還需要超越理性。注意，這里的理性，僅指設計知識的相關理性。
超越理性主要有兩點：直覺，其它知識。
直覺是指一種能夠快速感受和評估設計優劣的感覺。良好的直覺往往快而準。
感知和評價別人的設計時，用到的幾乎全部是直覺。審視自己的設計時，也離不開直覺。
在審視自己的 UI 設計時，直覺主要發揮兩個作用：第一，囿于知識儲備或表達能力，有些地方就是解釋不清，這個時候就要靠直覺去感受去判斷；第二，直覺往往會作為檢視設計的最后一道關卡，也是最重要的一道關卡。
直覺來自哪里？
個人觀察是，直覺往往和審美正相關。比如一個設計師，他掌握的設計知識有限，經驗有限，對自我的要求也不高，最終的作品往往不出彩。但如果他審美好的話，往往能夠分辨出不同設計方案之間孰優孰劣。
如果你想就設計稿征求別人的意見，請去找那些審美好的人。
其它知識是指設計知識以外的所有其它知識。比如 iPhone 上刪除應用前應用圖標的抖動，其靈感應該來自生活中的搖頭求饒或嚇得發抖，抖動的幅度和頻率則需要利用物理學和數學方面的知識。
優秀的設計，一定會從生活中汲取大量靈感，并廣泛利用社會類、人文類和理工類學科的知識。就拿數學來說，在好的設計中，一定是個常客：因為你需要不停的按計算器，從而計算不同設計元素之間的比例關系和各自的大小。
汝欲學詩，功夫在詩外。遣詞造句這些文字技巧只能是寫詩的基礎，而非關鍵。寫詩的關鍵在于你對生活、對世事的積累和感悟，在于你的思想是否深刻，情懷是否充足。
寫詩如此，做設計亦如此。設計知識只是做設計的基礎，而非關鍵。做設計的關鍵在于“其它知識”?！捌渌R”非本文重點，就不展開了。
UI 設計里的理性，主要是各類設計知識。理性的核心在于活學活用各類設計知識。
理性嚴謹的做 UI 設計，可以簡單分成三步：規劃，成形，細化。好的開始是成功的一半，一個高質量的規劃顯得尤為必要。
用“紅綠燈”法做規劃，并指導成形和細化工作，會更精準、周密、穩妥和高效。
UI 設計，是七分理性，三分直覺。審美越好，直覺越準。
優秀的 UI 設計，一定會從生活中汲取大量靈感，并廣泛利用設計以外學科的知識。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
顏色跟其他事物一樣，使用需要恰到好處。如果您在配色方案中堅持使用最多三種基色，您將獲得更好的效果。將顏色應用于設計項目中，要保持色彩平衡，您使用的顏色越多，越難保持平衡。
顏色不會增加設計品質 - 它只是加強了設計的品質感
皮埃爾·波納德（Pierre Bonnard）
如果您需要調色板中定義的顏色以外的其他顏色，請使用明度和色調進行調整。他們將提供不同的顏色基調與之配合。
60–30–10 規則
室內設計規則是一種永恒的裝飾技術，可以幫助您輕松地將配色方案放在一起。 60％+ 30％+ 10％的比例是為了保持顏色平衡。這個公式非常有用，因為它創造出一種平衡的感覺，并允許眼睛從一個焦點到另一個焦點舒適地移動。 使用也非常簡單。
60％是主色調，30％是副色和10％用于強調色。
墻面漆（60%），家具（30%），配飾（10%）
顏色的含義
幾個世紀以來，科學家已經研究出某些顏色的生理效應。 除了美學，顏色也是情感交流的創造者。 顏色的含義可能因文化差異而不同。這就是為什么你看到時裝店鋪的設計是黑白配色。 他們希望看起來優雅而高貴。
Asos采用純黑白配色搭配綠色按鈕設計，這種配色是有原因的。
紅色：激情，愛，危險
藍色：平靜，負責，安全
黑色：神秘，優雅，邪惡
白色：純凈，沉默，清潔
綠色：新生，新鮮，自然
首先考慮單色設計
在項目設計初期，我們通常傾向于嘗試不同的顏色進行調整，但這種行為會很快違背你的初衷，當你發現的時候，已經花費了3個小時調整基礎色...這確實很誘人，但你應該學會避免這種態度。
相反，你應當專注于元素的間距和整體布局。它會節省你很多時間。 這種約束是非常有成效的。從另一方面講，它看起來并不乏味。如果你想讓整個作品看起來更好，嘗試不同的顏色選擇。
我在追波（dribbble）上的作品之一。簡約單色處理，專注于元素之間的使用。
避免使用灰色和黑色
我學到的最重要的顏色技巧之一是避免使用灰色等不飽和色彩。 在現實生活中，純灰色幾乎不存在。 黑色也是如此。
這張圖片最黑的顏色不是＃000，而是＃0A0A10
始終記著給你的顏色增加飽和度。潛意識里會顯得更自然，為用戶所熟悉。
相信自然
最好的顏色組合來自大自然。 他們看起來總是很自然。 尋找顏色設計的解決方案，最好的辦法是調色板總是發生變化。
為了得到設計靈感，我們只需環顧四周。
保持對比
一些顏色相互融合，而其他顏色一起使用會發生沖突。 有一個明確的規則，想要了解不同顏色之間如何融合，最好的辦法是觀察一個色輪。 你應該知道這個方法，但是沒有必要動手操作。
獲取靈感
當我們在談論UI參考時，dribbble是最佳選擇。它還具有通過顏色搜索的工具，所以當你想對其他設計師使用特定顏色進行視覺研究時，然后去這里：dribbble.com/colors
視頻，平面廣告設計，室內設計，時裝......有這么多鼓舞人心的地方可供收集。如果說根本就沒有配色參考，那一定是懶惰的原因，把那些調色板保存下來，一切看起來都非常有趣。
通常我喜歡從KPOP（韓國流行音樂）視頻剪輯中選取顏色，他們看起來很華麗。
配色工具推薦
為了方便起見，我搜集了一些最好的配色工具可供選擇，在2017年獲取調色板，他們會為您節省大量的時間。
Coolors.co
這個絕對是我最喜歡的取色工具。 您只需鎖定所選顏色并按空格即可生成調色板。 Coolors還可讓您上傳圖像并從中調出調色板。 很酷的事情是，你不僅僅是一個結果，而是有一個選擇器，允許你修改參考點。
網址鏈接：https://coolors.co
（請使用科學上網工具打開）
Kuler
這款Adobe旗下的配色工具已經和我們在一起了很長時間。它在瀏覽器和桌面版本中都可用。 如果您使用的是桌面版本，則可以將配色方案導出到Photoshop中。
Paletton
它類似于Kuler，但不同的是，您不僅限于5個色調。 當您擁有原色并希望使用其他色調時，您可以使用這款很棒的工具。
網址鏈接：http://paletton.com
（請使用科學上網工具打開）
Designspiration.net
試想一下，你有自己的配色的想法，但你要看到幾種顏色組合的例子。 Designspiration是一個偉大的工具。 您可以選擇最多5種顏色，并搜索符合您的查詢的圖像。 真的很好，不僅用于找到具有特定調色板的圖像，還可以在設計中實現它們。
網址鏈接：http://designspiration.net
（請使用科學上網工具打開）
ShutterstockLab Spectrum
你可能會問：如果我想用我所選擇的顏色搜索照片？ 那么，Shutterstock有一個叫做Spectrum的工具，你可以用特定的語氣搜索照片。 您甚至不需要訂閱，因為具有水印的小預覽圖像將足以生成調色板。
網址鏈接：https://www.shutterstock.com/labs/spectrum/
（請使用科學上網工具打開）
Tineye Multicolr
但是，如果你想搜索照片中的顏色混合，甚至指定每個顏色的數量，那么Tineye會幫助你。 本網站使用了來自Flickr千萬張共享圖像的數據庫。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
少即是多。極簡主義的概念可以用這句足夠極簡的話進行總結。而且它不僅僅是一種設計理念，更是一種生活理念，甚至于是一種系統的思維方式，而不僅僅視作為一種「更干凈」的視覺風格。
在設計當中，極簡主義是呈現內容的諸多藝術概念之一，應用范疇非常廣。極簡主義是使用盡可能少的素材和色彩，以有限的形態和元素，來呈現信息。
在數字產品設計當中，極簡主義，是一個相當考驗技術的門類，如何從「簡單」跨越門檻，走到到「極簡」，其實并不容易。
今天的文章，是一篇「相對極簡」的「極簡主義設計指南」，掌控好下面的 5 大要素，應該就能夠很好地拿捏這種風格。
每一個要素下面都有一些頗為具有代表性的設計范例，這些作品的參考價值還是蠻高的 ~
有沒有聽說過「白紙綜合癥」？當你在畫畫或者創作的時候，面對著空無一物的白紙，陷入焦慮的情緒的狀態，就是「白紙綜合癥」。
這種狀態廣泛存在，這種病癥很多人都有，尤其是設計師。而當你在設計風格簡約的作品的時候，需要你學會擁抱白紙，面對留白，因為「留白」也是一種元素。
相反，在極簡主義的設計當中，過多的視覺元素會讓整個設計顯得不堪重負，降低可用性和易讀性。
留白的使用方法很多，但是最主要的方式，是讓留白以外的元素，僅保留必須的部分，把留白視作為一個必須的模塊，考慮如何保持可見的元素和留白之間的整體平衡。
留白當然不一定是白色，也可以是其他的顏色，你還可以搭配各種不一樣的配色方案和組合。
色彩和留白的結合是很自然的選擇，兩者能夠更好地賦予設計以更強的情緒和個性化的視覺，制造整體氛圍。
但是值得注意的是，除了留白使用一種顏色之外，其他元素的色彩也盡量不要用得太多太花。簡單的色彩搭配更容易營造出對比，在不復雜的配色體系下，制造出出色的視覺效果。
盡量將主要配色控制在 1~2 種，對比色能夠營造出更強的戲劇感和視覺張力。
「一圖勝千言」是被說爛了的老話，但是這句話怎么說都是對的。單張圖片能夠承載的信息量是巨大的。不過一樣的，插畫在極簡主義設計當中的應用也是相當講究的。
通常而言，你需要將插畫當作重要的視覺焦點來使用，讓它周圍有足夠多的留白，這樣能夠保持極簡設計應有的呼吸感。
這個時候，經典的排版布局方式就可以發揮極大的作用，左右布局、上下布局、中心式布局等等等等，不用復雜的花樣，就可以制造出讓人驚喜的效果。
當然，記得控制好元素和整體布局之間的空間比例。
當然，配色、圖片和留白都說了，剩下就是文本的部分了。文本在極簡主義設計當中的使用方式也有一些事項值得注意。
文本排版在極簡主義設計當中的玩法當然也很多，實驗性的文本排版和布局設計是很多設計師提升極簡設計的視覺觀感的一種有效的方式，結合一些比較獨特的配色或者效果，都可以。但是無論哪種，在「想法」上要保持極簡——不要想在一個設計中承載過多的排版方式和元素，你最好著力表現一種「理念」，或者一種排版風格，呈現某一種的氣質，千萬不要摻雜太多的想法。
此外，相對傳統的字體設計也同樣可行，適當地運用一些個性化的排版技巧，就可以了。
從包豪斯和瑞士現代主義設計開始，圖形元素就很好地同極簡主義設計結合到一起。
你可以充分發揮你的創造力，使用獨特的圖案來提升極簡設計的視覺效果，也可以從其他已有的設計當中汲取靈感，提取元素，應用到你的構圖和元素當中。
圖形與圖案其實可以玩的花樣很多，如果不是作為視覺主體的話，其實適當的裝飾即可。作為視覺焦點存在，強化形式感就好，不必要弄的太過于繁復。
極簡主義設計并不復雜，重點在于你怎么簡化整體設計，如何將有限的元素打磨好，控制留白和主次，從而以較少的內容呈現出豐富的效果。當然，在把握的核心要義之后，多研究一下成功的案例，其實你也可以做很好。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
上次整理了一些大廠的可視化服務平臺，平臺的優勢顯而易見，組件化的操作，快速搭建的方式節省了很多的開發和時間成本。有興趣的戳這里：數據可視化大屏設計工具整理（上）。
對于上期的一些更正：8月28日百度Suger更新了收費標準，也就是說現在百度Suger也收費了！目前是分版本收費，但是對新老用戶還是提供了30天的全功能試用的。
本次整理的是下半部分的內容：
一、數據大屏與數據可視化
二、大廠的可視化服務
三、技術開源庫
四、設計輔助工具
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
三、技術開源庫
了解一些技術開源庫，一方面可以參照其圖表案例，了解各類不同圖表的展示方式；另一方面是為了保證自己設計的可實現度，不然再炫酷的設計效果最終如果因為技術開發能力無法實現也是徒勞的。
Echarts -百度開源可視化庫
這是一個使用JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器。4.0版本還提供了對微信小程序的適配。DataV中的一些組件也是依賴Echarts生成的。
Echarts提供的圖表很多樣化，幾乎包含常用的、不常用的各類圖表樣式。且提供有可交互組件，可以對數據進行多維度數據篩取、視圖縮放、展示細節等交互操作。
△來源Echarts實例
Mapv - 百度地理信息可視化開源庫
用以展示大量地理信息點、線、面的數據。創建需先上傳地理信息數據，再設置地圖樣式后，即可下載保存。目前僅開放Beta版本。
△來源Mapv官網
螞蟻AntV
https://antv.alipay.com/zh-cn/index.html
螞蟻金服的Ant Design作為設計師應該都是較為熟悉的。AntV是螞蟻Ant系列下的一個數據可視化解決方案。分為G2、G6、F2、L7不同產品，分別對應不同的特性需求。
△來源AntV官網
Amcharts - 矢量地圖定制下載
http://pixelmap.amcharts.com/#
這個網站可以用來繪制地圖。有些特殊情況下，開發可能需要自己繪制地圖。如果開發自己使用canvas繪制，難度較大。這個網址提供了地圖svg、HTML以及image的下載。
△來源Amchats官網
D3.js - 數據驅動的文檔
D3js 是一個基于數據來操作文檔的JavaScript 庫，適宜用來建造各類可視化圖表。支持大型數據集和交互與動畫的動態行為。
△來源D3js官網
billboard.js - 簡易界面的可交互圖表庫
https://naver.github.io/billboard.js/
這是一個基于D3 V4+的JavaScript的圖表庫。可以對數據進行視圖縮放、展示細節等交互操作。
△來源billboard官網
FusionCharts
FusionCharts提供了100多個交互式圖表和2,000多個數據驅動的地圖，對不同平臺都可兼容。同時提供了前端和后端各類框架及代碼語言的插件來方便開發快速入門。不過這款是收費的，根據不同的使用環境定價不同。
△來源FusionCharts官網
四、設計輔助工具
Kitchen - 螞蟻金服官方插件
這是一個sketch的插件工具。主要功能如下圖。
△來源Kitchen官網
Iconfont 圖標庫我比較常用，可以直接在sketch中搜索拖拽，不用再去打開網頁查找了。其次數據填充也比較常用，自動填充時間地址城市等挺方便的。sketch也有自帶的功能，但畢竟自帶的填充都是英文，想要中文的需要自己編寫填充文檔，相對還是比較麻煩。其他是像智能排版、色板等功能，我用的不多，還是以sketch自帶功能為主。
另外，與可視化設計相關的就是里面的圖表生成器了。不過Kitchen當前只有一些常規的圖表，不過勝在簡潔明了，很適合在此基礎上進行二次設計。該插件還是螞蟻Ant系列的官方插件，可以自動配置符合Ant Design 規范的組件，配合公司采用的Ant系列的框架，會方便不少。
△來源Kitchen插件界面
FusionCool - 阿里Fusion Design開源中后臺UI解決方案輔助工具
這也是一個sketch的插件工具。分為圖標、圖表、組件、模塊和模板五大功能區。
Fusion Design作為一個開源中后臺解決方案，和Ant Design有一定類似，但也有所差別。Ant Design 是一套組件庫, Fusion Design 更像是一個組件庫生成工廠。
直接下載安裝FusionCool的話，打開sketch看到的將是一個默認組件庫，圖表部分的種類樣式比Kitchen多了不少。而更厲害的是，你可以在Fusion Design上基于官方庫編輯改造成屬于你自己的設計系統，發布主題后獲得新的主題包，此時你在FusionCool中就可以看到專屬于你的主題包了，在sketch中完成設計后，開發使用Iceworks安裝你的主題庫就可以直接編碼實現你的設計。
△來源FusionCool插件界面
Map Generator - 快速地圖生成填充
https://github.com/eddiesigner/sketch-map-generator
這是一款基于谷歌地圖的自動填充的Sketch插件，輸入地址后就可以自動生成不同風格樣式的地圖，個人比較喜歡第三款灰色的。
△圖為Map Gnerator生成效果
Amcharts - 矢量地圖定制下載
http://pixelmap.amcharts.com/#
這個網站上面提過，但其實設計師用來獲取矢量地圖也很好用，選擇地圖樣式和地區之后，右下方即可以下載SVG、HTML、Image格式的圖，十分方便。點擊“Generate Ppxel Map”還可以轉化為像素圓點形式的地圖。
如果需要省份的地圖，網站上無法直接下載，但可以要先下載中國svg地圖，然后再打開svg選擇自己需要的省份模塊就可以了。
另外，在使用地圖的時候，要注意正確用圖，規范用圖。要有國家版圖意識，符合測繪法。
標準地圖可以參考國家自然資源局提供的標準地圖服務，服務網址：http://bzdt.ch.mnr.gov.cn/index.html
Chart - 圖表插件
https://github.com/pavelkuligin/chart
這個插件是收費的，每年10美元，但是你可以去找那啥啥的（我知道你懂）。優勢在于可以在Sketch中創建包含隨機、表格或者JSON數據的圖表。圖表樣式也是非常的豐富了。
△來源Chart官網
-END--
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
這是目錄：
一、數據大屏與數據可視化
二、大廠的可視化服務
三、技術開源庫
四、設計輔助工具
一、數據大屏與數據可視化
數據可視化是目前對數據展示最常用的方式。數據的可視化設計有助于將復雜的數據用最易理解的方式展示在用戶的面前。
數據可視化在中后臺的設計中很常見，通常主要用于分析和決策，對實時性要求不高，從一部分功能上講，其實也有著報告數據的作用。設計以2D平面展示為主，幾乎不會有3D設計出現，視覺設計重點更注重簡單直接，一目了然。
△來源 dribbble 作者wuze，侵刪
△來源 dribbble 作者William Chen，侵刪
關于制作數據大屏的一點小建議：
△來源Suger官網
△來源Suger編輯平臺
△2018天貓雙11大屏
△DataV平臺創建編輯界面
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
Sketch是設計人員的首選選擇
用Marvel構建頁面非常簡單
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
UI圈兒刮起了一股勢頭猛勁的新擬物風（Neumorphism），起因是烏克蘭設計師亞歷山大·普盧托 （Alexander Plyuto） 在 Dribble 平臺發布了一張應用了新擬物風格的UI作品，便引發了圈內的激烈討論，更一直占據著當時的熱點榜首。此風格出現后，也給流行的扁平化設計添加了新的展現形式。
普盧托的《Skeuomorph Mobile Banking》，在Dribble獲得了3000多次喜歡
也有一些非常著名的品牌公司在設計上結合了新擬物風格，像三星召開的Galaxy Unpacked活動、MKBHD的介紹視頻等，效果都很出彩。當趨勢熱潮退去，新擬物風格并沒有像一部分評論者堅持的那樣，“洗牌”式地接管整個設計圈。
三星 Galaxy Unpacked 活動
MKBHD在2020年的簡介中使用了這種風格
復習結束回歸正題，我們看到現今又出現了一種新樣式—Glassmorphism，字面上由玻璃（glass）和擬物化（skeumorphism）組成，叫法頗多：玻璃擬態、玻璃擬物化設計、玻璃擬物風格，其實意思都對，它比新擬物風格更直觀清晰。那么，玻璃擬物風格最具有定義性的特征是什么呢？一起來看：
-透明度，使用背景模糊的磨砂玻璃效果；
-物體漂浮，畫面中有多個漂浮層級；
-鮮艷的色彩，在磨砂玻璃后更突出整體效果；
-淺色邊框，應用在半透明物體上襯托質感。
玻璃擬物風格特征顯著，用戶也能快速確定界面的層次結構和深度。畫面中清晰顯著的則是最迫切想要表達的重點，非常好辨認。
在Drrible的#Glassmorphism#下，大家已經紛紛提交自己的作品了，也讓辭典醬發現了一些它獨有的「魅力」：
-顏色明艷、歡快，視覺上帶來一定的刺激性；
Music Player Apps by Adhiari Subekti
glassmorphism redesign by Frédéric Musso
-icon虛實結合，營造出了一種「小而精」的質感；
MEDIACRAFT ICONS by Ayo Kid
Glassmorphism Iconography by Hemanth Ravi
-邊緣細框，模擬玻璃，帶來微妙的「高級感」。
Procreate app icon redesign by Zhenia ievgen
Coffee Shop App by Saud Ali
說到由來，那么蘋果帶來的影響力毋庸置疑。蘋果早期的設計系統為擬物風格，從2013年推出的iOS 7開始，系統風格進行了全新嘗試，背景模糊也是從那時起進入大眾視線，雖然人們褒貶不一，但使用過的用戶還是很買賬的。
與蘋果互為對手的微軟也推出了這種類似于毛玻璃質感的Vista系統，但距離真正的玻璃擬物還有一段路程要走。
最新的macOS Big Sur 和 iOS 14系統都已經使用了偏向玻璃擬物化的半透明效果。
通知欄的彈出變成了一件有趣的事，你可以清楚地看到新面板下的圖標是如何彈出和消失的。
微軟的Fluent設計系統也很重視這種效果，他們稱此特殊元素稱為「亞克力」，并將其作為設計系統中不可分割的一部分。
Microsoft Fluent設計系統
實現玻璃擬物效果需要注意的是，與任何基于卡片的布局一樣——物體離我們越近，它吸引的光就越多，也就意味著它會變更加透明，反之亦然。
它依靠3個基礎元素來實現，分別是陰影、透明度和背景模糊。還可以使用一個或多個透明層，假設在一個顏色相對復雜的彩色背景中應用，那么至少加兩個半的透明層級，要展示的文字或圖標的可見性才會最大最突出。
不要設置對象的透明度，而是調整填充透明度。下圖示例中，兩種不透明度的數值調整，得到了完全不同的視覺感受。
背景在玻璃擬物效果中至關重要，太單調會導致完全不出效果。這可能就是Apple選擇彩色背景作為MacOS Big Sur默認壁紙的原因，背景圖片的色調差異大，玻璃擬物的效果越強烈。
別小看了這1px的細微邊框，它模擬了玻璃的邊緣，將其單獨設置透明度，就能讓形狀從背景中脫穎而出。
半透明邊框圖形（左）vs 無邊框圖像（右）
建立一個良性的層次結構同樣重要，和新擬物類似，它們都不是Material Design被廣大用戶熟知與接受的呈現形式，裝飾味道會相對濃郁。所以設計師在應用前，最好能確保——元素和各層級在沒有花哨背景加持下，一樣能被用戶以及視力障礙人群輕松識別理解。
下圖就是一個很好的例子，卡片具有清晰的結構，即使完全去除玻璃背景。它也能正常使用。
作為人類，我們很容易對各種趨勢感到厭倦，所以每隔一段時間就會迸發出新的靈感與創意。但作為設計師，我們需要探索所有可能創新產品的方式。在當下，玻璃擬物的應用的確會使產品看起來更好，對用戶更具吸引力。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn