網(wǎng)店美工教程-頁(yè)面構(gòu)圖技巧

美工構(gòu)圖第一頁(yè)，編輯于星期六：四點(diǎn)四十一分。2頁(yè)面構(gòu)圖海報(bào)布局海報(bào)排版技巧設(shè)計(jì)思路內(nèi)容導(dǎo)航第二頁(yè)，編輯于星期六：四點(diǎn)四十一分。35.1

頁(yè)面構(gòu)圖一個(gè)成功的專題頁(yè)面，大部分會(huì)具有以下幾個(gè)出彩的要素：色彩丶構(gòu)圖丶風(fēng)格創(chuàng)意，細(xì)節(jié)等。一個(gè)頁(yè)面從無(wú)到有，設(shè)計(jì)師需要對(duì)整個(gè)頁(yè)面有全盤(pán)的設(shè)計(jì)和把控，良好的畫(huà)面分割能夠讓用戶第一眼看到這個(gè)頁(yè)面就能被視覺(jué)吸引，甚至不用瀏覽具體內(nèi)容就能了解這個(gè)頁(yè)面的很多信息。第三頁(yè)，編輯于星期六：四點(diǎn)四十一分。4在現(xiàn)實(shí)生活與自然界中，我們隨處可見(jiàn)幾何圖形的存在，簡(jiǎn)單的三角形、正方形、長(zhǎng)方形和圓形甚至幾根線條就可以組成很多有趣的圖形，也很符合現(xiàn)代審美需求，適當(dāng)?shù)漠?huà)面切割能夠給頁(yè)面帶來(lái)動(dòng)感與節(jié)奏感。加入幾根線條，幾個(gè)塊面就能令頁(yè)面起到意想不到的效果。5.1.1

幾何切割第四頁(yè)，編輯于星期六：四點(diǎn)四十一分。5A.簡(jiǎn)單切割實(shí)現(xiàn)的時(shí)候需要注意的是素材不適合太過(guò)復(fù)雜和花哨，一般會(huì)是純色大塊搭配漸變，主要突出形狀和區(qū)塊。5.1.1

幾何切割第五頁(yè)，編輯于星期六：四點(diǎn)四十一分。6用一個(gè)形狀或者素材切分整個(gè)頁(yè)面，畫(huà)面瞬時(shí)變得有趣生動(dòng)起來(lái)，內(nèi)容區(qū)域也能得到有效劃分。這類構(gòu)圖方式對(duì)內(nèi)容沒(méi)有過(guò)多要求，可隨意安排。具體排版可根據(jù)內(nèi)容來(lái)處理，也是現(xiàn)在專題頁(yè)面用得最多，最普遍的一種構(gòu)圖方式第六頁(yè)，編輯于星期六：四點(diǎn)四十一分。7B.對(duì)稱切割這種構(gòu)圖方式的前提一般是內(nèi)容分主要兩部分，并且這兩部分是對(duì)立關(guān)系的情況下，比如說(shuō)：對(duì)戰(zhàn)，男女，冷熱等等。頁(yè)面一分為二，內(nèi)容劃分明確也更加具有視覺(jué)沖擊力。5.1.1幾何切割第七頁(yè)，編輯于星期六：四點(diǎn)四十一分。8第八頁(yè)，編輯于星期六：四點(diǎn)四十一分。95.1.1幾何切割C.組合切割集中而規(guī)律的排列，從整體上抓住人們的視覺(jué)。這種構(gòu)圖方式適合那種每個(gè)區(qū)塊中的內(nèi)容屬于平級(jí)關(guān)系的專題，用這種組合的排列能夠保持各內(nèi)容的關(guān)系，也能讓布局更有創(chuàng)意第九頁(yè)，編輯于星期六：四點(diǎn)四十一分。10不規(guī)則的構(gòu)圖，穩(wěn)定而銳利，干凈的排版，易于識(shí)別，不規(guī)則的構(gòu)圖方式，避免了畫(huà)面生硬，不易產(chǎn)生審美疲勞。不同的形狀和排列，呈現(xiàn)出來(lái)的視覺(jué)效果也不一樣。這種構(gòu)圖方式使用最多的一般是為了體現(xiàn)時(shí)尚感，科技感，與鋒利感覺(jué)的專題，例如時(shí)裝，家電，以及游戲戰(zhàn)斗類的專題等等第十頁(yè)，編輯于星期六：四點(diǎn)四十一分。115.1.2主題輪廓根據(jù)專題的主要內(nèi)容，從整體上構(gòu)建一個(gè)邊界或外形線，形成一個(gè)大的輪廓，將專題內(nèi)容巧妙的填充進(jìn)去。這種處理方式能夠讓用戶一眼就能了解到一些信息，符合專題主題，并且能夠讓頁(yè)面更有設(shè)計(jì)感，生動(dòng)且活潑。需要提醒的是設(shè)計(jì)的時(shí)候?qū)⑿螤畋M量輪廓化，加以強(qiáng)調(diào)突出，主體不需要太具象，舍棄一些繁瑣的、次要的元素，以免影響用戶閱讀內(nèi)容。第十一頁(yè)，編輯于星期六：四點(diǎn)四十一分。125.1.2

