回顧我們之前分享過的“優(yōu)秀網(wǎng)頁設(shè)計(jì)”作品,里面有很多新的設(shè)計(jì)靈感,并可能從中預(yù)測(cè)到2015的設(shè)計(jì)趨勢(shì)。在這篇文章中我們整理了值得關(guān)注的21個(gè)網(wǎng)頁設(shè)計(jì)趨勢(shì)。
這些趨勢(shì)主要由設(shè)計(jì)師Tomas Laurinavicius自身經(jīng)驗(yàn)研究整理,我們可以嘗試這些設(shè)計(jì)但也不一定要跟風(fēng),創(chuàng)新、實(shí)用、好用才是最重要的。
延伸閱讀:展望未來:預(yù)測(cè)2015年網(wǎng)站設(shè)計(jì)的十大趨勢(shì) 響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì) 2015年全球網(wǎng)站設(shè)計(jì)趨勢(shì)全預(yù)測(cè)
以下為設(shè)計(jì)趨勢(shì)詳細(xì)信息。
趨勢(shì)1:自然攝影
在2014年已有很多網(wǎng)站使用高品質(zhì)的照片作為設(shè)計(jì)元素,優(yōu)秀的照片視覺是非常有吸引力的,所以2015將會(huì)繼續(xù)這個(gè)趨勢(shì)走下去。而這趨勢(shì)特別適用于全屏網(wǎng)頁設(shè)計(jì)。
Brave People
趨勢(shì)2:單色網(wǎng)站
網(wǎng)站設(shè)計(jì)元素的背景、文本顏色、圖像等都使用同一色系,這樣的單色網(wǎng)頁也許會(huì)更有吸引力,并讓訪客對(duì)你的品牌網(wǎng)站有著深刻的印象。
Nine Sixty
趨勢(shì)3:視頻背景網(wǎng)站
通過加入視頻背景到網(wǎng)站上,在視覺上比純圖像更有吸引力,2014年已經(jīng)有不少這樣案例,相信明年會(huì)繼續(xù)增加。
其次不一定把視頻放在網(wǎng)頁背景上,我們也可以用在首頁幻燈片上也是很不錯(cuò)方案。
Startup Framework
趨勢(shì)4:獨(dú)特的導(dǎo)航菜單
網(wǎng)站導(dǎo)航不再那么死板,將出現(xiàn)更多創(chuàng)意的方案,向下滑動(dòng)、向上滑動(dòng)、彈出、動(dòng)態(tài)動(dòng)畫、二次信息展示等有助于創(chuàng)造令人難忘的瀏覽體驗(yàn)。
Impossible Bureau
Qards
趨勢(shì)5:卡片式
像卡片、瓷磚的排版設(shè)計(jì)在2015會(huì)繼續(xù)流行,Pinterest是這種設(shè)計(jì)潮流的領(lǐng)導(dǎo)者,我們將看到更多博客和電子商務(wù)網(wǎng)站使用這具設(shè)計(jì)技術(shù)。
Firebox
趨勢(shì)6:固定塊(Fixed Blocks)
固定塊像css 的fixed屬性,我們常見有導(dǎo)航菜單用這個(gè)技術(shù),而在2014年,有些網(wǎng)頁上一些小部件也使用這個(gè)技術(shù),但多用于邊欄上的內(nèi)容。
P.S. 其次相關(guān)的Scroll to fixed技術(shù)也流行,不了解請(qǐng)看設(shè)計(jì)達(dá)人網(wǎng)站(PC版,手機(jī)看不到哦)右下角的廣告區(qū)域,當(dāng)頁面Scroll到頂部后,廣告會(huì)懸停于頂部。
Build in Amsterdam
趨勢(shì)7:精致的視差效果
2014年已經(jīng)介紹過視差滾動(dòng)這個(gè)技術(shù),但遺憾的是,從用戶角度來看,過量的視差特效會(huì)毀掉整個(gè)瀏覽體驗(yàn)。2015年,將會(huì)有所改善,會(huì)有更多精致的視差效果呈現(xiàn)。
Cher Ami
趨勢(shì)8:垂直滑屏(滾動(dòng))
垂直滑屏相當(dāng)于一個(gè)幻燈片將它全屏化,并且以垂直滑動(dòng)動(dòng)畫形式展示出來,這對(duì)于訪客來說是個(gè)新鮮友好的瀏覽體驗(yàn)。特別適用于產(chǎn)品描述、情景營銷的單頁面網(wǎng)站。
Smart Water
趨勢(shì)9:增加插畫
Dropbox我想很多用戶聽過,該網(wǎng)站的手繪插畫占居了網(wǎng)站的一大部分。通過可愛精美的插畫來展示描述。
One Design Company
趨勢(shì)10:大數(shù)據(jù) 研究統(tǒng)計(jì)
大數(shù)據(jù)正在成為高新的技術(shù)行業(yè),網(wǎng)頁設(shè)計(jì)也一樣重要,2015我們將看到更多交互圖形、圖表數(shù)據(jù)。復(fù)雜、未知但卻美麗和吸引。
小編注:估計(jì)這個(gè)趨勢(shì)僅在國外流行=。=
Personal Brand Institute
趨勢(shì)11:互動(dòng)產(chǎn)品
我們知道在網(wǎng)頁上很難表達(dá)好一個(gè)有形的產(chǎn)品,特別是用戶無法觸感,無法真正感受。很多初創(chuàng)公司為了描繪出逼真感覺以及體驗(yàn),將在網(wǎng)頁上使用一些互動(dòng)技術(shù),比如3D展示,讓訪客能轉(zhuǎn)動(dòng)產(chǎn)品來瀏覽產(chǎn)品更多微小的細(xì)節(jié)。
My Deejo
趨勢(shì)12:延續(xù)扁平化設(shè)計(jì)
扁平化可以說默認(rèn)為大型科技公司以及設(shè)計(jì)師首要的設(shè)計(jì)風(fēng)格,從WEB、APP上都能看到扁平化的影子,我們肯定在2015年這個(gè)趨勢(shì)將會(huì)延續(xù)。
Pennies
趨勢(shì)13:移動(dòng)優(yōu)先
隨著移動(dòng)互聯(lián)網(wǎng)用戶的飛快增長,“移動(dòng)優(yōu)先”的想法將會(huì)增加。而響應(yīng)式設(shè)計(jì)將會(huì)成為一個(gè)必須擁有的功能。所以以后設(shè)計(jì)網(wǎng)站都需要考慮到移動(dòng)用戶的瀏覽體驗(yàn)了。
Medium
趨勢(shì)14:更人性化
手繪插圖已被利用過一段時(shí)間了,為了讓訪客從外觀上感受到更人性化、親切感,可以嘗試在網(wǎng)頁上使用手寫字體或插圖,讓訪問者脫離沉悶的Web體驗(yàn),并加深對(duì)網(wǎng)站的印象。
Adventure
趨勢(shì)15:微交互
我說的微交互是從設(shè)計(jì)上的一些小細(xì)節(jié)和互動(dòng)上給用戶帶來驚喜和愉悅的體驗(yàn)。如有趣的圖像、表情、表達(dá)文字。
如下面這個(gè)案例,當(dāng)用戶輸入用戶名稱時(shí),會(huì)提示“好名”,這用戶看到后會(huì)有什么感覺?呵呵!
Virgin America
趨勢(shì)16:幾何設(shè)計(jì)
你在學(xué)校學(xué)習(xí)幾何的時(shí)候也許覺得他是很乏味的,但如果能使用得當(dāng),將會(huì)有大不同哦。
Letters
趨勢(shì)17:大文字版式
在過去一年,我看已經(jīng)看到不少使用大大的標(biāo)題來排版,簡單、有力、有效!
Webflow
趨勢(shì)18:網(wǎng)站生成工具增加
我們已經(jīng)看到網(wǎng)站生成工具一直試圖取代設(shè)計(jì)師和程序員,比如在線網(wǎng)頁制作網(wǎng)站 Generator, Squarespace, Macaw,Webflow 和 Froont等,有的可以直接生成 響應(yīng)式網(wǎng)頁,功能確實(shí)強(qiáng)大。
Squarespace
趨勢(shì)19:個(gè)人品牌
重視個(gè)人品牌,設(shè)計(jì)師、工程師、博客作者和企業(yè)家將在網(wǎng)絡(luò)上建立更強(qiáng)大的個(gè)人品牌網(wǎng)站,變得更具權(quán)威性和更容易找到本人。所以2015你將看到更多個(gè)性的個(gè)人網(wǎng)站出現(xiàn)。
Tobias van Schneider
趨勢(shì)20:更多Material Design風(fēng)格
Material Design由谷歌創(chuàng)造,是由扁平化設(shè)計(jì)中派生出來的風(fēng)格,雖然現(xiàn)在還沒普及,但在未來一年絕對(duì)會(huì)增加。
Inbox by Gmail
趨勢(shì)21:互動(dòng)之旅
互動(dòng)型網(wǎng)站將得到更多曝光,通過聲音、攝影像頭、麥克風(fēng)來與訪客交互,讓用戶置身于現(xiàn)場(chǎng)的感覺,感受獨(dú)特和個(gè)性化的體驗(yàn)。正如下面網(wǎng)站一樣:
Echoes of Tsunami
最后
整體而言,這些趨勢(shì)當(dāng)中扁平化設(shè)計(jì)、大文本排版和高品質(zhì)圖像為主要的流行趨勢(shì),這是信人興奮的,2015讓我們一起創(chuàng)造更多創(chuàng)新的設(shè)計(jì)作品出來吧!