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

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

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

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

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

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

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

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

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

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

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

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

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

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

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