企業(yè)官網類主視覺 Slogan Deisgn 設計分享

主要分析如何巧用slogan（品牌口號，廣告語），實現網頁banner的創(chuàng)意表現。slogan在banner中占據著舉足輕重的地位，slogan設計得好，可以成為廣告圖的點睛之筆，畫面品質感明顯提升。設計得不好，也能毀掉整個banner。

1、 那么來了解下Slogan對Banner有多大的影響？

如果說banner比作一個人的臉，那么標語就相當于臉上的五官，以及臉的架構。一個人是否帥氣主要還是看她的臉的骨架和五官是否精致，同理你應該知道標語對banner視覺的影響有多大啦。

那么來看看哪些標語而廢掉設計作品！

下面整體的背景和產品質感都可以，但卻給用戶看著顯得狠low，是因為被標語設計排版給破壞了。（ 這里隨便選擇了一些作品，只代表個人觀點哦～ ）

1. 標語排版位置以及大小對比度不夠太過于小  所以壓不住畫面所以導致畫面視覺沖擊力不夠

2，英文和vi元素不搭配 文字無緊湊感，對比不夠。

3，框太細，文字對比不夠，沒有品牌感。

4，文字和畫面不夠呼應，太小壓不住畫面，文字太呆板點綴突出設計有點讓人琢磨不透 層次感不夠

5，樣式過于多，色彩 大小樣式  主次關系

通過以上舉例的部分案例

我們發(fā)現一個banner設計的好壞，光靠質量高的圖是達不到的，還要有一個好的Slogan設計。

那么我們如何使用Slogan 讓 banner變得更有設計感呢，

這次從入門到基礎到初級進行分析。

入門  －  在畫面中比例位置 

基礎  －  結合圖案／圖形 

初級  －  改變形狀／字體樣式

01 :  Slogan在畫面中比例位置

標語在畫面中的構圖常見為 左右對稱 上下對稱  對角對稱 滿屏  （Z L E ）字形對稱 黃分割比位置等

主要根據畫面中為圖片主視覺元素 來定制標語位置在那里。最好不能破壞畫面的 平衡感 統(tǒng)一性 可讀性等原則。

02：通過結合／圖形元素來上slogan變得具有設計感

注意 在使用的時候需要注意品牌的定位，運用環(huán)境，以及在畫面中的比列位置等，盡量不要影響畫面構圖。

常見的一些設計方式分為

一：Slogan／方形

方形最大的最用就是可以起到突出分割修飾等作用，可以得畫面產生強烈的對比。方形運用的行業(yè)比較綜合，

比較中性的元素，少數使用于女性小孩行業(yè)中。

01:具有突出／分割作用

下圖中設計師突出了22 所以利用了方形進行突出,標語布局采用了對角布局的方式。

讓整個畫面視覺產生了平衡感。

二：Slogan／方框

01:使標語更緊湊，增加層次感。

下圖中設計師為了讓兩端文案變得更整體，不被背景圖片所干擾，所以采用了方框的方式進行設計，標語位置位于畫面上下左右居中位置。

02: 讓文案單獨去分并且突出出來。

作品也是采用了框型的元素使畫面中的文案彼此不被干擾。標語在畫面中位于左下角位置。巧妙的平衡了整個畫面

03 : 增加層次感

此作品原本人物和圖片是緊貼在一起的設計師使用了線框的元素，巧妙的使得整個標語和畫面變得具有層次感。

相同標語唯一水平垂直居中位置使得畫面更加具有空間感。

這里設計師也是使用相同的處理方式，注意在使用線條的時候 一定要讓線條穿插不一樣的平面，才能給用戶傳達出前后層次的關系。

二：Slogan／三角形

其實和方形一樣三角給用戶的感受更加凌厲，主要運用在運動或者器械類行業(yè)偏多，主要給用戶的目的也是起到突出吸引區(qū)分平衡畫面等作用。

01:運動類行業(yè)增加速度感／豐富畫面。

設計師使用了三角形的元素在畫面中，與文字結合起來。給用戶傳達出運用的極速／凌厲的感覺。

