家電banner怎麼配色

『壹』 Banner設計的六大原則是什麼

Banner設計可以說是日常工作中最主要的一塊需求，banner不比大型項目，從設計成本上來講不可能給太多的時間給設計師，所以這也引發了我對如 何更有效率地完成一個banner的思考。構成banner的重點主要有三個方面，即風格，排版以及配色。先定風格，再做大致的排版 和配色，然後根據整體再來調整，最後再優化細節。呢么banner設計的原則是什麼呢？
一、對齊原則
相關的內容要對齊，方便用戶視線快速移動，一眼看到最重要的信息。
二、聚攏原則
將內容分成幾個區域，相關內容都聚在一個區域中。
三、留白原則
千萬不要把banner排得密密麻麻，要留出一定的空間，這樣既減少了banner的壓迫感，又可以引導讀者視線，突出重點內容。
四、降噪原則
顏色過多、字體過多、圖形過繁，都是分散讀者注意力的」噪音」。
五、重復原則
排版時，要注意整個設計的一致性和連貫性，避免出現不同類型的視覺元素。
六、對比原則
加大不同元素的視覺差異，這樣既增加了banner的活潑，又突出了視覺重點，方便用戶一眼瀏覽到重要的信息。

『貳』 Banner設計關鍵性要素有哪些

1、網站Banner圖構圖

構圖是網站建設和設計中最重要也是最基礎的一部分，我們在設計網站Banner圖中都需要先經過排版，確定出Banner整體效果之後，我們在進行創意性的整體填充，這樣做的目的就是讓Banner樣式更加豐富。其實網站Banner中最根本還是圖文的集合，我們在設計Banner中可以按照下面幾種圖文集合的方式進行：左字右圖、左圖右字、左中右構圖、上下構圖、文字作為主體居中、不規則構圖，按照這種排版方式我們就可以做出效果和內容更加豐富的Banner。

2、Banner中字體呈現出來的效果

字體在Banner中表現出來的作用無可替代，因為字體的氣質和樣式以及畫質直接決定banner設計中好壞，如果Banner中字體設計出來特別難看，這在用戶心中就會直接大打折扣。因此，我們在選擇字體就就需要採用宋體和細黑體兩種形式，這樣設計出來Banner整體看起來更符合網站，也更符合整體網站和諧性。

3、Banner配色

Banner配色通常都是根據網站內容和網站整體風格進行適當搭配，這樣做的好處就在於讓網站Banner圖中顏色調節飽和度和明度。例如，我們在設計網站Banner的時候，可以採取黃黑白這三種顏色搭配的方式進行，這樣做出來的效果更加顏色效果對比鮮明，而且視覺效果更加具有沖擊力。推薦閱讀:網站優化首頁輪播圖設計的技巧

4、Banner裝飾

無論做任何網站都需要進行內容、顏色和圖片的裝飾，因此在網站Banner中同樣也是如此，我們在Banner中加入一些小的元素和小裝飾這樣讓Banner更加具有設計感，起到點綴和豐富畫面的作用。

我們再設計Banner中就需要進行點、線、面相互組合，相互平衡，設計出來的Banner圖更加豐富多彩，再加上字體的選擇與設計、配色的分析、裝飾的應用彰顯出Banner與眾不同。

『叄』 UI設計的顏色搭配方式！

想學習更多UI設計相關知識，從軟體開始，附贈教程點擊（UI設計）獲取

『肆』 如何提高電商Banner廣告設計水平呢

