您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)欣賞 >> 瀏覽設(shè)計(jì)教程

讓網(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)。基于此,設(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

[教程作者:AnyForWeb]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/de2562.html
20個(gè)最火爆的Behance網(wǎng)頁(yè)設(shè)計(jì)及UI案例解析
逆襲高大上!網(wǎng)頁(yè)設(shè)計(jì)中圓形元素的應(yīng)用欣賞
圖趣網(wǎng)微信
建議反饋
×