0７ 簡單大方的網頁設計公司-12design

１２ｄｅｓｉｇｎ是一個日本網頁設計公司，整個網站幾乎只有簡單明瞭的首頁，所有資訊都清楚的在一個頁面中呈現。而設計公司最重要的就是作品，因此１２ｄｅｓｉｇｎ把觀者最想看資訊，用清楚大方的排版方式直接呈現在首頁，沒有選單，純粹只有作品。１２ｄｅｓｉｇｎ身為網頁設計公司，並沒把自己的網站做的複雜花俏，而是將重點拉回到作品身上。重點應該在於這個設計公司設計出來的作品如何，做過哪些類型的網站，而不是在網頁公司本身的網站有多麼華麗，此種優雅且大方的呈現方式令人讚賞。

↑網站首頁用模糊的方式，將所有作品整齊排列出來，觀者鼠標移至圖上才會顯示清楚圖像，要讓觀者在這麼多作品中一次只注意一樣作品，這確實是個好方法！

↑而在１２ｄｅｓｉｇｎ ｌｏｇｏ的正下方有兩個按鈕，可以切換瀏覽模式，第一張圖是處於正常瀏覽模式（ｎｏｒｍａｌ）如果切換至拼圖模式（ｐｕｚｚｌｅ），作品就會以拼圖遊戲的方式呈現，為了怕難度過高，貼心的在拼圖中標上數字，照著數字拼將會容易許多。但是這種拼圖模式的缺點是，如果拼不出來，便容易造成觀者的焦慮感或產生不耐煩，所以這個設計純粹只是增加互動或讓觀者感到新鮮的小遊戲，如以可讀性來審視，並不是很好閱讀。

↑親自試玩了第二列左邊數來第二個，發現要拼出完整作品並不容易，且需要有時間及耐心，因此最後沒有拼出結果就放棄了。（觀者產生不耐煩感）

↑作品非常優秀，且畫面簡單優雅，閱讀起來非常舒服。


結論：

有時候簡單大方的版面設計，反而更能凸顯其重點並增加質感這種簡單大方的設計。１２ｄｅｓｉｇｎ的極簡哲學，成功的為其作品加分！

12design

06 五彩繽紛的襪子專賣店-Tabio

“Tabio”是一家襪子專賣店，店內的襪子五彩繽紛，樣式各異，實用而不失時尚，光是襪子也能有如此多樣的發展，令人不得不配服日本人所謂"術業有專精"的精神。

而Tabio Slide Show這個網站，顧名思義即是在展示他們的商品，架構非常簡單，主要是以影片的方式，打破傳統展示商品照片的靜態方式，Tabio讓模特兒雀躍的換上他們各式各樣的襪子，在影片中以動態方式展示一雙雙的襪子，以輕快的步伐、順暢的舞姿、清透的窗簾、透明感的背景配樂，放入輕盈、柔順、透氣等意象，直接的以動態影片將多樣化的商品、優良的品質、百變的穿搭法等，一次傳達給觀者，讓觀者一邊觀看影片一邊物色自己喜愛的款式，引導觀者點選連結，進入到Tabio的線上商店為其主要目的。

而動態影片展示商品最棒的地方是，觀者完全不必像逛拍賣網站般一張一張點選照片，也不必看著龐大且複雜的分類思考該從何瀏覽起，Tabio已經完全幫觀者安排好了，觀者只需要輕鬆愉快的瀏覽影片，享受著Tabio精心為您營造的氛圍即可!以真人模特兒搭配清新明亮的場景，流暢的串起展示順序，讓觀者看完影片便能快速且徹底了解Tabio的商品種類及特色，且觀看影片展示的同時，也會細心的流下停格時間，清楚標名價錢、連結，只要觀者對商品有興趣，可以馬上點選連結進入Tabio的線上商店選購，同時，影片會細心的切換至暫停模式，觀者瀏覽完線上商店後，仍能從中斷處繼續觀看影片

利用影片強制觀者一次接收完整的品牌資訊的方式，並不會對觀者產生壓力，反而讓觀者更輕鬆自在的瀏覽完商品，比起讓觀者自行隨意點選商品容易產生的厭煩感，以影片展示的方式更可以增加觀者停留於網站的時間，對商品能更加透徹的了解，是一種非常成功且值得學習與發展的展示模式!

影片一開始，用手套上小襪子 ，且示意觀者用滑鼠將右邊的襪子拉至左邊的襪子身旁，他們便會開始他們的小小冒險之旅，將Tabio清新可愛的風格表露無遺。

冒險的開端-安排兩位自然派氣質女孩往屋內探頭，開始他們今天的快樂冒險!

他們在屋內蹦蹦跳跳，畫面流暢的帶出了兩個女孩輪流展示不同款式的襪子，適當的停格並
出現價錢與註解，如有興趣購買便可直接點選"Buy"連結進入Tabio的線上商店。

影片中也展示了許多種混搭穿法，展示品牌多樣穿搭的可能。

全身的穿搭法也一併展示，增加影片的變化 ，也讓觀者對產品產生更大的興趣。

