總是會安排若要進入秘室空間，就必須來個驗證防護關卡，

提高這私密處有多機密不可任意侵犯，隨科技潮流與時並進，

從起初的『嗶~』一聲刷卡認証過關，之後又有指紋、瞳孔掃描，

到後來的顏辯認，精準的探測臉上細節確認PASS通關，

這給了企業主與消費者之間什麼樣的啟示？

繼續閱讀 »

只要你不是剛出生的嬰兒, 不是在監獄裡, 你就應該有機會上網, 有機會上網那麼你的生活中就一定少不了這些角色 – Banners.
我們從來都只是去認識所謂的網路使用者, TA, 或稱users, 但從來都沒有好好認識我們每天都會接觸到的banner們, 也許你覺得他們不過就是幾個框框, 幾個版位, 但你不知道其實每個banner都各有不同的特徵, 例 如Square Pop-up, Skyscraper等, 每個banner都有不同的個性, 人格, 不同出生背景, 不同的理想, 不同的脾氣, 甚至不為人知的祕密… 繼續閱讀 »

以FLASH方式設計，網站有很多知名品牌的作品包含Web 網頁設計、Print 印刷設計…等，許多小細節都做得很有趣。 繼續閱讀 »

（本篇文章內容已於2010年7月8號做為教育訓練使用，應該算是演講稿，不過呈現在部落格上將會做另外詮飾，對於問答的部份也一律省略，但是大至上內容不會改變太多，講述時間含發問約40分鐘，如果您在閱讀的過成中有任何問題也歡迎留言詢問。）

當我們打開瀏覽器映入眼簾的可能不外乎是YAHOO!奇摩首頁，當然也有其他選項，不過我們就以奇摩首頁來當個開始。下圖左邊是一般打開瀏覽器時我們所看到的畫面，那右邊呢？其實右邊就是網頁設計師眼中的排版與規劃的部份。

你可以很明確的看到右邊有四個區塊，通常我都把單位稱作欄，相信很多設計師也是這樣，外國設計師稱為wrapper，翻譯是包裝、外皮，這樣的一個區塊方式，已經算是現今Web 2.0 模式網站常見的畫面，他呈現出一塊一塊的區塊，不光是在排版上比較有條理，就連在網頁設計製作的過程也變得非常有條理，而當我們把後面的YAHOO!奇摩首頁拿掉，他就僅僅只剩下四個紅色框框，我們先不管內容怎樣，其實四個框框代表的就是四行DIV的HTML Code，這部份稍候會在提到。

我們剛提到YAHOO!奇摩首頁，那是已經有畫面的網頁了，算是後面的結果了，人家説因果因果，有因才有果，我們現在就從因開始看，這個因就是網站形成的原因，也就是網站存在的目的，依照不同的目的會有不同的取向，在這中間彼此的討論就會經過一個Paper Prototype的過程，也就是網站企劃發揮他最大效能的階段，他需要產出網站企劃書，讓設計師明白整體網站架構與大致上的規劃，這些過程對網頁設計流程來說都算是前期規劃，以後有機會在細說這個部份，當規劃完成後就近入了設計階段，也是屬於網頁設計師的曼妙舞台。

對於網頁設計師的設計過程我想因人而異，絕對沒有一個標準流程可以依循，但是確有一些準則可以參考，對於網頁設計來說，排版在設計過程上算是佔有非常重大比例，每一頁網頁在產生的過程中會有許多設計與細節，在設計方面每位設計師都有他自己的一套方法，但是在細節上常常會是許多設計師為了求快或者不知不覺中就忽略的細項，那對於這些細項有沒有一個快速簡單的工具可以作為協助？其實是有的，打從瀏覽器解析度到每欄的排列，其實都是有一個簡單的輔助工具可以來使用的，這個工具就叫做Guideline，中文翻譯為指引，通常稱呼為格線。其實格線沒有一定的標準也沒有一個統一的規定，一些國際網站或者國內知名網站，較注重的都會設定一套統一的格線標準，確保網站不管在任何情況下，都有一個統一的視覺舒暢度，不會因為國家或頻道切換就覺得文字變得擁擠、標題變得不清的情況，在這裡我要推薦一個我個人非常喜歡喜用的格線系統，叫做960 Grid System。