主題輪廓這類構(gòu)圖方式一般針對(duì)那種主體內(nèi)容很明確具象，能夠用物品或輪廓直接代表，比如:中秋可以用月餅丶玉兔；會(huì)員可以用皇冠，鉆石等等等等，可根據(jù)具體的內(nèi)容來(lái)進(jìn)行嘗試第十二頁(yè)，編輯于星期六：四點(diǎn)四十一分。135.1.2主題輪廓第十三頁(yè)，編輯于星期六：四點(diǎn)四十一分。145.1.2主題輪廓第十四頁(yè)，編輯于星期六：四點(diǎn)四十一分。155.1.3放射及透視通過(guò)整體放射狀加透視構(gòu)圖，使畫(huà)面呈現(xiàn)立體與空間感，視覺(jué)焦點(diǎn)明確，畫(huà)面沖擊力強(qiáng)，富有動(dòng)感。第十五頁(yè)，編輯于星期六：四點(diǎn)四十一分。165.1.3放射及透視需要注意的是放射狀的排版不太適合文字閱讀，要注意文字排版。建議在文字?jǐn)?shù)量較少的情況下選擇此種構(gòu)圖。一般游戲激戰(zhàn)類的專題會(huì)較多的使用這種構(gòu)圖，突出動(dòng)感第十六頁(yè)，編輯于星期六：四點(diǎn)四十一分。175.1.4整體場(chǎng)景專題內(nèi)容不多，要突出趣味性，又怕用戶無(wú)聊，那就設(shè)計(jì)成一副美妙的插畫(huà)吧！讓用戶迅速置身在搭建的場(chǎng)景中，帶動(dòng)情緒，參與互動(dòng)，直觀獲取有用信息。這種處理方式會(huì)使頁(yè)面信息表現(xiàn)的更加準(zhǔn)確順暢，快速有效的把目標(biāo)用戶帶入到頁(yè)面氛圍當(dāng)中。第十七頁(yè)，編輯于星期六：四點(diǎn)四十一分。185.1.4整體場(chǎng)景第十八頁(yè)，編輯于星期六：四點(diǎn)四十一分。195.1.4整體場(chǎng)景第十九頁(yè)，編輯于星期六：四點(diǎn)四十一分。205.1.4整體場(chǎng)景需要注意的是場(chǎng)景搭建對(duì)素材的要求比較高，明暗，陰影，透視以及層次感，體積都需要用心處理。這類專題大多都會(huì)搭配動(dòng)畫(huà)一起實(shí)現(xiàn)，在帶入感上更進(jìn)一層。在設(shè)計(jì)的時(shí)候，對(duì)專題內(nèi)容頭腦里要有畫(huà)面感，先搭建大的畫(huà)面關(guān)系，再往里頭添細(xì)節(jié)和內(nèi)容，切記場(chǎng)景不要搶了內(nèi)容的視覺(jué)焦點(diǎn)，在適當(dāng)?shù)臅r(shí)候做些減法第二十頁(yè)，編輯于星期六：四點(diǎn)四十一分。215.1.5流程圖如果你拿到的專題是漸進(jìn)以及流向又或者是展示各節(jié)點(diǎn)的內(nèi)容，用別的形式總感覺(jué)不夠具象，那何不干脆做成一個(gè)個(gè)性化的流程圖？俗話說(shuō)，千言萬(wàn)語(yǔ)不如一張圖，專題運(yùn)用這種構(gòu)圖方式能夠?qū)⒉襟E，關(guān)系，各個(gè)節(jié)點(diǎn)以及整體流向展示清楚，配合圖片展示，一個(gè)枯燥的流程瞬間變得個(gè)性十足，用戶瀏覽簡(jiǎn)單又明了，并且充滿了趣味性。第二十一頁(yè)，編輯于星期六：四點(diǎn)四十一分。225.1.5流程圖在網(wǎng)頁(yè)設(shè)計(jì)越來(lái)越注重個(gè)性丶趣味性以及視覺(jué)沖擊力的今天，專題頁(yè)面的構(gòu)圖也已經(jīng)千變?nèi)f化，以上只是列舉出了其中較常見(jiàn)的一部分，不同的主題，不同的內(nèi)容，構(gòu)圖排版的出發(fā)點(diǎn)也不盡相同，上面列舉出來(lái)的方法也可以搭配使用。第二十二頁(yè)，編輯于星期六：四點(diǎn)四十一分。235.1

