作為設計師保存的珍藏

Figma Templates

設計領域充斥著無數的設計工具、插件、網站、資源。這些工具能夠幫助你改善你的工作流程，讓你成為更優秀的設計師。多年來，我已經嘗試過很多工具，但只有少數幾個真正脫穎而出。

本篇匯總文章可謂是精華中的精華。其中有些是有趣的網站，你可以從中獲得靈感；有些是工具和資源，絕對會讓你成為更好的設計師。

我希望你能喜歡!

1. The preposterous web portal of Erik Bernacchi

eeerik.com

這很可能是我見過的最古怪、最令人印象深刻的網站。在這個網站里亂搞一下還蠻有趣的。這個網站充滿了古怪的小程序，在這里我能消磨很多時間。

2. Cofolios

cofolios.com

Cofolios是一個企業實習相關的網站，包含了作品集、文章、實習機會、案例研究等相關內容。

在這里你可以從其他設計師的作品中獲取靈感，向他們學習。

當我開始我的產品設計生涯時，我也曾是一名設計實習生，現在我仍然認為這是初級設計師進入大廠的最佳途徑。我喜歡看人們進入設計領域的所有非常規路徑，也喜歡閱讀設計師們的經歷。Cofolios上分享的許多博文都提供了在不同的科技公司實習的情況，以及你如何也能做到這一點的技巧。

3. ShareKit

www.sharekit.io

ShareKit可以幫你實現便捷地為自己的圖片添加鏈接。

我一直在使用ShareKit來定制LinkedIn簡介中的鏈接，因為默認的預覽圖經常是模糊的，而且與我分享的內容不相關。我在Sketch中設計的圖形，將它們上傳，然后就可以了。ShareKit還提供了數據分析功能，可以顯示多少人推薦了我的作品和我收到了多少點擊。

4. Saasframe & UX Archive

www.saasframe.io & https://uxarchive.com/

Saasframe和UX Archive是我在網站設計的某一環節被卡住的時候獲得靈感的好網站。

這個資源展示了來自前沿科技公司的不同用戶體驗流程，以及優秀的設計。例如，當我我好奇其他公司是如何布局他們的 "忘記密碼 "頁面的體驗的時--有了這些網站，我可以快速瀏覽其他公司的例子，看看他們是如何做的。

5. Startup Jobs

startup.jobs/design

無論是實習、兼職還是全職工作--startup.jobs都能滿足你的需求。

他們有各種角色的職位，主要為熱門的科技創業公司服務。在尋找任何級別的職位時，這個網站都是不可或缺的工具。

6. Mesh Gradients

products.ls.graphics/mesh-gradients/

Mesh gradients提供了100個免費漸變選擇。

我喜歡這些漸變中使用的柔和和充滿活力的色調。它們可以用來為界面、登陸頁面或其他任何你正在進行的工作添加一抹色彩。

7. POSE by Gal Shir

galshir.com/pose/

POSE是我發現的創建解剖學和人體插圖的最佳工具。

在插畫中獲得恰到好處的比例從來沒有像使用POSE那樣容易。當我還是Snapchat的插畫師時，我偶爾會完成一個角色的插畫，但卻發現腿部與身體其他部分的比例不協調。如果當時有POSE的話，就能幫我解決很多頭疼的事情。

8. Brand Colors

brandcolors.net

Brand colors是一個來自家喻戶曉的品牌色彩的大規模集合。

無論你只是在尋找靈感、有趣的調色板，還是需要特定品牌的顏色，Brand Colors都是你的首選。

9. Let’s Enhance

letsenhance.io

Let's Enhance是一款革命性的工具，可以在不損失分辨率的情況下將任何圖像放大到16倍。其結果是令人震驚的。

10. BeyondUI

www.beyondui.net

作為Pávlo Sanchez的創意之作，Beyond UI是一篇關于界面、資本主義、政府和公民的視覺文章。這是一個有趣的卷軸，其中充滿了關于我們現代世界的發人深省和令人頭疼的圖形。

