Heineken★就是要海尼根

Heineken★就是要海尼根

http://www.heineken.com.tw/

這次介紹的是海尼根的台灣官網，

我覺得做的比美國官網做的好噢。

裡面有很多小botton互動非常的用心，

就讓我們來體驗Heineken吧!!!!

歡迎頁，

你滿十八了嗎？

海尼根的歡迎頁以幽默的表現這個問題，

海尼根or牛奶，是或否呢？未滿十八不可飲酒唷!!

主頁面，

上方為主選單，右上角可以選擇/控制音樂(下面有介紹)，

左邊的地圖大瓶子可以轉動圖片捲軸，

卷軸裡面藏了很多Heineken商品，

點選商品可以直接進入暢飲海尼根的商品頁面裡。

我非常滿意的部份，

這是Heineken的音樂選單唷!

目前總共有599首供選擇，還可自己上傳，

無聊想聽音樂也可以掛著聽!!!超貼心!!!

主選單

是以裝啤酒的感覺下去設計，

我很愛這互動玩意兒，

一直來回玩動很像人浪，不!啤酒浪!

海尼根大牌檔的分頁

點了瓶子後會出現幾個小按鈕，

點了小按鈕後會出現海尼根的各種炫耀性廣告=_="

暢飲海尼根分頁

這也是這網頁很有趣的互動設計之ㄧ，

這概念來自那一個男人一直從冰冷的桶子挑出海尼根的廣告，

當你點選產品，手就會抓出那個商品(如下圖)，

有點像老師那個手投錢給小豬的作業= =。

海尼根大世紀的分頁

可以點選左右鍵預覽，也可以直接點選年份，

我覺得下面那排的年份表做的很有質感，有種追憶的感覺!!

台灣海尼根的重視態度，

這頁也是互動式，點右邊的字，星星的角和光芒會有變化。

這個頁面的手法也和前面那個很相似，

點選小綠人的遵守條款，小綠人就會舉手發誓，

我覺得很可愛!!!

下載區的桌布部份，設計成一排的相片，

可以旋轉選取樣式，然後挑起下載，

我超愛他們設計的小互動!!!!

螢幕保護下載

左邊就是一個電腦螢幕模擬的樣子，

我自己也下載來用了，

螢幕保護還有音樂喔!

音樂也像網頁裡面一樣可以供選擇。

電腦圖示下載

也是有設計互動式的botton，

只能說作者真的很用心。

MSN圖示的下載，

也是設計互動式的，

點選欲下載的圖示會出現在左邊的模擬圖裡。

養娃娃doll-doll.com。

因為老師課堂上有提及小工具，

令我想到之前養的這款小娃娃，

這次介紹的是一款由大陸貓子工作室設計的養娃娃小遊戲，

可以創造角色放在部落格或網誌裝飾飼養。.

http://doll-doll.com/

設計者貓子工作室的部落格。

http://hk.myblog.yahoo.com/postgal-comics

doll-doll.com的首頁，

可以夾取喜歡的娃娃款作角色創造，

目前有三種角色可以選擇。

輸入基本資料，

並做娃娃的微調，你就可以創造一隻獨一無二的doll-doll囉。

( 左邊的手電筒可以小修顏色，右邊還可以選擇娃娃的小寵物唷。)

嘿!決定了!夾取。

接下來選餐車，有四款可以選擇!!

不同的餐車會影響之後餵娃娃的食物。

確定後就可以複製語法，貼到自己的Blogger上了!

從自訂→網頁元素→新增小工具→HTML/JavaScript
將第三方功能或其他程式碼加入您的網誌。

把複製下來的語法貼上點儲存。

你專屬的doll-doll就會出現在你的Blogger裡面了!!

可以不斷的給doll-doll餵食，等到達一定的量時，

doll-doll就會收到小配件禮物，

但是注意，不能餵下圖的大便，

會影響doll-doll的健康，餵多了會呈現垂死狀態，

