Animate動畫制作案例教程 課件 項目二 Banner設計與制作

項目二Banner設計與制作

任務1

熟識Banner

任務目標1234

了解Banner的應用領域

認識Banner設計的重要性熟悉構圖的定義及法則掌握構圖的樣式和結構

1.了解Banner的應用領域

Banner的核心使命就是吸引用戶關注，是大多數(shù)新產品，新事物，各種優(yōu)惠活動呈現(xiàn)給用戶的最主要的途徑，所以Banner的主題要明確，關鍵內容要突出，要能夠有效的抓住用戶眼球。Banner的應用領域也越來越廣泛，我們常見的應用有：網幅廣告旗幟廣告橫幅廣告網站Banner手機Banner淘寶Banner微信Banner微博Banner2.認識Banner設計的重要性

Banner設計的初衷就是被點擊。所有的設計和創(chuàng)意都是圍繞著吸引用戶為目的來進行的。一個好的設計，主題要明確。一個核心內容，幾個圍繞說明，在有效吸引用戶的前提下，能夠很自然的融合到不同頁面是Banner的成功設計。下面通過兩個應用實例對比來說明Banner設計的重要性。

如圖2-1-1所示的網站Banner廣告，整體畫面看起來就比較凌亂，東西太多，想表達的內容也太多，這時候需要用戶去花時間思考，而這時候用戶往往是不愿意去思考的。所以這個Banner的設計是比較失敗的，一是不知道畫面要表達內容的沒有核心主題；二是整體上沒有吸引用戶眼球的地方。2.認識Banner設計的重要性

圖2-1-1網站Banner廣告2.認識Banner設計的重要性相比之下，圖2-1-2中的團購網站Banner的文案設計簡練、清晰，虛化的背景圖片更好地映襯了實物的主題圖片，再加上簡明扼要的文字“最愛金秋葡萄香”及“葡萄義賣·為山區(qū)貧困家庭奉獻一份愛心”的主題，仿佛迎面而來，就能聞到滿籃瓜果飄香。圖2-1-2團購網站Banner3.熟悉構圖的概念及法則

1．構圖的概念構圖是指創(chuàng)作者在一定的空間范圍內，對自己要表現(xiàn)的形象進行組織安排，形成形象的部分與整體之間，形象空間之間的特定的結構、形式。簡單來說，構圖是對畫面的內容和組織形式進行整體設計。任何構圖都離不開點、線、面這3個元素，以點成線，以線構面，它們是視覺構成的基本元素，具有不同的情感特征，因此，要善于采用不同的組合，呈現(xiàn)不同的Banner構圖。點的聚合點的排列所引起的視覺流動，引入了時間因素，利用點的大小、形狀及距離的變化，可以設計出富于節(jié)奏韻律的畫面。如圖2-1-3所示，點的連續(xù)排列構成線，點與點之間的距離越近，線的特性就越顯著；同樣，點的密集排列構成面，點的距離越近，面的特性就越顯著。3.熟悉構圖的概念及法則圖2-1-3點的聚合示例1圖2-1-4點的聚合示例23.熟悉構圖的概念及法則線的流動線是點移動的軌跡，可在頁面上起到強調、分割、引導視線作用。在設計中，利用線對頁面空間進行分割的方法也很普遍，不同方向、長度、寬度、形態(tài)的線會給人以不同的感受。圖2-1-5所示是曲線的流動示例。圖2-1-5曲線的流動示例3.熟悉構圖的概念及法則

圖2-1-6是直線的流動示例，畫面中利用嚴謹?shù)木€條流動來展示產品信息，使頁面穩(wěn)重富有理性。

圖2-1-6直線的流動示例3.熟悉構圖的概念及法則面的分割面在設計中的概念，可以理解為點的放大，點的密集或線的重復。Banner元素在不同大小色塊元素的風格對比下，能獲得清晰、條理的秩序，同時在整體上也顯得和諧統(tǒng)一。圖2-1-7是面的分割示例，清晰突出的圖片是吸引用戶關注的第一視覺點。圖2-1-7面的分割示例

3.熟悉構圖的概念及法則

2．構圖的形式美法則在Banner設計中采用特殊的形式結構，會使畫面變得個性十足并能更好的區(qū)別于其它的同類產品，讓人印象深刻。（1）有機形的柔和與美有機形是由一定數(shù)量的曲線組合而成，是自然界外力與內力相抗衡而形成的形態(tài)。圖2-1-8所示的曲線與個性化的插圖形成強烈的對比。

