以相片為主軸的網站：設計不敗的原則

相片是網頁裡常用的元素之一，尤其是製作以相片為主角的網站時，精美的相片更是必要的網頁素材。在將相片放入網頁、進行版面編排時，若能掌握相關的版面、
配色技巧，將可讓網頁呈現的效果更上層樓。以下就為你說明範例網站的設計原則。



均衡圖文比例

當網頁上只有文字時，會讓人覺得枯燥；如果都是圖片，則無法傳達足夠的資訊，為了兼顧兩者，我們決定採用圖片、文字比例均衡的版面來呈現首頁。以範例網站
為例，我們想要營造輕鬆的旅遊氣氛，又不想失去行程資訊的完整性，那麼圖文比例各半的設計將是最適當的。

只有圖片，能傳達的資訊有限

只有文字，讓人提不起參加的興趣



實例賞析

畫面引用自 http://www.china-airlines.com/

航空公司讓人想到旅遊、飛行，也適合用圖文各半的比例來呈現




畫面引用自 http://www.gyu-kaku.com.tw/

將最新消息列在首頁，按下右側照片下方的縮圖可變換圖片，是提高與瀏覽者互動性的好方法

矩型元素搭配棋盤式設計

在旅遊攝影網站的首頁，我們採用不浪費版面的棋盤式設計，將大部份的圖片、文字、按鈕都設計為矩形，平穩地配置在版面上，不僅看起來整齊，也達到清楚傳達
資訊的目的。

大部份的圖片、按鈕都採用矩形設計，再以區塊的方式排列在版面上，且運用圓角的修飾技巧，讓畫面看起來更舒適



實例賞析

畫面引用自 http://www.louisvuitton.com/

矩形是最不浪費空間的版面




畫面引用自 http://www.sony.com.tw/

善用棋盤式設計，就能放置為數眾多的選項按鈕，讓首頁達到導引的功能。畫面中還擺放了具有弧度的圖形，減緩矩形元素 4
個直角帶來的生硬感



大小均等的方形照片

在攝影作品頁面所採用的版面是大小均等的方形照片，並在相片四周做適當的留白
(指留有空間的部份，所以不一定是白色哦！)，使畫面呈現出一種高格調、優雅的氣氛。這樣的版面不僅可用來展示照片、作品集，也常用在購物網站，能清楚列
示各種商品。

適當的留白，可呈現一種優雅的氣氛，很適合用來展示照片



實例賞析

畫面引用自 http://www.e-royce.com/

以均等的照片來陳列商品，是購物網站常用的設計手法




畫面引用自 http://www.photost.jp/

如果常逛旅遊網站、攝影網站，對這樣的版面一定不陌生



此外，為了讓瀏覽者能看清楚照片內容，按下照片縮圖還會開啟不顯示工具列的獨立視窗，在設計上也是很常見的應用。

看小圖不過癮，按下縮圖即可將照片開啟在另一個新視窗




按下此處可關閉新視窗



實例賞析

畫面引用自 http://imagenavi.jp/

按下縮圖後，即可開啟獨立視窗來檢視大圖及詳細資訊



其它常見的相片展示版面

如果不喜歡太整齊的矩形排列，也可以在版面上做不同的變化。適合展示相片的版面，除了上述的均等方形照片外，亦可將縮圖放在下方，按下方的縮圖，上方即顯
示大尺寸的圖片；或是將縮圖置於右側，大圖放在左側窗格等。

畫面引用自 http://www.sony.jp/dslr/oto-na-ri/

點按下方的縮圖，上方的大圖就會跟著變換

畫面引用自 http://www.privatelabel.jp/tulipian/

將商品圖散佈整個畫面，移動指標可改變檢視畫面以選擇不同的商品，按下商品圖便會載入大圖及相關資訊



目前網路上這樣的效果大多會使用 Flash
來製作，有興趣的讀者可自行參考相關書籍。

柔和的配色

相片的顏色本來就是豐富、多樣的，在製作展示相片的網頁時，一般我們會選擇較柔和、亮度高或濃度低的配色來製作邊框、按鈕等其它網頁元素，讓觀眾的目光能
自然停留在色彩鮮明的相片上，而不會被網頁上的其它元素所干擾。



在旅遊攝影網站的配色上，我們選擇了 3
種明亮、柔和的顏色，由於其柔和的特性，無論切換到哪一個頁面，都能讓觀眾的焦點維持在精美的相片上。在選用顏色時，你可以如下操作來設定亮度高、感覺柔
和的色系 (以 Photoshop 為例)：

實例賞析

畫面引用自 http://www.laterre.com/terrasaison/

網頁的背景圖片、按鈕都選用柔和的色調，更凸顯相片鮮明的視覺效果

畫面引用自 http://www.kusuribako.jp/

圖片四周的色塊、按鈕全都選用同色系但濃度低的色彩，使相片自然成為視覺焦點