960 Grid System為什麼是960，不是970、980? 原因很簡單，因為現在目前大部份的使用者解析度還是1024X768，有些人喜歡使用書籤列側欄，或者桌面上有安裝Google 桌面等這些側欄輔助工具，在這樣的情況下使用者的解析度勢必會小於1024，再加上一般網頁設計的背景並不是沒有任何存在的意義，所以保留一些範圍讓背景顯露出來，對整體網頁的設計其實一個很棒的襯托。經過測試與研究，最後他們決定以960像素作為一個標準，制定出960 Grid System，設計出12欄與16欄格線，並提供Fireworks、Flash、InDesign、GIMP、Inkscape、Illustrator、OmniGraffle、Photoshop、Visio, Exp Design樣板可以直接下載使用，甚至還有一份PDF版本可以直接列印並手繪上去，非常方便也非常好用。

既然有了格線系統，當然就要照著格線來做設計，它可以讓你整體的排版呈現的更有調理，不過有個地方需要注意，那就是960 Grid System他只有做直向的格線，對於橫向也請設計師們不要忽略，這也是非常重要的一個細節項目，對於每個頁面的排版因為文字段落有長有短，這個比較難做出一個橫向格線系統，所以務必請設計師們可以注意到這個點。另外對於破格設計的部份，也希望設計師可以照著格線系統來跑，你可以跨很多欄做設計，但是請不要超過邊緣欄位，或者剛好卡在兩欄中間，這其實都不是很好。

現在讓我們來看看排版規劃的部份，上圖是一個單欄式頁面的呈現方式，我們一律都先不考慮內容的部份，就從最簡單的外框來看就好，就如同一開始有提到三個區塊分別就是代表三行DIV HTML Code，跟以前網頁設計師使用表格table切板的那段時間比起來，真的是精簡非常多，也顯得非常容易好懂，讓我們來比較一下國去與現在的寫法到底落差有多大，從下圖就可以明顯的比較出來。

我沒有辦法告訴你左邊有幾行，但是左右兩邊比較起來應該是非常顯而易見，右邊明顯比左邊少很多字母與符號，就是因為右邊這樣的寫法讓頁面的HTML顯得非常簡單易懂，所以現今的網頁設計師漸漸都採用右邊的模式，國外的網頁設計師已經採用這種寫法行之多年了，但是台灣依然還是有許多網頁設計師採用左邊的寫法，這樣的寫法不但在撰寫上需要花費較多的時間，而且維護起來也顯得非常不容易，很容易就發生拿掉一個表格table就導致版面毀損，不管是日後自我維護或是他人維護都需要花費相較右邊模式數倍的時間，更別說需要與程式設計師合作或者team work 設計大型網站所產生的問題了。

而目前網頁設計師還有一個非常有利的工具叫做CSS，它可以與HTML做搭配，從文字到背景亦或是icon圖示定義等等，都可以做到一個彈性非常大的撰寫方式，透過CSS裡的ID與Class，適度的規劃是可以做到頁面修改不須變動任何的HTML，僅需修改CSS文件即可，這對不懂程式的網頁設計師來說是非常大的福音，你不必在擔心害怕因為變動頁面上的某些圖案或排列就導致程式無法執行的惡夢，下圖就是英國廣播公司BBS網站所致定的一些元件組部份，因為BBC有大量的新聞與資訊，所以各個頻道都有屬於自己的顏色標示，透過CSS的制定可以設定出多款的元件組，這樣的一份元件組可以交給任何一個設計師使用，不會產生因為不同設計師導致產出的頻道顏色有色差或色塊粗細不一的窘境。

使用HTML+CSS的製作方式好處有很多，舉凡頁面一致性、元件重覆利用率提高、提升SEO效果等等，好處可以說是說不盡，那壞處呢？壞處可以說都是因為瀏覽器惹的禍，現今的瀏覽器並沒有一個統一標準，所以同樣一個CSS寫法在每個瀏覽器呈現的畫面又會多少有些差異，像是表單的呈現，每個瀏覽器都有自己的樣子，更別說到跨作業系統了！為了減少這樣的「環境差異「，通常在製定頁面CSS的第一個步驟就是先將每個瀏覽器的預設值通通歸零，因為這個部份的CSS是差不多的，所以像是YAHOO!就有在YUI中釋出CSS Reset文件，而有些網頁設計師也有會有自己的一套寫法，我個人曾經使用過YUI的CSS Reset方式，但是使用起來沒有我自己制定的順手，所以目前我還是採用自己的一套CSS Reset方式，有機會在跟各位詳細說明這個部份。

