20個(gè)2013年最值得關(guān)注的網(wǎng)頁設(shè)計(jì)趨勢

在過去的一年中,我們都看到了網(wǎng)頁設(shè)計(jì)趨勢在日益增長。或許有些朋友還記得我早些時(shí)候的一些文章關(guān)于網(wǎng)頁設(shè)計(jì),有興趣的可以點(diǎn)擊來查看,現(xiàn)在我們可以看到其中許多想法已經(jīng)實(shí)現(xiàn)了,甚至有些采用了一些更高層次的新奇想法。在今天這篇文章中,我將與大家分享2013年里20多種網(wǎng)頁設(shè)計(jì)的全新趨勢走向。

  設(shè)計(jì)的影響僅僅是一個(gè)來自于我們的文化和用戶界面感知的反饋。觀念上這些趨勢代表了在網(wǎng)頁設(shè)計(jì)社區(qū)最受喜愛的點(diǎn)子。可是當(dāng)提到設(shè)計(jì)團(tuán)隊(duì)時(shí),就會想到設(shè)計(jì)師擁有他們獨(dú)立的觀點(diǎn),所以要有保留的接受這些想法.

  1.響應(yīng)式布局

  響應(yīng)式設(shè)計(jì)已經(jīng)變成了一個(gè)最終來使設(shè)計(jì)的布局適配各種數(shù)字媒體視窗的入口。此想法是用來支持所有的來自筆記本電腦,臺式機(jī),智能手機(jī),平板和任何將來將要發(fā)布的設(shè)備。
你應(yīng)該想象這個(gè)趨勢更像是一份單一的代碼,完美地運(yùn)行在所有環(huán)境下統(tǒng)一網(wǎng)頁的設(shè)計(jì)中。響應(yīng)式站點(diǎn)被經(jīng)常想象為是向手機(jī)瀏覽器迎合,但那不是唯一的目的。你也可以擁有一個(gè)讓瀏覽器窗口更大,可以讓你的頁面布局添加鮮艷的插圖和圖案的響應(yīng)式站點(diǎn)。

  這里的重點(diǎn)是思考站點(diǎn)設(shè)計(jì)作為一個(gè)動態(tài)和自然流體的單一畫板,css3媒體查詢允許開發(fā)者在有限的或者擴(kuò)展的屏幕之上自定義布局,用這個(gè)來增加你的優(yōu)勢同時(shí)也看看其他設(shè)計(jì)師是如何實(shí)用它的。

  推薦閱讀:響應(yīng)式網(wǎng)頁設(shè)計(jì)系列文章

  2.視網(wǎng)膜支持

  隨著響應(yīng)式支持網(wǎng)站布局,同時(shí)我也發(fā)現(xiàn)在為視網(wǎng)膜設(shè)備建站的人有明顯的增加。蘋果第一次實(shí)踐這個(gè)想法是在iphone4上,從那以后蘋果在他們的其它設(shè)備包括ipad和一些macbooks上也應(yīng)用了視網(wǎng)膜屏。
視網(wǎng)膜屏像素基本上是其他任何普通LCD的兩倍,雖然它們有相同的物理尺寸,但是視網(wǎng)膜屏可以使用兩倍的數(shù)字像素來適應(yīng)相同的物理尺寸。

  這意味著“像素完美”的網(wǎng)頁設(shè)計(jì)師將要制作兩套圖片格式.以此來支持視網(wǎng)膜設(shè)備。首先你需要使你的樣本圖片兩倍于普通圖片的分辨率,接著保存標(biāo)準(zhǔn)版本的圖片。大分辨率的圖片將會在標(biāo)準(zhǔn)分辨率的屏幕上縮小并且在視網(wǎng)膜屏上看上去更鮮明。

  我最喜歡的一個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)工具retina.js,它是一個(gè)javascript庫,用來使你的用戶無論何時(shí)在使用視網(wǎng)膜設(shè)備時(shí),自動的展現(xiàn)視網(wǎng)膜圖片。

  盡管它不檢測CSS背景圖片,但它依舊是用來避免在媒體查詢里寫下所有情況代碼的最方面資源.

  3.固定的頭部條目

  使用CSS position:fixed屬性是使你的頭部條目固定在網(wǎng)站最好的方法。當(dāng)用戶往下滾動你網(wǎng)頁的時(shí)候,此方法會提供一個(gè)靜止不動的導(dǎo)航和一個(gè)回主頁的路徑。這個(gè)趨勢已經(jīng)有一段時(shí)間,但是我們現(xiàn)在才看到它全部的力量。