一、圖案圖形節奏感
圖案相比大家都知道，也或多或少用過。圖案放大可以變得大氣，縮小也可以很精緻。
而Banner中經常會出現的圖案大都是幾何形狀的重復或旋轉得到的圖形，用來做為背景的紋理來豐富背景的細節感。有時候有人經常會說背景里少了點什麼，下次你不妨嘗試一下用用。不是一定要用，如果你需要可以試試效果呢。
更多平面設計知識，請咨詢華南電腦學校。
二、裝飾碎屑氣氛足
Banner設計中經常用到會有彩禮飄帶、矩形、三角形、紅包外形、橫條等裝飾。
三個需要注意的方面
1)有大有小
最基本的基礎，因為大小產生空間感、節奏感。
2)別克隆
別克隆的意思就是不要所有元素都重復的使用，案例中的三角形有描邊的、填充的、幾何體，元素更豐富了，但適可而止。
3)有深有淺
案例中三角形的顏色有深淺看到了吧，這樣做是讓畫面不會很平沒有遠近感覺。
三、分割背景更活躍
有人問我這個Banner用什麼分割呢？圓形、矩形？當場我就愣住了，只想靜靜。這個你自己想用什麼分割都可以呀，不同的分割給人不同的視覺感受。搞清楚你想要的就知道用什麼了。
因為它在Banner設計中的確是很有效果的，所以我們不僅需要實踐，還要進行對比分析，這一我們才會成長的更快嘛。
四、背景顏色大色塊
大面積色塊的應用，在Banner設計中特別明顯。也是非常有效，天貓、京東等這些國內電商平台的活動經常是以色塊背景為主。色塊在很久之前就很流行，作為一種風格。在大色塊背景上面，白色的文案、圖案就成為了視覺焦點。在色塊背景上應用類似時尚的波普元素，畫面節奏感就出來了。
用色塊背景的時候該注意什麼
最重要的就是配色了，顏色盡量不要超過三種。模特或產品的顏色不要和背景顏色跳躍太大，列如上面的案例背景是藍色，那麼其它的顏色可以是青色、紫色、黃色搭配起來會比較舒適。可能你會說黃色和藍色相隔那麼遠，黃色是和任何顏色都可以很好的搭配的，所以你會看到官方的Banner圖中出現黃色的利益點、小色塊。
如果你用不好對比色、互補色、近似色等這些配色理論。那我們就把這些簡化成2個點：
01)暗色配亮色、亮色配暗色。
02)深色配淺色、淺色配深色。
五、Banner 終極寶！設計師終極絕招!
圖案圖形讓畫面變得節奏感。
背景分割沒有特定的形狀，而是看你需要什麼形狀。
配色切勿亮色配亮色、暗色配暗色。
優秀的設計案例還有很多這個需要大家平時的採集和觀察，更多的思考你會發現更多的空間。
修改後兩側更加飽滿、標題也更有氣氛。

『伍』 節日banner的設計步驟有哪些

1、節日banner的設計步驟——檢查環境

節日橫幅設計的第一步是檢查頁面級別、空間使用、適當的焦點和視覺風格

2、節日banner的設計步驟——了解需求

改善感染力、設定基調、構圖和裝飾

首先，本次活動的主題是慶祝公司成立二周年並發放現金獎勵。你可以用茄子來表達周年慶的喜悅，也可以在蛋糕上點上蠟燭。蠟燭代表生日。UI設計配件可以突出紅包、現金、輔助綵帶等。附件可根據整體情況自由布置。通過初步的環境監測和第二部分的需求調查，形成了一個簡單的界面設計草圖。

3、節日banner的設計步驟——草圖

可以網路一些UI設計橫幅材料，首先PS拼出一個粗略的UI設計草圖。你也可以直接畫草圖。PHOTOSHOP拼接草圖的優點是，你可以更准確地估計風格、位置、主題文本和UI設計主圖的大小。

4、節日banner的設計步驟——畢業典禮

描述一個漂亮的UI設計橫幅基於布局在草圖的位置。蛋袋代表生日。蠟燭模型與企業形象包組合。藍色的蠟燭放在溫暖的背上會更好看。根據用戶界面設計主題副本，並以折線顯示。綵帶使整個頁面生動起來。

5、節日banner的設計步驟——詳細描述及修改

在節日橫幅的設計步驟中，你需要在主視場的兩邊都有小的元素。否則，對於一個寬屏屏幕，它就有點空了。浮動的紅包元素只強調了屏幕的垂直深度，使整個UI設計界面更加動態。接下來就是最神奇的一步:整張圖片的配色方案。色彩搭配後的UI頁面更加艷麗生動。

通過這些節日banner的設計步驟，可以分析橫幅的空間佔用和整個界面設計頁面的視覺劃分，可以合理分配橫幅的視覺焦點，強調操作需求，注重整個界面設計頁面的整體視覺效果。後續將會有更多關於ui設計中各個分類的設計技巧與資訊，可以點擊本站的其他文章進行學習。

『陸』 ui設計：流行的幾種banner的處理類型

banner是我們接觸工作後在製作品牌和內容宣傳上最常見的工作，它的展示起到著非常重要的引導性作用，一個界面的第一視覺往往會被優秀的banner所吸引。這兩天抽空整理分析了一些常用的類型，對設計banner頭疼的小夥伴們要仔細看看哦～

一般來說，一個好的Banner首先是要保證信息傳達准確，然後再需要保證畫面的協調感和氛圍，可以看到，一張Banner，不僅僅由點或者不僅僅由線組成，而是點、線、面相互組合，相互平衡，最終形成一個版式豐富的Banner圖。