以上就是本次教育訓練的內容，希望對於各單位的夥伴們都可以有一些幫助，有任何問題也歡迎與我討論。

文章出處：草監影像私人頻道

『 you’ve got mail！ 』

簡短的一句話，給傳統的郵政產業重大的一擊，

過往翻開家中的信箱，越是接近節慶時分，

收到親朋好友來信的次數就越頻繁且密集，

閱讀手寫字跡的那份雀躍情緒，感覺貼心的悸動由然而生，

箇中趣味的就是當你抓到1.2個錯字時，臉上一抹淡淡的笑。

而今我們過度依賴電腦鍵盤打字組合排列，透過數位化虛擬傳送，

繼e-mail，取而代之的blog與twitter、plurk、facebook等的微網誌系列，

非關個人的喜怒哀樂、大小芝麻事都可化做數位符碼，

成為訊息罐頭被發佈到網路上，永保新鮮，提供過路客食用。

實體信箱用來接收心情信件的功能已不復見，反倒是各路商家促銷傳單齊聚ㄧ堂，

用折扣數字乞求你能多看它一眼，未雀屏中選的DM只好珠淚暗彈進紙類回收處，

唯一讓你打開信箱的動機，就是當你要繳水電、天然氣、手機等的日常費用。

說句實在的，目前生活中握起筆寫字的時間有多久？

那是不是有想不起某些字要怎麼寫的情境發生？

再慘的是連注音拼字都不知如何是好的時候了，

因為有了文字，人類才可以記錄歷史性重要的時刻，

Pilot認為目前依循打字而發展的書寫方式，

喪失了手寫文字敘述中透露的真摯情感，

結合數位符碼化，創建了handwriting手感文字的網站。

只需註冊登入網站，列印出的紙張中，創造出個人獨特風格的手寫字母，

再經由web cam傳送到網站上，建立客製化英文字母的步驟就完成了，

絕對不會有人跟你有一樣的字跡，朋友若接到手感文字的e-mail，

也會感到驚喜萬分，非制式化字母能帶來的獨特感。

Pilot本身的品牌精神『 handwriting 』也藉此網站重新復甦了，

在網路世界上利用』手感』二字來切入，對此有個可以跟大眾溝通的方式，

想必有一定的難度，因為視覺影像搭上聲音的方式，凝聚性與吸睛度較大，

Pilot熟知品牌的本質做出突破去迎合當今趨勢，這是洞察市場做出的應變，

然而檢視商品在市場上還有多大的成長空間？

我想是新舊品牌都會面臨的課題。

Pilot handwriting：http://www.pilothandwriting.com/en/

文章出處：外星人看廣告

Pseudo’s Daughter Rerub ↓

Eclipse ↓

Madam Nature ↓

Communion ↓

Boy Flag Poster ↓

Naturemorfosis ↓

I Hate My Friends ↓

The Great Recycler ↓

The Face Of Chaos ↓

Black Market ↓

Failed ↓

Green Thumb ↓

Petrified ↓

Fashion Victim ↓

I’m The Real Designer ↓

The Only Apple ↓

The Three Of Us ↓

Idle Hands ↓

Silent Control ↓

These Diamond Days Of Oblivion ↓

Let It Out ↓

The Foot Of God ↓

Conserve Energy ↓

Rebirth ↓

Make Art Not War ↓

Blinder ↓

images from http://spyrestudios.com

文章出處：飛爾酥の靈感室 ─ philsu daily inspiration!

在Monoface，你不只可以換左眼還可以換右眼、鼻子、嘴巴、還有整個臉。

除了自己變，你還可以到view gallery看人家怎麼變， 哈哈哈。

—————————————————————————————————————————————-

烏克蘭籍的法國設計師卡山德（Cassandre），為Art Deco海報設計的旗手，

