設計與開發之間本有一線界限,但當時代步入又一個十年,這個線變得更加模糊甚至感覺不到它的存在。使用 PS 設計網頁版面,足矣?或許五年前是吧!現在的網際網路多使用者要求越來越多。沒有內涵的華麗很快就會被丟棄。如果您追求華而不實的設計,那麼相信您很快會被時代遺棄。 2022 年不再屬於單純的華麗而是注重功能。新的一年或者未來十年的設計趨勢是響應設計(responsive design)、持續聯絡(constant connection)和虛擬現實(virtual reality)。

 

作 為設計師的您,2022 年會作神馬打算?真正的設計師設計的東西不是為了譁眾取寵而是在藝術和功能上做到兩全其美。。膚淺的讚賞易得膚淺的設計也易被遺 忘。出色的設計師猶如造夢師,給多使用者創造一個夢境,讓多使用者感覺到如此真實而不知道自己是在夢中。這樣的夢需要幾個元素:優秀的配色,直觀的設計,良好的交 互性和快的響應速度。此外,永遠不要低估簡約的力量。 2022 年,您的設計不但要考慮筆記本、臺式電腦,還要考慮智慧手機、上網本和平板電腦等裝置。您都 準備好了嗎?

2022 年網頁設計趨勢有何變化?一起關注 11 個網頁設計趨勢熱點:

1. 更多的 CSS3 + HTML5

這是期待已久的事情。在過去的幾年設計師已經開始關注和使用 CSS3+HTML5,但在 2022 年 CSS3+HTML5 將會得到更廣泛的應用。網頁 設計師終會拋棄 Flash 。 Flash 不再是昔日的王者,新技術(指 CSS3+HTML5)將會取而代之。 2022 年,Flash 漸行漸遠,魔術師 “HTML5” 成為舞臺的主角:

當然,說 HTML5 代替 Flash 為時還早。從上面的兩幅截圖您可以知道 Flash 和 HTML5 還是有差距的。因此,2011 年兩者會各自保持屬於 自己的位置。不過 2012 年以前網頁設計師濫用 Flash 的現象會慢慢減少。現在很少設計師會整個網站都是用 Flash 設計,他們會在一些可用的地方使用 HTML5 替代 Flash,使網站變得簡單執行更快速。然而,目前 HTML5 還不能夠取代 Flash,Flash 的某些效果 HTML5 暫時還不能夠實現。

然而值得人興奮的是 CSS3 的應用越來越廣,在某些地方甚至超越 PS(Adobe 表示有鴨梨),因為利用 CSS3 來實現文字陰影、圖片圓角和圖片透明實在是 easy job 。如果您還不會,是時候去了解 CSS3 和 HTML5 。

2. 簡單的配色方案

沒有比純色的背景更直觀更簡潔。純色可以有很多種表達方式。不要老是黑白灰神馬的,太不給力了。多點考慮綠、黃或者紅作為您的網頁主色調。當然,顏色知名保持使用 2 到 3 種。調整顏色的透明度,或許會給您意想不到的效果。比如:

只是簡單的綠色,透過調節透明度設計出如此美觀的 Twitter 視覺化工具。可要知道:這個網頁只是用了 XHTML/CSS 和 Javascript,給力吧!

紅色絕對經典,如果配色做得好給人的視覺衝擊就更……。上面的網站獨特的紅色和易友好的文字設計讓人不得不為之折服

3. 移動網際網路時代的到來

智慧手機,ipad 和上網本隨處可見,OMG,2022 年這個現在將會更加明顯。這意味著您的設計需要考慮更多的裝置。

建立適合移動裝置的網站不是簡單地在原有的設計去掉華麗的元素,那將會是沒有靈魂的設計。儘管在原有的設計再設計一個支援移動裝置網站是件痛苦的事情。幸運的是,新的技術讓一切變得更簡單。

在使用 CSS3 的情況下,設計移動網頁方便多了。重要的是您可以修改一個 CSS 檔案完成整個網站修改以符合多使用者使用不同裝置進行瀏覽網頁。

您也可以設計一個移動裝置專屬的網站,但相信那個網站不久還是要改版的,以現在科技產品的發展速度來看。越來越多的移動網站包括原始網站的瀏覽選 項。如果您不提供這個選項或者您的原始網站沒有針對行動網路標準最佳化,那您並未準備好迎接移動網際網路時代的到來。據相關預測,智慧手機銷量將會超越個人 PC 。趕快準備好,迎接移動裝置大軍的來臨。

4. Parallax Scrolling

先來解釋下 Parallax Scrolling,Parallax scrolling 是讓多層背景以不同的速度移動,形成運動視差 3D 效果,雖然純屬視覺效果,但在內容滾動時形成的視覺體驗仍然非常出色。 2011 年的網頁設計趨勢熱點就是要創造這樣的深度視覺效果。 Parallax Scrolling 可以透過一些簡單的 CSS 技巧或 jQuery 外掛來實現(示範站點:站點 1 站點 2)。 Parallax scrolling 運用於網頁設計的次要元素中可以起到很好的效果:如 header 、 footer 或者背景。不過知名不要運用於網站導航,那顯得有點不倫不類。

Old Pulteney Row to the Pole 在網站背景使用了 Parallax Scrolling 特效,開啟該網站然後往下拉即可看到效果。

5. 設計需考慮更多的觸屏裝置

