在網(wǎng)頁設(shè)計(jì)中，將logo元素添加到整個網(wǎng)頁中，使之兩相呼應(yīng)的方法有：顏色呼應(yīng)、logo與控件結(jié)合、logo變形。

網(wǎng)頁設(shè)計(jì)中，如何將logo元素添加到整個網(wǎng)頁中？這個問題呢，其實(shí)是我的“甲方”提出來的。在她看過我們組設(shè)計(jì)的網(wǎng)頁視覺稿的時候，給我們提出了一個建議，希望我們可以在網(wǎng)頁中添加少量logo元素，不要只體現(xiàn)在導(dǎo)航欄中。于是，我開始調(diào)研各大門戶網(wǎng)站是如何處理logo與網(wǎng)頁元素相呼應(yīng)的問題，找到了三種比較通用的方法。

一、顏色呼應(yīng)

用一句話概括，就是頁面元素與logo的顏色相呼應(yīng)。這也是一種非常常見的呼應(yīng)辦法。通常網(wǎng)站的logo會有一個固定的顏色，將該顏色通過文字、控件、icon設(shè)計(jì)表現(xiàn)出來，是一種很好的呼應(yīng)網(wǎng)頁元素與logo相呼應(yīng)的辦法。

案例一：愛奇藝

綠色可謂是愛奇藝的標(biāo)志性顏色。打開愛奇藝，可以清晰看見愛奇藝將它logo中的綠色元素融入界面UI中，需要高亮的字體也會運(yùn)用綠色來表達(dá)。打開網(wǎng)頁時，可以發(fā)現(xiàn)綠色非常的突出，但并不讓人覺得不適應(yīng)。

并且愛奇藝也將綠色元素大量運(yùn)用在icon設(shè)計(jì)中，與自身的logo相呼應(yīng)。愛奇藝的綠色單看可能過于亮眼，但是從網(wǎng)頁的整體看，很好的做到了強(qiáng)調(diào)的功能。

案例二：芒果tv

芒果tv也是用顏色呼應(yīng)logo的經(jīng)典案例。打開芒果tv，映入眼簾的也是隨處可見的橙黃顏色，首頁熱門節(jié)目的標(biāo)題字體顏色也盡量用橙黃表示。

同時重要的標(biāo)題、按鈕、控件也用橙黃突出。不同的橙色漸變，也顯示出不同的優(yōu)先級，是一種常見的設(shè)計(jì)方式。

小結(jié)：

logo的顏色一般是網(wǎng)站的主題色，所以主題色與網(wǎng)頁元素的icon或者字體顏色相呼應(yīng)是一種非常好的解決方案。

在設(shè)計(jì)中，我們可以將一些強(qiáng)調(diào)的標(biāo)題文字、icon的顏色、控件的顏色換成主題色。用戶打開網(wǎng)頁時會很容易被這些顏色所吸引，卻也不會感到突兀。所以合理地運(yùn)用logo的顏色，可以讓網(wǎng)頁整體的視覺統(tǒng)一，并且重點(diǎn)突出，也可以更加有效地傳達(dá)信息。

二、Logo與控件結(jié)合

第二種方法是Logo與控件結(jié)合。這種方法大多適用于外形可愛的logo，他們可以添加到首頁的一些控件中，這樣也可以增加整個網(wǎng)頁的活力。

案例一：百度

百度的logo是一個可愛的熊掌。在百度的網(wǎng)頁設(shè)計(jì)中，設(shè)計(jì)師選擇用藍(lán)色來對網(wǎng)頁搜索中的重點(diǎn)進(jìn)行突出。分段控件的切換，以及一級標(biāo)題和二級標(biāo)題的，以及帶鏈接的文字，均是用藍(lán)色體現(xiàn)。并且，在頁尾處，百度將logo與頁碼控相結(jié)合，做到logo與控件元素的呼應(yīng)。