頁(yè)面構(gòu)圖總結(jié)所謂構(gòu)圖就是將表現(xiàn)主題的各個(gè)構(gòu)成要素按照主次關(guān)系放置在畫(huà)面相應(yīng)的區(qū)域，形成視覺(jué)感受，達(dá)到設(shè)計(jì)意圖。所有的構(gòu)圖方式追根究底都是為內(nèi)容服務(wù)，構(gòu)圖必須要服從主題表現(xiàn)的要求，設(shè)計(jì)師在設(shè)計(jì)的時(shí)候要注意在追求創(chuàng)意構(gòu)圖的同時(shí)也別影響到用戶閱讀內(nèi)容。第二十三頁(yè)，編輯于星期六：四點(diǎn)四十一分。245.2海報(bào)構(gòu)圖文案產(chǎn)品圖海報(bào)尺寸一張海報(bào)一般首先要問(wèn)客戶要下面3個(gè)東東：第二十四頁(yè)，編輯于星期六：四點(diǎn)四十一分。25在設(shè)計(jì)的過(guò)程中最主要也就確定以下2個(gè)方面：1：排版構(gòu)圖（文案+產(chǎn)品）2：海報(bào)配色（背景+文案與產(chǎn)品色的協(xié)調(diào)）本文主要針對(duì)這2個(gè)方面進(jìn)行解讀。一張電商海報(bào)基本有3部分組成，產(chǎn)品、背景、文案。確定好了構(gòu)圖版式，也就成功了一半。常見(jiàn)的版式有3種左文右圖、左圖右文、中間文兩邊圖。5.2

