2011 年網頁設計趨勢

網頁設計這行是不斷地一直在更新、在創新，導致業界內所謂的「設計」(Design) 與「發展趨勢」(Development) 之間的界限已漸模糊。怎麼說呢？也許五年前，你會用 Photoshop 來造樣設計，但現在呢？已經落伍囉！因為現在網際網路的使用者素質已經提昇，他們對於華而不實之網頁的使用上，已經開始覺得厭煩！因此，2011年強打趨勢為「不只是華麗美觀的網頁，功能實用才是王道！」所謂功能，就是您的網頁需要能有頻繁互動的社群功能，及視覺上的真實感。因此，如果你的目標還是在做出一些華麗但不重功能的 Flash 網頁，你可能很快地就要讓自己被淘汰囉！

如何才能跟得上 2011 優秀設計師的腳步呢？你的目標並不是設計出絢麗繽紛的網頁，而是將所有功能都結合在一起才是重點。一位傑出的設計師可以設計一個非常好的網頁環境空間，留住使用者，而不會讓使用者覺得無趣而快快跳出你的網頁。當然，製造出這麼優良的網頁環境，得需要幾個因素：符合主題的網頁主色、直覺性的設計、能快速得到資訊的介面，並有立即回覆的功能。

另外，一個最不容小覷的因素：「簡單化」，在 2011 這個年代，已經不是只有一台桌上型電腦或一台筆電才能上網，你現在必須設計的，還必須符合給所有智慧型手機、超小型筆電、電子書這些產品來使用，你準備好了嗎？

 

現在，讓我們一起重點式地討論 2011 設計趨勢：

 

1. 更多 CSS3 + HTML5

這是一個可喜可賀的消息! CSS3跟HTML5 在前幾年一直不是很被重視,但是在2011年,我們將會看到他們要發威囉! 設計師終於要和Flash說掰掰了! 知道為什麼嗎? 現在最夯的一些電子產品, 沒辦法支援Flash網頁,所以必須由HTML5設計才能看得到網頁效果. 在2011年,使用者對Flash網頁將會開始退燒, 並開始對HTML5能做到的設計更嘆為觀止,請看HTML5與Flash的差別

但要特別強調的是, Flash與HTML5 不太能夠相提並論. 只是在2010年以前, 設計師常不恰當地使用Flash, 例如將整個網頁都使用Flash來呈現等, 這對於現在業界需求來說是非常不合理的. HTML5可取代一些對Flash有過於期待的使用者,但是,以現階段的HTML5來說, 要完全地取代Flash, 還是有點距離喔!

更令人振奮的消息是: CSS3也將會在今年正式成為網頁設計的流行趨勢, 甚至超越Photoshop. 因為CSS3將可使字型陰影, 粗框, 及透明等功能變化萬千! 所以CSS3與HTML5真的是網頁設計師需要再更鑽研的兩個得力助手!

2. 簡單扼要的網頁主題色系

「簡單化」設計- 沒有比這個更能傳達一個公司的原始精神. 但放棄「來點黑色加白色最後用一點灰色點綴吧」的這種死反想法. 想想看另一種簡單配色: 綠色, 黃色, 再加一點紅色,這樣子搭配的一個簡單主題色. 不過, 所謂簡單化, 就是選擇網頁主色系的時候,不要超過2-3種顏色的搭配. 將這兩三種主題色用淡化或同色系陰影的顏色來搭配, 將會有意想不到的效果:

不同的綠色陰影色系就能表現出這些空中鳥兒在嘰嘰喳喳般地活潑生動畫面.備注: 這個畫面是利用XHTML/CSS及Javascript所設計的

紅色如果設計地不協調的話, 就會出現不和諧的畫面. 此設計利用象牙黃文字顏色與紅色來搭配, 更能達到突顯的效果

3. 行動上網的網頁

智慧型手機,iPads電子書, 所有與行動上網相關的電子產品等…天啊! 這些一連串的產品已經是2011年消費者的趨勢! 這代表甚麼呢? 設計師開始需要設計與這些產品相容的網頁了!

設計出能夠行動上網的網頁可不是將你原來設計的東西拼拼湊湊就好, 這樣子只會出現一個不夠人性化的網頁. 還好現在的設計技術已經可以屏除這些障礙.

CSS3會是你第一個好幫手! 它可以讓設計師的作品完全地相容到消費者使用的行動上網產品中! 有些公司有意開發只屬於某行動裝置的網站, 但相對的, 這將會排斥其他行動業者的使用問題! 所以最好的方法就是使用者可以自行決定有瀏覽原始網頁的功能或是手機瀏覽模式的功能, 如果設計師沒辦法做到這樣子的功能, 那麼這位設計師也即將要被2011的趨勢給淘汰掉囉! 經濟學者已預測今年的行動裝置會比個人電腦銷路還更好! 所以這是給設計師最大的一個提示!

4. 橫向捲軸設計:

這可不是ONLINE電玩, 這是會讓網頁看起來有更多空間的設計趨勢! 捲軸設計讓使用者感覺有更多的3D視覺空間, 這種設計手法可使用簡單的CSS技巧與jQuery 的Plugins來搭配使用. 橫向捲軸設計為設計師次需設計第二個重點,包括頁首,頁尾及背景. 如果設計師懂得巧妙運用衡向捲軸設計, 將會使瀏覽網頁的使用者減少跳新視窗畫面的問題.

