[ 設計記錄 . 網頁設計 . 分析 ] - 出色的產品網站 - NIKON 、 jumo
以下介紹最近喜歡的兩個產品網站
1. NIKON
( 資料來源 ) http://shop.nikon-image.com/nikon1/nikon1aw1/
NIKON為這款「nikon1aw1」所製作的滾輪視差網站
一直是令我印象深刻的一件作品
一開頭先呈現了該款機型的全貌
一直是令我印象深刻的一件作品
一開頭先呈現了該款機型的全貌
並且在機身上加上水滴、背景有水波
暗喻該款機型有防水功能、能夠在水中拍照
這個網站整體使用藍色色系 加強使用者對於此款相機最大防水特色的印象
暗喻該款機型有防水功能、能夠在水中拍照
這個網站整體使用藍色色系 加強使用者對於此款相機最大防水特色的印象
框框的形式也與相機視窗框的意象相符
第二階段開始以情境形式來強化介紹該款相機的優點
首先是防水
進入這個分鏡時，相機還是從上方掉下來
掉進入水裡的感覺不是很死板的速度
而是先快速掉下
進入到水 ( 圖面上彎曲的透明圖層 ) 時 會有被緩衝變慢的感受
非常擬真的感覺
接下來是耐衝擊、
防塵
( 這鏡在下移時，沙還會慢慢增多到相機的表面 )
抗寒
第三階段是以七點來詳細介紹相機本身的細節功能
點小圖會出現如右圖的大張產品圖片
第四階段將科學原理以圖表方式深入簡出解釋
該款相機如何能夠在水中拍照、且實際展示拍照、拍攝的情形
( 細節的魚ICON 也緊扣防水相關主題的感覺 )
最後階段將科學原則是又將一開頭的可購買連結再次出現，
以及推出一些可以搭配購買使用的小配件
從一開始暗喻、氛圍營造
↓
特點介紹
↓
細節功能
↓
防水實測案例
↓
購買頁面+小配件推薦
到底部的潛水員與小魚營造到海底、網頁結束的感覺
分鏡豐富並且有趣的介紹這項產品的特點
在美術部分也看得出花了很多巧思設計
在細節 ( 小icon、滾動速率擬真、色系背景暗喻 )上的處理都非常細膩
2. jumo
( 資料來源 ) http://www.fontwalk.de/03/
( 資料來源 ) http://www.fontwalk.de/03/
JUMO是一款可摺疊的檯燈
在網頁一開始的時候會出現短暫的動畫
會先繪製 LOGO後 放大線條的部分、並且視角前進進入主頁面
一開始便令使用者對該品牌有第一印象
在網頁一開始的時候會出現短暫的動畫
會先繪製 LOGO後 放大線條的部分、並且視角前進進入主頁面
一開始便令使用者對該品牌有第一印象
在第一鏡時，便以滾輪視差的方式將產品特性 ( 可伸縮 ) 這點強化表現出來
第二鏡傳達出也有白色款的訊息
當滑鼠移過去時，該張圖片還會有微微往前的視覺效果
這個特點有點類似在剪影片時，可以讓靜態照片串接時，不會有停住的畫面
感覺在每一鏡都有再跑動
另外照片向前的速度緩慢，也賦予這個產品一種沉穩的印象
第四鏡以兩色同存在同一視窗畫面，點進後可以看產品特色的介紹
第五鏡則再次展視產品的細節
加強質感印象
加強質感印象
第六鏡拆解燈的零件
俯視角製造一種秩序感
俯視角製造一種秩序感
最後一鏡則附上聯絡資訊、以利購買或合作
JUMO網站結構如下圖
品牌印象
品牌印象
↓
產品可伸縮特性
↓
使用情境
↓
產品細節
↓
購買聯絡資訊
最後令文字聯絡資訊來結尾
nikon 的網站強調防水特性、且以豐富多樣的視覺手法陳述
( 滾動視差 實境案例 暗喻手法 )
而 jumo 的燈則呈現一種寧靜平合的氣氛
( 像是緩慢的圖片放大視角前進、簡潔的圖片、簡約的無彩色系 )
以上兩個案例所使用的方法不同
但設計者能夠根據產品特性設計出最合適的呈現手法
留言
張貼留言