下面作品的表現方式也是采用相同的設計方式。

三 ：Slogan／圓形

同理圓形也是一樣起到的作用 具有突出，分隔 ，等作用，主要給用戶傳達出平滑柔性的感受，圓形主要分為圓橢圓等常用于化妝品，偏向女性化小孩等用戶群體居多。

01 : 突出分隔作用

利用圓形讓中間的標語在畫面中突出出來，起到吸引用戶的視覺，還能通過圓點讓標語和背景和之間具有一定交互效果。

02:增加層次感／豐富畫面

這是一款適用于家庭行業(yè)的產品，設計師一樣采用啦柔性的元素橢圓形和文字搭配讓標語變得具有前中后層次感，而元素上的色彩也豐富了畫面。

四：Slogan／不規(guī)則幾何圖形

不規(guī)則圖形也是一樣用具有突出，分隔 ，等作用， 常于運用在個性化行業(yè)中，比如潮牌，個人設計師網站等。

01:突出分隔作用

準確的說右邊圖形兩個多邊形組成的，恰好從畫面中起到了突出作用。

02: 當作標簽使用

整個標語排版比較活躍，設計師巧妙的將圖形運用在標簽上面，使得整個標語變得更有設計感。

五 ：不規(guī)則幾何圖形

slogan中往往提取一部分來自vi標志中的圖形元素，會讓整個設計起到畫龍點睛的作用，這類設計常用在品牌網站中，用于傳達企業(yè)的品牌知名度。

01:直接運用全部品牌圖形

右邊設計作品中設計師直接將品牌vi圖形元素運用在slogan中，向用戶傳達品牌知名度。這類運用建議挑選比較具有設計感的圖形運用，或者具體vi的距離稍微遠一些，這樣避免畫面元素重復。

下面作品也是采用了相同的設計方式

02 : 運用品牌輪廓比例

Slogan中的圖形化形狀來源于品牌vi的外形讓畫面變得具有透氣感，同時也傳達出來了品牌感。注意盡量挑選vi 輪廓有規(guī)律的圖形來嘗試。太復雜的話會讓用戶不太理解，以及畫面的不美觀。

03 : 運用品牌中間的色彩形狀

這里方法使用的比較多，也是比較容易的方式，右邊設計作品Sloagn設計師就采用了品牌中的幾何圖和文字進行組合，有效的傳達出了品牌概念。注意在選取元素的時候一定要選取突出的元素進行運用便于用戶識別。

04 : 運用品牌中間的圖形元素

也是一樣直接使用了品牌中的元素運用在slogan中。做到了傳達和美感的兩不缺。

六 ：Slogan／繪畫元素

使用繪畫的方式會讓整個slogan在風格和材質統(tǒng)一性更強／更有趣味性。多數適合于各種行業(yè)

01:制造環(huán)境

設計師將slogan制作成繪畫模式的，然后添加一些各種生活中的小元素進行結合讓他們成為一體。給人趣味的感覺，注意一般做此類設計的適合切勿你添加的元素不要搶過了你的主體。

下列設計也是運用相同的設計方法。

02:制造特殊圖形

設計師使用骷髏圖形來表達自己想要的概念，配合slogan還是比較超前的，需要注意的是 切勿讓插畫元素和slogan之間的對比不大，比如顏色空間大小等。

03:增加立體感。

這是一個設計師個人網站的主頁，設計師設計了場景式的插畫和slogan結合使空間感增強。

注意如何作出空間感的設計，確保材質不要變得一樣。以及前后的大小的對比調整。

03 ：通過結合圖片素來上slogan變得具有設計感

注意 在使用的時候需要注意品牌的定位，運用環(huán)境，以及在畫面中的比列位置等，盡量不要影響畫面構圖。

常見的一些設計方式分為

一 slogan／品牌圖片

相對于圖形化，圖片的結合更加具有感染力。更塊把帶你帶入情境中，主要作用還是宣傳品牌為主。多數會從品牌宣傳的元素中提取元素進行結合，比如代言人產品 視頻 插畫等。