對商品有興趣，點選"Buy"進入線上商店，影片還會細心切換暫停模式，靜待觀者回頭繼續觀看影片。

線上商店的展示照片也是動態的，會簡短的播出模特兒在影片中跳躍的動作，令人忍不住留

連忘返。

整部影片中展示了非常多雙襪子，讓人看了心情愉快，且開始對品牌產生興趣!

最後，帶到兩位女孩對著觀者行禮的畫面，禮貌且優雅的結束影片並感謝觀者的觀看。

片尾不忘再將每雙襪子整理成表格，清楚明瞭的讓觀者針對每雙襪子仔細觀看，實是一部完整又成功的影片!

結論:

整部影片沒有用到任何對白，大量運用象徵手法，無論是眼神交流、肢體動作、場景規劃等，完全以畫面說話，卻能精準的傳達其品牌形象，並給人舒適又時尚的感覺。雖以動態表現，卻不忘在最後加上總整理，動靜兼顧的呈現了Tabio的商品，確實是非常值得學習的商品展現方式。

Tabio Slide Show

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

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

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

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

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

























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

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

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



interfacebrain

04 設計師個人網站－bornwithdesign

這次介紹的網站是南非設計師BRETT WHITE的個人網站－bornwithdesign，其資訊及作品表現方式大量使用互動裝置呈現，而且操作簡單，大致上只細分為四大塊－作品、專長、簡歷、聯絡方式。整站採用桌面實景式的風格設計，細節處理非常細緻，整體的過渡和效果出眾，場景變換流暢，推薦給大家欣賞。

↑網頁以保險套為視覺焦點，象徵著設計師的是為設計而生，也愛著他所生的設計，此站所收錄之作品都是設計師努力生出來的寶貝。

↑滑鼠移至保險套包裝上，便會出現清楚的四個大分類，分別是作品、專長、簡歷、聯絡方式，還會出現小蝌蚪在旁游動。

↑作品介紹中，以ｉＰａｄ螢幕做框，模仿桌面效果隨意放置了一些小文具，每樣都很精美，點選鉛筆還會滾動呢！

↑聯絡資訊以記事本呈現，一樣是非常逼真且可愛的設計！在此頁面中，鼠標會化身成原子筆，非常有親切感，左邊頁面還可以留下問題與聯絡資料，並寄信給設計師。

↑專長及服務項目則以公事本呈現，點擊桌邊散落的零錢可以將其收整齊，資訊整理的清楚明瞭且非常詳細。

↑設計師的３Ｄ作品欣賞

↑設計師的攝影作品欣賞

↑設計師的攝影作品欣賞

結論：此網站活潑生動，而結合生活物品來呈現資訊之方式也讓人倍感親切且充滿趣味，重要的是資訊使用顏色與區塊整理的有條不紊，讓觀者一目了然。其資訊整理與呈現方式值得我們學習！

bornwithdesign

03 空間設計團隊－Oval Design

oval design 香港空間設計探索隊，力求創新，突破傳統框框，以全新角度設計、規劃和籌辦

各類型展覽會、推廣活動和室內設計等，開拓令人意想不到的視聽國度，為客戶創造驚喜

和難忘的成果。其團隊由超過20年豐富經驗之設計師Dennis Wong與Dominic Kam組

成，籌劃超過２００個高素質展覽，為經驗豐富且廣受稱許之設計團隊。

↑oval design公司以空間探索隊自居，因此網頁設計風格以太空探索為主題，融入有趣的
動畫進入網頁會以火箭發射的方式介紹此團隊，兩位太空人分別代表著兩位設計師，也象
徵著他們將會為客戶設計出創新創意的空間展場設計作品。

↑準備發射太空船，這時會出現兩位設計師簡單的資歷介紹。

↑進入宇宙中，選單列以星球方式呈現，觀者必須使用鍵盤控制太空船，如同遊戲般，非常有趣。

↑只要飛行至星球附近，就會出現白色框框，飛入白框即可進入選單。

↑右上角還有搭配小圖示，在探索太空時會不時出現在空間中，可以操作太空船得到物件，增添網站趣味性。

↑Oval Design空間設計團隊之作品，資訊站之設計。

↑Oval Design空間設計團隊之作品。

↑Oval Design空間設計團隊之作品。

↑Oval Design空間設計團隊之作品，為可口可樂博物館。


結論：Oval Design空間設計團隊之網站呼應設計師們的探索精神，為求獨特、創新，
不斷的在空間中探索，如同在宇宙中航行，充滿無限可能，這就是此設計公司欲傳達
的精神。背景音樂如同探險隊出征，在大面積的黑色中配置幾彩鮮豔的星球，並在其
中放置作品照片，讓他們的作品顯得更為亮麗奪目，如同在廣大宇宙中的幾顆明星。
且雖有融合互動式遊戲，但操作起來並不會難以控制或找不到資訊，恰到好處的應用
了遊戲的元素，卻不會過度影響到資訊的表達。
ovaldesign