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