因?yàn)樗麄儙缀蹩梢怨ぷ髟谌魏尉W(wǎng)站,所以看上去很有趣。它們包括社交網(wǎng)絡(luò)、博客甚至有設(shè)計(jì)工作室又或者是私人公司。這種設(shè)計(jì)非常的流行并且看上去和許多布局很搭配。但是從美學(xué)角度看,這個(gè)固定的條目提供了一個(gè)減小操作網(wǎng)站距離感的特別用戶體驗(yàn)。

  4.大圖片背景

  攝影師或者攝影愛好者肯定很享受這種設(shè)計(jì)趨勢。我已看過無數(shù)的案例來討論使用超大圖片來作為背景的這種想法。這是獲取用戶注意力極佳的方法并且當(dāng)恰如其分的完成時(shí)會看上去很棒。
當(dāng)大圖賞心悅目的時(shí)候我就慢慢的喜歡上了它們,當(dāng)你把這種大圖做背景的想法融合進(jìn)你的設(shè)計(jì)的時(shí)候,這樣的設(shè)計(jì)技術(shù),在市場上會使你的網(wǎng)站顯得更專業(yè)。談到這時(shí)我總會想到曾經(jīng)很流行的Kerem Suer的設(shè)計(jì)作品,為每一個(gè)登到他網(wǎng)站的用戶設(shè)計(jì)一個(gè)非常具有個(gè)性的背景圖片。
5.CSS透明

  CSS3的新屬性已經(jīng)允許編輯網(wǎng)頁上任何元素的不透明,這意味著你可以在不使用photoshop的情況下,在現(xiàn)代瀏覽器中實(shí)現(xiàn)透明。這種透明性的網(wǎng)頁設(shè)計(jì)趨勢最近在codrops上討論帶有一些非常生動的話題。
一個(gè)極佳的例子是在Squarespace Blog上,它頁面中間的層給了一個(gè)background:transparent;屬性,典型地它可以應(yīng)用在生成一些其他平鋪背景上,又或者設(shè)置內(nèi)部元素當(dāng)背景。

  另一個(gè)來操作透明度的設(shè)計(jì)技巧是通過rgba()顏色語法,在css書寫時(shí)你可以指定具體的紅,綠,藍(lán)以及透明度,所以使用rgba(255,255,255,0.6)會生成60%的不透明白色,這確定是一個(gè)設(shè)計(jì)趨勢,所以在2013以及以后我們?nèi)钥梢员в衅诖?

  6.極簡的著陸頁面

  任何一個(gè)花一些時(shí)間調(diào)研市場的人都會明白網(wǎng)絡(luò)銷售是既簡單又聰明的,你可以接觸到世界上任何地方的消費(fèi)群體,另外你還可以賣一些非實(shí)體產(chǎn)品,例如視頻或有創(chuàng)造性的東西。
在網(wǎng)上創(chuàng)建一個(gè)簡潔的著陸頁面就是為了獲取指引到你的產(chǎn)品或服務(wù)的引導(dǎo)線。這個(gè)新趨勢奉行極簡主義的信條:保持所有東西簡單同時(shí)專注你的核心產(chǎn)品。

  在PictoPro webpage上提供了許多精美的低價(jià)圖片示例資源,這個(gè)頁面使用矢量圖標(biāo)作為背景是相當(dāng)靈巧效果,同時(shí)文本也容易閱讀,事實(shí)上它是一個(gè)一次單擊結(jié)算的流程,你不可能做的比那更簡潔了。

  7.數(shù)字快速響應(yīng)編碼

  隨著智能手機(jī)的充足導(dǎo)致QR(快速響應(yīng))應(yīng)用程序的激增。它代表Quick Response Code,始于早期的UPC二維碼,你可以從餐館通知事件的地點(diǎn)和汽車銷售好多地方發(fā)現(xiàn)這種標(biāo)簽。
但是最近我發(fā)現(xiàn)一些站點(diǎn)巧妙的將編碼融入到設(shè)計(jì)中,因?yàn)樗鼈兘?jīng)常出現(xiàn)在打印中,所以你很少注意到它們。但是隨著時(shí)間的增長,由于數(shù)據(jù)傳輸越來越快,QR 編碼會成為流行趨勢。你可以在Keith Cakes 聯(lián)系頁面看到此技術(shù)鮮明的例子。

  8.社交媒體標(biāo)記

  網(wǎng)絡(luò)營銷是網(wǎng)站成功或失敗的基本決定因素。社交化媒體和病毒式營銷在許多不同的網(wǎng)站爆發(fā),Digg 曾經(jīng)是這一領(lǐng)域的霸主,但是現(xiàn)在已經(jīng)被對手Reddit所取代。但是這并不意味著僅僅有兩個(gè)可以在線分享心情故事的網(wǎng)站資源。
