一、日常積累

設計師日常除了應對當下的需求，每天可以拿出一定時間保持學習的習慣。不僅可以讓我們緊跟最近的設計趨勢、設計潮流、設計方法，也可以讓我們潛移默化中得到提升。

Panda｜全而美的設計訂閱平臺

Panda幫助設計師不錯過每天的設計靈感和資訊，包括新的設計方法理念、流行潮流、也有一些新產品推出。我們可以把Panda替換Chrome主頁，每次打開瀏覽器頁面都可以隨時看到最新的設計資訊。一些英文的訂閱也可以用chrome瀏覽器的翻譯功能可以粗略查看。

地址：https://app.usepanda.com/#

Topys｜創意內容平臺

全球頂尖創意內容平臺，作為中國成立最早、最受歡迎的創意垂直網站，以 “Open Your Mind” 為宗旨，始終專注在全球創意、藝術、靈感、人文領域尋找最有質感的聲音。

地址：https://www.topys.cn

Voicer｜分享生活和設計的美學

我們總在生活中與「一瞬間的感動」相遇。Voicer的理念即是發現這「感動」， 將它傳遞給更多熱愛生活的人們。內容包括創意內容品牌、在線雜志等。致力于分享生活和設計之美。

地址：https://www.voicer.me

Design better｜優質設計讀物網站

涵蓋設計商業思維、產品設計原則、設計系統等關于推動設計團隊前進的實踐讀物，同時提供PDF和有聲格式。

地址：https://www.designbetter.co

二、研究分析

設計師在調研過程會研究用戶、記錄用戶的行為和需求，會使用一些高效的記錄工具。同時繁多的調研的信息需要匯總整理，協作整理，這里會推薦一些記錄和整理的工具給大家。

Noted｜錄音筆記好工具

Noted 是一款將錄音和筆記相機相結合的軟件。我們做訪談用戶或做會議紀要的時候，經常錯過記錄的內容，如果通過一些軟件錄音的話，后期回聽需要比較多時間成本。Noted可以在記錄筆記的同時記錄輸入文字的時間點所對應的錄音，輸入的每個字的時間點都會對應到。當內容沒記錄下來時可以隨時跳到對應時間的錄音進行回聽，方便在漫長的錄音文件中快速檢索。

Marginnote｜文獻收集箱

重塑學習方式的閱讀筆記工具，更加高效閱讀書籍和學習，可以在閱讀時摘錄筆記，制作學習卡，提取關鍵詞，根據筆記生成思維導圖，梳理知識框架。非常適合閱讀專業書籍，閱讀論文以及復習。

地址：https://www.marginnote.com/chinese/home

GoodNotes｜手寫筆記

一款功能強大的手寫筆記軟件，擁有多種筆記封面和紙張模板可以選擇，支持自定義模板，可以簡單處理圖片，可以導入pdf、ppt等文稿并做標記，也適合做電子手賬。

地址：https://www.goodnotes.com/zh-cn

騰訊文檔｜在線協作

調研階段方便多人一起搜集資料和匯總，多人同時在線編輯，內容實時同步。隨時隨地高效協作，輕松創作。

地址：https://docs.qq.com/home

Xmind｜思維導圖

功能強大的思維導圖軟件，極簡設計，流暢體驗，多種結構圖風格選擇，方便資料的匯集和思路的整理。

地址：https://www.xmind.cn

三、設計創作

當設計目標確定時，接下來進行具體的創意設計。設計師除了通過腦暴進行發散方案以外，一些高效的設計工具可以讓我們事半工倍。

3.1 靈感搜集

Collect UI｜界面靈感

UI設計靈感庫，基于dribbble平臺精心挑選優質內容，提高效率便捷，為設計師提供專項更好的靈感。同時支持郵件訂閱推送。

地址：https://collectui.com

Adobe Color｜配色靈感

Adobe color不僅從各個維度解決了我們的配色需求，同時也提供找圖需求。其中包含 9 種智能調色模式可以選擇。拾取主題色、拾取圖片中的漸變色、協助工具可以合理幫助檢查不同顏色的對比、探索behance趨勢。

地址：https://color.adobe.com/zh/create

Useanimations｜圖標動效靈感

圖標動態效果庫，當繪制的圖標需要一些巧妙的微動態效果時可以參考。

地址：https://useanimations.com/index.html

3.2 設計打磨

FigmaEX｜插件可視化

當插件特別多時候，FigmaEX極大的改善了Figma中使用插件的體驗，將插件可視化?？梢赃M行展開，同時顯示插件的名稱與圖標。可以通過拖拽調整插件的順序，調節高度。

