VI設計師都在用的版式基礎知識

VI設計師都在用的版式基礎知識

平面設計（graphic design），也稱視覺傳達設計，是指在二維平面內(nèi)通過多種設計組合來借此傳遞信息的視覺表現(xiàn)設計。平面版式設計需要使用字體知識（Font）、視覺設計（Visual Design）、版面（Layout）等方面的專業(yè)技巧來達成創(chuàng)作計劃的目的。平面設計非常重視版式的設計，而版式并非只有紙媒才需要重視。如果想做好移動端設計、網(wǎng)頁設計甚至是別的領域的設計，那么一定要加強學習平面版式的基礎知識。

平面構(gòu)成

在我們開始了解平面版式基礎之前，我們先來了解一下簡明的平面構(gòu)成原理。

平面構(gòu)成是運用點、線、面和其他技法來構(gòu)成基本元素的學習方法。它是在我們工作之前必須要學會的視覺語言。以下的內(nèi)容希望如果您有時間進行練習，邊練邊攝取知識效果會更好。

點的構(gòu)成

點是組成平面構(gòu)成的基礎要素。點可以是不同大小的；可以是不同疏密的；可以是不同虛實的?？梢允钦R的點，也可以是隨意排列的點。在一個畫面上也可以有大小、疏密、虛實、整齊和隨意對比的，對比就會產(chǎn)生韻律感。僅僅依靠點來構(gòu)建畫面時，我們會想方設法地讓畫面豐富，體會點的變化。

線的構(gòu)成

線有哪些呢？垂直線、水平線、斜線、曲線等。垂直和水平都會有穩(wěn)定的感覺，斜線會更加有沖擊力，曲線會感受更加柔和。由不同粗細、不同韻律的線條組合，作品將更加有視覺引導的效果。嘗試只用線條構(gòu)建一個畫面，你會體會到不一樣的視覺感受。

面的構(gòu)成

面的種類有不規(guī)則形狀和幾何形狀兩種。在《紀念碑谷》游戲中有個詞叫做“神圣幾何”，我非常的喜歡。幾何圖形真的是很神奇的存在，幾何形是可以用數(shù)學表達出來的，也是我們在初中時就開始學習的。比如三角形、圓形、矩形、正方形、橢圓等。這些幾何形在視覺上是非常令人感覺舒適的，如果你在創(chuàng)作時沒有靈感時，可以從幾何形中尋求靈感。不規(guī)則形狀其實也可以分解成不同的幾何形的組合。

平面構(gòu)成的八種形式

平面構(gòu)成的形式有重復構(gòu)成形式、近似構(gòu)成形式、漸變構(gòu)成形式、發(fā)射構(gòu)成形式、密集構(gòu)成形式、對比構(gòu)成形式、肌理構(gòu)成形式等，如果平時您發(fā)現(xiàn)在工作中排版的圖形能力比較差，那么建議您了解一下構(gòu)成形式加以練習。

重復構(gòu)成形式

重復構(gòu)成形式就是用一個基本的元素在一定的形式下重復排列，排列對方向和疏密會產(chǎn)生一種秩序的美感。談起重復構(gòu)成，我想順便介紹一下重復構(gòu)成的兩種方式：第一種：二方連續(xù)。二方連續(xù)是圖案的一種組織方法。二方連續(xù)是由一個單位紋樣向上下或左右兩個方向反復連續(xù)而形成的紋樣。第二種：四方連續(xù)，是由幾個紋樣組成一個單位向四周重復地連續(xù)和延伸擴展而成的圖案形式。

近似構(gòu)成形式

近似構(gòu)成形式是使用相似的元素進行構(gòu)成的一種方式。近似構(gòu)成講求在統(tǒng)一中帶有變化。設計上采用基本形狀之間相加相減求得近似的基本形。基本形類似的構(gòu)成形式就是近似構(gòu)成形式。總結(jié)來說就是看著一樣實則要有變化。

漸變構(gòu)成形式

漸變構(gòu)成形式是把基本元素的大小、方向、虛實、色彩等關(guān)系進行漸次變化排列的構(gòu)成形式。漸變可以是通過顏色、方向、虛實的變化也可以是通過外形的變化來完成，不一定是我們通常理解的顏色漸變。

發(fā)射構(gòu)成形式

發(fā)射構(gòu)成形式是以一個點或多個點為中心向周圍發(fā)射擴散等效果，就會具有較強的動感及節(jié)奏感。首先我們需要有骨骼線。骨骼線就是我們畫面走向的一個看不見的線索。其次我們可以選擇使用離心式、向心式、同心式幾種發(fā)射方法來設計。

特異構(gòu)成形式

特異構(gòu)成形式是在整體畫面都有規(guī)律有固定形態(tài)的狀況中進行小部分的變異以突破單調(diào)畫面的形式。特異構(gòu)成的部分可以用顏色、形狀、線條等方法來做。很多運營類設計也會應用到特異構(gòu)成形式。