在頁碼切換的時候，當(dāng)前選中頁的上面就是logo的圖案，未選中頁是logo旋轉(zhuǎn)90度，并把透明度調(diào)低。頁碼的設(shè)計(jì)讓整個頁面活潑了起來，不會讓整個顯得嚴(yán)肅、沉悶。

案例二：天貓

天貓是一個很好的Logo與控件結(jié)合的例子。在右方的側(cè)邊欄添加logo，使整個網(wǎng)頁看起來更有活力（標(biāo)1處）。同時將天貓超市、天貓國際兩個天貓的熱門入駐商鋪的入口，也添加了logo標(biāo)識（標(biāo)2處）。

不僅如此，在二維碼登錄處，也加上了3D的logo圖案（標(biāo)3處）。右側(cè)工具欄的會員登錄也同樣是用天貓的logo。

小結(jié)：

如上文中所述，此類logo的變形適用于外形可愛的logo。網(wǎng)頁可以添加的地方，像用于分類側(cè)邊欄、分段控件、公告欄，這是很好的可以添加logo的地方，logo可以出現(xiàn)在控件的頂部、側(cè)部或者是對角上，這也可以同時起到一個標(biāo)識的作用。

其次，每個文字標(biāo)題前，也是可以添加logo的地方，起到入口的提示。不僅如此，logo的圖像也可以用到用戶頭像上，用戶未登錄的狀態(tài)以及默認(rèn)頭像的狀態(tài)都可以是logo圖案。

三、Logo變形

第三種方法，可以將logo進(jìn)行變形，提取logo的外形結(jié)構(gòu)做成相應(yīng)的icon或者是加載動畫、提示動畫等等，也是一種很好的與logo呼應(yīng)的方式。其實(shí)剛剛上文中所說的天貓超市和天貓國際的入口，也是一種logo的變形。將logo的形狀與按鈕相結(jié)合，也是一種logo元素的體現(xiàn)。

案例：嗶哩嗶哩

體現(xiàn)logo元素怎么能不提可愛的b站呢！在一些標(biāo)題欄前，可以看見b站標(biāo)志性的小電視機(jī)。b站的設(shè)計(jì)師們將logo與b站經(jīng)典的Q版人物結(jié)合在了一起，做為標(biāo)題的分區(qū)提示，是整個網(wǎng)頁看起來活潑又年輕。

在b站網(wǎng)頁中國中手機(jī)app端下載通知，也是由他的logo變形而來的，鼠標(biāo)懸停還有電視機(jī)變形為手機(jī)的動畫，動畫整體與手機(jī)app下載入口的設(shè)計(jì)十分貼合。當(dāng)然，一定要提的還有加載視頻時可愛的電視，b站的這個設(shè)計(jì)使得枯燥的加載過程也變得可愛了起來。

小結(jié)：

此類logo變形的難度較大，這種方法需要設(shè)計(jì)者可以很好地提取logo的中的部分結(jié)構(gòu)或著造型轉(zhuǎn)變?yōu)楹嗽氐?strong>動畫、icon，也可以在控件上加上logo圖案的動畫。雖然這類方案實(shí)現(xiàn)的成本很高，但是logo在網(wǎng)頁中的融入感是非常可觀的。

logo的圖案在網(wǎng)頁中隨處可見，使得網(wǎng)頁非常具有設(shè)計(jì)感和個性化，而這樣的個性化是一個網(wǎng)頁非常好的標(biāo)簽。

總結(jié)

雖然接到這個修改建議的時候，我也是有點(diǎn)迷茫的，但是在參考了各大互聯(lián)網(wǎng)的門戶網(wǎng)站，也算有了一些思路。我也是通過這次的調(diào)查，才發(fā)現(xiàn)logo元素在網(wǎng)頁設(shè)計(jì)中的體現(xiàn)也是大有文章。不要小看任何一個網(wǎng)頁中的標(biāo)題顏色、icon或者是控件的設(shè)計(jì)，這些都是設(shè)計(jì)師們的思考與表達(dá)。

本文由 @天空的魚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議