Autoflow｜流程圖插件

輸出交互設計稿的時候，方便快捷的在不同畫板之間連線，提升輸出效率。

地址：https://www.figma.com/community/plugin/733902567457592893/Autoflow

Skewdat｜傾斜插

這是一個非常簡單實用的 Figma 插件，它可以幫你將任何形狀元素傾斜過來。

地址：https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprio

Undraw｜插畫素材

最棒最全的插畫庫，支持快速搜索，一鍵調整顏色。

地址：https://undraw.co/illustrations

Magic Eraser｜輕松移除雜物

一款免費的在線服務，它通過 AI 自動去除圖片中不需要的部分，只需要上傳圖片，等待幾秒鐘即可。用鼠標把不要的部分劃掉，松開鼠標就會閃幾下，被劃掉的部分就消失了，比如去水印之類的小東西，如果用 PS 的圖章，估計要十來分鐘，而用 Magic Eraser 就幾秒鐘，簡單易用，推薦使用。

地址：https://www.magiceraser.io

3.3 設計驗證

Checklist Design｜設計清單

設計輸出后可以通過這個清單去做最后的檢查。網站列舉了一些通用場景（頁面、元素、流程、主題、品牌）下的基本設計要素。可以檢查你的設計在這些場景下是否符合規范。樣式、顏色、命名、易用性等是否合適。

地址：https://www.checklist.design/?ref=prototyprio

四、測試評估

好的方案不是一蹴而就的，設計方案需要不斷的打磨和迭代。方案需要持續和用戶進行溝通和測試，才能得到完善的方案。也需要和開發工程師不斷溝通，以達到最佳的實現效果。

4.1 用戶測試

騰訊文檔｜在線收集表

用戶測試階段方便高效的收集用戶反饋，一般用于定量的用戶測試。

地址：https://docs.qq.com/

Hawkeye｜眼動追蹤工具

一般的眼動跟蹤設備比較昂貴，使用繁瑣。這個名為鷹眼的眼動追蹤APP，可以通過手機前置攝像頭捕捉用戶在使用產品時的視覺動向。

地址：https://www.usehawkeye.com/?ref=prototyprio

4.2 評估還原

CoDesign｜騰訊自研設計協作平臺

覆蓋產品經理、設計師、工程師協作需求。設計交付更輕松，有效管理和使用設計資產。

地址：https://codesign.qq.com/

Pixel Eye｜高效視覺還原

在項目上線前設計師都會對最終的產品實現效果進行走查，以保證設計還原的準確性，體驗的流暢性。這是一款視覺還原工具，幫助前端工程師在頁面重構階段就能快速發現開發稿與視覺稿的差異，實時對比、實時修改，減少工程師與設計師的溝通成本，提升整體開發效率。

地址：pixeleye.暫未對外開放敬請期待

五、對外宣傳

設計完成后匯報展示、產品的宣傳包裝等，提供更便捷優秀的展示形式。

5.1 效果展示

Mockup World

樣機的類型全面而且免費，綜合質量很高。

地址：https://www.mockupworld.co

ls.graphics

素材非常優質精美，有免費和付費的資源。

地址：https://www.ls.graphics/#UI

5.2 在線作品集制作

Adobe Portfolio

主要面向設計師群體，幫助設計師建立個人在線作品集。幾分鐘就可以建好一個作品集網站，提供精美模板選擇。最大的特點是易于操作，無需懂網頁程式，都能在建立一個網站。最重要的是你可以使用自己的域名。Adobe Portfolio需要收費。已訂閱用戶可免費使用。

地址：https://portfolio.adobe.com/start

Portfoliobox

針對設計師或者創意人員的作品展示工具，可以直接在網頁瀏覽器中搭建屬于你的作品展示平臺。

地址：https://www.portfoliobox.net/cn/

結語

此綜述篇大家有了比較整體的了解，在設計流程中每個環節，介紹了一些比較好用的工具，后續的設計工具系列文章會針對某一環節進行更深入的探索。

感謝閱讀，以上文章由騰訊ISUX團隊創作，版權歸騰訊ISUX所有,轉載請注明出處，違者必究，謝謝您的合作。 

原文地址：騰訊ISUX

作者：ISUX設計

轉載請注明：學UI網》設計效率工具趨勢 ｜ 綜述篇

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、利用手勢輔助實現快捷操作

利用手勢交互輔助隱藏式功能操作，可以在不改變當前結構的基礎上實現快捷操作，帶給用戶更加便捷化的體驗。

