|
效率就是生命，對于設(shè)計(jì)師尤其是如此。所以，能夠讓工作效率有極大提升的工具于設(shè)計(jì)師而言，有著極大的價(jià)值，因此也有了今天這個(gè)高效設(shè)計(jì)工具列表。 這些設(shè)計(jì)工具大多針對某個(gè)特定的設(shè)計(jì)環(huán)節(jié)，基于具體的需求而存在，它們提升了整體的效率，從排版設(shè)計(jì)、代碼片段到配色方案不一而足，合理的搭配這些工具能讓你的整體效率提升一大截。 1. Web Gradients 漸變作為設(shè)計(jì)趨勢再一次回歸網(wǎng)頁設(shè)計(jì)界，WebGradients 這個(gè)網(wǎng)站給你大把的選項(xiàng)，供你探索漸變在網(wǎng)頁中的運(yùn)用。你可以在這里調(diào)校好了，直接復(fù)制CSS3代碼，并且在你的網(wǎng)站中使用。 2. Flawless Typography Checklist Typewolf 為排版課程所準(zhǔn)備的這個(gè)清單，被單獨(dú)做成一個(gè)交互工具，幫你避免排版中常見的錯(cuò)誤。這個(gè)列表所涵蓋的內(nèi)容非常全面，每一條給予了簡單的說明，幫你理解。 3. LOL Colors 想要獲得更多配色方案上的靈感？LOL 將許多配色方案打包提供給你，每個(gè)方案都有HEX和RGB等代碼，確保你立刻可以上手使用。 4. .resizr 想要測試你的網(wǎng)站的響應(yīng)式設(shè)計(jì)，直接在Resizr 中輸入鏈接，你可以以用戶的角度，查看你的網(wǎng)站在不同的設(shè)備和分辨率上的展示效果。 5. CSS Stats 你所編寫的CSS樣式表長什么樣？CSS Stats 是一個(gè)很好的分析工具，幫你將樣式表轉(zhuǎn)化為可用的格式。比如你的配色、字體的的實(shí)際顯示效果和相應(yīng)的格式。 6. Adobe Spark Adobe Spark 是一款免費(fèi)的圖片制作工具，非常適合用來制作社交媒體上的宣傳和營銷用的圖片。和Adobe 最近的新產(chǎn)品一樣，Spark 的學(xué)習(xí)曲線非常的平緩。 7. Google Web Designer 這個(gè)新的應(yīng)用依然處于測試階段，你可以使用這個(gè)工具設(shè)計(jì)出有參與感的、易于交互的動(dòng)效設(shè)計(jì)，所輸出的內(nèi)容都是基于HTML5的代碼。 8. Font Library 如果你經(jīng)常使用 Google Fonts 的話，這個(gè)工具能夠幫你標(biāo)注和組織你正在使用的字體內(nèi)容。 9. What Font Is 和求字體一樣，你可以使用 What Font Is 來辨別字體，你所需要做的就是上傳帶有待查詢字體的圖片，它會(huì)幫你找到這個(gè)字體的相關(guān)信息。 10. Death to Stock 這個(gè)圖庫網(wǎng)站提供了一些和普通圖庫不同類型的免費(fèi)圖片，這些免費(fèi)的圖片合集都是不同的攝影師單獨(dú)策劃、上傳的。 11. Todoist Todoist 是一個(gè)非常實(shí)用的待辦事項(xiàng)、列表清單類的APP。實(shí)際上優(yōu)設(shè)哥一度非常喜歡使用這款A(yù)PP 。 12. BulmaBulma 是一款簡單而現(xiàn)代的CSS框架，它是基于Flexbox 設(shè)計(jì)的。 13. Music for Programming請忽略這個(gè)略顯復(fù)古的界面吧，這個(gè)網(wǎng)站搜集了一堆適合編程的時(shí)候聽的音樂。 14. PlaceIt如果你需要一個(gè)用來展示你的項(xiàng)目的視覺稿，那么你可以在這里的2500多個(gè)創(chuàng)意設(shè)計(jì)中，找出一個(gè)用來展示你的項(xiàng)目。 15. CSS Ruler你可以使用這個(gè)工具來查看CSS長度之間的差異，從字體相對值，到百分比。輸入?yún)?shù)，然后開始對比。 16. PatterninjaPatterninja 是一個(gè)能夠借助圖片來生成圖案的工具，你可以將你的圖片庫轉(zhuǎn)化為網(wǎng)頁可用的各種圖案。 17. Theme.CardsTheme.Cards 是一組優(yōu)秀的免費(fèi)主題合集，其中涵蓋了博客模板，登錄頁面，單頁APP應(yīng)用，BootStrap 主題，Wordpress 主題等，不一而足。 18. Type AnythingType Anything 能幫你快速創(chuàng)建漂亮的字體組合，這樣你可以在屏幕上預(yù)覽、調(diào)整相應(yīng)的參數(shù)，然后就可以將這些設(shè)計(jì)在代碼中實(shí)現(xiàn)出來。 19. Img2CSS這款工具能幫你將任何圖片生成純粹的CSS代碼。 20. Glyphdiff你可以使用這款工具對比不同的字體的差異。 21. Impalette和許多配色工具類似，這款工具也能夠幫你拆分出一張圖片中的主要配色，不過它是基于潘通的配色系統(tǒng)來給出配色方案。而這個(gè)工具的獨(dú)特之處在于，它還提供了許多其他的備選配色方案。 22. Visual Center你可以使用這款工具幫你找到圖片或者某個(gè)設(shè)計(jì)的視覺中心。它還有相應(yīng)的 Sketch 和 AI 的插件。 23. Hero PatternsHero Patterns 是一個(gè)可復(fù)用的SVG格式紋理的背景合集，在下載前，記得選取好前景色和背景色。 24. Site Auditor千萬不要糾結(jié)SEO的問題，Site Auditor 會(huì)幫你分析你的網(wǎng)站的狀況，找出相應(yīng)的SEO的問題和解決方案。 25. SketchpacksSketchpacks 讓你能從菜單欄當(dāng)中就能找到并管理Sketch 相關(guān)的插件。 26. Ethical Web Development想要?jiǎng)?chuàng)造出更優(yōu)秀的網(wǎng)絡(luò)環(huán)境，我們應(yīng)當(dāng)遵循一定的網(wǎng)絡(luò)開發(fā)的道德準(zhǔn)則。 27. Responsive Image Breakpoint Generator這款工具能夠幫你制作出更加優(yōu)秀的響應(yīng)式圖片，生成真正合理的斷點(diǎn)，幫你針對不同的設(shè)備和屏幕尺寸生成相應(yīng)的圖片。 28. UnsplashUnsplash 是一個(gè)素質(zhì)相當(dāng)高的高清免費(fèi)圖片網(wǎng)站，非常值得收藏。 29. Material Design PaletteMaterial Design 這幾年一直都是設(shè)計(jì)趨勢，而相應(yīng)的配色方案也是目前的主流需求。這款工具能夠幫你挑選色彩，并且展示出這些色彩在實(shí)際設(shè)計(jì)中的樣子，并提供相應(yīng)的配色方案下載文件。 30. Type Terms如果排版相關(guān)的術(shù)語讓你感到陌生的話，那么這個(gè)動(dòng)態(tài)的排版信息圖能夠幫你更深入的了解這些術(shù)語的實(shí)際含義。 【這些最佳實(shí)踐幫你在UI設(shè)計(jì)上更上一層樓】
原文地址：designshack 本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。 【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】 ================關(guān)于優(yōu)設(shè)網(wǎng)================ 非特殊說明，本文版權(quán)歸原作者所有，轉(zhuǎn)載請注明出處 效率, 效率工具, 經(jīng)驗(yàn)分享, 酷站, 酷站推薦
|
|
|
