時(shí)光荏苒，歲月如梭，還有整整六天，2013年就將成為歷史。在這一年里，我們見(jiàn)到了太多“所謂的潮流”，不知道大家心里對(duì)它們的看法如何。那么今天我們也想盤(pán)點(diǎn)一下自己心目中的“2013年最熱門(mén)網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)”，是騾子是馬，拉出來(lái)溜溜~

　　01.響應(yīng)式設(shè)計(jì)

　　2013年，瀏覽器的建設(shè)中大量使用CSS3，這就加速了響應(yīng)式設(shè)計(jì)的發(fā)展，所以“響應(yīng)式設(shè)計(jì)”頻頻登上各大設(shè)計(jì)網(wǎng)站的頭版，成為2013年網(wǎng)頁(yè)設(shè)計(jì)最火熱的趨勢(shì)。小編掐指一算，這個(gè)趨勢(shì)十有八九會(huì)延續(xù)到2014年，到時(shí)候你的顧客可能就會(huì)用專業(yè)的語(yǔ)氣告訴你，哥要一個(gè)響應(yīng)式網(wǎng)頁(yè)!

　　響應(yīng)式設(shè)計(jì)的原理是網(wǎng)頁(yè)圖層會(huì)根據(jù)屏幕的尺寸來(lái)重編頁(yè)碼，追蹤設(shè)備型號(hào)以及不斷增多的用戶描述等。

　　02.扁平化設(shè)計(jì)

　　2013年幾乎人人都使用過(guò)扁平化設(shè)計(jì)的系統(tǒng)，不過(guò)，你是否覺(jué)得有點(diǎn)厭倦了呢?

　　自從瀏覽器開(kāi)始支持CSS3的文字陰影和圖像陰影功能后，擬物化設(shè)計(jì)就成為了設(shè)計(jì)師們的心頭好，同時(shí)，這種高于扁平化又低于3D的仿真效果也受到了廣大人民的一致好評(píng)。

　　不過(guò)這一切在2013發(fā)生了翻天覆地的變化，率先改變這種設(shè)計(jì)方式的是著名的蘋(píng)果公司。在2013年他們?cè)O(shè)計(jì)的ios7系統(tǒng)在炎熱的夏天給我們帶來(lái)了一陣清爽的涼風(fēng)。Ios7界面看上去非常之簡(jiǎn)潔，完全的扁平化設(shè)計(jì)。

　　不過(guò)不可否認(rèn)的是，扁平化在很早以前就被作為一種趨勢(shì)去研究了，蘋(píng)果公司也只能算后來(lái)者居上的典型例子，畢竟老喬給公司打下了堅(jiān)實(shí)的基礎(chǔ)。不管怎樣，扁平化設(shè)計(jì)肯定是2013年最熱網(wǎng)頁(yè)趨勢(shì)之一。

　　03.靜態(tài)頁(yè)眉

　　隨著“固定”這一概念的迅速傳播，靜態(tài)頁(yè)眉也成為了一大趨勢(shì)。什么是靜態(tài)頁(yè)眉?即當(dāng)用戶滾動(dòng)網(wǎng)頁(yè)時(shí)，頁(yè)眉保持在原位不動(dòng)，提供持久穩(wěn)固的導(dǎo)航作用及品牌宣傳作用。這一特殊的趨勢(shì)已經(jīng)受到了廣泛的應(yīng)用，因?yàn)樵O(shè)計(jì)師們終于可以使用CSS2.1中的“固定”功能了，這一功能非常的可靠，不用擔(dān)心瀏覽器支持與否這個(gè)問(wèn)題。

　　04. 視差

　　2013最火趨勢(shì)中，視差效果也得分了一杯羹。對(duì)于不太了解形勢(shì)的人來(lái)說(shuō)，視差效果指的是通過(guò)不同角度看設(shè)備，你能得到不一樣的效果，且物體接近你的速度似乎比你想象中要快。曾經(jīng)在屏幕上這是一種技術(shù)，廣泛應(yīng)用于游戲中，而今被帶到了網(wǎng)頁(yè)設(shè)計(jì)里。

　　作為一種顯示深度和3D的方法，視差用不同的速度來(lái)控制不同元素的移動(dòng)，如果制作好的話，這將是一個(gè)灰常優(yōu)秀的網(wǎng)頁(yè)~

　　05.無(wú)限滾動(dòng)網(wǎng)站