夸克 APP 在訪問了多層級頁面之后，如果想要快速回到瀏覽器主頁，點擊返回按鈕一級一級返回過于繁瑣。通過底部導航欄向上進行滑動，可以快速激活返回主頁的操作，手勢輔助實現自動跳轉。該設計解決方案通過手勢輔助隱藏功能操作，提高了用戶對于產品的使用體驗。

二、點贊設計的情感化探索

點贊在閱讀類場景中隨處可見，用于表達用戶對內容的認可度而產生的情感共鳴，通過點贊給予贊同。點贊設計的創新已逐步在探索，通過更加情感化的設計表達提高用戶體驗，借助手勢的變化呈現出更有趣味性的點贊設計。

今日頭條 APP 單擊點贊圖標會隨機性彈出表情化符號，多次點擊會持續彈出更為豐富密集的表情符號，長按則會像模擬持續發射的特效，伴隨著音效和震動帶來“視聽觸”等多重體驗。點贊設計的情感化探索不僅帶給用戶多重感官體驗，也是用戶釋放閱讀壓力的一種情感共鳴。

 

三、情感化的點贊文案設計

除了從點贊視覺感官層面進行設計探索以外，眾多產品也在文案提示設計上面進行情感化探索。

AcFun APP 在對話題等內容點贊時，會彈出溫馨的文案提示，每次點贊都會出現不同的文案。情感化的文案設計提高了話題互動的活躍度，帶給用戶更好的社交互動體驗。

 

四、突破常規的模式切換設計

設計都在探索差異化的感官表達，如何突破常規至關重要。無論是在布局結構層面還是元素情感化表達層面，設計師都在嘗試更有創新的表達，帶給用戶不一樣的使用體驗。

Wonder APP 在模式切換上做出了一個新穎的設計解決方案，通過環形卡片設計進行模式切換，可以單擊和滑動進行切換。動態的卡通形象增加了感官體驗，流暢的卡片切換也帶來了不錯的操作體驗，是一個在布局層、視覺感官層、互動層等方面的不錯探索。

五、特色的簽到展示設計

簽到設計對于大家來說并不陌生，提高用戶簽到的參與度是大家都在不斷思考和探索的方向。

AcFun APP 將簽到設計成日歷展示形式，點擊簽到之后彈出，配合日歷運勢的概念來設計，提高用戶的簽到興趣。內容卻不是正式的日歷運勢相關內容，配合趣味化的文案設計，讓用戶會心一笑。視覺感和情感化文案設計的融入，提高了簽到設計的感官體驗，進而提高用戶的參與度。

 

六、自定義字號提高閱讀體驗

通過公眾號等自媒體進行閱讀已經成為大家的習慣，不同公眾號編輯內容都會有所不同，字體大小和行間距等沒有特定的規范。官方雖然會有默認設置，但是無法兼顧不同的內容需求。提高小編的編輯體驗和滿足用戶的閱讀體驗，自定義的閱讀調整至關重要。

在公眾號閱讀文章時，可以通過右上角的功能入口進入“調整字體”。用戶可以根據自己的閱讀習慣設置字體大小，在標準和自定義大小之間切換，提高用戶的閱讀體驗。

 

七、自選色實現更靈活的個性換膚

個性化的皮膚主題在眾多產品中已經運用普遍，當用戶體量增加之后，個性化的設置才能滿足不同用戶的體驗需求。

酷我音樂 APP 在個性換膚模塊中，除了設置多個主題皮膚供選擇以外，用戶還可以通過自選色設置更加靈活的配色風格?？梢赃x擇更多推薦的配色風格，也可以通過色環自己調節任意顏色，滿足不同用戶對于感官體驗的需求。

 

八、自定義圖滿足用戶的創作欲

對于一些追尋個性化較強的用戶，預裝的自定義設計已經無法滿足他們的體驗需求，激發用戶創作欲的設計迎面而來。

酷我音樂 APP 在個性換膚模塊中，用戶可以通過“自定義圖”實現更加個性化的皮膚。用戶可以選擇任意拍攝的照片，然后通過透明度和模糊度來調節照片效果，滿足自己對背景效果的要求。針對按鈕的顏色也提供了幾個配色選擇，用戶可以根據自己調節后的背景效果進行搭配。基于更加個性化的需求滿足用戶的創作欲，才能帶給用戶更加人性化的使用體驗。

 

九、關聯功能疊加設計提高使用率

為了提高功能的曝光度，直接展示在用戶的視野中是很多設計師的處理形式，但是卻增加了感官層面的視覺負擔。

