節奏藍調

在前一篇文章【《作品分享》一頁式網站─德國渥客師塗料volvox】裡，有利用我們的範例網站約略的跟大家說明什麼是一頁式網站。

一頁式網站又可以稱為「單頁式網站」，簡單來說就是在單一頁面，利用豐富色彩的圖片或是動態效果來表現公司或個人的風格，再以簡潔明瞭的方式呈現文字內容，卻可以帶來令人驚艷的視覺效果。

一頁式網站的設計趨勢主要開始於一些著名的網站設計師希望在一個簡單的頁面上展示自己的作品而創造的。陸續的，這個趨勢從時尚網站到應用程式網站，也蔓延到現在各種類型的網站設計中，設計品質也有了相當大幅度的進步。除了設計領域外，一頁式的設計也常用於公司的產品宣傳、產品促銷折扣、中小企業或是個人品牌網站等等，因為一頁式網站並不需要很大量的文字資訊，對於想要強調理念與創意的業者們是個很好的選擇。

以下為大家分析為什麼要選擇單頁式的網頁呈現呢：

1.因應瀏覽網路資訊的慣性動作「滑動頁面」與快速閱讀的行為

單頁式網頁的使用行為很簡單，只要往下滑就可以看完全部的東西，加上現今多數人在瀏覽網頁的時候，已經有這個「不停往下滑，快速閱讀的慣性動作」。這種反射性行為，讓人不用花太多時間去觀察該網站的使用模式，非常「簡潔、清楚易懂」。接下來許多特點都與這樣的使用行為有關。

2.精密的視覺設計安排能與客戶做更準確的溝通

公司的核心文化與理念往往是會吸引人選擇該公司的重要一環。個人網站亦是如此。所以如何在網頁上用文字、圖片來告訴別人「這就是我們公司（或我的特色）」就變得很重要。如果善用單頁式網頁「一路往下滑」的特點，你能透過順序、畫面與特效的安排，來讓別人更了解公司的核心理念與特色。

▲這是一位名叫Adam的設計的設計作品集網站。設計師透過畫面與內容順序的安排，再加上簡單容易閱讀的視覺符號和設計編排，來讓閱讀者可以一步一步認識這位設計師。(網站連結請直接點擊圖片) 

3.跳出率低

同樣與滑動的慣性動作有關連。因為這樣的使用模式，所以若是畫面與內容不算太糟，通常閱讀者的跳出率較低，還會常常一不注意就全部看完了！

 有人說跳出率比較低對網站有什麼關係呢。跳出率其實就是指閱讀者造訪這個網站時，沒有與這個網頁有互動就離開這個網站了，也就是沒有在這個網站停留太多的時間。通常一頁式網站的跳出率比較高，所以使用動態元素對一頁式網站是很重要的，像是在網站放上動畫效果、影片都是可以吸引閱讀者停留的方法。而對跳出率比較低的網站來說，他們在Google搜尋引擎裡的排名會比較前面，相對的網站的點擊率與瀏覽數也會比較高。

▲若是搜尋「水產」這個關鍵字，第一頁就會出現點擊率高比較高的網站，例如：上引水產、行政院農業委員會水產試驗所。

4.將資訊有計劃排版在頁面中，使讀者更容易吸收

有時候一次提供太多文字，會讓讀者容易失去閱讀興趣與耐心，所以用少量文字搭配圖像，並搭配第一點所說的順序安排，更能讓讀者完整看完你所要說的話。

▲這家「深坑兩姊妹麻辣臭豆腐」網站，就是許多的商品圖片搭配少量說明文字，讓顧客可以因為對這個商品有興趣，進而仔細去看這個產品的說明文字。(網站連結請直接點擊圖片)

5.透過動態效果的搭配，讓畫面不單調

單頁式網頁的畫面因為已經不用切換頁面，所以有時候感覺會比較靜態，但是如果技術上可以做到的話，依舊可以搭配一些滑動特效，讓畫面不致於太過平靜，增加動態視覺與互動性也是很好的效果。

▲記得嗎，在【《作品分享》一頁式網站─德國渥客師塗料volvox】文章裡有提到，當滑鼠遊標移到喜歡的顏色上，會顯示這個顏色的標號和名字，這也是一個動態效果。(網站連結請直接點擊圖片)

要怎麼設計一頁式網站呢，其實一頁式網站裡經常出現滾動偵測網頁設計及視差滾動設計。

滾動偵測網頁設計是利用CSS的實現將導航欄固定在網頁頂部(或是側面及底部)，並將版面內容按照導航順序垂直或橫向排布，使得用戶點擊相應導航tab時頁面自動滑到相應頁面。而這類網站結構和視差滾動設計有異曲同工之處。視差滾動設計是讓多層背景以不同速度滾動，以形成一種3D立體的運動效果，給觀者帶來一種獨特的視覺感受。

▲三井餐飲集團旗下的「上引水產」的一頁式網站中，就會看到他們的導航欄是在畫面的左側，並且是利用可以伸縮的方式，滑鼠移過去導航欄才會出現，為的是讓顧客在觀看圖文時，不會被導航欄影響。(網站連結請直接點擊圖片) 

▲再來看看我們艾爾森數位的網站，導航欄則是固定在畫面下方。而我們畫面切換的方式是採用橫向的切換方式，可以點擊導航欄或是畫面兩側的滾輪切換，當滑鼠移到滾輪上，滾輪會有轉動的動態效果，是不是很特別阿！(網站連結請直接點擊圖片) 

大多數的一頁式網站屬於縱向瀏覽模式，也有少部分的網站是橫向切換模式，更有少部分的網站可以上下左右的瀏覽。一頁式網站有那麼多的瀏覽模式，到底要怎樣才能分辨呢，其實有個簡單的方法，就是「網址」。

一頁式網站的特點就是可以在一個頁面裡瀏覽全部的資訊，點擊導航欄的按鈕也只是跳到該項目的區域，並不會開啟分頁或是更換網址，所以如果不太曉得什麼是一頁式網站的朋友，可以多多瀏覽網站，觀察該網站的網址，看是不是一頁式網站喔。

之前艾爾森數位部落格有PO一篇【淺談當下網頁設計趨勢】的文章中，有詳細的為各位介紹其他網頁設計模式，也有提供範例給大家參考，歡迎有興趣的朋友瀏覽觀看喔。對一頁式網站有興趣的朋友可以詢問艾爾森數位有限公司，將會有專人為各位服務喔。

 資料參考：MY DESY、崴瑪創意市集、深坑兩姊妹麻辣臭豆腐、德國渥客師塗料volvox、上引水產

網站連結：http://www.qredc.com.tw/ (或點選下面圖片)