手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

你知道了嗎?2015年網(wǎng)頁設(shè)計(jì)的9大趨勢(shì)

2015-10-14    博博

藍(lán)藍(lán)設(shè)計(jì)www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

來源:優(yōu)設(shè)網(wǎng)

2015-website-design-trend-1

有點(diǎn)迷茫同學(xué)的這篇總結(jié)比國外的接地氣,比之前的更全面,分析夠深入,案例夠精彩,想在下半年跟上網(wǎng)頁設(shè)計(jì)潮流的同學(xué)可以來收割咯。

其實(shí)在此之前已經(jīng)有很多小伙伴翻譯或總結(jié)過類似文章來分析優(yōu)秀網(wǎng)頁設(shè)計(jì)的趨勢(shì),不過我還是希望我總結(jié)的東西能更宏觀一點(diǎn)并為大家?guī)硪恍┬碌臇|西。

稍后看官們可能會(huì)覺得我說的這幾點(diǎn)可能你們都見過或者自己也在一些項(xiàng)目中運(yùn)用起來,沒錯(cuò),沒見過就不叫趨勢(shì), 哈哈!而將這些東西進(jìn)行總結(jié)然后運(yùn)用在自己今后的設(shè)計(jì)中,這樣我們才能緊跟潮流并逐漸引領(lǐng)潮流,否則將只是走馬觀花。

我們通過幾個(gè)網(wǎng)站以及看官記憶中的網(wǎng)站一起探索吧,雖是管中窺豹,但趨勢(shì)可見一斑!

一、平面設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中的崛起

以前我們可能會(huì)覺得平面設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)以及UI設(shè)計(jì)有很大的區(qū)別,會(huì)平面設(shè)計(jì)的人可能未必能做好網(wǎng)頁設(shè)計(jì),但這樣的觀念是時(shí)候革新了。實(shí)際上好的平面設(shè)計(jì)師會(huì)將自己的平面設(shè)計(jì)功底融合到網(wǎng)頁設(shè)計(jì)當(dāng)中,如果我們?cè)趯W(xué)網(wǎng)頁設(shè)計(jì)的時(shí)候只是參照網(wǎng)站設(shè)計(jì),那我們永遠(yuǎn)無法突破。

不論是用平面設(shè)計(jì)作為背景也好,或者是用平面設(shè)計(jì)的元素作為網(wǎng)頁控件或者裝飾也好,實(shí)際上好的平面設(shè)計(jì)會(huì)大大提高網(wǎng)站的視覺沖擊力。所以未來的UI設(shè)計(jì)師也必須是一個(gè)不錯(cuò)的平面設(shè)計(jì)師了,或者統(tǒng)稱為視覺設(shè)計(jì)師,加油!

GROBA

1tg20150729

WIT

2tg20150729

二、全屏首頁(首頁大圖、視頻背景、背景、交互式首頁)

全屏首頁是一種歡迎頁面或者著陸頁的形式,當(dāng)前網(wǎng)站五花八門,能在第一時(shí)間內(nèi)傳達(dá)網(wǎng)站或企業(yè)的精神并吸引用戶繼續(xù)瀏覽的重任逐漸落在了這個(gè)全屏首頁的肩上。不論是圖片背景還是視頻背景,視覺沖擊力和痛點(diǎn)抓取力度成為了首頁的重任,這也是篩選潛在客戶的一個(gè)方式。首屏的文案也尤為重要。

(1)首頁大圖背景

首頁大圖的形式相信大家都不陌生了,通常都是高質(zhì)量的攝影圖片,或者在純色背景上的產(chǎn)品圖片等等。優(yōu)勢(shì)不言而喻,那就是具有很棒的視覺傳達(dá)效果和沖擊力。而且隨著網(wǎng)速的不斷提升,幾秒內(nèi)加載一個(gè)百K的高清背景對(duì)用戶來說不是什么問題。優(yōu)設(shè)網(wǎng)曾推薦過許多高清圖庫站,稍加搜索便可找到。

3tg20150729

(2)首頁視頻背景