幸識 APP 把關聯功能進行合并式的疊加設計，不僅對視覺進行降噪，由于屬于關聯性的操作，用戶更容易通過功能聯想進行使用。當用戶點擊觀看“時間戳”時，底部功能會被替換為“發起”，發起時間戳和觀看本身就是一個流程的體驗。當我們遇到關聯性功能設計時，不一定選擇各自展示，相互疊加或者切換式的交互設計也是不錯的解決方案。

 

十、趣味性爆滿的點贊設計

點贊是用戶情緒化表達的關鍵，表示對于內容的認可度和作者的支持度。普通的點贊設計已經無法滿足一些情緒爆滿的用戶，更加趣味夸張的設計在逐步被探索。

微博 APP 針對點贊設計單擊時，出現表情化的符號彈出，持續點擊或者長按點贊圖標則會出現色彩豐富、表情符號四處爆發的視覺效果。一場趣味性爆滿的視覺盛宴，滿足用戶釋放情緒的最大化需求。

小結

在用戶使用體驗和感官體驗層面探索了這些優秀的案例，希望可以拋磚引玉，帶給大家更多啟發。發現設計背后的思路，總結設計表達的經驗，運用優秀案例的技巧，提高我們的設計解決能力。

以上總結僅代表個人觀點，如有不足歡迎大家留言補充，我們互相進步。

01 替代重復繁瑣操作的效率插件

? 智能填充

做設計時，同學們一定遇到過這種情況，某些模塊需要用圖片或文字進行展示。

用單調的圖形和隨意的文字占位不夠真實美觀，手動添加圖片編輯文本又太麻煩，能不能有工具幫我一鍵隨機生成并填充？

當然可以，「智能填充」插件就是專門解決這類問題的。

選中任意文本，即可選擇智能填充人名、時間、日期、段落及對話等 9 種不同的預設內容；選中非文本圖層、分組或畫板，就可以智能填充人物頭像、風景、美食等 8 種類型的無版權圖片。

? 快速復制

做設計時，很多同學會遇到一個頁面中需要出現多個相同模塊的情況，比如商品列表、視頻頁、相冊等等。

處理起來也不難，多按幾次 Ctrl+C 和 Ctrl+V 就行。但復制出來的模塊經常重疊在一起，還需要逐個拖拽排版……時間就是被這樣浪費的。

但其實，這些繁瑣的步驟完全可以用「快速復制」插件一鍵搞定。

只需做好第一個，選中全部圖層，打開插件，設定好橫向與縱向的復制數量及間距，點下按鈕就能一鍵復制。

像我演示用的這個即時設計的插件，復制完成后，還預留了按鈕，點一下就能打開「智能填充」，很貼心。

? 文本拆分

還有專門用于處理大段文字的「文本拆分」插件，能將一個文本圖層拆分為多個，方便分別設計排版；也可以將多個文本圖層組合為一個重新編輯。

類似的提高設計效率的插件還有很多，例如：

「圖標尺寸調整」——可以批量調整不同 icon 及其外框大??；

「字體替換」——批量替換設計稿中使用到的所有字體，并保持原有文本樣式屬性；

「查找替換」——能搜索定位文本內容并替換，且不改變原有文本樣式。

02 整合圖標字體的資源插件

各種各樣的免費或付費的素材庫給我們提供了很多便利，但也不是所有類型的資源，都適合下載文件，再導入使用的。

比如圖標和字體這兩類，使用頻率非常高，如果每次都需要下載導入安裝，無形中就增加了很多重復工作。

所以，很需要有一些工具，來讓這兩類資源的取用更加便捷，比如，圖標插件和字體插件。

? 海量圖標—— iconify、iconfont & IconPark

現在的圖標庫都能直接下載 SVG 格式，所以不用太考慮顏色尺寸的問題。

但做設計久了，就會在電腦里存下許多圖標文件，整理起來屬實麻煩，都刪掉了又可惜，萬一哪個還能用到呢？

這時候，如果安裝幾個圖標插件，就沒有這些問題了。

點開插件，搜索想要的圖標，選中圖標并修改尺寸和顏色，直接拖拽使用。

國內常用的 iconify、iconfont 和 IconPark 都已有插件接入。

? 字體方案——字由插件

做海報、封面、banner 圖的時候，同學們應該經常會用到很多不同風格的字體。

但經常會遇到精挑細選并下載安裝了好幾款字體后，發現用在作品里視覺效果并沒有那么好，還得重新找字體并安裝……

面對這種情況，最省事的方式應該用類似「字由」的第三方字體插件來管理字體。

安裝字由客戶端后，里面的字體方便查找，點一下就能激活，然后直接在設計時使用，幫我們省去了很多檢索和下載安裝字體的步驟。

