網(wǎng)頁中的絲帶和標牌設計

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

這兩種圖案越來越流行，文中將它們放在一起討論，因為它們大都同時使用，絲帶不言而喻，大家都清楚這個元素。但標牌——我的意思是它是放在屏幕上方的人造標記，看起來就像t恤衫上的商標。使用這兩種元素的網(wǎng)站確實質量上乘。這次展示的案例都非常華美。極少有潮流像這樣：篩掉許許多多無趣的例子才找到一個有吸引力的個案。

為什么使用絲帶和標牌

標牌非常有用，因為它能有效吸引用戶注意力。標牌將內容擺放在用戶眼前。標牌的形式大都非常突出，不管是使用3D樣式或是強烈的對比色。這種特性使標牌經(jīng)常顯示重要的信息：logo，導航，活動。在下面的展示中我們能明白它的用處。當然，在使用它之前，你要確定是否真的需要。絲帶也是同樣，它經(jīng)常與標牌一起使用，能吸引用戶注意并顯示重要信息。絲帶兩端的箭頭形狀看起來都指向它上面的內容，直接吸引著用戶的注意力。

絲帶相關的展示

Letter Learner

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

Ribot

Ribot的絲帶運用非常巧妙。這個流行元素令整個頁面變得生動，同時將公司的焦點集中在兩行文本中。相當棒的表達方式！因為這家公司的名字并沒有告訴我們它是做什么的。

Alex Pierce

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

Rockaholic

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

Paris Jones

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

Blog en Bois

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

HTML5Boilerplate

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

Wells Riley

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

Dhiraj Singh Karki

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

Chipmunk

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

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

Ennea

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

Philip Meissner Design

這個網(wǎng)站上，標牌構成了重要的導航。通常我會被這種方式弄糊涂，不過這個布局和顏色讓人一眼就注意到。

Tinkering Monkey

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

Parkbud

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

Lense

Lense是標牌結合結構化文本的好例子。

Coreymade

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

Netastica

Netastica的標牌大得可愛。同時它含有重要的信息并引導用戶回到主頁。

Ryan Havoc Taylor

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

絲帶與標牌同時運用的優(yōu)秀網(wǎng)站

ClearSpan Media

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

Krichevtsova Alexandra

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

Wes Bos

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

分享名稱：網(wǎng)頁中的絲帶和標牌設計
文章網(wǎng)址：http://www.bm7419.com/news17/217467.html

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

廣告

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