11. Figma Templates

www.figma.com/templates/

Figma Templates為你提供了很多免費的模版比如Instagram模板、流程圖生成器、線框工具等。在Figma網站上就有十多個免費模板，可以改善你的工作流程，讓你在制作下一個旅程圖或維恩圖時，更加輕松。

12. Remove.bg

www.remove.bg/upload

Remove.bg是一個一鍵刪除圖片背景的網站。

下次當你有一張圖片，但不想花半個小時用Photoshop中的鋼筆工具摳圖，可以先在Remove.bg中試試。雖然它并不總是完美的，但如果它能完成90%的工作，那么我就不用在Photoshop中浪費一下午的時間了。

13. Whimsical

Whimsical.com

我曾猶豫過要不要把這個放在這里，但Whimsical是一個很好的工具，不能不提。

我相信很多人都聽說過它，但這是給沒有聽說過的兩個人的。Whimsical是我工作流程中不可缺少的工具--無論是線框圖、創建用戶流程圖，還是安排導航，Whimsical都是我的首選。

14. Fluid Simulation

paveldogreat.github.io/WebGL-Fluid-Simulation/

這不是一個工具，更多的只是一個有趣的網站。

你能做的就是浪費一些時間盯著屏幕。我承認我花了很多時間來搞亂各種設置，看看會發生什么豐富多彩的爆裂效果。

15. Brennon Leman

brennonleman.zine.press/

Brennon Leman是一位非常有才華和古怪的藝術家，他創造了一些我喜歡的奇異的藝術作品。

他的風格簡單而友好，同時也很有趣味性。我喜歡時不時地滾動瀏覽他的作品，看看他創作的作品。

16. Beeple Crap

www.beeple-crap.com/everydays

Beeple Crap是在另一個層面上是一件不尋常的藝術作品。

我關注他的Instagram有一段時間了，每當我看到他的一個經常怪誕的作品出現在我的頁面中時，我都會感到一絲厭惡、好奇和著迷。這是我見過的最令人印象深刻的3D作品，更多的時候絕對是搞笑的。

17. Hamburgers

jonsuh.com/hamburgers/

Hamburgers是一個免費的動畫漢堡圖標動畫庫，可以供設計師或開發人員使用。

漢堡圖標動畫是一種很酷的方式，能為您的個人網站增添色彩或個性。你可以按照頁面上提供的步驟輕松實現這些效果。

18. SVG Backgrounds

www.svgbackgrounds.com/

SVG Backgrounds是一個超級娛樂的網站，可以亂七八糟的創建各種色彩和幾何背景。

有幾十種背景選項，可以用滑塊調整和自定義它們的外觀。我還沒有實際應用過這個工具，但我很喜歡用它來搗亂，希望有一天能在我的一個項目中把它變成現實。

19. Picular

picular.co

Picular是一個搜索引擎，你可以搜索一個詞，然后就會出現與該詞相關的各種顏色。

這是一個可以讓你獲得與我們的情緒版上的術語相關的顏色的想法的好地方。在為我的一個品牌或平面設計項目確定調色板時，Picular特別有幫助。

20. Lordicon

lordicon.com

在Airbnb的動畫SVG庫Lottie的強大推動下，Lordicons用他們精美的動畫圖標集為界面帶來了生命。

我真的很欣賞他們對細節的關注以及這套圖標的完美執行。網上的圖標比比皆是，但能找到一個設計精良的套件，而且還有奇特的動畫效果，真是難能可貴。

21. Emojione

emojione.com

Emojione在過去的幾年中已經炸開了鍋，所以你可能已經聽說過它。

如果沒有，它是一個有趣的網站，有精心制作的表情包、貼紙、動畫等。他們對傳統的表情符號進行了自己獨特的旋轉，甚至還創造了一堆自己的新表情符號，但在iOS或Android上還不存在。

22. Rotato

www.rotato.xyz

Rotato是我最近很喜歡的一款設備模擬工具。它是為我的UI設計創建快速而專業的樣機圖的最省力工具。