這里需要提出的是，Sketch 和 XD、PS 這些本地軟件應該都是支持字由的，在線工具的話，目前只有「即時設計」支持字由，Figma 也是完全沒辦法用的。

當然，即時設計的字體方案還是值得一說的，其實之前也提過挺多次了，“本地+云端”的多種方案，最大的亮點是：

1. 個人設計師不止可以使用本地安裝的字體和「字由」的字體，還能免費上傳自己的字體文件到云端和其他人一起使用。

2. 團隊的版權字體還可以直接上傳到團隊共享庫，所有團隊成員都能隨時在線使用，完全不用下載安裝。

03 提供圖形配色方案的插件

? 圖形生成——不規則圖形

我經常給星球的同學們布置一些作業，而在設計過程中最常用的裝飾元素之一，就是不規則圖形，看起來簡約又高級。

需要不規則圖形時，最常見的做法是用鋼筆工具自己畫一個，但還有更快捷的方法，用「不規則圖形」插件隨機生成斑點或者波浪。

這類插件一般包含很多預設方案，點一下就能隨機生成。

如果覺得隨機“搖”出來的圖形不合心意，還可以自己調節修改。斑點的錨點和曲率，波浪的高度、層數、峰數都支持自定義。

雙擊生成的不規則圖形，還能繼續拖拽修改形狀。這么一通修改下來，只有復制粘貼才能得到兩個完全相同的圖形了。

? 色彩使用——漸變色

同學們在設計作品中，經常會用到漸變色，但是很多同學不擅長調出好看的漸變色，做出來的圖看起來很臟，尤其是顏色跨度較大的時候。

這種情況下，一個收錄若干經典配色的「漸變色」插件就能幫上大忙。

如圖我用的這個漸變色插件，就收錄了來自 WebGradients 的 180 種線型漸變配色，可以一鍵快速填充；給出的漸變色方案，也都很具備學習參考的價值。

? 色彩搭配——圖片取色

我還找到了一個非常適合用來參考和使用色彩搭配的插件——「圖片取色」。

優秀的攝影或設計作品中都具有極為豐富且和諧的色彩搭配，而「圖片取色」這個插件可以識別圖片中 5 種主要顏色，方便我們學習配色、汲取靈感。

用起來也很方便，選中圖片，再點一下「圖片取色」，就能精準識別圖片中配色，并按照顏色占比依次展示。

04 點一下秒安裝/卸載

今天的插件就先分享這些了，上面的演示我都是用「即時設計」做的，Sketch、Figma 應該也都可以找到不少類似的插件。

如果想要快速感受一下的話，可以直接打開即時設計，插件廣場里還有很多，安裝卸載也很方便，點一下就行。

安裝完回到編輯頁面就能直接使用，展開的列表里，每個插件在名字旁邊還配有簡單易懂的圖標，一眼看過去就能更快地定位自己想要的插件。

總結

從提高效率減少重復操作，到整合常用資源讓取用更順手，再到圖形色彩的方案提供。

即時設計充分照顧到設計過程中最常見的一些問題，已經能滿足我大部分的需求了。

除了已有的這些，即時設計還在持續上新，官方還表示之后也會像 Sketch、Figma 一樣開放第三方插件。

現在只想喊他們快點開放，我已經迫不及待想看看，國內的大神能做出什么樣更好用的插件工具了！

鏈接我放在下面了，對這些插件感興趣的同學們，可以去體驗一下~

即時設計插件廣場：

https://js.design/pluginSquare

原文地址：菜心設計鋪（公眾號）

作者：菜心

轉載請注明：學UI網》太簡單了！別人要做一小時的頁面，我用這些效率插件一鍵生成

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

目錄

一、晶白風格的扁平突破

二、磨砂玻璃質感的運用

三、強化圖標微質感的深入

四、2.5D 風格的巧妙結合

五、三維的立體感強化

六、插畫風格的簡化融入

七、立足于品牌的圖標設計

八、造型疊加豐富色彩搭配

九、動效圖標強化局部差異

十、主題化圖標風格普及

一、晶白風格的扁平突破

晶白風格是通過白色質感來實現的，通過對圖標元素進行透明度變化、投影、內陰影、外發光等進行設計，使得更有層次感。

相較于扁平化的圖標設計來說，晶白風格更有層次感和質感，作為金剛區圖標設計運用非常普遍。除了通過白色不透明度漸變來實現以外，也會隨著背景或者環境色的變化融入色彩渲染，呈現出更豐富的設計細節。

