讓網(wǎng)頁(yè)設(shè)計(jì)活起來(lái)！韻律線帶你躍動(dòng)起來(lái)

網(wǎng)頁(yè)的設(shè)計(jì)既要美觀獨(dú)特，也要符合大眾的口味和趨勢(shì)，也許用布局和線條來(lái)優(yōu)化提升是個(gè)不錯(cuò)的選擇。
圖趣網(wǎng)針對(duì)斜線網(wǎng)頁(yè)布局，發(fā)布過(guò)一些酷站，大家可以傳送過(guò)去看下：斜線網(wǎng)頁(yè)設(shè)計(jì)欣賞 http://m.likemindfilms.com/lists/c-111,tid-1177,v2-14.html

用簡(jiǎn)單的線性元素為網(wǎng)頁(yè)帶來(lái)意想不到的效果，這樣的線條我們可以稱它為“韻律線”。“韻律線”大多以斜線的方式出現(xiàn)，通過(guò)改變線條的擺放位置來(lái)構(gòu)造出一個(gè)全新的視覺(jué)效果。

以下是AnyForWeb為大家搜羅的案例，希望能為設(shè)計(jì)師們帶來(lái)一些靈感。

1.扁平化+彩色馬賽克的搭配給我們的第一印象一定是可愛(ài)和充滿了趣味性，這樣的設(shè)計(jì)雖然能令人感到心情愉悅，但要說(shuō)“高大上”可能就有些勉強(qiáng)了。沒(méi)關(guān)系，欠缺的也許只是一根“韻律線”。

2.智邑的網(wǎng)站視覺(jué)效果很舒適，AnyForWeb的設(shè)計(jì)師同樣利用“韻律線”把原本很普通的網(wǎng)站打造出一種國(guó)際范。“韻律線”的使用會(huì)在無(wú)形中為網(wǎng)站帶來(lái)張揚(yáng)的個(gè)性，因此設(shè)計(jì)師結(jié)合卡片式設(shè)計(jì)，讓網(wǎng)站看起來(lái)既活潑又專業(yè)。

3.第一個(gè)案例是AnyForWeb為MN設(shè)計(jì)的電子商務(wù)網(wǎng)站。設(shè)計(jì)師根據(jù)企業(yè)性質(zhì)選擇了大圖雜志風(fēng)作為網(wǎng)站的主調(diào)，因?yàn)榭雌饋?lái)隨性自然，所以很受海外設(shè)計(jì)師的喜愛(ài)。但隨性風(fēng)格在網(wǎng)頁(yè)設(shè)計(jì)中存在很大的局限性，會(huì)讓用戶覺(jué)得不夠嚴(yán)謹(jǐn)?；诖耍O(shè)計(jì)師在大圖中加入了“韻律線”設(shè)計(jì)，既讓網(wǎng)站的美觀度不受影響，又讓商戶本身的專業(yè)性有所提升。

4.這個(gè)案例中的線條在嚴(yán)格意義上來(lái)說(shuō)并不屬于“韻律線”的范疇，但它的重要性卻不容小覷，簡(jiǎn)單的線條起到了引導(dǎo)用戶的作用，在這一點(diǎn)上和“韻律線”有著共同點(diǎn)。

5．Mindworks的網(wǎng)站用線條呈現(xiàn)出了略帶立體的空間效果，Metro和線條的結(jié)合是很常見(jiàn)的一種設(shè)計(jì)方式，這兩者的搭配會(huì)迸發(fā)出不一樣的火花。想要什么樣的style可以讓色彩來(lái)決定。

6.用真實(shí)的事物來(lái)形成網(wǎng)頁(yè)中的“韻律線”是一個(gè)比較獨(dú)特的創(chuàng)意。這種方法能在不經(jīng)意間引導(dǎo)用戶視線，不刻意的細(xì)節(jié)能在瀏覽時(shí)發(fā)揮出大作用，這才是優(yōu)秀的設(shè)計(jì)師。

7.這個(gè)案例在“韻律線”的網(wǎng)頁(yè)使用中屬于比較傳統(tǒng)平常的一種方式。鮮亮色彩和中性色的搭配、適量的頁(yè)面留白，再加以個(gè)性化的字體設(shè)計(jì)，簡(jiǎn)簡(jiǎn)單單的幾個(gè)關(guān)鍵要素就能讓網(wǎng)站看起來(lái)與眾不同。

8.Oli Lisher的網(wǎng)站從視覺(jué)效果上看并沒(méi)有很好的用戶體驗(yàn)，灰、白色之間的色差太接近，透明度也都很低，導(dǎo)致了用戶視線停留在“韻律線”上的時(shí)間過(guò)長(zhǎng)，可能會(huì)忽視網(wǎng)頁(yè)中的內(nèi)容重點(diǎn)。

9.網(wǎng)頁(yè)上藍(lán)綠色部分是一種視覺(jué)延伸，能帶給用戶一種干練的簡(jiǎn)約感，聚光燈狀的色塊讓商品成為獨(dú)一無(wú)二的視覺(jué)重點(diǎn)。

10.通過(guò)“韻律線”產(chǎn)生的立體層疊能為頁(yè)面整體體現(xiàn)出一種別樣的節(jié)奏感，也讓用戶的視覺(jué)路徑更加清晰明確。

網(wǎng)頁(yè)設(shè)計(jì)師們可以在AnyForWeb分享的案例中總結(jié)網(wǎng)頁(yè)節(jié)奏和韻律對(duì)于用戶視覺(jué)的重要性，可以在自己的設(shè)計(jì)中適當(dāng)融入一些相關(guān)元素，讓整個(gè)網(wǎng)站因?yàn)?ldquo;韻律線”而活起來(lái)。
原文：http://design.anyforweb.com/newsDetail360.shtml