觸屏技術應用越來越廣泛,觸屏裝置隨處可見。這意味著,您的導航設計不再只是滑鼠導航,您必須要要考慮您的設計適合觸屏裝置。請問您的設計做到指尖導航了嗎?

作為設計師,我們更喜歡滑鼠。當滑鼠懸停的時候連結會變得高亮,然而觸屏沒有所謂的懸停。您將會在設計中如何向觸屏裝置訪客展示連結?

同樣,如何才能做到方便您的遊客仔細閱讀您的網站?這可能在瀏覽器標準上存在爭議,或者水平滾動觸屏可能更加合適。將網站設計類似於雜誌的佈局更有利於遊客瀏覽您的網站。

後,您必須考慮在您的網頁設計中使用流體佈局(liquid layouts)。 2011 年,您需要處理的重點不再是螢幕解析度問題,而是如何做到使訪客從垂直到水平閱讀您的網站都會清晰。您的設計必須做到靈活以應付任何的挑戰。否則您將會成為過去式。

Baby sees the iPad Magic, Copyright Steve Paine, Flickr

6. 深度判析

深度判析是關於在網頁設計使用維數,這樣可以使您的網頁變得更加真實。如果運用得恰當,那將會是一個虛擬的 3D 效果,就像 3D 電影阿凡達那樣。儘管 3D 技術還沒有去到網站設計,您仍然嘗試使用維數進行設計。

Plántate 提供了一個可旋轉的 3D 地球,靈活利用陰影和層等手段。

Jordon 活動頁,3D 元素清晰簡單,設計非常醒目。(貌似已經撤掉)

7. 大背景圖

大背景圖的網頁設計應用在 2011 年將會更加明顯。這些背景影象一般是高解析度,覆蓋這個網站。高畫質照片是一個迅速抓住您的讀者的好方式,可以產生極具衝擊力的視覺效果-遊客的視線會不自覺地落在寬大的背景上。

當然背景圖的色彩、內容等都十分講究,任何情況下都不要破壞多使用者的體驗,不然再漂亮的照片也是枉然。圖片型別趨向於一些比較柔和、略帶透明的一類,不要影響到網站文字的閱讀,講究協調,易於閱讀。

上面的網站使用了高解析度的圖片作為網站的背景,網站主色調是黃色。

This site adds playful animation with its grand scale imagery. Warning: auto-play music.

8. 不拘謹於頂級域名

嚴格意義上這一點與網頁設計無關,但這一點也是發展的趨勢,將出現更多創造性的域名。.com 域名的吸引力越來越少,主要是您很難再找到一個比較短 的.com 域名。 2011 年人們開始將視線慢慢轉移到.me 、.co 和.cc 等身上。想想域名的發展,搶先一步,不然您很可能再次錯失先機。

.me 用在個人展品陳列頁、部落格是非常不錯的。

另一個.me 域名的示範

9. QR: Quick Response

如果您注意現在越來越多的名片、雜誌或者其他地方出現方形條形碼,證明您已經看到 2011 年的這個趨勢熱門。但它跟網頁設計何干呢?實在匪夷所思。

這個方形的條形碼被稱為 QR,全稱為 Quick Response(在 “QR Code 讀取器 QuickMark” 介紹過)。使用您的手機拍攝一張的條形碼的照片,像魔術一樣,手機上讀取 QR 的軟體就會開啟條形碼相關的網站。美妙的事情是您可以將 QR 應用到很多 地方。應用 QR 到您的網站,目的是讓瀏覽者擁有一個您的移動網頁的快捷方式。您還可以透過在您的網址上放置一個特殊的推介程式碼 QR 追蹤您的訪客。 哈哈,您完全可以使用 QR 作為您的頭像,然後到別人的網站留言、評論。 2011 年的移動媒體優勢更加凸顯,而利用這點優勢的網頁設計是明智的選擇也是將 來的發展趨勢。

上面是軟礦部落格的 QR . 如果您也想建立一個,猛點選這裡 .

10. 縮圖設計(Thumbnail Design)

Google 已經向瀏覽多使用者推出它們的瀏覽預覽技術。過去我們只能透過點選連結才能看到網頁的內容,現在您只需點選放大鏡然後將滑鼠懸停在連結上就可以預覽該連結的網頁內容。

如果您的設計是基於 Flash,會存在這樣的一個問題,預覽將無法顯示您的設計元素。

2011 年的一般網際網路多使用者變得更加精明,他們更希望看到更多人性化的導航設計。

11. 持續聯絡/ Life Stream

Lifestreaming, 一種線上記錄個人日常活動的網路應用,包括直接透過視訊 feed 或透過聚焦一個人的網路線上內容,比如部落格日誌,在社會性網路上面的更新,線上相簿,聊天內容甚至只是一些喜歡的網站的連結等等。

後一點,不是不重要的一點,是網頁設計更加註重人與人之間持續聯絡,如 Life Stream 。網際網路本身是原始的,枯燥無味的,是人類透過這個開放的平臺分享他們的一切才變得多姿多彩。將來人們還會而且加強如 lifestreaming 的形式進行人與人之間的交流互動。作為網頁設計師,您必須瞭解這個趨勢和應對這個趨勢。

2011 年,個人部落格在 Twitter feeds 更活躍(不只是連線到 Twitter 頁面的連結),人們會透過 Foursquare 互相傳遞即時資訊,where are u and what are u doing 。毋庸置疑,2011 年將會帶我們走進一個更交心的網際網路時代。

個人網站,使用了 lifestreaming 。

一個商業網站,在一個頁面上綜合大量資訊。