絲帶效果的網(wǎng)頁(yè)設計在國內的大多數網(wǎng)站中并不多見(jiàn)，因為絲帶元素的運用總會(huì )給人一種比較輕松，甚至女性化的感覺(jué)，所以使用范圍很狹隘，設計師也不敢輕易嘗試。

但筆者認為，網(wǎng)頁(yè)中的絲帶效果并不只是清新文藝系的專(zhuān)利，柔美的絲帶線(xiàn)條也能釋放出一種特別的張力。直接上圖！

1.第一個(gè)案例利用雜技表演的演出場(chǎng)景為網(wǎng)頁(yè)營(yíng)造出一種獨特的平衡感，這類(lèi)型的畫(huà)面很容易讓瀏覽者找不到視覺(jué)重點(diǎn)。要解決這個(gè)問(wèn)題其實(shí)也很簡(jiǎn)單，只要有一個(gè)顏色與頁(yè)面環(huán)境相符的色塊，就會(huì )讓整個(gè)網(wǎng)頁(yè)的邏輯關(guān)系更清楚。而中規中矩的色塊又難免顯得呆板，如果這時(shí)用絲帶效果來(lái)代替呢？網(wǎng)頁(yè)一秒鐘變生動(dòng)！

2.這個(gè)案例的背景用了比較寫(xiě)實(shí)的紋理背景，因此，如果用比較常見(jiàn)的布局方式，比如將絲帶效果放在頁(yè)面上中部會(huì )表現得很突兀。設計師很巧妙的把絲帶的位置分別放在左上角和中下方，兩者的呼應形成了禮物的包裝方式，讓整體看起來(lái)更融合。

3.將絲帶效果貫穿于logo設計中是一種比較常見(jiàn)的使用方式。這一現象證明了，絲帶效果可以起到突出重點(diǎn)的作用。但其中值得注意的是，絲帶色塊的色彩一定要和logo，以及整體色彩協(xié)調。

4.Autoffsets的整體風(fēng)格表現的出奇的一致。從清新童趣的背景到亮麗的色彩，再到折紙風(fēng)格的板塊設計，所有的元素都展現了網(wǎng)站活潑的一面。這個(gè)案例中的折紙設計雖然也是相對較硬的線(xiàn)條，但看起來(lái)還是俏皮不少。

[page]

5.這又是一個(gè)用絲帶效果體現平衡感的案例，但與第一個(gè)案例不同的是，該網(wǎng)頁(yè)中的絲帶效果運用了分段的形式來(lái)實(shí)現，包括標題下方的黃色小絲帶，更是起到了引導用戶(hù)閱讀瀏覽的重要作用。

6.這個(gè)網(wǎng)站的風(fēng)格比較復古，并且使用了較多的圓形元素設計。幾何元素豐富的頁(yè)面一旦處理不當會(huì )顯得很繁復，頁(yè)面重點(diǎn)就會(huì )變得很難抓，用戶(hù)在瀏覽的時(shí)候會(huì )感到很困惑，所以絲帶效果的又一功能被展現了，它能讓內容更醒目和靈動(dòng)。

7.這是一個(gè)經(jīng)過(guò)改良和創(chuàng )新后的絲帶效果設計。設計師將絲帶的靈感融入Metro和網(wǎng)格布局中，讓網(wǎng)頁(yè)條理清晰的同時(shí)又充滿(mǎn)設計感。

8.這是一個(gè)扁平化的網(wǎng)站，貫穿整體的線(xiàn)索除了背景色彩以外，還有絲帶效果的設計，從首屏到最后一屏，每一個(gè)頁(yè)面中都包含了同色系的絲帶設計，讓頁(yè)面更有感染力。

9.誰(shuí)說(shuō)絲帶效果只能可愛(ài)？這個(gè)案例就看起來(lái)比較嚴肅。在粗大字體的上方或下方可以利用絲帶設計來(lái)展現網(wǎng)頁(yè)的華麗和隆重，也讓用戶(hù)更容易接受。

10.用戶(hù)引導是用戶(hù)體驗中很重要的一個(gè)部分，用柔和的絲帶來(lái)替代原本冷冰冰的箭頭標識能讓頁(yè)面變得更加生動(dòng)有趣。

絲帶效果的運用也可以很廣泛，一曲一直、角度變換、色彩搭配、擺放位置，一些些細微的變化都足以讓網(wǎng)頁(yè)產(chǎn)生不一樣的效果，動(dòng)手試試吧！