01 : 使用模特特質作為修飾

下面設計一看模特就知道是做他是什么行業(yè)的，同時圖片在和slogan結合使用使得畫面更加具有青和力，注意選擇模特的時候一定要選擇主體明確，具有品牌特色的模特還有很多就不多舉例子了。

二 ：slogan／產品圖片

在產品上增加文字能巧妙的向用戶傳達出產品的信息，同時拉開了節(jié)省了大量信息展示空間，又能在視覺上增加層次感主要運用于產品類網站。

01:展示產品型號為主

設計師在產品后面增加簡單而大大羅馬數字2，使得用戶清晰的理解這是第二代產品，同時拉開了鞋子的層次感。

同理下面作品設計師也是采用同樣的方式。使用slogan和產品圖結合 一樣達到了預期的效果。值得注意的是我們在設計類似效果一定要保證用戶能看的明白字的含義，字數不能太多，字體根據品牌或產品的形狀選擇。

三 ：slogan／場景圖片或視頻

場景顧名思義使用和品牌相關的圖片和文字之間進行組合起來，讓字體不再單調。這里多數情況以h5方式來展示。

01 : 使用文字遮罩的效果

設計師巧妙的用文字遮罩的效果和圖片進行結合起來，避免來畫面的壓抑，又能讓用戶了解它是什么。

02 : 結合動效更有趣

這里也是采用來相同的方法，雖然沒有展示圖片的主體部位，但是采用了動效的方式播放，一樣可以達到預期的效果哦，注意你的文字周圍的元素一定不要強掉文字主體哦，一定是輔助而不是主體

03 : 模擬真實場景的使用

設計師為了讓文字和場景完美的結合，讓文字和紙張完美的結合，利用紙張和文字字母大小的前后關系打造出具有空間感的畫面。其實這里利用舉一反三的思路，可以產出很多設計，比如書桌，書本，黑板等等...

四：slogan／圖形圖片

圖形和圖案之間結合起來會擦出怎樣的火花？會讓你的標注變得更有art的感覺。

01 : 虛實結合，傳達出不一樣的感受

本來實物的花朵設計師使用了虛擬的手法讓花變得具有層次感，最后畫龍點睛將文字放在圖的后面，讓畫面空間感十足。同樣可以舉一反三，比如你想表達汽車的車燈，網球的球拍等都可以運用相同的手法。

總結

無論是用圖形或者圖片和slogan結合使用，都要和行業(yè)相呼應。

比如三角，方形，多邊形等非圓形更多運用在運動，機械，電器，男性化等行業(yè)，傳達出 速度感，凌厲的調性。

而橢圓，圓形等曲線類形狀，更多運用在品牌定位為女性，小孩群體的用戶比如化妝品，護膚類，幼兒園。 這類讓用戶更容易接近接受。

而照片類的使用側更容易感染用戶，更多給用戶傳達出真實感。多數使用在畫面背景干凈上面，加強對比度，就能展示出照片的紋理，和真實感。

04 ：通過變化slogan整體的形狀讓他們變得具有設計感。

常見設計方式為

一：slogan／ 多邊形

整個slogan等外形在排版的時候往往很死板，不透氣。如果我們使用多邊形的方式，

會讓slogan具有設計感。

01 : 三角形

常見標語架構偏向有正三角，倒三角，右邊三角形這幾種形態(tài)。這里就介紹長見到的正三角形的設計形態(tài)。

02 : 方形

常見表現方式 長方形 正方形 這兩種形態(tài)，主要作用使得標語排版具有嚴謹的感覺。

03 : 圓形

常見方式有橢圓 圓形 這兩種形態(tài)這樣的排版方式，下面設計作品就是使用了圓框的元素和slogan結合使用，

注意此類設計方式的時候，得注意文字的數量，因為純商業(yè)的比較少，畢竟比較難保證它的可讀性。

04 : 六邊形

五邊形六邊形比較多運用在于字體排版往往會使slogan變得具有層次感。設計的時候切勿不能亂用哦，一定要符合設計的本質才能使用。

二：slogan／ 傾斜