晶白風格圖標就是通過兩端白色漸變，配合兩端顏色不透明度來進行深淺控制，也可以通過內陰影和外發光等來增強質感。眾多設計軟件都可以實現，靈活性非常高。

二、磨砂玻璃質感的運用

磨砂玻璃質感的設計表現是近些年較為流行的設計趨勢，被廣泛運用到視覺設計的眾多領域。在 UI場景中作為視覺感強化被普遍應用，其中在圖標設計上的表現尤為突出，呈現出了眾多的優秀案例。

金剛區作為產品架構中的重要組成部分，也是更新較為活躍的部分，對于視覺感的要求非常重要。磨砂玻璃質感的圖標很多產品都會階段性使用，也是因為這一類風格具有典型的特點和視覺張力，能夠形成比較大的視覺差異，帶給用戶不錯的感官體驗。

磨砂玻璃質感圖標可以通過 Sketch、Figma 等軟件的背景模糊功能實現；如果是 PS 和 AI 等沒有背景模糊功能的軟件，則可以通過模糊度結合剪切蒙版來實現。實現的方法很多，大家可以多多嘗試，這是一類比較容易掌握的圖標風格。

三、強化圖標微質感的深入

圖標設計從寫實到扁平，再到微質感，都在不同的時期進行改變，通過風格的優化避免用戶的視覺疲勞。寫實類圖標視覺疲勞度較大，在年輕化的趨勢中顯得過于繁瑣，而介于寫實和扁平之間的微質感被深入探索。

微質感的深入可以使得圖標風格突出，質感和層次感強化了圖標的立體空間感，在整個界面中可以形成視覺差異?？梢泽w現出模塊的重要性，也是圖標設計感體現的一種方向。

通過漸變色、不透明度漸變、投影、內陰影等形成層次變化和光影效果，多圖層刻畫來強化圖標質感和層次感。

四、2.5D 風格的巧妙結合

2.5D 也稱之為偽三維，在前兩年非常流行，作為插畫風格延伸出來的，當時 2.5D 插畫被普遍運用到眾多領域。把一個獨立元素作為原子，通過原子的數量分布形成 2.5D 場景。

將 2.5D 風格結合到圖標設計中，可以使得圖標更容易形成立體感，設計師不會受制于透視基礎的薄弱。無論是 C 端還是 B 端場景中的金剛區圖標都比較適合，很容易基于簡單的立體造型上設計出豐富的變化。比如結合玻璃質感、微動效或者其他設計趨勢均可，設計的駕馭度很高。

2.5D 風格的圖標很容易掌握，只要繪制好基礎原子部分，就可以演變形成各式各樣的 2.5D 造型?？梢酝ㄟ^ AI 軟件的 3D 功能輕松繪制，大部分場景都是基于立方體、圓柱體等基礎造型進行變形。

五、三維的立體感強化

三維類的圖標設計相較于 2.5D 風格來說，空間感和透視角度更加深入，光影的變化更加豐富。圖標設計中的三維立體感強化，對于設計師的要求更高，掌握一個三維軟件需要一定的學習成本。

隨著 C4D 等三維軟件的走熱，掀起了一股學習熱潮，被運用到金剛區圖標設計中，帶來的視覺效果也是非常不錯的。較強的空間立體感和光影效果，在界面中的視覺呈現尤為突出，也能帶給用戶更好的感官體驗。

六、插畫風格的簡化融入

隨著用戶對于感官體驗的升級，風格特征的差異化體驗至關重要，而插畫風格的融入可以提升圖標設計的特征感。

插畫風格運用到圖標設計中，需要做簡化處理，可以是插畫的局部元素或者簡化后的小場景插畫。風格多樣的插畫風格也會延續到圖標中，不僅可以使得圖標具備差異化的視覺效果，也能烘托出整體設計的質量。

通常矢量風格的插畫類圖標比較常用，由于圖標占比限制，不合適表現特別繁瑣的插畫風格?？梢允俏鼍暗牟瀹嫳憩F，或者是局部元素的插畫表達，這一類圖標風格將會在未來被廣泛運用，以此來提高圖標設計的視覺差異化表達。

七、立足于品牌的圖標設計

立足于品牌做設計，這是設計師需要深入探索的方向，而金剛區圖標設計亦是如此。品牌基因融入到圖標設計中，可以輔助突出產品的品牌感，也能形成設計表達的差異化。

品牌基因化的圖標設計具備一定的特征性，也是視覺差異化的一種形式。通常的做法有將品牌色全部融入圖標中，或者品牌色作為圖標配色點綴；也可以提取品牌 LOGO 輔助圖形形成基因圖形，融入到圖標造型設計中；也有結合吉祥物來突出品牌感的，融入吉祥物造型、局部圖形、輪廓圖形等；如果圖形角度無法提煉，也有提取品牌文化、服務特征、用戶群體特征、行業特征等，從中提煉關聯性的圖形融入圖標設計中，以此來強化品牌感。

