3D Text CSS3立體的語法效果

「3D Text」是使用CSS 3 做出來的3D立體文字效果，
當然只支援HTML5的新世代瀏覽器，還在用IE7 IE6？
記得換個支援HTML5的Safari或Google Chrome，
不然就像是以往會電腦/不會電腦的世代鴻溝。

一個應徵的女子在履歷表填寫熟悉word97，
這樣如同李大師的資訊斷層恐怕年輕人都會搖搖頭。

http://markdotto.com/playground/3d-text/

雞婆Google谷歌的Instant Previews

Google Instant Previews如上圖，
可點大圖來看。

就是會雞婆的幫您顯示預覽，
好不好用讓時間來考驗。

如果你沒有出來 可以點這網址：
http://www.google.com/landing/instantpreviews/



這個唯一的好處就是，
可以表標示出你搜尋字串出現在網頁的哪邊，
現在的Google政策是讓大家多留在Google了嗎？


詳情見Google Blogger
http://googleblog.blogspot.com/2010/11/beyond-instant-results-instant-previews.html

科技蘋果也能中國紅

有什麼能代表中國的意象闡述出中國味呢？



除了目前中國的大紅國旗外，

就屬大紅燈籠高高掛的意象最為人知了。

那Apple Store如何以其做絕妙的結合，

看看壓平的向量iPad iPhone就知道Apple的造詣了。

Apple系列產品的圖示 加 Apple Store開幕活動 結合國家的意象，

這樣的製作說精湛也不為過。

http://www.apple.com.cn/
http://store.apple.com/cn/

HTML5的體驗

還記得Appple 有出html5的體驗嗎，

那是針對safari的，
如不過癮，

不妨試試看Google 的Chrome。

用Google的 Chrome來體驗：

Google 搜尋重力模式，

甚至是線上版Photoshop，

原來HTML5這麼美好。

http://www.chromeexperiments.com/detail/harmony/

Apple的文案粗分析

幾天前因為iPhone4的好文案在微博上分享了一下，說如果沒人研究apple文案的話，我研究。最近就一直吊著這個事兒，翻看了apple和同類消費電子產品的網頁，再次真切體會到了apple文案的強大。落筆之時，自己卻底氣不足，充其量只敢“初品”或者“管窺”。

寫給營銷人、策劃人。

我認為研究apple文案，要從英文網站看起，大抵因為中文站絕大部分是從英文上直接翻譯過來（當然有少數本土化的發揮，我們後面會提到）。請理解，選擇英文不是我裝X（我會盡量用中英對照，如果實在有障礙，中文網站應該也能體會一些）。

先看這個例子，出現在iPhone4的首頁。簡單幾個單詞，表達出很強氣場，apple那份自信淋灕盡致。“This changes everything.”表明瞭產品的強大，一句“Again”效果就直接X4了，因為正好和2007年iPhone出現時那句“iPhone reinvent the phone”（iPhone重新發明瞭電話）呼應。反過來說，iPhone粉絲們希望有新的產品，能夠“change”，apple正好說出了那句話。我們就從“說出用戶那句話”開始說。

說出用戶那句話

以前講文案，我們說過，最強的文案是說出用戶心中那句話。相反，差文案是自娛自樂的，用用戶完全不關心的東西去表達自己，還指望用戶點進來或者受感染。打個比方，有一回TB一個提交審核的banner上赫然幾個大字寫著“運營x組Q2末促銷”，我一口血就噴出去了。

別笑，這樣的傻文案到處都是。我們回到apple。

好文案要告訴用戶，他可以幹甚麼，而不是你有甚麼。

比如iPhone說自己可以攝像，這其實很多手機都有，但apple說，你不光可以拍，還可以剪輯，可以分享。這就是用戶得到的東西。想想，如果是其他廠商，會這麼說：“新的500萬像素攝像頭提供了高達1080p超高清的視頻拍攝功能，同時手機提供了編輯工具，可以直接分享給朋友。”話雖然說清楚了，但普通用戶會被擋在諸如1080p這樣的專業詞彙外。我們說，用戶不關心這些技術參數，就關心“能幹啥，能比別人的強多少”。

再看下面這個，說新的顯示屏很牛，普遍會說是高達960×480的分辨率，是現在見到最高的。但是用戶沒有感覺，因為我們發現，我們身邊有無數這樣的對話：

“哇你手機屏幕真清楚啊，多少萬像素的？”“呵呵，500萬。”其實這兩個人根本就不懂，屏幕是用分辨率和色彩數來衡量的，幾百萬說的是攝像頭。但他們代表了大量消費者。

