[ 設計記錄 . 網頁設計 . 分析 ] - 出色的產品網站 - NIKON 、 jumo
以下介紹最近喜歡的兩個產品網站 1. NIKON ( 資料來源 ) http://shop.nikon-image.com/nikon1/nikon1aw1/ NIKON為這款「nikon1aw1」所製作的滾輪視差網站 一直是令我印象深刻的一件作品 一開頭 先呈現了該款機型的全貌 並且在機身上加上水滴、背景有水波 暗喻該款機型有防水功能、能夠在水中拍照 這個網站整體使用藍色色系 加強使用者對於此款相機最大防水特色的印象 開頭有三個小圖片連結，能夠連結到購買頁面 框框的形式也與相機視窗框的意象相符 第二階段 開始以情境形式來強化介紹該款相機的優點 首先是防水 進入這個分鏡時，相機還是從上方掉下來 掉進入水裡的感覺不是很死板的速度 而是先快速掉下 進入到水 ( 圖面上彎曲的透明圖層 ) 時 會有被緩衝變慢的感受 非常擬真的感覺 接下來是耐衝擊、 防塵 ( 這鏡在下移時，沙還會慢慢增多到相機的表面 ) 抗寒 第三階段 是以七點來詳細介紹相機本身的細節功能 點小圖會出現如右圖的大張產品圖片 第四階段 將科學原理以圖表方式深入簡出解釋 該款相機如何能夠在水中拍照、 且實際展示拍照、拍攝的情形 ( 細節的魚ICON 也緊扣防水相關主題的感覺 ) 最後階段 將科學原則是又將一開頭的可購買連結再次出現， 以及推出一些可以搭配購買使用的小配件 從一開始暗喻、氛圍營造 ↓ 特點介紹 ↓ 細節功能 ↓ 防水實測案例 ↓ 購買頁面+小配件推薦 nikon這個網站從相機掉入水中開始介紹 到底部的潛水員與小魚營造到海底、網頁結束的感覺 分鏡豐富並且有趣的介紹這項產品的特點 在美術部分也看得出花了很多巧思設計 在細節 ( 小icon、滾動速率擬真、色系背景暗喻 )上的處理都非常細膩 2. jumo ( 資料來源 ) http://www.fontwalk.de/03/ JUMO是一款可摺疊的檯燈 在網頁一開始的時候會出現短暫的動畫 會先繪製 LOGO後 放大線