作品以1935年發表的諾曼地號、與1931年的大西洋號宣傳海報最為有名。

兩者皆採用以單純化的仰角船身塞滿整個版面的大膽構圖，時至今日仍是許多電影海報模仿的對象。

以Y、S、L三個字母交疊而成的聖羅蘭（Yves Saint Laurent）商標，亦是他於1963年完成的作品。

在他的作品中，常可欣賞到以噴槍描繪得令人歎為觀止的漸層效果。

雖然如今已是種稀鬆平常的表現技法，但他筆下那搭配柔和陰影的畫面，看起來仍比現代的任何作品更寫實新鮮。

若立志投身設計業，不妨參考一下卡山德的經典名作。

諾曼第海 報 YSL海報

文章出處：索尼與香蕉王的紅燈人生

一位住在鹿特丹(荷蘭)的藝術家兼(註)四格漫畫家, 本來都是用傳統工具在創作, 一直到他1996年的時候發現Internet的存在, 才開始創作digital art.

記得這個網站當初是一個朋友傳給我的, 應該有快十年了, 點進去之後看到一個人站在網頁中間, 好奇的將滑鼠移過去點下之後發現網站中的角色會跟我互動, 在那個年代是很稀奇的, 那時Flash的內容還沒有那麼多, 不過現在看還是覺得很有趣, 網路上還沒有看過類似的表現. 每點一個都會充滿了期待, 除非你看過, 不然你永遠都不知道他的下一個角色會怎麼跟你發生互動. 會一直把你勾住, 人性的弱點 – 『好奇心』.

網站中西裝鼻挺愛耍寶還會跟你互動的那個角色正是Hoogerbrugge本人的自畫像, 他最著名的網站叫做NAILS, 裡面有很多小單元, 每個都用不同的方式呈現一個主題, 他透過這樣的創作去呈現他自己的一套哲學以及生活中觀察到的現象, 像是流浪漢, 暴力, 信仰, 等等, 透過反諷, 又有點黑色幽默的方式呈現.

覺得創意快乾掉了嗎? 建議你去看看他的作品. enjoy.

Han hoogerbrugge的手稿

他的部落格 / 他的作品還有在倫敦的設計博物館展出過

註 : 四格漫畫 -有點像老夫子或連環泡之類的, 用四個畫面說一個故事.

文章出處：This is Ethan

極 簡主義 MINIMALIST

重點摘要：使用適量的裝飾和點綴、呈現視覺最基本的元素、減少雜訊以突顯內容、內容本身必須非常充實。

極簡主義網站設計秘訣TIPS

TIP 1 - 將視覺呈現減低到只有最基本的元素，最華麗和每素的元素都消失了。

TIP 2 – 堅守大部分簡約原則，只使用適量裝飾和點綴的網站。

TIP 3 - 減少設計上的雜訊，讓內容突顯出來，產生一邊非常容易消化的設計，這對只有短暫注意力的使用者非常有利。

TIP 4 - 網站的內容本身必須非常充實，才能擄獲訪客的注意力。

http://www.filosof.biz/	http://microformatique.com/

http://minifolio.binaryvein.com/	http://www.studiorobot.com.au/site/

文章出處：索尼與香蕉王的紅燈人生

2010年第一篇文章就獻給他了－「宅男最後的120小時」。這是日前網路上很火熱的youtube互動遊戲，因為最近剛好在研究類似的東西，就順便介紹 這遊戲給大家。為什麼會火熱呢？總括原因有兩點，一方面是用youtube玩遊戲實在是很有創意得一個點子，之前雖然有，但都屬於小遊戲類型(下面會介 紹)，跟這次大製作完全不能比。另一個是因為裡面找來了一位台灣正妹－匡匡，讓此遊戲在 台灣爆紅。(完全達到當初找他來的目的)

劇情是這樣的，一個宅男遇到了聖誕精靈，聖誕精靈要他在5天之內追到指定的對象，不然就會孤獨終老，從此，就展開一段120小時的戀愛夢險之旅。當 然，這個不僅有創意，且劇情跟拍攝手法都很高明的遊戲，不會偶然出現在youtube上，這是香港旅遊局為了吸引台灣旅客到香港，特別聘請是由香港知名導 演林氏兄弟所做的互動廣告，也成功地在台灣製造話題，並且讓網友一邊玩，一邊將香港美景盡收眼底，是個蠻厲害的行銷手法！

