打造完美版式 掌握個性與共性因素.doc

打造完美版式 掌握個性與共性因素 共性解釋：共性就是常規(guī)的東西，自然存在并被人們認(rèn)可的；比如一條直線，是恒久不變的元素，這就是共性；又比如我們穿的衣服，長袖、短袖、長褲、短褲，按正常人標(biāo)準(zhǔn)生產(chǎn)的；這些也是共性； 個性解釋：個性是相對與共性來說的，與共性不同的元素，就是個性；比如每個人畫出來的隨意的線是千差萬別的，這就是個性的元素；又比如，本來是正常的牛仔褲，年輕人最喜歡把他剪破，或者打個補(bǔ)丁什么的，顯得與眾不同，這也是個性。 實(shí)例： 1、掌握共性元素與個性元素；把共性元素變異形成個性元素； 常理，把線條按等距離平均排列看起來很整齊，只要按照等距排列，最終效果是一樣的，沒有特色也沒有缺陷，大家都不會覺得有問題；個性處理，隨意排列線條，使得線條間距不等，形成隨意的節(jié)奏感；每個人排列的最終效果都不一樣，最終會有好有差，所以比較難把握； 圖1圖2 常理：我們用很多元素連成一條線，感覺很整齊；個性，把元素分散隨意擺放，形成大小不一，間距不一的點(diǎn)，使得它們組成的圖形富有節(jié)奏感； 圖3 嚴(yán)重注意：效果是為頁面服務(wù)，效果必須符合頁面風(fēng)格； 效果始終是為頁面風(fēng)格服務(wù)的，如果你沒有搞清楚頁面要表達(dá)的風(fēng)格，而隨意的使用不同效果，最終是沒有說服力的； 案例分析 風(fēng)格定位：CONVERSE是一個非常個性的服飾品牌，從它的官方網(wǎng)站中我們可以看到，設(shè)計(jì)非常個性，代言人也是特意選擇很有個性的搖滾樂明星，所以，設(shè)計(jì)定位要體現(xiàn)其個性的風(fēng)格； 我們來分析一下整個設(shè)計(jì)過程： 1、第一步，確定好頁面必要元素，比如，標(biāo)志，廣告文字，模特，版權(quán)等，這些必要元素；然后確定大概色調(diào)，要體現(xiàn)比較酷的個性，使用灰色系比較容易達(dá)到效果；這里使用偏暖的色調(diào)搭配黑色，使用紅色為突出色；此時，整個版面中規(guī)中矩，使用的都是共性的一些元素，有任何特色及個性，與一般頁面設(shè)計(jì)沒有區(qū)別；圖4 2、根據(jù)產(chǎn)品的風(fēng)格定位，逐步把頁面?zhèn)€性化；為了體現(xiàn)自由、個性，我們把底部的黑色塊做變化處理，使用一些隨意的線條裝飾，使得黑色與灰色交界不那么死板，形成隨意的銜接； 圖5共性：黑灰組合，簡單直白的交界，沒有特色，但是也無可挑剔缺陷； 圖6 個性：黑灰組合，使用隨意的線條過渡，方法較簡單，可以使用筆刷，也可以使用直線工具畫折線；每個人畫出的效果會不一樣，注意疏密有間，隨意自然！ 圖7 3、背景：灰色漸變背景稍顯簡單，但是也不一定要使用非常復(fù)雜的背景，這里使用深淺不同的色塊交錯，使得畫面背景一些就可以了； 圖8 4、個性化裝飾元素：這一點(diǎn)是比較難把握的，因?yàn)閭€性化比較抽象，我們都不好把握；這里要做到的就是，裝飾元素要符合頁面風(fēng)格，要與頁面整體風(fēng)格統(tǒng)一協(xié)調(diào)；這里使用了接近插畫的處理效果，隨意流暢，大小有致，有主有次；目的是要表達(dá)對人物的束縛或者簡單的理解為裝飾； 圖9#p#副標(biāo)題#e# 共性：使用大小一致的元素，整齊、協(xié)調(diào)，但是沒有任何變化與個性； 圖10 個性：元素做大小、位置等的變化，形成非常有節(jié)奏感和空間的的圖形，組成有個性的元素；所有元素都是隨意擺放，每個人都可以擺出不同的圖形；不過要把握這些元素組成圖形的整體感，不要太松散，要有對比；圖11 以下頁面，元素有大小的變化，距離位置的變化，但是整體感覺松散，有些散亂； 圖12 應(yīng)該像以下案例要做到有疏有密，有主有次，近大遠(yuǎn)小，進(jìn)密遠(yuǎn)疏，隨意自然！圖13 5、個性化人物：這里先要分析人物可不可以做修飾處理，什么修飾適合他；比如，如果我們做正式裝，那么我們就不應(yīng)該用一些元素去修飾人物了；而個性休閑裝可以適當(dāng)?shù)淖鲂揎?，使得產(chǎn)品的個性風(fēng)格更加凸顯； 這里根據(jù)人物動作造型和畫面空間考慮修飾，使用類似翅膀的造成，這樣可以襯托產(chǎn)品自由休閑的特性，又給人視覺上的不同；但是這里并沒有使用真實(shí)的翅膀，而是象形的元素；使用真實(shí)的翅膀容易顯得太具象，與畫面風(fēng)格不符合；當(dāng)然也可以使用畫出來的翅膀，只要你能畫！ 圖14 共性：方形色塊，最普通的元素，沒有什么特色，但是也沒有什么問題，但是我們可以給它造型； 圖15 變化：我們把他改變成翅膀的大體形狀，這個你應(yīng)該知道吧，如果不知道翅膀的形成，到網(wǎng)上找張圖片看看，只要像翅膀，隨便畫成什么形狀； 圖16 個性：一大塊色彩顯得呆板，沒有張力，為了體現(xiàn)翅膀的張力，把色塊做分隔，分隔成若干小色塊，分隔應(yīng)該注意，斜線才會顯得有速度和張力感，隨意分隔才會顯得個性十足； 圖17 6、廣告文字個性化：選擇好合適的字體，可以對文字做修飾，以符合頁面風(fēng)格； 圖18 共性：最正式的字體，常規(guī)而沒有特色，當(dāng)然，也找不出什么問題； 圖19 變化：為了迎合畫面效果，可以做適當(dāng)變化，不過變化要符合頁面風(fēng)格，不可以為了變化而變化； 圖20 個性：為了體現(xiàn)產(chǎn)品特征的自由隨意，另類個性感覺，把文字做隨意切割處理，即符合畫面風(fēng)格效果，又顯得個性化，文字的切割各人也可以處理出多種不同效果； 圖21 到這里頁面已經(jīng)完成了； 共性解釋：共性就是常規(guī)的東西，自然存在并被人們認(rèn)可的；比如一條直線，是恒久不變的元素，這就是共性；又比如我們穿的衣服，長袖、短袖、長褲、短褲，按正常人標(biāo)準(zhǔn)生產(chǎn)的；這些也是共性； 個性解釋：個性是相對與共性來說的，與共性不同的元素，就是個性；比如每個人畫出來的隨意的線是千差萬別的，這就是個性的元素；又比如，本來是正常的牛仔褲，年輕人最喜歡把他剪破，或者打個補(bǔ)丁什么的，顯得與眾不同，這也是個性。 實(shí)例： 1、掌握共性元素與個性元素；把共性元素變異形成個性元素； 常理，把線條按等距離平均排列看起來很整齊，只要按照等距排列，最終效果是一樣的，沒有特色也沒有缺陷，大家都不會覺得有問題；個性處理，隨意排列線條，使得線條間距不等，形成隨意的節(jié)奏感；每個人排列的最終效果都不一樣，最終會有好有差，所以比較難把握； 圖1圖2 常理：我們用很多元素連成一條線，感覺很整齊；個性，把元素分散隨意擺放，形成大小不一，間距不一的點(diǎn)，使得它們組成的圖形富有節(jié)奏感； 圖3 嚴(yán)重注意：效果是為頁面服務(wù)，效果必須符合頁面風(fēng)格； 效果始終是為頁面風(fēng)格服務(wù)的，如果你沒有搞清楚頁面要表達(dá)的風(fēng)格，而隨意的使用不同效果，最終是沒有說服力的； 案例分析 風(fēng)格定位：CONVERSE是一個非常個性的服飾品牌，從它的官方網(wǎng)站中我們可以看到，設(shè)計(jì)非常個性，代言人也是特意選擇很有個性的搖滾樂明星，所以，設(shè)計(jì)定位要體現(xiàn)其個性的風(fēng)格； 我們來分析一下整個設(shè)計(jì)過程： 1、第一步，確定好頁面必要元素，比如，標(biāo)志，廣告文字，模特，版權(quán)等，這些必要元素；然后確定大概色調(diào)，要體現(xiàn)比較酷的個性，使用灰色系比較容易達(dá)到效果；這里使用偏暖的色調(diào)搭配黑色，使用紅色為突出色；此時，整個版面中規(guī)中矩，使用的都是共性的一些元素，有任何特色及個性，與一般頁面設(shè)計(jì)沒有區(qū)別；圖4 2、根據(jù)產(chǎn)品的風(fēng)格定位，逐步把頁面?zhèn)€性化；為了體現(xiàn)自由、個性，我們把底部的黑色塊做變化處理，使用一些隨意的線條裝飾，使得黑色與灰色交界不那么死板，形成隨意的銜接； 圖5共性：黑灰組合，簡單直白的交界，沒有特色，但是也無可挑剔缺陷； 圖6 個性：黑灰組合，使用隨意的線條過渡，方法較簡單，可以使用筆刷，也可以使用直線工具畫折線；每個人畫出的效果會不一樣，注意疏密有間，隨意自然！ 圖7 3、背景：灰色漸變背景稍顯簡單，但是也不一定要使用非常復(fù)雜的背景，這里使用深淺不同的色塊交錯，使得畫面背景一些就可以了； 圖8 4、個性化裝飾元素：這一點(diǎn)是比較難把握的，因?yàn)閭€性化比較抽象，我們都不好把握；這里要做到的就是，裝飾元素要符合頁面風(fēng)格，要與頁面整體風(fēng)格統(tǒng)一協(xié)調(diào)；這里使用了接近插畫的處理效果，隨意流暢，大小有致，有主有次；目的是要表達(dá)對人物的束縛或者簡單的理解為裝飾； 圖9#p#副標(biāo)題#e# 共性：使用大小一致的元素，整齊、協(xié)調(diào)，但是沒有任何變化與個性； 圖10 個性：元素做大小、位置等的變化，形成非常有節(jié)奏感和空間的的圖形，組成有個性的元素；所有元素都是隨意擺放，每個人都可以擺出不同的圖形；不過要把握這些元素組成圖形的整體感，不要太松散，要有對比；圖11 以下頁面，元素有大小的變化，距離位置的變化，但是整體感覺松散，有些散亂； 圖12 應(yīng)該像以下案例要做到有疏有密，有主有次，近大遠(yuǎn)小，進(jìn)密遠(yuǎn)疏，隨意自然！圖13 5、個性化人物：這里先要分析人物可不可以做修飾處理，什么修飾適合他；比如，如果我們做正式裝，那么我們就不應(yīng)該用一些元素去修飾人物了；而個性休閑裝可以適當(dāng)?shù)淖鲂揎棧沟卯a(chǎn)品的個性風(fēng)格更加凸顯； 這里根據(jù)人物動作造型和畫面空間考慮修飾，使用類似翅膀的造成，這樣可以襯托產(chǎn)品自由休閑的特性，又給人視覺上的不同；但是這里并沒有使用真實(shí)的翅膀，而是象形的元素；使用真實(shí)的翅膀容易顯得太具象，與畫面風(fēng)格不符合；當(dāng)然也可以使用畫出來的翅膀，只要你能畫！ 圖14 共性：方形色塊，最普通的元素，沒有什么特色，但是也沒有什么問題，但是我們可以給它造型； 圖15 變化：我們把他改變成翅膀的大體形狀，這個你應(yīng)該知道吧，如果不知道翅膀的形成，到網(wǎng)上找張圖片看看，只要像翅膀，隨便畫成什么形狀； 圖16 個性：一大塊色彩顯得呆板，沒有張力，為了體現(xiàn)翅膀的張力，把色塊做分隔，分隔成若干小色塊，分隔應(yīng)該注意，斜線才會顯得有速度和張力感，隨意分隔才會顯得個性十足； 圖17 6、廣告文字個性化：選擇好合適的字體，可以對文字做修飾，以符合頁面風(fēng)格； 圖18 共性：最正式的字體，常規(guī)而沒有特色，當(dāng)然，也找不出什么問題； 圖19 變化：為了迎合畫面效果，可以做適當(dāng)變化，不過變化要符合頁面風(fēng)格，不可以為了變化而變化； 圖20 個性：為了體現(xiàn)產(chǎn)品特征的自由隨意，另類個性感覺，把文字做隨意切割處理，即符合畫面風(fēng)格效果，又顯得個性化，文字的切割各人也可以處理出多種不同效果； 圖21 到這里頁面已經(jīng)完成了； 圖22 總結(jié)： 共性、變化、個性，這是一個流程，共性的元素規(guī)矩，沒有特色但是也沒有缺陷；變化是在共性中找出常見的變化，只是變化，而不能體現(xiàn)個性，比如，文字由大到小的縮放，每個人操作后都可以是一個結(jié)果，而把圖形切割，則是各人得到的結(jié)果不同，這就是個性。圖22 總結(jié)： 共性、變化、個性，這是一