Web Design Trend 2011-2014

28
Web Design Trend 2011-2014 報告人:古佳禾 2014/07/31

Transcript of Web Design Trend 2011-2014

Web Design Trend

2011-2014

報告人:古佳禾 2014/07/31

2011

Mobile

Ready全球手機市場發展以智慧型手機成長最為快速,這意味著你的設計需要考慮更多的設備。

Designing for Touch Screens, Not

Mice觸屏技術應用越來越廣泛,觸屏設備隨處可見。這意味著,你的導航設計不再只是鼠標導航,你必須要要考慮你的設計適合觸屏設備。當鼠標hover的時候鏈接會變得高亮,然而觸屏沒有所謂的hover。你將會在設計中如何向觸屏設備訪客展示鏈接?

There’s no hovering in touchscreen

2011

More HTML5 &

CSS3在過去的幾年設計師已經開始關注和使用CSS3+HTML5,但在2011年CSS3+HTML5將會得到更廣泛的應用。

設計師會在一些可用的地方使用HTML5替代Flash,使網站變得簡單運行更快速。然而,目前HTML5還不能夠取代Flash,Flash的某些效果HTML5暫時還不能夠實現。

you will slowly step away from Flash and embrace HTML5

CSS3的應用越來越廣,在某些地方甚至超越PhotoShop,因為利用CSS3來實現文字陰影、圖片圓角和圖片透明。

2011

QR: Quick Response這個方形的條形碼被稱為QR,使用你的手機拍攝一張唯一的條形碼的照片,手機上讀取QR的APP就會打開條形碼相關的網站。以及你可以將QR應用到很多地方。應用QR到你的網站,目的是讓瀏覽者擁有一個你的移動網頁的快捷方式。

Infographic-like這是一個曾經被用於教育目的,之後反而取得了多年來的普及有很大的趨勢。信息圖表的視覺興趣添加到您的網站的內容,使得原本枯燥乏味的統計數據看起來原始和創造性。

2011

Large Photographic Backgrounds這些背景圖像一般是高分辨率,覆蓋這個網站。高清照片是一個迅速抓住你的讀者的好方式,可以產生極具衝擊力的視覺效果-遊客的視線會不自覺地落在寬大的背景上。

這已不是像素可以描繪的距離 無限寬敞的延伸了我們的想像

2011

Parallax Scrolling

視差滾動是使用圖層概念來呈現一個3維

空間的技巧,在設計上可以通過一些簡單的CSS技巧或jQuery插件來實現。運用於網頁設計的次要元素中可以起到很好的效果:如header、footer或者背景。不過最好不要運用於網站導航,這樣可能會讓使用者感到不知所措。案例:Putzengel http://www.putzengel.at/

它是電腦圖學中一種特別的滑動特效技巧,首次出現於1982年一款叫Moon Patrol的遊戲,主要是用來摸擬3D效果。滾動視差的原理是把背景圖片的移動速度放慢,讓前景圖片移動較快,因而在2D畫面上產生多層次的佈景深度。

Depth Perception in Web Design

2011

Circles過去設計圓形的網頁元件需要使用到PS等工具,但隨著CSS3的技術成熟,製作出圓形視覺效果變得更加容易,可以快速的建立出圓形的元素於網頁中,這樣的便利性就推廣開來了。

案例:http://dotmick.com/

2011

Circles過去設計圓形的網頁元件需要使用到PS等工具,但隨著CSS3的技術成熟,製作出圓形視覺效果變得更加容易,可以快速的建立出圓形的元素於網頁中,這樣的便利性就推廣開來了。

圓形的設計可以用於:導航連結、footer

等重要的區塊等都十分的受到歡迎。最重要的是在視覺上,圓形可以吸引注意,並且帶給人們愉快的感覺。

encourage

eye contact from

your visitorshold a

delightful effect

2012

Responsive Web Design

有84%的智慧型手機使用者使用他們的行動裝置瀏覽網頁

2010年Ethan Marcotte在 A List Apart

的文章中提出了Responsive Web Design

(RWD)這個概念。讓網頁可以隨著螢幕環境的變化去適應及調節出最佳的呈現畫面。

2012

Social Media Features隨著社群網站的成長,分享訊息的按鈕變成是網站的必需品,且需要確保分享按鈕是讓使用者方便使用的。為你的網站集成更多的社交媒體網站,甚至是一些新網站,在文章的最後放置分享按鈕,預計將會是一個趨勢。當然也不要限制止有Facebook和Twitter,可以多放4~5

個常用的社群分享按鈕。

2012

Fixed-Position Navigation

