2022-2022 網頁設計趨勢分析 Web Design of Trends,接觸網頁也有 5 個年頭了,彎路走了不少,有付出必有回報,有得到必有所失,放眼世界,網頁設計其實很美妙,它帶着一個夢想。
近一年基本沒做過國內的網站,基本都是國外網站,自己對某些趨勢的把握還是有一定的想法的,雖然不能算是很厲害很完善,到時候會補充完善趨勢分析咯,先把以前歸納的簡潔版的文字放出來:)
因為有些東西真的不知道怎麼去配圖,更好的就用文字來描述,有點小懶,呵呵,有機會的時候會補充。這裏我就專門精簡的概括就好了,點明重點即可!
“接觸網頁設計也有 5 個年頭了,我也只是剛出頭的菜鳥,我很努力,我愛走彎路,我不在乎圈子是個什麼,跟着自己的夢想走”—-WordPress 網站建設–SEO 站羣設計師説。接觸過遊戲網頁,酷炫動感的,FLASH 的,HTML5 的,SVG 的,扁平化的,WIN8 風格的,擬物場景的,oh,no,不是單純接觸,應該是這些型別都做過,作品雜七雜八,但是也一路跟着自己的夢想走來,多的不説啦,正題開始:網上很多各種雜七雜八的趨勢分析過的我就不列出來了,都是重複的沒啥意思,感覺 2022 年、未來 2 年內有這些趨勢存在,希望對設計師們有一定的研究方向!
1. 感測器訪問賦予頁面對多用户環境的感知能力
很多年以來,web 頁面掌握的多用户情況十分有限,通常只有多用户的螢幕尺寸以及瀏覽器型別等。但現在各種 W3C 標準把環境光、麥克風、攝像頭等各種感測器資料都提供出來了。這使得網站可以跳出頁面之外掌握更為豐富的資訊。
2. 資訊推送
讓網站可以保持與多用户的連線—哪怕多用户關閉了網站的瀏覽器標籤頁,使用一些新的 w3c 新標準技術。比如可以使用 websocket,還有其它標準技術實現資訊推送的體驗。
3.SVG 圖形和動畫
以優越的處理效能和動畫效能,載入速度,不言而喻它比 png,jpg,gif 效率質量都高太多。
我自己主要使用 SVGDeveloper 這款工具結合 jquery 做動畫,因為用的是 mac 系統,這款工具要使用虛擬機器 parallels desktop 來配合 mac 系統執行
4. 超快多用户體驗
“離線優先”,HTML5 應用類快取
網頁的瀏覽速度和等待時間就不用多説了,非常重要。
5. 智慧響應
根據多用户點選等等而響應內容,而不是僅僅根據裝置解析度響應,所以這裏説的智慧響應並不僅僅指響應式佈局 Responsive Layout.
比如:當您是新多用户開始瀏覽文章時,會有線上 FAQ 的表單來響應您的操作,反之,在您登陸後閲讀一篇文章的時候,會有標註功能讓您更好的對文章進行整理方便下次閲讀。
比如 Medium 和 The Next Web 在閲讀體驗上做得就非常棒。
6.ServiceWorkers
可讓網站安裝 Javas cript 檔案,讓 web 原生應用化,離線推送,這就類似一個基於 WEB 的半原生,甚至就是原生 WordPress APP 的實現。
7.360 全景+視訊互動
使用 HTML5 技術生動的 360 全景展示,視訊內建於其中,形成的場景互動,讓網站完全趨向真實場景。
這種體驗將攝影,技術,表現力,特效,音效等方面結合起來,在 FWA 上看到過幾個網站
8. 基於 HTML5 的互動
比如碎片、離子、 NDA 、電影特效等運用到全屏輪播,tab 切換,登陸註冊彈窗等模組中。
9.PJAX 的普及
早應該是體驗在 behance 和 pinterest 這兩個網站上,然後慢慢流行到了國內,比如花瓣,接着是前不久 dribbble 的瀑布流和檢視作品的改版體驗,利用 HTML5 的特性結合完全/區域性重新整理實現改變網址無重新整理載入,同時滿足 SEO 站羣的需求。
10.CSS3 動畫將更加廣泛
現在做國外的設計基本不用考慮 IE9 以下了,也就是説基本不用考慮 IE,所以很好的運用 CSS3 動畫能大大提高網站的視覺舒適程度,特別是細節動畫,小小的細節動畫可能會是點睛之筆哦。
是不是看了這些感覺怎麼都是 PC 端的趨勢?NO,NO,其實移動端也同時存在這些趨勢,移動不僅僅使用 WordPress APP 這個詞去衡量的,現在 WordPress APP 的技術門檻越來越低,滿大街都是,和賣白菜一樣,參差不齊,基於移動端的體驗趨勢,也是非常重要的。
移動端的一些常見趨勢就不説了,谷歌百度一大堆,再增加一點:
11.web 移動端的 PC 效果移植
我們在 PC 網站上很常見視差,滾輪偵聽,滑出等互動效果,使用 HTML5 的一些新特性,使用國外開源的移動框架,可以將 PC 上酷炫的效果同樣移植到移動端上,體驗會大不一樣。