你可以在任何社交社團(tuán)上檢索到分享標(biāo)記,這樣就有可能發(fā)現(xiàn)很好的解決方案。你可以把這些分享標(biāo)記放在你的布局的任何地方。這種設(shè)計(jì)對于一些急迫想在Facebook,Twitter更或者是LinkedIn上分享內(nèi)容的讀者或粉絲也是有積極一面的。

  下面我列出了一小部分社交媒體標(biāo)記,你可以在自己的網(wǎng)站布局上嘗試一下。

  § StumbleUpon Badges

  § Google +1 Button

  § Pinterest Buttons

  § LinkedIn Share Badge

  § Hacker News Vote Badge

  § Dzone Vote Buttons

  § Free Social Media Icon Sets – Best Of

  § 100+ Remarkably Beautiful Twitter Icons And Buttons

  9.詳細(xì)的插圖

  新的設(shè)計(jì)趨勢都是為了抓住和控制某人的注意力,我個(gè)人感覺插圖能出色的完成此任務(wù)。但問題是找一位能做出如此完美無瑕藝術(shù)品工作的設(shè)計(jì)師,并且還可以教自己。
插圖可以應(yīng)用在多種各式各樣的方法中,以此給你的網(wǎng)站帶來不同的感受?纯椿ヂ(lián)網(wǎng),你就會發(fā)現(xiàn)許多畫廊和插圖網(wǎng)站都集中在電子插圖上。你能看到這么有美感的工作最終完美的融入網(wǎng)站的品牌中,MailChimp或許是擁有黑猩猩郵遞員商標(biāo)最具代表性的例子了。

  10.無限滾動

  無限滾動加載至少存在許多年了,但是此技術(shù)直到今年才成為主流,我想在2013年還會繼續(xù)。
Pinterest已經(jīng)為他們的布局采用此加載技術(shù)并且運(yùn)行的很完美,你可以搜索任何東西而且當(dāng)你往下滾動時(shí)結(jié)果頁會不斷地加載,分頁基本上不是問題,甚至不會對用戶體驗(yàn)造成影響,討論為簡約設(shè)計(jì)。

  但是另一個(gè)非常棒的或許是我最喜愛的例子是在Tumblr。你可以發(fā)博客同時(shí)可以摘錄所有出現(xiàn)在你面板上你跟隨人的照片。所以當(dāng)你登陸之后所有最近的帖子會出現(xiàn)且無線的往下滾動頁面。

  這是一個(gè)極好的技術(shù),可是并不能應(yīng)用在每一個(gè)布局上。但是對于能適應(yīng)此方法的網(wǎng)站從視覺和表現(xiàn)上都相當(dāng)驚人。

  相關(guān)閱讀: 幾個(gè)超酷的jQuery插件幫助你快速實(shí)現(xiàn)頁面無限滾動功能

  11.主頁特點(diǎn)巡回

  在網(wǎng)上新產(chǎn)品通過滾動圖片展示和示例視頻都很常見。著陸頁和新建頁面經(jīng)常嘗試使用一些甜頭來誘惑潛在的客戶。如果你知道如何在網(wǎng)站上將東西構(gòu)造的很好,它的作用將會很明顯。