使用視頻作為首頁的背景在視覺上更加具有沖擊力,好的視頻宣傳片更是為網(wǎng)站如虎添翼。但是缺點(diǎn)亦較為明顯,目前國內(nèi)網(wǎng)速相對(duì)仍然較慢,(即便是30M的光纖,在很多地方其實(shí)都是共享網(wǎng)速,高峰期看個(gè)在線視頻都會(huì)卡),而視頻背景通常都是網(wǎng)頁打開即直接播放的,在網(wǎng)速達(dá)不到一定標(biāo)準(zhǔn)的情況下,視頻會(huì)卡頓播放,體驗(yàn)很差。而且為了讓視頻播放流暢,實(shí)際上很多網(wǎng)站的視頻都是壓縮成成分辨率比較低的視頻,清晰度和圖片相差較大。希望以后能出現(xiàn)視頻緩沖或者預(yù)加載技術(shù)等方式來提升整個(gè)瀏覽效果,關(guān)鍵還是網(wǎng)速。

JONAS ERIKSSON

4tg20150729

該網(wǎng)站視頻背景就相當(dāng)具有震撼力,快速將自己的作品展示給觀眾,讓觀眾充滿好奇。

(3) HTML5背景

我們以粒子背景為例。相對(duì)于視頻背景而言,使用新的網(wǎng)絡(luò)語言制作的背景在加載速度、成像質(zhì)量等方面都優(yōu)于視頻背景,而且背景也具有很棒的視覺體驗(yàn)。

FiberSensing

5tg20150729

(4)交互式首頁

交互式首頁指的是在網(wǎng)頁上做一些可以用鼠標(biāo)或者鍵盤控制的元素來與用戶發(fā)生互動(dòng),這樣用戶在首頁停留的時(shí)間會(huì)更久,同時(shí)卻很享受這個(gè)過程,提高用戶體驗(yàn)的同時(shí)提升網(wǎng)站的趣味性和企業(yè)形象。交互式頁面設(shè)計(jì)經(jīng)常會(huì)運(yùn)用到諸多HTML5或者CSS3技術(shù),比如前面提到的粒子。

Suanier

6tg20150729

鼠標(biāo)可控制轉(zhuǎn)盤,且通過不同的轉(zhuǎn)向透視與錯(cuò)位形成了立體的層次效果。

三、全屏富式導(dǎo)航

傳統(tǒng)網(wǎng)頁設(shè)計(jì)中,導(dǎo)航菜單一般會(huì)放置在頁面頂部或者側(cè)面,但越來越多的電腦端網(wǎng)站卻將菜單全部隱藏在漢堡圖標(biāo)中。

這種設(shè)計(jì)起初只是導(dǎo)航,稱之為“全屏導(dǎo)航”;而到后期,隨著設(shè)計(jì)的革新和創(chuàng)意的加入,這個(gè)頁面的內(nèi)容也越來越豐富,頁面加入了社交媒體的鏈接,加入了聯(lián)系方式,甚至有的還加入了留言板等等,我們稱之為“全屏富式導(dǎo)航”。

這種形式的導(dǎo)航在用戶體驗(yàn)上其實(shí)還是有些風(fēng)險(xiǎn)的,因?yàn)槎嗔艘淮吸c(diǎn)擊,而且會(huì)導(dǎo)致很多用戶忽略細(xì)節(jié)性內(nèi)容,難以達(dá)到最優(yōu)設(shè)計(jì),而這種菜單通常也需要建立在用戶對(duì)漢堡菜單的標(biāo)志具有相當(dāng)?shù)氖煜こ潭然A(chǔ)之上。目前,我們建議使用這種菜單的網(wǎng)站會(huì)有一個(gè)引導(dǎo)性的提示來告知用戶更多信息的入口,或者除了菜單一個(gè)入口外增加其他入口。用戶體驗(yàn)的一個(gè)準(zhǔn)則是將用戶需要的信息主動(dòng)呈遞給用戶或是能讓用戶在三次點(diǎn)擊內(nèi)找到自己需要的信息,所以這種隱藏在一個(gè)圖標(biāo)里的菜單目前還是略有風(fēng)險(xiǎn)。不過這種風(fēng)險(xiǎn)會(huì)隨著普及程度降低。

7tg20150729

四、三維視覺效果的崛起