於是我們只需要說，這是“最高的”就好了。當然，通篇讀下來，你會發現最後一句話特別能打動人“你用肉眼看不到像素”。技術角度講，300dpi以上精度肉眼就分辨不出了，而iPhone4達到320dpi。但是你說320dpi沒有消費者會懂。

我是覺得這句話應該放大，apple這裡寫的還可以更直接。

繼續閱讀 》

dropbox的404錯視圖形

做網頁的一定會常遇到404錯誤頁面的編寫，
不然常逛網站應該也容易遇到，
但是泰半的404頁面設計多無新意，
但是近日獲得apple2010的創新設計奬的dropbox厲害了，
用了有趣有意的圖片——形態交叉型的矛盾圖形。


這圖片是由M.C. Escher（葉夏）荷蘭版畫藝術家，
對於視覺心理特性最早注意而熱衷創作的藝術家首創，
他運用心理學的研究成果，娛弄人類對空間的錯覺，
大量創作此類反轉性的繪畫，
使得畫面乍看正常，其實裏頭暗藏玄機。
Escher的作品不論在藝術、設計界都是必讀的作品，
他的作品散見一般 設計書籍中且被推崇備至。
在這個特效充斥的數位時代，
Escher作品的內涵更加耐人尋味，現在看來仍是那麼特立獨行。

M.C. Escher
http://www.mcescher.com/

舊聞補充：Google首創 可以玩的網站pacman吃豆人LOGO

在PAC MAN 30週年的這一天，

google結合萬代出了利用HTML5寫成的Google Doodle，

這可是近幾年來最有趣的google 首頁了，真的令人玩不釋手！



還有原本平常的“好手氣”變成了“投入硬幣”，

可以變成2P版本，出了很好玩之外，

也可以遇見未來HTML5的厲害呀！

現在就去玩玩看吧！

http://www.google.com.tw/


ps.感謝smallchougoogle在活動過後網址已經改成
http://www.google.com/pacman/

HTML5有多厲害看「SketchPad」就知道

如果你是半個科科，
那你一定會注意到iPad iPhone這些玩意，
而且你一定會知道這些毒蘋果都沒有閃光，
也就是不支援Flash，
那Steve Jobs大叔說：
HTML5 Will Kill Flash

那到底HTML有多順多厲害？
沒看過你也不知道，
所以我們就來試試看，
什麼叫做瀏覽器就是程式的時代。



這影片裡面是DEMO說明，
如果你等不及，
用支援HTML5的瀏覽器試試吧


SketchPad 網站
http://mugtug.com/sketchpad/

Google名人地圖-台北最愛的地方

最近Google好像越來越會作行銷，

甚至做得比Yahoo勤勞了，

不過還是沒有比Yahoo完整親切。

最近用Youtube還有GoogleMap可以發現，

有什麼推薦地圖，

本以為是熱心的網友，

一看結果竟然是名人。

才知這是Google的特別企劃，

現在從Youtube可以看到企劃的短片，

http://www.youtube.com/user/GoogleTaiwanGeo

除了台灣的GoogleMap當然還有各大都市的名人介紹，

裡面還有泰國、紐約、香港等等。

則代表台灣網路資訊的發達，

也晉升為Google重視的主要都市了。

不過VAW LOG感興趣的不只是行銷手法，

還有裡面設計的icon，

下面是原本GoogleMap的icon。

經過Google為名人的特別設計之後，

變成下面有特色的樣子，

也就是GoogleMap未來可以自己custom標簽。

雖然行銷感覺走比較Geeker的方式，

沒有一個完整地活動頁面（還是VAWLOG沒找到？）

畢竟還是很多人不知道怎麼用，
但是這種全球同步行銷的方式，真是厲害。
現在就這去Google Map看看吧！

如何使用Photoshop的切片工具(slice)

因為VAWLOG的朋友有問到網站相關的問題，
我們就利用這個時間順便寫在blog，
讓有遇到類似問題的人可以搜尋。
其實切片工具VAWLOG不常用，
因為主要是直接以div標籤去分比較多，
但是一般不熟悉網頁的新手，
簡單上手的方式就是把影像做切片，
而Photoshop裡面像一個刀子的工具就是切片工具，
如上圖所示。

切片的主要概念就是利用PS再上面畫切割線，
在輸出網頁的步驟時，
讓PS利用你畫的分割線幫你分割圖片，
再用網頁的表格幫你整個拼起來，
甚至可以在分割的地方加上鏈接，
方便你鏈接網頁。