這可以大幅提升網站的性能甚至更易於融入整個頁面佈局。這種設計鎖定導航和鏈結/logo在固定的位置,即使用戶固定頁面也能快速通過導航訪問其他頁面。

Time is Money

2012

Big Footer

Oversized Logos/Headers

頁腳中的作用將更加突出,,這將是超大更有創意(圖形,醒目的設計,增加內容),並包含更多的個人信息。

這將有助於讓網站更加難忘和令人印象深刻的。一個Oversized

Header將很容易執行在首頁上的功能。

2012

Big Vector Art

在網站使用超大的吉祥物打造你的品牌。幾年前你很難在網路品牌中找到使用大量向量圖的案例,不過在近年的發展下,越來越多的人喜歡用向量的插圖代表自己網頁的風格,甚至能為品牌帶來明顯的識別!

2012

Typography & Custom Font Faces未來「有個性的字體」將成為網頁設計的趨勢,所謂有個性的字體是獨樹一格,可以自成一個宇宙。不是電腦中已有的標準化字體。設計師正開始找尋能夠為設計增添一些個性和獨特性的字體。

2013

Skeuomorphism will show its age依據過去的線索來為新技術服務並沒法太大地改進我們的思維方式。比如,我們不需要一個可視化的書架才知道那裡有電子書要讀,看電子書的封面我們就知道那是什麼了。

Metro UI是微軟基於設計語言設計的一種介面風格,此設計已被用於行動作 業 系 統 Windows Phone 、Windows 8、Xbox 360等多款微軟產品。

2013

White space網頁上的留白部分,同其它頁面內容如文本、圖片、動畫一樣,都是設計者在製作網頁時要全面審慎的!

在國畫中,有一句描述謀篇佈局

的話比較經典,叫做“計白當黑”,所謂“疏可走馬,密不透風”,就是說空著的

地方和著了墨的地方一樣,都是整體的組成部分。這是書家畫手所孜孜追求的。可見“留白”是非常重要的。有些畫,儘管畫得不錯,但看起來就是不舒服,原因就是沒有重視“留白”。

Don’t Forget Less is More

2013

White space網頁上的留白部分,同其它頁面內容如文本、圖片、動畫一樣,都是設計者在製作網頁時要全面審慎的!

提升到藝術的高度來看待“留白”,

留白既可以給人帶來心理上的放鬆,也可以給人帶來緊張與節奏。通過這種手段可以向瀏覽者傳達出設計者的訴求。

利用留白的體量感來使頁面佈局平衡,在一種不平衡中營造平衡,這

樣就會使頁面生動起來。我們

應該在網頁中通過留白的作用,使整個內容排布得鬆緊有度,給人以跌宕起伏之感。

2013

Infinite Scrolling

人們習慣「滾動」來閱讀、搜尋資訊,現在網站使用更多的設計

技巧、例如畫面更多的留白、回應式網頁設計(responsive design),使得過去被詬病的長滾動頁面重新流行起來,長滾動頁面設計有助於人們的資訊吸收。令人耳目一新的網頁排版讓這種設計不顯無聊,使用者不會意識到實際滾動的距離有多少。

Ex.

2014

扁平的設計是在2014年出現的最大的趨勢之一,蘋果漸漸拋棄擬真化設計,轉向扁平化美學,iOS7即為最佳代表。

Flat Design

扁平化設計正是通過放棄任何附加效果的方式,創建了

一個「零」3D 屬性的設計方案。在這裡,沒

有陰影效果、斜角、浮雕、漸變等其他方法來幫助元素產生相對於螢幕的凹凸效果。不帶有羽化邊緣以及陰影

效果的圖標和UI元素也都是看起來非常鮮明。

2014

Videos in place of text

2014 年在網站上會開始看到網站上都內

嵌影片,特別是在前述所說的大面積圖像區塊,網站也可採用影片放在它的官網首頁。

撇除需要下載更多的數據的缺點外,影

片比文字還能更有效地說明資訊含量較高、較複雜的新科技產品,其製作和傳遞分享越來越方便,因此,以影片取代長篇大論的文字介紹不失為一個很實用的點子。

如果影片會自動解說資訊,為什麼要費神閱讀?

2014

Simple color schemes

簡單的意思是指整個網站只使用一兩種顏色,在設計與藝術領域中,黑與白被視作無色。 這樣簡單的配色似乎有些許受到受

扁平化設計的影響。

Summary

2014

2012

2011

結 構 外 觀 動 作

Responsive Web

Design

2013

2014

2011

Flat Design

Infographic-like

Videos in place of text

Simple color schemes

Fixed-Position Navigation

Infinite Scrolling

Typography

Custom Font Faces

King content still keep its crown.