網(wǎng)頁中的絲帶和標(biāo)牌設(shè)計(jì)

2022-11-28    分類: 網(wǎng)站建設(shè)

潮流會(huì)靜靜地誕生于我們未留意之時(shí)。當(dāng)你瀏覽眾多網(wǎng)站時(shí),通常會(huì)看見自己在別處錯(cuò)過的花紋、圖案。其中就包括絲帶和標(biāo)牌。

這兩種圖案越來越流行,文中將它們放在一起討論,因?yàn)樗鼈兇蠖纪瑫r(shí)使用,絲帶不言而喻,大家都清楚這個(gè)元素。但標(biāo)牌——我的意思是它是放在屏幕上方的人造標(biāo)記,看起來就像t恤衫上的商標(biāo)。使用這兩種元素的網(wǎng)站確實(shí)質(zhì)量上乘。這次展示的案例都非常華美。極少有潮流像這樣:篩掉許許多多無趣的例子才找到一個(gè)有吸引力的個(gè)案。

thumb 網(wǎng)頁中的絲帶和標(biāo)牌設(shè)計(jì)

為什么使用絲帶和標(biāo)牌

標(biāo)牌非常有用,因?yàn)樗苡行脩糇⒁饬?。?biāo)牌將內(nèi)容擺放在用戶眼前。標(biāo)牌的形式大都非常突出,不管是使用3D樣式或是強(qiáng)烈的對比色。這種特性使標(biāo)牌經(jīng)常顯示重要的信息:logo,導(dǎo)航,活動(dòng)。在下面的展示中我們能明白它的用處。當(dāng)然,在使用它之前,你要確定是否真的需要。絲帶也是同樣,它經(jīng)常與標(biāo)牌一起使用,能吸引用戶注意并顯示重要信息。絲帶兩端的箭頭形狀看起來都指向它上面的內(nèi)容,直接吸引著用戶的注意力。

絲帶相關(guān)的展示

Letter Learner

在這里,絲帶好地構(gòu)造了網(wǎng)站的名字Letter Learner。同樣,頁面布置是一個(gè)簡單的單列。絲帶構(gòu)造的標(biāo)題激發(fā)用戶從頂部開始瀏覽體驗(yàn)。

Ribot

Ribot的絲帶運(yùn)用非常巧妙。這個(gè)流行元素令整個(gè)頁面變得生動(dòng),同時(shí)將公司的焦點(diǎn)集中在兩行文本中。相當(dāng)棒的表達(dá)方式!因?yàn)檫@家公司的名字并沒有告訴我們它是做什么的。

Alex Pierce

由于Alex Pierce主頁上有如此巨大的文本,它不得不采用一個(gè)相對應(yīng)的元素去平衡頁面的重感。這種情況下,絲帶在頭部發(fā)揮了很好的作用。我也很喜歡絲帶中間展開的部分,這讓人留意到設(shè)計(jì)者的名字。

Rockaholic

在Rockaholic不同尋常的頁面上,絲帶直接吸引用戶的注意力向下移動(dòng),讓人們的視線在網(wǎng)頁上垂直移動(dòng),令人不由深入挖掘下去。

Paris Jones

美味誘人的紅絲帶構(gòu)成網(wǎng)站名Paris Jones。雖然文本的形式很巧妙,不過對比強(qiáng)烈的樣式還是保證你能注意到它。

Blog en Bois

在Blog en Bois上,單箭頭絲帶格外有張力,這很大程度上歸功于明黃背后的暗色調(diào)。我發(fā)現(xiàn)自己一遍又一遍注意到Logo。這真是給人留下深刻印象的好點(diǎn)子。

HTML5Boilerplate

大受歡迎的html5Boilerplate使用絲帶令哇哦們注意到網(wǎng)頁上最重要的活動(dòng)元素。我酷愛這種不必在臉上寫著“Download here”就能發(fā)揮作用的絲帶。絲帶間的連接和標(biāo)牌告訴我們哪里可以下載資源。

Wells Riley

Wells Riley是絲帶運(yùn)用美學(xué)上的經(jīng)典。絲帶看起來很棒而且突出了網(wǎng)頁的重點(diǎn)。