以前，我一直在Photoshop的樣機博客中搜尋，直到找到符合我需求的東西（還得希望它是免費的）。Rotato讓生活變得更簡單，現在我可以拖放我的設計，然后調整設備的角度，并在幾秒鐘內有一個完美的樣機圖。

23. Interns.design

interns.design

Interns.design是一個最新的招聘網站，提供設計領域的實習機會。

我非常欣賞這個網站的簡潔性和分享的職位質量。如果你正在市場上尋找實習機會，可以自己去看看。就像我之前說的那樣，實習是進入設計和技術行業的最佳途徑之一。

24. Blush

blush.design

由巴勃羅-斯坦利帶來的 Blush，是一個與眾不同的插畫網站。

有幾十個選項可供選擇，你可以自定義人物的頭發、褲子、膚色等等。這個工具的靈活性和可能性讓你甚至不用打開 Illustrator 就能創作出真正獨一無二的插畫。

25. Fonts Ninja

www.fonts.ninja

Fonts Ninja 可以讓你識別在網絡上遇到的字體，甚至有時還會告訴你在哪里可以購買或下載你找到的字體。

我使用 What Font 已經有一段時間了，但最近才嘗試Font Ninja，在比較了兩者之后，Fonts Ninja 占了上風。

26. Tabler Icons

tablericons.com

Tabler圖標是一個850多個可調整筆畫圖標的集合。

我最喜歡這個網站的部分是，我不需要為每個我想要的圖標下載SVG。只需點擊你需要的圖標，然后它就可以粘貼到任何使用筆畫的設計程序中。

27. Hallway Chat

hallway.chat

Hallway chat是Slack的擴展，它可以讓你的團隊在一天中一起進行10分鐘的聊天。

類似于你在辦公室與同事的走廊對話，Hallway讓這些類型的對話在虛擬世界成為可能。將它免費添加到你的Slack頻道，你就可以與你的設計師同事或團隊成員享受一些輕松的聊天，讓你離開工作幾分鐘。

28. Cool backgrounds

coolbackgrounds.io

Cool Backgrounds是一個工具集，可以為博客、社交媒體和網站創建引人注目的彩色圖像。除了背景，生成的圖片還可以作為桌面壁紙或裁剪為手機壁紙使用。

29. Google Color & Type Tool

Google Typescale Generator & Google Palette Generator

