2015年3月20日 星期五

網頁分析_Arcade Fire

這是一個樂團的互動式網站,網頁一開始的loading畫面是一個圓形和正方形會改變大小和位置













接下來出現首頁,從這張開始就可以看到,這個網站風格走向













按下進入後就會播出樂團MV,只要移動滑鼠就可以開始玩玩這個網站的互動裝置















在滑鼠所選的範圍內可以看到比較清晰的畫面,其他部分會有發散的效果,讓畫面更有張力,但是有時候不同照片也會有不同的效果

























即使將影片按下暫停,同樣可以移動滑鼠來製造效果,像這張就是配合不同情境有不同效果

























等到影片播完後,可以進到樂團的官方網站












下圖就是Arcade Fire 的官方網站首頁













這個網站的互動裝置很特別也很好玩,就算對他們音樂沒有認識太多的人,也能透過這種互動方式聽完整首歌,或許就會因此喜歡他們的音樂。

網站連結:http://www.justareflektor.com/









網頁分析_spoiledbrat

這個網站是一個珠寶品牌的網站,幾乎全部的元件都有設置flash,滑鼠移到按鍵時會有一些動畫或小變化

這是他的首頁













接下來可以移動滑鼠例如以下這張就是將滑鼠移到選單上的Earrings,會有耳環的插圖浮上來













點進去後出現的內容也是以flash動畫為主













當滑鼠滑到想看的商品上時,也會出現一段小動畫













點進去之後就可以看到價錢、大小以及成分













雖然這個網站的版型很中規中矩,可是因為最近在學按鍵的三種變化,我覺得這個網站做得算是精緻,值得學習。
網站連結:http://www.spoiledbratjewelry.com/










2015年3月17日 星期二

網頁分析_Reebok

這是一個Reebok的官方網站,一開始的loading畫面就很有趣,是達文西的人體黃金比例












網站的footer也是以紅黑色為主













而整體風格大部分都是採用紅黑兩個主色調,搭配上風格一致的照片使網站有一致性













而捲動滑鼠滾輪就可以看到下一個主題的照片和文字了












繼續往下捲會看到一個大腦的圖案,也是我覺得最有趣的部份













點進去會看到一個像下圖一樣的圖示,圖示下面有卷軸可以點













點右上角的箭頭可以將大腦放大並旋轉

























每個卷軸的節點都是在循序漸進的說明運動對大腦的好處,圖中會有簡單的圖解以及統計資料














有時候還會有一些小插圖


























到後面可以看到大腦活躍以及漸漸變得越來越繽紛的動畫













不想要大腦退化就動起來吧!!

網站連結:http://fitness.reebok.com/international/be-more-human/#/home

2015年3月5日 星期四

Flash vs html5

這個網站是利用互動甚至遊戲的方式讓我們認識flash和html5

一開始的loading畫面就是一個動畫










等loading完之後會看到首頁,接下來只要滾動滑鼠上的滾輪就可以看完整個網站,也可以直接點選最上方的選單,他會直接跳到那個主題













再繼續往下會看到一連串的動畫可以用滑鼠滾輪控制看的速度













接下來會看到一些敘述文字

























接下來就要進入遊戲的部分了,讓使用者比較flash和html5的差別













接下來會有圖示解說













最後這個網站要告訴我們,flash和html5都是很好用的工具,彼此各有優缺點,所以最後比賽的結果是平手

























網站連結:http://www.flashvhtml.com/