這一點(diǎn)將對(duì)網(wǎng)頁設(shè)計(jì)師提出了更高的要求,網(wǎng)頁設(shè)計(jì)中會(huì)融入產(chǎn)品的三維動(dòng)態(tài)展示,這可能會(huì)要求網(wǎng)頁設(shè)計(jì)中包含UI與交互設(shè)計(jì)、工業(yè)設(shè)計(jì)與渲染、視頻剪輯、精通HTML5的前端等等。也正是因?yàn)檫@種設(shè)計(jì)門檻較高,所以增長速度較慢;但隨著產(chǎn)品專題站的爆炸式增長,在產(chǎn)品介紹里使用三維已成為越來越多的網(wǎng)頁設(shè)計(jì)師的選擇。

實(shí)現(xiàn)三維預(yù)覽效果的方式很多,有的是通過WebGL技術(shù),有的是通過鼠標(biāo)控制視頻播放的技術(shù),也有許多三維動(dòng)態(tài)展示其實(shí)是多張不同角度的圖片拼接而成,一幀一幀進(jìn)行播放。

BLIZEYEWEAR

8tg20150729

MAC PRO

9tg20150729

五、動(dòng)效將更加普及和廣泛

期初,網(wǎng)站動(dòng)效會(huì)集中在頁面內(nèi)部的元素,而隨著網(wǎng)頁技術(shù)和創(chuàng)意的不斷發(fā)展,動(dòng)效在網(wǎng)頁中變得無處不在。單頁面網(wǎng)站中瀏覽模塊之間的切換不再局限于單純的推動(dòng)切換或漸變切換;而多網(wǎng)頁的網(wǎng)站網(wǎng)頁之間的切換也變得更加柔和,通過不同頁面關(guān)閉和打開之間動(dòng)畫效果的銜接,你會(huì)以為你從頭到尾都在一個(gè)網(wǎng)頁上。

頁面內(nèi)部元素的動(dòng)效,大至banner小至一個(gè)button,鼠標(biāo)懸浮或者焦點(diǎn)的改變,這些元素都融入了太多豐富的動(dòng)效。甚至于GIF動(dòng)圖也在網(wǎng)頁中逐漸崛起以補(bǔ)充一些代碼難以實(shí)現(xiàn)的動(dòng)效。

前面提到的網(wǎng)站中多數(shù)都有精致的動(dòng)效哦。

DIVI(wordpress)

10tg20150729

該網(wǎng)站就是通過GIF實(shí)現(xiàn)的一些頁面中展示性的動(dòng)效。

JOHO’s

11tg20150729

其實(shí)我們提過的很多都在該網(wǎng)站得到了體現(xiàn),運(yùn)用了大量的網(wǎng)頁新技術(shù),比如WebGL技術(shù)、序列幀動(dòng)畫……尤其在頁面切換時(shí)的動(dòng)效。

六、單頁網(wǎng)站走勢(shì)繼續(xù)上升

同樣,隨著網(wǎng)速以及網(wǎng)絡(luò)技術(shù)的上升,單頁式網(wǎng)站依舊呈現(xiàn)上升趨勢(shì),這種網(wǎng)站最顯著的優(yōu)勢(shì)是信息不容易遺漏,如果訪問一個(gè)站點(diǎn)通過點(diǎn)擊又點(diǎn)出了許多子站或者網(wǎng)頁,而這些網(wǎng)頁和主頁之間的邏輯比較混亂或者不能一目了然,那這個(gè)網(wǎng)站的瀏覽體驗(yàn)一定是很差的。而單頁網(wǎng)站解決了這個(gè)問題,你看到的或者跳轉(zhuǎn)的頁面,其實(shí)還都是在這一個(gè)頁面上。而AJAX異步加載等技術(shù)也解決了龐大單頁網(wǎng)站的加載速度問題。

AQUATILIS

12tg20150729

點(diǎn)擊頁面中的按鈕,新的內(nèi)容將會(huì)將原來的頁面向左推動(dòng),關(guān)閉后恢復(fù)原來的位置,就好比左側(cè)的頁面是一個(gè)時(shí)間軸,而你則挨個(gè)瀏覽軸上的內(nèi)容,用戶體驗(yàn)很贊。

七、網(wǎng)頁音效