圖2-1-8有機形構圖法則示例3.熟悉構圖的概念及法則（2）偶然形的獨特魅力偶然形是在力的作用下隨機形成的圖形，它具有天然成趣的效果，是利用偶然因素提煉美的方法，讓Banner設計更加與眾不同，圖2-1-9所示的偶然形構圖使頁面產生趣味性。圖2-1-9偶然形構圖法則示例4.掌握構圖的樣式和結構

將表現(xiàn)主體的各個構成要素按照主次關系放置在畫面相應的區(qū)域，形成視覺感受，達到設計意圖。主體元素、輔助元素按照什么形式規(guī)格出現(xiàn)就是構圖的樣式，不同的主體，產品使用不同的構圖樣式有著內在的規(guī)律。下面來介紹幾種構圖的樣式。（1）垂直構圖圖2-1-10垂直構圖示例4.掌握構圖的樣式和結構（2）平衡式構圖圖2-1-11平衡式構圖示例（3）斜線構圖圖2-1-12斜線構圖示例4.掌握構圖的樣式和結構(4)放射線構圖

(5)對角線構圖圖2-1-13放射線構圖示例圖2-1-14對角線構圖示例4.掌握構圖的樣式和結構(6)三角形構圖(7)框架式構圖圖2-1-15三角形構圖示例圖2-1-16框架式構圖示例4.掌握構圖的樣式和結構(8)九宮格構圖圖2-1-17九宮格構圖示例案例2-1-1中國傳統(tǒng)美食效果圖的設計制作下面通過案例分析Banner設計制作的構圖、配色、以及編排等。濃郁中國風的“?！弊职导y搭配復古邊框背景，與中國傳統(tǒng)美食“餃子”的食物圖片及“中華味道”文字相得益彰，可以完美呈現(xiàn)主題內容，效果如圖2-1-18所示。圖2-1-18中國傳統(tǒng)美食效果圖本節(jié)小結

本節(jié)主要介紹了Banner的應用領域，Banner設計的重要性，構圖的定義、法則和構圖的樣式、結構等相關知識。通過設計制作Banner案例，了解Banner的構圖、配色、以及編排等。模擬實訓一、實訓目的1．了解Banner的應用領域。2．熟悉構圖的定義和法則。3．掌握構圖的樣式和結構。二、實訓內容1.

分析“我要自學網”網站首頁Banner效果圖的構圖、配色，以及編排效果，完成Banner的設計制作，如圖2-1-19所示。圖2-1-19效果圖2.分析“唐獅音樂節(jié)”Banner效果圖的構圖、配色、以及編排效果，完成Banner的設計制作，如圖2-1-20所示。圖2-1-20效果圖項目二Banner設計與制作

任務2設計制作Banner圖片

任務目標123了解Banner圖片設計版式

熟悉Banner圖片設計排版原則

掌握Banner圖片特效動畫制作1.了解Banner圖片設計版式

圖片設計的版式包括主題形象的體現(xiàn)、整體的布局、視覺元素的大小和數(shù)量、圖片與文字的關系等。根據不同的組織形式，可以將圖片的版式大致劃分為以下幾種：（1）兩欄式這種版式布局采用的是左文右圖或者左圖右文的形式。一般表現(xiàn)主題內容的圖片占大部分區(qū)域，配以補充說明性的文字用于進一步表達主題，如圖2-2-1所示。

圖2-2-1兩欄式版式示例1.了解Banner圖片設計版式

（2）三欄式這種版式布局采用的是中間文字兩邊是圖片的形式，主次關系明確，如圖2-2-2所示。

（3）上下式這種版式布局采用的是上面文字下面圖片的形式，首先由上方的文字引導用戶的閱讀視線，再由下方的圖片更好的表現(xiàn)主題內容，圖文相結合，如圖2-2-3所示。

圖2-2-2三欄式版式示例

圖2-2-3上下式版式示例1.了解Banner圖片設計版式

（4）組合式1

這種版式布局采用的是一邊是展示產品的模特人物，另一邊是文字加圖片的形式，在表現(xiàn)形式上更加靈活，如圖2-2-4所示。

圖2-2-4組合式1版式示例（5）組合式2這種版式布局采用的是兩邊是模特人物，中間是文字加圖片的形式，在用于展示類的Banner圖片中使用此版式的居多，例如服飾，潮流單品等，如圖2-2-5所示。

圖2-2-5組合式2版式示例1.了解Banner圖片設計版式

（6）文字+背景這種版式布局采用的是純文字加背景的圖片形式，在背景的襯托下，突出文字主題的內容，重點鮮明，如圖2-2-6所示。

圖2-2-6文字+背景版式示例2.熟悉Banner圖片設計排版原則

排版就是把可視化信息如文字、圖片等元素在整體布局上調整位置、大小、方向，使版面達到美觀的畫面效果。在Banner中圖片設計遵循以下原則：對齊原則集中原則留白原則降噪原則重復原則對比原則案例2-2-1

格子切換圖片2.掌握Banner圖片特效動畫制作

Banner中圖片特效動畫，是在實現(xiàn)動畫的基礎上，大大提升動畫本身的可觀賞性。下面通過兩個案例來學習一下圖片特效動畫的制作方法。本例設計的是格子切換圖片效果，畫面通過線條分隔成格子，當鼠標滑離格子時顯示另一張圖片，整體設計風格簡潔大方，效果如圖2-2-7所示。

圖2-2-7格子切換圖片動畫效果案例2-2-2點按式像冊3.掌握Banner圖片特效動畫制作

本例設計的是電子婚紗相冊，通過鼠標單擊左側的縮略圖，在右邊可以查看放大的相冊圖片，效果如圖2-2-8所示。

圖2-2-8點按式相冊動畫效果強化案例圖片幻燈片3.掌握Banner圖片特效動畫制作

本案例是網站Banner中經常出現(xiàn)的圖片幻燈片動畫效果，圖片漸漸淡出顯示，當鼠標經過右下角圖片縮略圖時切換大圖顯示，效果如圖2-2-9所示。

圖2-2-9圖片幻燈片效果本節(jié)小結

在本節(jié)里主要學習了Banner圖片設計的相關知識，熟悉幾類Banner圖片設計的版式應用以及圖片設計的六大排版原則，最后結合實際案例講解了Banner圖片設計動畫的制作方法。希望讀者通過學習可以設計制作簡單的Banner圖片動畫。模擬實訓一、實訓目的1．了解Banner圖片設計排版樣式。2．熟悉Banner圖片設計排版原則。3．能夠制作簡單的圖片特效動畫。二、實訓內容1．制作“隱藏的圖像”動畫效果，效果如圖2-2-9所示。（提示：遮罩動畫和隱形按鈕的應用）

圖2-2-9隱藏的圖像動畫效果項目二Banner設計與制作

任務3設計制作

Banner文字任務目標123了解文字在Banner設計中的地位掌握Banner中文字設計技巧

掌握特效文字動畫制作

1.了解文字在Banner設計中的地位

在Banner中，信息的表達通常是通過文字、圖像等方式，其中Banner中最重要的設計元素就是文字，相對于圖形來說，文字的信息傳遞方式更直接，所以文字在Banner的設計中占有舉足輕重的地位。為了配合網頁的整體效果，網頁中Banner文字的設計，一般以特效文字樣式呈現(xiàn)，用以突出主題。圖2-3-1所示網頁Banner中的字體使用了漸變描邊文字，來彰顯活動的主題。

圖2-3-1網頁Banner示例1.了解文字在Banner設計中的地位

在網絡廣告中為了突出廣告主題，使用戶在第一時間就能關注到所要表達的內容，常使用特效文字來突出顯示。圖2-3-2所示的廣告彩燈文字和描邊文字，將畫面中的宣傳廣告表達得獨特醒目。

圖2-3-2特效文字示例2.掌握Banner中文字設計的技巧

隨著生活中不同應用需求的增加，各類Banner設計對文字的要求也日益增多；Banner中的文字可以根據不同需求，不同的氛圍，去找尋具有準確性、關聯(lián)性、獨特性的個性設計，以傳遞用戶的需求和產品特征,下面和大家分享一些Banner中文字設計的技巧。1．處理文字的數(shù)量如果Banner中的文字過長，而且不能刪減文字的情況下，如圖2-3-3所示宣傳端午節(jié)的網頁Banner，可對文字進行比較處理，突出主題文字。圖2-3-3網頁Banner長文字示例2.掌握Banner中文字設計的技巧

如果Banner中的文字過短，畫面太空，可加入一些輔助信息豐富畫面，如圖2-3-4所示的Banner，在圖中加入類似時間、英文、域名、頻道名或意念方面等輔助文字充實畫面。圖2-3-4網頁Banner短文字示例2.掌握Banner中文字設計的技巧

2．構建輔助的視覺（1）文字+背景陪襯兩段式。這類Banner設計畫面感強，視覺集中，突出文字顯示主題，如圖2-3-5所示。圖2-3-5文字+背景陪襯兩段式2.掌握Banner中文字設計的技巧

（2）文字+主體物兩段式。這類Banner設計中文字和圖案相輔相成，起到文字言事，圖案補充理解的效果，最適合做介紹類或者產品類的Banner，如圖2-3-6所示。圖2-3-6文字+主體物的兩段式2.掌握Banner中文字設計的技巧

（3）主體物+背景+文字三段式。這類Banner設計是目前應用最廣泛的主流設計。畫面虛實結合，主次關系明顯，如圖2-3-7所示。圖2-3-7主體物+背景+文字三段式2.掌握Banner中文字設計的技巧

3．控制文字的留白文字的旁邊要留有一定剩余的空間，這樣能使它們更突出，避免廣告條的每一個角都有文字，不要以為這樣做分散文字，可以通過調整個別的文字，讓瀏覽者更好地理解。文字緊靠邊緣的廣告條讓人看起來很不專業(yè)，在Banner設計中要避免這一點，如圖2-3-8、2-3-9所示。圖2-3-8Banner中文字緊靠邊緣圖2-3-9Banner中文字留有適當空白2.掌握Banner中文字設計的技巧

廣告條的邊緣不是一個休息場所，也不是一個可以讓文字跑出去的空房間。它是一個內容與邊緣保持適當距離的區(qū)域，如圖2-3-10、2-3-11所示。圖2-3-10Banner中文字邊距太小

圖2-3-11Banner中文字邊距合適2.掌握Banner中文字設計的技巧

4．調整文字的間距如果文字較小，間距也小的話，會使瀏覽非常困難，輕微的調整能產生意想不到的變化。越小的文字越需要大的間距來提高它們的可讀性。對比圖2-3-12、2-3-13所示圖片，圖片上使用的是同樣大小的字體，但間距調大了，是不是更容易看清，效果一目了然。圖2-3-12Banner中小文字間距過小圖2-3-13Banner中小文字間距合適案例2-3-1淡入淡出文字動畫3.掌握特效文字動畫制作

在Animate中提供了非常強大的文本編輯功能，在動畫效果中除了可以輸入文本內容外，還可以制作出各種特效文字動畫。下面主要介紹火焰文字、模糊文字、漸現(xiàn)文字等特效文字動畫的創(chuàng)建。

本案例是為科技公司設計的網站宣傳Banner動畫，在富有科技感的漸變藍色背景下，左面自下向上顯示雙手托舉網絡互聯(lián)的地球圖片，同時右面文字淡入淡出顯示廣告宣傳語，兩者相得益彰，如圖2-3-14所示。圖2-3-14動畫效果案例2-3-2跳動文字動畫

3.掌握特效文字動畫制作

本例設計的是房地產廣告，制作出在背景圖片的襯托下，一排文字形成一道動態(tài)風景的跳動文字動畫，通過文字動畫，加強畫面表現(xiàn)力，效果如圖2-3-15所示。圖2-3-15跳動文字動畫效果案例2-3-3漸出文字動畫

3.掌握特效文字動畫制作

本例設計的是珠寶網站首頁動畫中的漸出文字動畫，文本從左向右、由大到小、由透明到清淅依次出現(xiàn)，使網站頁面更具有表現(xiàn)力，效果如圖2-3-16所示。圖2-3-16漸出文字動畫效果強化案例卷簾文字動畫3.掌握特效文字動畫制作

本例是為咨詢公司設計的宣傳動畫，在古典風格的背景下，配合“睿智全瞻，文才韜略；運籌帷幄，決勝千里”的文字，巧妙的把公司名稱融匯其中，營造出大氣磅礴的氛圍效果，如圖2-3-17所示。圖2-3-17動畫效果本節(jié)小結

本節(jié)主要學習了Banner中文字設計的相關知識，了解文字在Banner設計中所占據的重要地位，掌握文字設計的幾點技巧，最后結合實際范例講解了Banner文字設計動畫的制作方法。希望讀者通過學習可以設計制作各類Banner文字動畫。模擬實訓一、實訓目的1．了解Banner的字體設計方法。

2．掌握幾種特效文字動畫的制作。3．能夠對文字動畫效果舉一反三。二、實訓內容1．本例設計的是橫幅類廣告中的模糊文字動畫，文字清晰、沖擊力強，文本由右向左閃電般模糊出現(xiàn)，然后轉換為金黃色發(fā)光的文本，與背景畫面相映，制作“模糊文字”的效果，如圖2-3-18所示。

2-3-18模糊文字動畫效果2．制作“火焰”文字特效。以網絡游戲中的人物畫面為背景，游戲名稱采用了火焰文字特效，讓玩家對游戲產生激情燃燒的感覺，效果如圖2-3-19所示。（提示：使用遮罩層創(chuàng)建文字遮罩動畫）

圖2-3-19火焰文字動畫效果項目二Banner設計與制作

任務4設計制作Banner主題任務目標123了解Banner主題設計風格掌握Banner主題設計技巧

掌握Banner主題設計動畫的制作

1.

了解Banner主題設計風格

在進行設計之前，首先應該與用戶溝通，了解用戶想要表達的主題，然后確定設計的風格，有針對性地對Banner主題進行設計，形象鮮明的展示所要表達的內容。下面通過一些實例來了解常見的Banner主題設計風格。

1．時尚風圖2-4-1所示為兩個Banner設計，其都有共同的特點，大標題、模特，報刊潮流雜志風。這類風格主要用于衣飾、鞋帽等流行單品的展示。

圖2-4-1時尚風示例1.了解Banner主題設計風格

2．復古風復古風的特點是傳統(tǒng)元素和復古圖案，圖2-4-2所示的左邊的Banner中文字使用了水墨感覺的書法字體，右邊的Banner則是包含了傳統(tǒng)的賽龍舟剪紙元素，非常切合端午節(jié)的主題。

圖2-4-2復古風示例1.了解Banner主題設計風格

3．清新風清新風的特點就是畫面清爽、唯美，色彩搭配清新自然，圖2-4-3所示的banner，就給人十分清麗和透亮的感覺。

圖2-4-3清新風示例4．炫酷風這種風格通常比較多的使用深色背景，常用有質感的元素與光影特效，圖2-4-4所示的Banner色彩華麗，引人入勝。圖2-4-4炫酷風示例1.了解Banner主題設計風格

5．簡約風簡約風的特點就是極簡主義、大空間，圖2-4-5所示的banner沒有任何過多的裝飾元素，整體感覺就是非常的簡潔大方。

圖2-4-5簡約風示例6．歐美風在藝術作品、商品等事物，在整體上呈現(xiàn)出歐美事物的面貌，被稱為歐美風。圖2-4-6所示的某珠寶的B2C網站的Banner。圖2-4-6歐美風示例2.掌握Banner主題設計技巧

在實際的工作中經常會遇到不同Banner主題設計的需求，從設計成本考慮用戶不會給太多的設計時間，那么如何才能在短時間內做出一個成功的banner呢？下面總結出一些Banner主題設計的技巧一起分享。

1．思考主題定位（1）考慮對象的定位因為分類內容不同，門戶網站各個頻道有著不同的風格，所以在做設計的時候也要考慮這個因素，圖2-4-7所示為女性頻道的定位是女性，所以這個Banner的設計風格也很貼合這個定位。

圖2-4-7女性頻道主題Banner2.掌握Banner主題設計技巧

（2）考慮專題的定位頻道和專題的定位有時是有沖突的，當存在風格沖突的情況下，盡量以貼合專題的定位為主，也盡可能避免偏離頻道風格。圖2-4-8所示是歷史頻道主題Banner，以水墨畫作為背景，表現(xiàn)出滄桑厚重的歷史感。

圖2-4-8歷史頻道主題Banner2.掌握Banner主題設計技巧

2．創(chuàng)造力對主題的藝術化表現(xiàn)（1）新感覺重塑嚴肅話題圖2-4-9所示為所示為抗洪救災的新聞主題Banner，畫面中的洪流、堤壩、抗洪搶險的武警官兵及“抗洪救災，你我同行”的文字內容，都很好地傳達了主題思想。在設計Banner時，不僅要考慮整體畫面的設計，還要突出主題。

圖2-4-9新聞主題Banner2.掌握Banner主題設計技巧

（2）幽默感呈現(xiàn)輕松話題在設計一些輕松且具有娛樂感的主題時，更應該用天馬行空的創(chuàng)意營造輕松詼諧的氛圍。圖2-4-10所示的這個專題banner，以繪制在手指上的漫畫人物搭配手勢動作表現(xiàn)主題內容，畫面詼諧有趣，引人注目。

圖2-4-10娛樂主題Banner2.掌握Banner主題設計技巧

