教育改變生活 嶽麓成就夢想

全國報名咨詢電話:0731-85572692
設計師必須要掌握的版式基礎大全

2018-09-25


一、關于平面設計知識
提起平面設計,也許很容易聯想到平面設計師。其實平面設計不僅是職業也是一個重要的設計知識體系,在我工作中發現平面設計知識是UI設計和其他設計領域中必備的能力,然而很多朋友認為「平面設計是屬于紙媒行業的事」而忽略這部分知識的重要性,為此我想簡明地将平面設計知識體系中最重要的知識點提出供大家汲取。
 
平面設計(graphic design),也稱做視覺傳達設計,是指在二維平面内通過多種設計組合來借此傳遞信息的視覺表現設計。平面版式設計需要使用字體知識(Font)、視覺設計(Visual Design)、版面(Layout)等方面的專業技巧來達成創作計劃的目的。平面設計非常重視版式的設計,而版式并非隻有紙媒才需要重視。如果想做好移動端設計、網頁設計甚至是别的領域的設計,那麼一定要加強學習平面版式的基礎知識。
 
二、平面構成
在我們開始學習平面版式基礎之前,我們先來講一下簡明平面構成原理。平面構成是運用點、線、面和其他技法來構成基本元素的學習方法。它是在我們工作之前必須要學會的視覺語言。以下的内容希望如果您有時間進行練習,邊練邊攝取知識效果才能更好。
 
 
1. 點的構成
點是組成平面構成的基礎要素。點可以是不同大小的;可以是不同疏密的;可以是不同虛實的。可以是整齊的點,也可以是随意排列的點。在一個畫面上也可以有大小、疏密、虛實、整齊和随意對比的,對比就會産生韻律感。僅僅依靠點來構建畫面時,我們會想方設法地讓畫面豐富,體會點的變化。
 
2. 線的構成
線有哪些呢?垂直線、水平線、斜線、曲線等。垂直和水平都會有穩定的感覺,斜線會更加有沖擊力,曲線會感受更加柔和。由不同粗細、不同韻律的線條組合,作品将更加有視覺引導的效果。嘗試隻用線條構建一個畫面,你會體會到不一樣的視覺感受。
 
3. 面的構成
面的種類有不規則形狀和幾何形狀兩種。在《紀念碑谷》遊戲中有個詞叫做「神聖幾何」,我非常的喜歡。幾何圖形真的是很神奇的存在,幾何形是可以用數學表達出來的,也是我們在初中時就開始學習的。比如三角形、圓形、矩形、正方形、橢圓等。這些幾何形在視覺上是非常令人感覺舒适的,如果你在創作時沒有靈感時,可以從幾何形中尋求靈感。不規則形狀其實也可以分解成不同的幾何形的組合。
 
4. 平面構成的八種形式
平面構成的形式有重複構成形式、近似構成形式、漸變構成形式、發射構成形式、密集構成形式、對比構成形式、肌理構成形式等,如果平時您發現在工作中排版的圖形能力比較差,那麼建議您了解一下構成形式加以練習。
 
 
5. 重複構成形式
重複構成形式就是用一個基本的元素在一定的形式下重複排列,排列對方向和疏密會産生一種秩序的美感。談起重複構成,我想順便介紹一下重複構成的兩種方式:第一種:二方連續。二方連續是圖案的一種組織方法。二方連續是由一個單位紋樣向上下或左右兩個方向反複連續而形成的紋樣。第二種:四方連續,是由幾個紋樣組成一個單位向四周重複地連續和延伸擴展而成的圖案形式。
 
6. 近似構成形式
近似構成形式是使用相似的元素進行構成的一種方式。近似構成講求在統一中帶有變化。設計上采用基本形狀之間相加相減求得近似的基本形。基本形類似的構成形式就是近似構成形式。總結來說就是看着一樣實則要有變化。
 
7. 漸變構成形式
漸變構成形式是把基本元素的大小、方向、虛實、色彩等關系進行漸次變化排列的構成形式。漸變可以是通過顔色、方向、虛實的變化也可以是通過外形的變化來完成,不一定是我們通常理解的顔色漸變。
 