回顧2012年我會說此趨勢最好的例子是MediaFire’s homepage.這個(gè)頁面的整個(gè)頭部是在一系列幻燈片之間滾動。每一個(gè)幻燈片都表述了你可以在MediaFire做什么同時(shí)闡述了和其他網(wǎng)站的對比他們的特點(diǎn)。幫助此例子表現(xiàn)突出的依舊是他們使用的大插圖和圖標(biāo)。這是一個(gè)不適合全站使用的趨勢,你僅僅可為某些產(chǎn)品以此來吸引更多的關(guān)注。

  12.滑動的網(wǎng)頁面板

  過去當(dāng)flash和Actionscript很盛行的時(shí)候,滾動的網(wǎng)站很火。而現(xiàn)在,動的效果已經(jīng)可以通過Javascript和JQuery實(shí)現(xiàn),并且依次影響了設(shè)計(jì)師建設(shè)網(wǎng)站的方法。我是偶然喜歡上滾動面板技術(shù)并且希望在2013年看到更立馬點(diǎn)擊,你或許會想CaptainDash是一個(gè)普通的網(wǎng)站,可是當(dāng)你通過導(dǎo)航點(diǎn)擊的時(shí)候,你會發(fā)現(xiàn)每一個(gè)頁面都是通過左右連續(xù)推動加載的。這些動的效果并不總是對手機(jī)用戶是個(gè)好的兆頭。

  若你可以通過響應(yīng)式布局來處理它們,又或者有可供選擇的手機(jī)站點(diǎn),滾動效果在手機(jī)上就會很酷,值得一試!

  13.移動導(dǎo)航切換

  當(dāng)談到響應(yīng)式設(shè)計(jì)時(shí),最難的問題之一是如何創(chuàng)建一個(gè)靠譜的導(dǎo)航。你希望能給用戶對你所有重要的鏈接以直接的訪問,而不要淹沒在頁面中而使其難以辨讀。先保持導(dǎo)航隱藏當(dāng)需要時(shí)再出現(xiàn)也是一個(gè)很好的點(diǎn)子。多。
進(jìn)入移動導(dǎo)航切換菜單漂亮的設(shè)計(jì)趨勢,Treehouse Blog是極少數(shù)將此技術(shù)在智能手機(jī)和pc端瀏覽器表現(xiàn)都很耀眼的例子之一。但是有許多網(wǎng)站和工作室在他們的個(gè)人響應(yīng)式布局中使用了此趨勢。

  我所喜歡的導(dǎo)航切換是你可以以多種方式設(shè)計(jì)導(dǎo)航,你可以有從頭部到底部的導(dǎo)航或者往下滑動,又或者左右推動內(nèi)容。設(shè)計(jì)師有許多玩的選擇但是對于UI實(shí)驗(yàn)需要更多的時(shí)間。

  推薦閱讀:推薦12款最新的jQuery Mobile移動應(yīng)用

  14.全屏排版

  前面我提到過使用超大圖片作為網(wǎng)站布局的背景,這種趨勢依舊可以延伸到文字排版上,設(shè)計(jì)的你網(wǎng)站文本完全適應(yīng)瀏覽器。一些用戶可能感覺到很惱火,但是如果布局對于超大文本很合適這也不是常有的事。
Alex Pierce有一個(gè)很棒的專注于排版布局的網(wǎng)站,你可以通過CSS3的屬性看到富文本效果。另外這個(gè)網(wǎng)站很容易被導(dǎo)航以及許多其他頁面的元素顯示的也是超大的。

  獨(dú)一無二的大字體樣式可以像超大圖片一樣突出,同時(shí)我確定在新的一年我們會看到這種設(shè)計(jì)會得到更多的評論。

  推薦閱讀:分享10個(gè)超棒的文字排版相關(guān)jQuery插件

  15.編程接口和開源

  開源軟件已經(jīng)存在數(shù)十年了同時(shí)自從它存在就改變了網(wǎng)絡(luò)。但是在2012年里我注意到有更多的關(guān)于開源軟件涉及到網(wǎng)頁組件、布局、動態(tài)效果。典型的是我們可以談?wù)撁赓M(fèi)網(wǎng)站模板,布局或者像WordPress的CMS軟件像Github這樣開放的編程接口和資源不僅允許設(shè)計(jì)者進(jìn)行原型布局,還可以在頁面上制作動畫和效果。在網(wǎng)絡(luò)上jQuery事實(shí)上有無數(shù)的插件供免費(fèi)下載使用。

  說真的我不希望開源項(xiàng)目在任何時(shí)期發(fā)展緩慢,現(xiàn)在就是該開始并且促進(jìn)在創(chuàng)建網(wǎng)站領(lǐng)域知識的時(shí)候。

  16.深度盒子陰影

  我在2012年的文章中已經(jīng)討論過CSS3的盒子陰影,這種趨勢已被證明是非常準(zhǔn)確的。事實(shí)上,我經(jīng)常希望看到在現(xiàn)代網(wǎng)頁設(shè)計(jì)中加入盒子陰影效果。這種效果看上去很神奇,它們從來不會偏離美學(xué)除非過度使用。
