起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識在設計中，如何做到網頁元素與logo相呼應？
在網頁設計中，將logo元素添加到整個網頁中，使之兩相呼應的方法有：顏色呼應、logo與控件結合、logo變形。
網頁設計中，如何將logo元素添加到整個網頁中？這個問題呢，其實是我的“甲方”提出來的。在她看過我們組設計的網頁視覺稿的時候，給我們提出了一個建議，希望我們可以在網頁中添加少量logo元素，不要只體現在導航欄中。于是，我開始調研各大門戶網站是如何處理logo與網頁元素相呼應的問題，找到了三種比較通用的方法。
一、顏色呼應
用一句話概括，就是頁面元素與logo的顏色相呼應。這也是一種非常常見的呼應辦法。通常網站的logo會有一個固定的顏色，將該顏色通過文字、控件、icon設計表現出來，是一種很好的呼應網頁元素與logo相呼應的辦法。
案例一：愛奇藝
綠色可謂是愛奇藝的標志性顏色。打開愛奇藝，可以清晰看見愛奇藝將它logo中的綠色元素融入界面UI中，需要高亮的字體也會運用綠色來表達。打開網頁時，可以發現綠色非常的突出，但并不讓人覺得不適應。
并且愛奇藝也將綠色元素大量運用在icon設計中，與自身的logo相呼應。愛奇藝的綠色單看可能過于亮眼，但是從網頁的整體看，很好的做到了強調的功能。
案例二：芒果tv
芒果tv也是用顏色呼應logo的經典案例。打開芒果tv，映入眼簾的也是隨處可見的橙黃顏色，首頁熱門節目的標題字體顏色也盡量用橙黃表示。
同時重要的標題、按鈕、控件也用橙黃突出。不同的橙色漸變，也顯示出不同的優先級，是一種常見的設計方式。
小結：
logo的顏色一般是網站的主題色，所以主題色與網頁元素的icon或者字體顏色相呼應是一種非常好的解決方案。
在設計中，我們可以將一些強調的標題文字、icon的顏色、控件的顏色換成主題色。用戶打開網頁時會很容易被這些顏色所吸引，卻也不會感到突兀。所以合理地運用logo的顏色，可以讓網頁整體的視覺統一，并且重點突出，也可以更加有效地傳達信息。
二、Logo與控件結合
第二種方法是Logo與控件結合。這種方法大多適用于外形可愛的logo，他們可以添加到首頁的一些控件中，這樣也可以增加整個網頁的活力。
案例一：百度
百度的logo是一個可愛的熊掌。在百度的網頁設計中，設計師選擇用藍色來對網頁搜索中的重點進行突出。分段控件的切換，以及一級標題和二級標題的，以及帶鏈接的文字，均是用藍色體現。并且，在頁尾處，百度將logo與頁碼控相結合，做到logo與控件元素的呼應。
在頁碼切換的時候，當前選中頁的上面就是logo的圖案，未選中頁是logo旋轉90度，并把透明度調低。頁碼的設計讓整個頁面活潑了起來，不會讓整個顯得嚴肅、沉悶。
案例二：天貓
天貓是一個很好的Logo與控件結合的例子。在右方的側邊欄添加logo，使整個網頁看起來更有活力（標1處）。同時將天貓超市、天貓國際兩個天貓的熱門入駐商鋪的入口，也添加了logo標識（標2處）。
不僅如此，在二維碼登錄處，也加上了3D的logo圖案（標3處）。右側工具欄的會員登錄也同樣是用天貓的logo。
小結：
如上文中所述，此類logo的變形適用于外形可愛的logo。網頁可以添加的地方，像用于分類側邊欄、分段控件、公告欄，這是很好的可以添加logo的地方，logo可以出現在控件的頂部、側部或者是對角上，這也可以同時起到一個標識的作用。
其次，每個文字標題前，也是可以添加logo的地方，起到入口的提示。不僅如此，logo的圖像也可以用到用戶頭像上，用戶未登錄的狀態以及默認頭像的狀態都可以是logo圖案。
三、Logo變形
第三種方法，可以將logo進行變形，提取logo的外形結構做成相應的icon或者是加載動畫、提示動畫等等，也是一種很好的與logo呼應的方式。其實剛剛上文中所說的天貓超市和天貓國際的入口，也是一種logo的變形。將logo的形狀與按鈕相結合，也是一種logo元素的體現。
案例：嗶哩嗶哩
體現logo元素怎么能不提可愛的b站呢！在一些標題欄前，可以看見b站標志性的小電視機。b站的設計師們將logo與b站經典的Q版人物結合在了一起，做為標題的分區提示，是整個網頁看起來活潑又年輕。
在b站網頁中國中手機app端下載通知，也是由他的logo變形而來的，鼠標懸停還有電視機變形為手機的動畫，動畫整體與手機app下載入口的設計十分貼合。當然，一定要提的還有加載視頻時可愛的電視，b站的這個設計使得枯燥的加載過程也變得可愛了起來。
小結：
此類logo變形的難度較大，這種方法需要設計者可以很好地提取logo的中的部分結構或著造型轉變為含此元素的動畫、icon，也可以在控件上加上logo圖案的動畫。雖然這類方案實現的成本很高，但是logo在網頁中的融入感是非?？捎^的。
logo的圖案在網頁中隨處可見，使得網頁非常具有設計感和個性化，而這樣的個性化是一個網頁非常好的標簽。
總結
雖然接到這個修改建議的時候，我也是有點迷茫的，但是在參考了各大互聯網的門戶網站，也算有了一些思路。我也是通過這次的調查，才發現logo元素在網頁設計中的體現也是大有文章。不要小看任何一個網頁中的標題顏色、icon或者是控件的設計，這些都是設計師們的思考與表達。
本文由 @天空的魚 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
