作為設計師保存的珍藏
設計領域充斥著無數的設計工具、插件、網站、資源。這些工具能夠幫助你改善你的工作流程，讓你成為更優秀的設計師。多年來，我已經嘗試過很多工具，但只有少數幾個真正脫穎而出。
本篇匯總文章可謂是精華中的精華。其中有些是有趣的網站，你可以從中獲得靈感；有些是工具和資源，絕對會讓你成為更好的設計師。
我希望你能喜歡!
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 上刪除應用前應用圖標的抖動，其靈感應該來自生活中的搖頭求饒或嚇得發抖，抖動的幅度和頻率則需要利用物理學和數學方面的知識。
優秀的設計，一定會從生活中汲取大量靈感，并廣泛利用社會類、人文類和理工類學科的知識。就拿數學來說，在好的設計中，一定是個常客：因為你需要不停的按計算器，從而計算不同設計元素之間的比例關系和各自的大小。
汝欲學詩，功夫在詩外。遣詞造句這些文字技巧只能是寫詩的基礎，而非關鍵。寫詩的關鍵在于你對生活、對世事的積累和感悟，在于你的思想是否深刻，情懷是否充足。
寫詩如此，做設計亦如此。設計知識只是做設計的基礎，而非關鍵。做設計的關鍵在于“其它知識”。“其它知識”非本文重點，就不展開了。
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咨詢、用戶體驗公司、軟件界面設計公司
原文地址：胡曉波工作室（公眾號）
作者：猴子
轉載請注明：學UI網》【字體設計】品牌標準字怎么設計？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
漢字是來自自然的語言，有著生動的內涵和規律，筆畫的點轉橫折，勾勒并呼應品牌的內在魅力，在積累和沉淀的這些作品中，通過漢字的美學理念表述著品牌獨特的形式風格，以上作品，一起來交流吧！
© 版權所有，未經允許不得私自使用！
感謝關注
賀冰凇視覺藝術
原文地址：站酷
作者：賀冰凇
轉載請注明：學UI網》賀冰凇品牌漢字卷！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
根據不同內容進行視覺呈現，可以在不改變布局結構的前提下，帶來差異化的感官體驗。主題化設計就是在背景層和元素層進行視覺發揮，不改變原生結構，被眾多產品進行設計發揮。
比如優酷 APP 在視頻播放頁面，視頻窗口下方區域會根據影視作品特征進行主題化設計。會在背景、圖標、按鈕和選擇器等元素上面進行主題化設計，情感化的設計更能帶給用戶共鳴感，提高用戶對產品的感官體驗。
空狀態的設計從生硬的文字提示延伸到情感化的表達，運用更加視覺感的形式帶給用戶良好的感官體驗。
最近在體驗酷狗音樂時，初次進入播放頁無歌曲時，采用黑膠 CD 作為空狀態展示。當用戶操作分享時則會以精美的配圖來強化空狀態，帶給用戶反饋的同時，也提高了播放頁的視覺感。情感化的設計更能與用戶產生共鳴，增加用戶對產品的好感度。
用戶在進行功能操作時，除了底層需求層面的反饋以外，反饋設計的視覺感也是至關重要的。好的設計可以加強用戶對產品的好感度，讓功能操作也能賞心悅目。
最近使用荔枝 APP 進行錄音時，輕擬物的錄音機設計印象深刻。在錄音過程中磁帶進行動效轉動，帶來場景化的真實感體驗，停止錄音時也會停止轉動，動態的及時反饋提高用戶使用體驗。輕擬物動態設計不僅強化了視覺感，動態及時反饋也是非常不錯的設計表達。
產品的流量區域屬于眾多功能爭相曝光的區域，在這個方寸之間的設計發揮，體現出了設計師的能力。如何將有限的資源發揮到極致，帶給用戶更多的功能體驗，需要產品設計師多在交互層面探索。
最近在使用酷狗音樂聽歌時，底部標簽欄上方的播放狀態區域給用戶提供了播放/暫停和切歌等操作，可以左右滑動來進行延伸功能切換。用戶可以選擇默認狀態進行歌曲之間的操作，也可以向右滑動以顯示歌詞為主，方便用戶在聽歌時觀看歌詞。在方寸之間通過滑動交互承載了多重功能，滿足用戶更多操作體驗，提高用戶對產品的使用體驗。
針對一些重點功能的按鈕設計，在按鈕造型、配色、圖標風格、微動效等方面都在不斷強化，以此來提高功能的關注度。
荔枝 APP 在錄音模塊中，為了突出錄音按鈕的存在感，結合了動態 IP 來進行強化。IP 形象從右下角出現與消失的動態效果，提高了錄音按鈕的關注度，俏皮可愛的形象也增加了設計的趣味性。
產品除了在使用體驗層面不斷優化以外，主要還是需要傳遞服務價值。服務的升級可以提高用戶的認同感，情感化的設計可以輔助服務的可視化呈現。
自如在“家福卡”模塊中，頂部視覺區域通過動態禮儀進行升溫設計。每次進入都會有人偶形象打招呼，顯得非常懂禮貌，使得用戶感受到被尊重，提高了親和力。通過動態形象進行禮儀表達，不僅提高了欄目的關注度，也讓用戶感受到這是一款有溫度的產品。
用戶反饋是打造優質產品的關鍵，如何提高用戶反饋的意愿至關重要，設計師都在不斷的思考和嘗試。
自如 APP 在采集用戶反饋時，設計了底部彈出的形式，詢問用戶是否愿意推薦自如。從絕不到強推設置了 0-10 分，當用戶選擇 9 分或以上時直接提交，低于 9 分可以描述原因。相對于比較隱藏式的用戶反饋設計，這種打分制的形式用戶操作更加便利，不會占用過多時間，用戶參與的意愿也會更高。
注冊應該算是用戶比較排斥的操作，但也是不得而為之的事情。通過情感化的設計降低用戶的排斥感，在趣味體驗的環境中完成注冊，可以帶給用戶更好的使用體驗。
最右 APP 在注冊時，進入注冊界面 IP 形象以打招呼的形式出現，當用戶輸入密碼時則會雙手蒙住眼睛。IP 情感化設計帶來了更多趣味性表達，以此推動了更加人性化的設計體驗。
分類設計采用純文字的表達顯得比較單一，也有一些產品會結合圖標或者圖形設計進行裝飾，以此來強化關注度和視覺感。
最近在使用肯德基 APP 點餐時，發現縱軸導航的分類設計結合了品類圖標，提高了瀏覽辨識度。運用圖標來強化可視化設計，提高用戶點餐時對于品類的辨識度，也能強化當前欄目和默認品類的差異。小小的改變不僅優化了視覺感，也能帶給用戶更好的感官體驗。
對于運動類產品來說，運動后的數據展示對于普通用戶而言顯得比較生硬，理解度來說不夠直觀。可視化的設計提供了更好的解決方案，看圖比看文字更直觀易懂。
One More 提供了簡潔直觀的訓練數據預覽，通過可視化的形式展示訓練后增強的肌肉部位，以及通過肌肉顏色變化體現訓練的強度。通過人體結構結合訓練強度進行可視化表達，不僅可以提高用戶查看訓練數據的關注度，也能提高數據的理解度，增強用戶使用產品的體驗度。
個性化設計可以滿足不同用戶的使用需求，也能體現出產品的差異化服務。提高設計的差異，帶給用戶更加人性化的體驗至關重要，無論是感官體驗層面還是功能操作層面，只有帶來不一樣的體驗才能提高用戶的黏性，增加用戶對產品的好感度。
今天給大家分享的這 10 個優秀案例，希望可以開啟大家的設計新思路，在常規解決方案的基礎上延伸出不一樣的設計創新。
原文地址：黑馬家族（公眾號）
作者：黑馬青年
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
又到了一年一度的龍蝦季，龍蝦最好吃的時候是6月、7月、8月，這三個月是龍蝦長得最為強壯，個頭大，肉質豐滿，也是最好吃的時候，碼字的時候想想這肉感口水都快流出鍵盤了，我先去舔下吃完龍蝦的餐盤先。
沒有一只龍蝦能活著離開廚房，同時也沒能逃過設計師的鼠標和創意之手。接下來就帶大家分享關于龍蝦類型的設計，滑到最后有彩蛋哦！
、
看了這么多不僅是嘴饞，作為設計師的你們是不是手癢也想自己用龍蝦創作一把，于是我在吃完龍蝦后，拍了下面的這個場景。
突然想到國內《神話》電影中成龍有一場類似的場景，于是與《權利的游戲》海報中的風格結合下，雖然畫風有點暗黑。
但是如果從小龍蝦的角度來看，這幾個月對它們來說是個災難，這也是作為龍蝦最后的倔強。
雖然一想龍蝦挺慘，但作為國人夏季夜宵時必備的龍蝦，實在控制不住十三香、蒜泥、冰鎮、蛋黃各種口味刺激食欲的味蕾，吃貨的本性再次打敗了剛剛對龍蝦稍有些留存的感性
原文地址：修先森撩設計（公眾號）
作者：修先森
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
2020 年 9 月上線，大概用了一年的時間，在核心功能上就已經與 Figma 對齊，而在這一年半里，他們還做到了很多不同且明顯有考量國內用戶習慣的特色功能，下面，就挑幾個我比較感興趣的點展開聊一下。
輕松管理素材、實現高效復用
有 Figma 在先，做資源社區已經成了在線設計工具的標配，而「即時設計」從一開始，就額外給出了一種與眾不同的資源形式——資源庫，用于提高組件庫、圖標、插畫等素材的復用性。
與其他工具「選好資源——創建副本至工作臺——打開文件復制所需元素」的流程不同，資源庫類型的資源，只需一鍵「引用」，即可將對應資源保存至進編輯頁面左下角的「資源庫」，然后做設計時可以一鍵拖拽復用。
同時，資源庫的內容會和廣場上公開的資源保持同步，發布者新增、修改、刪除內容，引用者都可以實時更新，雖然暫時只允許官方發布資源庫，但實用價值可見一斑。
另外，即時設計的資源庫不僅能保存廣場中的設計資源，還可以把編輯區域所有可見內容，包括個人收集的常用圖片素材等，一鍵上傳并保存，在任何一臺電腦上登錄賬號就能隨時使用，相當于給了你一個不限容量且所見即所得的設計云盤。
比起像 Figma 一樣平鋪展示所有文件的“粗放模式”和團隊的一級項目管理，即時設計增加了可以自由嵌套，不限制層級的文件夾管理功能，同時，還適配了拖拽和列表移動的操作。
而對于單個文件的管理，即時設計也根據國內用戶習慣進行了優化，通過「跟進文件」，可以將你自己近期需要處理的文件專門整理到「正在跟進」頁面，快速查看。
針對團隊的協作需求，即時設計還做了一個「文件狀態標簽」，可以給文件打上自定義的標簽內容，比如進行中、評審中、已完成，既能直觀了解項目情況，又能進行篩選，有效地提升了團隊用戶對接效率。
從這些點里，相信大家都能能看得出，即時設計團隊對一些細節需求的洞察能力，而且在很多方面都做了足夠多的思考。
導入 Figma、Sketch、XD，導出 Sketch
為了滿足設計師的遷移需求，即時設計支持了 Figma、Sketch、XD 三種主流文件格式的導入，同時，它還是最早支持 Sketch 導出的設計工具。
除了上面提到的，還有很多能看出有特別考量的功能，可以一鍵導入個人字體包的云端字體庫，可以遠程預覽設計稿并打點評論的手機 App、微信小程序，自定義多彩主題……
雖然插件市場還沒開放，但也有了不少吸引人的第三方合作插件，比如「字由」、iconfont、IconPark 等等，都是在 Figma 里不曾有過的體驗。
創新能力，我們自然是有的，而且還很足，國內不管是龐大的用戶基數，還是獨特的軟件環境，也都會讓我們的國產工具得到更加特別的發展。
本土工具的自主研發之路還很長，但「即時設計」無疑是開了一個好頭，而且步子邁得昂首挺胸，我也相信，他們有能力，之后給出更多的驚喜，支持國產，不妨一起期待一下~
即時設計：https://js.design
原文地址：功夫體驗設計（公眾號）
作者：彩云Sky
轉載請注明：學UI網》為什么說是時候選擇這個工具了
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在產品設計中動效很常見，一個好的動效方案在提升用戶視覺和心境體驗的同時，還的的確確解決了很多其他設計問題。
好的動效設計總是在比擬現實，所以當我們思考為頁面添加動效時，不應該感性的隨心所欲的發揮自己的創意激情，而應該像科學一樣，有一些基本的方法原則指導來我們，以此提升動效可用性。
今天主要分享一下在數字產品中動態設計的13個基本原則，希望對大家有所幫助。
▍緩動 ?
現實世界中絕大多數物體都不會突然運動，再保持勻速，最后突然停止（機械類運動除外）。而是緩慢加速或緩慢減速，這就是緩動。
緩動幾乎適用于產品中任何元素的出現或離開、以及部分圖數據加載等。
滑動內容
圖表加載
在加載信息時，我們可以對信息歸類分組，并按順序依次延遲內容出場時間。這就是延遲與偏移，可以清晰的表達內容之間的關系。
在二維平面，如果信息很多，為了避免信息過載，我們可以將不重要的信息，或負面操作放置在前景內容后面，這就是疊加。用來模擬現實紙張疊放，創建出二維平面中的前后空間感。
當我們點擊某個內容時，我們通過改變內容中某個主要元素（用于視覺引導的過渡元素）的輪廓并移動，這樣可以將用戶自然的帶入下級頁面，這就是蒙版。通過保留過渡元素的識別性，創建出無縫過渡，降低用戶跳轉頁面時可能產生的迷失感。
現實世界大多數物體運動軌跡都是弧線，所以當位于角落的元素移動時，我們調整運動軌跡呈弧線，可以讓元素運動更加流暢自然，這就是弧型。
注意：下面案例中元素上移是從左下往右上的弧線，但回來不是原軌跡返回，而是將弧線對稱反轉（類似拋物線），從右上往左下。
如果一個主要操作中包含其他操作，在用戶與其互動時我們可以直接將元素分離出來，這就是克隆。再通過模擬現實世界中液體分離，可以清晰的表達出內容的包含關系。這類設計常見于底部的舵式導航按鈕，點擊后出現一系列功能圖標。
將兩個元素的屬性進行關聯，通過影響其中一個元素的屬性，去影響另一個元素，這就是父子級綁定。給兩個元素創建了一個隱形的傳動軸，呈現一種用戶正與內容進行實時可控的互動方式。
下圖是通過小圓圈的旋轉屬性影響中間數值。
當某個元素存在先后兩種樣式時，我們可以給元素路徑設置動態，使其形狀從起始狀態逐漸變化到結束狀態，這就是轉換。從起點到終點的無縫過渡，清晰自然的表達出任務結束。
在一個二維空間中，一屏展示的內容有限，當觸發另外一個二維空間時，為了減少頁面跳轉，我們借助中間層并降低不透明度，或把背景模糊，這樣可以將它們同時放在一起展示，這就是遮罩。幫助我們理解當前空間與原本空間之間的關系。
當看二維平面有些乏味的時，我們可以給頁面賦予三維空間的深度，像真實世界的物體有厚度一樣，用來表達該頁面存在其他可以互動的側面。這就是多維度，解決原本二維平面沒有深度的問題，也帶來更強的位置感。
線上產品中：
【嗶哩嗶哩】有做下圖中類似的3D頁面翻轉效果（我一時忘記在哪個模塊，有知道的同學可以留言告訴我，謝謝）。
【紅板報】有做翻頁效果，感興趣的同學可以去看下。
金融和運動類產品中數字很常見，每次加載數字時，我們可以賦予數字動態變化，這就是數值變化。作用不僅僅是傳達出數字的動態性質，更重要的是強化數字與用戶的綁定關系（類似上秤后上漲的數字告訴你又“強壯”了。嗯？繼續努力），讓用戶更加積極的維護數據變化。
界面中元素的運動速度并不是始終一致，當有多個元素時，為了建立良好的層次結構，我們可以讓重要的可交互的元素運動速度更快，非交互元素運動速度更慢。（也可以根據設計目標反過來處理）這就是視差，將用戶視線引導到可交互元素上，同時讓非交互元素保持動態一致性。
頁面中，我們始終在處理內容的展示與空間轉換，為了能看到更多內容細節，我們讓內容支持縮放來模擬相機變焦。為了能體現內容與內容在空間上的關系，我們模擬攝像機推進和拉遠，這就是縮放與推拉，帶來了更多的深度與空間體驗以及無縫轉換。
縮放
推拉
原則用于參照，在理解原則的基礎上去打破。這樣，動態設計將給我們帶來了更多可能性。
盡管一些效果在當下實現上任然有著較高的成本，但相信隨著技術的發展，在將來的產品設計中會看到越來越多讓我們驚艷的設計解決方案，只是在這個過程中還需要我們共同努力鴨！
參考文獻：
https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
作者：幺零三
轉載請注明：學UI網》UI動效設計原則
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
即把視覺主體做成玻璃質感或者是琉璃質感，并且在排版的時候，通常會把主體壓在文字上，通過透明的材質使文字發生折射，創造出強烈的視覺反差。
酸性設計是一種結合了金屬質感、鐳色漸變、達達主義、機能素材等特性的設計風格，在視覺上會有一種“酸”的感覺。
有很多設計會把這種不銹鋼質感的風格統統歸結為酸性風，其實我覺得二者的差別還是挺大的，首先，這種不銹鋼質感的顏色是黑白灰的，而不是彩色漸變；其次，整個海報的主色調通常也是黑白灰，視覺效果會低調、簡約一些，并沒有“酸”的感覺。
因電影《蜘蛛俠之平行宇宙》的系列海報，熒光風也火了起來，畫風類似街頭涂鴉，并采用飽和度極高的對比色搭配，會有一種刺眼、眩暈的感覺，但視覺沖擊力確實強，而且很酷、很潮。
彌散漸變是一種通過模糊效果塑造的漸變效果，看上去像似水墨暈開的感覺，而且通常會加上一點雜色質感，使用這種漸變效果來繪制一些簡單的插畫，有一種清晰、時尚的感覺，常用于食品海報中。
即通過簡單的幾何圖形來繪制純二維的插畫，效果簡單而抽象，這種風格一直都是設計師的寵兒，所以并不是最近才開始流行的，但是RGB色彩的使用可以讓畫面更加具有視覺沖擊力，再配合靈活的描邊和排版處理，這種風格也變得越來越現代、時尚。
這個備受爭議的設計風格，喜歡使用很大膽、很刺眼的配色風格，比如玫紅色配綠色，插畫很隨意，類似小孩的畫作，在排版和構圖上也很不嚴謹，完全不符合傳統優秀設計的定義，故被稱為新丑風，在商業設計中要慎用。
這類設計通常以文字為主，沒有圖片元素，把主要的文字通過3Ｄ貼圖或者扭曲的方式，使其呈現出三維的視覺效果，這與文字通常呈現出來的狀態完全不同，所以視覺沖擊力也很強。
3Ｄ的世界是最接近真實的世界，所以3Ｄ是大的趨勢，而如果把3Ｄ和富有想象力的插畫結合起來，那么效果會更加的驚艷和震撼。
在3Ｄ的基礎上繼續深化就是3Ｄ動效，被經常用在電商設計、線上海報設計和網頁設計中。
畫面中的圖形也是簡單的幾何圖形，但質感通常是用漸變工具做出的、比較粗暴的金屬效果，再加上復古的配合和雜色質感，看上去很像上個世紀的海報。
即把早期的電腦、電子設備出現故障所呈現出來的畫面和效果，融入到設計當中，通常也會結合蒙太奇手法（拼貼風）使用，常用于藝術設計中。
機能風也不是這兩年才出現的，但最近也很火，畫面的氛圍比較科幻，通常以機器人或者被機械加工過的人物作為視覺主體，標題字體一般會用簡潔、硬朗的無襯線體。另外，類似電路板造型的界面框也是機能風常用的設計元素。
– over –
轉載請注明：學UI網》13種當下正火的設計風格，潮爆了！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn