20個(gè)2013年最值得關(guān)注的網(wǎng)頁(yè)設計趨勢
在過(guò)去的一年中，我們都看到了網(wǎng)頁(yè)設計趨勢在日益增長(cháng)。或許有些朋友還記得我早些時(shí)候的一些文章關(guān)于網(wǎng)頁(yè)設計，有興趣的可以點(diǎn)擊來(lái)查看，現在我們可以看到其中許多想法已經(jīng)實(shí)現了，甚至有些采用了一些更高層次的新奇想法。在今天這篇文章中，我將與大家分享2013年里20多種網(wǎng)頁(yè)設計的全新趨勢走向。
設計的影響僅僅是一個(gè)來(lái)自于我們的文化和用戶(hù)界面感知的反饋。觀(guān)念上這些趨勢代表了在網(wǎng)頁(yè)設計社區最受喜愛(ài)的點(diǎn)子。可是當提到設計團隊時(shí)，就會(huì )想到設計師擁有他們獨立的觀(guān)點(diǎn)，所以要有保留的接受這些想法.
1.響應式布局
響應式設計已經(jīng)變成了一個(gè)最終來(lái)使設計的布局適配各種數字媒體視窗的入口。此想法是用來(lái)支持所有的來(lái)自筆記本電腦，臺式機，智能手機，平板和任何將來(lái)將要發(fā)布的設備。
你應該想象這個(gè)趨勢更像是一份單一的代碼，完美地運行在所有環(huán)境下統一網(wǎng)頁(yè)的設計中。響應式站點(diǎn)被經(jīng)常想象為是向手機瀏覽器迎合，但那不是唯一的目的。你也可以擁有一個(gè)讓瀏覽器窗口更大，可以讓你的頁(yè)面布局添加鮮艷的插圖和圖案的響應式站點(diǎn)。
這里的重點(diǎn)是思考站點(diǎn)設計作為一個(gè)動(dòng)態(tài)和自然流體的單一畫(huà)板，css3媒體查詢(xún)允許開(kāi)發(fā)者在有限的或者擴展的屏幕之上自定義布局，用這個(gè)來(lái)增加你的優(yōu)勢同時(shí)也看看其他設計師是如何實(shí)用它的。
推薦閱讀：響應式網(wǎng)頁(yè)設計系列文章
2.視網(wǎng)膜支持
隨著(zhù)響應式支持網(wǎng)站布局，同時(shí)我也發(fā)現在為視網(wǎng)膜設備建站的人有明顯的增加。蘋(píng)果第一次實(shí)踐這個(gè)想法是在iphone4上，從那以后蘋(píng)果在他們的其它設備包括ipad和一些macbooks上也應用了視網(wǎng)膜屏。
視網(wǎng)膜屏像素基本上是其他任何普通LCD的兩倍，雖然它們有相同的物理尺寸，但是視網(wǎng)膜屏可以使用兩倍的數字像素來(lái)適應相同的物理尺寸。
這意味著(zhù)“像素完美”的網(wǎng)頁(yè)設計師將要制作兩套圖片格式.以此來(lái)支持視網(wǎng)膜設備。首先你需要使你的樣本圖片兩倍于普通圖片的分辨率，接著(zhù)保存標準版本的圖片。大分辨率的圖片將會(huì )在標準分辨率的屏幕上縮小并且在視網(wǎng)膜屏上看上去更鮮明。
我最喜歡的一個(gè)響應式網(wǎng)頁(yè)設計工具retina.js,它是一個(gè)javascript庫，用來(lái)使你的用戶(hù)無(wú)論何時(shí)在使用視網(wǎng)膜設備時(shí)，自動(dòng)的展現視網(wǎng)膜圖片。
盡管它不檢測CSS背景圖片，但它依舊是用來(lái)避免在媒體查詢(xún)里寫(xiě)下所有情況代碼的最方面資源.
3.固定的頭部條目
使用CSS position:fixed屬性是使你的頭部條目固定在網(wǎng)站最好的方法。當用戶(hù)往下滾動(dòng)你網(wǎng)頁(yè)的時(shí)候，此方法會(huì )提供一個(gè)靜止不動(dòng)的導航和一個(gè)回主頁(yè)的路徑。這個(gè)趨勢已經(jīng)有一段時(shí)間，但是我們現在才看到它全部的力量。
因為他們幾乎可以工作在任何網(wǎng)站，所以看上去很有趣。它們包括社交網(wǎng)絡(luò )、博客甚至有設計工作室又或者是私人公司。這種設計非常的流行并且看上去和許多布局很搭配。但是從美學(xué)角度看，這個(gè)固定的條目提供了一個(gè)減小操作網(wǎng)站距離感的特別用戶(hù)體驗。
4.大圖片背景
攝影師或者攝影愛(ài)好者肯定很享受這種設計趨勢。我已看過(guò)無(wú)數的案例來(lái)討論使用超大圖片來(lái)作為背景的這種想法。這是獲取用戶(hù)注意力極佳的方法并且當恰如其分的完成時(shí)會(huì )看上去很棒。
當大圖賞心悅目的時(shí)候我就慢慢的喜歡上了它們，當你把這種大圖做背景的想法融合進(jìn)你的設計的時(shí)候，這樣的設計技術(shù)，在市場(chǎng)上會(huì )使你的網(wǎng)站顯得更專(zhuān)業(yè)。談到這時(shí)我總會(huì )想到曾經(jīng)很流行的Kerem Suer的設計作品，為每一個(gè)登到他網(wǎng)站的用戶(hù)設計一個(gè)非常具有個(gè)性的背景圖片。
5.CSS透明
CSS3的新屬性已經(jīng)允許編輯網(wǎng)頁(yè)上任何元素的不透明，這意味著(zhù)你可以在不使用photoshop的情況下，在現代瀏覽器中實(shí)現透明。這種透明性的網(wǎng)頁(yè)設計趨勢最近在codrops上討論帶有一些非常生動(dòng)的話(huà)題。
一個(gè)極佳的例子是在Squarespace Blog上，它頁(yè)面中間的層給了一個(gè)background:transparent;屬性,典型地它可以應用在生成一些其他平鋪背景上，又或者設置內部元素當背景。
另一個(gè)來(lái)操作透明度的設計技巧是通過(guò)rgba()顏色語(yǔ)法，在css書(shū)寫(xiě)時(shí)你可以指定具體的紅，綠，藍以及透明度，所以使用rgba(255,255,255,0.6)會(huì )生成60%的不透明白色，這確定是一個(gè)設計趨勢，所以在2013以及以后我們仍可以抱有期待!
6.極簡(jiǎn)的著(zhù)陸頁(yè)面
任何一個(gè)花一些時(shí)間調研市場(chǎng)的人都會(huì )明白網(wǎng)絡(luò )銷(xiāo)售是既簡(jiǎn)單又聰明的，你可以接觸到世界上任何地方的消費群體，另外你還可以賣(mài)一些非實(shí)體產(chǎn)品，例如視頻或有創(chuàng )造性的東西。
在網(wǎng)上創(chuàng )建一個(gè)簡(jiǎn)潔的著(zhù)陸頁(yè)面就是為了獲取指引到你的產(chǎn)品或服務(wù)的引導線(xiàn)。這個(gè)新趨勢奉行極簡(jiǎn)主義的信條：保持所有東西簡(jiǎn)單同時(shí)專(zhuān)注你的核心產(chǎn)品。
在PictoPro webpage上提供了許多精美的低價(jià)圖片示例資源，這個(gè)頁(yè)面使用矢量圖標作為背景是相當靈巧效果，同時(shí)文本也容易閱讀，事實(shí)上它是一個(gè)一次單擊結算的流程，你不可能做的比那更簡(jiǎn)潔了。
7.數字快速響應編碼
隨著(zhù)智能手機的充足導致QR(快速響應)應用程序的激增。它代表Quick Response Code，始于早期的UPC二維碼,你可以從餐館通知事件的地點(diǎn)和汽車(chē)銷(xiāo)售好多地方發(fā)現這種標簽。
但是最近我發(fā)現一些站點(diǎn)巧妙的將編碼融入到設計中，因為它們經(jīng)常出現在打印中，所以你很少注意到它們。但是隨著(zhù)時(shí)間的增長(cháng)，由于數據傳輸越來(lái)越快，QR 編碼會(huì )成為流行趨勢。你可以在Keith Cakes 聯(lián)系頁(yè)面看到此技術(shù)鮮明的例子。
8.社交媒體標記
網(wǎng)絡(luò )營(yíng)銷(xiāo)是網(wǎng)站成功或失敗的基本決定因素。社交化媒體和病毒式營(yíng)銷(xiāo)在許多不同的網(wǎng)站爆發(fā)，Digg 曾經(jīng)是這一領(lǐng)域的霸主，但是現在已經(jīng)被對手Reddit所取代。但是這并不意味著(zhù)僅僅有兩個(gè)可以在線(xiàn)分享心情故事的網(wǎng)站資源。
你可以在任何社交社團上檢索到分享標記，這樣就有可能發(fā)現很好的解決方案。你可以把這些分享標記放在你的布局的任何地方。這種設計對于一些急迫想在Facebook，Twitter更或者是LinkedIn上分享內容的讀者或粉絲也是有積極一面的。
下面我列出了一小部分社交媒體標記，你可以在自己的網(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.詳細的插圖
新的設計趨勢都是為了抓住和控制某人的注意力，我個(gè)人感覺(jué)插圖能出色的完成此任務(wù)。但問(wèn)題是找一位能做出如此完美無(wú)瑕藝術(shù)品工作的設計師，并且還可以教自己。
插圖可以應用在多種各式各樣的方法中，以此給你的網(wǎng)站帶來(lái)不同的感受。看看互聯(lián)網(wǎng)，你就會(huì )發(fā)現許多畫(huà)廊和插圖網(wǎng)站都集中在電子插圖上。你能看到這么有美感的工作最終完美的融入網(wǎng)站的品牌中，MailChimp或許是擁有黑猩猩郵遞員商標最具代表性的例子了。
10.無(wú)限滾動(dòng)
無(wú)限滾動(dòng)加載至少存在許多年了,但是此技術(shù)直到今年才成為主流，我想在2013年還會(huì )繼續。
Pinterest已經(jīng)為他們的布局采用此加載技術(shù)并且運行的很完美，你可以搜索任何東西而且當你往下滾動(dòng)時(shí)結果頁(yè)會(huì )不斷地加載，分頁(yè)基本上不是問(wèn)題，甚至不會(huì )對用戶(hù)體驗造成影響，討論為簡(jiǎn)約設計。
但是另一個(gè)非常棒的或許是我最喜愛(ài)的例子是在Tumblr。你可以發(fā)博客同時(shí)可以摘錄所有出現在你面板上你跟隨人的照片。所以當你登陸之后所有最近的帖子會(huì )出現且無(wú)線(xiàn)的往下滾動(dòng)頁(yè)面。
這是一個(gè)極好的技術(shù)，可是并不能應用在每一個(gè)布局上。但是對于能適應此方法的網(wǎng)站從視覺(jué)和表現上都相當驚人。
相關(guān)閱讀： 幾個(gè)超酷的jQuery插件幫助你快速實(shí)現頁(yè)面無(wú)限滾動(dòng)功能
11.主頁(yè)特點(diǎn)巡回
在網(wǎng)上新產(chǎn)品通過(guò)滾動(dòng)圖片展示和示例視頻都很常見(jiàn)。著(zhù)陸頁(yè)和新建頁(yè)面經(jīng)常嘗試使用一些甜頭來(lái)誘惑潛在的客戶(hù)。如果你知道如何在網(wǎng)站上將東西構造的很好，它的作用將會(huì )很明顯。
回顧2012年我會(huì )說(shuō)此趨勢最好的例子是MediaFire’s homepage.這個(gè)頁(yè)面的整個(gè)頭部是在一系列幻燈片之間滾動(dòng)。每一個(gè)幻燈片都表述了你可以在MediaFire做什么同時(shí)闡述了和其他網(wǎng)站的對比他們的特點(diǎn)。幫助此例子表現突出的依舊是他們使用的大插圖和圖標。這是一個(gè)不適合全站使用的趨勢，你僅僅可為某些產(chǎn)品以此來(lái)吸引更多的關(guān)注。
12.滑動(dòng)的網(wǎng)頁(yè)面板
過(guò)去當flash和Actionscript很盛行的時(shí)候，滾動(dòng)的網(wǎng)站很火。而現在，動(dòng)的效果已經(jīng)可以通過(guò)Javascript和JQuery實(shí)現，并且依次影響了設計師建設網(wǎng)站的方法。我是偶然喜歡上滾動(dòng)面板技術(shù)并且希望在2013年看到更立馬點(diǎn)擊，你或許會(huì )想CaptainDash是一個(gè)普通的網(wǎng)站，可是當你通過(guò)導航點(diǎn)擊的時(shí)候，你會(huì )發(fā)現每一個(gè)頁(yè)面都是通過(guò)左右連續推動(dòng)加載的。這些動(dòng)的效果并不總是對手機用戶(hù)是個(gè)好的兆頭。
若你可以通過(guò)響應式布局來(lái)處理它們，又或者有可供選擇的手機站點(diǎn)，滾動(dòng)效果在手機上就會(huì )很酷，值得一試!
13.移動(dòng)導航切換
當談到響應式設計時(shí)，最難的問(wèn)題之一是如何創(chuàng )建一個(gè)靠譜的導航。你希望能給用戶(hù)對你所有重要的鏈接以直接的訪(fǎng)問(wèn)，而不要淹沒(méi)在頁(yè)面中而使其難以辨讀。先保持導航隱藏當需要時(shí)再出現也是一個(gè)很好的點(diǎn)子。多。
進(jìn)入移動(dòng)導航切換菜單漂亮的設計趨勢，Treehouse Blog是極少數將此技術(shù)在智能手機和pc端瀏覽器表現都很耀眼的例子之一。但是有許多網(wǎng)站和工作室在他們的個(gè)人響應式布局中使用了此趨勢。
我所喜歡的導航切換是你可以以多種方式設計導航，你可以有從頭部到底部的導航或者往下滑動(dòng)，又或者左右推動(dòng)內容。設計師有許多玩的選擇但是對于UI實(shí)驗需要更多的時(shí)間。
推薦閱讀：推薦12款最新的jQuery Mobile移動(dòng)應用
14.全屏排版
前面我提到過(guò)使用超大圖片作為網(wǎng)站布局的背景，這種趨勢依舊可以延伸到文字排版上，設計的你網(wǎng)站文本完全適應瀏覽器。一些用戶(hù)可能感覺(jué)到很惱火，但是如果布局對于超大文本很合適這也不是常有的事。
Alex Pierce有一個(gè)很棒的專(zhuān)注于排版布局的網(wǎng)站，你可以通過(guò)CSS3的屬性看到富文本效果。另外這個(gè)網(wǎng)站很容易被導航以及許多其他頁(yè)面的元素顯示的也是超大的。
獨一無(wú)二的大字體樣式可以像超大圖片一樣突出，同時(shí)我確定在新的一年我們會(huì )看到這種設計會(huì )得到更多的評論。
推薦閱讀：分享10個(gè)超棒的文字排版相關(guān)jQuery插件
15.編程接口和開(kāi)源
開(kāi)源軟件已經(jīng)存在數十年了同時(shí)自從它存在就改變了網(wǎng)絡(luò )。但是在2012年里我注意到有更多的關(guān)于開(kāi)源軟件涉及到網(wǎng)頁(yè)組件、布局、動(dòng)態(tài)效果。典型的是我們可以談?wù)撁赓M網(wǎng)站模板，布局或者像WordPress的CMS軟件像Github這樣開(kāi)放的編程接口和資源不僅允許設計者進(jìn)行原型布局，還可以在頁(yè)面上制作動(dòng)畫(huà)和效果。在網(wǎng)絡(luò )上jQuery事實(shí)上有無(wú)數的插件供免費下載使用。
說(shuō)真的我不希望開(kāi)源項目在任何時(shí)期發(fā)展緩慢，現在就是該開(kāi)始并且促進(jìn)在創(chuàng )建網(wǎng)站領(lǐng)域知識的時(shí)候。
16.深度盒子陰影
我在2012年的文章中已經(jīng)討論過(guò)CSS3的盒子陰影，這種趨勢已被證明是非常準確的。事實(shí)上，我經(jīng)常希望看到在現代網(wǎng)頁(yè)設計中加入盒子陰影效果。這種效果看上去很神奇，它們從來(lái)不會(huì )偏離美學(xué)除非過(guò)度使用。
我相信在前些年設計師遇到的問(wèn)題源于盒子陰影太難而不容易實(shí)現。往前推幾年，這種效果需要Javascript或者在photoshop中制作陰影背景，而現在陰影盒子可以在CSS中使用幾行代碼來(lái)生成。
我將會(huì )在整個(gè)2013年留意盒子陰影效果。我想此效果已經(jīng)在設計社區根深蒂固，現在更該關(guān)注的是誰(shuí)最有創(chuàng )造力的實(shí)現盒子陰影效果。
17.CSS3動(dòng)畫(huà)
CSS3 帶有相關(guān)瀏覽器前綴的transition屬性允許CSS實(shí)現像Javascript一樣的動(dòng)畫(huà)效果。設計師現在能以不同的CSS屬性實(shí)現動(dòng)畫(huà)效果。我有許多恰當使用過(guò)渡效果的hover effects and form input fields例子。
另外一個(gè)優(yōu)秀且激動(dòng)人心的例子來(lái)自CSS alerts tutorial on Codrops。提示你如何為各種不同的動(dòng)畫(huà)設置時(shí)間。
我對新的設計師推動(dòng)不通過(guò)腳本來(lái)實(shí)現的動(dòng)畫(huà)充滿(mǎn)信心。
18.垂直導航
當我第一次注意到不同的網(wǎng)站使用此趨勢的時(shí)候，并不是很感興趣。可是在過(guò)去的一年里，我看到越來(lái)越多的設計師創(chuàng )造了完美的垂直解決方案。當此布局被正確的完成，垂直網(wǎng)站布局可以容納充足的內容同時(shí)具有好的設計體驗。
Riot Industries的組合對于新設計師是個(gè)很好的例子。查看一下導航鏈接是如何工作的，在移動(dòng)上去是整個(gè)組合動(dòng)的效果是如何實(shí)現的。邊框紋理確實(shí)展現了一個(gè)左右兩列分開(kāi)的線(xiàn)。
紋理效果同樣在另一個(gè)垂直布局上出現，例如CSS畫(huà)廊Design Bombs.
19.單頁(yè)面網(wǎng)頁(yè)設計
單頁(yè)面設計是一個(gè)很大的話(huà)題，覆蓋了許多不同網(wǎng)站分類(lèi)。顯而易見(jiàn)自從萬(wàn)維網(wǎng)創(chuàng )建單頁(yè)面網(wǎng)站就出現了。但是最近幾年這種趨勢變成了一種更加自然的用戶(hù)體驗。
我想為Cage App設計的網(wǎng)站或許是這篇文章中列出的例子中最棒的一個(gè)。他們利用單頁(yè)布局通過(guò)水平布局鮮明的展現出內容。但是你還會(huì )注意到頁(yè)面的頂端有一個(gè)模糊的背景圖片效果。
隨著(zhù)你往下滾動(dòng)頁(yè)面，導航條一直固定在你的瀏覽器頂部。合并其他的網(wǎng)頁(yè)設計趨勢到單頁(yè)面布局里面是吸引用戶(hù)注意力和創(chuàng )建一個(gè)迷人的網(wǎng)站的解決方法。
20.圓圈元素設計
這一圓圈設計趨勢在網(wǎng)站布局是比較新的且已經(jīng)被賦予了很多的關(guān)注。設計師喜歡圓圈設計，因為它們干凈、整潔,一般適合任何塊狀布局。你可以構建你的原形或者把你的頁(yè)面元素更改為圓形設計(例如用戶(hù)頭像、分享按鈕、發(fā)表日期等等)。
Lucia Soto組合基本上是圓形網(wǎng)頁(yè)設計中很棒的一個(gè)例子。這個(gè)網(wǎng)站是動(dòng)態(tài)創(chuàng )建的所以你得在頁(yè)面上水平移動(dòng)不同的片段。您也將注意到一些可愛(ài)的向量藝術(shù)品以及星羅棋布的間隙。Web設計師渴望這些額外的花絮在頁(yè)面布局上,因為他們透露出唯一性。
你可以在Site Optimizer主頁(yè)上發(fā)現一個(gè)簡(jiǎn)單的例子，它使用了圓形頁(yè)面設計作為他們服務(wù)的信息賣(mài)點(diǎn)。
TAG:
|
評論加載中...
|
