網(wǎng)頁(yè)設(shè)計(jì)是現(xiàn)代網(wǎng)站建設(shè)的基礎(chǔ),只要掌握基本的網(wǎng)頁(yè)設(shè)計(jì)知識(shí)就能夠提高網(wǎng)站建設(shè)的價(jià)值,廣州網(wǎng)站建設(shè)公司認(rèn)為網(wǎng)站建設(shè)的成功與否還不如說(shuō)是網(wǎng)頁(yè)設(shè)計(jì)的成功與否。一個(gè)優(yōu)秀的設(shè)計(jì)師需要借助設(shè)計(jì)來(lái)盡量抓住用戶(hù)的注意力。一些能夠更好、更快抓住用戶(hù)注意力的設(shè)計(jì)技巧就成了設(shè)計(jì)師最喜愛(ài)的東西。進(jìn)入5月之后,會(huì)發(fā)現(xiàn)正在流行的幾個(gè)設(shè)計(jì)趨勢(shì)都呈現(xiàn)出這樣的特點(diǎn),無(wú)論是時(shí)髦小巧的導(dǎo)航,還是有趣的圖層裁剪效果。
每年的網(wǎng)頁(yè)設(shè)計(jì)樣式都會(huì)改變,這是時(shí)代和審美視覺(jué)的變化結(jié)果,2018年的設(shè)計(jì)之美據(jù)深圳網(wǎng)站建設(shè)專(zhuān)家預(yù)測(cè)將會(huì)以這三種方式流通:
1. 時(shí)髦小巧的導(dǎo)航設(shè)計(jì)
之前流行過(guò)大型的導(dǎo)航設(shè)計(jì),隨后漢堡圖標(biāo)又大行其道??赡軐?duì)于漢堡菜單的隱藏式設(shè)計(jì)不夠明顯,傳統(tǒng)的導(dǎo)航設(shè)計(jì)又逐步回歸,不過(guò)在風(fēng)格上,倒是呈現(xiàn)出時(shí)髦而小巧的特點(diǎn)。這種導(dǎo)航在細(xì)節(jié)和體驗(yàn)上更加考究,更重要的是,小巧的布局和信息量的控制使得它一目了然,如果想要更多的導(dǎo)航信息則需要點(diǎn)擊「更多」按鈕。
這種導(dǎo)航設(shè)計(jì)的優(yōu)點(diǎn)在于,它為下面的主要內(nèi)容留下了足夠的空間和焦點(diǎn),又確保了導(dǎo)航本身的功能性。
而缺陷也同樣明顯,由于導(dǎo)航設(shè)計(jì)得過(guò)于小巧,可能會(huì)讓部分用戶(hù)感到困惑。就目前來(lái)看,這種導(dǎo)航適合單頁(yè)式的網(wǎng)站或者是訪(fǎng)問(wèn)量相對(duì)沒(méi)有那么大、個(gè)性十足的網(wǎng)頁(yè),結(jié)構(gòu)復(fù)雜的網(wǎng)站就不適合這樣的設(shè)計(jì)趨勢(shì)了。
下面的三個(gè)網(wǎng)站不同程度地運(yùn)用了這一設(shè)計(jì)趨勢(shì):
Geex Arts 在頁(yè)面的右側(cè)加入了一個(gè)黑色的垂直條,用一個(gè)小的暫停按鈕和小巧的動(dòng)態(tài)圖片來(lái)吸引你切換頁(yè)面。小巧的導(dǎo)航被置于頁(yè)面底部。
IC Creative 這個(gè)網(wǎng)站采取了一個(gè)相對(duì)折中的方案,采用了側(cè)邊欄導(dǎo)航,而其中包含了 LOGO、漢堡圖標(biāo)和搜索按鈕,這樣保證了菜單的顯著,也保持了整個(gè)設(shè)計(jì)的簡(jiǎn)約性。當(dāng)你點(diǎn)開(kāi)漢堡圖標(biāo)的時(shí)候,會(huì)發(fā)現(xiàn)這里面真的隱藏著大量的鏈接,甚至包含了文章推薦。
Weekend Creative Agency 的導(dǎo)航欄同樣置于側(cè)邊欄,不過(guò)是在左側(cè),所有的鏈接都擺在明面上,但是從名稱(chēng)到樣式都非常的簡(jiǎn)約小巧。
2. 有趣的圖層剪切效果
學(xué)會(huì)通過(guò)圖層控制來(lái)營(yíng)造充滿(mǎn)視覺(jué)吸引力的設(shè)計(jì),會(huì)讓你在設(shè)計(jì)的時(shí)候如虎添翼。通過(guò)控制不同圖層的元素互動(dòng),可以創(chuàng)造令人著迷的視覺(jué)效果。
值得慶幸的是,以往令人撓頭的各種設(shè)計(jì)效果,現(xiàn)如今對(duì)于網(wǎng)頁(yè)前端而言已經(jīng)是小菜一碟了。越來(lái)越成熟的前端技術(shù)讓圖層的控制和管理更加得心應(yīng)手。最近,最為流行的圖層相關(guān)的技術(shù),是圖層剪切的效果,這種效果指的是將部分元素切除為前景中的元素騰出位置。
這種圖層剪切效果幾乎適用于任何類(lèi)型的網(wǎng)站和設(shè)計(jì),被裁剪的部分可以是任意大小、位置的,而使用這一效果的訣竅在于控制元素之間的協(xié)同,前景的元素要和背景的元素之間完美地配合起來(lái)。
被裁剪的部分應(yīng)該和整個(gè)設(shè)計(jì)的信息傳達(dá)息息相關(guān),和設(shè)計(jì)目標(biāo)保持一致。比如,它應(yīng)該能夠輔助導(dǎo)航,引導(dǎo)視覺(jué),幫助用戶(hù)獲取信息,促進(jìn)功能,幫助用戶(hù)理解信息。
Tilted Chair 這個(gè)網(wǎng)站中,設(shè)計(jì)師將標(biāo)題中切割出空間,放上了一只眼睛,非常引人注意。
RJ Investments 這個(gè)網(wǎng)站在圖片元素中切割出空白區(qū)域,來(lái)展示文本,放置行為召喚元素。
DTO Films 這個(gè)網(wǎng)站采用了另外一種方式,設(shè)計(jì)師在背景中裁剪出一個(gè)區(qū)域,并且以明亮的色彩填補(bǔ)其中,再疊加上超大的標(biāo)題文本,錯(cuò)落地排布,搭配上動(dòng)效,營(yíng)造出有趣的視覺(jué)體驗(yàn)。
3. 快速剪輯的視頻
設(shè)計(jì)師一直在借助視頻來(lái)呈現(xiàn)設(shè)計(jì),講述故事。不過(guò),在視頻內(nèi)容的呈現(xiàn)上,千變?nèi)f化,目前最流行的做法,是使用快速剪輯或者加速之后的視頻,來(lái)快速地呈現(xiàn)豐富的內(nèi)容。毫無(wú)疑問(wèn),這樣的方式不僅貼合了如今用戶(hù)注意力集中時(shí)間短的現(xiàn)狀,而且更好地保持用戶(hù)的參與度。
快節(jié)奏的視頻剪輯,好處在于更加快速的信息展現(xiàn)。用戶(hù)在瀏覽的時(shí)候能夠很快弄明白視頻要呈現(xiàn)的內(nèi)容,整個(gè)視頻的循環(huán)速度也更快,也能夠更好的促進(jìn)用戶(hù)和網(wǎng)站的交互。
下面的三個(gè)網(wǎng)站都使用了快速剪輯的視頻元素。
Dept Agency 當(dāng)中,設(shè)計(jì)師不僅讓視頻的剪輯切換更快,而且還使用了快進(jìn)的方式加速,快速剪輯的視頻當(dāng)中,每以小段都包含了一個(gè)關(guān)鍵詞,用戶(hù)幾乎不需要滾動(dòng)頁(yè)面就可以在快速展現(xiàn)的視頻中了解到很多內(nèi)容。
Plae 這個(gè)網(wǎng)站同樣采用了視頻背景,視頻是由幾段視頻組合起來(lái)的,每一段視頻的前半部分是常速播放,后半部分是加速播放,不過(guò)總體上都很短,也就幾秒鐘。這種剪輯讓訪(fǎng)客可以清晰地觀察到場(chǎng)景,又能快速獲取信息,頁(yè)面整體上布局并不會(huì)隨著視頻變化,CTA 按鈕和文本位置不變,用戶(hù)也可以便捷地同網(wǎng)頁(yè)交互。
Meskie Granie Music Festival 這個(gè)網(wǎng)站使用不同速度播放視頻,并且通過(guò)快速疊加為用戶(hù)創(chuàng)造出獨(dú)特的風(fēng)格體驗(yàn)。
結(jié)語(yǔ)
網(wǎng)站建設(shè)是連接網(wǎng)頁(yè)的主板,網(wǎng)頁(yè)之間需要通過(guò)互相的搭配實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)造出吸引人的體驗(yàn),經(jīng)過(guò)對(duì)用戶(hù)需求的仔細(xì)研究后才能夠獲得更好的體驗(yàn)。