PriYuzu

2011年3月30日星期三

まいにちテレビ　まいにちワンセグ。

SONY
『まいにちテレビ　
まいにちワンセグ。』

SONY 公司幫自家出產的一系列商品製作了這個宣傳網站，目前商品都已經停產了，功能都是可以利用ワンセグ(ONE SEG)收看日本當地TV的隨身產品，因此網站名稱叫做まいにちテレビ　まいにちワンセグ。也就是「每天TV，每天ONE SEG」的意思。

↑ 網頁一開始是一疊的月曆，月曆會一張張的飛散出畫面，再進入下一個畫面。

↑ 畫面出現一張畫著插圖人物的紙張(撕下來的月曆)，可以選擇是否靜音或是撥放背景音樂，當滑鼠箭頭移到on/off的選項時，上面的對話框會變大，下面的on/off則是會變黑，都有做變化，且在一開始就讓人選擇聲音的on/off，讓使用者不會被突來的聲音嚇到，是貼心的小設計。

↑ 選擇完聲音後，網站一開始有一段話出現(網頁的一開始動畫)，但是停留的時間不會太久，而且就只有那段話，網站還是可以點選左下方的スキップ(SKIP)略過。

↑ 首頁會出現一本月歷，月曆會快速的一張一張撕下來，當初的設計是根據上面寫的時間日本平成20年12月的時間，每天做為更新讓人感到新奇有趣，不過現在已經過了當時的時間，月曆直接會快速的撕完到最後一頁。因為有效期間已經過去，所以可以直接點選月曆旁邊的對話框，瀏覽12月份31天的每一天內容。

↑ 閱讀方式很簡單，以畫面正中央為主，滑鼠往左右移動，一整列的日曆紙會跟著移動，方便挑選喜歡的日期來看。也可以點選對話框回到之前的整本月曆，或是點左下角的字重新進入網頁，右下方則是其他次頁，所在的網頁會呈現黃色字體，當然也可以重新關閉或開啟聲音。

2011年3月23日星期三

FamilyMart - OnePiece 時光奇機

↑ 本周網頁分析的"新鮮"貨為最近推出的全家便利商店的新網頁，是配合近期集點活動所設計的網頁。由於活動產品和動漫航海王合作，在進入畫面時會有可愛的方向盤船舵旋轉讀取，整體的網頁呈現是漫畫形式。
另外，畫面中右邊的藝人納豆和阿Ken兩人都擺動，主要的公仔圖後面也有光芒散發的動畫，旁邊的箭頭和把手也在閃爍晃動。

↑ 網頁的第一部分是「公仔介紹」，介紹說明用對話框呈現，畫面中在閃爍晃動的箭頭和把手，原來只要滑鼠一進入把手範圍內，公仔小人(魯夫)就會跟著把手旋轉。

↑ 同一個介面可以選擇不容的人物介紹，都在下方的漫畫式小分隔，滑鼠移入小分隔會上升。

↑ 接著第二部分是「集點機制說明」，同樣也是用漫畫的形式，但是分鏡的方式不同。在阿Ken人味的對話框內有四個選項，點選後會跳出小視窗提供閱覽，背景會調暗來幫助閱讀。

↑ 第三部分是「廣告TVC」，總共有三個廣告可以播放，廣告在畫面正中，有邊還可以將喜歡的廣告推薦到噗浪、臉書和推特三個地方。

↑第四部分是「冒險大頭貼」，主要是跟瀏覽者互動的部分，這頁的收尋、立即上傳、實境遊戲的選項，都做了可愛的晃動，就像上課老師說的一樣，晃動的按鈕真的會很想去點選他！可愛又吸引人。

↑ 畫面中大家上傳的照片，都可以點選來看，都會在畫面正中央出現小視窗。

↑ 如果要自己製作圖片的話，都可以輕鬆製作，只要點選立刻上傳的箭頭標示，就會有小視窗一步一步進行活動。選擇好照片的話就可以挑選喜歡的人物角色，照片還可以調整大小和上下左右，在來只要打上對話和暱稱就OK了，確定送出就可以在網路看到自己製作的照片漫畫了。

↑ 另外一項即是利用手機進行的擴增實境活動，畫面進行在右側的分鏡內。(礙於手機過於低階，這種活動我無法參加(遠目)，有高階手機的人再自己去試玩吧)

↑ 最後一項才是「首頁」，他的安排方式和先前的四項有些不同，前面四個部分都是同樣在畫面正上方有選項可以換頁，首頁則是安排在中間偏上的部分，而首頁用了很多有趣的對話，畫面上的公仔角色滑鼠移過去都會旋轉和出現小對話框，非常可愛。

