幾何元素在網(wǎng)頁(yè)設(shè)計(jì)中一直占有一席之地,比如矩形的布局,圓形的Logo等。但幾何元素可不僅僅局限于這些常規(guī)的形狀,多邊形也是其中的一員。
如今,多邊形元素越來(lái)越多地應(yīng)用于網(wǎng)頁(yè)、海報(bào)、平面設(shè)計(jì)之中,受到不少設(shè)計(jì)師的青睞。這是因?yàn)槎噙呅卧貥邮蕉嘧,常能給訪客呈現(xiàn)別具一格、耳目一新的視覺(jué)效果,讓網(wǎng)站更富活力與趣味,在吸引用戶上有其獨(dú)特的魅力。
所以今天這篇文章中,帶大家了解一下網(wǎng)頁(yè)中的多邊形元素以及在網(wǎng)站建設(shè)中如何使用這種設(shè)計(jì)趨勢(shì)。
多邊形元素
我們常說(shuō)的多邊形,是指同一平面上不在同一直線上的三條或三條以上的線段首尾順次連結(jié)且不相交組成的閉合圖形。在實(shí)際的設(shè)計(jì)過(guò)程中,它形狀多樣,有的為中空,有的填充了色彩,有時(shí)候單個(gè)存在,有時(shí)候又會(huì)成片連接構(gòu)成更為復(fù)雜的視覺(jué)效果,比如3D的視效。
總的而言,多邊形設(shè)計(jì)元素在網(wǎng)站中的運(yùn)用方法非常豐富,它最大的優(yōu)勢(shì)也在于它可以兼容各種各樣的使用場(chǎng)景,為設(shè)計(jì)注入不同的風(fēng)格色彩。
在網(wǎng)站中如何使用多邊形元素?
不同的設(shè)計(jì)師對(duì)于多邊形會(huì)有不一樣的想法的運(yùn)用。多邊形元素可以在網(wǎng)站的很多元素上派上用場(chǎng),比如背景圖、信息傳遞、圖標(biāo)和導(dǎo)航元素的裝飾、配色方案等等。
創(chuàng)建眼前一亮的背景
如果你覺(jué)得目前的設(shè)計(jì)無(wú)法呈現(xiàn)出強(qiáng)烈的視覺(jué)效果的話,不妨試試多邊形風(fēng)格的背景。多邊形的背景本身就很有趣,不管是單獨(dú)使用還是和與圖片或文本搭配,它都能夠給用戶留下深刻的印象。
下面是兩個(gè)使用多邊形背景的栗子。雖然它們采用了不同樣式的多邊形,但給網(wǎng)站產(chǎn)生的影響是一致的---有趣的視覺(jué)效果。這種設(shè)計(jì)元素讓整個(gè)網(wǎng)站也讓網(wǎng)站更生動(dòng)活潑、更富有深度,甚至還可以作為視覺(jué)引導(dǎo)規(guī)劃用戶瀏覽的視線路徑。
對(duì)于設(shè)計(jì)師而言,多邊形元素是很友好的。因?yàn)槎噙呅卧趧?chuàng)建上沒(méi)有什么難度,而且它幾乎可以適用于任何風(fēng)格、任何色調(diào)的網(wǎng)頁(yè)排版。目前最為流行的設(shè)計(jì)方法就是在多邊形中填充微妙的漸變顏色,去除一些僵硬的、扁平的2D效果的邊緣,讓線條更加柔和。
多邊形元素還可以搭配不同的設(shè)計(jì)概念使用,無(wú)論是極簡(jiǎn)的頁(yè)面輪廓還是華麗的設(shè)計(jì)。所以,放心大膽的在你的網(wǎng)站背景中使用多邊形元素吧!
創(chuàng)建有趣的圖標(biāo)和導(dǎo)航元素
在UI元素中(如圖標(biāo)和導(dǎo)航元素等)使用多邊形元素也是最近比較流行的設(shè)計(jì)技巧。網(wǎng)頁(yè)設(shè)計(jì)中具體使用什么樣、多大的多邊形并沒(méi)有一套約定俗成的規(guī)則,這完全取決于設(shè)計(jì)師的創(chuàng)意和想法。不過(guò),就算是一個(gè)微小的多邊形都能讓某個(gè)圖標(biāo)或?qū)Ш讲藛雾?xiàng)更加突出。再加上不同色調(diào)的應(yīng)用,這種設(shè)計(jì)元素絕對(duì)能夠有效抓住用戶的注意力。Chop Chop Agency就是一個(gè)很好的栗子。它在網(wǎng)站中使用不同深淺的黃色拼接出了一個(gè)多邊形的箭頭,用來(lái)引導(dǎo)前往主導(dǎo)航菜單(當(dāng)然,拼接的多邊形并不凌亂)。在極簡(jiǎn)主義布局之下,這個(gè)多邊形的圖標(biāo)很是抓人眼球,在保持布局干凈的同時(shí)讓視覺(jué)焦點(diǎn)突出,有效地指引了訪客的瀏覽。除此以外,這個(gè)網(wǎng)站還有一個(gè)隱藏的設(shè)計(jì):多邊形的箭頭會(huì)隨著頁(yè)面的變化進(jìn)而轉(zhuǎn)化為其他形狀,給用戶提供截然不同的體驗(yàn),為枯燥的瀏覽過(guò)程增加趣味。
再說(shuō),用戶對(duì)多邊形這種設(shè)計(jì)元素很是熟悉,在看到類似的設(shè)計(jì)時(shí)可以很快get到網(wǎng)站的意圖,不會(huì)產(chǎn)生誤解。從本質(zhì)上來(lái)說(shuō),當(dāng)多邊形作為小型的視覺(jué)裝飾時(shí),它與標(biāo)準(zhǔn)的圓形、矩形并沒(méi)有太大差別,對(duì)網(wǎng)站產(chǎn)生的影響是類似的。所以說(shuō),在圖標(biāo)或?qū)Ш教幨褂枚噙呅问潜容^好的選擇。
傳遞特定內(nèi)容和信息
在展示不同元素、傳遞內(nèi)容信息上多邊形也是非常有效的一項(xiàng)工具。這是因?yàn)榛跀?shù)學(xué)和幾何學(xué)的多邊形可以更好的呈現(xiàn)輪廓、突出附加信息,幫助用戶更好的理解特定的元素與內(nèi)容。Ditto 和 Choudhary Lab 兩個(gè)網(wǎng)站就是很好的栗子。在Ditto這個(gè)網(wǎng)站中,多邊形被用在人臉上,這是服務(wù)于展示護(hù)目鏡測(cè)量原理的目的。
而Choudhary Lab是一家科技網(wǎng)站,更多的利用多邊形元素的圖標(biāo)和框架營(yíng)造一種科技感,以深化用戶對(duì)這家網(wǎng)站的認(rèn)知和了解。雖然這兩個(gè)網(wǎng)站在具體使用方法上略有不同,但它們是共通的,它們都給用戶傳遞了一定價(jià)值的內(nèi)容或信息,同時(shí)借助動(dòng)畫效果將不同的信息劃分出層次,以生動(dòng)有趣的方式展現(xiàn),這有助于提升用戶的瀏覽體驗(yàn)。
搭配不同配色方案
多邊形好像天生就與色彩很搭。如果你想要?jiǎng)?chuàng)造一個(gè)高飽和度色彩的設(shè)計(jì)時(shí),多邊形元素絕對(duì)是首選。當(dāng)然,色彩搭配的方法是無(wú)窮無(wú)盡的,下面是列舉的幾種多邊形元素的配色方案,僅供參考:
彩虹配色+多邊形
彩色背景+黑白色的多邊形(可參考 Creamfields 網(wǎng)站)
漸變色+多邊形
用多邊形來(lái)承載提亮色(可參考Bailey and French 網(wǎng)站)
多邊形內(nèi)填充色彩,或者僅采用多邊形輪廓
畫龍點(diǎn)睛、突出重點(diǎn)
在網(wǎng)站中使用多邊形并不是越多越好。如果你仔細(xì)觀察那些優(yōu)秀的設(shè)計(jì)案例,你會(huì)發(fā)現(xiàn)多邊形元素大都起到畫龍點(diǎn)睛的作用。它可以小到一個(gè)Logo,也可大到與品牌設(shè)計(jì)相呼應(yīng)的裝飾性元素,但它們的存在都是不可忽略的,是能夠突出一定重點(diǎn)的。
下面的兩個(gè)案例就非常的典型。雖然它們選用了不同大小的多邊形,但卻很好的抓住了用戶的注意力。雖然樣式?jīng)]有很復(fù)雜,但卻貼合了主題、品牌Logo,提升了網(wǎng)站整體的設(shè)計(jì)感,讓設(shè)計(jì)更顯摩登,網(wǎng)站主題也更加鮮明。
幾何形狀是網(wǎng)頁(yè)中很常見(jiàn)的設(shè)計(jì)元素。這幾年隨著扁平化設(shè)計(jì)等設(shè)計(jì)趨勢(shì)的醞釀和沉淀,多邊形元素開始有著越來(lái)越多的玩法,從純粹的視覺(jué)裝飾到功能性的引導(dǎo)元素。多邊形正讓網(wǎng)站變得越來(lái)越有趣,在網(wǎng)站中的分量也越來(lái)越重。趕緊在自己的網(wǎng)站中試著使用多邊形元素吧!
業(yè)務(wù)部:0523-82199992 業(yè)務(wù)受理:楊經(jīng)理 13961014181 郵箱:huaxia@tzhxw.com
客服部 :0523-82199988 | 技術(shù)部:0523-82199998 | 傳真:0523-82867669
地址:泰州市鳳凰西路98號(hào)泰州軟件園 郵編:225300 網(wǎng)站地圖
泰州市華夏網(wǎng)絡(luò)有限公司:版權(quán)所有 蘇ICP備05073413號(hào)