此設計就用了許多橫像卷軸的設計來增加網頁內容空間, 這為網頁帶來更多空間並增加使用者的興趣

5. 非滑鼠介面的觸控螢幕設計

科技開始延伸到可觸碰的境界了, 這代表了滑鼠功能將由使用者的手指頭觸碰開始代替. 現在越來越多的行動裝置及電腦開始使用觸碰式控制. 設計師是不是又要開始頭大了呢?

設計師的版面中,有多大部分是需要用到滑鼠控制? 那麼現在改成觸碰式的呢? 難道有下拉式選單嗎? 簡單來說, 如果今天沒有了滑鼠, 你要怎麼讓使用者來瀏覽你的網站? 雖然爭議性很高, 但是衡像卷軸還是很適合觸碰性網頁的設計, 甚至設計到讓使用者在讀真的雜誌般來翻頁等. 因此, 我們建議使用動態版面的設計來應付不同網頁瀏覽需求. 在2011年, 已經不是使用正常螢幕大小來上網的年代, 使用者瀏覽網頁的行動裝置大小千變萬化, 而這正式設計師必須挑戰的難題之一.

6. 視覺上的景深設計

不不, 我們現在不是在討論天線怎麼來的好嗎? 早在兩年前我就可以在你的網頁上看到你用的咖啡杯跟你的鍵盤了! 我現在要討論的是視覺上的景深設計, 這是一種3D視覺的設計,讓使用者在視覺上離你更近! 就像是你在看阿凡達3D的那種有東西要從螢幕跳出來的感覺! 雖然網頁設計師目前還沒辦法設計出像電影的3D效果, 但是設計師還是可以讓網頁看起來更有深有淺

這是一個非常令人注意的設計! 是Michael Jordan 系列的網頁設計, 此網頁的3D效果非常簡單卻很生動

7. 大篇幅視覺的設計

大篇幅視覺也將會是2011的趨勢. 這些圖檔必須是高解析度並且佔滿整個網頁的版面. 大圖片是吸引使用者目光最快的方式- 因為她們的視覺上沒有別的選擇性. 所以這個圖檔必須要切合整個網頁的主旨來表達重點! 如果你只有一張漂亮的圖來當整個網頁的背景而沒有內容的話,只會讓使用者對你的網頁增加反感而已. 但只要這張大圖能夠與內容及字型完美融合的話,就會呈現意想不到的設計效果, 如下:

此設計是用高解析度的大圖及顯眼的黃色字型來抓住使用者的目光

 

8. 大膽創新的網址名稱

雖然與網頁設計不是太有關係, 但是想出一個創新的網址名稱也是很重要. 但是許多很創新的名字都已經被買走. 2011年的網址名稱可走詼諧路線,例如: .me或.us的網址, 有創意的名字很容易被買走喔! 一定要快點購買!

.me是一個非常好的網域, 通常是給個人作品用,尤其是當你想要跟同業與眾不同的時候可以考慮使用

9. QR: Quick Response (二維條碼)

在2011年另一個新欣流行趨勢就是QR(Barcode)二維條碼. 你可以在有些人的名片上,或是雜誌上看到這種二維條型碼? 到底是甚麼呢? 非常有趣:

這種條碼稱為QR,英文稱作Quick Response, 只要利用你可以上網的手機拍攝條碼, 您的手機將自動開啟這個條型碼的網站, 您就可以看到這個網站的內容, 而不必費心地輸入網址. 您也可以利用QR來追蹤瀏覽過您網頁的使用者等. 這種條碼經常被行銷人員用來推廣網站,促銷活動等,非常方便好用! 2011年是行動裝置歷年來最夯的一年, 一定要利用這些功能來製作網頁設計

這是此篇文章原作者網頁的QR條型碼,只要利用您的手機拍下這個畫片,將會自動在您的手機上開啟作者的網頁

10. 網站縮圖

去年網路搜尋引擎Google推出了網頁縮圖的新概念, 正式像老舊的搜尋結果出現條列式的網頁說掰掰! 現在,只要將滑鼠移到搜尋結果中, 馬上就會有視窗出現您指向網頁的縮圖畫面, 所以使用者不需要進入到那個網站再看是不是自己要搜尋的資料. 但如果您的網頁是Flash架構, 網站縮圖將會是個問題, 縮圖不會出現貴公司的網頁,只會出現一片空白. 所以設計師必須謹慎小心地使用Flash並控制到不影響快照縮圖的畫面.

11. 保持聯繫及生活互動功能設計

最後,網頁設計的連繫功能及分享互動功能也是2011年網頁設計師的一大課題. 網際網路(Internet)原本是無菌無塵,空無一物的空間, 但人類開始將私人生活寫真等分享給全世界的人知道,與全世界的人互動,交流. 像Facebook, Twitter等互動工具, 讓使用者,朋友,家人,甚至不認識的人,都知道您在想甚麼,做甚麼,只要一有新的訊息就可以立刻通知大家

 

這是一家公司的網站,將所有功能都放在首頁,也是一種設計

 

About the Author (關於作者)

邦立資訊科技轉載自: http://webdesignledger.com/tips/web-design-trends-in-2011

Jacqueline is an artist and a writer who spends an inordinate amount of time playing Super Nintendo and watching Star Trek. You can find out more about Jacqueline on her website, and follow her updates on Twitter.