提(ti)起平面(mian)(mian)(mian)設計(ji)(ji)，也許很容易聯想到平面(mian)(mian)(mian)設計(ji)(ji)師。其實平面(mian)(mian)(mian)設計(ji)(ji)不僅是(shi)職業(ye)也是(shi)一個(ge)重要的(de)設計(ji)(ji)知(zhi)識體(ti)系，在我工作(zuo)中發現平面(mian)(mian)(mian)設計(ji)(ji)知(zhi)識是(shi)UI設計(ji)(ji)和(he)其他設計(ji)(ji)領域中必備的(de)能力(li)，然而(er)很多朋友認(ren)為「平面(mian)(mian)(mian)設計(ji)(ji)是(shi)屬于紙媒行業(ye)的(de)事」而(er)忽略這部分知(zhi)識的(de)重要性(xing)，為此我想簡明地將(jiang)平面(mian)(mian)(mian)設計(ji)(ji)知(zhi)識體(ti)系中最重要的(de)知(zhi)識點提(ti)出供大(da)家汲取(qu)。
平(ping)面(mian)設(she)(she)(she)(she)計(ji)(ji)(ji)（graphic design），也(ye)稱做(zuo)視覺傳達(da)設(she)(she)(she)(she)計(ji)(ji)(ji)，是指(zhi)在(zai)二維(wei)平(ping)面(mian)內通過多(duo)種設(she)(she)(she)(she)計(ji)(ji)(ji)組合來借此(ci)傳遞信(xin)息的(de)(de)視覺表現設(she)(she)(she)(she)計(ji)(ji)(ji)。平(ping)面(mian)版(ban)(ban)式(shi)設(she)(she)(she)(she)計(ji)(ji)(ji)需要(yao)使(shi)用字體知識（Font）、視覺設(she)(she)(she)(she)計(ji)(ji)(ji)（Visual Design）、版(ban)(ban)面(mian)（Layout）等方面(mian)的(de)(de)專業技巧來達(da)成創作計(ji)(ji)(ji)劃(hua)的(de)(de)目的(de)(de)。平(ping)面(mian)設(she)(she)(she)(she)計(ji)(ji)(ji)非常重(zhong)視版(ban)(ban)式(shi)的(de)(de)設(she)(she)(she)(she)計(ji)(ji)(ji)，而版(ban)(ban)式(shi)并非只(zhi)有紙媒才需要(yao)重(zhong)視。如果想做(zuo)好移動(dong)端(duan)設(she)(she)(she)(she)計(ji)(ji)(ji)、網頁設(she)(she)(she)(she)計(ji)(ji)(ji)甚至是別的(de)(de)領域(yu)的(de)(de)設(she)(she)(she)(she)計(ji)(ji)(ji)，那(nei)么一定要(yao)加強(qiang)學(xue)習平(ping)面(mian)版(ban)(ban)式(shi)的(de)(de)基礎知識。
在我們(men)開始學(xue)習(xi)平面版(ban)式基(ji)礎之前(qian)，我們(men)先來(lai)講一下(xia)簡明平面構成(cheng)原理。平面構成(cheng)是運(yun)用點、線、面和其他技法來(lai)構成(cheng)基(ji)本元素的(de)(de)學(xue)習(xi)方法。它是在我們(men)工作之前(qian)必須(xu)要學(xue)會的(de)(de)視(shi)覺語(yu)言。以下(xia)的(de)(de)內容(rong)希望如(ru)果您有(you)時間進行(xing)練習(xi)，邊練邊攝取(qu)知識(shi)效果才(cai)能更(geng)好。
點是(shi)(shi)組成(cheng)平面構成(cheng)的基礎要素。點可(ke)(ke)以(yi)(yi)是(shi)(shi)不(bu)同大(da)小的；可(ke)(ke)以(yi)(yi)是(shi)(shi)不(bu)同疏(shu)密的；可(ke)(ke)以(yi)(yi)是(shi)(shi)不(bu)同虛實的。可(ke)(ke)以(yi)(yi)是(shi)(shi)整齊的點，也可(ke)(ke)以(yi)(yi)是(shi)(shi)隨意排列(lie)的點。在一個畫(hua)面上也可(ke)(ke)以(yi)(yi)有大(da)小、疏(shu)密、虛實、整齊和(he)隨意對(dui)比的，對(dui)比就會(hui)產生韻律感。僅僅依靠點來構建(jian)畫(hua)面時，我們會(hui)想方設法地讓畫(hua)面豐富，體會(hui)點的變化。
線(xian)(xian)有(you)哪些呢？垂直(zhi)線(xian)(xian)、水平(ping)線(xian)(xian)、斜線(xian)(xian)、曲(qu)線(xian)(xian)等。垂直(zhi)和(he)水平(ping)都會(hui)(hui)有(you)穩定(ding)的感(gan)覺，斜線(xian)(xian)會(hui)(hui)更加(jia)(jia)有(you)沖擊力，曲(qu)線(xian)(xian)會(hui)(hui)感(gan)受更加(jia)(jia)柔和(he)。由(you)不(bu)(bu)同粗細、不(bu)(bu)同韻(yun)律的線(xian)(xian)條組合，作(zuo)品(pin)將更加(jia)(jia)有(you)視覺引導的效(xiao)果(guo)。嘗(chang)試只用線(xian)(xian)條構(gou)建一(yi)個畫面，你會(hui)(hui)體會(hui)(hui)到不(bu)(bu)一(yi)樣的視覺感(gan)受。
面(mian)的(de)(de)種(zhong)類有(you)不(bu)規則形(xing)狀和幾(ji)(ji)何(he)(he)形(xing)狀兩種(zhong)。在(zai)(zai)《紀念碑谷》游戲(xi)中(zhong)有(you)個詞叫做「神圣幾(ji)(ji)何(he)(he)」，我非常(chang)的(de)(de)喜歡。幾(ji)(ji)何(he)(he)圖形(xing)真的(de)(de)是(shi)很(hen)神奇(qi)的(de)(de)存在(zai)(zai)，幾(ji)(ji)何(he)(he)形(xing)是(shi)可(ke)以(yi)用數學(xue)表(biao)達出來的(de)(de)，也是(shi)我們在(zai)(zai)初中(zhong)時就開始學(xue)習的(de)(de)。比如三角形(xing)、圓形(xing)、矩形(xing)、正方形(xing)、橢(tuo)圓等。這些幾(ji)(ji)何(he)(he)形(xing)在(zai)(zai)視覺上是(shi)非常(chang)令人(ren)感覺舒適的(de)(de)，如果你在(zai)(zai)創作(zuo)時沒有(you)靈(ling)感時，可(ke)以(yi)從幾(ji)(ji)何(he)(he)形(xing)中(zhong)尋(xun)求靈(ling)感。不(bu)規則形(xing)狀其實(shi)也可(ke)以(yi)分解成不(bu)同(tong)的(de)(de)幾(ji)(ji)何(he)(he)形(xing)的(de)(de)組合。
平面構(gou)(gou)(gou)成(cheng)(cheng)的(de)形(xing)式(shi)(shi)有重復(fu)構(gou)(gou)(gou)成(cheng)(cheng)形(xing)式(shi)(shi)、近似(si)構(gou)(gou)(gou)成(cheng)(cheng)形(xing)式(shi)(shi)、漸變(bian)構(gou)(gou)(gou)成(cheng)(cheng)形(xing)式(shi)(shi)、發射構(gou)(gou)(gou)成(cheng)(cheng)形(xing)式(shi)(shi)、密集(ji)構(gou)(gou)(gou)成(cheng)(cheng)形(xing)式(shi)(shi)、對(dui)比構(gou)(gou)(gou)成(cheng)(cheng)形(xing)式(shi)(shi)、肌理構(gou)(gou)(gou)成(cheng)(cheng)形(xing)式(shi)(shi)等，如果平時您發現(xian)在工作中(zhong)排版的(de)圖形(xing)能力比較(jiao)差，那么建議(yi)您了解一下(xia)構(gou)(gou)(gou)成(cheng)(cheng)形(xing)式(shi)(shi)加(jia)以練習。
重(zhong)復(fu)(fu)(fu)構成(cheng)(cheng)形(xing)(xing)式就(jiu)是(shi)用一(yi)個基(ji)本的(de)元素在一(yi)定的(de)形(xing)(xing)式下(xia)重(zhong)復(fu)(fu)(fu)排(pai)列，排(pai)列對方向和(he)疏密會產(chan)生一(yi)種(zhong)秩序的(de)美感(gan)。談(tan)起重(zhong)復(fu)(fu)(fu)構成(cheng)(cheng)，我想順便介紹一(yi)下(xia)重(zhong)復(fu)(fu)(fu)構成(cheng)(cheng)的(de)兩種(zhong)方式：第一(yi)種(zhong)：二(er)方連(lian)續(xu)(xu)(xu)。二(er)方連(lian)續(xu)(xu)(xu)是(shi)圖案的(de)一(yi)種(zhong)組(zu)織方法(fa)。二(er)方連(lian)續(xu)(xu)(xu)是(shi)由一(yi)個單(dan)(dan)位(wei)紋(wen)樣向上下(xia)或左右兩個方向反復(fu)(fu)(fu)連(lian)續(xu)(xu)(xu)而形(xing)(xing)成(cheng)(cheng)的(de)紋(wen)樣。第二(er)種(zhong)：四(si)方連(lian)續(xu)(xu)(xu)，是(shi)由幾個紋(wen)樣組(zu)成(cheng)(cheng)一(yi)個單(dan)(dan)位(wei)向四(si)周重(zhong)復(fu)(fu)(fu)地連(lian)續(xu)(xu)(xu)和(he)延伸擴展(zhan)而成(cheng)(cheng)的(de)圖案形(xing)(xing)式。
近似構(gou)成(cheng)形(xing)(xing)式(shi)是使用相似的(de)元素進行構(gou)成(cheng)的(de)一(yi)種方式(shi)。近似構(gou)成(cheng)講求(qiu)在統一(yi)中帶有變化(hua)。設計上采用基本(ben)(ben)形(xing)(xing)狀之間相加相減(jian)求(qiu)得近似的(de)基本(ben)(ben)形(xing)(xing)。基本(ben)(ben)形(xing)(xing)類似的(de)構(gou)成(cheng)形(xing)(xing)式(shi)就是近似構(gou)成(cheng)形(xing)(xing)式(shi)。總結來說就是看著(zhu)一(yi)樣實則要(yao)有變化(hua)。
漸變(bian)構成(cheng)形式是(shi)把基本元素的大小、方(fang)向、虛實、色(se)彩(cai)等關系(xi)進行漸次變(bian)化(hua)(hua)排列的構成(cheng)形式。漸變(bian)可以(yi)是(shi)通過顏色(se)、方(fang)向、虛實的變(bian)化(hua)(hua)也可以(yi)是(shi)通過外形的變(bian)化(hua)(hua)來完成(cheng)，不一定(ding)是(shi)我(wo)們通常(chang)理解的顏色(se)漸變(bian)。
發射構成形式(shi)是以一個(ge)點或多個(ge)點為中心(xin)(xin)向(xiang)周圍(wei)發射擴散等效(xiao)果，就會(hui)具有較(jiao)強的(de)動感及節奏感。首先我(wo)們需要有骨(gu)骼線。骨(gu)骼線就是我(wo)們畫(hua)面走向(xiang)的(de)一個(ge)看不(bu)見的(de)線索(suo)。其次我(wo)們可以選(xuan)擇使用離心(xin)(xin)式(shi)、向(xiang)心(xin)(xin)式(shi)、同(tong)心(xin)(xin)式(shi)幾種發射方法來設計。
特(te)異構成形式是在整(zheng)體畫面(mian)都有(you)(you)規律有(you)(you)固定形態的狀況中進行(xing)小部(bu)分(fen)的變異以突破單(dan)調畫面(mian)的形式。特(te)異構成的部(bu)分(fen)可以用(yong)顏色、形狀、線條(tiao)等方(fang)法來做。很多(duo)運營類設計也會應用(yong)到特(te)異構成形式。
密(mi)集構成(cheng)就是在畫(hua)面(mian)中使用大量重復密(mi)集的元素來給(gei)觀(guan)察(cha)者(zhe)(zhe)一種(zhong)壓迫感和與(yu)留白(bai)的對比，密(mi)集構成(cheng)很容(rong)易給(gei)觀(guan)察(cha)者(zhe)(zhe)造成(cheng)震撼和心(xin)理壓力。
我們做對(dui)比構成(cheng)的時候，可以(yi)使用元(yuan)素的形狀(zhuang)、大小、方向、位置、色彩、肌理等進(jin)行對(dui)比，以(yi)及(ji)重心、空間(jian)、有與(yu)無、虛與(yu)實的關(guan)系元(yuan)素的對(dui)比。對(dui)比會產生強(qiang)烈(lie)的反差和感官刺激。
視(shi)覺可理解的物體表(biao)面圖(tu)案的紋理，我們(men)就叫做肌理，以肌理為構成的設計，就是肌理構成。我們(men)在做肌理構成時如果用Photoshop的時候會非常的方便，可以用圖(tu)案、貼圖(tu)等(deng)方式。
在平面設計(ji)的(de)(de)(de)過程中(zhong)(zhong)，我們(men)其實是在組織圖片(pian)、文字、按鈕、圖標(biao)等(deng)最小元素的(de)(de)(de)信息架構。這些(xie)元素是畫面中(zhong)(zhong)的(de)(de)(de)最小單位，它們(men)本(ben)身(shen)就(jiu)附著著某個(ge)信息，比如(ru)作品的(de)(de)(de)標(biao)題、一(yi)個(ge)功能、去展覽的(de)(de)(de)地址、一(yi)個(ge)景點的(de)(de)(de)照片(pian)等(deng)。這些(xie)排版中(zhong)(zhong)的(de)(de)(de)元素需要(yao)我們(men)放在畫面中(zhong)(zhong)，不可(ke)以因(yin)為好不好看而刪去必要(yao)的(de)(de)(de)信息，然后根據(ju)他們(men)的(de)(de)(de)重(zhong)要(yao)性(xing)進行(xing)排列組合。
字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)是(shi)(shi)排版中(zhong)(zhong)最重要(yao)的(de)(de)(de)(de)元素，也是(shi)(shi)最直(zhi)接的(de)(de)(de)(de)信息傳(chuan)達方式(shi)。一般來說設(she)(she)計(ji)師(shi)通(tong)常需要(yao)了解的(de)(de)(de)(de)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)有(you)(you)中(zhong)(zhong)文(wen)和西(xi)(xi)(xi)文(wen)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)兩種(zhong)(zhong)：西(xi)(xi)(xi)文(wen)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)由(you)來已久，由(you)最早的(de)(de)(de)(de)羅馬(ma)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)到我(wo)們現(xian)在(zai)(zai)(zai)蘋果手機(ji)里(li)的(de)(de)(de)(de)SFUI字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)，西(xi)(xi)(xi)文(wen)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)經歷了許多的(de)(de)(de)(de)設(she)(she)計(ji)上的(de)(de)(de)(de)變(bian)革。西(xi)(xi)(xi)文(wen)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)可(ke)以分為(wei)：羅馬(ma)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)或襯線(xian)(xian)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)（roman，serif）、無襯線(xian)(xian)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)（sanserif）、手寫體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)（s cript）、雕刻字(zi)(zi)(zi)(zi)(zi)(zi)系(xi)（glayphic）、典籍體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)字(zi)(zi)(zi)(zi)(zi)(zi)系(xi)（Classical）、裝(zhuang)飾體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)字(zi)(zi)(zi)(zi)(zi)(zi)系(xi)（decorative）、展示體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)字(zi)(zi)(zi)(zi)(zi)(zi)系(xi)（Display）、當代字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)字(zi)(zi)(zi)(zi)(zi)(zi)系(xi)（Contemporary）、符號(hao)字(zi)(zi)(zi)(zi)(zi)(zi)系(xi)（Symbol）等(deng)。中(zhong)(zhong)文(wen)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)由(you)于(yu)起(qi)先版權(quan)不(bu)夠重視其(qi)實并沒有(you)(you)西(xi)(xi)(xi)文(wen)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)發展得順利，數量上也遠遠落(luo)后于(yu)西(xi)(xi)(xi)文(wen)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)甚至是(shi)(shi)日文(wen)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)。好在(zai)(zai)(zai)中(zhong)(zhong)國設(she)(she)計(ji)正(zheng)在(zai)(zai)(zai)崛起(qi)，在(zai)(zai)(zai)一大(da)批設(she)(she)計(ji)師(shi)前赴后繼的(de)(de)(de)(de)努力中(zhong)(zhong)，中(zhong)(zhong)文(wen)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)的(de)(de)(de)(de)數量正(zheng)在(zai)(zai)(zai)呈指數級別(bie)增加(jia)。中(zhong)(zhong)文(wen)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)分為(wei)三種(zhong)(zhong)：第一種(zhong)(zhong)是(shi)(shi)黑體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)（筆(bi)畫(hua)上沒有(you)(you)裝(zhuang)飾的(de)(de)(de)(de)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)）。黑體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)也有(you)(you)不(bu)同(tong)的(de)(de)(de)(de)具體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)如蘋方、微(wei)(wei)軟(ruan)雅黑、思源等(deng)；第二種(zhong)(zhong)是(shi)(shi)由(you)書法作品(pin)演變(bian)來的(de)(de)(de)(de)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)如從宋(song)代活字(zi)(zi)(zi)(zi)(zi)(zi)印刷而來的(de)(de)(de)(de)宋(song)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)（對了，日本因為(wei)誤解原因將宋(song)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)叫做明(ming)朝體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)）、楷體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)、仿宋(song)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)、行楷、隸(li)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)、魏體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)、舒體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)、顏體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)以及(ji)鋼(gang)筆(bi)書寫的(de)(de)(de)(de)字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)；第三種(zhong)(zhong)是(shi)(shi)美術字(zi)(zi)(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)，比如綜藝體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)、美黑體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)、水柱體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)、娃娃體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)等(deng)。
這里我引用(yong)了(le)前(qian)端工程(cheng)師在CSS樣(yang)式表（一(yi)(yi)種用(yong)來表述網頁樣(yang)式的(de)(de)代碼）中的(de)(de)族(zu)(zu)(zu)類(lei)概念(nian)。常(chang)見(jian)的(de)(de)族(zu)(zu)(zu)類(lei)有五種：襯(chen)線(xian)(xian)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)（serif）、非襯(chen)線(xian)(xian)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)（sans-serif）、手(shou)寫體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)（cursive）、夢幻(huan)字(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)族(zu)(zu)(zu)（fantasy）、等(deng)寬字(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)族(zu)(zu)(zu)（monospace）。襯(chen)線(xian)(xian)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)的(de)(de)特點就(jiu)是(shi)筆(bi)(bi)畫(hua)結尾處有裝(zhuang)飾的(de)(de)處理，比如(ru)我們熟(shu)悉的(de)(de)Times New Roman、Georgia、宋(song)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)等(deng)。非襯(chen)線(xian)(xian)字(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)粗細比較(jiao)均勻(yun)，比較(jiao)現代并且在縮小的(de)(de)情況下依(yi)舊保持了(le)可讀性(xing)。非襯(chen)線(xian)(xian)字(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)如(ru)Arial、Helvatica、幼圓、楷體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)等(deng)。手(shou)寫字(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)族(zu)(zu)(zu)就(jiu)是(shi)由手(shou)寫而(er)產生的(de)(de)字(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)，比如(ru)迷你簡(jian)黃草、Caflisch s cript等(deng)。夢幻(huan)字(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)族(zu)(zu)(zu)聽上去稍顯(xian)非主流(liu)，但是(shi)也是(shi)字(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)中不可忽(hu)視的(de)(de)一(yi)(yi)支力量(liang)。常(chang)見(jian)的(de)(de)夢幻(huan)字(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)族(zu)(zu)(zu)有WingDings、WingDings 2等(deng)。等(deng)寬字(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)族(zu)(zu)(zu)將(jiang)西(xi)文(wen)的(de)(de)二(er)十六(liu)個字(zi)(zi)(zi)(zi)母(mu)全(quan)部變成等(deng)寬，這樣(yang)做的(de)(de)好處就(jiu)是(shi)排版大(da)大(da)地輕松(song)了(le)。常(chang)見(jian)的(de)(de)等(deng)寬字(zi)(zi)(zi)(zi)族(zu)(zu)(zu)有Courier、Prestige等(deng)。總體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)來說字(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)的(de)(de)族(zu)(zu)(zu)類(lei)是(shi)襯(chen)線(xian)(xian)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)和非襯(chen)線(xian)(xian)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)兩個大(da)類(lei)，大(da)家可以簡(jian)潔地記憶(yi)：襯(chen)線(xian)(xian)就(jiu)是(shi)筆(bi)(bi)畫(hua)處有裝(zhuang)飾的(de)(de)字(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)族(zu)(zu)(zu)，非襯(chen)線(xian)(xian)就(jiu)是(shi)筆(bi)(bi)畫(hua)較(jiao)為相同粗細的(de)(de)字(zi)(zi)(zi)(zi)體(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)(ti)族(zu)(zu)(zu)。
一個(ge)族(zu)類下面是(shi)不(bu)同的(de)字(zi)(zi)(zi)體(ti)，然而一個(ge)字(zi)(zi)(zi)體(ti)又可能有(you)好(hao)幾個(ge)字(zi)(zi)(zi)族(zu)。字(zi)(zi)(zi)體(ti)文件中通(tong)(tong)常(chang)(chang)會包含(han)幾個(ge)字(zi)(zi)(zi)族(zu)，如果(guo)你安裝了(le)Helvetica，在(zai)Photoshop中你會發(fa)現字(zi)(zi)(zi)體(ti)選擇器下包含(han)了(le)三(san)十多(duo)個(ge)前(qian)綴是(shi)Helvetica的(de)字(zi)(zi)(zi)族(zu)。原因(yin)很(hen)(hen)簡(jian)單，字(zi)(zi)(zi)體(ti)設(she)(she)計師除了(le)設(she)(she)計從(cong)A到Z的(de)大(da)小寫字(zi)(zi)(zi)體(ti)、從(cong)0到9的(de)數(shu)字(zi)(zi)(zi)、標點符號后，還為(wei)我們設(she)(she)計了(le)同樣字(zi)(zi)(zi)體(ti)的(de)不(bu)同族(zu)類來(lai)(lai)協助我們在(zai)不(bu)同地使用(yong)場(chang)景下表(biao)達合適(shi)的(de)意思。字(zi)(zi)(zi)族(zu)一般有(you)：正(zheng)常(chang)(chang)（Regular）、窄體(ti)（Narrow）、斜體(ti)（Italic）、粗(cu)體(ti)（Bold）、粗(cu)體(ti)斜體(ti)（Bold Ltalic）、黑(hei)體(ti)（Black）等等。雖然字(zi)(zi)(zi)體(ti)的(de)字(zi)(zi)(zi)族(zu)有(you)多(duo)有(you)少，但是(shi)一般都具有(you)正(zheng)常(chang)(chang)、斜體(ti)、粗(cu)體(ti)、粗(cu)體(ti)斜體(ti)四種基本字(zi)(zi)(zi)族(zu)。應用(yong)場(chang)景上：粗(cu)體(ti)通(tong)(tong)常(chang)(chang)表(biao)示強調(diao)、斜體(ti)表(biao)示引用(yong)、正(zheng)常(chang)(chang)是(shi)正(zheng)文。很(hen)(hen)多(duo)時候我會發(fa)現很(hen)(hen)多(duo)設(she)(she)計師亂用(yong)斜體(ti)，其實斜體(ti)的(de)設(she)(she)計并不(bu)是(shi)為(wei)了(le)好(hao)看，而是(shi)在(zai)書中代表(biao)本段(duan)文字(zi)(zi)(zi)來(lai)(lai)自引用(yong)另一個(ge)著作的(de)含(han)義。
舉個使(shi)用斜體的(de)(de)例子：「設(she)計(ji)的(de)(de)作用在于(yu)尋(xun)找功能(neng)和社會間(jian)的(de)(de)接點，在功能(neng)足以說明一(yi)切的(de)(de)前提(ti)下，裝飾(shi)成分(fen)是(shi)(shi)可以節(jie)制的(de)(de)，如何把握節(jie)制的(de)(de)度是(shi)(shi)考(kao)驗一(yi)個設(she)計(ji)師是(shi)(shi)否成熟的(de)(de)標尺。」 -《設(she)計(ji)的(de)(de)覺醒》田中一(yi)光(guang)
一(yi)個(ge)字(zi)(zi)(zi)族中(zhong)的(de)(de)(de)(de)任(ren)何一(yi)個(ge)字(zi)(zi)(zi)體(ti)也(ye)(ye)(ye)會有不同的(de)(de)(de)(de)筆畫(hua)粗(cu)(cu)(cu)細(xi)變(bian)(bian)化(hua)(hua)。這(zhe)(zhe)種(zhong)(zhong)粗(cu)(cu)(cu)細(xi)變(bian)(bian)化(hua)(hua)的(de)(de)(de)(de)字(zi)(zi)(zi)體(ti)稱之為字(zi)(zi)(zi)重（Font Weight），字(zi)(zi)(zi)族后面的(de)(de)(de)(de)字(zi)(zi)(zi)重選項如(ru)(ru)「Thin」、「Light」「Regular」「Book」「Bold」「Black」「Heavy」都是(shi)(shi)一(yi)個(ge)字(zi)(zi)(zi)族下的(de)(de)(de)(de)不同粗(cu)(cu)(cu)細(xi)變(bian)(bian)化(hua)(hua)。實際上，國際標準 ISO組織(zhi)規(gui)定了(le)九種(zhong)(zhong)字(zi)(zi)(zi)重，但(dan)是(shi)(shi)由于(yu)有些字(zi)(zi)(zi)重不常(chang)見(jian)，我(wo)們(men)就(jiu)記憶以(yi)上七種(zhong)(zhong)字(zi)(zi)(zi)重即可。中(zhong)文(wen)(wen)(wen)字(zi)(zi)(zi)體(ti)也(ye)(ye)(ye)有相應的(de)(de)(de)(de)字(zi)(zi)(zi)重，如(ru)(ru)「極細(xi)」、「細(xi)」、「標準」、「常(chang)規(gui)」、「中(zhong)等」、「粗(cu)(cu)(cu)」、「特粗(cu)(cu)(cu)」。在(zai)使(shi)用場景中(zhong)，如(ru)(ru)果我(wo)們(men)需要(yao)強(qiang)調(diao)一(yi)個(ge)內容，比(bi)如(ru)(ru)標題時，一(yi)般(ban)會用粗(cu)(cu)(cu)體(ti)；如(ru)(ru)果在(zai)正文(wen)(wen)(wen)的(de)(de)(de)(de)設計中(zhong)，那(nei)么就(jiu)會用常(chang)規(gui)或標準等字(zi)(zi)(zi)體(ti)。英文(wen)(wen)(wen)也(ye)(ye)(ye)類似，這(zhe)(zhe)些字(zi)(zi)(zi)重是(shi)(shi)為了(le)我(wo)們(men)突出(chu)文(wen)(wen)(wen)字(zi)(zi)(zi)使(shi)用的(de)(de)(de)(de)。注意一(yi)點：在(zai)PS中(zhong)我(wo)們(men)也(ye)(ye)(ye)可以(yi)通過(guo)字(zi)(zi)(zi)體(ti)面板給文(wen)(wen)(wen)字(zi)(zi)(zi)人工加(jia)粗(cu)(cu)(cu)，這(zhe)(zhe)種(zhong)(zhong)加(jia)粗(cu)(cu)(cu)如(ru)(ru)果變(bian)(bian)成(cheng)形狀時會提示(shi)「該(gai)字(zi)(zi)(zi)體(ti)使(shi)用了(le)加(jia)粗(cu)(cu)(cu)樣(yang)式(shi)，不能變(bian)(bian)換」，所(suo)以(yi)可見(jian)這(zhe)(zhe)種(zhong)(zhong)人工加(jia)粗(cu)(cu)(cu)是(shi)(shi)有一(yi)點缺陷的(de)(de)(de)(de)。
任何字(zi)體(ti)都具(ju)有自身的(de)氣質。比如(ru)一(yi)款(kuan)圓(yuan)角萌萌的(de)字(zi)體(ti)會給(gei)(gei)(gei)人溫柔調皮的(de)感(gan)(gan)覺；而邊角鋒(feng)利的(de)字(zi)體(ti)會給(gei)(gei)(gei)人一(yi)種強(qiang)硬的(de)感(gan)(gan)覺；書法字(zi)體(ti)會讓用(yong)戶(hu)覺得(de)充滿中國風和(he)個性；瘦長纖(xian)細的(de)字(zi)體(ti)會給(gei)(gei)(gei)人一(yi)種未來感(gan)(gan)等(deng)等(deng)。每(mei)個字(zi)體(ti)都具(ju)有一(yi)定(ding)的(de)感(gan)(gan)受，這與色(se)彩心理(li)(li)學中每(mei)種顏色(se)帶給(gei)(gei)(gei)人不同的(de)感(gan)(gan)覺一(yi)樣，字(zi)體(ti)的(de)外形和(he)筆畫也(ye)會給(gei)(gei)(gei)人一(yi)些心理(li)(li)暗(an)示。
全角(jiao)指一個(ge)字符(fu)占(zhan)用(yong)兩個(ge)標準字符(fu)位置。中文字符(fu)、全角(jiao)的(de)英文字符(fu)、國標GB2312-80中的(de)圖形符(fu)號、特殊字符(fu)都(dou)是全角(jiao)字符(fu)。半(ban)角(jiao)指字符(fu)占(zhan)用(yong)一個(ge)標準的(de)字符(fu)位置。
通常的(de)(de)英(ying)(ying)文字母、數(shu)字鍵、符號(hao)(hao)鍵都是半角字符。半角全角主要是針對(dui)標點(dian)符號(hao)(hao)來(lai)說的(de)(de)，因為(wei)正常情況我們沒(mei)有打全角英(ying)(ying)文的(de)(de)需(xu)求(qiu)。
半角英文 english
全(quan)角英文 ｅｎｇｌｉｓｈ
半(ban)角符號 ,.’」;:{}_+!@#$%^&*()
全角符號，＇＂；：｛｝＿＋！＠＃＄％＾＆＊（）
計算(suan)機編程基于英文(wen)，也就是半(ban)角字符(fu)。所以(yi)在編程中(zhong)符(fu)號(hao)一定都是半(ban)角的(de)，如(ru)：
name=”郗鑒”
全角符號編(bian)程就會無效，如：
name=「郗鑒」
在我們設(she)計(ji)作品(pin)時也一定要記得中文(wen)搭(da)配(pei)全角(jiao)符(fu)號，英文(wen)搭(da)配(pei)半(ban)角(jiao)符(fu)號。不要出現如「好的．」或者「ｔｈａｎｋｓ。」這樣的錯誤。全角(jiao)半(ban)角(jiao)的切換(huan)在中文(wen)輸入法(fa)下按SHIFT+空格可(ke)相(xiang)互轉換(huan)，這個(ge)知識點(dian)雖然非常(chang)基礎(chu)，但是無(wu)疑我們經常(chang)看到(dao)用錯的設(she)計(ji)。
第一，保證文字是可(ke)讀的(de)。
第二，不(bu)要在一個版面中使用三(san)種以上的(de)字(zi)體。
第三(san)，如(ru)果英文標題(ti)或(huo)單獨進行(xing)排(pai)版時(shi)(shi)，盡量全部使用(yong)大寫而非首字母(mu)大寫。中文標題(ti)或(huo)單獨進行(xing)排(pai)版時(shi)(shi)結尾不需要句(ju)號。
第四，文字之間的(de)間距(ju)在UI設(she)(she)計中一(yi)般(ban)設(she)(she)置為0，行距(ju)一(yi)般(ban)為字號本身的(de)1.5倍(bei)到2倍(bei)。但是考(kao)慮(lv)到用戶使(shi)用場景(jing)，比如(ru)用戶在地(di)(di)鐵內閱讀新聞時可(ke)能地(di)(di)鐵會(hui)出現晃的(de)情況而導致串行，就(jiu)需要我們(men)考(kao)慮(lv)增加行距(ju)。總之字間距(ju)和行距(ju)以(yi)及文字大(da)小(xiao)都要依據實際(ji)場景(jing)來決(jue)定。在UI設(she)(she)計中文字大(da)小(xiao)單位須設(she)(she)置成PX（像素），大(da)小(xiao)必須是偶數。如(ru)：24px、26px、28px等。
第五，文字(zi)閱讀需要清晰地背(bei)景(jing)區分，比如黑紙(zhi)白(bai)字(zi)和白(bai)紙(zhi)黑字(zi)原則。
第六，除非不得已(yi)盡(jin)量避免在一個(ge)版(ban)式中使用中英(ying)文(wen)混排。
第七，文本左(zuo)邊對齊(qi)同時右邊也需要對齊(qi)。可(ke)以通(tong)過PS中的段落面板設置間距組合(he)和避頭(tou)尾法則，但是有時半(ban)角符號可(ke)能會(hui)讓我(wo)們很棘手(shou)，那就要通(tong)過調整間距和空格(ge)等方式讓文本盡量對齊(qi)。
第八，中文前面需要空兩個全角字符空格(ge)，英文前面無需空格(ge)，但(dan)需要大寫。
我(wo)(wo)們(men)在一(yi)(yi)個設(she)計(ji)中一(yi)(yi)定(ding)會依靠一(yi)(yi)些配(pei)圖(tu)或(huo)者照片素(su)材來進行排版。有時我(wo)(wo)們(men)會選擇(ze)尋(xun)找素(su)材或(huo)者是自己去(qu)拍，無論如(ru)何，作品(pin)中使用(yong)的圖(tu)片一(yi)(yi)定(ding)要(yao)與(yu)整體設(she)計(ji)色(se)(se)(se)(se)(se)調相符(fu)，冷色(se)(se)(se)(se)(se)暖(nuan)色(se)(se)(se)(se)(se)中性色(se)(se)(se)(se)(se)都要(yao)符(fu)合(he)整體的色(se)(se)(se)(se)(se)調，一(yi)(yi)定(ding)是鄰近色(se)(se)(se)(se)(se)或(huo)對比色(se)(se)(se)(se)(se)等色(se)(se)(se)(se)(se)彩關系(xi)，不要(yao)因(yin)為自己的主觀放置沒有色(se)(se)(se)(se)(se)彩關系(xi)的配(pei)圖(tu)或(huo)者會抵消(xiao)畫面色(se)(se)(se)(se)(se)彩傾向的配(pei)圖(tu)。另(ling)外注意色(se)(se)(se)(se)(se)彩會產生(sheng)「水彩效果」，即兩種(zhong)(zhong)顏色(se)(se)(se)(se)(se)放在一(yi)(yi)起，如(ru)果其(qi)中一(yi)(yi)種(zhong)(zhong)是灰(hui)色(se)(se)(se)(se)(se)或(huo)者比較臟的顏色(se)(se)(se)(se)(se)，那么另(ling)一(yi)(yi)個顏色(se)(se)(se)(se)(se)在我(wo)(wo)們(men)大(da)腦(nao)中也會感覺變臟了(le)。類似于這種(zhong)(zhong)效果可以在作圖(tu)中慢慢體會。
在一個設計中，圖片與文字(zi)(zi)的(de)量應(ying)該有(you)一定的(de)對比。人天生(sheng)喜歡看圖片而(er)不是閱(yue)讀，實際上人類(lei)有(you)閱(yue)讀能力(li)的(de)歷史只有(you)幾千年(nian)，而(er)欣賞圖片的(de)能力(li)是天然的(de)。如(ru)果你的(de)需(xu)求上文字(zi)(zi)需(xu)求非(fei)常(chang)多，嘗試(shi)與需(xu)求方商討減少文字(zi)(zi)量。文字(zi)(zi)量越少，圖形化設計越多，那么視覺(jue)上這個作(zuo)品看起來就更輕松。
在平面設計中，因為最終目的(de)(de)(de)(de)(de)是(shi)(shi)印刷，對(dui)我(wo)們(men)(men)的(de)(de)(de)(de)(de)圖(tu)(tu)片尺(chi)(chi)(chi)(chi)寸(cun)(cun)沒有非常嚴格的(de)(de)(de)(de)(de)要求。但(dan)是(shi)(shi)如(ru)果(guo)我(wo)們(men)(men)是(shi)(shi)為了(le)互聯(lian)網(wang)產品的(de)(de)(de)(de)(de)設計的(de)(de)(de)(de)(de)話，可(ke)(ke)能(neng)會涉及(ji)一(yi)些需(xu)要網(wang)站(zhan)編輯直接上傳的(de)(de)(de)(de)(de)圖(tu)(tu)片，如(ru)果(guo)你的(de)(de)(de)(de)(de)尺(chi)(chi)(chi)(chi)寸(cun)(cun)不(bu)是(shi)(shi)一(yi)個固(gu)定尺(chi)(chi)(chi)(chi)寸(cun)(cun)，那么(me)可(ke)(ke)能(neng)原本網(wang)站(zhan)編輯不(bu)需(xu)要裁剪圖(tu)(tu)片而可(ke)(ke)以(yi)直接上傳的(de)(de)(de)(de)(de)工序(xu)，要因為我(wo)們(men)(men)的(de)(de)(de)(de)(de)一(yi)個尺(chi)(chi)(chi)(chi)寸(cun)(cun)變(bian)得很復雜(za)。所以(yi)請(qing)牢記以(yi)下三個尺(chi)(chi)(chi)(chi)寸(cun)(cun)：4:3，16:9，1:1。4:3的(de)(de)(de)(de)(de)原因是(shi)(shi)相(xiang)機的(de)(de)(de)(de)(de)畫(hua)幅一(yi)般(ban)是(shi)(shi)4比3，所以(yi)我(wo)們(men)(men)看到的(de)(de)(de)(de)(de)新聞客戶端的(de)(de)(de)(de)(de)圖(tu)(tu)片大多是(shi)(shi)4:3。16:9的(de)(de)(de)(de)(de)原因是(shi)(shi)視頻寬熒幕畫(hua)幅就是(shi)(shi)16:9，所以(yi)我(wo)們(men)(men)看到視頻網(wang)站(zhan)的(de)(de)(de)(de)(de)截圖(tu)(tu)一(yi)般(ban)都是(shi)(shi)直接由機器抓取的(de)(de)(de)(de)(de)圖(tu)(tu)片。1:1一(yi)般(ban)用于封(feng)面等圖(tu)(tu)片素(su)材的(de)(de)(de)(de)(de)尺(chi)(chi)(chi)(chi)寸(cun)(cun)是(shi)(shi)正方(fang)形的(de)(de)(de)(de)(de)。
任何一(yi)(yi)(yi)(yi)個(ge)(ge)(ge)設(she)計中(zhong)都需要(yao)把各個(ge)(ge)(ge)元(yuan)素(su)分級分清主次，這(zhe)(zhe)樣才(cai)能(neng)更好(hao)的抓住重(zhong)點。你(ni)可(ke)以(yi)(yi)(yi)想象自己在(zai)管理(li)著一(yi)(yi)(yi)(yi)部瑪麗蘇電視劇，這(zhe)(zhe)部劇中(zhong)誰(shui)是(shi)(shi)主角？誰(shui)是(shi)(shi)女(nv)(nv)二(er)號(hao)？誰(shui)是(shi)(shi)群演？主角需要(yao)獨立的化妝間(jian)和助(zhu)理(li)；女(nv)(nv)二(er)號(hao)可(ke)能(neng)只(zhi)有(you)一(yi)(yi)(yi)(yi)個(ge)(ge)(ge)助(zhu)理(li)；群演可(ke)能(neng)就(jiu)是(shi)(shi)整個(ge)(ge)(ge)劇里(li)的一(yi)(yi)(yi)(yi)個(ge)(ge)(ge)過客(ke)。我(wo)們的設(she)計也是(shi)(shi)如此，哪個(ge)(ge)(ge)信(xin)(xin)息是(shi)(shi)主角？哪個(ge)(ge)(ge)信(xin)(xin)息是(shi)(shi)女(nv)(nv)二(er)號(hao)？哪些(xie)元(yuan)素(su)又僅(jin)僅(jin)是(shi)(shi)群演呢？女(nv)(nv)主元(yuan)素(su)首先要(yao)站(zhan)C位(wei)（網絡流行詞(ci)，來源center）霸占畫面的中(zhong)心，然后這(zhe)(zhe)個(ge)(ge)(ge)元(yuan)素(su)要(yao)盡(jin)量(liang)突(tu)出，可(ke)以(yi)(yi)(yi)使(shi)用(yong)更鮮艷(yan)的顏色(se)、更夸張(zhang)的字重(zhong)、加邊框(kuang)等方式突(tu)出；女(nv)(nv)二(er)號(hao)信(xin)(xin)息一(yi)(yi)(yi)(yi)定(ding)不(bu)要(yao)搶了(le)女(nv)(nv)主信(xin)(xin)息的風(feng)頭，所(suo)以(yi)(yi)(yi)要(yao)和女(nv)(nv)主元(yuan)素(su)有(you)一(yi)(yi)(yi)(yi)定(ding)的對比(bi)，字號(hao)上也要(yao)小(xiao)很(hen)多，盡(jin)量(liang)讓(rang)(rang)用(yong)戶第一(yi)(yi)(yi)(yi)眼(yan)看到(dao)主要(yao)元(yuan)素(su)。而群演的元(yuan)素(su)一(yi)(yi)(yi)(yi)定(ding)要(yao)淡(dan)化，僅(jin)僅(jin)讓(rang)(rang)人感知有(you)這(zhe)(zhe)些(xie)元(yuan)素(su)就(jiu)可(ke)以(yi)(yi)(yi)了(le)，比(bi)如文字可(ke)以(yi)(yi)(yi)縮小(xiao)到(dao)剛剛能(neng)注意到(dao)，顏色(se)可(ke)以(yi)(yi)(yi)是(shi)(shi)接近背(bei)景色(se)等。那么(me)如何讓(rang)(rang)這(zhe)(zhe)些(xie)信(xin)(xin)息按照(zhao)他們的身份來排版呢？我(wo)們就(jiu)要(yao)用(yong)到(dao)CRAP原(yuan)(yuan)(yuan)則了(le)，CRAP是(shi)(shi)這(zhe)(zhe)四個(ge)(ge)(ge)原(yuan)(yuan)(yuan)則的首字母縮寫(xie)，分別是(shi)(shi)對比(bi)、重(zhong)復、對齊、親密性(xing)四個(ge)(ge)(ge)原(yuan)(yuan)(yuan)則。
在同(tong)一個(ge)視覺區(qu)域內的(de)邏輯不同(tong)的(de)元(yuan)(yuan)素(su)應該有所區(qu)別(bie)，避(bi)免視覺上(shang)相似。這樣就可以(yi)有效地區(qu)分(fen)誰是主角誰是配(pei)角了(le)。為了(le)讓(rang)主要(yao)元(yuan)(yuan)素(su)更(geng)(geng)突出，讓(rang)次要(yao)元(yuan)(yuan)素(su)更(geng)(geng)后退，我們(men)可以(yi)盡(jin)量使它們(men)的(de)顏色(se)、字體、大小、留(liu)白不同(tong)。如(ru)果兩個(ge)元(yuan)(yuan)素(su)不盡(jin)相同(tong)，請讓(rang)它們(men)截然不同(tong)。比(bi)如(ru)如(ru)果你想使用12px的(de)正文與14px的(de)標題區(qu)分(fen)明(ming)顯(xian)，不如(ru)用12px與40px進行區(qu)分(fen)反差更(geng)(geng)大，更(geng)(geng)容(rong)易區(qu)分(fen)哪個(ge)內容(rong)是需要(yao)優先瀏(liu)覽的(de)、哪個(ge)內容(rong)是次要(yao)的(de)。對比(bi)的(de)方式有以(yi)下幾種(zhong)：
色彩對比
在我們排版時首(shou)先要產生(sheng)對(dui)比效果(guo)(guo)的(de)(de)就是(shi)(shi)背景(jing)和(he)文(wen)(wen)字(zi)了。文(wen)(wen)字(zi)是(shi)(shi)第一(yi)(yi)(yi)閱(yue)(yue)讀元素，背景(jing)和(he)文(wen)(wen)字(zi)如果(guo)(guo)顏(yan)色很接近，那么(me)就不容易區分出來(lai)引發注意了。一(yi)(yi)(yi)般(ban)來(lai)說在很多媒介的(de)(de)設(she)計中我們習慣了白(bai)(bai)紙黑(hei)(hei)字(zi)，即(ji)白(bai)(bai)色背景(jing)和(he)黑(hei)(hei)色文(wen)(wen)字(zi)。我指的(de)(de)不僅是(shi)(shi)純黑(hei)(hei)和(he)純白(bai)(bai)，也包括其(qi)他類似(si)明度顏(yan)色的(de)(de)對(dui)比。黑(hei)(hei)紙白(bai)(bai)字(zi)是(shi)(shi)另一(yi)(yi)(yi)個(ge)選擇，深(shen)色背景(jing)和(he)淺色文(wen)(wen)字(zi)的(de)(de)搭配其(qi)實不適合大量閱(yue)(yue)讀，如果(guo)(guo)你的(de)(de)作品信息不多是(shi)(shi)沒有(you)問題的(de)(de)，但(dan)是(shi)(shi)如果(guo)(guo)用(yong)戶閱(yue)(yue)讀很久(jiu)黑(hei)(hei)紙白(bai)(bai)字(zi)的(de)(de)界面，就會產生(sheng)視疲(pi)勞(lao)（比如再次(ci)盯著白(bai)(bai)色的(de)(de)墻的(de)(de)時候(hou)文(wen)(wen)字(zi)還會出現等）不舒(shu)服的(de)(de)感受。當(dang)然一(yi)(yi)(yi)切(qie)取決(jue)于用(yong)戶使用(yong)場(chang)景(jing)，如果(guo)(guo)我們的(de)(de)設(she)計被應用(yong)在夜(ye)晚等較暗(an)的(de)(de)環境(jing)，黑(hei)(hei)紙白(bai)(bai)字(zi)更利于閱(yue)(yue)讀。總之，不管你的(de)(de)設(she)計采用(yong)橙藍、黑(hei)(hei)白(bai)(bai)、藍紫配色，一(yi)(yi)(yi)定要記住文(wen)(wen)字(zi)和(he)背景(jing)的(de)(de)對(dui)比關系。
除(chu)了文(wen)字之外，圖(tu)標(biao)(biao)和(he)其他裝飾信息的(de)(de)色彩對比也是(shi)非常重要的(de)(de)。輔助信息或者輔助功(gong)能的(de)(de)圖(tu)標(biao)(biao)盡量淡化以突出(chu)主要功(gong)能和(he)圖(tu)標(biao)(biao)；重要功(gong)能如(ru)訂(ding)單等按鈕(niu)則需要突出(chu)和(he)醒目。色彩對比是(shi)設計(ji)中一個非常常見的(de)(de)手法。
大小對(dui)比
大小對比是(shi)(shi)指(zhi)文(wen)字、圖片、圖標(biao)(biao)等(deng)元素為了(le)區分(fen)重(zhong)要性(xing)采用(yong)的區分(fen)方法。比如(ru)(ru)兩(liang)行(xing)文(wen)字：郗鑒和相聲演員，同(tong)屬文(wen)字但權重(zhong)不同(tong)：第二行(xing)的文(wen)字用(yong)于解釋第一行(xing)的內容(rong)，所以(yi)第二行(xing)內容(rong)應(ying)該(gai)通過大小和顏色變成(cheng)次(ci)級(ji)，讓(rang)用(yong)戶閱讀時分(fen)清(qing)主次(ci)。與此類似(si)，比如(ru)(ru)音樂播(bo)放(fang)(fang)界面中(zhong)的三個按鈕(niu)(niu)一般并排(pai)放(fang)(fang)在一起(qi)：上一首歌、播(bo)放(fang)(fang)、下一首歌，哪(na)個應(ying)該(gai)更大呢？當(dang)然(ran)是(shi)(shi)常用(yong)的、重(zhong)要的功能-播(bo)放(fang)(fang)按鈕(niu)(niu)。當(dang)然(ran)如(ru)(ru)果(guo)圖標(biao)(biao)同(tong)屬一個級(ji)別也應(ying)該(gai)放(fang)(fang)在一個尺(chi)寸的級(ji)別上。
如(ru)(ru)果相同(tong)(tong)的(de)(de)內(nei)(nei)容（如(ru)(ru)標題等(deng)）屬于同(tong)(tong)一(yi)(yi)個(ge)邏輯，可(ke)(ke)使它們(men)(men)的(de)(de)顏色(se)、字(zi)體(ti)、大小、留白保持相同(tong)(tong)。這樣可(ke)(ke)以(yi)(yi)增加條理(li)性(xing)和加強(qiang)設計的(de)(de)統一(yi)(yi)性(xing)。這個(ge)原則(ze)看似簡單，但是(shi)新手很容易犯(fan)這個(ge)問題，所以(yi)(yi)再次提醒，一(yi)(yi)個(ge)級別的(de)(de)信息(xi)盡量使用(yong)(yong)一(yi)(yi)種(zhong)(zhong)(zhong)設計來保持用(yong)(yong)戶的(de)(de)認(ren)知(zhi)，避免(mian)用(yong)(yong)戶認(ren)為(wei)(wei)是(shi)另一(yi)(yi)種(zhong)(zhong)(zhong)信息(xi)分類(lei)。這就是(shi)重(zhong)(zhong)復原則(ze)。在(zai)一(yi)(yi)個(ge)屬性(xing)或邏輯單元里的(de)(de)內(nei)(nei)容應該盡可(ke)(ke)能地使用(yong)(yong)重(zhong)(zhong)復的(de)(de)顏色(se)、大小、間距。我(wo)們(men)(men)來看，一(yi)(yi)個(ge)注(zhu)冊(ce)頁面可(ke)(ke)含有：注(zhu)冊(ce)、登錄、忘記密碼(ma)、跳過等(deng)內(nei)(nei)容。如(ru)(ru)果我(wo)們(men)(men)把登錄頁面分為(wei)(wei)四個(ge)屬性(xing)，那(nei)么(me)(me)可(ke)(ke)能我(wo)們(men)(men)需要四種(zhong)(zhong)(zhong)字(zi)體(ti)或四個(ge)不同(tong)(tong)的(de)(de)區(qu)域。但如(ru)(ru)果我(wo)們(men)(men)把它們(men)(men)分為(wei)(wei)兩類(lei)呢(ni)？注(zhu)冊(ce)和其他。那(nei)么(me)(me)同(tong)(tong)一(yi)(yi)個(ge)分類(lei)就可(ke)(ke)以(yi)(yi)重(zhong)(zhong)復使用(yong)(yong)一(yi)(yi)種(zhong)(zhong)(zhong)字(zi)體(ti)了。看上去(qu)就不會(hui)很亂了。在(zai)重(zhong)(zhong)復原則(ze)下(xia)(xia)，用(yong)(yong)戶會(hui)因為(wei)(wei)視覺慣性(xing)變成尋找線索的(de)(de)「僵尸」，會(hui)根據線索而順暢地瀏覽下(xia)(xia)去(qu)。
任何內容在版面上都(dou)(dou)盡量應該上下(xia)左右對(dui)齊(qi)。隨意擺放絕對(dui)是(shi)錯誤的(de)。這一點一定要和大家多次強調，比如一個元(yuan)素(su)上下(xia)左右的(de)間(jian)距都(dou)(dou)要是(shi)一樣的(de)。大家看到網頁和app設計(ji)之(zhi)中(zhong)經常會有間(jian)距和留白(bai)，留白(bai)和對(dui)齊(qi)都(dou)(dou)是(shi)我們(men)在設計(ji)時(shi)需要考(kao)量的(de)，留白(bai)不是(shi)隨意的(de)。
在邏(luo)輯上(shang)有關系(xi)的兩(liang)(liang)個(ge)(ge)元素應該盡量放在一起(qi)。兩(liang)(liang)個(ge)(ge)視(shi)覺(jue)元素在一起(qi)就會變成(cheng)一個(ge)(ge)視(shi)覺(jue)單(dan)元。比如注冊頁面中的登(deng)錄視(shi)覺(jue)單(dan)元是由輸(shu)入表單(dan)和(he)登(deng)錄按鈕組成(cheng)的。相同的內容，如小(xiao)標題等，屬于(yu)同一個(ge)(ge)邏(luo)輯。可使(shi)它們的顏色(se)、字(zi)體、大小(xiao)、留白保持相同，這樣可以增(zeng)加條理性(xing)和(he)加強(qiang)設計(ji)的統一性(xing)。
左(zuo)(zuo)到右(you)(you)閱(yue)(yue)讀(du)：從(cong)左(zuo)(zuo)到右(you)(you)是受現代社會(hui)影響(xiang)后天影響(xiang)我(wo)(wo)們(men)(men)(men)(men)的(de)(de)(de)(de)一(yi)種習(xi)慣。我(wo)(wo)們(men)(men)(men)(men)看(kan)一(yi)個(ge)比(bi)(bi)較(jiao)大面(mian)積的(de)(de)(de)(de)設計時也(ye)(ye)會(hui)從(cong)左(zuo)(zuo)到右(you)(you)依(yi)次(ci)(ci)閱(yue)(yue)讀(du)，這(zhe)也(ye)(ye)就是為什么網站的(de)(de)(de)(de)logo都在(zai)(zai)左(zuo)(zuo)上角。從(cong)上到下(xia)閱(yue)(yue)讀(du)：我(wo)(wo)們(men)(men)(men)(men)閱(yue)(yue)讀(du)作品時也(ye)(ye)是從(cong)上到下(xia)依(yi)次(ci)(ci)閱(yue)(yue)讀(du)，所以重(zhong)(zhong)(zhong)要的(de)(de)(de)(de)內容一(yi)定(ding)在(zai)(zai)上面(mian)，按(an)優先(xian)級(ji)來排列。從(cong)大到小閱(yue)(yue)讀(du)：我(wo)(wo)們(men)(men)(men)(men)的(de)(de)(de)(de)視(shi)覺(jue)(jue)也(ye)(ye)是比(bi)(bi)較(jiao)調皮的(de)(de)(de)(de)，如(ru)(ru)果一(yi)個(ge)元(yuan)(yuan)(yuan)素很大，我(wo)(wo)們(men)(men)(men)(men)也(ye)(ye)會(hui)首先(xian)去注意大的(de)(de)(de)(de)元(yuan)(yuan)(yuan)素再依(yi)次(ci)(ci)看(kan)中(zhong)(zhong)(zhong)等(deng)和小的(de)(de)(de)(de)元(yuan)(yuan)(yuan)素。從(cong)重(zhong)(zhong)(zhong)到輕：元(yuan)(yuan)(yuan)素的(de)(de)(de)(de)顏色也(ye)(ye)會(hui)影響(xiang)我(wo)(wo)們(men)(men)(men)(men)閱(yue)(yue)讀(du)的(de)(de)(de)(de)順序，從(cong)重(zhong)(zhong)(zhong)到輕依(yi)次(ci)(ci)瀏覽(lan)。狩獵式(shi)閱(yue)(yue)讀(du)：狩獵式(shi)閱(yue)(yue)讀(du)用戶(hu)在(zai)(zai)尋找可以完(wan)成當前(qian)界面(mian)或設計中(zhong)(zhong)(zhong)的(de)(de)(de)(de)任務線索，比(bi)(bi)如(ru)(ru)在(zai)(zai)購買(mai)頁面(mian)中(zhong)(zhong)(zhong)會(hui)尋找支付按(an)鈕等(deng)。S曲(qu)線閱(yue)(yue)讀(du)：S型(xing)曲(qu)線閱(yue)(yue)讀(du)比(bi)(bi)較(jiao)適合比(bi)(bi)較(jiao)大的(de)(de)(de)(de)設計，眼球需要左(zuo)(zuo)顧(gu)右(you)(you)盼從(cong)上到下(xia)來瀏覽(lan)信息，在(zai)(zai)S型(xing)的(de)(de)(de)(de)瀏覽(lan)方(fang)式(shi)下(xia)比(bi)(bi)較(jiao)能夠(gou)全面(mian)地觀察每個(ge)頁面(mian)元(yuan)(yuan)(yuan)素，S型(xing)成了目(mu)前(qian)主流的(de)(de)(de)(de)視(shi)覺(jue)(jue)導向模式(shi)。那么在(zai)(zai)S型(xing)曲(qu)線中(zhong)(zhong)(zhong)，我(wo)(wo)們(men)(men)(men)(men)的(de)(de)(de)(de)對其方(fang)式(shi)有三種：左(zuo)(zuo)對齊、右(you)(you)對齊、居中(zhong)(zhong)(zhong)對齊。重(zhong)(zhong)(zhong)點元(yuan)(yuan)(yuan)素可以依(yi)次(ci)(ci)左(zuo)(zuo)右(you)(you)擺放(fang)，讓用戶(hu)有一(yi)個(ge)視(shi)覺(jue)(jue)瀏覽(lan)的(de)(de)(de)(de)慣性，左(zuo)(zuo)-右(you)(you)-左(zuo)(zuo)-右(you)(you)-左(zuo)(zuo)-右(you)(you)。
上面我(wo)們(men)(men)介紹(shao)了一(yi)些(xie)排版和(he)平面的(de)基本原理(li)。那(nei)么實際上我(wo)們(men)(men)在(zai)(zai)應(ying)用中要(yao)做的(de)就(jiu)是將這些(xie)知識(shi)運用在(zai)(zai)具體的(de)需(xu)求里(li)。讓多個(ge)元素能夠完美地(di)展現在(zai)(zai)一(yi)個(ge)畫面里(li)也是一(yi)種(zhong)能力，我(wo)們(men)(men)管這種(zhong)能力叫(jiao)做構圖能力。那(nei)么下面我(wo)來簡單講一(yi)下構圖能力有哪些(xie)要(yao)點。
我(wo)們的(de)(de)任何一(yi)個(ge)排版里(li)都(dou)會出現重(zhong)心(xin)(xin)。重(zhong)心(xin)(xin)是我(wo)們人(ren)類的(de)(de)一(yi)個(ge)心(xin)(xin)智模型(xing)，我(wo)們從物理世界(jie)里(li)學習了重(zhong)心(xin)(xin)的(de)(de)規律，在(zai)看(kan)平面作(zuo)品(pin)的(de)(de)時候也會莫名地(di)關(guan)注重(zhong)心(xin)(xin)問題。在(zai)設計中我(wo)們可以利用這一(yi)點創作(zuo)出傾斜的(de)(de)重(zhong)心(xin)(xin)、居中的(de)(de)重(zhong)心(xin)(xin)、左對齊的(de)(de)重(zhong)心(xin)(xin)等。但是請大家注意，如果我(wo)們的(de)(de)排版里(li)一(yi)個(ge)單元(yuan)(yuan)是居中的(de)(de)，那么這個(ge)單元(yuan)(yuan)內的(de)(de)元(yuan)(yuan)素也應(ying)該(gai)重(zhong)心(xin)(xin)居中而(er)不應(ying)該(gai)重(zhong)心(xin)(xin)不穩，否則會感覺大廈即將傾倒。
設(she)計某個元素(su)(su)或者幾個元素(su)(su)組成(cheng)的(de)單元也要注重骨骼，骨骼有(you)外延骨骼和(he)內在骨骼兩(liang)種。在做完設(she)計以(yi)后可以(yi)將作品元素(su)(su)的(de)外圍連個線，看(kan)看(kan)是什么形狀。有(you)時我們會發現(xian)一些骨骼不好的(de)設(she)計確實會給人不舒服的(de)感受(shou)。
1692年法國(guo)國(guo)王(wang)路易十四命令成立管理(li)印刷的(de)(de)皇家特別委員會。委員會由數學家尼(ni)古拉斯(si)加宗（Nicolas Jaugeon）擔任領導，他們采用(yong)方(fang)(fang)(fang)格(ge)(ge)為設(she)(she)計依據，每(mei)個(ge)(ge)(ge)(ge)字體(ti)方(fang)(fang)(fang)格(ge)(ge)分(fen)為64個(ge)(ge)(ge)(ge)基本方(fang)(fang)(fang)格(ge)(ge)單(dan)位，每(mei)個(ge)(ge)(ge)(ge)方(fang)(fang)(fang)格(ge)(ge)單(dan)位再分(fen)成36個(ge)(ge)(ge)(ge)小(xiao)(xiao)格(ge)(ge)，這(zhe)樣(yang)印刷版面(mian)就有 2304個(ge)(ge)(ge)(ge)小(xiao)(xiao)格(ge)(ge)組(zu)成，在(zai)嚴謹的(de)(de)幾何網格(ge)(ge)中設(she)(she)計字體(ti)和版面(mian)來試驗(yan)視覺傳達的(de)(de)功能。柵(zha)格(ge)(ge)系統英文是(shi)「grid systems」，是(shi)一(yi)種(zhong)(zhong)平面(mian)設(she)(she)計的(de)(de)方(fang)(fang)(fang)法。柵(zha)格(ge)(ge)系統運用(yong)固定的(de)(de)格(ge)(ge)子設(she)(she)計版面(mian)布局，其風格(ge)(ge)工(gong)整簡潔，這(zhe)種(zhong)(zhong)方(fang)(fang)(fang)法現在(zai)也被應用(yong)在(zai)移(yi)動設(she)(she)備和網站設(she)(she)計等領域里(li)。科學的(de)(de)柵(zha)格(ge)(ge)會給人一(yi)種(zhong)(zhong)秩序(xu)的(de)(de)美感和現代感。
△ 網格系統在書(shu)籍排版的(de)應用 作品:Dale magazine by Rocio Gomez
△ 網格系統在圖形中的(de)應用 作品:Pixty App Branding by Ramotion
我(wo)(wo)(wo)們在設(she)計任何作品(pin)時，首(shou)先考慮的是應用的尺寸(cun)。如iPhone8的分(fen)辨(bian)率(lv)為750x1334px、安卓1080P分(fen)辨(bian)率(lv)為1080x1920px等(deng)。在我(wo)(wo)(wo)們確(que)立(li)了(le)我(wo)(wo)(wo)們排版(ban)(ban)的尺寸(cun)后(hou)，我(wo)(wo)(wo)們就(jiu)(jiu)可(ke)(ke)以(yi)根據這(zhe)個寬(kuan)(kuan)度(du)(du)設(she)計可(ke)(ke)以(yi)被整(zheng)除的柵格了(le)。我(wo)(wo)(wo)們把整(zheng)體(ti)寬(kuan)(kuan)度(du)(du)定義為W。然后(hou)整(zheng)個寬(kuan)(kuan)度(du)(du)分(fen)成多(duo)個等(deng)分(fen)單元A。每個單元A中有(you)元素(su)a和間距i。所以(yi)他(ta)們之間的關系就(jiu)(jiu)是 W =（a×n）+（n-1）i 。當然每個應用的尺寸(cun)不止可(ke)(ke)以(yi)整(zheng)除成一(yi)種(zhong)柵格，這(zhe)就(jiu)(jiu)要看我(wo)(wo)(wo)們內容排版(ban)(ban)的疏(shu)密程度(du)(du)了(le)。之后(hou)，我(wo)(wo)(wo)們將過(guo)多(duo)內容的柵格和另一(yi)個柵格相加(jia)得(de)到更(geng)大(da)的排版(ban)(ban)空(kong)間；其(qi)他(ta)元素(su)都須(xu)老老實實呆在自(zi)己的柵格內，這(zhe)樣就(jiu)(jiu)完成了(le)一(yi)個布局非常科學的設(she)計了(le)。
比如(ru)一個網頁(ye)(ye)寬度是(shi)1000px的情況(kuang)中我(wo)(wo)們(men)可以使用：20列(lie)每(mei)(mei)(mei)列(lie)40px和(he)(he)10像(xiang)(xiang)素(su)間(jian)(jian)(jian)(jian)隔(ge)(ge)、20列(lie)每(mei)(mei)(mei)列(lie)30px和(he)(he)20像(xiang)(xiang)素(su)間(jian)(jian)(jian)(jian)隔(ge)(ge)、25列(lie)每(mei)(mei)(mei)列(lie)30px和(he)(he)10像(xiang)(xiang)素(su)間(jian)(jian)(jian)(jian)隔(ge)(ge)、25列(lie)每(mei)(mei)(mei)列(lie)20px和(he)(he)20像(xiang)(xiang)素(su)間(jian)(jian)(jian)(jian)隔(ge)(ge)。如(ru)果網頁(ye)(ye)寬度是(shi)990px我(wo)(wo)們(men)可以使用：11列(lie)每(mei)(mei)(mei)列(lie)80px和(he)(he)10像(xiang)(xiang)素(su)間(jian)(jian)(jian)(jian)隔(ge)(ge)、18列(lie)每(mei)(mei)(mei)列(lie)35px和(he)(he)20像(xiang)(xiang)素(su)間(jian)(jian)(jian)(jian)隔(ge)(ge)、25列(lie)每(mei)(mei)(mei)列(lie)45px和(he)(he)10像(xiang)(xiang)素(su)間(jian)(jian)(jian)(jian)隔(ge)(ge)、33列(lie)每(mei)(mei)(mei)列(lie)20px和(he)(he)10像(xiang)(xiang)素(su)間(jian)(jian)(jian)(jian)隔(ge)(ge)。如(ru)果網頁(ye)(ye)寬度是(shi)頁(ye)(ye)寬980px我(wo)(wo)們(men)可以使用：14列(lie)每(mei)(mei)(mei)列(lie)60px和(he)(he)10像(xiang)(xiang)素(su)間(jian)(jian)(jian)(jian)隔(ge)(ge)、14列(lie)每(mei)(mei)(mei)列(lie)50px和(he)(he)20像(xiang)(xiang)素(su)間(jian)(jian)(jian)(jian)隔(ge)(ge)、28列(lie)每(mei)(mei)(mei)列(lie)25px和(he)(he)10像(xiang)(xiang)素(su)間(jian)(jian)(jian)(jian)隔(ge)(ge)。
用(yong)8當(dang)然不(bu)是(shi)因(yin)為(wei)(wei)數(shu)(shu)(shu)字(zi)吉利，而(er)是(shi)因(yin)為(wei)(wei) 8 是(shi)偶數(shu)(shu)(shu)，并且(qie)8可以(yi)(yi)被成(cheng)倍(bei)(bei)縮(suo)小(xiao)(xiao)三次！（就是(shi)8可以(yi)(yi)縮(suo)小(xiao)(xiao)一(yi)(yi)倍(bei)(bei)到(dao)4,4可以(yi)(yi)縮(suo)小(xiao)(xiao)一(yi)(yi)倍(bei)(bei)到(dao)2，這(zhe)對于移動端適(shi)(shi)配(pei)來說太有(you)優勢了）考慮到(dao)移動設(she)計(ji)(ji)中的(de)(de)適(shi)(shi)配(pei)特殊性，縮(suo)小(xiao)(xiao)到(dao)其它(ta)尺(chi)(chi)寸(cun)可能會(hui)出現虛邊和半(ban)像素(su)，用(yong)偶數(shu)(shu)(shu)可以(yi)(yi)避免這(zhe)種情況。 為(wei)(wei)什么是(shi)8？因(yin)為(wei)(wei)比如1920×1080、1280×1024、1280×800、1024×768都(dou)是(shi)8的(de)(de)倍(bei)(bei)數(shu)(shu)(shu)（盡管部(bu)分尺(chi)(chi)寸(cun)不(bu)是(shi)8的(de)(de)倍(bei)(bei)數(shu)(shu)(shu)，但也(ye)不(bu)會(hui)顯得奇怪）。除此(ci)之外(wai)，我們在做其它(ta)設(she)計(ji)(ji)時也(ye)可以(yi)(yi)將不(bu)同的(de)(de)留白(bai)設(she)計(ji)(ji)成(cheng)有(you)倍(bei)(bei)數(shu)(shu)(shu)關系的(de)(de)數(shu)(shu)(shu)字(zi)，比如10px、20px、30px等，讓設(she)計(ji)(ji)內部(bu)更有(you)邏輯性。
黃金比(bi)例是(shi)(shi)一(yi)個定義為(wei)(wei) (√5-1)/2的(de)(de)無(wu)理數。 運用到(dao)的(de)(de)層面相當的(de)(de)廣闊，例如：數學、物理、建(jian)筑、美術甚至是(shi)(shi)音(yin)樂。 黃金比(bi)例的(de)(de)獨特性質首(shou)先(xian)被應用在分(fen)割(ge)一(yi)條線(xian)段上。如果有一(yi)條線(xian)段的(de)(de)總長(chang)度為(wei)(wei)黃金比(bi)例的(de)(de) 分(fen)母加分(fen)子的(de)(de)單(dan)(dan)位(wei)長(chang)，若我們(men)把(ba)他分(fen)割(ge)為(wei)(wei)兩半，長(chang)的(de)(de)為(wei)(wei)分(fen)母單(dan)(dan)位(wei)長(chang)度，短的(de)(de)為(wei)(wei)分(fen)子單(dan)(dan)位(wei)長(chang)度，則短線(xian)長(chang)度與長(chang)線(xian)長(chang)度的(de)(de)比(bi)值即(ji)為(wei)(wei)黃金比(bi)例。
黃金比例（以下簡稱「黃金比」）約為(wei)： 0.618:1。
△ 使用黃金比例設計出(chu)來的(de)蘋(pin)果logo
斐(fei)(fei)(fei)波(bo)(bo)(bo)那(nei)契螺(luo)旋(xuan)線(xian)(xian)也被(bei)叫(jiao)做(zuo)「黃金螺(luo)旋(xuan)」，是根據斐(fei)(fei)(fei)波(bo)(bo)(bo)那(nei)契數列畫出(chu)來(lai)的(de)螺(luo)旋(xuan)曲線(xian)(xian)，自然界(jie)中存(cun)在(zai)許多(duo)斐(fei)(fei)(fei)波(bo)(bo)(bo)那(nei)契螺(luo)旋(xuan)線(xian)(xian)的(de)圖案，是自然界(jie)最完美(mei)的(de)經典黃金比(bi)例。斐(fei)(fei)(fei)波(bo)(bo)(bo)那(nei)契螺(luo)旋(xuan)線(xian)(xian)，以斐(fei)(fei)(fei)波(bo)(bo)(bo)那(nei)契數為邊的(de)正(zheng)方(fang)形拼成(cheng)的(de)長方(fang)形，然后(hou)在(zai)正(zheng)方(fang)形里面畫一個90度的(de)扇形，連起(qi)來(lai)的(de)弧(hu)線(xian)(xian)就(jiu)是斐(fei)(fei)(fei)波(bo)(bo)(bo)那(nei)契螺(luo)旋(xuan)線(xian)(xian)。
斐波那契數列(lie)（FibonacciSequence），又稱為黃金分割數列(lie)。在數學上，斐波那契數列(lie)是以(yi)遞(di)歸的方法來定(ding)義：
F0=1
F1=1
Fn=Fn-1+Fn-2
△ 符合斐波(bo)那契螺(luo)旋線設(she)計的Twitter logo
以64px為一個單位，即a=64px。那么(me)大正方(fang)(fang)形(xing)的邊長的一半=8a，大圓半徑(jing)(jing)=7a，中圓半徑(jing)(jing)=4.25a，小(xiao)圓半徑(jing)(jing)=3a。 8a/(8a-3a)=1.6 小(xiao)圓與(yu)大正方(fang)(fang)形(xing)接近(jin)黃金(jin)(jin)比 7a/4.25a≈1.647 中圓與(yu)大圓接近(jin)黃金(jin)(jin)比 4.25a/3a≈1.417 中圓與(yu)小(xiao)圓比例(li)接近(jin)√2 整(zheng)個柵格系統中的尺寸(cun)都是通過黃金(jin)(jin)比例(li)互相(xiang)聯(lian)系的。
△ 內部符合斐波那契螺旋線和黃金分割的IOS啟動圖標(biao)骨(gu)骼
iOS的啟動圖(tu)標(biao)(biao)非(fei)常重(zhong)要(yao)。并(bing)且蘋果(guo)(guo)規定(ding)所有應用(yong)程序的啟動圖(tu)標(biao)(biao)都必須(xu)是圓(yuan)角正方形作為圖(tu)標(biao)(biao)背(bei)板。這(zhe)個背(bei)板也(ye)給我(wo)們(men)了一些參(can)考(kao)線(xian)，蘋果(guo)(guo)使用(yong)黃(huang)金分(fen)割(ge)和斐波那契螺旋線(xian)將畫面分(fen)割(ge)為若(ruo)干部分(fen)。如果(guo)(guo)我(wo)們(men)繪制啟動圖(tu)標(biao)(biao)時可以貼合這(zhe)些參(can)考(kao)線(xian)。8a/(8a-3a)=1.6 小圓(yuan)與大(da)正方形接近(jin)(jin)黃(huang)金比(bi)7a/4.25a≈1.647 ，中(zhong)圓(yuan)與大(da)圓(yuan)接近(jin)(jin)黃(huang)金比(bi)，4.25a/3a≈1.417 中(zhong)圓(yuan)與小圓(yuan)比(bi)例接近(jin)(jin)√2。
平(ping)面與(yu)(yu)版(ban)(ban)(ban)式(shi)的(de)(de)設(she)計知(zhi)識涵蓋了(le)字體(ti)的(de)(de)選(xuan)擇(ze)、圖片的(de)(de)選(xuan)擇(ze)、平(ping)面構成(cheng)(cheng)(cheng)基礎、排版(ban)(ban)(ban)的(de)(de)CRAP原(yuan)則(ze)、柵格化(hua)設(she)計、黃(huang)金比(bi)例等多個知(zhi)識點。如果(guo)我們現在(zai)接到一(yi)個需求(qiu)，可(ke)以(yi)首(shou)先將內容放進(jin)畫(hua)(hua)面并排列(lie)好(hao)重要性、然后選(xuan)擇(ze)合適(shi)氣質(zhi)的(de)(de)字體(ti)和(he)(he)圖片、使用(yong)CRAP的(de)(de)排版(ban)(ban)(ban)原(yuan)則(ze)將信息排成(cheng)(cheng)(cheng)合理(li)的(de)(de)順序、利用(yong)柵格化(hua)和(he)(he)黃(huang)金比(bi)例讓畫(hua)(hua)面更加科學、最后如果(guo)發現畫(hua)(hua)面比(bi)較(jiao)空可(ke)以(yi)加入幾何(he)形(xing)裝飾。怎么樣，思(si)路清晰了(le)嗎？平(ping)面與(yu)(yu)版(ban)(ban)(ban)式(shi)知(zhi)識背后是(shi)人類讀取(qu)信息幾千(qian)年(nian)來形(xing)成(cheng)(cheng)(cheng)的(de)(de)習慣以(yi)及(ji)現代社會約定俗成(cheng)(cheng)(cheng)的(de)(de)閱(yue)讀方(fang)(fang)式(shi)和(he)(he)心理(li)學等，要想成(cheng)(cheng)(cheng)為一(yi)個優秀(xiu)的(de)(de)設(she)計師，我們還需要進(jin)一(yi)步(bu)地了(le)解設(she)計背后的(de)(de)原(yuan)理(li)以(yi)及(ji)表達信息的(de)(de)多種方(fang)(fang)法。希望本篇文章能(neng)夠對您(nin)的(de)(de)平(ping)面與(yu)(yu)版(ban)(ban)(ban)式(shi)設(she)計有所啟迪。
在線客服1號
微信公眾賬號