8. 發射構成形式
發射構成形式是以一個點或多個點為中心向周圍發射擴散等效果,就會具有較強的動感及節奏感。首先我們需要有骨骼線。骨骼線就是我們畫面走向的一個看不見的線索。其次我們可以選擇使用離心式、向心式、同心式幾種發射方法來設計。
 
9. 特異構成形式
特異構成形式是在整體畫面都有規律有固定形态的狀況中進行小部分的變異以突破單調畫面的形式。特異構成的部分可以用顔色、形狀、線條等方法來做。很多運營類設計也會應用到特異構成形式。
 
10. 密集構成形式
密集構成就是在畫面中使用大量重複密集的元素來給觀察者一種壓迫感和與留白的對比,密集構成很容易給觀察者造成震撼和心理壓力。
 
11. 對比構成形式
我們做對比構成的時候,可以使用元素的形狀、大小、方向、位置、色彩、肌理等進行對比,以及重心、空間、有與無、虛與實的關系元素的對比。對比會産生強烈的反差和感官刺激。
 
12. 肌理構成形式
視覺可理解的物體表面圖案的紋理,我們就叫做肌理,以肌理為構成的設計,就是肌理構成。我們在做肌理構成時如果用Photoshop的時候會非常的方便,可以用圖案、貼圖等方式。
 
三、排版中的元素
在平面設計的過程中,我們其實是在組織圖片、文字、按鈕、圖标等最小元素的信息架構。這些元素是畫面中的最小單位,它們本身就附着着某個信息,比如作品的标題、一個功能、去展覽的地址、一個景點的照片等。這些排版中的元素需要我們放在畫面中,不可以因為好不好看而删去必要的信息,然後根據他們的重要性進行排列組合。
 
 
 
1. 字體
字體是排版中最重要的元素,也是最直接的信息傳達方式。一般來說設計師通常需要了解的字體有中文和西文字體兩種:西文字體由來已久,由最早的羅馬字體到我們現在蘋果手機裡的SFUI字體,西文字體經曆了許多的設計上的變革。西文字體可以分為:羅馬字體或襯線體(roman,serif)、無襯線體(sanserif)、手寫體(s cript)、雕刻字系(glayphic)、典籍體字系(Classical)、裝飾體字系(decorative)、展示體字系(Display)、當代字體字系(Contemporary)、符号字系(Symbol)等。中文字體由于起先版權不夠重視其實并沒有西文字體發展得順利,數量上也遠遠落後于西文字體甚至是日文字體。好在中國設計正在崛起,在一大批設計師前赴後繼的努力中,中文字體的數量正在呈指數級别增加。中文字體分為三種:第一種是黑體(筆畫上沒有裝飾的字體)。黑體也有不同的具體字體如蘋方、微軟雅黑、思源等;第二種是由書法作品演變來的字體如從宋代活字印刷而來的宋體(對了,日本因為誤解原因将宋體叫做明朝體)、楷體、仿宋體、行楷、隸體、魏體、舒體、顔體以及鋼筆書寫的字體;第三種是美術字體,比如綜藝體、美黑體、水柱體、娃娃體等。
 
 
2. 族類(generic family)
這裡我引用了前端工程師在CSS樣式表(一種用來表述網頁樣式的代碼)中的族類概念。常見的族類有五種:襯線體(serif)、非襯線體(sans-serif)、手寫體(cursive)、夢幻字體族(fantasy)、等寬字體族(monospace)。襯線體的特點就是筆畫結尾處有裝飾的處理,比如我們熟悉的Times New Roman、Georgia、宋體等。非襯線字體粗細比較均勻,比較現代并且在縮小的情況下依舊保持了可讀性。非襯線字體如Arial、Helvatica、幼圓、楷體等。手寫字體族就是由手寫而産生的字體,比如迷你簡黃草、Caflisch s cript等。夢幻字體族聽上去稍顯非主流,但是也是字體中不可忽視的一支力量。常見的夢幻字體族有WingDings、WingDings 2等。等寬字體族将西文的二十六個字母全部變成等寬,這樣做的好處就是排版大大地輕松了。常見的等寬字族有Courier、Prestige等。總體來說字體的族類是襯線體和非襯線體兩個大類,大家可以簡潔地記憶:襯線就是筆畫處有裝飾的字體族,非襯線就是筆畫較為相同粗細的字體族。
 
 
3. 字族(font family)
一個族類下面是不同的字體,然而一個字體又可能有好幾個字族。字體文件中通常會包含幾個字族,如果你安裝了Helvetica,在Photoshop中你會發現字體選擇器下包含了三十多個前綴是Helvetica的字族。原因很簡單,字體設計師除了設計從A到Z的大小寫字體、從0到9的數字、标點符号後,還為我們設計了同樣字體的不同族類來協助我們在不同地使用場景下表達合适的意思。字族一般有:正常(Regular)、窄體(Narrow)、斜體(Italic)、粗體(Bold)、粗體斜體(Bold Ltalic)、黑體(Black)等等。雖然字體的字族有多有少,但是一般都具有正常、斜體、粗體、粗體斜體四種基本字族。應用場景上:粗體通常表示強調、斜體表示引用、正常是正文。很多時候我會發現很多設計師亂用斜體,其實斜體的設計并不是為了好看,而是在書中代表本段文字來自引用另一個著作的含義。
 
