15個(gè)2012年網(wǎng)頁設(shè)計(jì)的趨勢(shì)分析
人們一直念叨的2012年終于來了。人們也從開始的激動(dòng)到現(xiàn)在的平復(fù),時(shí)間確實(shí)可以平息一切。我們看著科技的進(jìn)步,看著網(wǎng)絡(luò)在每一天的改變著生活方式,看著不斷的創(chuàng)新科技在裝點(diǎn)著生活,這個(gè)時(shí)候我們確實(shí)有速度感。在這嶄新的2012年里,網(wǎng)絡(luò)會(huì)發(fā)生什么樣的變化誰都不能肯定。但是大家都會(huì)有一個(gè)美好的猜想。因?yàn)檫^去的幾年網(wǎng)絡(luò)改變太多人的命運(yùn),甚至改變很多國家的命運(yùn)。這已經(jīng)不僅僅是一個(gè)IT產(chǎn)業(yè)了!在我上高中的時(shí)候就有人在說網(wǎng)絡(luò)的泡沫,但是即便過了這么多年,網(wǎng)絡(luò)依然在不斷的翻新著人們的思想,改變著人們的生活。之所以這樣是因?yàn)榇蠹覍?duì)網(wǎng)絡(luò)方面的創(chuàng)新從來就沒有停過。那么今天我們就給2012年的網(wǎng)頁設(shè)計(jì)趨勢(shì)有一個(gè)分析和美好的猜想,希望能和大家一起在新的一年里有一個(gè)更清晰的思路去創(chuàng)意和想象,去啟發(fā)更多的可能。
1。讓界面交互設(shè)計(jì)更加靈動(dòng)
更好的從用戶角度分析使用習(xí)慣,做出更人性的界面選擇對(duì)元素的快速反映和預(yù)想一些例子可能包括側(cè)飛出菜單,下拉框,彈出窗口。
如MooTools和jQuery的包括著名的JavaScript庫,它們讓這一切更容易實(shí)現(xiàn)。更多的瀏覽器開始支持這些代碼最終,瀏覽者會(huì)使用他們感動(dòng)舒適的瀏覽器
同樣,你應(yīng)該考慮檢查的形式輸入和數(shù)據(jù)。在許多注冊(cè)頁面上,您會(huì)收到一些小的反應(yīng)。
2。觸摸屏移動(dòng)設(shè)備
在過去的幾年里隨著蘋果iOS移動(dòng)系統(tǒng)和安卓的持續(xù)高熱度的普及讓更多的人通過移動(dòng)網(wǎng)絡(luò)來瀏覽網(wǎng)站。這是個(gè)驚人的趨勢(shì)。
隨著Android平臺(tái)手機(jī),iPhone和iPad設(shè)備的普及,意味著更多的瀏覽者需要通過觸摸這種交互模式。這已經(jīng)成為每一個(gè)網(wǎng)頁設(shè)計(jì)人員所必須學(xué)習(xí)的技術(shù)。移動(dòng)網(wǎng)絡(luò)設(shè)計(jì)的趨勢(shì)表明,建立一個(gè)更完善的移動(dòng)界面更能留住瀏覽者。這樣,你可以保持你主要布局所有的動(dòng)態(tài)內(nèi)容,而為移動(dòng)用戶提供一個(gè)精簡(jiǎn)版本的網(wǎng)站。
3。分享資源和贈(zèng)品
誰又能說他們真的不享受免費(fèi)下載?網(wǎng)頁設(shè)計(jì)師已多年分享他們的在線內(nèi)容,但直到最近,這已成為一個(gè)非常流行的趨勢(shì),數(shù)字藝術(shù)家之間。已經(jīng)有幾個(gè)社區(qū)專門圍繞Web和圖形設(shè)計(jì)人員提供免費(fèi)下載。越來越多的網(wǎng)頁設(shè)計(jì)師知道如何分享他們的資源和如何尋找他們想要的資源。也有很多站長(zhǎng)開始做出一些優(yōu)秀的資源網(wǎng)站來分享他們所擁有的資源,可以免費(fèi)下載,這個(gè)優(yōu)勢(shì)足夠吸引人。比如我們ifreePSD這樣的小清新資源站。下面是一些優(yōu)秀的國外資源站點(diǎn)。
一些巧妙的下載
迷你Web UI設(shè)置
暗迷你音樂播放器
滑動(dòng)標(biāo)簽
黑暗的照片滑塊
搜索框
登錄/ Signin表格
解決模式對(duì)話框
清潔登錄表
定價(jià)表
最小載入酒吧
附件可彈出
4。HTML5和CSS3的標(biāo)準(zhǔn)
我們都知道這兩年來網(wǎng)頁代碼的進(jìn)步和升級(jí)要比之前快了很多。新的代碼和標(biāo)準(zhǔn)讓網(wǎng)頁有了更多的渲染和想像空間。W3C也贏得了很多主流瀏覽器的支持。 在未來很多年HTML5/CSS3將是WEB開發(fā)的趨勢(shì)。前端設(shè)計(jì)師會(huì)得到更多的支持,要知道這將是一個(gè)偉大的時(shí)刻。我們也提供了一個(gè)初學(xué)者指南——如何HTML5/CSS3編碼指南,所以如果你是各初學(xué)者,那么是時(shí)候奮起直追了。
這些新的標(biāo)準(zhǔn)也將帶動(dòng)著 JavaScript和jQuery的發(fā)展。
5。絲帶和橫幅
雖然這種設(shè)計(jì)方法是不完全的“新”,它從來沒有真正爆發(fā),直到最近才通過主流。你可能已經(jīng)看到角落彩帶,旗幟導(dǎo)航欄和小絲帶徽章的例子 。
6。高級(jí)WordPress的主題
WordPress已經(jīng)發(fā)展到了3.0+版本。已經(jīng)有越來越多的公司在使用它架構(gòu)網(wǎng)站。一個(gè)高級(jí)的WP主題可以吸引很多人。而且它有著簡(jiǎn)單的安裝過程,即便不懂得代碼也能夠輕松搞定。
展望到2012年,我只能想象WordPress將變得更容易使用。這意味著要釋放更多的高品質(zhì)的主題,并推出更驚人的博客。
7。在線雜志
關(guān)于WordPress主題,我們還應(yīng)該帶上通過它架構(gòu)的雜志模式網(wǎng)站?。
8。易陰影
作為對(duì)CSS3的方方面面,它比以往任何時(shí)候都更容易實(shí)現(xiàn)??蛑械奈谋竞涂蚴皆乜梢赃\(yùn)用各自的屬性來呈現(xiàn)鮮明的陰影效果。文字陰影語法是很容易記住,如下沿箱的影子?,F(xiàn)在不必要的渲染這些影響的圖像,Web開發(fā)人員可以專注于進(jìn)一步擴(kuò)大這些基本思路 。我個(gè)人喜歡馬特哈姆的卷頁,這是完全用CSS3 。你可以找到所有在其網(wǎng)站上的代碼重復(fù)的效果,并落實(shí)到自己的網(wǎng)頁風(fēng)格類似 。
9。動(dòng)態(tài)排版
字體的領(lǐng)域包括網(wǎng)頁設(shè)計(jì)傳統(tǒng)的重要組成部分 。已經(jīng)出現(xiàn)了多年來最顯著的字體包括宋體,黑體,格魯吉亞,和投石機(jī)MS。雖然他們繼續(xù)為在Web標(biāo)準(zhǔn)了深刻的目的,也有大量先進(jìn)的替代方案,網(wǎng)頁排版。
Typekit為例如只需要幾行代碼包含在您的文檔頭部 。在此之后,您可以指定字體名稱,包括追加到你的CSS 。關(guān)于這項(xiàng)技術(shù)的最好的部分是,它主要依賴于JavaScript,所以最終用戶不需要安裝這些字體 。
另一種方法是Google Web字體的行為,以類似的方式來Typekit 。我建議有興趣的設(shè)計(jì)師,以檢查對(duì)CSS3的@ font – face的媒體查詢,您將得到更多的創(chuàng)造力。此代碼可以用來導(dǎo)入一個(gè)。TTF
或OTF
字體文件從您的Web服務(wù)器,包括作為一個(gè)可用的樣式表字體!這么多的備用系統(tǒng),用于建設(shè)動(dòng)態(tài)字體,我期待2012年舉行的創(chuàng)新和設(shè)計(jì)人才,在這方面的激增。
10。圖片畫廊幻燈片
隨著jQuery的普及,我發(fā)現(xiàn)越來越多的圖像幻燈片被布局到網(wǎng)頁中 。讓瀏覽者更快更直觀的看到訊息和圖片。
我相信,在2012年將看到這類趨勢(shì)的上揚(yáng)。
11。模式彈出盒
許多開放源碼的圖片廊腳本使用的燈箱效果背景變淡比彈出框較深的類型。我真的很喜歡這個(gè)功能,每當(dāng)我看到,盡管它尚未被廣泛使用。
12。列表
列表項(xiàng)的集合,因?yàn)榫W(wǎng)頁設(shè)計(jì)的初期出現(xiàn)。正如我們搬進(jìn)新世紀(jì)的設(shè)計(jì)師開始使用HTML有序和無序列表設(shè)計(jì)導(dǎo)航菜單。
13。生成的圖像縮略圖
在網(wǎng)頁中,我們可以同意,內(nèi)容為王。但大多數(shù)設(shè)計(jì)師也會(huì)同意,一個(gè)空白的文本頁面變得乏味。圖像可以添加額外的香料。其中的一個(gè)方法是使用動(dòng)態(tài)縮略圖,為每一頁或文章預(yù)覽。
作為另一個(gè)例子Dribbble提供了整個(gè)畫廊的每個(gè)設(shè)計(jì)拍攝的縮略圖列表。在這樣一個(gè)表排式布局,它的超級(jí)容易趕上窺見每個(gè)縮略圖和滾動(dòng)來查找你要找的 。這種戰(zhàn)術(shù)已被證明是搶了整個(gè)設(shè)計(jì)界的關(guān)注 !呃,至少Dribbble的成員最好的。
14。超大圖標(biāo)
這種獨(dú)特的趨勢(shì)半源于Mac OS X的圖標(biāo)設(shè)計(jì)的普及。作為程序員開始推出他們的Mac應(yīng)用程序的網(wǎng)站,大家都過于頻繁地看到在品牌所代表的巨大尺寸。因此,這種趨勢(shì)也被拾起通過IOS開發(fā)。
15。夸張的超鏈接
錨鏈接,當(dāng)然在任何網(wǎng)站最重要的五大元素。這些顯然是很長(zhǎng)的路要走,因?yàn)?0世紀(jì)90年代流行的設(shè)計(jì)趨勢(shì)一直呈幾何級(jí)數(shù)增長(zhǎng)。
來源:http://www.jackchen.cn/blog/?p=6442
- 目前還沒評(píng)論,等你發(fā)揮!