（3）小情調充實主題創(chuàng)意有時候一點小小的創(chuàng)意也會讓banner增色不少。圖2-4-11所示的這個Banner，水墨暈染中不僅有皮影人物，還有文字；從背景到文字都體現(xiàn)出中華傳統(tǒng)文化的主題內容。

圖2-4-11中華傳統(tǒng)文化主題Banner案例2-4-1復古主題設計動畫3.掌握Banner主題設計動畫的制作

本例是東方意蘊設計工作室網站的Banner導航動畫。在彩色圖案和黑白色圖案相結合的背景下，沿藤蔓飛舞的蝴蝶，下落的文字，營造出復古的氛圍，呼應網站主題，效果如圖2-4-12所示。圖2-2-12復古主題設計動畫效果強化案例

卡通主題設計動畫3.掌握Banner主題設計動畫的制作

本案例是為購物網站設計的宣傳動畫，利用遮罩動畫先顯示鼠標連線顯示器，屏幕中出現(xiàn)購物的櫥窗，然后改變造型為快遞車，體現(xiàn)了網上購物，“一站到家，快捷高效”的宣傳主題，利用手繪的卡通圖像造型，營造輕松愉快的購物氛圍，效果如圖2-4-13所示。圖2-2-13卡通主題設計動畫效果本節(jié)小結在本節(jié)里主要學習了Banner主題設計相關的知識，介紹了幾類Banner主題設計的風格、特點，和讀者分享了Banner主題設計中運用到的幾點小技巧，最后結合實際范例講解了Banner主題設計動畫的制作方法。希望讀者能夠舉一反三學會制作簡單的Banner主題動畫。模擬實訓一、實訓目的1．了解Banner主題設計的風格。2．掌握Banner主題設計的技巧。

3．能夠制作簡單的Banner主題設計動畫。

二、實訓內容1．此例是為科技公司設計的Banner動畫，在極具個性的工業(yè)化風格背景的映襯下，加上文字特效。整體色彩搭配極具科技感，引人入目，效果如圖2-4-22所示。（提示：元件的制作，逐幀和補間動畫的運用）

圖2-4-13現(xiàn)代主題設計動畫效果項目二Banner設計與制作

任務5設計制作軟文Slogan

任務目標123熟悉軟文Slogan構圖規(guī)則

掌握軟文Slogan構圖樣式

掌握軟文Slogan動畫制作

1.

熟悉軟文Slogan構圖規(guī)則

構圖就是對畫面進行合理的布局，在構圖的引導下，使用戶了解展示的內容，產生購買的沖動，如果能夠達到這樣的目標，就說明是成功的構圖。構圖的基本規(guī)則是：均衡、對比和視點。均衡均衡不同于對稱，是一種力量上的平衡感，使畫面具有穩(wěn)定性，如圖2-5-1所示。

圖2-5-1均衡不是對稱1.熟悉軟文Slogan構圖規(guī)則

對比在構圖上來說可以是大小的對比，粗細的對比，方圓的對比，曲線與直線的對比等等，如圖2-5-2所示。

視點就是如何將用戶的目光集中在畫面的中心點上，利用構圖去引導用戶關注的視點，如圖2-5-3所示。

圖2-5-2白色線條的對比產生了空間感圖2-5-3將視點集中引導到slogan上

2.掌握軟文Slogan構圖樣式

在軟文Slogan構圖中大概分以下幾種樣式：1．垂直水平式構圖如圖2-5-4所示，在畫面中每個產品平行的排列，各個產品所占比例相同，秩序感強，每個產品都能很好的展示。此類構圖給用戶呈現(xiàn)的是產品規(guī)矩、正式、安全感強。圖2-5-4垂直水平式構圖示例2.掌握軟文Slogan構圖樣式

2．正三角形和倒三角構圖如圖2-5-5所示的是多個產品進行正三角構圖，產品立體感強，各個產品所占比重有輕有重，構圖安定自然，空間感強。此類構圖給用戶呈現(xiàn)的是穩(wěn)定可靠、安全感強。圖2-5-5正三角形構圖示例如圖2-5-6所示的是多個產品進行倒三角構圖，產品運動感極強，構圖動感活潑。此類構圖給用戶呈現(xiàn)的是不穩(wěn)定感以激發(fā)用戶激情，有一種運動的感覺。圖2-5-6倒三角形構圖示例2.掌握軟文Slogan構圖樣式

3．對角線構圖如圖2-5-7所示的是一個產品或兩個產品進行組合對角線構圖，產品的空間感強，各個