舉個使用斜體的例子:「設計的作用在于尋找功能和社會間的接點,在功能足以說明一切的前提下,裝飾成分是可以節制的,如何把握節制的度是考驗一個設計師是否成熟的标尺。」 -《設計的覺醒》田中一光
 
 
4. 字重(Font Weight)
一個字族中的任何一個字體也會有不同的筆畫粗細變化。這種粗細變化的字體稱之為字重(Font Weight),字族後面的字重選項如「Thin」、「Light」「Regular」「Book」「Bold」「Black」「Heavy」都是一個字族下的不同粗細變化。實際上,國際标準 ISO組織規定了九種字重,但是由于有些字重不常見,我們就記憶以上七種字重即可。中文字體也有相應的字重,如「極細」、「細」、「标準」、「常規」、「中等」、「粗」、「特粗」。在使用場景中,如果我們需要強調一個内容,比如标題時,一般會用粗體;如果在正文的設計中,那麼就會用常規或标準等字體。英文也類似,這些字重是為了我們突出文字使用的。注意一點:在PS中我們也可以通過字體面闆給文字人工加粗,這種加粗如果變成形狀時會提示「該字體使用了加粗樣式,不能變換」,所以可見這種人工加粗是有一點缺陷的。
 
 
5. 字體的氣質
任何字體都具有自身的氣質。比如一款圓角萌萌的字體會給人溫柔調皮的感覺;而邊角鋒利的字體會給人一種強硬的感覺;書法字體會讓用戶覺得充滿中國風和個性;瘦長纖細的字體會給人一種未來感等等。每個字體都具有一定的感受,這與色彩心理學中每種顔色帶給人不同的感覺一樣,字體的外形和筆畫也會給人一些心理暗示。
 
 
6. 全角與半角
全角指一個字符占用兩個标準字符位置。中文字符、全角的英文字符、國标GB2312-80中的圖形符号、特殊字符都是全角字符。半角指字符占用一個标準的字符位置。
 
通常的英文字母、數字鍵、符号鍵都是半角字符。半角全角主要是針對标點符号來說的,因為正常情況我們沒有打全角英文的需求。
 
半角英文 english
 
全角英文 english
 
半角符号 ,.’」;:{}_+!@#$%^&*()
 
全角符号,'";:{}_+!@#$%^&*()
 
計算機編程基于英文,也就是半角字符。所以在編程中符号一定都是半角的,如:
 
name=”郗鑒”
 
全角符号編程就會無效,如:
 
name=「郗鑒」
 
在我們設計作品時也一定要記得中文搭配全角符号,英文搭配半角符号。不要出現如「好的.」或者「thanks。」這樣的錯誤。全角半角的切換在中文輸入法下按SHIFT+空格可相互轉換,這個知識點雖然非常基礎,但是無疑我們經常看到用錯的設計。
 