密集構(gòu)成形式

密集構(gòu)成就是在畫面中使用大量重復密集的元素來給觀察者一種壓迫感和與留白的對比，密集構(gòu)成很容易給觀察者造成震撼和心理壓力。

對比構(gòu)成形式

我們做對比構(gòu)成的時候，可以使用元素的形狀、大小、方向、位置、色彩、肌理等進行對比，以及重心、空間、有與無、虛與實的關(guān)系元素的對比。對比會產(chǎn)生強烈的反差和感官刺激。

肌理構(gòu)成形式

視覺可理解的物體表面圖案的紋理，我們就叫做肌理，以肌理為構(gòu)成的設計，就是肌理構(gòu)成。我們在做肌理構(gòu)成時如果用Photoshop的時候會非常的方便，可以用圖案、貼圖等方式。

排版中的元素

在平面設計的過程中，我們其實是在組織圖片、文字、按鈕、圖標等最小元素的信息架構(gòu)。這些元素是畫面中的最小單位，它們本身就附著著某個信息，比如作品的標題、一個功能、去展覽的地址、一個景點的照片等。這些排版中的元素需要我們放在畫面中，不可以因為好不好看而刪去必要的信息，然后根據(jù)他們的重要性進行排列組合。

排版種的元素：圖片——文字——按鈕——圖標——視頻

字體

字體是排版中最重要的元素，也是最直接的信息傳達方式。一般來說設計師通常需要了解的字體有中文和西文字體兩種：西文字體由來已久，由最早的羅馬字體到我們現(xiàn)在蘋果手機里的SFUI字體，西文字體經(jīng)歷了許多的設計上的變革。西文字體可以分為：羅馬字體或襯線體（roman，serif）、無襯線體（sanserif）、手寫體（s cript）、雕刻字系（glayphic）、典籍體字系（Classical）、裝飾體字系（decorative）、展示體字系（Display）、當代字體字系（Contemporary）、符號字系（Symbol）等。中文字體由于起先版權(quán)不夠重視其實并沒有西文字體發(fā)展得順利，數(shù)量上也遠遠落后于西文字體甚至是日文字體。好在中國設計正在崛起，在一大批設計師前赴后繼的努力中，中文字體的數(shù)量正在呈指數(shù)級別增加。中文字體分為三種：第一種是黑體（筆畫上沒有裝飾的字體）。黑體也有不同的具體字體如蘋方、微軟雅黑、思源等；第二種是由書法作品演變來的字體如從宋代活字印刷而來的宋體（對了，日本因為誤解原因?qū)⑺误w叫做明朝體）、楷體、仿宋體、行楷、隸體、魏體、舒體、顏體以及鋼筆書寫的字體；第三種是美術(shù)字體，比如綜藝體、美黑體、水柱體、娃娃體等。

族類（generic family）

這里引用了前端工程師在CSS樣式表（一種用來表述網(wǎng)頁樣式的代碼）中的族類概念。常見的族類有五種：襯線體（serif）、非襯線體（sans-serif）、手寫體（cursive）、夢幻字體族（fantasy）、等寬字體族（monospace）。襯線體的特點就是筆畫結(jié)尾處有裝飾的處理，比如我們熟悉的Times New Roman、Georgia、宋體等。非襯線字體粗細比較均勻，比較現(xiàn)代并且在縮小的情況下依舊保持了可讀性。非襯線字體如Arial、Helvatica、幼圓、楷體等。手寫字體族就是由手寫而產(chǎn)生的字體，比如迷你簡黃草、Caflisch s cript等。夢幻字體族聽上去稍顯非主流，但是也是字體中不可忽視的一支力量。常見的夢幻字體族有WingDings、WingDings 2等。等寬字體族將西文的二十六個字母全部變成等寬，這樣做的好處就是排版大大地輕松了。常見的等寬字族有Courier、Prestige等?？傮w來說字體的族類是襯線體和非襯線體兩個大類，大家可以簡潔地記憶：襯線就是筆畫處有裝飾的字體族，非襯線就是筆畫較為相同粗細的字體族。

字族（font family）

一個族類下面是不同的字體，然而一個字體又可能有好幾個字族。字體文件中通常會包含幾個字族，如果你安裝了Helvetica，在Photoshop中你會發(fā)現(xiàn)字體選擇器下包含了三十多個前綴是Helvetica的字族。原因很簡單，字體設計師除了設計從A到Z的大小寫字體、從0到9的數(shù)字、標點符號后，還為我們設計了同樣字體的不同族類來協(xié)助我們在不同地使用場景下表達合適的意思。字族一般有：正常（Regular）、窄體（Narrow）、斜體（Italic）、粗體（Bold）、粗體斜體（Bold Ltalic）、黑體（Black）等等。雖然字體的字族有多有少，但是一般都具有正常、斜體、粗體、粗體斜體四種基本字族。應用場景上：粗體通常表示強調(diào)、斜體表示引用、正常是正文。很多時候我會發(fā)現(xiàn)很多設計師亂用斜體，其實斜體的設計并不是為了好看，而是在書中代表本段文字來自引用另一個著作的含義。