越來越多的網(wǎng)頁設(shè)計(jì)會(huì)在頁面中加入一些音效,可以是網(wǎng)頁背景音效,也可以是頁面滾動(dòng)音效,也可以是焦點(diǎn)改變時(shí)元素的音效。而這些音效共同的特點(diǎn)是都很精致輕微,輕輕點(diǎn)綴,就像轉(zhuǎn)動(dòng)保險(xiǎn)柜旋鈕發(fā)出的聲音一樣,清脆悅耳。這樣不會(huì)給瀏覽者增加無謂的困擾。而越來越多的瀏覽器為了防止用戶被困擾,增加了關(guān)閉當(dāng)前頁面音效的功能。

MY/STATIC/SELF

13tg20150729

不過這個(gè)網(wǎng)站的音效并不柔和悅耳,是一種酷酷的恐怖的科技感

八、移動(dòng)優(yōu)先的響應(yīng)式設(shè)計(jì)繼續(xù)盛行

響應(yīng)式設(shè)計(jì)已經(jīng)是老生常談了,相信大家都清楚什么是響應(yīng)式設(shè)計(jì)。之前很多人也分析過響應(yīng)式設(shè)計(jì)的利與弊,我也不再贅述。

很多國內(nèi)的網(wǎng)站在建站之初不會(huì)選擇響應(yīng)式設(shè)計(jì),原因也是比較符合我國國情的,流量少、網(wǎng)速慢、4G普及程度不夠等諸多原因,導(dǎo)致我們?cè)谑謾C(jī)端瀏覽一個(gè)響應(yīng)式的企業(yè)網(wǎng)站的時(shí)候會(huì)耗用較長時(shí)間的加載,而根據(jù)5秒原則,用戶5秒內(nèi)打不開一個(gè)網(wǎng)站,就會(huì)選擇關(guān)閉。目前國內(nèi)BAT的網(wǎng)站基本還是移動(dòng)和電腦分開設(shè)計(jì),而國內(nèi)很多建站公司的響應(yīng)式企業(yè)建站,也含有一部分噱頭在內(nèi)。

不過,響應(yīng)式設(shè)計(jì)在國際和國內(nèi)卻依舊穩(wěn)步上升,隨著智能手機(jī)技術(shù)的不斷革新,移動(dòng)端的上網(wǎng)用戶已經(jīng)逐漸追擊電腦上網(wǎng)用戶,而中國移動(dòng)網(wǎng)名的數(shù)量在世界上是領(lǐng)先的。移動(dòng)端網(wǎng)站的設(shè)計(jì)越來越被重視,而響應(yīng)式設(shè)計(jì)正是一個(gè)不錯(cuò)的解決方案。

14tg20150729

九、中文網(wǎng)站中矢量字體的使用逐漸上升

我們經(jīng)常在國外的網(wǎng)站上看到網(wǎng)站內(nèi)使用一套字體作為自己的網(wǎng)站字體,即使用戶本地沒有這個(gè)字體,網(wǎng)站也會(huì)很輕易加載到字體并在瀏覽器中運(yùn)用。而縱觀中文網(wǎng)站,90%以上的網(wǎng)站內(nèi)字體不是宋體就是微軟雅黑,想用幾個(gè)不一樣的字就得做成png圖片,原因很簡單,中文字庫太大。一套Helvetica標(biāo)準(zhǔn)字體大小是81.68KB,而一套微軟雅黑常規(guī)體大小是20.5MB,你難道要用戶打開網(wǎng)頁時(shí)加載20.5MB的數(shù)據(jù)嗎?

但是隨著中文在線字庫的崛起以及在線制作矢量圖標(biāo)字體工具的發(fā)展,包括字蛛計(jì)劃,我們可以使用矢量素材作為我們的字體了,而不僅限于矢量圖標(biāo)。

GOGORO

15tg20150729

先說這么多,后期慢慢補(bǔ)充吧。

2015流行的設(shè)計(jì)趨勢(shì)

  • 大局篇:《我的征程是未來!帶你展望2015年最重要的網(wǎng)頁設(shè)計(jì)趨勢(shì)》
  • 細(xì)節(jié)篇:《先人一步!帶你了解制霸2015年的網(wǎng)頁設(shè)計(jì)趨勢(shì)》
  • 色彩篇:《跟上色彩潮流!帶你展望2015年的網(wǎng)頁設(shè)計(jì)配色趨勢(shì)》
  • 排版篇:《緊跟潮流之布局篇!2015年至關(guān)重要的四種排版趨勢(shì)》

投稿者:@章蕭醇有點(diǎn)迷茫

uisdc-tuweia-2

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