7. 文字排版八條定律
第一,保證文字是可讀的。
第二,不要在一個版面中使用三種以上的字體。
第三,如果英文标題或單獨進行排版時,盡量全部使用大寫而非首字母大寫。中文标題或單獨進行排版時結尾不需要句号。
第四,文字之間的間距在UI設計中一般設置為0,行距一般為字号本身的1.5倍到2倍。但是考慮到用戶使用場景,比如用戶在地鐵内閱讀新聞時可能地鐵會出現晃的情況而導緻串行,就需要我們考慮增加行距。總之字間距和行距以及文字大小都要依據實際場景來決定。在UI設計中文字大小單位須設置成PX(像素),大小必須是偶數。如:24px、26px、28px等。
第五,文字閱讀需要清晰地背景區分,比如黑紙白字和白紙黑字原則。
第六,除非不得已盡量避免在一個版式中使用中英文混排。
第七,文本左邊對齊同時右邊也需要對齊。可以通過PS中的段落面闆設置間距組合和避頭尾法則,但是有時半角符号可能會讓我們很棘手,那就要通過調整間距和空格等方式讓文本盡量對齊。
第八,中文前面需要空兩個全角字符空格,英文前面無需空格,但需要大寫。
四、圖片
我們在一個設計中一定會依靠一些配圖或者照片素材來進行排版。有時我們會選擇尋找素材或者是自己去拍,無論如何,作品中使用的圖片一定要與整體設計色調相符,冷色暖色中性色都要符合整體的色調,一定是鄰近色或對比色等色彩關系,不要因為自己的主觀放置沒有色彩關系的配圖或者會抵消畫面色彩傾向的配圖。另外注意色彩會産生「水彩效果」,即兩種顔色放在一起,如果其中一種是灰色或者比較髒的顔色,那麼另一個顔色在我們大腦中也會感覺變髒了。類似于這種效果可以在作圖中慢慢體會。
 
 
1. 圖文比例
在一個設計中,圖片與文字的量應該有一定的對比。人天生喜歡看圖片而不是閱讀,實際上人類有閱讀能力的曆史隻有幾千年,而欣賞圖片的能力是天然的。如果你的需求上文字需求非常多,嘗試與需求方商讨減少文字量。文字量越少,圖形化設計越多,那麼視覺上這個作品看起來就更輕松。
 
2. 圖片比例
在平面設計中,因為最終目的是印刷,對我們的圖片尺寸沒有非常嚴格的要求。但是如果我們是為了互聯網産品的設計的話,可能會涉及一些需要網站編輯直接上傳的圖片,如果你的尺寸不是一個固定尺寸,那麼可能原本網站編輯不需要裁剪圖片而可以直接上傳的工序,要因為我們的一個尺寸變得很複雜。所以請牢記以下三個尺寸:4:3,16:9,1:1。4:3的原因是相機的畫幅一般是4比3,所以我們看到的新聞客戶端的圖片大多是4:3。16:9的原因是視頻寬熒幕畫幅就是16:9,所以我們看到視頻網站的截圖一般都是直接由機器抓取的圖片。1:1一般用于封面等圖片素材的尺寸是正方形的。
 
 
五、排版的CRAP原則
1. 排版中的邏輯關系
任何一個設計中都需要把各個元素分級分清主次,這樣才能更好的抓住重點。你可以想象自己在管理着一部瑪麗蘇電視劇,這部劇中誰是主角?誰是女二号?誰是群演?主角需要獨立的化妝間和助理;女二号可能隻有一個助理;群演可能就是整個劇裡的一個過客。我們的設計也是如此,哪個信息是主角?哪個信息是女二号?哪些元素又僅僅是群演呢?女主元素首先要站C位(網絡流行詞,來源center)霸占畫面的中心,然後這個元素要盡量突出,可以使用更鮮豔的顔色、更誇張的字重、加邊框等方式突出;女二号信息一定不要搶了女主信息的風頭,所以要和女主元素有一定的對比,字号上也要小很多,盡量讓用戶第一眼看到主要元素。而群演的元素一定要淡化,僅僅讓人感知有這些元素就可以了,比如文字可以縮小到剛剛能注意到,顔色可以是接近背景色等。那麼如何讓這些信息按照他們的身份來排版呢?我們就要用到CRAP原則了,CRAP是這四個原則的首字母縮寫,分别是對比、重複、對齊、親密性四個原則。
 
