黃金分割在設(shè)計(jì)中的應(yīng)用:七種武器讓你設(shè)計(jì)事半功倍
在所有的比例中黃金分割是最能引起人的美感的,0.618被公認(rèn)為最具有審美意義的比例數(shù)字,下面小編為大家分享黃金分割在設(shè)計(jì)中的應(yī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)"提供更一致、更廣泛的"外觀和感覺(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種字重。

以上就是讓你設(shè)計(jì)事半功倍七種武器介紹,大家學(xué)會(huì)了嗎?希望能對(duì)大家有所幫助!
相關(guān)閱讀:標(biāo)志設(shè)計(jì):如何讓字母組合logo不要太過(guò)分像傳統(tǒng)圖形
相關(guān)文章

全畫(huà)幅不是半畫(huà)幅的兩倍有什么區(qū)別? 聊聊相機(jī)的傳感器尺寸
說(shuō)到相機(jī)畫(huà)幅,估計(jì)平時(shí)聽(tīng)到最多的可能就是全畫(huà)幅與半畫(huà)幅了,以至于不少人認(rèn)為中畫(huà)幅比全畫(huà)幅要小,為了避免這種常識(shí)性錯(cuò)誤,這篇文章就來(lái)和大家說(shuō)說(shuō)相機(jī)的不同畫(huà)幅,所謂2025-04-07
a5紙與a4紙?jiān)趺催x? a5紙與a4的區(qū)別介紹
4紙和A5紙因其尺寸適中,使用尤為廣泛,但你知道它們之間有何區(qū)別嗎?今天,就讓我們一起來(lái)探討這個(gè)話(huà)題2025-02-01
各類(lèi)商務(wù)印刷品的尺寸怎么選? 印刷設(shè)計(jì)常用的尺寸紙張/克重都在這里了
日常經(jīng)常印刷各種東西,哪些尺寸,紙張更合適呢?本文為大家整理了常用印刷尺寸,方便圖文廣告店、印企在日常接單生產(chǎn)中能夠快速掌握客戶(hù)關(guān)鍵性信息,詳細(xì)請(qǐng)看下文介紹2024-02-10
常用照片尺寸有哪些 常見(jiàn)證件照尺寸對(duì)照表及用途介紹
現(xiàn)如今,證件照已成為我們生活中不可或缺的一部分,無(wú)論是求職應(yīng)聘,還是入學(xué)注冊(cè),亦或是辦理各種證件,都需要提交符合規(guī)定格式和要求的證件照,那么,這些證件照的尺寸和2024-02-10
平面設(shè)計(jì)是一個(gè)注重視覺(jué)效果的設(shè)計(jì),簡(jiǎn)單的排版方式有時(shí)候不能滿(mǎn)足視覺(jué)突出的效果,業(yè)務(wù)很難達(dá)到吸引用戶(hù)的眼球,下面我們就來(lái)看看8個(gè)平面設(shè)計(jì)技巧分享2023-10-08
如何選擇平面設(shè)計(jì)工具? 這10款軟件應(yīng)該收入囊中
每個(gè)設(shè)計(jì)師都有自己最喜歡的設(shè)計(jì)軟件,并把軟件作為自己的第二語(yǔ)言,今天我們來(lái)推薦10款UI設(shè)計(jì)不可或缺的工具,詳細(xì)請(qǐng)看下文介紹2023-10-08
夏日電影風(fēng)怎么調(diào)色調(diào)色? 適合夏季的柔和綠色調(diào)調(diào)色分享
夏日電影風(fēng)怎么調(diào)色調(diào)色?夏天快到了,想要調(diào)節(jié)夏季電影風(fēng)的畫(huà)面,該怎么操作呢?下面我們就來(lái)看看適合夏季的柔和綠色調(diào)調(diào)色分享2023-04-02
什么是真RAW 什么是偽RAW? 簡(jiǎn)單說(shuō)說(shuō)真 RAW 和 偽RAW
隨著索尼α7RV(ILCE-7RM5)正式發(fā)售,近期有不少網(wǎng)友跟我咨詢(xún)索尼相機(jī)“無(wú)損壓縮(M)”和“無(wú)損壓縮(S)”RAW的問(wèn)題,今天做一個(gè)統(tǒng)一答復(fù)2022-12-24
手機(jī)UI設(shè)計(jì)尺寸有哪些? 超全面的UI元素尺寸設(shè)置指南
手機(jī)UI設(shè)計(jì)尺寸有哪些?作為新手在設(shè)計(jì)手機(jī)ui的頁(yè)面的時(shí)候,發(fā)現(xiàn)自己設(shè)計(jì)的尺寸都很奇怪,如果能有元素尺寸介紹就好了,下面就來(lái)看看我們匯總的超全面的UI元素尺寸設(shè)置指南2021-08-06
常用照片尺寸有哪幾個(gè)? 照片標(biāo)準(zhǔn)尺寸/像素對(duì)照表匯總
常用照片尺寸有哪幾個(gè)?我們經(jīng)常說(shuō)一寸照片,二寸照片,這些照片的尺寸是怎么計(jì)算的?下面我們就來(lái)看看照片標(biāo)準(zhǔn)尺寸/像素對(duì)照表匯總2021-08-06









