就像任何其他藝術(shù)形式一樣，網(wǎng)頁(yè)設(shè)計(jì)就是總進(jìn)化。隨著推動(dòng)我們網(wǎng)站建設(shè)在線體驗(yàn)的技術(shù)突飛猛進(jìn)，一些趨勢(shì)一落千丈，而另一些則有所改善，新趨勢(shì)也出現(xiàn)了。
作為一名網(wǎng)頁(yè)設(shè)計(jì)師，要想在游戲中保持領(lǐng)先地位，你需要傾聽地面的聲音，同時(shí)形成你自己對(duì)什么是有效的和什么不起作用的意見(jiàn)。小小的指導(dǎo)總是受歡迎的，所以我們列出了2017年你想要注意的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)。然而，在我們介入之前，讓我們花一分鐘時(shí)間討論一下2016年的趨勢(shì)。
2016年網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)綜述
每年都會(huì)看到網(wǎng)頁(yè)設(shè)計(jì)的進(jìn)步，而2016年則是無(wú)例外。以下是過(guò)去12個(gè)月主導(dǎo)的一些趨勢(shì)：
材料設(shè)計(jì)。
這種設(shè)計(jì)理念今年又回到了我們的名單上，并希望成為新的設(shè)計(jì)標(biāo)準(zhǔn)。
平面設(shè)計(jì)。
這一趨勢(shì)也沒(méi)有任何進(jìn)展，特別是因?yàn)樗c材料設(shè)計(jì)一起運(yùn)作得非常好。
移動(dòng)UX。
這個(gè)
移動(dòng)設(shè)備的增長(zhǎng)
是不可阻擋的，而網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)面對(duì)了適應(yīng)它的挑戰(zhàn)。
移動(dòng)布局。
移動(dòng)設(shè)計(jì)中最重要的部分之一是讓你的布局正確，2016年，極簡(jiǎn)主義引領(lǐng)了這一潮流。
更多的圖像。
網(wǎng)站建設(shè)在過(guò)去的一年里，網(wǎng)站采用了一種更以形象為導(dǎo)向的設(shè)計(jì)和講述故事的方法。
牌在瓷磚上。
pinterest領(lǐng)導(dǎo)了基于瓷磚的設(shè)計(jì)，但是現(xiàn)在潮流轉(zhuǎn)向了他們的信息更豐富的對(duì)應(yīng)卡。
內(nèi)容多，廣告少。
網(wǎng)絡(luò)廣告仍然是一個(gè)龐大的行業(yè)，但從設(shè)計(jì)的角度來(lái)看，它們很快就過(guò)時(shí)了。
僅僅因?yàn)檫@些趨勢(shì)大部分沒(méi)有進(jìn)入今年的版面，并不意味著它們就變得無(wú)關(guān)緊要了。事實(shí)上，他們中的一些人可能會(huì)在未來(lái)幾年繼續(xù)塑造網(wǎng)頁(yè)設(shè)計(jì)。然而，讓我們來(lái)看看最相關(guān)的趨勢(shì)。
2017年網(wǎng)絡(luò)設(shè)計(jì)趨勢(shì)預(yù)測(cè)
2016年是移動(dòng)接口年，可用性的提高處于發(fā)展的前沿。今年的目標(biāo)是使這些可用的接口更具吸引力。
考慮到這一點(diǎn)，我們預(yù)計(jì)2017年將專注于參與和互動(dòng)內(nèi)容，而不會(huì)犧牲可用性。就網(wǎng)頁(yè)設(shè)計(jì)而言，這是一個(gè)雙贏的組合。
最后，值得一提的是一些沒(méi)有被列入這份名單的趨勢(shì)，比如可穿戴設(shè)備和網(wǎng)頁(yè)設(shè)計(jì)的整合，以及網(wǎng)站上“真實(shí)”照片的增加。隨著科技的發(fā)展，這兩種趨勢(shì)都有可能繼續(xù)占據(jù)突出地位(尤其是前者)-但就目前而言，讓我們來(lái)看看一種長(zhǎng)期的趨勢(shì)。
1。材料設(shè)計(jì)
材料設(shè)計(jì)像這樣的文章幾年來(lái)一直是文章的中流砥柱，而且沒(méi)有放緩的跡象。這個(gè)看似簡(jiǎn)單的設(shè)計(jì)流派從最簡(jiǎn)單的元素紙和墨水中汲取靈感。
網(wǎng)站建設(shè)
有效的材料設(shè)計(jì)將簡(jiǎn)單的視覺(jué)層次結(jié)構(gòu)與網(wǎng)格系統(tǒng)結(jié)合起來(lái)，以創(chuàng)建高度可用的布局并指導(dǎo)用戶操作。在過(guò)去的幾年里，它得到了廣泛的關(guān)注，谷歌已經(jīng)在他們的大部分項(xiàng)目中廣泛實(shí)施了這一技術(shù)。在某些方面，它是我們最接近通用設(shè)計(jì)語(yǔ)言的語(yǔ)言，但是一些設(shè)計(jì)師他們已經(jīng)開始回?fù)艟W(wǎng)絡(luò)的同質(zhì)化。
總之，材料設(shè)計(jì)不太可能在短期內(nèi)消失，你最好把它的基本原理融入到你自己的工作中去。然而，要小心過(guò)度依賴它，因?yàn)樗赡軙?huì)下降，一旦設(shè)計(jì)師反擊它缺乏變化。
如果你想學(xué)習(xí)你的材料設(shè)計(jì)技巧，從檢查開始谷歌自己的指導(dǎo)方針。你也可能對(duì)材料設(shè)計(jì)-旨在彌合與其母公司規(guī)格之間若干差距的協(xié)作努力。
2。微相互作用
這些天來(lái)，微交互是如此普遍，我們幾乎沒(méi)有注意到它們。然而，當(dāng)談到它們的重要性時(shí)，不可能否認(rèn)它們的重要性。良好的UX設(shè)計(jì).
網(wǎng)站建設(shè)
它們本質(zhì)上是基于動(dòng)作的小動(dòng)畫(例如按鈕點(diǎn)擊)。最佳的微觀交互作用在兩個(gè)方面都取得了成功。它們傳達(dá)一個(gè)動(dòng)作背后的效果(例如喜歡在Instagram)，它們不會(huì)分散用戶對(duì)總體體驗(yàn)的注意力。他們已經(jīng)中流砥柱當(dāng)涉及到應(yīng)用程序設(shè)計(jì)時(shí)，并且隨著web導(dǎo)航的不斷發(fā)展，我們期望網(wǎng)站開始整合它們。成群結(jié)隊(duì)也是。
如果你想添加到你的網(wǎng)頁(yè)設(shè)計(jì)工具箱，微交互是一個(gè)很好的選擇。要開始，你需要了解UX設(shè)計(jì)中的微交互，以前解構(gòu)幾個(gè)例子才能感受到它們的實(shí)施。
3。動(dòng)畫和SVG
盡管微交互正在成為今年網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)的焦點(diǎn)，但更大膽的動(dòng)畫也將激增。如果正確使用，即不就像90年代早期更大的動(dòng)畫加強(qiáng)你的設(shè)計(jì)其他設(shè)計(jì)技術(shù)無(wú)法做到的。
Multiple examples of animated SVGs.
當(dāng)涉及到使用哪種格式時(shí)，長(zhǎng)期存在的gif將保持不變。最受歡迎的。然而，在我們的例子中，我們大的歌迷可伸縮矢量圖形(SVGS)由于它們固有的響應(yīng)性和效果-這兩者在構(gòu)建現(xiàn)代網(wǎng)絡(luò)界面時(shí)都派上了用場(chǎng)。
網(wǎng)站建設(shè)有許多工具可以讓您創(chuàng)建svg并與其交互，其中最流行的工具是AdobeIlluStrator和Inkscape。一旦您確定了一個(gè)工具，您的SVG文件可以是使用CSS動(dòng)畫。雖然這種技術(shù)對(duì)徽標(biāo)很好，但您也可以應(yīng)用它的其他元素，如圖標(biāo)和菜單項(xiàng).
4。敲擊式和浮雕式排版
大膽醒目的排版幾乎不是新來(lái)的人當(dāng)談到網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)，但它準(zhǔn)備變得更加流行今年。
An example of bold typography in web design.
如今，可用性是不遠(yuǎn)處從一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師的頭腦，大膽的排版可以幫助你改善自己的訪客的經(jīng)驗(yàn)。此外，當(dāng)涉及到網(wǎng)絡(luò)時(shí)，立即吸引訪問(wèn)者的注意力是最重要的。這不一定是復(fù)雜的-一個(gè)簡(jiǎn)單的標(biāo)題與一個(gè)明確的消息往往是一個(gè)堅(jiān)實(shí)的，功能的選擇。
在過(guò)去，我們討論過(guò)一些最佳無(wú)襯線字體網(wǎng)站標(biāo)題。這些字體是完美的高影響設(shè)計(jì)，因?yàn)樗鼈兊拇竽懶再|(zhì)和高度可讀性，因此將它們納入您自己的設(shè)計(jì)將是關(guān)鍵的實(shí)現(xiàn)。
5。粗體顏色和漸變
柔和的色彩已經(jīng)統(tǒng)治了一段時(shí)間的網(wǎng)頁(yè)設(shè)計(jì)。考慮到過(guò)去幾年主要集中在提供一種干凈、可用的體驗(yàn)，這意味著更多的引人注意的配色方案已經(jīng)落伍了。
An example of a bold color palette on a website.
然而，大膽選擇顏色并不一定意味著一段悲慘的閱讀經(jīng)歷。更重要的是，梯度也是卷土重來(lái)-它們看起來(lái)很時(shí)髦.
A website with a gradient-based background.
這種復(fù)蘇是很自然的，當(dāng)你考慮到在過(guò)去幾年的普遍存在的平面設(shè)計(jì)。每當(dāng)一種趨勢(shì)變得過(guò)于流行或流行時(shí)，設(shè)計(jì)師們就會(huì)想辦法打破人們感覺(jué)到的單調(diào)。
你對(duì)顏色的選擇很大程度上取決于你的品味，但仍然有很多工具可以派上用場(chǎng)。創(chuàng)建一個(gè)豐富的調(diào)色板。例如,Adobe顏色使您能夠設(shè)計(jì)和保存復(fù)雜的配色方案，而解決方案則是比如Coolors使您可以輕松快速瀏覽補(bǔ)充顏色。
6。虛擬現(xiàn)實(shí)
網(wǎng)站建設(shè)當(dāng)涉及到網(wǎng)頁(yè)設(shè)計(jì)的未來(lái)時(shí)，很少有定論-但虛擬現(xiàn)實(shí)就是其中之一。作為技術(shù)繼續(xù)演變隨著設(shè)備價(jià)格的提高，網(wǎng)站將開始成批地采用它。
An example of a virtual reality web-based experience.
雖然這對(duì)web設(shè)計(jì)來(lái)說(shuō)似乎不是一項(xiàng)有用的技術(shù)進(jìn)步，但虛擬現(xiàn)實(shí)卻為我們打開了一大批講故事和敘事可能性。它為你提供了一個(gè)新的媒介來(lái)吸引用戶，如果你現(xiàn)在開始，你將遠(yuǎn)遠(yuǎn)領(lǐng)先于包。
這是一個(gè)剛剛起步的進(jìn)步，然而，是有跡象表明，大規(guī)模收養(yǎng)迫在眉睫。例如WordPress.com，開始支持2016年期間的360°圖像和視頻。鑒于其市場(chǎng)支配，它所實(shí)現(xiàn)的任何特性都肯定會(huì)為其他平臺(tái)設(shè)定進(jìn)度。
此外，已經(jīng)開發(fā)了一些插件來(lái)幫助您上船。雖然它已經(jīng)很多年沒(méi)有更新了，帕諾出版社是第一批可用的。但是，當(dāng)前的插件例如WP-vr-view是用于實(shí)現(xiàn)虛擬現(xiàn)實(shí)的現(xiàn)代、定期更新的解決方案。
7。會(huì)話接口
會(huì)話接口和語(yǔ)音激活UI在采用方面比虛擬現(xiàn)實(shí)領(lǐng)先一步。然而，他們還沒(méi)能跳到普遍存在。
An example of a chatbot.
與使用會(huì)話提示的網(wǎng)站互動(dòng)聽起來(lái)像是科幻幻想。然而，當(dāng)涉及到Web可用性時(shí)，這項(xiàng)技術(shù)可能會(huì)產(chǎn)生重要的影響。我們已經(jīng)看到智能手機(jī)上采用了語(yǔ)音識(shí)別(由科塔納和Siri)，以及諸如亞馬遜回聲。我們甚至見(jiàn)過(guò)操作系統(tǒng)，例如馬科斯塞拉實(shí)現(xiàn)語(yǔ)音識(shí)別-但還有一段路要走。
我們的錢是在電子商務(wù)平臺(tái)上首先利用這項(xiàng)技術(shù)，以便提供更好的用戶體驗(yàn)。不管怎樣，學(xué)習(xí)這項(xiàng)技術(shù)現(xiàn)在將使你在短期內(nèi)獲得它的好處。
結(jié)語(yǔ)
就像其他藝術(shù)形式一樣，不可能預(yù)測(cè)每年在網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)新方面會(huì)帶來(lái)什么。然而，我們能，會(huì)，可以根據(jù)該領(lǐng)域的最新發(fā)展做出一些有根據(jù)的猜測(cè)。
你不需要成為一個(gè)專家，在每一個(gè)趨勢(shì)，留下你的印記，作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師。然而，了解今年的突出表現(xiàn)可能會(huì)給你帶來(lái)比同齡人更大的優(yōu)勢(shì)。讓我們網(wǎng)站建設(shè)再一次回顧一下我們預(yù)計(jì)將在2017年占據(jù)主導(dǎo)地位的七大趨勢(shì)：
材料設(shè)計(jì)。
微觀相互作用。
動(dòng)畫和SVG。
醒目而大膽的字體。
顏色和漸變。
虛擬現(xiàn)實(shí)。
會(huì)話接口