整體的網頁結構很完整，雖然漫畫風格強烈，但沒有特別突出的部分，呈現的方式都是兩種方式，一種是在主要的分鏡、畫面最大的主視覺區塊上切換頁面；另外一種是跳出額外小視窗
，背景暗掉的形式，沒有更有趣的作法。優點是宣傳效果極佳，活動清楚讓人了解，也利用網路上串連的優勢，漫畫風格的樣式也很有趣。

(網絡圖)

Website: http://event.family.com.tw/onepiece/#/index

2011年3月16日星期三

Free Stitch

Free Stitch - quality life with you -

↑ 這是專門提供狗狗用品的購物網站，進入網頁時會以橘色色塊由上往下降，隨著讀取進度的百分比增加畫面中的比例，接著直接進入主頁。

↑ 主頁畫面中上方列為選單列表，呈現方式以簡單的文字呈現，選單下方為主要畫面，主要以狗狗穿搭的服裝或是使用這家網頁產品的照片做為背景，而且會切換不同畫面。

每張照片的風格都具有質感為產品加分不少。

↑ 選單CONCEPT點選後就會於主畫面出現小視窗。

↑ 選單ITEM點選後，會出現一條橘色小選單，網頁將商品做了清楚的分類，讓瀏覽著可以根據分類做切換，更加快速的找到合適的商品，省去顧客尋找的繁複工作。切換時也會有細膩的變化表現。

↑ 購物網站的重點就在於瀏覽商品，也是一樣在主畫面跳出小視窗呈現，小視窗的左右兩側還有PREU和NEXT 可以切換其他商品，也就是上方的選單可以自由挑選，而小視窗則是可以前後瀏覽。如果對商品滿意還可以點選MORE將會進入到更詳細的購物網站。

↑ 另外有更詳盡的訊息的購物網站，商品與這邊網站相同。

↑ 另外網頁最精緻的地方是有大量的相片可以觀賞，在GALLERY中會出現上方一排的小點點，這些小點點就是網頁大量的照片，每張照片都是狗狗使用產品的樣貌，也都是網站本身可以購買到的產品。選點點會出現照片的縮圖可以觀看。

↑ 網頁還提供桌布、部落格貼紙、螢幕保護程式。

↑ 桌布

↑ 部落格貼紙還可以設計喜歡的色彩。

↑ 螢幕保護程式

↑ 聯絡方式，一到選項時會轉為橘色。

觀察完整個網頁後，可以發現網站用橘色做為主要色彩，在小細節內出現並且搭配得剛剛好，也營造出溫暖溫馨的氛圍，與網站的照片相呼應。網站的整體很完整，還有可供瀏覽者下載的附帶價值，通常會讓人停留更久。大量的相片是網站的特色之一，可以透過照片讓商品更具價值，看完連沒有狗狗的我都有了想買的衝動了，我覺得是很棒又有氣氛的購物網站。

Website: http://www.freestitch.jp/

2011年3月9日星期三

BEYES 7days coordinate

↑ 這是一家網購平台的期間限定活動網站，利用一星期七天的概念來製作整個網頁內容。
首頁中有七張書籤懸掛在畫面裡，各代表了一星期的每一天，每一天有搭配好的服飾和主題，畫面主要風格清新淡雅。單滑鼠游標一到指定的書籤上時，書籤的顏色會有變化，點選後即進入七天的其中一天。

↑ 選則其中一天後，進入新的畫面，畫面中背景以插畫風格呈現，但是顏色過淡的字體在閱讀上比較不容易，畫面位置會隨著視窗大小做改變，左邊以像標籤紙的樣子各自連接其他的日子，也有回到首頁(Top)或是前一頁(Prev)，最右邊也有做下一頁(Next)標籤紙按鈕，前一頁(Prev)和下一頁(Next)的功用是可以直接的切換到前一天的服飾或是後一天的服飾，瀏覽者可以自由選擇喜歡的方式瀏覽。

↑ 仔細觀察人物的下方有四個小點點，這四個小點點表示人物有四種動作呈現，畫面中的人物會自己不斷切換這四個動作，但是當瀏覽者自己點選下面的小點點時，就會是你所指定的那個動作了，但是還是會自動切換喔！一開始不太容易看見四個小點，但是設計者有在小點做小變化，就是當輪到那個動作的小點時，小點旁邊會有旋轉的圈圈，這時才容易讓人明白這個點點的用意。