很多企業(yè)在架構(gòu)官網(wǎng)的時(shí)候，經(jīng)常會(huì)煩惱于該如何設(shè)計(jì)官網(wǎng)，才能讓官網(wǎng)顯得高大上。

為了實(shí)現(xiàn)“高大上”，企業(yè)可謂是費(fèi)盡心思，參考借鑒了大量不同風(fēng)格的網(wǎng)站，看著是博采眾長(zhǎng)，可最后呈現(xiàn)的效果反而不盡人意。

“官網(wǎng)的交互效果要怎么才酷炫？”

“排版要怎么才顯得豐富多變？”

“是不是應(yīng)該專門去請(qǐng)?jiān)O(shè)計(jì)師設(shè)計(jì)一下？”

下面，我們就來(lái)看看中匯創(chuàng)意營(yíng)造有限公司，是如何通過(guò)“主打色”法則，四兩撥千斤的塑造出一個(gè)有個(gè)性、有格調(diào)的官方網(wǎng)站的。

如何選擇官網(wǎng)的主打色？

那么品牌的“主打色”應(yīng)該從何而來(lái)呢？常見(jiàn)的方式，就是從品牌Logo中提取。這樣做可以有助于品牌調(diào)性的統(tǒng)一，是品牌建設(shè)中基礎(chǔ)手段，中匯創(chuàng)意也是這么做的。

于是就有企業(yè)會(huì)問(wèn)了：假如我們企業(yè)的Logo顏色不夠好看怎么辦？

很簡(jiǎn)單，調(diào)整。

其實(shí)只要企業(yè)在商標(biāo)注冊(cè)時(shí)沒(méi)有申請(qǐng)指定顏色，那么企業(yè)是可以自由的對(duì)Logo顏色進(jìn)行調(diào)整的。那么對(duì)Logo顏色的選擇上，要考慮什么方面呢？

一是要考慮到顏色是否與品牌定位、行業(yè)定位相符。

如科技行業(yè)一般會(huì)選擇冷靜的冷色調(diào)，如藍(lán)色、黑色等；而像中匯創(chuàng)意這類創(chuàng)意型公司，一般會(huì)選擇橙色、黃色、紅色等，這一類炙熱、熱情、飽滿、充滿能量的色彩，色調(diào)明亮、強(qiáng)烈、活潑，有積極向上的意象效果。

二是要從實(shí)際角度，考慮這個(gè)顏色是否適合用來(lái)進(jìn)行物料延展。

同一個(gè)色系里有無(wú)限種色彩坐標(biāo)，因此品牌定下主色調(diào)后，還要把關(guān)好顏色的飽和度、明度，在經(jīng)過(guò)不斷的比對(duì)后，選出優(yōu)先顏色，制定標(biāo)準(zhǔn)化顏色參數(shù)。

如中匯創(chuàng)意所選擇的橙色，是一種帶紅棕的橘調(diào)，微量的棕色往明快中調(diào)和了一絲穩(wěn)重，不管是用在線上還是線下物料都有優(yōu)秀的視覺(jué)表現(xiàn)力。

如果能將主色調(diào)運(yùn)用到極致，甚至可以讓消費(fèi)者只要看到顏色，大腦就會(huì)不自覺(jué)的聯(lián)想到你的品牌。

如可樂(lè)紅、電信藍(lán)、郵政綠，還有奢侈品牌蒂芙尼，就把品牌色蒂芙尼藍(lán)包裝成了家喻戶曉的Pantone1837。

以大色塊制造視覺(jué)沖擊

奠定品牌調(diào)性

首頁(yè)的banner圖，是首先映入用戶眼簾的模塊，只要能利用好banner位，你的網(wǎng)站已經(jīng)成功了一半了。中匯創(chuàng)意的做法，就是利用全屏大banner先色奪人，用大片濃郁的品牌主打色抓住用戶的眼球。

“其實(shí)網(wǎng)站的設(shè)計(jì)并不用太復(fù)雜，也能營(yíng)造出很強(qiáng)的視覺(jué)沖擊力?！?/span>

中匯創(chuàng)意網(wǎng)站負(fù)責(zé)人說(shuō)道。

“事不過(guò)三，色不過(guò)三。我們的banner雖然搶眼，但實(shí)際上只運(yùn)用了兩個(gè)顏色，白色和橙色。只要對(duì)比度足夠，那么白色就是不會(huì)出錯(cuò)的萬(wàn)能搭配色。至于網(wǎng)站的整體，我們可以搭配黑色灰色，這兩種顏色沒(méi)有明顯的色彩傾向，不會(huì)破壞色彩的協(xié)調(diào)性?！?/span>

Banner最常見(jiàn)的排版形式是居中排版以及左右排版，利用線條或者英文可以對(duì)標(biāo)題文字起到很好的修飾作用。

文案不宜太多，要精、要簡(jiǎn)，如果字?jǐn)?shù)或元素太多，反倒會(huì)破壞這種高級(jí)的美感了。

如何用主打色點(diǎn)綴細(xì)節(jié)

提升畫面整體質(zhì)感

什么叫主打色？就是要讓它獲得十足的存在感，能無(wú)時(shí)無(wú)刻地從品牌畫面中跳出來(lái)，成為點(diǎn)睛之筆。

由于在Banner圖上如果已經(jīng)使用了大色塊，那么在其他的板面上我們就要有所節(jié)制。

例如下圖，橙色的雙引號(hào)一下子給整張圖賦予了設(shè)計(jì)感。當(dāng)?shù)咨巧曙柡投容^低的深色時(shí)，可搭配純白色文字。在這樣的畫面中，只需添加一筆明亮的彩色就能輕而易舉的提升質(zhì)感。

白底時(shí)也是同理，以白色搭配深灰色文字，對(duì)小元素、標(biāo)題賦予顏色起到畫龍點(diǎn)睛的作用。      

遇到圖文排版，如果怕圖片的色彩會(huì)打破畫面的和諧感，可以對(duì)圖片進(jìn)行黑白效果處理，然后以主色填充的色塊作為裝飾。

手機(jī)端頁(yè)面

有時(shí)候也可以利用網(wǎng)站的互動(dòng)效果，讓這抹顏色活動(dòng)起來(lái)。中匯創(chuàng)意就試用了凡科建站中的鼠標(biāo)懸停hover效果。

總結(jié)

大部分的品牌官網(wǎng)，其出發(fā)點(diǎn)都是為了承載內(nèi)容而不是炫技，因此品牌其實(shí)不必過(guò)分的追求網(wǎng)站的互動(dòng)技巧，只需將精力放在美觀度和實(shí)用性上即可。

文中所介紹的案例，是一種簡(jiǎn)單高效的，通過(guò)靈活用色以低成本打造出高端感的方法，很值得對(duì)官網(wǎng)設(shè)計(jì)毫無(wú)頭緒的企業(yè)去借鑒。

至于網(wǎng)站的排版難題，則更容易解決了。凡科建站提供了海量?jī)?yōu)質(zhì)的行業(yè)模板，用戶只需要簡(jiǎn)單的拖拽修改，即可高效獲得優(yōu)先展示效果，更重要的是，后續(xù)的維護(hù)同樣簡(jiǎn)單方便。

點(diǎn)擊右方鏈接，直達(dá)案例官網(wǎng)：http://charmviv.com/

（提示：移動(dòng)端打開(kāi)為移動(dòng)端網(wǎng)頁(yè)，PC端打開(kāi)為電腦端網(wǎng)頁(yè)）