今天推薦的這7個(gè)神器，有經(jīng)典款也有新人版，不過(guò)大致貫穿了UI設(shè)計(jì)的整個(gè)工作流程，從排版、配色、切圖到標(biāo)注、預(yù)覽，都有對(duì)應(yīng)的良心神器推薦，非常適合剛?cè)腴T(mén)的UI設(shè)計(jì)師，當(dāng)然，有兩款谷歌剛出的神器，也值得老手們來(lái)瞧一瞧。

《七種武器》為著名武俠小說(shuō)家古龍著名作品代表作之一，共分為：長(zhǎng)生劍、孔雀翎、碧玉刀、多情環(huán)、離別鉤、霸王槍、拳頭，七種武器非一般江湖武器，件件精妙絕倫。

在UI設(shè)計(jì)中一樣存在這樣的七種武器，如果能擁有這七種武器，必定能讓你設(shè)計(jì)如同“開(kāi)掛”一般事半功倍！

長(zhǎng)生劍 — 排版神器 ?Material Design Grids

柵格化設(shè)計(jì)就是按照一定的規(guī)則把頁(yè)面的寬度分成固定的相同寬度，然后列出各種組合的可能，以方便在進(jìn)行頁(yè)面呈現(xiàn)的時(shí)候能夠快速的進(jìn)行布局，界面設(shè)計(jì) 柵格化系統(tǒng)柵格系統(tǒng)英文為“grid systems”,開(kāi)始是從平面柵格系統(tǒng)中發(fā)展而來(lái)，后在網(wǎng)頁(yè)設(shè)計(jì)中被發(fā)揚(yáng)光大，比較有名的柵格化系統(tǒng)如960GS，現(xiàn)在隨著移動(dòng)端的興起，移動(dòng)端設(shè)計(jì)也 有了很多這樣?xùn)鸥裣到y(tǒng)。

Material Design是谷歌推出了全新的設(shè)計(jì)語(yǔ)言，這種設(shè)計(jì)語(yǔ)言旨在為手機(jī)、平板電腦、臺(tái)式機(jī)和“其他平臺(tái)”提供更一致、更廣泛的“外觀(guān)和感覺(jué)”。

在Material Design中也有著一套完善的柵格化系統(tǒng)，我們?cè)僭O(shè)計(jì)中可以使用這個(gè)柵格系統(tǒng)，幫助我們更加高效規(guī)范的進(jìn)行界面設(shè)計(jì)。

這個(gè)柵格系統(tǒng)所有組件都與間隔為8dp的基準(zhǔn)網(wǎng)格對(duì)齊，排版/文字與間隔為4dp的基準(zhǔn)網(wǎng)格對(duì)齊。

△?界面設(shè)計(jì)柵格

△?布局設(shè)計(jì)柵格

△ 圖標(biāo)設(shè)計(jì)柵格

配色神器 ?Material Design Color Swatches

配色是很多設(shè)計(jì)師頭疼的問(wèn)題，特別是一些新設(shè)計(jì)師在如何調(diào)色與配色上往往都是處理的不太好！那么下面這個(gè)插件將幫你解決這個(gè)問(wèn)題！

同樣是來(lái)自Material Design，Material Design的配色方案更是艷麗無(wú)比，與扁平設(shè)計(jì)風(fēng)格更是相得益彰。如果你還在擔(dān)心自己的設(shè)計(jì)作品配色的話(huà)，那么下面這套Material Design的配色版插件，將徹底讓配色變的無(wú)比簡(jiǎn)單了，媽媽再不用擔(dān)心我的配色了！

這套插件可以輕松的安裝到你的Adobe Photoshop 和 Adobe Illustrator 調(diào)色板，使用非常方便。

碧玉刀 — 切圖神器?Cutterman

Cutterman是一款運(yùn)行在photoshop中的插件，能夠自動(dòng)將你需要的圖層進(jìn)行輸出。以替代傳統(tǒng)的手工 “導(dǎo)出web所用格式” 以及使用切片工具進(jìn)行挨個(gè)切圖的繁瑣流程。能夠讓你只需要點(diǎn)擊一個(gè)按鈕，就自動(dòng)輸出你需要的各種各樣的圖片，快到?jīng)]有朋友！

輸出支持IOS平臺(tái)的單倍圖、雙倍圖，支持IPHONE6/6P尺寸比例。