2. 對比 CONTRAST
在同一個視覺區域内的邏輯不同的元素應該有所區别,避免視覺上相似。這樣就可以有效地區分誰是主角誰是配角了。為了讓主要元素更突出,讓次要元素更後退,我們可以盡量使它們的顔色、字體、大小、留白不同。如果兩個元素不盡相同,請讓它們截然不同。比如如果你想使用12px的正文與14px的标題區分明顯,不如用12px與40px進行區分反差更大,更容易區分哪個内容是需要優先浏覽的、哪個内容是次要的。對比的方式有以下幾種:
 
色彩對比
 
在我們排版時首先要産生對比效果的就是背景和文字了。文字是第一閱讀元素,背景和文字如果顔色很接近,那麼就不容易區分出來引發注意了。一般來說在很多媒介的設計中我們習慣了白紙黑字,即白色背景和黑色文字。我指的不僅是純黑和純白,也包括其他類似明度顔色的對比。黑紙白字是另一個選擇,深色背景和淺色文字的搭配其實不适合大量閱讀,如果你的作品信息不多是沒有問題的,但是如果用戶閱讀很久黑紙白字的界面,就會産生視疲勞(比如再次盯着白色的牆的時候文字還會出現等)不舒服的感受。當然一切取決于用戶使用場景,如果我們的設計被應用在夜晚等較暗的環境,黑紙白字更利于閱讀。總之,不管你的設計采用橙藍、黑白、藍紫配色,一定要記住文字和背景的對比關系。
 
除了文字之外,圖标和其他裝飾信息的色彩對比也是非常重要的。輔助信息或者輔助功能的圖标盡量淡化以突出主要功能和圖标;重要功能如訂單等按鈕則需要突出和醒目。色彩對比是設計中一個非常常見的手法。
 
 
大小對比
 
大小對比是指文字、圖片、圖标等元素為了區分重要性采用的區分方法。比如兩行文字:郗鑒和相聲演員,同屬文字但權重不同:第二行的文字用于解釋第一行的内容,所以第二行内容應該通過大小和顔色變成次級,讓用戶閱讀時分清主次。與此類似,比如音樂播放界面中的三個按鈕一般并排放在一起:上一首歌、播放、下一首歌,哪個應該更大呢?當然是常用的、重要的功能-播放按鈕。當然如果圖标同屬一個級别也應該放在一個尺寸的級别上。
 
 
3. 重複 REPETITION
如果相同的内容(如标題等)屬于同一個邏輯,可使它們的顔色、字體、大小、留白保持相同。這樣可以增加條理性和加強設計的統一性。這個原則看似簡單,但是新手很容易犯這個問題,所以再次提醒,一個級别的信息盡量使用一種設計來保持用戶的認知,避免用戶認為是另一種信息分類。這就是重複原則。在一個屬性或邏輯單元裡的内容應該盡可能地使用重複的顔色、大小、間距。我們來看,一個注冊頁面可含有:注冊、登錄、忘記密碼、跳過等内容。如果我們把登錄頁面分為四個屬性,那麼可能我們需要四種字體或四個不同的區域。但如果我們把它們分為兩類呢?注冊和其他。那麼同一個分類就可以重複使用一種字體了。看上去就不會很亂了。在重複原則下,用戶會因為視覺慣性變成尋找線索的「僵屍」,會根據線索而順暢地浏覽下去。
 
 
4. 對齊 ALIGNMENT
任何内容在版面上都盡量應該上下左右對齊。随意擺放絕對是錯誤的。這一點一定要和大家多次強調,比如一個元素上下左右的間距都要是一樣的。大家看到網頁和app設計之中經常會有間距和留白,留白和對齊都是我們在設計時需要考量的,留白不是随意的。
 
 
5. 親密性 PROXIMITY
在邏輯上有關系的兩個元素應該盡量放在一起。兩個視覺元素在一起就會變成一個視覺單元。比如注冊頁面中的登錄視覺單元是由輸入表單和登錄按鈕組成的。相同的内容,如小标題等,屬于同一個邏輯。可使它們的顔色、字體、大小、留白保持相同,這樣可以增加條理性和加強設計的統一性。
 
