全栈工程师?
嗯.....目前并不是!

在設計中,如何做到網頁元素與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或者是控件的設計,這些都是設計師們的思考與表達。

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《在設計中,如何做到網頁元素與logo相呼應?》
文章链接:https://www.pmbear.com/%e5%9c%a8%e8%a8%ad%e8%a8%88%e4%b8%ad%ef%bc%8c%e5%a6%82%e4%bd%95%e5%81%9a%e5%88%b0%e7%b6%b2%e9%a0%81%e5%85%83%e7%b4%a0%e8%88%87logo%e7%9b%b8%e5%91%bc%e6%87%89%ef%bc%9f/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们