海報(bào)構(gòu)圖第二十五頁(yè)，編輯于星期六：四點(diǎn)四十一分。265.2.1左文右圖這張海報(bào)是左文右圖式，這張海報(bào)的左邊文案排版非常典型，字體上粗下細(xì)，上大下小，上下主次分明，形成對(duì)比。文案四四方方架構(gòu)非常穩(wěn)重，非常平衡。第二十六頁(yè)，編輯于星期六：四點(diǎn)四十一分。275.2.1左文右圖第二十七頁(yè)，編輯于星期六：四點(diǎn)四十一分。285.2.1左文右圖第二十八頁(yè)，編輯于星期六：四點(diǎn)四十一分。295.2.1左文右圖第二十九頁(yè)，編輯于星期六：四點(diǎn)四十一分。305.2.1左文右圖第三十頁(yè)，編輯于星期六：四點(diǎn)四十一分。315.2.2左圖右文這張海報(bào)屬于左圖右文也是很典型的，淘寶官方引導(dǎo)的那種典型排版。字體也是上粗下細(xì)，上大下小。下面的價(jià)格打折部分排版很穩(wěn)重丶結(jié)實(shí)。第三十一頁(yè)，編輯于星期六：四點(diǎn)四十一分。325.2.2左圖右文第三十二頁(yè)，編輯于星期六：四點(diǎn)四十一分。335.2.2左圖右文第三十三頁(yè)，編輯于星期六：四點(diǎn)四十一分。345.2.2左圖右文第三十四頁(yè)，編輯于星期六：四點(diǎn)四十一分。355.2.3中間文兩邊圖這張海報(bào)是兩邊圖中間文字的排版，常見(jiàn)于多模特海報(bào)中。一般是一邊近景另外一邊是遠(yuǎn)景模特產(chǎn)生對(duì)比和呼應(yīng)。第三十五頁(yè)，編輯于星期六：四點(diǎn)四十一分。365.2.3中間文兩邊圖第三十六頁(yè)，編輯于星期六：四點(diǎn)四十一分。375.2.3中間文兩邊圖第三十七頁(yè)，編輯于星期六：四點(diǎn)四十一分。385.2.3中間文兩邊圖第三十八頁(yè)，編輯于星期六：四點(diǎn)四十一分。395.2.3中間文兩邊圖放這張海報(bào)我想表達(dá)的是背景是風(fēng)景的情況下，文字直接打上去會(huì)顯得太亂?？梢灾苯赢?huà)一個(gè)半透明的框框，如圖所示。然后再在里面排文案。模特也是一邊遠(yuǎn)景，另一邊近景。第三十九頁(yè)，編輯于星期六：四點(diǎn)四十一分。405.2.4斜切式構(gòu)圖斜切式構(gòu)圖會(huì)讓畫(huà)面顯得時(shí)尚，動(dòng)感活躍。但是畫(huà)面平衡感不是很好控制。一般斜切式的文案傾斜角度最好不要大于30，不然得歪著頭閱讀。另外根據(jù)閱讀習(xí)慣，文字一般是往右上方的傾斜，文字這樣有一種上升感。第四十頁(yè)，編輯于星期六：四點(diǎn)四十一分。415.2.5其他構(gòu)圖當(dāng)海報(bào)上要放置過(guò)多的促銷產(chǎn)品，可以采用這種版式。中間是一個(gè)半透明的框輸入文案。第四十一頁(yè)，編輯于星期六：四點(diǎn)四十一分。425.2.5總結(jié)在海報(bào)設(shè)計(jì)過(guò)程中版式的平衡感極為重要，同時(shí)還要處理好不同物體之間的對(duì)比關(guān)系。比如文案字體的大小對(duì)比丶粗細(xì)對(duì)比丶模特的遠(yuǎn)近對(duì)比。好比我們畫(huà)素描靜物的時(shí)候，靜物的擺放也是前后層次分明，有主物體，有陪襯的對(duì)比分明。關(guān)于文案：文案中要說(shuō)清這個(gè)寶貝的屬性，給消費(fèi)者帶來(lái)的益處等，關(guān)于文案大家可以百度FAB法則看下，這里不多說(shuō)了。第四十二頁(yè)，編輯于星期六：四點(diǎn)四十一分。435.3海報(bào)排版技巧5.3.1

對(duì)齊第四十三頁(yè)，編輯于星期六：四點(diǎn)四十一分。44第四十四頁(yè)，編輯于星期六：四點(diǎn)四十一分。455.3.1

對(duì)齊第四十五頁(yè)，編輯于星期六：四點(diǎn)四十一分。46第四十六頁(yè)，編輯于星期六：四點(diǎn)四十一分。475.3.1

對(duì)齊第四十七頁(yè)，編輯于星期六：四點(diǎn)四十一分。485.3.1

對(duì)齊第四十八頁(yè)，編輯于星期六：四點(diǎn)四十一分。495.3.1