我相信在前些年設(shè)計(jì)師遇到的問題源于盒子陰影太難而不容易實(shí)現(xiàn)。往前推幾年,這種效果需要Javascript或者在photoshop中制作陰影背景,而現(xiàn)在陰影盒子可以在CSS中使用幾行代碼來生成。

  我將會在整個(gè)2013年留意盒子陰影效果。我想此效果已經(jīng)在設(shè)計(jì)社區(qū)根深蒂固,現(xiàn)在更該關(guān)注的是誰最有創(chuàng)造力的實(shí)現(xiàn)盒子陰影效果。

  17.CSS3動畫

  CSS3 帶有相關(guān)瀏覽器前綴的transition屬性允許CSS實(shí)現(xiàn)像Javascript一樣的動畫效果。設(shè)計(jì)師現(xiàn)在能以不同的CSS屬性實(shí)現(xiàn)動畫效果。我有許多恰當(dāng)使用過渡效果的hover effects and form input fields例子。
另外一個(gè)優(yōu)秀且激動人心的例子來自CSS alerts tutorial on Codrops。提示你如何為各種不同的動畫設(shè)置時(shí)間。

  我對新的設(shè)計(jì)師推動不通過腳本來實(shí)現(xiàn)的動畫充滿信心。

  18.垂直導(dǎo)航

  當(dāng)我第一次注意到不同的網(wǎng)站使用此趨勢的時(shí)候,并不是很感興趣?墒窃谶^去的一年里,我看到越來越多的設(shè)計(jì)師創(chuàng)造了完美的垂直解決方案。當(dāng)此布局被正確的完成,垂直網(wǎng)站布局可以容納充足的內(nèi)容同時(shí)具有好的設(shè)計(jì)體驗(yàn)。
Riot Industries的組合對于新設(shè)計(jì)師是個(gè)很好的例子。查看一下導(dǎo)航鏈接是如何工作的,在移動上去是整個(gè)組合動的效果是如何實(shí)現(xiàn)的。邊框紋理確實(shí)展現(xiàn)了一個(gè)左右兩列分開的線。

  紋理效果同樣在另一個(gè)垂直布局上出現(xiàn),例如CSS畫廊Design Bombs.
19.單頁面網(wǎng)頁設(shè)計(jì)

  單頁面設(shè)計(jì)是一個(gè)很大的話題,覆蓋了許多不同網(wǎng)站分類。顯而易見自從萬維網(wǎng)創(chuàng)建單頁面網(wǎng)站就出現(xiàn)了。但是最近幾年這種趨勢變成了一種更加自然的用戶體驗(yàn)。
我想為Cage App設(shè)計(jì)的網(wǎng)站或許是這篇文章中列出的例子中最棒的一個(gè)。他們利用單頁布局通過水平布局鮮明的展現(xiàn)出內(nèi)容。但是你還會注意到頁面的頂端有一個(gè)模糊的背景圖片效果。

  隨著你往下滾動頁面,導(dǎo)航條一直固定在你的瀏覽器頂部。合并其他的網(wǎng)頁設(shè)計(jì)趨勢到單頁面布局里面是吸引用戶注意力和創(chuàng)建一個(gè)迷人的網(wǎng)站的解決方法。

  20.圓圈元素設(shè)計(jì)

  這一圓圈設(shè)計(jì)趨勢在網(wǎng)站布局是比較新的且已經(jīng)被賦予了很多的關(guān)注。設(shè)計(jì)師喜歡圓圈設(shè)計(jì),因?yàn)樗鼈兏蓛、整?一般適合任何塊狀布局。你可以構(gòu)建你的原形或者把你的頁面元素更改為圓形設(shè)計(jì)(例如用戶頭像、分享按鈕、發(fā)表日期等等)。
Lucia Soto組合基本上是圓形網(wǎng)頁設(shè)計(jì)中很棒的一個(gè)例子。這個(gè)網(wǎng)站是動態(tài)創(chuàng)建的所以你得在頁面上水平移動不同的片段。您也將注意到一些可愛的向量藝術(shù)品以及星羅棋布的間隙。Web設(shè)計(jì)師渴望這些額外的花絮在頁面布局上,因?yàn)樗麄兺嘎冻鑫ㄒ恍浴?/p>

  你可以在Site Optimizer主頁上發(fā)現(xiàn)一個(gè)簡單的例子,它使用了圓形頁面設(shè)計(jì)作為他們服務(wù)的信息賣點(diǎn)。


TAG:
評論加載中...
內(nèi)容:
評論者: 驗(yàn)證碼:
  

在線客服

技術(shù)支持
點(diǎn)擊這里給我發(fā)消息
產(chǎn)品咨詢
點(diǎn)擊這里給我發(fā)消息