那到底要怎麼用呢？
VAWLOG在網路上找了又找，
終於找到幾個比較清晰的教學影片，
如果不會slice tool切片工具的，
就看看下面幾個Youtube影片吧，
保證會有收獲的。


如何切片



切片並輸出版面


Slice and Export a Website Layout + HTML

把設計活動加到Google行事曆

有了我們的VAW DAY，

除了看設計活動很簡單，

如果你有用Google日曆，

那把設計活動加到Google Calendar也簡單了。

現在你只要從設計日的首頁點活動，

到了設計活動的網頁，如下圖：

點上面的新增至Google日曆，

那麼很快就會跳出行增行事曆的視窗，

您所要新增的設計活動很快就可以加到您的Google日曆啦！

iGoogle版面修改

這是原本的 iGoogle版面：

這次的 iGoogle 的版面改成之前測試的樣子，
上置的標籤拿掉了，
變到左邊去詳細版面如下：

(擊點一下有大圖)

看來是符合wide-screen的潮流，
不過用起來頗耗資源的，
如果您的至今 iGoogle 並沒有變化，
像VAW LOG就是這樣，
您不妨在igoogle網址的地方：
http://www.google.com.tw/ig?hl=zh-tw
改成：
http://www.google.com.tw/ig?hl=en

或許你就可以試試看新版的iGoogle版面，
更細緻、更有設計感的版面或許是好意，
不過這次的改版影響了很多人的習慣，
招致很多怨懟，Google在改變之前，
不妨學習之前Yahoo改版用提示試用，
讓使用者可以嘗鮮，也可以先習慣，
如果不喜歡，也可以切回舊版的，
這才是不違反iGoogle客製化服務的精神。

不過這次的改版Gmail使用方面改進很多，
簡單的動作幾乎不用登入Gmail完成，
這是相當不錯的地方。

如果您還沒用過 不妨來試試 igoogle吧：
http://www.google.com.tw/ig

中秋賞月?看則登陸月球的新聞先

1969年時，我們的拍照技術仍沒這麼發達。
照相如同現今拍行星爆炸一樣麻煩，
所以當時的報導相當有趣，
因為僅能看圖說故事。

整份報紙可能不到5張相片，
甚至是連一張都沒有，
這是現在的小朋友很難想像的。
正好這次的中秋節，
咱們烤不到什麼肉，
辛樂克強颱的威力，
讓人們了解農業靠天吃飯的俗語。
看不到月亮，吃不到烤肉，
別灰心，我們講點有關月亮的消息，

你以為 Google News 只會收集目前的新聞？
那你可就大錯特錯了，如果你對事容易覺得滿足，
那倒是覺得Google NEWS 是耍不出什麼新花樣，
但任何事情要做到最好，
是永遠沒有停下腳步的一刻。

Google News Archive Search，
是Google最近推出的一項舊報搜尋服務，可以從英文版的Google News連進去。
而在Google官方的Blog裡面示範了一個關鍵字：
“Americans walk on moon”
可以進行關鍵字的搜尋，
裡面有兩種方式:
其一是舊報搜尋Archive search ，

另一個則是Show Timeline，
一個是顯示最相關的關鍵字，
Show Timeline則以時間軸呈現過往的關鍵字曲線。

其實從2006年開始，
Google就開始這項計劃，
與New York Times 紐約時報和 Washingtin Post 華盛頓郵報合作，
讓他們存檔的舊報紙轉換成可以搜尋的數位圖檔，
並以Google新聞進行封存。
現在，這方面的努力已經有些微的成果，
使我們能夠從一個更大的範圍來找尋資料，
並且利用這些資料來讓我們掌握歷史的軌跡，
見證歷史的重演避免人類的錯誤再度發生，
記憶，這當然就是人類與畜生的分別。

而Google的合作夥伴之一，
Pittsburgh Post-Gazette 魁北克紀事電報，
其實是最古老的報社，
而且至今他已連續出版多達244年，
也就是說，你搜尋的舊報紙最遠可到244這麼久，
我們很贊嘆Google作出的貢獻，
也希望他們繼續努力，
協助封存過往的資料，
甚至是亞洲地區的國家，
並讓這些資料更容易尋找，
貢獻出這些過往資料的價值。


而如果你對當時 Neil Armstrong（ 尼爾 阿姆斯壯）
登陸月球的新聞有興趣，
不妨來看一看，阿姆斯壯拜見玉兔、嫦娥、吳剛失敗的新聞，
也至少不無小補中秋不能賞月的心情。
如果您是個做網頁甚至是學習多媒體設計相關科系的，
其實Google News 的操作介面也值得您一試。