六、用戶浏覽定律
 
 
左到右閱讀:從左到右是受現代社會影響後天影響我們的一種習慣。我們看一個比較大面積的設計時也會從左到右依次閱讀,這也就是為什麼網站的logo都在左上角。從上到下閱讀:我們閱讀作品時也是從上到下依次閱讀,所以重要的内容一定在上面,按優先級來排列。從大到小閱讀:我們的視覺也是比較調皮的,如果一個元素很大,我們也會首先去注意大的元素再依次看中等和小的元素。從重到輕:元素的顔色也會影響我們閱讀的順序,從重到輕依次浏覽。狩獵式閱讀:狩獵式閱讀用戶在尋找可以完成當前界面或設計中的任務線索,比如在購買頁面中會尋找支付按鈕等。S曲線閱讀:S型曲線閱讀比較适合比較大的設計,眼球需要左顧右盼從上到下來浏覽信息,在S型的浏覽方式下比較能夠全面地觀察每個頁面元素,S型成了目前主流的視覺導向模式。那麼在S型曲線中,我們的對其方式有三種:左對齊、右對齊、居中對齊。重點元素可以依次左右擺放,讓用戶有一個視覺浏覽的慣性,左-右-左-右-左-右。
 
七、構圖
上面我們介紹了一些排版和平面的基本原理。那麼實際上我們在應用中要做的就是将這些知識運用在具體的需求裡。讓多個元素能夠完美地展現在一個畫面裡也是一種能力,我們管這種能力叫做構圖能力。那麼下面我來簡單講一下構圖能力有哪些要點。
 
1. 重心
我們的任何一個排版裡都會出現重心。重心是我們人類的一個心智模型,我們從物理世界裡學習了重心的規律,在看平面作品的時候也會莫名地關注重心問題。在設計中我們可以利用這一點創作出傾斜的重心、居中的重心、左對齊的重心等。但是請大家注意,如果我們的排版裡一個單元是居中的,那麼這個單元内的元素也應該重心居中而不應該重心不穩,否則會感覺大廈即将傾倒。
 
 
2. 骨骼
設計某個元素或者幾個元素組成的單元也要注重骨骼,骨骼有外延骨骼和内在骨骼兩種。在做完設計以後可以将作品元素的外圍連個線,看看是什麼形狀。有時我們會發現一些骨骼不好的設計确實會給人不舒服的感受。
 
3. 栅格系統
1692年法國國王路易十四命令成立管理印刷的皇家特别委員會。委員會由數學家尼古拉斯加宗(Nicolas Jaugeon)擔任領導,他們采用方格為設計依據,每個字體方格分為64個基本方格單位,每個方格單位再分成36個小格,這樣印刷版面就有 2304個小格組成,在嚴謹的幾何網格中設計字體和版面來試驗視覺傳達的功能。栅格系統英文是「grid systems」,是一種平面設計的方法。栅格系統運用固定的格子設計版面布局,其風格工整簡潔,這種方法現在也被應用在移動設備和網站設計等領域裡。科學的栅格會給人一種秩序的美感和現代感。
 
 
4. 為你的設計建立栅格
我們在設計任何作品時,首先考慮的是應用的尺寸。如iPhone8的分辨率為750x1334px、安卓1080P分辨率為1080x1920px等。在我們确立了我們排版的尺寸後,我們就可以根據這個寬度設計可以被整除的栅格了。我們把整體寬度定義為W。然後整個寬度分成多個等分單元A。每個單元A中有元素a和間距i。所以他們之間的關系就是 W =(a×n)+(n-1)i 。當然每個應用的尺寸不止可以整除成一種栅格,這就要看我們内容排版的疏密程度了。之後,我們将過多内容的栅格和另一個栅格相加得到更大的排版空間;其他元素都須老老實實呆在自己的栅格内,這樣就完成了一個布局非常科學的設計了。
 
 
比如一個網頁寬度是1000px的情況中我們可以使用:20列每列40px和10像素間隔、20列每列30px和20像素間隔、25列每列30px和10像素間隔、25列每列20px和20像素間隔。如果網頁寬度是990px我們可以使用:11列每列80px和10像素間隔、18列每列35px和20像素間隔、25列每列45px和10像素間隔、33列每列20px和10像素間隔。如果網頁寬度是頁寬980px我們可以使用:14列每列60px和10像素間隔、14列每列50px和20像素間隔、28列每列25px和10像素間隔。
 
