建站知識

Website development

北京網(wǎng)站設(shè)計云智UI設(shè)計師的幾種武器

發(fā)布時間：2015-12-04 09:06:32

TAGS：flash網(wǎng)站設(shè)計軟件,扁平化網(wǎng)站設(shè)計欣賞

北京網(wǎng)站設(shè)計在UI設(shè)計中一樣存在這樣的幾種武器，如果能擁有這幾種武器，必定能讓你設(shè)計如同“開掛”一般事半功倍！

北京網(wǎng)站設(shè)計云智特選出七大設(shè)計神器，希望能夠?qū)δ愕脑O(shè)計有所幫助！

長生劍 — 排版神器

Material Design Grids

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

開掛ing——UI設(shè)計師的七種武器

Material Design是谷歌推出了全新的設(shè)計語言，這種設(shè)計語言旨在為手機、平板電腦、臺式機和“其他平臺”提供更一致、更廣泛的“外觀和感覺”。

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

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

開掛ing——UI設(shè)計師的七種武器

界面設(shè)計柵格

開掛ing——UI設(shè)計師的七種武器

布局設(shè)計柵格

開掛ing——UI設(shè)計師的七種武器

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

孔雀翎 —配色神器

Material Design Color Swatches

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

開掛ing——UI設(shè)計師的七種武器

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

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

開掛ing——UI設(shè)計師的七種武器

碧玉刀 — 切圖神器

Cutterman

開掛ing——UI設(shè)計師的七種武器

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

開掛ing——UI設(shè)計師的七種武器

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

開掛ing——UI設(shè)計師的七種武器

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

開掛ing——UI設(shè)計師的七種武器

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

開掛ing——UI設(shè)計師的七種武器

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

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

MarkMan

開掛ing——UI設(shè)計師的七種武器

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

開掛ing——UI設(shè)計師的七種武器

長度標(biāo)記

開掛ing——UI設(shè)計師的七種武器

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

開掛ing——UI設(shè)計師的七種武器

色值標(biāo)記

開掛ing——UI設(shè)計師的七種武器

文字標(biāo)記

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

PS Play

開掛ing——UI設(shè)計師的七種武器

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

那么現(xiàn)在來嘗試一下騰訊ISUX給我?guī)淼腜S Play吧！

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

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

CornerEditor

開掛ing——UI設(shè)計師的七種武器

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

拳頭 — 字體神器

Roboto Font

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

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

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

開掛ing——UI設(shè)計師的七種武器

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

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

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

開掛ing——UI設(shè)計師的七種武器

以上介紹的幾種神器，大家均可以通過在百度搜索關(guān)鍵詞進(jìn)行下載使用，要學(xué)以致用。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,6254,0.html

上一篇：北京網(wǎng)站優(yōu)化云智談如何做好網(wǎng)站的用戶體驗優(yōu)化

下一篇：北京網(wǎng)站設(shè)計云智網(wǎng)頁設(shè)計的幾種新趨勢

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計
程序設(shè)
計研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評價

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個企業(yè)官網(wǎng)，服務(wù)態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運行方便，后臺操作的簡單。技術(shù)還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦
不錯，價格比較合適，重點是響應(yīng)速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理