E都市中國驚人的人力表現

你能想像google map收集全球衛星照片然後做程式化整合拼湊，
但是您能想像用人力一個一個畫出整個城市的地圖嗎？
中國的E都市就是一個極致張藝謀式的人力表現。
創辦這網路公司的是杭州阿拉丁信息科技有限公司，
採用土法煉鋼的方式成就地圖公司，
但在未來人力成本逐漸攀升的中國，
可不可行之久遠就不得而知。
如果您有興趣，不妨也來看看！
內容極其詳細精美，採用3D建模，
未來使用在GPS導航上指日可待。

e都市
http://www.edushi.com/

google doc 改儀表板設計

熟悉用OFFICE WORD的你，
不知道是否曾經用過搜尋龍頭GOOGLE的陽春版文書編輯？

自己倒是蠻常使用的，
主要方便的就是在於隨處調用、永久存在的便利。

如果您今天打開Google Docs，
你會發現界面已經有了輕微的變化。
Google嘗試對Google Docs的工具欄進行大幅改變，
追隨漸層潮，亦利用顏色的變化製造突起
以使其變得更方便易用。

但至於最終效果如何，
還是得讓用戶來做評價。
如果你習慣了之前的界面，
那恐怕你得花些時間重新適應 Google Docs了。

不多說，下面是Google Docs今天改版後的新工具欄：



如你所見，新工具欄變得更簡潔了，
看起來舒服一些，
因為可見選項和按鈕的數量已經減少。
和舊版比較一下就清楚了：



具體的改變如下：

*"保存"、"保存並退出"、"放棄更改"（Discard changes）按鈕不再出現在工具欄右邊。其中"保存"被移到了工具欄最左邊，變成了磁盤圖標，而"保存並退出"、"放棄更改"按鈕則直接被刪掉了。

*"拼寫檢查"變成了ABC圖標，放在工具欄右側。

*"剪下"、"複製"、"貼上"圖標已被刪除，你只能使用鍵盤快捷鍵進行操作。

*列印功能變成了工具欄左側的打印機圖標。

*字體樣式及大小選單改變。

*"引用"放在了樣式選單裡。

*選中不同尺寸或樣式的文字後，工具欄裡會自動顯示相應的數據。

總體而言，
這次改版在使用習慣上看，
還是比較大的。

個人認為儘管需要一些時間來適應新的工具欄，
但還是值得的。
因為現在的Google Docs在操作及界面上更接近於微軟Office，
這是好事。
不過"保存並退出"、"放棄更改"這兩個按鈕被刪掉了還是會帶來一些不便；
再加上極常用的剪 切、複製及粘貼按鈕也去掉了，
相信很多不習慣使用鍵盤快捷鍵的朋友要抓狂了。
不管怎樣，歡迎大家發表自己對新版Google Docs工具欄
介面設計的看法。

部分轉載自gseeker

馬英九是人才

秉持著「發文不附圖，此風不可長。」的網路精神，
VAW LOG為了這篇原沒有圖的文章補上圖片，
VAW LOG不是政治網站，
圖片也是KUSO好玩的，
所以以下字眼也與政治無關唷，
如果你不信至少動手拷貝下面字句再貼上。

馬英九懦弱,無能,欺騙,鴉霸根本不是個人才

以上那一句話，
沒有政治立場，
因為你可以複製，
並且貼到任何文字編輯程式
(Word/筆記本 MSN Skype 廢話不多說，貼吧)

你就會驚訝的發現，
很多事情並不是你所接收到的表像。
真相不一定是眼見為憑，
不過大部分是可以的啦，
我們是這樣相信啦。

為何會這樣？
技術問題請參閱： 眼見不為憑 - CSS 隱藏網址技巧
作者從 0x000000 看到的複製貼上隱藏技巧，
透過 CSS display:none 網頁語法的方式隱藏部份字元，
從技術層面來探討惡意的網路應用破壞，
負面來說也許造成資訊安全的隱憂，
正面來說可以產生干擾文避免轉帖。

現實社會的亂象不也是如此嗎？
設計方面也有許多內斂或與表徵不同的東西。
所以看到不見得，就是好的；
看到不好的，不見得真的不好。

就像街友，不見得只是窮困的髒鬼，
背後可能有個深刻值得借鏡的故事，
從前可能跟你一樣懷抱著滿腹對人生的期望與夢想。
他曾努力過，爬得很高很驕傲；但有天跌下來了，跌得很深。
只是現在他選擇了另一條讓心靈得到舒緩的路。