品牌作為設計的思考起點，不僅可以輸出差異化的設計作品，也能串聯起整個項目設計的規范。

八、造型疊加豐富色彩搭配

如果覺得質感一類圖標表現力比較繁瑣，但是又不想只是簡單的線性或者面性圖標，造型疊加和配色疊加形成的圖標風格算是介于兩者之間的存在。

通過圖形之間疊加豐富圖標造型，疊加部分配色的調節豐富圖標色彩搭配，形成的圖標風格比較年輕化。視覺效果也是深受年輕用戶的喜歡，帶來不錯的感官體驗。

這一類風格的圖標可以通過布爾運算設計圖形部分，顏色的疊加效果可以通過圖層樣式實現，也有一些是圖形分割之后進行分別著色的。通常疊加部分的顏色會往更深的方向延伸，大家可以嘗試不同的形式去進行配色，選擇符合主題的圖標配色效果。

九、動效圖標強化局部差異

微動效運用到圖標設計中尤為普及，特別是在金剛區模塊，可以作為突出功能的強化。動效圖標已經成為一種獨特的表現力，相較于靜態來說更有吸引力，也能帶給用戶更加趣味性的感官體驗。

在金剛區模塊中，動效圖標通常是用于區別特殊功能，或者需要重點突出的服務或者主題活動等。不改變整體圖標的風格，只是動態和靜態的區分，需要個別做動效，形成表現力的差異才能達到重點突出的目的。

作為設計師來說，動效也是需要掌握的基礎技能，可以提高我們的設計表現力，也能將交互動作表達得更清楚。

十、主題化圖標風格普及

隨著情感化設計的普及，金剛區圖標在特定主題節日也會進行氛圍強化，主題化圖標設計越來越多。

比如在春節、中秋節、國慶節、端午節等場景中，根據主題設計圖標更能體現我們是有溫度的產品。可以是主題元素的融入，或者主題氛圍感的渲染，要嘛就是主題文案的融入，形式已經是非常豐富了。雖然不同節日主題效果各有差異，不過這一類主題化的圖標設計，已經成為非常普及的風格特征。

除了節日主題以外，根據運營需求也會進行主題化強化，眾多自定義主題活動也會結合到金剛區圖標設計中。這一類視覺表現力比重較大，視覺感統一性較強，帶來的視覺張力和感官體驗都非常不錯。

小結

金剛區在產品中就像百變金剛一樣，隨著眾多因素而變化，是更新迭代較為活躍的。圖標設計的風格也是豐富多樣，本文僅是拋磚引玉，總結了 10 個較為流行的圖標設計風格或者趨勢。

希望這些案例總結可以加深大家對于金剛區圖標的風格認知，大家也要繼續體驗探索，總結出更多風格特征，強化我們的圖標設計能力。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》金剛區圖標設計的 10 大風格

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

很多平面設計作品都喜歡用幾何圖形來進行構圖，比如把畫面布局在一個幾何圖形內，或者用一個幾何圖形與畫面主體元素進行組合。

一、這種構圖有幾大優點：

1.能使畫面更整體、更聚焦。

把畫面控制在一個幾何圖形內，就好比用柵欄把羊群圍了起來，各元素可活動的范圍縮小了，外輪廓變得更簡單了，畫面自然會更整體、更聚焦。

2.加強畫面視覺沖擊力

幾何圖形內的圖形集中區域，與幾何圖形外的留白可以形成強烈的虛實對比、輪廓對比、色彩對比等，故視覺沖擊力可以進一步加強。

3.增強形式感

如果畫面的元素比較單一，而且也不是很有創意和特色，那么形式感和設計感往往會比較弱，而如果用幾何圖形進行構圖，通常會對原有的圖形進行裁切或規范，畫面就會變得沒有之前那么普通。

4.減少創作時間

這一點在插畫作品中尤為明顯，如果采用全屏式構圖，那么設計師就得把整個矩形畫布都畫滿素材，但是如果用幾何圖形構圖，那么重點展示主體區域就好，沒有足夠的空間展示太多輔助的元素和場景，所以可以省去很多創作時間。

5.便于文案排版

對于一些文案比較多的畫面，如果畫面布局太慢，那么文案的排版就會比較麻煩，如果把文案壓在畫面上排版，既會破壞畫面的美觀性，也會影響文字的識別性。