Dhiraj Singh Karki

我總是喜歡那些將內(nèi)容分隔的設(shè)計(jì)。UI設(shè)計(jì)師Dhiraj Singh Karki的網(wǎng)絡(luò)文件夾就是這種類型。這里,絲帶運(yùn)用的相當(dāng)巧妙,它放置的位置與其他網(wǎng)站完全不同。它好地融入頁面,與其他元素一起構(gòu)造出整個(gè)網(wǎng)站的簡潔優(yōu)美。

Chipmunk

Chipmunk是絲帶和有機(jī)元素結(jié)合的優(yōu)秀例子。絲帶圍繞著導(dǎo)航欄,與下面的圖案好融合。同時(shí),它令導(dǎo)航欄沒有被各類圖片所掩蓋。

標(biāo)牌網(wǎng)站的展示

Ennea

發(fā)現(xiàn)了吧?Ennea是一個(gè)服裝網(wǎng)站,毫不奇怪地它使用標(biāo)牌構(gòu)造Logo和網(wǎng)站名稱。有時(shí)候,直白的方式最有效。

Philip Meissner Design

這個(gè)網(wǎng)站上,標(biāo)牌構(gòu)成了重要的導(dǎo)航。通常我會(huì)被這種方式弄糊涂,不過這個(gè)布局和顏色讓人一眼就注意到。

Tinkering Monkey

對一個(gè)電子交易網(wǎng)站來說,有什么比引導(dǎo)用戶付賬更重要的?Tinkering Monkey用一個(gè)漂亮的小卻清晰的標(biāo)牌引導(dǎo)用戶完成購買過程。

Parkbud

在一大堆智能手機(jī)軟件中,較好的那些總需要表現(xiàn)自身的不同之處。Parkbud是免費(fèi)的,那個(gè)大膽的紅色標(biāo)牌也告訴你這點(diǎn)。標(biāo)牌巧妙地出現(xiàn)在內(nèi)容頁,但你的眼角一定會(huì)捕捉到它。

Lense

Lense是標(biāo)牌結(jié)合結(jié)構(gòu)化文本的好例子。

Coreymade

我確實(shí)喜愛這個(gè)網(wǎng)站以及它變體字的標(biāo)牌。這個(gè)標(biāo)牌感覺像t恤衫上的商標(biāo)而不是一個(gè)普通網(wǎng)站的標(biāo)牌。3D效果令它很受瀏覽者歡迎。

Netastica

Netastica的標(biāo)牌大得可愛。同時(shí)它含有重要的信息并引導(dǎo)用戶回到主頁。

Ryan Havoc Taylor

標(biāo)牌在這個(gè)網(wǎng)站上如此醒目,以至于它不需要過多的對比就很突出。它和網(wǎng)站融為一體,充分發(fā)揮自身的作用。

絲帶與標(biāo)牌同時(shí)運(yùn)用的優(yōu)秀網(wǎng)站

ClearSpan Media

ClearSpan Media向我們展示了絲帶和標(biāo)牌的美麗結(jié)合。在這個(gè)網(wǎng)站上,你能找到圖案、過度和顏色變化。頂部的標(biāo)牌和下方的絲帶對用戶而言構(gòu)成一個(gè)包含有趣內(nèi)容的環(huán)。

Krichevtsova Alexandra

Krichevtsova Alexandra的網(wǎng)站在內(nèi)容上非常露骨,標(biāo)牌和絲帶為關(guān)鍵元素添加了額外的活力。

Wes Bos

文中展示的網(wǎng)站大都有巨大的絲帶。不過Wes Bos沒有這么做。它的絲帶看起來非常小,這是一個(gè)好思路——絲帶不需要支配整個(gè)設(shè)計(jì)來顯示自己的作用。

分享名稱:網(wǎng)頁中的絲帶和標(biāo)牌設(shè)計(jì)
文章網(wǎng)址:http://muchs.cn/news17/217467.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、網(wǎng)站導(dǎo)航外貿(mào)建站、App設(shè)計(jì)服務(wù)器托管、網(wǎng)站改版

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

微信小程序開發(fā)