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 上酷炫的效果同樣移植到移動端上,體驗會大不一樣。