2017網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)分析 發(fā)布者：本站 時(shí)間：2019-01-28 14:01:50
這篇文章我們討論的是2017年新興的設(shè)計(jì)趨勢(shì)。作為設(shè)計(jì)師的你，你可以通過(guò)這篇文章發(fā)現(xiàn)新的靈感。
1.大屏幕體驗(yàn)
大屏幕的體驗(yàn)是如今網(wǎng)頁(yè)設(shè)計(jì)必不可少的一個(gè)部分。盡管對(duì)于很多人來(lái)說(shuō)，很難接受主頁(yè)只有零星幾個(gè)詞，取而代之的是圖片和視頻。有的時(shí)候，甚至導(dǎo)航都被隱藏成了一個(gè)小小的圖標(biāo)。
這兩種類型的網(wǎng)頁(yè)設(shè)計(jì)可以被標(biāo)簽為“影院效果”和“雜志效果”。前者常常是受到了電影和電視廣告的啟發(fā)，而后者往往是從書本或者頁(yè)面的提煉出了傳統(tǒng)精華。
這種趨勢(shì)形成的緣由可以從兩方面來(lái)分析：一是視覺性，而是實(shí)用性。當(dāng)用戶登陸上你的頁(yè)面時(shí)，PC端也好，移動(dòng)端也好，你應(yīng)當(dāng)給用戶最大的視覺沖擊。
大屏幕的的圖片從去年（2014年）開始流行，隨著圖片品質(zhì)的大大提升和頁(yè)面速度的不斷優(yōu)化，我們可以看到那些采用雜志效果的頁(yè)面給人的整體感覺提升到了一個(gè)新的高度。
現(xiàn)在這種趨勢(shì)流行的很快，很多大型網(wǎng)站比如Paypal都用起了這樣的背景。
2.多媒體體驗(yàn)
多媒體這個(gè)概念因?yàn)楸粸E用，所以它聽上去似乎已經(jīng)過(guò)時(shí)了。在如今，多媒體一詞也需要被重新定義。越來(lái)越多的設(shè)計(jì)師和程序員在增加多媒體體驗(yàn)這一條道路上前赴后繼。
在這之前，F(xiàn)lash是這些體驗(yàn)的平臺(tái)。而如今HTML5的CANVAS元素慢慢取代了原來(lái)網(wǎng)頁(yè)上Flash的地位。
另一個(gè)值得一提的用HTML5的例子是音樂家Jonathan Dagan的項(xiàng)目DNA-PROJECT。一打開頁(yè)面就是就是一個(gè)視頻作為網(wǎng)站的背景，Dagan通過(guò)這樣的表現(xiàn)形式，用他的個(gè)人經(jīng)歷來(lái)講述他的個(gè)人音樂專輯的故事。
Raise the river是另一個(gè)很棒的項(xiàng)目。不僅僅是因?yàn)樗囊曈X隱喻，更在它的多媒體展現(xiàn)上。頁(yè)面滾動(dòng)的速度和頁(yè)面邊小河流淌的速度一致，暗示了每張圖片之間的聯(lián)系，也給了整個(gè)頁(yè)面更豐富的表現(xiàn)效果。
我們?cè)谧鲰?yè)面設(shè)計(jì)的時(shí)候，我們做的所有事情就是增強(qiáng)用戶的可用性。這個(gè)網(wǎng)頁(yè)反其道而行之，它限制了你的滾動(dòng)，反而會(huì)給頁(yè)面帶來(lái)更好的視覺效果。
3.視差滾動(dòng)
視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來(lái)非常出色的視覺體驗(yàn)。完美的展示了一個(gè)復(fù)雜的過(guò)程，讓你猶如置身其中。厭倦了千篇一律，呆板網(wǎng)頁(yè)設(shè)計(jì)的你不防
一試。感受一下下面的Mint Design Company這個(gè)網(wǎng)站。
Mint Design Company這個(gè)網(wǎng)站巧妙地運(yùn)用了CSS技術(shù)，效果簡(jiǎn)單但是視覺效果很棒。
4.有趣的故事
在Boldking的頁(yè)面中，和第一個(gè)例子類似，當(dāng)你的滾輪滾到一個(gè)特定的位置的時(shí)候，就展現(xiàn)出了特殊的頁(yè)面效果。通常情況下，一般都是一些頁(yè)面元素采用淡進(jìn)和淡出的效果。
這種輕量級(jí)的SVG和Java script的運(yùn)用可以很好地達(dá)成這種效果。不僅僅因?yàn)閹?lái)的效果很出眾，而且它們的運(yùn)用才使整個(gè)頁(yè)面大小為1.5MB。
Colin and Dewi的婚禮這個(gè)頁(yè)面可以讓用戶專注于閱讀他們的故事。你當(dāng)前僅僅展示了他們故事中的一個(gè)部分，如果你需要看下個(gè)部分，往下滾動(dòng)就可以了。
看上去有點(diǎn)像視差滾動(dòng)的效果，但是3D CSS就完全可以做到隱藏和顯示文字部分的效果。
5.扁平化設(shè)計(jì)
在過(guò)去三年中，扁平化設(shè)計(jì)一直占據(jù)著主導(dǎo)地位。就目前看來(lái)，這種趨勢(shì)還將繼續(xù)延續(xù)下去，尤其是一些更小的元素，比如圖標(biāo)、菜單和圖片。比如Colin and Dewi這個(gè)網(wǎng)站。
扁平化元素看上去非常簡(jiǎn)潔，而且大小可控。icomoon.io是一個(gè)免費(fèi)的生成ICON的的網(wǎng)站，非常好用。
Lab 21把扁平化設(shè)計(jì)轉(zhuǎn)化為“手工設(shè)計(jì)”。
如果你的頁(yè)面元素不全都是扁平化的，那也沒有關(guān)系。設(shè)計(jì)師經(jīng)常通過(guò)看上去與頁(yè)面那么協(xié)調(diào)的元素來(lái)創(chuàng)造出驚人的效果。扁平化設(shè)計(jì)通過(guò)不同元素的拼接合成，來(lái)形成很好的視覺效果，并且適應(yīng)不同大小的頁(yè)面。
我想這種趨勢(shì)會(huì)和更多的視覺元素混合發(fā)展，就像HábitatWeb這個(gè)網(wǎng)站一樣。
6.方框減少
網(wǎng)頁(yè)設(shè)計(jì)師總是喜歡炫耀自己的思維能夠跳出框框，而且能以不止一種方式跳出方框。姑且稱之為“畫一個(gè)框框然后證明你能打破它”理論。矩形顯示器本身就是對(duì)網(wǎng)頁(yè)設(shè)計(jì)師的束縛（別說(shuō)你見過(guò)圓形顯示器）。網(wǎng)
頁(yè)上的每個(gè)HTML元素也是方形的。
但是跟大多數(shù)人一樣，設(shè)計(jì)師不喜歡被束縛。下面提供據(jù)我判斷目前處于上升期的幾個(gè)趨勢(shì)，可以作為證明你不是矩形奴隸的長(zhǎng)期戰(zhàn)略計(jì)劃。
就像不存在矩形邊框一樣去設(shè)計(jì)布局
詳情點(diǎn)DAN Paris. DAN的instagram photo由圓形組成菜單導(dǎo)航.
和諧元素：圓形，六邊形，不規(guī)則形狀，甚至菱形。
詳情點(diǎn)Lorenzo Bocchi
以軸測(cè)圖的視角展示的水平傾斜視角和網(wǎng)站布局預(yù)覽，給人空間和運(yùn)動(dòng)的感覺。
詳情點(diǎn)The Rosa
在羅薩餐廳主頁(yè)你的感官會(huì)被騙到–你幾乎可以聞到餅干的香味。其實(shí)不是新技巧，它是一個(gè)現(xiàn)代版的以百年老技術(shù)trompe-l’?IL,模擬鏡頭下的真實(shí)桌面。例如，把木桌作為背景，然后把所有的布景物體放置在上
面。
詳情點(diǎn)Swiss Airlines
否定矩形的根本方法是將用戶置于一個(gè)無(wú)限的空間里，滾動(dòng)頁(yè)面就可以飛行，呃，滾起來(lái)。
瑞士航空公司的挑戰(zhàn)了你的網(wǎng)站導(dǎo)航的理解。瀏覽他們的頁(yè)面，你會(huì)感慨我們對(duì)文檔空間的理解是多么常規(guī)和局限。在這里，不是鼠標(biāo)在向上或向下，而是我們?cè)谠评镒杂纱┧蟆?br />
7.貼瓷磚
如果你和矩形相處得很融洽，那么有一個(gè)很酷的方式來(lái)組織你的內(nèi)容：貼瓷磚。不知為何瓷磚在網(wǎng)頁(yè)設(shè)計(jì)這塊比在Windows 8 Metro界面這塊更為流行。瓷磚非常適用于響應(yīng)式布局，同時(shí)是一個(gè)形成令人印象深刻的布
局元素。
如果貼瓷磚變得太無(wú)聊，可以嘗試進(jìn)一步把邊緣鋸齒化，然后把對(duì)象或者文本推出鋸齒邊緣。
8.導(dǎo)航控件
Daily Beast網(wǎng)站導(dǎo)航控件把滾動(dòng)方向顯示在文章內(nèi)部。
導(dǎo)航設(shè)計(jì)一直是網(wǎng)頁(yè)設(shè)計(jì)師最喜歡的游樂場(chǎng)?！巴妗睂?dǎo)航達(dá)到頂峰的時(shí)候，網(wǎng)站是純粹的Flash設(shè)計(jì)。Flash消失后菜單
變得安靜了，沒有了動(dòng)畫或夸張的交互。
但尖銳導(dǎo)航趨勢(shì)又一直在上升，部分是由于新的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)和現(xiàn)有的導(dǎo)航模式的低效。由于Java的不斷演化和現(xiàn)代CSS在各個(gè)瀏覽器中更頻繁的被闡釋，Java Script腳本的更廣泛的應(yīng)用（通過(guò)框架和插件），因此
尖銳導(dǎo)航設(shè)計(jì)的實(shí)現(xiàn)變得更為容易。
這里有幾個(gè)導(dǎo)航設(shè)計(jì)試驗(yàn)和趨勢(shì)的幾個(gè)例子。其中部分想法已得到了廣泛的應(yīng)用，而其余的作為一種新生力量在推動(dòng)網(wǎng)頁(yè)設(shè)計(jì)
走向。
粘性菜單
菜單在鼠標(biāo)滾動(dòng)時(shí)不斷擴(kuò)展相關(guān)項(xiàng)目。它適用于有很多內(nèi)容的單頁(yè)網(wǎng)站。The LESS的菜單是一個(gè)少有的非常舒適的使用“手動(dòng)”的網(wǎng)頁(yè)。
粘性菜單是當(dāng)鼠標(biāo)滾動(dòng)時(shí)菜單仍停留在屏幕的頂部或邊緣。不管你喜不喜歡，它正在成為單頁(yè)網(wǎng)站的標(biāo)準(zhǔn)。
有時(shí)它結(jié)合scrollspy腳本創(chuàng)建一個(gè)部件能準(zhǔn)確顯示瀏覽者在頁(yè)面具體位置，這在是有長(zhǎng)長(zhǎng)層次關(guān)系菜單的網(wǎng)頁(yè)里尤其實(shí)用。
貼在屏幕四角的粘連導(dǎo)航
詳情點(diǎn)Hum
街景視角導(dǎo)航條
詳情點(diǎn)Oh Dear Games
谷歌地圖，特別是街景，啟發(fā)了這個(gè)網(wǎng)站開發(fā)者創(chuàng)建類似通過(guò)谷歌街景步行的導(dǎo)航。時(shí)間會(huì)告訴我們它是否能成為一種趨勢(shì)。
9.結(jié)合谷歌地圖
把這個(gè)特點(diǎn)作為2015一大趨勢(shì)，不僅因?yàn)樗呀?jīng)在近幾年逐漸崛起（而且我們看它幾乎無(wú)處不在），而且它正變得越來(lái)越有趣，這得益于谷歌提供的易用定制選項(xiàng)。
按這個(gè)特點(diǎn)做的最有趣的網(wǎng)站是在一個(gè)地圖概念圖周圍進(jìn)行功能區(qū)和視覺上的創(chuàng)意構(gòu)造。當(dāng)然，它使用的是定制的谷歌地圖以良好地配合頁(yè)面的外觀和感覺。
10.混搭界面
詳情點(diǎn)Necotrans
對(duì)單頁(yè)網(wǎng)站持續(xù)的偏愛所帶來(lái)的挑戰(zhàn)是可以解決的，而且是以一種創(chuàng)造性的，用戶友好的且直觀有吸引力的方式解決。面臨的挑
戰(zhàn)是要在一個(gè)頁(yè)面上包容很多信息，實(shí)現(xiàn)很多功能。所以頁(yè)面必須有一個(gè)整潔，現(xiàn)代的外觀和易用的導(dǎo)航。
該解決方案可以稱為混搭界面：一個(gè)布局包括許多“層”，適應(yīng)所需的功能或內(nèi)容。實(shí)際這不是新概念，它本質(zhì)上很類似于桌面應(yīng)用程序，卻沒有在主流的互聯(lián)網(wǎng)上廣受歡迎。最近，這種界面的使用率在增大，他們
變得越來(lái)越精致，功能多樣。
Necotrans網(wǎng)站在網(wǎng)頁(yè)上方似乎沒有什么內(nèi)容，僅僅在全屏背景上打上一行字。但是側(cè)菜單允許訪問(wèn)所有必要的功能，為用戶提供站點(diǎn)搜索工具，定制的谷歌地圖，新聞版塊和聯(lián)系方式表單。
11.極簡(jiǎn)化
詳情點(diǎn)Maemo
20世紀(jì)60年代以來(lái)，經(jīng)典的KISS原則（“Keep It Simple, Stupid”的首字母）已被用于軍事，企業(yè)和政府。然而，即使你可能已經(jīng)很努力的簡(jiǎn)化你的設(shè)計(jì)了，它也許還有進(jìn)一步簡(jiǎn)化的可能。
Maemo餐廳用不可抗拒的口吻，最精煉的語(yǔ)言講述自己的故事，冷霧縈繞的峽灣上懸著餐廳的名字。瀏覽者只面臨一個(gè)去誘惑——行動(dòng)（訂一個(gè)餐位）。
向下滾動(dòng)會(huì)看見隨意布置的幾張照片，很難說(shuō)是水平還是垂直對(duì)齊。照片的主題看起來(lái)也很隨意。然而，瀏覽網(wǎng)頁(yè)會(huì)給人強(qiáng)烈的感官體驗(yàn)。
苦行僧的形式提升了照片的質(zhì)量，而這種極簡(jiǎn)主義讓你很愿意去讀照片下方的幾句禪語(yǔ)。
從這里能學(xué)到什么？你可以在網(wǎng)頁(yè)上保持視覺上的沉靜，同時(shí)實(shí)現(xiàn)震撼的視覺效果！盡量減少文字、表格和色彩的同時(shí)，要添加大幅逼真的視頻來(lái)營(yíng)造趣味性。
12.加載網(wǎng)頁(yè)設(shè)計(jì)
我們能以前所未有的快速度創(chuàng)建網(wǎng)站，如使用高清視頻網(wǎng)站后臺(tái)。但每一步都是有代價(jià)的，在這種情況下，代價(jià)是加載時(shí)間。
現(xiàn)在我們可以看到一個(gè)大逆轉(zhuǎn)的視覺魅力的加載頁(yè)面，而不像在Flash時(shí)代小游戲式的加載網(wǎng)頁(yè)。
13.設(shè)計(jì)自動(dòng)化
詳情點(diǎn)grid.io
截圖的是顯示有錯(cuò)誤的一個(gè)頁(yè)面，沒有人會(huì)去做這樣的東西：在黑暗的背景放上不易讀的黑色文本。
本文如果不提“grid”的話就不算一篇完整的文章–“grid”是由最近經(jīng)常搞出動(dòng)作的“折衷的設(shè)計(jì)師”提出的一個(gè)吸睛的想法。它試圖以人工智能取代設(shè)計(jì)師和程序員的位置。未來(lái)網(wǎng)頁(yè)設(shè)計(jì)師會(huì)變成多余的？有待
觀察。
現(xiàn)在仍然無(wú)法測(cè)試這個(gè)假想系統(tǒng)，所以很難判斷其可用性。這個(gè)系統(tǒng)做出的網(wǎng)站似乎是其理論的唯一依據(jù)，這個(gè)網(wǎng)站對(duì)大多數(shù)問(wèn)題應(yīng)對(duì)良好，但試圖創(chuàng)造完全人工藝術(shù)似乎是這個(gè)時(shí)代做不到的。例如，繪畫傻瓜創(chuàng)意
軟件還沒有消滅掉繪畫藝術(shù)畫廊。
結(jié)語(yǔ)
這13個(gè)網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)已經(jīng)蔓延在過(guò)去一年，也很可能會(huì)極大影響2015年的網(wǎng)站建設(shè)樣貌。然而，如果我們用一句話來(lái)概括今年的建站趨勢(shì)，就是“內(nèi)容為上”。
這條定律一直很準(zhǔn)。但如今，網(wǎng)頁(yè)設(shè)計(jì)越來(lái)越強(qiáng)調(diào)美感，可以不斷指出許多在前期設(shè)計(jì)中所犯的錯(cuò)誤：概念，導(dǎo)航流程規(guī)劃，線框，文案寫作等等。所以擴(kuò)大視野和學(xué)習(xí)新技術(shù)的同時(shí)，要確保自己不要忘記最基本的
東西。
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話：021-58370032