對(duì)齊第四十九頁(yè)，編輯于星期六：四點(diǎn)四十一分。505.3.1

對(duì)齊居中式的排版在生活中最常見(jiàn)就是房地產(chǎn)和一些珠寶海報(bào)，居中排版會(huì)給人正式，大氣，高端，有品質(zhì)感覺(jué)。在電商海報(bào)中，居中排版經(jīng)常會(huì)見(jiàn)到文案直接打

在產(chǎn)品上面，文案的遮擋會(huì)和后面的產(chǎn)品營(yíng)造出一前一后的層次感，加上一些光效會(huì)讓整張畫(huà)面空間感提升許多。居中對(duì)齊并不適合入門(mén)的新手，因?yàn)檫@對(duì)畫(huà)面的布局把控有一定的要求。第五十頁(yè)，編輯于星期六：四點(diǎn)四十一分。515.3.2

對(duì)比無(wú)對(duì)比不設(shè)計(jì)。人們的眼睛不喜歡看平淡無(wú)奇千篇一律的東西，喜歡看有對(duì)比的畫(huà)面！使用對(duì)比的排版技巧可以最有效的增加畫(huà)面的視覺(jué)效果。對(duì)比原則包含的內(nèi)容很多，比如虛實(shí)對(duì)比，冷暖對(duì)比等等，這次我們只談關(guān)于字體的大小對(duì)比和粗細(xì)對(duì)比。第五十一頁(yè)，編輯于星期六：四點(diǎn)四十一分。525.3.2

對(duì)比第五十二頁(yè)，編輯于星期六：四點(diǎn)四十一分。535.3.2

對(duì)比第五十三頁(yè)，編輯于星期六：四點(diǎn)四十一分。545.3.2

對(duì)比觀察使用對(duì)比前后的效果，在排版中僅僅運(yùn)用對(duì)齊這一個(gè)原則是不夠的，第二步就要用到對(duì)比！第一張圖片由于缺少對(duì)比，整體顯得很乏味，除了標(biāo)題略大一點(diǎn)下面的文本太長(zhǎng)而且沒(méi)有吸引讀者的地方。第二張海報(bào)則運(yùn)用對(duì)比的手法，使得頁(yè)面更吸引人。而且文案的組織結(jié)構(gòu)一目了然，更便于讀者閱讀。第二張海報(bào)中的標(biāo)題加大加粗，與引標(biāo)題2014夏裝……形成大小和粗細(xì)的對(duì)比。下面的正文采用小字，但是價(jià)格部分加粗強(qiáng)調(diào)再次形成對(duì)比。最下面的包郵說(shuō)明部分采用最細(xì)最小的字與順豐包郵又形成一種粗細(xì)大小的對(duì)比。只要將重點(diǎn)文字提煉出來(lái)放大加粗之后就是的整個(gè)版面信息主次分明，富有層次和組織性，就會(huì)在視覺(jué)上引導(dǎo)消費(fèi)者向下瀏覽。第五十四頁(yè)，編輯于星期六：四點(diǎn)四十一分。555.3.2

對(duì)比1、找出文案中最重點(diǎn)的語(yǔ)句，運(yùn)用粗細(xì)對(duì)比和大小對(duì)比加以強(qiáng)調(diào)和區(qū)分！2、字體既然要對(duì)比就要對(duì)比分明，把標(biāo)題設(shè)置12號(hào)字，把正文設(shè)置為10號(hào)字毫無(wú)意義，既然用對(duì)比就要大足夠大，小足夠小，細(xì)足夠細(xì)，粗足夠粗，讓人眼一看就看出他們的對(duì)比關(guān)系。3、對(duì)比不光會(huì)讓畫(huà)面更加美觀，而且會(huì)增加頁(yè)面的可讀性，不要擔(dān)心對(duì)比后的讀者不會(huì)去讀小字，假如畫(huà)面所有文字一樣大，沒(méi)有重點(diǎn)，沒(méi)有邏輯，顧客往往一撇而過(guò)。只要你強(qiáng)調(diào)的部分吸引顧客，顧客也會(huì)下意識(shí)的往下看。注意事項(xiàng)：第五十五頁(yè)，編輯于星期六：四點(diǎn)四十一分。56第五十六頁(yè)，編輯于星期六：四點(diǎn)四十一分。575.3.2