　　滾動(dòng)，滾動(dòng)，滾動(dòng)，使鼠標(biāo)滾輪滾動(dòng)……

　　我相信今天你一定見(jiàn)到過(guò)這種網(wǎng)頁(yè)，它們只有一個(gè)頁(yè)面，不過(guò)內(nèi)容異常豐富，特點(diǎn)就是似乎永遠(yuǎn)在滾動(dòng)。這種網(wǎng)站摒棄了傳統(tǒng)的多網(wǎng)頁(yè)展示的方式，而選擇在同一個(gè)頁(yè)面展示不同的內(nèi)容，垂直放置內(nèi)容，從而避免了用戶需要等待新頁(yè)面加載或不斷刷新訪問(wèn)內(nèi)容這一狀況。

　　我覺(jué)得這是一個(gè)很好的講故事的方式，也可以展示產(chǎn)品，又或者僅僅是呈現(xiàn)一個(gè)公司所有信息的頁(yè)面。這種頁(yè)面通常會(huì)和視差滾動(dòng)效果相結(jié)合。

　　06. 支持HIDPI(視網(wǎng)膜)顯示

　　這一趨勢(shì)發(fā)展直接反映了當(dāng)下不斷升級(jí)的硬件市場(chǎng)。在ipad使用視網(wǎng)膜顯示屏后，iphone視網(wǎng)膜顯示屏的推出就顯得不可避免了。在蘋(píng)果公司率先推出這一硬件后，其他制造商紛紛效仿，越來(lái)越多的產(chǎn)品開(kāi)始使用HiDPI顯示器。

　　現(xiàn)在，網(wǎng)頁(yè)設(shè)計(jì)師也已經(jīng)適應(yīng)了這種新硬件，并且對(duì)其加以利用，增加了應(yīng)用的分辨率，提供不同版本的圖像服務(wù)，這樣一來(lái)，可以讓商品看起來(lái)更加清爽、完美!

　　07.字體設(shè)計(jì)

　　在今年的網(wǎng)頁(yè)中，字體也占了不少版面。這些設(shè)計(jì)得益于Twitter的引導(dǎo)框架，在這個(gè)引導(dǎo)框架中，系統(tǒng)提供了幾種布局模塊及類型，大多都會(huì)突出網(wǎng)頁(yè)字體，然后是正文以及少量的圖像。

　　這一趨勢(shì)也反映出了今后網(wǎng)絡(luò)的走向，因?yàn)檫@種設(shè)計(jì)方式能讓我們輕松的布局，所以短時(shí)間內(nèi)人們對(duì)它的熱情只增不減。

　　08.圓形設(shè)計(jì)元素

　　在2013年，我們看到了一些非常酷的圓形元素，這在很大程度上要?dú)w功于CSS3的圓角邊框?qū)傩浴?/p>

　　這種設(shè)計(jì)通常在網(wǎng)頁(yè)蓬勃發(fā)展時(shí)期出現(xiàn)，所以也是一邊變相的證明，說(shuō)明了2013年尊的是網(wǎng)頁(yè)設(shè)計(jì)的本命年~

　　09. CSS3動(dòng)畫(huà)效果

　　在2000年初，F(xiàn)lash是復(fù)雜動(dòng)畫(huà)效果國(guó)的國(guó)王，因?yàn)樗俏ㄒ弧⒖煽壳铱尚兄谱鲃?dòng)畫(huà)的工具。不過(guò)隨著技術(shù)的發(fā)展，JavaScript等工具取代Flash，成為了動(dòng)畫(huà)設(shè)計(jì)師的另一個(gè)制作工具。

　　螳螂捕蟬黃雀在后，2013年我們見(jiàn)證了CSS3替換JavaScript作為主要工具實(shí)現(xiàn)常見(jiàn)的動(dòng)畫(huà)效果全過(guò)程，這在很大程度上與瀏覽器采用的關(guān)鍵幀和轉(zhuǎn)換屬性有關(guān)。

　　10.超大型按鈕

　　2013年最后一個(gè)超熱門(mén)趨勢(shì)就是——超大型的按鈕!不過(guò)這里我要替超大型按鈕正一下名，這里的超大不是指那個(gè)超大，你懂的…它只是比傳統(tǒng)的按鈕要大，但是還是符合網(wǎng)頁(yè)布局的比例。這是一個(gè)非常實(shí)用的方法，能讓你注意到一個(gè)特定的文字或動(dòng)作。

最新評(píng)論