一、平面設計在網(wǎng)頁(yè)設計中的崛起
以前我們可能會(huì )覺(jué)得平面設計和網(wǎng)頁(yè)設計以及UI設計有很大的區別，會(huì )平面設計的人可能未必能做好網(wǎng)頁(yè)設計，但這樣的觀(guān)念是時(shí)候革新了。實(shí)際上好的平面設計師會(huì )將自己的平面設計功底融合到網(wǎng)頁(yè)設計當中，如果我們在學(xué)網(wǎng)頁(yè)設計的時(shí)候只是參照網(wǎng)站設計，那我們永遠無(wú)法突破。
不論是用平面設計作為背景也好，或者是用平面設計的元素作為網(wǎng)頁(yè)控件或者裝飾也好，實(shí)際上好的平面設計會(huì )大大提高網(wǎng)站的視覺(jué)沖擊力。所以未來(lái)的UI設計師也必須是一個(gè)不錯的平面設計師了，或者統稱(chēng)為視覺(jué)設計師，加油!
二、全屏首頁(yè)(首頁(yè)大圖、視頻背景、特效背景、交互式首頁(yè))
全屏首頁(yè)是一種歡迎頁(yè)面或者著(zhù)陸頁(yè)的形式，當前網(wǎng)站五花八門(mén)，能在第一時(shí)間內傳達網(wǎng)站或企業(yè)的精神并吸引用戶(hù)繼續瀏覽的重任逐漸落在了這個(gè)全屏首頁(yè)的肩上。不論是圖片背景還是視頻背景，視覺(jué)沖擊力和痛點(diǎn)抓取力度成為了首頁(yè)的重任，這也是篩選潛在客戶(hù)的一個(gè)方式。首屏的文案也尤為重要。
(1)首頁(yè)大圖背景
首頁(yè)大圖的形式相信大家都不陌生了，通常都是高質(zhì)量的攝影圖片，或者在純色背景上的產(chǎn)品圖片等等。優(yōu)勢不言而喻，那就是具有很棒的視覺(jué)傳達效果和沖擊力。而且隨著(zhù)網(wǎng)速的不斷提升，幾秒內加載一個(gè)百K的高清背景對用戶(hù)來(lái)說(shuō)不是什么問(wèn)題。優(yōu)設網(wǎng)曾推薦過(guò)許多高清圖庫站，稍加搜索便可找到。
(2)首頁(yè)視頻背景
使用視頻作為首頁(yè)的背景在視覺(jué)上更加具有沖擊力，好的視頻宣傳片更是為網(wǎng)站如虎添翼。但是缺點(diǎn)亦較為明顯，目前國內網(wǎng)速相對仍然較慢，(即便是30M的光纖，在很多地方其實(shí)都是共享網(wǎng)速，高峰期看個(gè)在線(xiàn)視頻都會(huì )卡)，而視頻背景通常都是網(wǎng)頁(yè)打開(kāi)即直接播放的，在網(wǎng)速達不到一定標準的情況下，視頻會(huì )卡頓播放，體驗很差。而且為了讓視頻播放流暢，實(shí)際上很多網(wǎng)站的視頻都是壓縮成成分辨率比較低的視頻，清晰度和圖片相差較大。希望以后能出現視頻緩沖或者預加載技術(shù)等方式來(lái)提升整個(gè)瀏覽效果，關(guān)鍵還是網(wǎng)速。
該網(wǎng)站視頻背景就相當具有震撼力，快速將自己的作品展示給觀(guān)眾，讓觀(guān)眾充滿(mǎn)好奇。
(3) HTML5特效背景
我們以粒子特效背景為例。相對于視頻背景而言，使用新的網(wǎng)絡(luò )語(yǔ)言制作的背景在加載速度、成像質(zhì)量等方面都優(yōu)于視頻背景，而且特效背景也具有很棒的視覺(jué)體驗。
(4)交互式首頁(yè)
交互式首頁(yè)指的是在網(wǎng)頁(yè)上做一些可以用鼠標或者鍵盤(pán)控制的元素來(lái)與用戶(hù)發(fā)生互動(dòng)，這樣用戶(hù)在首頁(yè)停留的時(shí)間會(huì )更久，同時(shí)卻很享受這個(gè)過(guò)程，提高用戶(hù)體驗的同時(shí)提升網(wǎng)站的趣味性和企業(yè)形象。交互式頁(yè)面設計經(jīng)常會(huì )運用到諸多HTML5或者CSS3技術(shù)，比如前面提到的粒子特效。
Suanier
鼠標可控制轉盤(pán)，且通過(guò)不同的轉向透視與錯位形成了立體的層次效果。
三、全屏富式導航
傳統網(wǎng)頁(yè)設計中，導航菜單一般會(huì )放置在頁(yè)面頂部或者側面，但越來(lái)越多的電腦端網(wǎng)站卻將菜單全部隱藏在漢堡圖標中。
這種設計起初只是導航，稱(chēng)之為“全屏導航”;而到后期，隨著(zhù)設計的革新和創(chuàng )意的加入，這個(gè)頁(yè)面的內容也越來(lái)越豐富，頁(yè)面加入了社交媒體的鏈接，加入了聯(lián)系方式，甚至有的還加入了留言板等等，我們稱(chēng)之為“全屏富式導航”。
這種形式的導航在用戶(hù)體驗上其實(shí)還是有些風(fēng)險的，因為多了一次點(diǎn)擊，而且會(huì )導致很多用戶(hù)忽略細節性?xún)热，難以達到最優(yōu)設計，而這種菜單通常也需要建立在用戶(hù)對漢堡菜單的標志具有相當的熟悉程度基礎之上。目前，我們建議使用這種菜單的網(wǎng)站會(huì )有一個(gè)引導性的提示來(lái)告知用戶(hù)更多信息的入口，或者除了菜單一個(gè)入口外增加其他入口。用戶(hù)體驗的一個(gè)準則是將用戶(hù)需要的信息主動(dòng)呈遞給用戶(hù)或是能讓用戶(hù)在三次點(diǎn)擊內找到自己需要的信息，所以這種隱藏在一個(gè)圖標里的菜單目前還是略有風(fēng)險。不過(guò)這種風(fēng)險會(huì )隨著(zhù)普及程度降低。
四、三維視覺(jué)效果的崛起
這一點(diǎn)將對網(wǎng)頁(yè)設計師提出了更高的要求，網(wǎng)頁(yè)設計中會(huì )融入產(chǎn)品的三維動(dòng)態(tài)展示，這可能會(huì )要求網(wǎng)頁(yè)設計中包含UI與交互設計、工業(yè)設計與渲染、視頻剪輯、精通HTML5的前端等等。也正是因為這種設計門(mén)檻較高，所以增長(cháng)速度較慢;但隨著(zhù)產(chǎn)品專(zhuān)題站的爆炸式增長(cháng)，在產(chǎn)品介紹里使用三維已成為越來(lái)越多的網(wǎng)頁(yè)設計師的選擇。
實(shí)現三維預覽效果的方式很多，有的是通過(guò)WebGL技術(shù)，有的是通過(guò)鼠標控制視頻播放的技術(shù)，也有許多三維動(dòng)態(tài)展示其實(shí)是多張不同角度的圖片拼接而成，一幀一幀進(jìn)行播放。
五、動(dòng)效將更加普及和廣泛
期初，網(wǎng)站動(dòng)效會(huì )集中在頁(yè)面內部的元素，而隨著(zhù)網(wǎng)頁(yè)技術(shù)和創(chuàng )意的不斷發(fā)展，動(dòng)效在網(wǎng)頁(yè)中變得無(wú)處不在。單頁(yè)面網(wǎng)站中瀏覽模塊之間的切換不再局限于單純的推動(dòng)切換或漸變切換;而多網(wǎng)頁(yè)的網(wǎng)站網(wǎng)頁(yè)之間的切換也變得更加柔和，通過(guò)不同頁(yè)面關(guān)閉和打開(kāi)之間動(dòng)畫(huà)效果的銜接，你會(huì )以為你從頭到尾都在一個(gè)網(wǎng)頁(yè)上。
頁(yè)面內部元素的動(dòng)效，大至banner小至一個(gè)button，鼠標懸浮或者焦點(diǎn)的改變，這些元素都融入了太多豐富的動(dòng)效。甚至于GIF動(dòng)圖也在網(wǎng)頁(yè)中逐漸崛起以補充一些代碼難以實(shí)現的動(dòng)效。
前面提到的網(wǎng)站中多數都有精致的動(dòng)效哦。
該網(wǎng)站就是通過(guò)GIF實(shí)現的一些頁(yè)面中展示性的動(dòng)效。
其實(shí)我們提過(guò)的很多特效都在該網(wǎng)站得到了體現，運用了大量的網(wǎng)頁(yè)新技術(shù)，比如WebGL技術(shù)、序列幀動(dòng)畫(huà)……尤其在頁(yè)面切換時(shí)的動(dòng)效。
六、單頁(yè)網(wǎng)站走勢繼續上升
同樣，隨著(zhù)網(wǎng)速以及網(wǎng)絡(luò )技術(shù)的上升，單頁(yè)式網(wǎng)站依舊呈現上升趨勢，這種網(wǎng)站最顯著(zhù)的優(yōu)勢是信息不容易遺漏，如果訪(fǎng)問(wèn)一個(gè)站點(diǎn)通過(guò)點(diǎn)擊又點(diǎn)出了許多子站或者網(wǎng)頁(yè)，而這些網(wǎng)頁(yè)和主頁(yè)之間的邏輯比較混亂或者不能一目了然，那這個(gè)網(wǎng)站的瀏覽體驗一定是很差的。而單頁(yè)網(wǎng)站解決了這個(gè)問(wèn)題，你看到的或者跳轉的頁(yè)面，其實(shí)還都是在這一個(gè)頁(yè)面上。而AJAX異步加載等技術(shù)也解決了龐大單頁(yè)網(wǎng)站的加載速度問(wèn)題。
點(diǎn)擊頁(yè)面中的按鈕，新的內容將會(huì )將原來(lái)的頁(yè)面向左推動(dòng)，關(guān)閉后恢復原來(lái)的位置，就好比左側的頁(yè)面是一個(gè)時(shí)間軸，而你則挨個(gè)瀏覽軸上的內容，用戶(hù)體驗很贊。
七、網(wǎng)頁(yè)音效
越來(lái)越多的網(wǎng)頁(yè)設計會(huì )在頁(yè)面中加入一些音效，可以是網(wǎng)頁(yè)背景音效，也可以是頁(yè)面滾動(dòng)音效，也可以是焦點(diǎn)改變時(shí)元素的音效。而這些音效共同的特點(diǎn)是都很精致輕微，輕輕點(diǎn)綴，就像轉動(dòng)保險柜旋鈕發(fā)出的聲音一樣，清脆悅耳。這樣不會(huì )給瀏覽者增加無(wú)謂的困擾。而越來(lái)越多的瀏覽器為了防止用戶(hù)被困擾，增加了關(guān)閉當前頁(yè)面音效的功能。
不過(guò)這個(gè)網(wǎng)站的音效并不柔和悅耳，是一種酷酷的恐怖的科技感
八、移動(dòng)優(yōu)先的響應式設計繼續盛行
響應式設計已經(jīng)是老生常談了，相信大家都清楚什么是響應式設計。之前很多人也分析過(guò)響應式設計的利與弊，我也不再贅述。
很多國內的網(wǎng)站在建站之初不會(huì )選擇響應式設計，原因也是比較符合我國國情的，流量少、網(wǎng)速慢、4G普及程度不夠等諸多原因，導致我們在手機端瀏覽一個(gè)響應式的企業(yè)網(wǎng)站的時(shí)候會(huì )耗用較長(cháng)時(shí)間的加載，而根據5秒原則，用戶(hù)5秒內打不開(kāi)一個(gè)網(wǎng)站，就會(huì )選擇關(guān)閉。目前國內BAT的網(wǎng)站基本還是移動(dòng)和電腦分開(kāi)設計，而國內很多建站公司的響應式企業(yè)建站，也含有一部分噱頭在內。
不過(guò)，響應式設計在國際和國內卻依舊穩步上升，隨著(zhù)智能手機技術(shù)的不斷革新，移動(dòng)端的上網(wǎng)用戶(hù)已經(jīng)逐漸追擊電腦上網(wǎng)用戶(hù)，而中國移動(dòng)網(wǎng)名的數量在世界上是領(lǐng)先的。移動(dòng)端網(wǎng)站的設計越來(lái)越被重視，而響應式設計正是一個(gè)不錯的解決方案。
九、中文網(wǎng)站中矢量字體的使用逐漸上升
我們經(jīng)常在國外的網(wǎng)站上看到網(wǎng)站內使用一套字體作為自己的網(wǎng)站字體，即使用戶(hù)本地沒(méi)有這個(gè)字體，網(wǎng)站也會(huì )很輕易加載到字體并在瀏覽器中運用。而縱觀(guān)中文網(wǎng)站，90%以上的網(wǎng)站內字體不是宋體就是微軟雅黑，想用幾個(gè)不一樣的字就得做成png圖片，原因很簡(jiǎn)單，中文字庫太大。一套Helvetica標準字體大小是81.68KB，而一套微軟雅黑常規體大小是20.5MB，你難道要用戶(hù)打開(kāi)網(wǎng)頁(yè)時(shí)加載20.5MB的數據嗎?
但是隨著(zhù)中文在線(xiàn)字庫的崛起以及在線(xiàn)制作矢量圖標字體工具的發(fā)展，包括字蛛計劃，我們可以使用矢量素材作為我們的字體了，而不僅限于矢量圖標。
GOGORO
以上內容由宜興網(wǎng)絡(luò )公司博路網(wǎng)絡(luò )網(wǎng)上收集整理，以供大家學(xué)習！如有侵犯到您的權益，請聯(lián)系我們,我們會(huì )在第一時(shí)間進(jìn)行處理！QQ:370063804
下一篇：html5 常用標簽