咳~ 扯遠了，親愛的工作狂和學生們，周六&暑假愉快嚕。

google首頁不同的設計

google首頁通常都是使用相當簡潔到不行的設計，如果你是個程式設計師，更可以看到他們首頁程式碼的節省程度，精闢得令人昨舌。無論是表面上的頁面呈現和內部網頁原始碼都精簡非凡的GOOGLE，這次竟然推出不同調性的東西，就在上個禮拜2007/5/30，Google推出韓國分站。

不少朋友可能早就已經知道，作為世界上網路普及率最高的國家之一，韓國的網絡極發達，頻寬網速也極快。可能正是由於有這些條件，所以韓國的網站很喜歡使 用大量的圖片設計或直接用Flash製作。我們都知道Google早在2001年就已經開設了韓國分站，即google.co.kr。入境隨俗， Google韓國分站的首頁竟然也跟隨著韓國的網站設計潮流而做出了改變。

進入Google的韓國分站首頁，你會發現它的設計與傳統的Google首頁截然不同，裡面不但每個選擇都有對應的圖標，鼠標經過時還有很漂亮的動畫效果：

如果您懂得韓文或喜歡韓文，您可以看看來這裡看看，甚至可以設定成為您的首頁。
http://www.google.co.kr/ig?sp=korea&hl=ko

韓文不懂也沒關係，因為有熱心的網友改成中文版，一定要來看看。甚至有人已經把它設成預定的首頁 :)
http://www.x2y2.com/google/

橘子誌果農也愛設計

哈，其實這不是賣橘子的果農紀錄。
正是大家熟悉的橘子遊戲公司所創立的內部期刊，主要給台灣韓國日本等公司內部員工分享生活心得或發洩的地方...(發洩是VAW LOG自己加的...)裡面除了一些台灣橘子的前身與創立介紹外。

期刊的名字取叫 gamania橘子誌 也就是橘子的台語(福建話?)+人=橘子人，裡面當然就是寫橘子公司的一些東西嚕，有很多橘子不同部門的作品，還有很多內部員工的高超技巧，應該說是一些除了遊戲外的作品或休閒活動等心得。非常有校刊的感覺，相信可以增加不少公司的向心力。橘子誌裡面不乏設計人，如果大家對未來的願景是遊戲或設計，不妨看看，他們現在出到第二期的嚕，一直以為是用FLASH製作的想不到是HTML，呈現的效果還不錯，內容也挺優。

更令VAW LOG佩服的就是裡面的多國語言做得非常徹底，這是令我們感到最甘拜下風的啊 XD

總之，大家去看看吧，多認識一些業界的東西或看看別人公司的文化，倒是挺不錯的 :)

http://brand.gamania.com/gamanian/2007/vol_02/

VAW LOG 版面大問題

昨日在台北世貿的新一代設計展中，閒閒無聊上了網，發現到VAW LOG版面在IE6.0裡面整個是歪的。
整個冷汗直流，因為一直以來都是配合微軟大哥升級到7.0，版面也是用7.0和FIREFOX去檢驗，但是畢竟6.0用的人還很多，所以最近會針對6.0調整一下，對於長期看到版面歪掉的6.0USER說聲對不起，VAW LOG 的版面讓你眼睛受不了。

以下是在新一代設計展中的IE6.0 版面截圖(在BOCO的攤位上網的)

波酷網BETA上線!

身為設計人當然幫忙宣傳設計事，如果你是設計師或設計學院的學生一定聽過BOCO網這個碗糕。蝦咪？沒聽過，好沒關係，人總有第一次的時候，就像昨天第一次看到家裡的QQ貓被平時憨厚黑貓推倒(此推倒當然不是只有推倒而已...)，咳...講遠了，所以如果你有去了解過台灣當下的設計環境一定要知道台灣創意中心和BOCO波酷網之間的掛勾。

OK，講回正題，花很多資源&爛很久的BOCO網現在要推出新版頁面了！(雖然比起來黑秀版面爛得更久)，如果你之前到過BOCO應該有看過舊版的頁面，現在你可以看看新出爐的測試版本。號稱更好、更強、更台，原本的BOCO網址也多了沒有比較好的新網址www.taiwandesign.com.tw容易跟另一個網站混淆(www.taiwandesign.com)。

精品行銷的地方還不行，唉！設計新聞也沒有RSS，唉！接案的地方也不夠直覺，唉唉！所以總結來說，仍需努力吧。

ps.念在有交情，晚點再去通知一下脫褲網這個網址真的很糟。


http://km.boco.com.tw/