6. 8像素栅格
用8當然不是因為數字吉利,而是因為 8 是偶數,并且8可以被成倍縮小三次!(就是8可以縮小一倍到4,4可以縮小一倍到2,這對于移動端适配來說太有優勢了)考慮到移動設計中的适配特殊性,縮小到其它尺寸可能會出現虛邊和半像素,用偶數可以避免這種情況。 為什麼是8?因為比如1920×1080、1280×1024、1280×800、1024×768都是8的倍數(盡管部分尺寸不是8的倍數,但也不會顯得奇怪)。除此之外,我們在做其它設計時也可以将不同的留白設計成有倍數關系的數字,比如10px、20px、30px等,讓設計内部更有邏輯性。
 
 
7. 黃金比例
 
 
黃金比例是一個定義為 (√5-1)/2的無理數。 運用到的層面相當的廣闊,例如:數學、物理、建築、美術甚至是音樂。 黃金比例的獨特性質首先被應用在分割一條線段上。如果有一條線段的總長度為黃金比例的 分母加分子的單位長,若我們把他分割為兩半,長的為分母單位長度,短的為分子單位長度,則短線長度與長線長度的比值即為黃金比例。
 
黃金比例(以下簡稱「黃金比」)約為: 0.618:1。
 
 
 
8. 斐波那契螺旋線
斐波那契螺旋線也被叫做「黃金螺旋」,是根據斐波那契數列畫出來的螺旋曲線,自然界中存在許多斐波那契螺旋線的圖案,是自然界最完美的經典黃金比例。斐波那契螺旋線,以斐波那契數為邊的正方形拼成的長方形,然後在正方形裡面畫一個90度的扇形,連起來的弧線就是斐波那契螺旋線。
 
斐波那契數列(FibonacciSequence),又稱為黃金分割數列。在數學上,斐波那契數列是以遞歸的方法來定義:
 
F0=1
 
F1=1
 
Fn=Fn-1+Fn-2
 
 
 
 
9. APP圖标中的栅格
以64px為一個單位,即a=64px。那麼大正方形的邊長的一半=8a,大圓半徑=7a,中圓半徑=4.25a,小圓半徑=3a。 8a/(8a-3a)=1.6 小圓與大正方形接近黃金比 7a/4.25a≈1.647 中圓與大圓接近黃金比 4.25a/3a≈1.417 中圓與小圓比例接近√2 整個栅格系統中的尺寸都是通過黃金比例互相聯系的。
 
 
 
iOS的啟動圖标非常重要。并且蘋果規定所有應用程序的啟動圖标都必須是圓角正方形作為圖标背闆。這個背闆也給我們了一些參考線,蘋果使用黃金分割和斐波那契螺旋線将畫面分割為若幹部分。如果我們繪制啟動圖标時可以貼合這些參考線。8a/(8a-3a)=1.6 小圓與大正方形接近黃金比7a/4.25a≈1.647 ,中圓與大圓接近黃金比,4.25a/3a≈1.417 中圓與小圓比例接近√2。
 
總結
平面與版式的設計知識涵蓋了字體的選擇、圖片的選擇、平面構成基礎、排版的CRAP原則、栅格化設計、黃金比例等多個知識點。如果我們現在接到一個需求,可以首先将内容放進畫面并排列好重要性、然後選擇合适氣質的字體和圖片、使用CRAP的排版原則将信息排成合理的順序、利用栅格化和黃金比例讓畫面更加科學、最後如果發現畫面比較空可以加入幾何形裝飾。怎麼樣,思路清晰了嗎?平面與版式知識背後是人類讀取信息幾千年來形成的習慣以及現代社會約定俗成的閱讀方式和心理學等,要想成為一個優秀的設計師,我們還需要進一步地了解設計背後的原理以及表達信息的多種方法。希望本篇文章能夠對您的平面與版式設計有所啟迪。
文章來源于網絡

(1)