網站變變變！新一代網頁製作技巧，你知道了嗎？

　　網頁設計，它不僅僅是圖像與文字的現實表現，也可以做為每一項事物或形象的具體表徵。

　　有些人會問，它到底是什麼？

　　它是不是就是一張利用瀏覽器開啟的圖像？

　　還是它只是一些圖案或文字拚湊起來的內容？

　　我想，網頁設計，它是一個能夠可以利用圖像設計、運用排版的方式，來表達體現目標的一種方式！！

　　在2014年開始的「響應式設計」，它的出現，又再次將網頁設計開啟了新世代！而2015年，也將會有不同的設計作品，不斷地運用這種手法，設計出更多更新穎的網頁！

　　「響應式網頁設計（Responsive Web Design）」，它是以HTML5與CSS3.0的結合設計為主。它的優點是在製作網頁設計時，不需要同時製作出多種符合不同介面的圖像，或是文字設計，而是直接以網頁語法來設計製作，與傳統的表格式網頁設計有很大的不同。

　　而傳統的表格式網頁設計，它是利用HTML的語法來進行網頁排版，它可透過像素比例或是百分比的方式，來指定要製作的樣版，而且在不同的瀏覽器或裝置上，就必須製作符合其規範的網頁，是非常花費時間與成本的。

　　以下圖為例，它是一個利用「表格式網頁設計」，所製作出來的網站，它在桌上型電腦上查看時，是非常便於操作使用的網站，但若改以手持式裝置，進行瀏覽時，則就必須不時地移動手機畫面，是較為費時的；但若該介面能跨瀏覽器裝置使用，則相信它的網站瀏覽使用率，必定是相對地增加的。

　　響應式網頁設計，它的設計能同時跨瀏覽器及裝置進行網頁瀏覽，是一項具突破性的網頁設計技術。

　　而在這種響應式網頁設計出現後，還出現了另一種簡約風格的網頁設計方式，就是所謂的「扁平化設計（Flat Design）」，在這2種設計碰撞後，所產生出來的網頁除了比以往的更具簡潔外，也同時更能適合不同瀏覽器的瀏覽操作。

　　而使用這種扁平化設計有幾個重點，由於它不需要製作很多花俏的圖樣，就能以最簡潔的樣態，呈現出來。首先，它不需要做過多的圖像特效，然後它是透過簡單的圖形區塊，來做內容的版面規劃，並且利用色系間的區隔方式，來讓瀏覽者能夠一眼就能看清楚，提升網頁閱讀操作的能力。它設計UI的元素，都是利用大量的色塊，進行版面編排，再結合字體做一設計，提供給瀏覽者更好的操作體驗。

　　以下圖的網頁設計，就是以扁平化網頁設計的概念進行製作。利用不同藍色色系間之差異，來凸顯單元功能間之不同，除了色系的選用外，再加上單線條的ICON設計，一方面不會讓整體視覺過重，另一方面也可以讓瀏覽者直覺地知道該單元的功能，最重要的是讓瀏覽者在一開啟網頁後，能快速地進行操作使用。

　　另外也有一些新的網頁設計手法，像是內容滖動手法，它是以瀏覽者在瀏覽網頁的角度在設計，當瀏覽者在向下滾動網頁時，它的網頁內容才會逐一漸變地顯現出來，不僅較不會佔頻寬，也不會有覺得內容過於冗長。

　　以下這個網頁就是以這樣的手法製作，瀏覽者只要向下滖動網頁，它的內容就會逐一的出現，方便瀏覽者進行使用。

　　還有利用大文本排版方式，透過文字變化的方式，來進行不同感覺的網頁設計，讓瀏覽者在一開啟網頁後，可立即被其所吸引，再加上單元區塊間的層次分明，讓瀏覽者在操作上，能夠更為便捷。

　　最後還有像是使用高品質圖像設計的網頁，不論是設置於網頁內容的底部，或是具互動性高的輪播型態，都將更能讓瀏覽者願意多停留瀏覽網頁，甚至還有網站，利用這些高品質的圖像，讓瀏覽者在瀏覽網頁時，間隔數秒後，自動變換至下一張，使其在瀏覽時，又增添了一驚喜。

結語

　　網頁設計，我想2015年的網頁設計趨勢，主要仍然會以響應式網頁設計為主，而如何能讓所設計好之網頁更能吸引瀏覽者停留，我想至少要具備以下的基本要件：

1. 使用響應式網頁設計為基礎

2. 以使用者體驗為主的介面規劃

3. 採用簡單元素的扁平式設計

4. 利用滑動介面及向下滾動內容的方式進行瀏覽

5. 具互動性高的視覺體驗

　　有了以上的基本要件後，一定能有一個跨瀏覽器、裝置，且具互動性的網站產生。而如何打破傳統的網頁設計，創造出一個具個人化、互動性高且視覺效果高的多樣化網頁，我想還是必須要不斷的充實及操作，如此未來不管是以何種方式所設計出的網頁，都一定會令人為之一亮。