網頁設計元素剖析：絲帶與標籤

網頁設計元素剖析：絲帶與標籤

絲帶和標籤都是帶狀的設計元素，絲帶的一端或者兩端一般會有燕尾形的缺口，標籤有一點像T恤衫上的商標。
標籤非常有用，它將內容直接擺放在用戶眼前，能有效吸引用網頁設計戶注意力。標籤的形式大都非常突出，不管是使用3D樣式或是強烈的對比色，所以標籤經常用來展示重要的信息：logo，導航，活動。
絲帶經常與標籤一起使用，用來吸引用戶注意力並顯示重要信息。
　絲帶元素網頁設計作品展示
　　Letter Learner
在這裡，絲帶完美地構造了網站的名字Letter Learner。同樣，頁面佈置是一個簡單的單列。絲帶構造的標題激髮用戶從頂部開始瀏覽體驗。
　　Ribot
　　Ribot的絲帶運用非常巧妙。這個流行元素令整個頁面變得網頁設計生動，同時將公司的焦點集中在兩行文本中。相當棒的表達方式!因為這家公司的名字並沒有告訴我們它是做什麼的。
　　Alex Pierce
由於Alex Pierce主頁上有如此巨大的文本，它不得不採用一個相對應的元素去網頁設計平衡頁面的重感。這種情況下，絲帶在頭部發揮了很好的作用。我也很喜歡絲帶中間展開的部分，這讓人留意到設計者的名字。
　　Rockaholic
在Rockaholic不同尋常的頁面上，絲帶直接吸引用戶的注意力網頁設計向下移動，讓人們的視線在網頁上垂直移動，令人不由深入挖掘下去。
　　Paris Jones
美味誘人的紅絲帶構成網站名Paris Jones。雖然文本的形式很巧妙，不過對比強烈的樣式還是保證你能注意到它。
　　Blog en Bois
在Blog en Bois上，單箭頭絲帶格外有張力，這很大程度上歸功於明黃台中網頁設計背後的暗色調。我發現自己一遍又一遍注意到Logo。這真是給人留下深刻印象的好點子。
　　HTML5Boilerplate
大受歡迎的html5Boilerplate使用絲帶令哇哦們注意到網頁上最重要的活動元素。我酷愛這種不必在臉上寫著“Download here”就能發揮作用的絲帶。絲帶間的連接和標籤網頁設計公司告訴我們哪裡可以下載資源。
　　Wells Riley
Wells Riley是絲帶運用美學上的經典。絲帶看起來很棒而且突出了網頁的重點。
　　Dhiraj Singh Karki
我總是喜歡那些將內容分隔的設計。 UI設計師Dhiraj Singh Karki的網絡文件夾就是這種類型。這裡，絲帶運用的相當巧妙，它放置的位置與其他網站完全不同。它完美地融入頁面，與其他元素一起構造出整個網站的簡潔優美。
　　Chipmunk
Chipmunk是絲帶和有機元素結合的優秀例子。絲帶圍繞著導航欄，與下面的圖案完美融合。同時，它令導航欄沒有被各類圖片所掩蓋。
標籤在網站設計中的運用
　　Ennea
Ennea是一個服裝網站，毫不奇怪地它使用標籤構造Logo和網站名稱。有時候，直白的方式最有效。
　　Philip Meissner Design
這個網站上，標籤構成了重要的導航。通常我會被這種方式弄糊塗，不過這個佈局和顏色讓人一眼就注意到。
　　Tinkering Monkey
對一個電子交易網站來說，有什麼比引導用戶付賬更重要的？ Tinkering Monkey用一個漂亮的小卻清晰的標籤引導用戶完成購買過程。
　　Parkbud
在一大堆智能手機軟件中，較好的那些總需要表現自身的不同之處。 Parkbud是免費的，那個大膽的紅色標籤也告訴你這點。標籤巧妙地出現在內容頁，但你的眼角一定會捕捉到它。
　　 Lense
Lense是標籤結合結構化文本的好例子。
　　 Coreymade
我確實喜愛這個網站以及它變體字的標籤。這個標籤感覺像t恤衫上的商標而不是一個普通網站的標籤。 3D效果令它很受瀏覽者歡迎。
　　 Netastica
　　 Netastica的標籤大得可愛。同時它含有重要的信息並引導用戶回到主頁。
　　 Ryan Havoc Taylor
標籤在這個網站上如此醒目，以至於它不需要過多的對比就很突出。它和網站融為一體，充分發揮自身的作用。