谷歌材料設計系統包含了大量有用的工具、資源、技巧、指南等。我發現在我的工作中最有用的兩個工具是字體工具和調色板工具。調色板提供了一個已經調整好的顏色，你可以直接使用，實在是太方便了

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

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

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

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

    


        


            


            

        

        


            

                let myChart = this.$echarts.init(document.getElementById('plant-charts'));
            

        

    

    


        


            


            

        

        


            

                // 繪制圖表
            

        

    

    


        


            


            

        

        


            

                myChart.setOption({
            

        

    

    


        


            


            

        

        


            

                tooltip: {
            

        

    

    


        


            


            

        

        


            

                formatter: '{c}' //設置單位
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                //圖例樣式
            

        

    

    


        


            


            

        

        


            

                legend: {
            

        

    

    


        


            


            

        

        


            

                data: ['寬帶情況', '數據量'],
            

        

    

    


        


            


            

        

        


            

                textStyle: {//圖例文字的樣式
            

        

    

    


        


            


            

        

        


            

                color: '#fff',
            

        

    

    


        


            


            

        

        


            

                fontSize: 12,
            

        

    

    


        


            


            

        

        


            

                padding: [0, 20, 0, 0]
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                grid: { //設置圖標距離父級div的間距
            

        

    

    


        


            


            

        

        


            

                top: "10",
            

        

    

    


        


            


            

        

        


            

                left: "0",
            

        

    

    


        


            


            

        

        


            

                right: "15",
            

        

    

    


        


            


            

        

        


            

                bottom: "10",
            

        

    

    


        


            


            

        

        


            

                containLabel: true
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                xAxis: {
            

        

    

    


        


            


            

        

        


            

                type: 'category',
            

        

    

    


        


            


            

        

        


            

                boundaryGap: false,
            

        

    

    


        


            


            

        

        


            

                data: ['2015','2016','2017','2018','2019','2020','2021'],
            

        

    

    


        


            


            

        

        


            

                axisLabel: {
            

        

    

    


        


            


            

        

        


            

                interval: '0', //類目軸(category)中用數值表示顯示間隔，0為顯示所有，1為隔一個顯示一個，以此類推
            

        

    

    


        


            


            

        

        


            

                textStyle: { //文字樣式
            

        

    

    


        


            


            

        

        


            

                color: '#62799C',
            

        

    

    


        


            


            

        

        


            

                fontSize: '12'
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                axisTick: { //y軸刻度線不顯示
            

        

    

    


        


            


            

        

        


            

                show: false
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                yAxis: {
            

        

    

    


        


            


            

        

        


            

                type: 'value',
            

        

    

    


        


            


            

        

        


            

                //show: false,
            

        

    

    


        


            


            

        

        


            

                axisLabel: {
            

        

    

    


        


            


            

        

        


            

                textStyle: { //文字樣式
            

        

    

    


        


            


            

        

        


            

                color: '#62799C',
            

        

    

    


        


            


            

        

        


            

                fontSize: '12'
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                // 控制網格線
            

        

    

    


        


            


            

        

        


            

                splitLine: {
            

        

    

    


        


            


            

        

        


            

                //  改變軸線顏色
            

        

    

    


        


            


            

        

        


            

                lineStyle: {
            

        

    

    


        


            


            

        

        


            

                color: '#2a2a2d'
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                axisTick: { //y軸刻度線
            

        

    

    


        


            


            

        

        


            

                show: false
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                series: [{
            

        

    

    


        


            


            

        

        


            

                data: [5000,6000,7000,4400,3200,4500,6800],
            

        

    

    


        


            


            

        

        


            

                type: 'line',
            

        

    

    


        


            


            

        

        


            

                itemStyle: {
            

        

    

    


        


            


            

        

        


            

                normal: {
            

        

    

    


        


            


            

        

        


            

                color: 'rgba(62,139,222,1)'//線顏色
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                areaStyle: {
            

        

    

    


        


            


            

        

        


            

                normal: {
            

        

    

    


        


            


            

        

        


            

                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //折線圖顏色漸變
            

        

    

    


        


            


            

        

        


            

                offset: 0,
            

        

    

    


        


            


            

        

        


            

                color: 'rgba(62,139,222,0.6)'
            

        

    

    


        


            


            

        

        


            

                }, {
            

        

    

    


        


            


            

        

        


            

                offset: 1,
            

        

    

    


        


            


            

        

        


            

                color: 'rgba(62,139,222,0.01)'
            

        

    

    


        


            


            

        

        


            

                }])
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                }]
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


        

    

//圖例
    legend: {undefined
        icon: "circle",
        //icon形狀  類型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none,
        itemWidth: 10,  // 設置icon寬度
        itemHeight: 10, // 設置icon高度
        itemGap: 40, // 設置間距
        // top: '5%',//豎直位置
        // left: 'center',//水平位置
        x: 50,//水平位置
        y: 200,//豎直位置
        orient: "vertical",//設置顯示順序，默認水平（水平，豎直）
         textStyle: {undefined
            color: "#000"
         },//文本樣式
         // 使用回調函數（設置文本顯示內容，例如 加百分號）
          formatter: function(name) {undefined
            var data = option.series[0].data;
            var total = 0;
            var tarValue;
            for (var i = 0, l = data.length; i < l; i++) {undefined
              total += data[i].value;
              if (data[i].name == name) {undefined
                tarValue = data[i].value;
              }
            }
            var p = ((tarValue / total) * 100).toFixed(2);
            return name + " " + " " + p + "%";
          },
    },