０５互動式網頁設計作品集－interfacebrain

interfacebrain意圖將網站營造成與觀者大腦的連接點，只要看了他們的網站，就能
為腦袋注入新能量！因此，在網站中設置一個機器人，名為ｂｒａｉｎｂｏｔ－腦袋
機器人，只要進入到ｂｒａｉｎｂｏｙ畫面，機器人就會自動玩起彈珠台式的遊戲，
畫面左上方會出現電力，必須要維持一定的電力才能讓機器人繼續運作，因此畫面中
會出現提示，觀者必須瀏覽網頁中的各項作品集，才能充飽電力，讓腦袋機器人繼續
運作。好像在向觀者傳達：瀏覽我們家網頁設計師的作品式讓您腦袋充滿創意能量的
好方法！賦予觀者觀看動機，並基於好玩的心態前往瀏覽其作品集。

↑index，選單清楚簡單，並放上配色可愛且引人注目的腦袋機器人。

↑點選ｂｒａｉｎｂｏｔ進入到機器人遊戲中，電力標示在左上角，機器人目前擁有
三格電力。機器人會自動跳出食物當彈珠，在機器人的身體禮滾來滾去，碰到不同機
關會有不同分數，機器人的嘴巴會顯示目前的分數，機器人沒有電時，便會停止產生
新彈珠。

↑ｂｒａｉｎｂｏｔ頁面下拉後會出現機器人的下半部。此時，機器人的電力已經用
完，因此出現咖啡色標示，上面寫道：請藉由瀏覽網頁設計作品補充機器人所需電力。

























↑設計作品區分成ｂｙ　ｄａｔｅ、ｍｉｃｒｏｓｉｔｅ、ｂａｎｎｅｒ、ｍｉｓｃ，
用機器人零件的意象堆疊在畫面中，可以各別點選觀看，其中也設計了不少網頁小廣
告，即使網頁已經撤下，也貼心的提供資料畫面供觀者欣賞。

↑在預覽其作品同時，左上角的電力會一格格恢復，累積到足夠的電力便又可以讓腦
袋機器人動起來了！

結論：我非常喜歡這個網頁的配色，善用顏色分類的同時，又能搭配出繽紛的積木零
件意象，並且以腦袋機器人為發想，賦予觀者一個瀏覽作品的目的，可以增添觀看動
力並達到互動效果。以富有童心的彈珠台遊戲搭配機器人造型，告訴你－該讓你的腦
袋充充電囉！讓我們一起來為腦袋注入新能量吧！



interfacebrain