提起平面設(shè)計(jì),也許很容易聯(lián)想到平面設(shè)計(jì)師。其實(shí)平面設(shè)計(jì)不僅是職業(yè)也是一個(gè)重要的設(shè)計(jì)知識(shí)體系,在我工作中發(fā)現(xiàn)平面設(shè)計(jì)知識(shí)是UI設(shè)計(jì)和其他設(shè)計(jì)領(lǐng)域中必備的能力,然而
提起平面設(shè)計(jì),也許很容易聯(lián)想到平面設(shè)計(jì)師。其實(shí)平面設(shè)計(jì)不僅是職業(yè)也是一個(gè)重要的設(shè)計(jì)知識(shí)體系,在我工作中發(fā)現(xiàn)平面設(shè)計(jì)知識(shí)是UI設(shè)計(jì)和其他設(shè)計(jì)領(lǐng)域中必備的能力,然而很多朋友認(rèn)為「平面設(shè)計(jì)是屬于紙媒行業(yè)的事」而忽略這部分知識(shí)的重要性,為此我想簡(jiǎn)明地將平面設(shè)計(jì)知識(shí)體系中最重要的知識(shí)點(diǎn)提出供大家汲取。
平面設(shè)計(jì)(graphic design),也稱做視覺(jué)傳達(dá)設(shè)計(jì),是指在二維平面內(nèi)通過(guò)多種設(shè)計(jì)組合來(lái)借此傳遞信息的視覺(jué)表現(xiàn)設(shè)計(jì)。平面版式設(shè)計(jì)需要使用字體知識(shí)(Font)、視覺(jué)設(shè)計(jì)(Visual Design)、版面(Layout)等方面的專業(yè)技巧來(lái)達(dá)成創(chuàng)作計(jì)劃的目的。平面設(shè)計(jì)非常重視版式的設(shè)計(jì),而版式并非只有紙媒才需要重視。如果想做好移動(dòng)端設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)甚至是別的領(lǐng)域的設(shè)計(jì),那么一定要加強(qiáng)學(xué)習(xí)平面版式的基礎(chǔ)知識(shí)。
在我們開始學(xué)習(xí)平面版式基礎(chǔ)之前,我們先來(lái)講一下簡(jiǎn)明平面構(gòu)成原理。平面構(gòu)成是運(yùn)用點(diǎn)、線、面和其他技法來(lái)構(gòu)成基本元素的學(xué)習(xí)方法。它是在我們工作之前必須要學(xué)會(huì)的視覺(jué)語(yǔ)言。以下的內(nèi)容希望如果您有時(shí)間進(jìn)行練習(xí),邊練邊攝取知識(shí)效果才能更好。
點(diǎn)是組成平面構(gòu)成的基礎(chǔ)要素。點(diǎn)可以是不同大小的;可以是不同疏密的;可以是不同虛實(shí)的??梢允钦R的點(diǎn),也可以是隨意排列的點(diǎn)。在一個(gè)畫面上也可以有大小、疏密、虛實(shí)、整齊和隨意對(duì)比的,對(duì)比就會(huì)產(chǎn)生韻律感。僅僅依靠點(diǎn)來(lái)構(gòu)建畫面時(shí),我們會(huì)想方設(shè)法地讓畫面豐富,體會(huì)點(diǎn)的變化。
線有哪些呢?垂直線、水平線、斜線、曲線等。垂直和水平都會(huì)有穩(wěn)定的感覺(jué),斜線會(huì)更加有沖擊力,曲線會(huì)感受更加柔和。由不同粗細(xì)、不同韻律的線條組合,作品將更加有視覺(jué)引導(dǎo)的效果。嘗試只用線條構(gòu)建一個(gè)畫面,你會(huì)體會(huì)到不一樣的視覺(jué)感受。
面的種類有不規(guī)則形狀和幾何形狀兩種。在《紀(jì)念碑谷》游戲中有個(gè)詞叫做「神圣幾何」,我非常的喜歡。幾何圖形真的是很神奇的存在,幾何形是可以用數(shù)學(xué)表達(dá)出來(lái)的,也是我們?cè)诔踔袝r(shí)就開始學(xué)習(xí)的。比如三角形、圓形、矩形、正方形、橢圓等。這些幾何形在視覺(jué)上是非常令人感覺(jué)舒適的,如果你在創(chuàng)作時(shí)沒(méi)有靈感時(shí),可以從幾何形中尋求靈感。不規(guī)則形狀其實(shí)也可以分解成不同的幾何形的組合。
平面構(gòu)成的形式有重復(fù)構(gòu)成形式、近似構(gòu)成形式、漸變構(gòu)成形式、發(fā)射構(gòu)成形式、密集構(gòu)成形式、對(duì)比構(gòu)成形式、肌理構(gòu)成形式等,如果平時(shí)您發(fā)現(xiàn)在工作中排版的圖形能力比較差,那么建議您了解一下構(gòu)成形式加以練習(xí)。
重復(fù)構(gòu)成形式就是用一個(gè)基本的元素在一定的形式下重復(fù)排列,排列對(duì)方向和疏密會(huì)產(chǎn)生一種秩序的美感。談起重復(fù)構(gòu)成,我想順便介紹一下重復(fù)構(gòu)成的兩種方式:第一種:二方連續(xù)。二方連續(xù)是圖案的一種組織方法。二方連續(xù)是由一個(gè)單位紋樣向上下或左右兩個(gè)方向反復(fù)連續(xù)而形成的紋樣。第二種:四方連續(xù),是由幾個(gè)紋樣組成一個(gè)單位向四周重復(fù)地連續(xù)和延伸擴(kuò)展而成的圖案形式。
近似構(gòu)成形式是使用相似的元素進(jìn)行構(gòu)成的一種方式。近似構(gòu)成講求在統(tǒng)一中帶有變化。設(shè)計(jì)上采用基本形狀之間相加相減求得近似的基本形。基本形類似的構(gòu)成形式就是近似構(gòu)成形式??偨Y(jié)來(lái)說(shuō)就是看著一樣實(shí)則要有變化。
漸變構(gòu)成形式是把基本元素的大小、方向、虛實(shí)、色彩等關(guān)系進(jìn)行漸次變化排列的構(gòu)成形式。漸變可以是通過(guò)顏色、方向、虛實(shí)的變化也可以是通過(guò)外形的變化來(lái)完成,不一定是我們通常理解的顏色漸變。
發(fā)射構(gòu)成形式是以一個(gè)點(diǎn)或多個(gè)點(diǎn)為中心向周圍發(fā)射擴(kuò)散等效果,就會(huì)具有較強(qiáng)的動(dòng)感及節(jié)奏感。首先我們需要有骨骼線。骨骼線就是我們畫面走向的一個(gè)看不見(jiàn)的線索。其次我們可以選擇使用離心式、向心式、同心式幾種發(fā)射方法來(lái)設(shè)計(jì)。
特異構(gòu)成形式是在整體畫面都有規(guī)律有固定形態(tài)的狀況中進(jìn)行小部分的變異以突破單調(diào)畫面的形式。特異構(gòu)成的部分可以用顏色、形狀、線條等方法來(lái)做。很多運(yùn)營(yíng)類設(shè)計(jì)也會(huì)應(yīng)用到特異構(gòu)成形式。
密集構(gòu)成就是在畫面中使用大量重復(fù)密集的元素來(lái)給觀察者一種壓迫感和與留白的對(duì)比,密集構(gòu)成很容易給觀察者造成震撼和心理壓力。
我們做對(duì)比構(gòu)成的時(shí)候,可以使用元素的形狀、大小、方向、位置、色彩、肌理等進(jìn)行對(duì)比,以及重心、空間、有與無(wú)、虛與實(shí)的關(guān)系元素的對(duì)比。對(duì)比會(huì)產(chǎn)生強(qiáng)烈的反差和感官刺激。
視覺(jué)可理解的物體表面圖案的紋理,我們就叫做肌理,以肌理為構(gòu)成的設(shè)計(jì),就是肌理構(gòu)成。我們?cè)谧黾±順?gòu)成時(shí)如果用Photoshop的時(shí)候會(huì)非常的方便,可以用圖案、貼圖等方式。
在平面設(shè)計(jì)的過(guò)程中,我們其實(shí)是在組織圖片、文字、按鈕、圖標(biāo)等最小元素的信息架構(gòu)。這些元素是畫面中的最小單位,它們本身就附著著某個(gè)信息,比如作品的標(biāo)題、一個(gè)功能、去展覽的地址、一個(gè)景點(diǎn)的照片等。這些排版中的元素需要我們放在畫面中,不可以因?yàn)楹貌缓每炊鴦h去必要的信息,然后根據(jù)他們的重要性進(jìn)行排列組合。
字體是排版中最重要的元素,也是最直接的信息傳達(dá)方式。一般來(lái)說(shuō)設(shè)計(jì)師通常需要了解的字體有中文和西文字體兩種:西文字體由來(lái)已久,由最早的羅馬字體到我們現(xiàn)在蘋果手機(jī)里的SFUI字體,西文字體經(jīng)歷了許多的設(shè)計(jì)上的變革。西文字體可以分為:羅馬字體或襯線體(roman,serif)、無(wú)襯線體(sanserif)、手寫體(s cript)、雕刻字系(glayphic)、典籍體字系(Classical)、裝飾體字系(decorative)、展示體字系(Display)、當(dāng)代字體字系(Contemporary)、符號(hào)字系(Symbol)等。中文字體由于起先版權(quán)不夠重視其實(shí)并沒(méi)有西文字體發(fā)展得順利,數(shù)量上也遠(yuǎn)遠(yuǎn)落后于西文字體甚至是日文字體。好在中國(guó)設(shè)計(jì)正在崛起,在一大批設(shè)計(jì)師前赴后繼的努力中,中文字體的數(shù)量正在呈指數(shù)級(jí)別增加。中文字體分為三種:第一種是黑體(筆畫上沒(méi)有裝飾的字體)。黑體也有不同的具體字體如蘋方、微軟雅黑、思源等;第二種是由書法作品演變來(lái)的字體如從宋代活字印刷而來(lái)的宋體(對(duì)了,日本因?yàn)檎`解原因?qū)⑺误w叫做明朝體)、楷體、仿宋體、行楷、隸體、魏體、舒體、顏體以及鋼筆書寫的字體;第三種是美術(shù)字體,比如綜藝體、美黑體、水柱體、娃娃體等。
這里我引用了前端工程師在CSS樣式表(一種用來(lái)表述網(wǎng)頁(yè)樣式的代碼)中的族類概念。常見(jiàn)的族類有五種:襯線體(serif)、非襯線體(sans-serif)、手寫體(cursive)、夢(mèng)幻字體族(fantasy)、等寬字體族(monospace)。襯線體的特點(diǎn)就是筆畫結(jié)尾處有裝飾的處理,比如我們熟悉的Times New Roman、Georgia、宋體等。非襯線字體粗細(xì)比較均勻,比較現(xiàn)代并且在縮小的情況下依舊保持了可讀性。非襯線字體如Arial、Helvatica、幼圓、楷體等。手寫字體族就是由手寫而產(chǎn)生的字體,比如迷你簡(jiǎn)黃草、Caflisch s cript等。夢(mèng)幻字體族聽(tīng)上去稍顯非主流,但是也是字體中不可忽視的一支力量。常見(jiàn)的夢(mèng)幻字體族有WingDings、WingDings 2等。等寬字體族將西文的二十六個(gè)字母全部變成等寬,這樣做的好處就是排版大大地輕松了。常見(jiàn)的等寬字族有Courier、Prestige等??傮w來(lái)說(shuō)字體的族類是襯線體和非襯線體兩個(gè)大類,大家可以簡(jiǎn)潔地記憶:襯線就是筆畫處有裝飾的字體族,非襯線就是筆畫較為相同粗細(xì)的字體族。
一個(gè)族類下面是不同的字體,然而一個(gè)字體又可能有好幾個(gè)字族。字體文件中通常會(huì)包含幾個(gè)字族,如果你安裝了Helvetica,在Photoshop中你會(huì)發(fā)現(xiàn)字體選擇器下包含了三十多個(gè)前綴是Helvetica的字族。原因很簡(jiǎn)單,字體設(shè)計(jì)師除了設(shè)計(jì)從A到Z的大小寫字體、從0到9的數(shù)字、標(biāo)點(diǎn)符號(hào)后,還為我們?cè)O(shè)計(jì)了同樣字體的不同族類來(lái)協(xié)助我們?cè)诓煌厥褂脠?chǎng)景下表達(dá)合適的意思。字族一般有:正常(Regular)、窄體(Narrow)、斜體(Italic)、粗體(Bold)、粗體斜體(Bold Ltalic)、黑體(Black)等等。雖然字體的字族有多有少,但是一般都具有正常、斜體、粗體、粗體斜體四種基本字族。應(yīng)用場(chǎng)景上:粗體通常表示強(qiáng)調(diào)、斜體表示引用、正常是正文。很多時(shí)候我會(huì)發(fā)現(xiàn)很多設(shè)計(jì)師亂用斜體,其實(shí)斜體的設(shè)計(jì)并不是為了好看,而是在書中代表本段文字來(lái)自引用另一個(gè)著作的含義。
舉個(gè)使用斜體的例子:「設(shè)計(jì)的作用在于尋找功能和社會(huì)間的接點(diǎn),在功能足以說(shuō)明一切的前提下,裝飾成分是可以節(jié)制的,如何把握節(jié)制的度是考驗(yàn)一個(gè)設(shè)計(jì)師是否成熟的標(biāo)尺?!?-《設(shè)計(jì)的覺(jué)醒》田中一光
一個(gè)字族中的任何一個(gè)字體也會(huì)有不同的筆畫粗細(xì)變化。這種粗細(xì)變化的字體稱之為字重(Font Weight),字族后面的字重選項(xiàng)如「Thin」、「Light」「Regular」「Book」「Bold」「Black」「Heavy」都是一個(gè)字族下的不同粗細(xì)變化。實(shí)際上,國(guó)際標(biāo)準(zhǔn) ISO組織規(guī)定了九種字重,但是由于有些字重不常見(jiàn),我們就記憶以上七種字重即可。中文字體也有相應(yīng)的字重,如「極細(xì)」、「細(xì)」、「標(biāo)準(zhǔn)」、「常規(guī)」、「中等」、「粗」、「特粗」。在使用場(chǎng)景中,如果我們需要強(qiáng)調(diào)一個(gè)內(nèi)容,比如標(biāo)題時(shí),一般會(huì)用粗體;如果在正文的設(shè)計(jì)中,那么就會(huì)用常規(guī)或標(biāo)準(zhǔn)等字體。英文也類似,這些字重是為了我們突出文字使用的。注意一點(diǎn):在PS中我們也可以通過(guò)字體面板給文字人工加粗,這種加粗如果變成形狀時(shí)會(huì)提示「該字體使用了加粗樣式,不能變換」,所以可見(jiàn)這種人工加粗是有一點(diǎn)缺陷的。
任何字體都具有自身的氣質(zhì)。比如一款圓角萌萌的字體會(huì)給人溫柔調(diào)皮的感覺(jué);而邊角鋒利的字體會(huì)給人一種強(qiáng)硬的感覺(jué);書法字體會(huì)讓用戶覺(jué)得充滿中國(guó)風(fēng)和個(gè)性;瘦長(zhǎng)纖細(xì)的字體會(huì)給人一種未來(lái)感等等。每個(gè)字體都具有一定的感受,這與色彩心理學(xué)中每種顏色帶給人不同的感覺(jué)一樣,字體的外形和筆畫也會(huì)給人一些心理暗示。
全角指一個(gè)字符占用兩個(gè)標(biāo)準(zhǔn)字符位置。中文字符、全角的英文字符、國(guó)標(biāo)GB2312-80中的圖形符號(hào)、特殊字符都是全角字符。半角指字符占用一個(gè)標(biāo)準(zhǔn)的字符位置。
通常的英文字母、數(shù)字鍵、符號(hào)鍵都是半角字符。半角全角主要是針對(duì)標(biāo)點(diǎn)符號(hào)來(lái)說(shuō)的,因?yàn)檎G闆r我們沒(méi)有打全角英文的需求。
半角英文 english
全角英文 english
半角符號(hào) ,.’」;:{}_+!@#$%^&*()
全角符號(hào),'";:{}_+?。溃!纾ィ蓿Γǎ?/span>
計(jì)算機(jī)編程基于英文,也就是半角字符。所以在編程中符號(hào)一定都是半角的,如:
name=”郗鑒”
全角符號(hào)編程就會(huì)無(wú)效,如:
name=「郗鑒」
在我們?cè)O(shè)計(jì)作品時(shí)也一定要記得中文搭配全角符號(hào),英文搭配半角符號(hào)。不要出現(xiàn)如「好的.」或者「thanks?!惯@樣的錯(cuò)誤。全角半角的切換在中文輸入法下按SHIFT+空格可相互轉(zhuǎn)換,這個(gè)知識(shí)點(diǎn)雖然非?;A(chǔ),但是無(wú)疑我們經(jīng)??吹接缅e(cuò)的設(shè)計(jì)。
第一,保證文字是可讀的。
第二,不要在一個(gè)版面中使用三種以上的字體。
第三,如果英文標(biāo)題或單獨(dú)進(jìn)行排版時(shí),盡量全部使用大寫而非首字母大寫。中文標(biāo)題或單獨(dú)進(jìn)行排版時(shí)結(jié)尾不需要句號(hào)。
第四,文字之間的間距在UI設(shè)計(jì)中一般設(shè)置為0,行距一般為字號(hào)本身的1.5倍到2倍。但是考慮到用戶使用場(chǎng)景,比如用戶在地鐵內(nèi)閱讀新聞時(shí)可能地鐵會(huì)出現(xiàn)晃的情況而導(dǎo)致串行,就需要我們考慮增加行距??傊珠g距和行距以及文字大小都要依據(jù)實(shí)際場(chǎng)景來(lái)決定。在UI設(shè)計(jì)中文字大小單位須設(shè)置成PX(像素),大小必須是偶數(shù)。如:24px、26px、28px等。
第五,文字閱讀需要清晰地背景區(qū)分,比如黑紙白字和白紙黑字原則。
第六,除非不得已盡量避免在一個(gè)版式中使用中英文混排。
第七,文本左邊對(duì)齊同時(shí)右邊也需要對(duì)齊??梢酝ㄟ^(guò)PS中的段落面板設(shè)置間距組合和避頭尾法則,但是有時(shí)半角符號(hào)可能會(huì)讓我們很棘手,那就要通過(guò)調(diào)整間距和空格等方式讓文本盡量對(duì)齊。
第八,中文前面需要空兩個(gè)全角字符空格,英文前面無(wú)需空格,但需要大寫。
我們?cè)谝粋€(gè)設(shè)計(jì)中一定會(huì)依靠一些配圖或者照片素材來(lái)進(jìn)行排版。有時(shí)我們會(huì)選擇尋找素材或者是自己去拍,無(wú)論如何,作品中使用的圖片一定要與整體設(shè)計(jì)色調(diào)相符,冷色暖色中性色都要符合整體的色調(diào),一定是鄰近色或?qū)Ρ壬壬赎P(guān)系,不要因?yàn)樽约旱闹饔^放置沒(méi)有色彩關(guān)系的配圖或者會(huì)抵消畫面色彩傾向的配圖。另外注意色彩會(huì)產(chǎn)生「水彩效果」,即兩種顏色放在一起,如果其中一種是灰色或者比較臟的顏色,那么另一個(gè)顏色在我們大腦中也會(huì)感覺(jué)變臟了。類似于這種效果可以在作圖中慢慢體會(huì)。
在一個(gè)設(shè)計(jì)中,圖片與文字的量應(yīng)該有一定的對(duì)比。人天生喜歡看圖片而不是閱讀,實(shí)際上人類有閱讀能力的歷史只有幾千年,而欣賞圖片的能力是天然的。如果你的需求上文字需求非常多,嘗試與需求方商討減少文字量。文字量越少,圖形化設(shè)計(jì)越多,那么視覺(jué)上這個(gè)作品看起來(lái)就更輕松。
在平面設(shè)計(jì)中,因?yàn)樽罱K目的是印刷,對(duì)我們的圖片尺寸沒(méi)有非常嚴(yán)格的要求。但是如果我們是為了互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)的話,可能會(huì)涉及一些需要網(wǎng)站編輯直接上傳的圖片,如果你的尺寸不是一個(gè)固定尺寸,那么可能原本網(wǎng)站編輯不需要裁剪圖片而可以直接上傳的工序,要因?yàn)槲覀兊囊粋€(gè)尺寸變得很復(fù)雜。所以請(qǐng)牢記以下三個(gè)尺寸:4:3,16:9,1:1。4:3的原因是相機(jī)的畫幅一般是4比3,所以我們看到的新聞客戶端的圖片大多是4:3。16:9的原因是視頻寬熒幕畫幅就是16:9,所以我們看到視頻網(wǎng)站的截圖一般都是直接由機(jī)器抓取的圖片。1:1一般用于封面等圖片素材的尺寸是正方形的。
任何一個(gè)設(shè)計(jì)中都需要把各個(gè)元素分級(jí)分清主次,這樣才能更好的抓住重點(diǎn)。你可以想象自己在管理著一部瑪麗蘇電視劇,這部劇中誰(shuí)是主角?誰(shuí)是女二號(hào)?誰(shuí)是群演?主角需要獨(dú)立的化妝間和助理;女二號(hào)可能只有一個(gè)助理;群演可能就是整個(gè)劇里的一個(gè)過(guò)客。我們的設(shè)計(jì)也是如此,哪個(gè)信息是主角?哪個(gè)信息是女二號(hào)?哪些元素又僅僅是群演呢?女主元素首先要站C位(網(wǎng)絡(luò)流行詞,來(lái)源center)霸占畫面的中心,然后這個(gè)元素要盡量突出,可以使用更鮮艷的顏色、更夸張的字重、加邊框等方式突出;女二號(hào)信息一定不要搶了女主信息的風(fēng)頭,所以要和女主元素有一定的對(duì)比,字號(hào)上也要小很多,盡量讓用戶第一眼看到主要元素。而群演的元素一定要淡化,僅僅讓人感知有這些元素就可以了,比如文字可以縮小到剛剛能注意到,顏色可以是接近背景色等。那么如何讓這些信息按照他們的身份來(lái)排版呢?我們就要用到CRAP原則了,CRAP是這四個(gè)原則的首字母縮寫,分別是對(duì)比、重復(fù)、對(duì)齊、親密性四個(gè)原則。
在同一個(gè)視覺(jué)區(qū)域內(nèi)的邏輯不同的元素應(yīng)該有所區(qū)別,避免視覺(jué)上相似。這樣就可以有效地區(qū)分誰(shuí)是主角誰(shuí)是配角了。為了讓主要元素更突出,讓次要元素更后退,我們可以盡量使它們的顏色、字體、大小、留白不同。如果兩個(gè)元素不盡相同,請(qǐng)讓它們截然不同。比如如果你想使用12px的正文與14px的標(biāo)題區(qū)分明顯,不如用12px與40px進(jìn)行區(qū)分反差更大,更容易區(qū)分哪個(gè)內(nèi)容是需要優(yōu)先瀏覽的、哪個(gè)內(nèi)容是次要的。對(duì)比的方式有以下幾種:
色彩對(duì)比
在我們排版時(shí)首先要產(chǎn)生對(duì)比效果的就是背景和文字了。文字是第一閱讀元素,背景和文字如果顏色很接近,那么就不容易區(qū)分出來(lái)引發(fā)注意了。一般來(lái)說(shuō)在很多媒介的設(shè)計(jì)中我們習(xí)慣了白紙黑字,即白色背景和黑色文字。我指的不僅是純黑和純白,也包括其他類似明度顏色的對(duì)比。黑紙白字是另一個(gè)選擇,深色背景和淺色文字的搭配其實(shí)不適合大量閱讀,如果你的作品信息不多是沒(méi)有問(wèn)題的,但是如果用戶閱讀很久黑紙白字的界面,就會(huì)產(chǎn)生視疲勞(比如再次盯著白色的墻的時(shí)候文字還會(huì)出現(xiàn)等)不舒服的感受。當(dāng)然一切取決于用戶使用場(chǎng)景,如果我們的設(shè)計(jì)被應(yīng)用在夜晚等較暗的環(huán)境,黑紙白字更利于閱讀??傊?,不管你的設(shè)計(jì)采用橙藍(lán)、黑白、藍(lán)紫配色,一定要記住文字和背景的對(duì)比關(guān)系。
除了文字之外,圖標(biāo)和其他裝飾信息的色彩對(duì)比也是非常重要的。輔助信息或者輔助功能的圖標(biāo)盡量淡化以突出主要功能和圖標(biāo);重要功能如訂單等按鈕則需要突出和醒目。色彩對(duì)比是設(shè)計(jì)中一個(gè)非常常見(jiàn)的手法。
大小對(duì)比
大小對(duì)比是指文字、圖片、圖標(biāo)等元素為了區(qū)分重要性采用的區(qū)分方法。比如兩行文字:郗鑒和相聲演員,同屬文字但權(quán)重不同:第二行的文字用于解釋第一行的內(nèi)容,所以第二行內(nèi)容應(yīng)該通過(guò)大小和顏色變成次級(jí),讓用戶閱讀時(shí)分清主次。與此類似,比如音樂(lè)播放界面中的三個(gè)按鈕一般并排放在一起:上一首歌、播放、下一首歌,哪個(gè)應(yīng)該更大呢?當(dāng)然是常用的、重要的功能-播放按鈕。當(dāng)然如果圖標(biāo)同屬一個(gè)級(jí)別也應(yīng)該放在一個(gè)尺寸的級(jí)別上。
如果相同的內(nèi)容(如標(biāo)題等)屬于同一個(gè)邏輯,可使它們的顏色、字體、大小、留白保持相同。這樣可以增加條理性和加強(qiáng)設(shè)計(jì)的統(tǒng)一性。這個(gè)原則看似簡(jiǎn)單,但是新手很容易犯這個(gè)問(wèn)題,所以再次提醒,一個(gè)級(jí)別的信息盡量使用一種設(shè)計(jì)來(lái)保持用戶的認(rèn)知,避免用戶認(rèn)為是另一種信息分類。這就是重復(fù)原則。在一個(gè)屬性或邏輯單元里的內(nèi)容應(yīng)該盡可能地使用重復(fù)的顏色、大小、間距。我們來(lái)看,一個(gè)注冊(cè)頁(yè)面可含有:注冊(cè)、登錄、忘記密碼、跳過(guò)等內(nèi)容。如果我們把登錄頁(yè)面分為四個(gè)屬性,那么可能我們需要四種字體或四個(gè)不同的區(qū)域。但如果我們把它們分為兩類呢?注冊(cè)和其他。那么同一個(gè)分類就可以重復(fù)使用一種字體了??瓷先ゾ筒粫?huì)很亂了。在重復(fù)原則下,用戶會(huì)因?yàn)橐曈X(jué)慣性變成尋找線索的「僵尸」,會(huì)根據(jù)線索而順暢地瀏覽下去。
任何內(nèi)容在版面上都盡量應(yīng)該上下左右對(duì)齊。隨意擺放絕對(duì)是錯(cuò)誤的。這一點(diǎn)一定要和大家多次強(qiáng)調(diào),比如一個(gè)元素上下左右的間距都要是一樣的。大家看到網(wǎng)頁(yè)和app設(shè)計(jì)之中經(jīng)常會(huì)有間距和留白,留白和對(duì)齊都是我們?cè)谠O(shè)計(jì)時(shí)需要考量的,留白不是隨意的。
在邏輯上有關(guān)系的兩個(gè)元素應(yīng)該盡量放在一起。兩個(gè)視覺(jué)元素在一起就會(huì)變成一個(gè)視覺(jué)單元。比如注冊(cè)頁(yè)面中的登錄視覺(jué)單元是由輸入表單和登錄按鈕組成的。相同的內(nèi)容,如小標(biāo)題等,屬于同一個(gè)邏輯??墒顾鼈兊念伾⒆煮w、大小、留白保持相同,這樣可以增加條理性和加強(qiáng)設(shè)計(jì)的統(tǒng)一性。
左到右閱讀:從左到右是受現(xiàn)代社會(huì)影響后天影響我們的一種習(xí)慣。我們看一個(gè)比較大面積的設(shè)計(jì)時(shí)也會(huì)從左到右依次閱讀,這也就是為什么網(wǎng)站的logo都在左上角。從上到下閱讀:我們閱讀作品時(shí)也是從上到下依次閱讀,所以重要的內(nèi)容一定在上面,按優(yōu)先級(jí)來(lái)排列。從大到小閱讀:我們的視覺(jué)也是比較調(diào)皮的,如果一個(gè)元素很大,我們也會(huì)首先去注意大的元素再依次看中等和小的元素。從重到輕:元素的顏色也會(huì)影響我們閱讀的順序,從重到輕依次瀏覽。狩獵式閱讀:狩獵式閱讀用戶在尋找可以完成當(dāng)前界面或設(shè)計(jì)中的任務(wù)線索,比如在購(gòu)買頁(yè)面中會(huì)尋找支付按鈕等。S曲線閱讀:S型曲線閱讀比較適合比較大的設(shè)計(jì),眼球需要左顧右盼從上到下來(lái)瀏覽信息,在S型的瀏覽方式下比較能夠全面地觀察每個(gè)頁(yè)面元素,S型成了目前主流的視覺(jué)導(dǎo)向模式。那么在S型曲線中,我們的對(duì)其方式有三種:左對(duì)齊、右對(duì)齊、居中對(duì)齊。重點(diǎn)元素可以依次左右擺放,讓用戶有一個(gè)視覺(jué)瀏覽的慣性,左-右-左-右-左-右。
上面我們介紹了一些排版和平面的基本原理。那么實(shí)際上我們?cè)趹?yīng)用中要做的就是將這些知識(shí)運(yùn)用在具體的需求里。讓多個(gè)元素能夠完美地展現(xiàn)在一個(gè)畫面里也是一種能力,我們管這種能力叫做構(gòu)圖能力。那么下面我來(lái)簡(jiǎn)單講一下構(gòu)圖能力有哪些要點(diǎn)。
我們的任何一個(gè)排版里都會(huì)出現(xiàn)重心。重心是我們?nèi)祟惖囊粋€(gè)心智模型,我們從物理世界里學(xué)習(xí)了重心的規(guī)律,在看平面作品的時(shí)候也會(huì)莫名地關(guān)注重心問(wèn)題。在設(shè)計(jì)中我們可以利用這一點(diǎn)創(chuàng)作出傾斜的重心、居中的重心、左對(duì)齊的重心等。但是請(qǐng)大家注意,如果我們的排版里一個(gè)單元是居中的,那么這個(gè)單元內(nèi)的元素也應(yīng)該重心居中而不應(yīng)該重心不穩(wěn),否則會(huì)感覺(jué)大廈即將傾倒。
設(shè)計(jì)某個(gè)元素或者幾個(gè)元素組成的單元也要注重骨骼,骨骼有外延骨骼和內(nèi)在骨骼兩種。在做完設(shè)計(jì)以后可以將作品元素的外圍連個(gè)線,看看是什么形狀。有時(shí)我們會(huì)發(fā)現(xiàn)一些骨骼不好的設(shè)計(jì)確實(shí)會(huì)給人不舒服的感受。
1692年法國(guó)國(guó)王路易十四命令成立管理印刷的皇家特別委員會(huì)。委員會(huì)由數(shù)學(xué)家尼古拉斯加宗(Nicolas Jaugeon)擔(dān)任領(lǐng)導(dǎo),他們采用方格為設(shè)計(jì)依據(jù),每個(gè)字體方格分為64個(gè)基本方格單位,每個(gè)方格單位再分成36個(gè)小格,這樣印刷版面就有 2304個(gè)小格組成,在嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格中設(shè)計(jì)字體和版面來(lái)試驗(yàn)視覺(jué)傳達(dá)的功能。柵格系統(tǒng)英文是「grid systems」,是一種平面設(shè)計(jì)的方法。柵格系統(tǒng)運(yùn)用固定的格子設(shè)計(jì)版面布局,其風(fēng)格工整簡(jiǎn)潔,這種方法現(xiàn)在也被應(yīng)用在移動(dòng)設(shè)備和網(wǎng)站設(shè)計(jì)等領(lǐng)域里??茖W(xué)的柵格會(huì)給人一種秩序的美感和現(xiàn)代感。
△ 網(wǎng)格系統(tǒng)在書籍排版的應(yīng)用 作品:Dale magazine by Rocio Gomez
△ 網(wǎng)格系統(tǒng)在圖形中的應(yīng)用 作品:Pixty App Branding by Ramotion
我們?cè)谠O(shè)計(jì)任何作品時(shí),首先考慮的是應(yīng)用的尺寸。如iPhone8的分辨率為750x1334px、安卓1080P分辨率為1080x1920px等。在我們確立了我們排版的尺寸后,我們就可以根據(jù)這個(gè)寬度設(shè)計(jì)可以被整除的柵格了。我們把整體寬度定義為W。然后整個(gè)寬度分成多個(gè)等分單元A。每個(gè)單元A中有元素a和間距i。所以他們之間的關(guān)系就是 W =(a×n)+(n-1)i 。當(dāng)然每個(gè)應(yīng)用的尺寸不止可以整除成一種柵格,這就要看我們內(nèi)容排版的疏密程度了。之后,我們將過(guò)多內(nèi)容的柵格和另一個(gè)柵格相加得到更大的排版空間;其他元素都須老老實(shí)實(shí)呆在自己的柵格內(nèi),這樣就完成了一個(gè)布局非??茖W(xué)的設(shè)計(jì)了。
比如一個(gè)網(wǎng)頁(yè)寬度是1000px的情況中我們可以使用:20列每列40px和10像素間隔、20列每列30px和20像素間隔、25列每列30px和10像素間隔、25列每列20px和20像素間隔。如果網(wǎng)頁(yè)寬度是990px我們可以使用:11列每列80px和10像素間隔、18列每列35px和20像素間隔、25列每列45px和10像素間隔、33列每列20px和10像素間隔。如果網(wǎng)頁(yè)寬度是頁(yè)寬980px我們可以使用:14列每列60px和10像素間隔、14列每列50px和20像素間隔、28列每列25px和10像素間隔。
用8當(dāng)然不是因?yàn)閿?shù)字吉利,而是因?yàn)?8 是偶數(shù),并且8可以被成倍縮小三次?。ň褪?可以縮小一倍到4,4可以縮小一倍到2,這對(duì)于移動(dòng)端適配來(lái)說(shuō)太有優(yōu)勢(shì)了)考慮到移動(dòng)設(shè)計(jì)中的適配特殊性,縮小到其它尺寸可能會(huì)出現(xiàn)虛邊和半像素,用偶數(shù)可以避免這種情況。 為什么是8?因?yàn)楸热?920×1080、1280×1024、1280×800、1024×768都是8的倍數(shù)(盡管部分尺寸不是8的倍數(shù),但也不會(huì)顯得奇怪)。除此之外,我們?cè)谧銎渌O(shè)計(jì)時(shí)也可以將不同的留白設(shè)計(jì)成有倍數(shù)關(guān)系的數(shù)字,比如10px、20px、30px等,讓設(shè)計(jì)內(nèi)部更有邏輯性。
黃金比例是一個(gè)定義為 (√5-1)/2的無(wú)理數(shù)。 運(yùn)用到的層面相當(dāng)?shù)膹V闊,例如:數(shù)學(xué)、物理、建筑、美術(shù)甚至是音樂(lè)。 黃金比例的獨(dú)特性質(zhì)首先被應(yīng)用在分割一條線段上。如果有一條線段的總長(zhǎng)度為黃金比例的 分母加分子的單位長(zhǎng),若我們把他分割為兩半,長(zhǎng)的為分母單位長(zhǎng)度,短的為分子單位長(zhǎng)度,則短線長(zhǎng)度與長(zhǎng)線長(zhǎng)度的比值即為黃金比例。
黃金比例(以下簡(jiǎn)稱「黃金比」)約為: 0.618:1。
△ 使用黃金比例設(shè)計(jì)出來(lái)的蘋果logo
斐波那契螺旋線也被叫做「黃金螺旋」,是根據(jù)斐波那契數(shù)列畫出來(lái)的螺旋曲線,自然界中存在許多斐波那契螺旋線的圖案,是自然界最完美的經(jīng)典黃金比例。斐波那契螺旋線,以斐波那契數(shù)為邊的正方形拼成的長(zhǎng)方形,然后在正方形里面畫一個(gè)90度的扇形,連起來(lái)的弧線就是斐波那契螺旋線。
斐波那契數(shù)列(FibonacciSequence),又稱為黃金分割數(shù)列。在數(shù)學(xué)上,斐波那契數(shù)列是以遞歸的方法來(lái)定義:
F0=1
F1=1
Fn=Fn-1+Fn-2
△ 符合斐波那契螺旋線設(shè)計(jì)的Twitter logo
以64px為一個(gè)單位,即a=64px。那么大正方形的邊長(zhǎng)的一半=8a,大圓半徑=7a,中圓半徑=4.25a,小圓半徑=3a。 8a/(8a-3a)=1.6 小圓與大正方形接近黃金比 7a/4.25a≈1.647 中圓與大圓接近黃金比 4.25a/3a≈1.417 中圓與小圓比例接近√2 整個(gè)柵格系統(tǒng)中的尺寸都是通過(guò)黃金比例互相聯(lián)系的。
△ 內(nèi)部符合斐波那契螺旋線和黃金分割的IOS啟動(dòng)圖標(biāo)骨骼
iOS的啟動(dòng)圖標(biāo)非常重要。并且蘋果規(guī)定所有應(yīng)用程序的啟動(dòng)圖標(biāo)都必須是圓角正方形作為圖標(biāo)背板。這個(gè)背板也給我們了一些參考線,蘋果使用黃金分割和斐波那契螺旋線將畫面分割為若干部分。如果我們繪制啟動(dòng)圖標(biāo)時(shí)可以貼合這些參考線。8a/(8a-3a)=1.6 小圓與大正方形接近黃金比7a/4.25a≈1.647 ,中圓與大圓接近黃金比,4.25a/3a≈1.417 中圓與小圓比例接近√2。
平面與版式的設(shè)計(jì)知識(shí)涵蓋了字體的選擇、圖片的選擇、平面構(gòu)成基礎(chǔ)、排版的CRAP原則、柵格化設(shè)計(jì)、黃金比例等多個(gè)知識(shí)點(diǎn)。如果我們現(xiàn)在接到一個(gè)需求,可以首先將內(nèi)容放進(jìn)畫面并排列好重要性、然后選擇合適氣質(zhì)的字體和圖片、使用CRAP的排版原則將信息排成合理的順序、利用柵格化和黃金比例讓畫面更加科學(xué)、最后如果發(fā)現(xiàn)畫面比較空可以加入幾何形裝飾。怎么樣,思路清晰了嗎?平面與版式知識(shí)背后是人類讀取信息幾千年來(lái)形成的習(xí)慣以及現(xiàn)代社會(huì)約定俗成的閱讀方式和心理學(xué)等,要想成為一個(gè)優(yōu)秀的設(shè)計(jì)師,我們還需要進(jìn)一步地了解設(shè)計(jì)背后的原理以及表達(dá)信息的多種方法。希望本篇文章能夠?qū)δ钠矫媾c版式設(shè)計(jì)有所啟迪。
0
喜歡他,就推薦他上首頁(yè)吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會(huì)員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)