上一回我曾在部 落格中介紹過用youtube作官網，這次的「宅男最後的120小時」也是使用同樣的技術，將連結另外一支影片的選項嵌在影 片中，讓玩家選擇，不同的情況，會有不同的劇情發展。為了製造真的在玩遊戲的感覺，導演以第一人稱視角拍攝，作品呈現出AVG冒險遊戲的畫面，玩過這類遊 戲的玩家一定對這樣的畫面很熟悉吧！ 除了「宅男最後的120小時」之外，我還在網路上找到了一個「快打旋風」的回合制遊戲，是一名加拿大籍的導演所製作的，利用逐格動畫的形式拍攝，玩 家只能使用Guile，也就是俗稱的「阿雷固」XD，但可以選擇三名知名的角色進行對決。

同一個導演也做了蝙蝠俠跟小丑跳街舞的對決遊戲「Bboy Joker」，一樣也是逐格動畫的形式，你可以選擇當蝙蝠俠或是小丑，必須要在時間內選對對手跳舞的正確順序，才能過關。

製作幕後特輯

同樣的技術，用在不同的地方，就會變成全新的創意，玩遊戲或許是每一個擁有電腦的人都做過的事，但在youtube上玩遊戲，卻是一種全新的體驗，在 youtube上還能發生甚麼事情呢？或許還值得我們去好好思考！

文章出處：鮪魚星球人

Google於5月21日，推出小精靈慶生的新版首頁圖片，
目的是為了慶祝小精靈誕生的30周年，
Google這次推出的圖片，可不是供你欣賞而已，當然還能手癢的玩一下，真是趣味十足!

Google官方於5/21日發佈慶祝史上最經典的遊戲「小精靈」(PAC-MAN)的30周年紀念，於是跟著把Google搜尋的首頁變成小精靈的遊戲畫面， 旁邊還多增設了一個投入硬幣(Insert Coin)的 按鈕。開啟Google搜尋頁面一段時間後，背景音樂就會想起熟悉的小精靈遊戲聲音，你可以用↑↓←→鍵來控制小遊戲中的小精靈的移動，開始體驗回到過去 的遊戲時光。

Google的首頁，本來充滿許多趣味。這次Google加碼推出可以看又可以玩的小遊戲，讓許多網友驚豔之餘，更回味無窮。

Google這次與電玩業者的異業合作，效果出乎意料的好，除了在各大媒體版面上大放異彩外，也獲得許多網友的喜愛，因此Google決定將這次 PAC-MAN遊戲頁面永久上線，連結網址為：http://www.google.com/pacman/

備註：點擊Google PAC-MAN的遊戲連結，當你按下Insert Coin的按鈕，馬上可以進入雙打模式，你可以用 WSAD來控制另外一隻小精靈的移動。

外星人說：

Google的網站本來就非常的精簡，外星人也常看到Google透過變換首頁的圖片來與網友互動，不過大部分圖片變換都只是換圖而已，這次卻換了 一個小遊戲，眼尖的網友發現之後立刻口耳相傳，馬上就廣為人知。利用一點點的不一樣，多一些互動，讓消費者覺得Google不只是提供冷冰冰的網站，更是 用心的與大家互動。這種小貼心，當然才能留住顧客的心!

一分鐘看PAC-MAN

什麼是PAC-MAN? 想必五、六年級生並不陌生，在台灣PAC-MAN叫做小精靈， 中國大陸叫做吃豆人，香港叫做貪鬼。從早期路邊的大型機台，進入紅白機，到DOC時代的電 腦，一直到今天的網際網路都有小精靈的蹤影。這款遊戲自推出以來深獲大家的喜愛，是一款經典中的經典電玩。遊戲的操作方法可以參考Wiki百科， 當然也可以去問爸爸媽媽，相信他們應該不吝嗇的告訴你。

相關連結
Google PAC-MAN小精靈遊戲頁面
Google 慶祝PAC-MAN網站公告

參考資料：Official Google Blog

文章出處：外星人看廣告