輸出支持Android平臺(tái)的各種分辨率大小圖片，什么XXHPDI，XHDPI，HDPI啊之類(lèi)的，通通自動(dòng)化輸出，為你節(jié)省出更多的時(shí)間陪小伙伴好好玩耍。

什么png、jpg、gif通通不在話(huà)下，還可以自己縮放、壓縮大小呢。從此，就告別那個(gè)所謂的“存儲(chǔ)為web所用格式”的功能啦~~

圖層太多？木關(guān)系！可以多選嘛！支持選中多個(gè)圖層合并輸出，也可以逐一輸出的哦，簡(jiǎn)直方便到爆！

離別鉤 — 標(biāo)注神器?MarkMan

馬克鰻是高效的設(shè)計(jì)稿標(biāo)注、測(cè)量工具，極大節(jié)省設(shè)計(jì)師在設(shè)計(jì)稿上添加和修改標(biāo)注的時(shí)間，讓設(shè)計(jì)更有愛(ài)。馬克鰻使用起來(lái)也是非常簡(jiǎn)單，雙擊添加測(cè)量，單擊改變橫縱方向等等功能，基本都是一鍵完成。馬克鰻是，可以跨平臺(tái)使用，減少了在不同平臺(tái)使用產(chǎn)生的一系列問(wèn)題。

△?長(zhǎng)度標(biāo)記

△?坐標(biāo)和矩形標(biāo)記

△?色值標(biāo)記

△?文字標(biāo)記

霸王槍 — 預(yù)覽神器 ?PS Play

設(shè)計(jì)師在日常工作經(jīng)常會(huì)遇到這種情況：電腦上的效果和移動(dòng)設(shè)備上有差異，需要要頻繁保存導(dǎo)出文件，通過(guò)數(shù)據(jù)線(xiàn)或其它網(wǎng)盤(pán)工具同步到手機(jī)PAD設(shè)備上進(jìn)行預(yù)覽，反反復(fù)復(fù)的非常麻煩……

那么現(xiàn)在來(lái)嘗試一下騰訊ISUX給我?guī)?lái)的PS Play吧！

Ps Play是一個(gè)通過(guò)Wi-Fi網(wǎng)絡(luò)，實(shí)時(shí)在終端設(shè)備上預(yù)覽電腦上Photoshop的設(shè)計(jì)稿，可同步調(diào)試及截圖保存到移動(dòng)終端，并可以通過(guò)Email、微信等工具即時(shí)分享的跨終端應(yīng)用。

多情環(huán) — 圓角神器?CornerEditor

這是一個(gè)極其簡(jiǎn)單的Photoshop插件，卻極大的幫助我們解決了Photoshop形狀的圓角問(wèn)題。Corner Editor，出自Photoshop Scripts，我們把它稱(chēng)之為圓角編輯器，只要輸入你想要的圓角半徑數(shù)值，你就可以對(duì)任何形狀的路徑圓角隨時(shí)的自由控制，編輯，調(diào)整。

拳頭 — 字體神器 ?Roboto Font

拳法，原始最直接的武器，卻蘊(yùn)藏著數(shù)以千萬(wàn)種的變化的。

字體的設(shè)計(jì)正是如此，它簡(jiǎn)單直接，暴力卻又很優(yōu)雅，妙趣橫生，氣象萬(wàn)千！

最后推薦給你大家的這項(xiàng)神器也來(lái)自于Material Design，它就是Roboto字體。Roboto 是為 Android 操作系統(tǒng)設(shè)計(jì)的一個(gè)無(wú)襯線(xiàn)字體家族。Google 描述該字體為“現(xiàn)代的”“親切的”和“人性化的”。

Roboto有6種字重：Thin、Light、Regular、Medium、Bold 和 Black。

從極細(xì)到極粗，Roboto 字體有嚴(yán)謹(jǐn)?shù)膸缀翁匦?，有很?qiáng)的現(xiàn)代感，纖細(xì)感顯著；同時(shí)因?yàn)榍€(xiàn)和弧度，所以又很人性化。這種字體不單可以作為APP主字體來(lái)應(yīng)用，并且作為一種設(shè)計(jì)修飾字體來(lái)使用，效果也是非常驚艷的！圓潤(rùn)清晰所包含的美學(xué)引領(lǐng)了干凈、幾何的設(shè)計(jì)哲學(xué)。

在中文系統(tǒng)中與之對(duì)應(yīng)的字體為Noto，也包含6種字重。

原文來(lái)自：優(yōu)設(shè)