字重（Font Weight）

一個字族中的任何一個字體也會有不同的筆畫粗細變化。這種粗細變化的字體稱之為字重（Font Weight），字族后面的字重選項如“Thin”、“Light”“Regular”“Book”“Bold”“Black”“Heavy”都是一個字族下的不同粗細變化。實際上，國際標準 ISO組織規(guī)定了九種字重，但是由于有些字重不常見，我們就記憶以上七種字重即可。中文字體也有相應的字重，如“極細”、“細”、“標準”、“常規(guī)”、“中等”、“粗”、“特粗”。在使用場景中，如果我們需要強調(diào)一個內(nèi)容，比如標題時，一般會用粗體；如果在正文的設計中，那么就會用常規(guī)或標準等字體。英文也類似，這些字重是為了我們突出文字使用的。注意一點：在PS中我們也可以通過字體面板給文字人工加粗，這種加粗如果變成形狀時會提示“該字體使用了加粗樣式，不能變換”，所以可見這種人工加粗是有一點缺陷的。

字體的氣質(zhì)

任何字體都具有自身的氣質(zhì)。比如一款圓角萌萌的字體會給人溫柔調(diào)皮的感覺；而邊角鋒利的字體會給人一種強硬的感覺；書法字體會讓用戶覺得充滿中國風和個性；瘦長纖細的字體會給人一種未來感等等。每個字體都具有一定的感受，這與色彩心理學中每種顏色帶給人不同的感覺一樣，字體的外形和筆畫也會給人一些心理暗示。

全角與半角

全角指一個字符占用兩個標準字符位置。中文字符、全角的英文字符、國標GB2312-80中的圖形符號、特殊字符都是全角字符。半角指字符占用一個標準的字符位置。

通常的英文字母、數(shù)字鍵、符號鍵都是半角字符。半角全角主要是針對標點符號來說的，因為正常情況我們沒有打全角英文的需求。

半角英文 english

全角英文 ｅｎｇｌｉｓｈ

半角符號 ,.’”;:{}_+!@#$%^&*()

全角符號，＇＂；：｛｝＿＋！＠?！纾ィ蓿Γǎ?/span>

計算機編程基于英文，也就是半角字符。所以在編程中符號一定都是半角的，如：

name="郗鑒"

全角符號編程就會無效，如：

name=“郗鑒”

在我們設計作品時也一定要記得中文搭配全角符號，英文搭配半角符號。不要出現(xiàn)如“好的．”或者“ｔｈａｎｋｓ?！边@樣的錯誤。全角半角的切換在中文輸入法下按SHIFT+空格可相互轉(zhuǎn)換，這個知識點雖然非常基礎，但是無疑我們經(jīng)常看到用錯的設計。

知安設計文字排版八條定律

第一，保證文字是可讀的。

第二，不要在一個版面中使用三種以上的字體。

第三，如果英文標題或單獨進行排版時，盡量全部使用大寫而非首字母大寫。中文標題或單獨進行排版時結(jié)尾不需要句號。

第四，文字之間的間距在UI設計中一般設置為0，行距一般為字號本身的1.5倍到2倍。但是考慮到用戶使用場景，比如用戶在地鐵內(nèi)閱讀新聞時可能地鐵會出現(xiàn)晃的情況而導致串行，就需要我們考慮增加行距?？傊珠g距和行距以及文字大小都要依據(jù)實際場景來決定。

在UI設計中文字大小單位須設置成PX（像素），大小必須是偶數(shù)。如：24px、26px、28px等。

第五，文字閱讀需要清晰地背景區(qū)分，比如黑紙白字和白紙黑字原則。

第六，除非不得已盡量避免在一個版式中使用中英文混排。

第七，文本左邊對齊同時右邊也需要對齊。可以通過PS中的段落面板設置間距組合和避頭尾法則，但是有時半角符號可能會讓我們很棘手，那就要通過調(diào)整間距和空格等方式讓文本盡量對齊。

第八，中文前面需要空兩個全角字符空格，英文前面無需空格，但需要大寫。

KEO基奧—專注于企業(yè)品牌品牌服務

主要服務：品牌VI設計，vi設計，logo設計，包裝設計，宣傳畫冊設計等

上海vi設計公司KEO基奧致力于為客戶提供全方位的品牌策略，VI設計，品牌落地服務。我們擁有一支專業(yè)的4A設計團隊和營銷顧問，以創(chuàng)新、專業(yè)、誠信為核心價值，幫助客戶打造卓越的品牌品牌，提升品牌知名度和吸引力。

400電話：400-021-5508

聯(lián)系電話:136-1177-6949（品牌總監(jiān)）

公司地址：上海普陀區(qū)星光耀廣場1號樓13A18