以下素材部分源自學員作品，部分源自花瓣（感謝設計師們的分享，如果看到自己的作品，介意的請聯系刪除～）

色塊分割

微妙的漸變已經作為已經設計趨勢回歸了。漸變的背景，甚至漸變的疊加，都能讓你的Banner設計風格化，搭配圖片、紋理和文字，漸變能給人多種多樣的體驗。色彩濃郁是其特點

和UI設計不同，在電商和廣告Banner 的設計當中，紋理一直都存在，甚至是非常常用的元素。紋理能夠很好的提升整個Banner 的信息量和整體的質感。當然，在使用紋理的時候千萬不要讓紋理喧賓奪主。

當我們在做一個banner的時候，如果沒有特別的要求，其實我們是有很多個方向選擇的，首先問下自己你是想要突出什麼信息呢？是突出商品呢？還是突出文字呢？還是突出整體的氛圍呢？還是強調整體的協調感呢？還是說強調品牌呢？這個可以通過體會用戶心理來判斷方向。

好了今天就先到這里，講了這么多小夥伴們get到了幾點呢？

『柒』 Banner設計流程是什麼

banner設計流程如下：
一、對齊原則

相關的內容要對齊，方便用戶視線快速移動，一眼看到最重要的信息。

二、聚攏原則

將內容分成幾個區域，相關內容都聚在一個區域中。

三、留白原則

千萬不要把banner排得密密麻麻，要留出一定的空間，這樣既減少了banner的壓迫感，又可以引導讀者視線，突出重點內容。

四、降噪原則

顏色過多、字體過多、圖形過繁，都是分散讀者注意力的」噪音」。

五、重復原則

排版時，要注意整個設計的一致性和連貫性，避免出現不同類型的視覺元素。

六、對比原則

加大不同元素的視覺差異，這樣既增加了banner的活潑，又突出了視覺重點，方便用戶一眼瀏覽到重要的信息。

下面我講下比較常規的版式，主要是大方向的，時間緊的時候可以選擇一種拿來直接套用，這里我根據以往的經驗大致分了6類：

再講下文字的排版，文字的排版要求重點突出，大小粗細錯落有致，字體保持在2種左右，像下面這種大尺寸的banner文字就可以適當的做下變形，加入一些跟內容有聯系的元素或者圖形，可以更好的表達整個設計的情緒。

最後是配色， 色彩是由色相、明度和純度構成的。 色相即顏色的相貌，用於區分各類顏色，如 紅色，黃色，綠色，藍色等；明度即顏色的明暗和深淺，或者說顏色含量里白色的多少；純度即色彩的飽和鮮艷程度。 每種色彩都會因為色相，明度，純度的不同，表現出不同的色彩感，色彩是有情感的，不同的配色會帶給人完全不同的心裡感受。所以當你在做banner的時候 就要考慮你想要表達什麼樣的情感，想讓用戶看的時候有什麼樣的感受，你所表達的情感是不是符合主題內容，基於這些出發點再來做banner的配色就更加的 有目的性了。

『捌』 如何簡單快速的學習banner設計

選材、背景、配色、布局、審視。多簡單的幾個字，可是做起來並不那麼簡單啊。
細節很多，對於對齊的方法和添加的一些元素，還是很多時候自己不注意的。幾排文字的對齊，都是有講究，而自己平時在做的時候似乎沒有這個講究，都只是在上下鍵上上下看這個距離。今天這樣一看，小技巧又學會了，而且還比較深刻。
上一篇文章剛說了banner的字體，這里就來一篇了，繼續學習！
文章里的案例都很贊，我們很少能做出如此贊的banner。文章是通過七種方式來說明：
一.文字的基本排列混搭 這個方式經常用，多根據畫面來搭字體，很有氣氛。
二.文字的傾斜與斜切 傾斜的方法之前也有文章看過了，確實比較有活力。
三.讓文字形成相對獨立的區域 這個也經常用，很能在復雜背景中突出字體。
四.文字變形的魅力 變形的字體好看很多，以後可以多嘗試。
五.文字的3D應用 3D的字體很厚重很有說服力，PS的3D用法可多學習。
六.生活中的字體元素 毛筆字、粉筆字等的用法，根據banner的風格可多用。
七.猶抱琵琶半遮面 這個相對來說就用得比較少了，用得不好會很難看。但是也是要多嘗試的。