有心人，愈想看doll-doll的垂死畫面，可以耐心的餵看看(笑)。

吃飽了，可以收禮物囉。

輸入密碼，會有禮物可以選擇。

點了金元寶，

↓之後就會出現在doll-doll的手上了，多可愛!

另外，網站裡面還有很多小圖和桌布可以供下載，

底下還有開關音量的選項。

我覺得是Flash配件裡面我比較喜歡的小遊戲之ㄧ。

最喜歡的書法家--米芾

米芾的書畫世界 The Calligraphic World of Mi Fu's Art
國立故宮博物院 數位博物館米芾的書畫世界
http://tech2.npm.gov.tw/mifu/



網站架構


首頁，
有中英文版和無障礙版供選擇。


點選中文版，
彈出一個網頁視窗播放水墨動畫，後出現主選單。


版面的設計非常特別，
雖然是歷史題材卻適當的融合科技感。


點選主選單內米芾的生平，
背景的地圖會因為米芾的遷移而有所移動，
畫面中的年份也會跟著改變，富互動感。


繼續往地圖上的地點點擊下去，
會出現米芾這時期的代表作品，還有相關典故。
點選相關資料，也會有更多的學習資訊喔!


除了作品的局部圖，
還可以點擊做放大縮小的檢視，
底下還有貼心的小註解喔。


放到最大，可以有單字釋文。


還可以跟米芾其他作品的字一個一個做比較，
光是這點就真的很佩服架構網站人的細心啦!
右上角還可以搜尋單字喔。


如果覺得網頁設計的變化太大會讓你眼花撩亂的話，
作者還貼心的提供無障礙版，
讓你清清楚楚了解米芾!!

美語、課輔、數理，圓周文教機構

圓周文教機構

http://www.perimeter.com.tw/front/bin/home.phtml

由於這次接到幫美語安親班整理網頁的工作，
所以我找了一些參考網頁當做我的小目標，
以下是我找到我覺得合適的，並是我能力所及的網頁之一。
雖然仍有可以再改進的地方，
但我覺得他的架構分類，整理的很乾淨，值得學習。


解析度1024*768

歡迎頁的部份
用flash設置按鈕互動，照片也會變換，
右邊跑的是最新消息，可點閱。


版型的設置是簡單明瞭的iframe，
邊邊再用補習班的資訊logo裝飾。


分頁按鈕的地方，
是層層的分下來，不會給人雜亂的感覺。
架構清楚明白的呈現。

以前一直很煩惱地圖標示的問題，
赫然發現Google其實很好用的!
直接內鑲可以解決很多的麻煩，
又可以很方便的整頁叫出來看。

整個網頁的色調大致很統一，
算是我看了很多台灣安親班網頁顏色較不雜亂的一個。

如果我要再改進，

可能有些圖片和背景我會在微調，

感覺會比較有質感一點。

LUX--柔滑美肌首選

http://www.lux-star.com.tw/index.html

LUX 官網


首頁--
製作有點電影院的感覺，
右上角可以連接三個主分頁，
海報、左下小圖、中間的按鈕，各可連接小影片(下圖)和次分頁。


首頁的小影片--
主打商品的促銷影片。


Hair分頁--
各種產品介紹，又分為四個部份；前兩個是flash的產品簡介(如下圖)
第三個選項可以連接分頁News分頁，最後依個是促銷用的小心測。


產品介紹--
一個環狀系統，可以前後選取，或離開重選。


Body次分頁的主頁--
這區域是區隔LUX沐浴乳的廣告，前面則為洗髮乳；其中又分為五個小頁面。

第一頁的梗--
點代言的名模，有代言的影片可觀賞。

第二頁--
和前面心測類似的算命小遊戲。

第三頁--
產品介紹，可選取觀看。


第四頁--
更多名模推薦影片。


第五頁--
幕後花絮。


秀髮光環系列頁面--
主要是以此系列產品為主軸推銷，底下又分為六小頁。