網站設計在智慧型手持裝置尚未主流成行前,網頁設計技術考量在使用者螢幕大小解析度、瀏覽器支援版本相容規劃

設計,但隨著iPhone、iPad、Android智慧手機與平板電腦使用普及快速成長趨勢,網站設計以不在只能注重在桌上機或筆電裝置瀏覽介面設計規劃。

在先前需多企業為提升網站服務除架設一般電腦瀏覽使用網站版本,並另增加設計行動裝置瀏覽專用網頁,

讓使用者在使用手持機裝置瀏覽企業網站時以手機版網頁介面提供瀏覽資訊服務,讓使用者更容易方便閱讀網站資訊,

短短幾年光景網頁設計Layout觀念又有新改變,Ethan Marcotte 在 A List Apart 的文章中發明了術語 Responsive Web Design (RWD)。

他在 2011 年關於這個主題所寫的簡短的書中描述了響應式網頁設計的理論和實踐。

RWD設計模式被 .net 雜誌 列為 2012 年頂級網頁設計趨勢的第二名 (漸進增強是第一名)。他們也列出了 Ethan Marcotte 最喜歡的響應式站點之中的 20 個。

何謂RWD? 所謂的RWD就是指Responsive Web Design,中文翻譯大概就是所謂的響應式設計,

 

意思就是網站會隨著瀏覽裝置不同而產生不同的畫面,(桌機、平板、手機等等)不同的上網平台,



RWD 設計模式示意圖

 

2012網頁設計的趨勢,有些可能已經是大家熟悉的效果了,而有些卻像是服裝潮流一樣,循環般的又流行回來了!也許這些趨勢,並不是以大躍進的面貌在改變,但是在這些概念的前提下,循序漸進的,也能讓我們看到可能的發展與演變的軌跡!

1.Responsive Web Design (浮動式欄位) 

關於網頁在多種螢幕尺以及行動裝置上的表現方式,之前在部落格的其中一篇文章中也有分享過(浮動式欄位編排),這個趨勢延續到2012年仍會是網頁設計師在設計考量上的主要重點,原因是因為這仍是一項設計師還在努力熟悉的新技術,不過就必要性來看,很快的它會被列入網頁設計的基本項目之一。

2.Fixed-Position Navigation(固定位置的選單) 

關於這類的表現方法並不是太新的手法,並且曾在2010-2011之間,大幅的被減少使用,但是最近似乎又起死回生的慢慢看到它出現在一些個人的部落格,或是簡單沒有太複雜選項的網頁上,透過使用jQuery的語法,便可以直接呈現想要的效果,並且大幅提升網頁的效能,以現今簡約風格當到與HTML5網頁的主流之下,這樣的固定式選單,的確是強化了使用者對選單的操作並簡化了網頁的使用方式。

3. Circles(圓弧形狀) 在以往,像是這類導圓角的型狀通常都是直接以圖檔取代做為主要的表現方式,但是在CSS的加持之下,現在設計師可以用語法簡單的控制圓角與陰影了!

4. Big Vector Art(大又吸引人的向量插圖) 在最初像是mozilla這些網頁,帶來了向量公仔的有趣風格,不過在近年的發展下,越來越多的人喜歡用向量的插圖代表自己網頁的風格,甚至能為品牌帶來明顯的識別!

5. Multi-Column Menus(多欄選單) 當你的選單過於複雜又凌亂時,除了可以考慮把選單放到側邊的固定選單位位置以外,根據許多使用者經驗的測試,也顯示出了把主要選單永遠保持在頁面的頂端是一個可行的方式。

6. jQuery/CSS3/HTML5 Animation 在網頁的設計中,美化的視覺與小部分的互動動態,都能為網頁帶來意想不到的加分效果,雖然說jQuery目前還不是全面的被支援,但是在CSS3的主導之下,還是能呈現出一些讓人驚艷的效果,並大幅的簡易了語法的撰寫長度與複雜性。

7. Ribbons & Banner Graphics(緞帶般的裝飾效果)

8. Custom Font Faces(自行定義字體) 有了 Google web fonts 的支援之後 ,網頁的字型終於可以不用再受限於幾種枯燥乏味的系統字型了!只要在Google的字型庫裡面選出字型,然後將被輸出的代碼放入CSS語法裡即可。

9. Infographics(圖像資訊)

10. Focus on Simplicity(簡化風格) 瀏覽網頁的目的,就是為了快術取得資訊,並且能清楚的從網站之間的連結得到快速的轉移。畢竟,沒有過多的裝飾,能夠讓使用者更快的找到或是專注在需要的內容上面,而不至於被過度的分心。
 
 
 
創作者介紹

佳佳的窩

天秤女~佳佳 發表在 痞客邦 PIXNET 留言(0) 人氣()