二、常用的幾何圖形

1.圓形

圓形是最常用于構圖的幾何圖形，因為圓形本身就是一個很完美的圖形，美觀、平衡且聚焦性強，圓形與矩形的版面也能形成鮮明對比。

2.圓環形

圓環的內部空間比較小，所以適合素材比較多的情況，也常常會配合圓形一同使用。

3.半圓形

半圓雖然沒有圓形那么好看，但是更特別、更平穩。

4.橢圓形

由于正圓在很多時候并不適合展現某些畫面，這時候橢圓也是一個不錯的選擇。

5.圓角矩形

圓角矩形融合了矩形和圓形的一些優點，既不會像矩形那么硬朗和常規，也比圓形更靈活，更能適應不同的畫面需求。

6.菱形

菱形的感覺比較尖銳，適合一些科技屬性比較強的風格和品牌。

7.三角形

三角形與菱形一樣，也具有較強的科技屬性，且通常會用到三角形而不是正三角形，因為正三角形過于平穩，缺少動感。

8.其他圖形

三、注意事項：

1.根據畫面特點選擇合適的幾何圖形

首先，每一類幾何圖形都有一定的調性偏向，所以要根據自己的產品調性和主體調性來選擇一些氣質合適的圖形，例如母親節、清明節的海報用三角形來構圖就不太合適。

其次，如果想把現有的畫面用一個幾何圖形進行剪切，那么這個圖形最好能夠比較完美地保留畫面的主體部分，同時也要保證該幾何圖形內的構圖是飽滿的、平衡的。

2.關于“破”的處理要節制

用幾何圖形進行構圖時，大多數情況下都可以使用“破”的處理方式，即讓圖形內的部分元素打破圖形限制，這可以使畫面看起來更活潑。但也要節制。

? 避免過多元素使用“破”的處理，否則畫面容易變得凌亂、不聚焦。

? 不是所有采用幾何圖形構圖的畫面都要使用“破”技巧。對于一些很簡約、調性比較高級、畫面是攝影圖片的設計，通常不太適合使用該技巧。

3.排版可以呼應幾何圖形

為了避免文字排版與圖形完全是割裂的，我們可以在排版時與幾何圖形形成呼應，比如用文字繞著圖形排版。

或者是把文字與圖形交叉排版。

原文地址：蔥爺（公眾號）

作者：蔥爺

轉載請注明：學UI網》構圖太常規?教你一個過稿率超高的構圖技巧

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

  

以下作品主要是練習通過 Sketch & Adobe Illustrator 軟件配合實現立體圖標設計，掌握通過色彩的變化營造質感和光感。 

 

以下作品主要是練習圓柱體的繪制和光影的處理，以此來表現排行榜。配色比較趨向于年輕化，青春活潑的風格探索年輕化的設計趨勢。

 

這一組作品主要是研究極光風的配色和磨砂玻璃效果的結合，用磨砂玻璃層作為圖標的保護罩，帶來朦朧美的感官體驗。

 

隨著網民年輕化的趨勢，UI設計也逐漸趨近于更加青春活潑的風格。探索了一組低飽和度高明度的圖標配色，利用不透明度漸變實現晶白風格圖標。

 

這是在五一假期前繪制的一個相機 APP LOGO，探索多色環形組合來進行色感營造，利用簡單的內陰影和蒙版工具刻畫效果。

 

一組帶給大家好心情的 IP 表情設計作品，超橢圓的造型和青春可愛的風格結合，練習表情設計的能力和光影把控的技巧。情感化設計的技能被逐步放大，也是提高作品亮點和視覺感的一個不錯的方向。

 

想要休息的時候來了一個靈感，大家都喜歡喝咖啡，我還是比較喜歡喝茶~O(∩_∩)O哈哈~有感而發繪制了一個關于茶的 APP LOGO。

 

帶有紋理的球體繪制，你可以想象這是一個瑜伽球。利用 AI 軟件的 3D 功能進行造型繪制，然后利用 Sketch 軟件進行質感細節的刻畫完成。

 

這組作品主要是研究 B 端設計的柵格化系統，以及配色風格的嘗試。隨著 B 端 C 化的趨勢，在 UI設計層面的風格探索中，將會變得更為大膽，突破風格定義的束縛。

 

以上是近期輸出的一些 UI設計探索作品，后期將會繼續探索更多設計風格和細節的刻畫。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》近期輸出的一些UI設計探索作品

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

轉載請注明：學UI網》線條是新開始

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

原文地址：站酷

作者：君小陽

轉載請注明：學UI網》一組復古風格logo嘗試

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司