讓網(wǎng)頁設(shè)計活起來!韻律線帶你躍動起來
網(wǎng)頁的設(shè)計既要美觀獨(dú)特,也要符合大眾的口味和趨勢,也許用布局和線條來優(yōu)化提升是個不錯的選擇。
圖趣網(wǎng)針對斜線網(wǎng)頁布局,發(fā)布過一些酷站,大家可以傳送過去看下:斜線網(wǎng)頁設(shè)計欣賞 http://irelandcustomcontracting.com/lists/c-111,tid-1177,v2-14.html
用簡單的線性元素為網(wǎng)頁帶來意想不到的效果,這樣的線條我們可以稱它為“韻律線”。“韻律線”大多以斜線的方式出現(xiàn),通過改變線條的擺放位置來構(gòu)造出一個全新的視覺效果。
以下是AnyForWeb為大家搜羅的案例,希望能為設(shè)計師們帶來一些靈感。
1.扁平化+彩色馬賽克的搭配給我們的第一印象一定是可愛和充滿了趣味性,這樣的設(shè)計雖然能令人感到心情愉悅,但要說“高大上”可能就有些勉強(qiáng)了。沒關(guān)系,欠缺的也許只是一根“韻律線”。
2.智邑的網(wǎng)站視覺效果很舒適,AnyForWeb的設(shè)計師同樣利用“韻律線”把原本很普通的網(wǎng)站打造出一種國際范。“韻律線”的使用會在無形中為網(wǎng)站帶來張揚(yáng)的個性,因此設(shè)計師結(jié)合卡片式設(shè)計,讓網(wǎng)站看起來既活潑又專業(yè)。
3.第一個案例是AnyForWeb為MN設(shè)計的電子商務(wù)網(wǎng)站。設(shè)計師根據(jù)企業(yè)性質(zhì)選擇了大圖雜志風(fēng)作為網(wǎng)站的主調(diào),因?yàn)榭雌饋黼S性自然,所以很受海外設(shè)計師的喜愛。但隨性風(fēng)格在網(wǎng)頁設(shè)計中存在很大的局限性,會讓用戶覺得不夠嚴(yán)謹(jǐn)?;诖?,設(shè)計師在大圖中加入了“韻律線”設(shè)計,既讓網(wǎng)站的美觀度不受影響,又讓商戶本身的專業(yè)性有所提升。
4.這個案例中的線條在嚴(yán)格意義上來說并不屬于“韻律線”的范疇,但它的重要性卻不容小覷,簡單的線條起到了引導(dǎo)用戶的作用,在這一點(diǎn)上和“韻律線”有著共同點(diǎn)。
5.Mindworks的網(wǎng)站用線條呈現(xiàn)出了略帶立體的空間效果,Metro和線條的結(jié)合是很常見的一種設(shè)計方式,這兩者的搭配會迸發(fā)出不一樣的火花。想要什么樣的style可以讓色彩來決定。
6.用真實(shí)的事物來形成網(wǎng)頁中的“韻律線”是一個比較獨(dú)特的創(chuàng)意。這種方法能在不經(jīng)意間引導(dǎo)用戶視線,不刻意的細(xì)節(jié)能在瀏覽時發(fā)揮出大作用,這才是優(yōu)秀的設(shè)計師。
7.這個案例在“韻律線”的網(wǎng)頁使用中屬于比較傳統(tǒng)平常的一種方式。鮮亮色彩和中性色的搭配、適量的頁面留白,再加以個性化的字體設(shè)計,簡簡單單的幾個關(guān)鍵要素就能讓網(wǎng)站看起來與眾不同。
8.Oli Lisher的網(wǎng)站從視覺效果上看并沒有很好的用戶體驗(yàn),灰、白色之間的色差太接近,透明度也都很低,導(dǎo)致了用戶視線停留在“韻律線”上的時間過長,可能會忽視網(wǎng)頁中的內(nèi)容重點(diǎn)。
9.網(wǎng)頁上藍(lán)綠色部分是一種視覺延伸,能帶給用戶一種干練的簡約感,聚光燈狀的色塊讓商品成為獨(dú)一無二的視覺重點(diǎn)。
10.通過“韻律線”產(chǎn)生的立體層疊能為頁面整體體現(xiàn)出一種別樣的節(jié)奏感,也讓用戶的視覺路徑更加清晰明確。
網(wǎng)頁設(shè)計師們可以在AnyForWeb分享的案例中總結(jié)網(wǎng)頁節(jié)奏和韻律對于用戶視覺的重要性,可以在自己的設(shè)計中適當(dāng)融入一些相關(guān)元素,讓整個網(wǎng)站因?yàn)?ldquo;韻律線”而活起來。
原文:http://design.anyforweb.com/newsDetail360.shtml
本文地址:http://irelandcustomcontracting.com/tutorial/de2562.html