對(duì)比第五十七頁(yè)，編輯于星期六：四點(diǎn)四十一分。585.3.2

對(duì)比第五十八頁(yè)，編輯于星期六：四點(diǎn)四十一分。595.3.2

對(duì)比第五十九頁(yè)，編輯于星期六：四點(diǎn)四十一分。605.3.2

對(duì)比第六十頁(yè)，編輯于星期六：四點(diǎn)四十一分。615.3.2

對(duì)比第六十一頁(yè)，編輯于星期六：四點(diǎn)四十一分。625.3.3分組當(dāng)文案過(guò)多的時(shí)候就考慮將文案分組，將相同信息的文案擺放到一起，這樣不僅使整個(gè)頁(yè)面富有條理性，也會(huì)看上去非常美觀，更加有利于消費(fèi)者閱讀。第六十二頁(yè)，編輯于星期六：四點(diǎn)四十一分。635.3.3分組第六十三頁(yè)，編輯于星期六：四點(diǎn)四十一分。645.3.3分組第六十四頁(yè)，編輯于星期六：四點(diǎn)四十一分。655.3.3分組第六十五頁(yè)，編輯于星期六：四點(diǎn)四十一分。665.3.3

分組一般來(lái)說(shuō)一張海報(bào)基本就運(yùn)用這三個(gè)原則，對(duì)齊，對(duì)比，分組。切記，畫(huà)面中每個(gè)元素的存在以及它的擺放都是有道理的。畫(huà)面是你設(shè)計(jì)的，你應(yīng)該說(shuō)出你這么做的來(lái)由！所有帶有震撼效果的畫(huà)面都是源自對(duì)比，如果有人說(shuō)你畫(huà)面太平淡了，那么就請(qǐng)運(yùn)用對(duì)比，對(duì)比是最有效的改變你畫(huà)面的救命草！最后總結(jié)：第六十六頁(yè)，編輯于星期六：四點(diǎn)四十一分。67第六十七頁(yè)，編輯于星期六：四點(diǎn)四十一分。685.4設(shè)計(jì)思路很多新手剛剛轉(zhuǎn)入電商設(shè)計(jì)這一行業(yè)的時(shí)候，總是苦惱如何開(kāi)始自己的設(shè)計(jì)生涯，不知從何下手，別擔(dān)心，下面我們就一起來(lái)理清一下思路，告訴你如何快速走進(jìn)設(shè)計(jì)之路。第六十八頁(yè)，編輯于星期六：四點(diǎn)四十一分。695.4設(shè)計(jì)思路產(chǎn)品背景顏色通過(guò)上圖我們可以看到的一個(gè)設(shè)計(jì)可以分為幾個(gè)元素組成：排版感情第六十九頁(yè)，編輯于星期六：四點(diǎn)四十一分。705.4設(shè)計(jì)思路產(chǎn)品：就是你要圍繞著它為主題來(lái)設(shè)計(jì)的東西，是整個(gè)設(shè)計(jì)的主心骨背景：就是為了襯托出產(chǎn)品的價(jià)值，以為整個(gè)設(shè)計(jì)的氛圍的一個(gè)元素，它是整個(gè)設(shè)計(jì)中好像最不顯眼卻最重要的一個(gè)元素，也是讓人非常頭疼的一個(gè)東西，但是你記住，它終究是配角，不能讓它占了主人的位置。顏色：在電商設(shè)計(jì)中，顏色可以說(shuō)是重中之重，它是體現(xiàn)一個(gè)設(shè)計(jì)水平的重要條件，因?yàn)轭伾珟в懈星?，能影響人的情緒。知識(shí)要點(diǎn)第七十頁(yè)，編輯于星期六：四點(diǎn)