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