使用傾斜的設計方式（弧形，左右傾斜，等等改變slogan整體形狀的角度）告別死板的slogan設計方式。

01 : 上弧形

球形等運用會使得slogan外形框架更具有空間感。這里主要通過變形工具使得整個slogan形狀變得曲面化。下面的設計測采用了圓形偏上的設計手法。

02 : 上下弧形

下面作品設計也是采用上下弧度的設計方式讓slogan變得更具有空間感。

03 : 左右傾斜/旋轉

下面作品讓slogan右傾斜很有效的解決了slogan呆板性。右傾使得畫面更有緯度。

這里slogan也是采用了相似設計手法 不過是左傾斜

二 ：slogan／ 豎列

slogan使用豎列的排版也能讓主視覺更加具有別具一格的感受。

此類設計更多運用在偏向情懷文化類的產業(yè)中運用。

01 ：豎列

下面slogan設計使用了豎列排版的設計方式使得整個畫面具有設計感。 注意往往豎列排版給用戶的閱讀性不是很高，所以我們需要多控制文字多數量。以及主次關系。

下面也是采用了相同的設計方式。文字數量上控制的不多。

三 ：slogan／橫豎結合

橫豎排版常見于運用在中國風或單獨的設計中。豐富標語層次感。下面slogan設計使用了橫豎結合的設計方式。設計的時候需要注意：前后關系層次，主次關系等比例。

四：slogan／字母

左邊測試z形狀布局，注意不同類型字母的比例架構位于畫面的位置也會相對的改變。比如LE更多偏向左邊或者右邊，Z字形多數運用在中間等。

05 ：通過變化slogan中間文字的字體樣式能夠產生強烈的對比增強設計感。

常見設計方式為

一：slogan／豐富層次 

通過改變slogan中間的部分文字的大小或者形狀，以及位置關系。能增加整體的層次感。

01 : 單獨字體尺寸

通過改變slogan字體的大小來制造出標語中段落的空間感。右邊設計中就是放大數字01 讓它和其他的文字產生對比。

02 : 豐富背景。

下面的設計也是一樣，將slogan中的文案單獨突出出來，作為背景使用。

他這邊更多表現的是一種修飾為主，但是同樣也讓文案保持來一定的對比。

03 : 通過改變特殊樣式

下面設計設計師通過改變slogan中的標題的材質使得標題和副標題產生對比制造出來空間感。

04 : 通過改變色彩／位置

右邊設計師通過改變slogan中字體的色彩和在畫面中的排版位置，有效拉出來層次感。

二 ：slogan／改變字體

很多時候在slogan中給重要的文案通過字體的選擇或者變化，也可以使得slogan變得具有設計感。

01 : 給標題選擇不一樣的字體

下面設計設計師將slogan中的主標題采用特殊的毛筆字字體。讓標題和段落文字產生了對比，使整個slogan變得具有層次感。注意這里我們選擇一個毛筆字體然后下載一些筆刷拼接。即可產生設計效果。

當我們碰到畫面slogan文字信息少的時候我同樣可以采取一些特殊的字體搭配，比如毛筆字體等。注意，設計師適當的時候需要做一些變形等增強一些設計感。

02 : 進行字體改造

在slogan中單獨提出文字出來進行字體改造也是一種辦法。注意設計師在這里可以多研究一些字體變形設計方法。具體可以關注站酷上字體設計師的教程。

三 ：slogan／其他

其他的一些方式就是利用點線面輔助元素和標語結合，增加文字層次感，以及突出文字。

01 : 使用線條強調

下面設計作品slogan設計師就增加來粗線條來突出和強調信息。

下面的設計作品也采用了相同的設計方法。

下列設計作品加了面的元素結合到slogan中進行輔助作用。豐富了slogan的設計感。

下面slogan結合了點的元素，同樣豐富了slogan的設計。

總結

在使用標語進行變形的時候，總結出來了多邊形，圓方  三角  橫豎 排列 傾斜等 或者 字體變形 增加對比作用出了我們介紹的方法不能死用。要根據品牌調性以及畫面中的比例去用。