今天來講電子書(ebooks):

首先請各位看看台灣部落客 Jamie 寫的 這篇, 主要是要出版商改變態度, 擁抱網路 -> 還蠻有趣的文章,  這邊是我不同的觀點.

一開始, 就先來看看什麼是書:

意義

為什麼人要看書? 簡單的說就是它提供了資訊, 不管是小說故事,或是新聞雜誌, 我們透過這些了解世界, 歷史, 科技, 等等, 不過也並不是所有的資訊都會有意義, 以下是我個人簡略的文字遊戲:

資訊 -> 內容 -> 意義(不是義氣) -> 知識 -> 感受 -> 智慧

部分資訊會成為人的智慧, 人類的歷史也因為有’書’這類的東西分成史前時代跟歷史時代. 總之書是一個對人類很重要的東西. 在此我們就以上面紅字的意義階段為基準來評斷是不是/該不該是書好了!

內容

在terminal interface時代, 我們就可以在網路上面寫文章, 雖然沒有現今的blog / twitter便利, 不過卻也沒有代替了書籍, 主要是因為這些網路的開放性, 伴隨著不專業性/缺乏觀點/主題凌亂等等的問題, 這些雜亂甚至無用的資訊,是無法當作書的題材, 當然品質良好的 blog / 新聞台, 還是有達到’書’的意義. 反之很多台灣人喜歡出一些沒營養的’書’(實體的),明星,減肥成功的,或是部落格紅人… 好像每個人都可以出書, 主要是因為台灣印刷便宜, 我認為只是浪費樹木資源而已.

媒介(分作軟硬兩種)

軟媒介
近代書本的格式,原始是圖文內容, 進入電子化後多了有聲書, 有聲書如果是音樂,那跟cd有什麼不同, 如果加上影片,那跟電視電影也沒什麼分別, 很不巧的是,大概十年前, 網頁就有能力整合以上全部: 圖文聲音影片, 也就是不管 whatever書, 基本上十年前的科技已經足夠呈現出來.

硬媒介

書籍

定期性:報紙, 雜誌, 期刊

不定期性:一般書籍(小說類,立志類傳記…等等)

電子裝置

載具:

實體: 磁片/ CD / DVD (互動式光碟)

網路: 各式網路書店下載

撥放裝置:

電腦, 平版式電腦, 電子墨水(Kindle), iPad, iPhone…etc.

以上是我以內容為基準定義的書, 在媒介中的撥放裝置,其實只是其中的一小環.

所以如果不是媒體裝置,那到底 iPad 的出現為何好像會造成出版業的一股暴風? 可能甚至有些出版業者自己都搞不清楚狀況…

其實就是在資本主義下最敏感的金錢問題

之前的 Amazon Kindle 還有最新4月iPad的出現, 其實除了新的觸碰操作科技其他的並沒有很大的改變,  重點是它們, 改變了出版業的金流跟通路.

以現今出版業的獲利模式來看:

期刊報紙類:

金流:

主要是實體書本的購買費用,加上廣告刊登的費用,
支出部分有記者,約聘主筆的稿費,美編,通路費等等.另外還有印刷費用.

通路:

報紙的通路費用很高,主要都是資訊夾帶的廣告來獲取利潤.

一般書本:

金流:

收:以實體書本或利為主, 少了廣告的收入.

支:編輯,作家,封面設計的薪資費用,通路費.印刷費用.

通路:

出版商有配合的書店, 賣給書點以比實際的價錢還要低, 書店賺取差額.

再來,看看電子化書籍的金流跟通路:

金流:

收:網路書店購買付費.

支:網路書店架設維護費用, 付費金融機構的抽成,編輯,作家,封面設計的薪資費用.

通路:

透過網路下載, 全世界都可以上網付費

快速的比對一下,除了編輯,作家,封面設計的薪資費用之外,電子書可以說少了 實際的印刷跟通路的費用. 另外, 透過Apps, 出版商可以自行設計應用程式版本的書店, 讓人下載, 而且是世界性的通路.

從價格面看, 網路書籍的價格,遠遠低於實體書籍, 這不刺激了人們覺得買了個稍貴的閱讀器, 卻可以省下更多買書的錢, 同時也有位地球環保盡一分力的潛在陰德. 反正數位化的資訊跟實體印刷書本不同,它是可以無限拷貝的, 在控制價格及促銷上,少了很多庫存及印刷量等等的考量, 可以說是優點多多.

這些改變很多人開始預言電腦下一個取代的會是書本,其實它並不會取代書, 只是改變了書本的形式(就像現在的書改變了已前用竹簡的形式),更不會改變出版商在資訊審稿編輯上面的作業,人們還是需要專業的編輯跟作者,這並不是信手拈來的部落客可以取代的. 所已數位化取代的會是印刷商,而不是出版商.

傳統出版商的觀念要改變跟上科技時代, 不過並不是擁抱網路, 因為網路普及了少說已經十幾年, 出版商還是照樣出版實體書本,並沒有受到太大的衝擊, 主要原因是一般人認為網路內容是免費的, 部分出版上只在網站上面放部分的內容來吸引人們的訂閱,同時可賺取網路廣告(banner)的費用, 甚至有些只在網站上面廣告自加的雜誌,書籍等等, 並不會把整個書籍出版的內容放在免費的網路上,因為這樣的話就不會有人去買書了.

金流及通路的改變,其實只是結果,造成這些改變的, 其實是機制.

要了解這個機制要先知道以下幾個元素(簡略圖解)

ebook store(線上商店) -> 販賣ebook(檔案,或是資料下載) ->Apps 裝在 ebook reader (硬體,iPad / Kindle / Sony Reader…)

自從電腦版本的 iTunes 可以網路購買音樂之後,Apple 挾著成功的經驗, 用同樣的方法推出了Apps,以及 iPad推出後的iBooks store, (後來iPhone升級 OS4之後,也同時推出了iPhone版的iBooks). iBooks的推出之前,Apple 也早跟美國各大出版商談好一起在iBooks上架.

Apple不知道是誤打誤撞還是詭計,搞了個iBooks的這種販賣機制, 讓從免費觀念的網路上抓下來的資訊,或根本只是更新的資訊變成要付費的.

當技術與時代到了該發生的時候, 同樣的手法, Amazon 比Apple走的更早一步,但是由於電子墨水的閱讀器(Kindle),功能儘限於文字性閱讀(電子墨水的解析度比LCD螢幕還要高), 但並沒有辦法像 iPad一樣處理精美的彩色圖片或是互動式的多媒體內容,更不用說,小工具程式,遊戲,上網通通包, 消費者買了iPad不是買了個電子書(Reader),而同時也買了它可以辦到的多種功能. 所以iPad推出的同時, Kindle 電子書Reader 也面臨的危機. 應變的方法是, 在iPad推出之後, Amazon 也推出了 iPad 版本的 Kindle App, 讓美國300萬的 iPad用戶也可以從Amazon網路書店下載書籍.

Amazon網路書店下載的書即可以在多種電子墨水式的機器閱讀, 像是 Sony, Ocean等等的硬體製造上也有出此類產品. 這些Reader硬體產品, 同時卻也都遭受到iPad的威脅. 不過 Sony , Ocean 並沒有自己的電子書店, 所以沒辦法像 Amazon一樣推出 iPad版本的 Kindle來搶救.

所以電子書店的機制其實是整個書本數位化最重要的改變, 並不是硬體Reader, 硬體Reader只是讓加速了這個變化.做電子書店的並不只有 iBook, Amazon 這兩家販賣商而已(Apple, Amazon都不是出版商), 一些大出版商其實也都看出了這點, 進而推出上下整合策略,像是 Times , Wired , Marvel (漫畫) 都推出自己的通路平台，再透過 Apps Sotre 的通路讓人免費下載.

PS:在這邊的電子書店賣的是”電子書”,而不是像博客來在網路上賣書喔!

不過據說透過 Apps Store下載的App上面的販賣也會經過 Apple 抽成(這我不太確定), 那為什麼出版商還要自己花錢開發? 在iBooks上面賣不就好了? 結論其實很簡單, 是比較技術面的格式的問題.

電子書店通路, 到了行動裝置上面, 並不只式電子書店, 它也整合了閱讀的介面應用程式(App)

一般在iBooks上面的書籍,都是傳統以文字為主的書, 或只加上少許的圖文編排, 所以iBook上面可以讓人調整字形及大小, 但像是Marvel這類漫畫書出版商,就很不適合以iBooks的形式販賣. 所以它的Apps裡面除了賣漫畫, 還有很適合看漫畫的介面,可以有翻頁特效,甚至單格觀看等等,　非常新穎，Times 則是因為期刊的關係, 也推出了自己漂漂亮亮的書店及閱讀App, Wired這一個以科技為主的期刊, 除了漂亮的文字編排, 更加入了書本所沒有的互動影像, 影片, 以及音樂播放等特點.(建議iPad免費下載)

此外, Apps還有一個重要的任務,就是要能跟 online ebook store 直接購買,還要應付無線付費的安全機制.

出版商們, 從上面的分析可以看出, 你們的憂慮是沒有必要的, 因為數位並不會取代你們的內容, 只是你們最簡單只要把內容數位化, 不一定需要Apps, 如果可以, 簡單一點透過 iBooks就好->其實更好 (沒有特殊格式沒有必要自己花經費做App 況且這個 App, 並不會像是 iBooks一樣有這麼多人下載)

自認寫的很清楚, 不過還是可能有點迂迴, 以下來個簡單的條列總結.

1. 擁有良好內容的出版商,並不用擔心被取代, 因為擁有良好的內容是最重要的.

2.形成良好內容的機制不用改變, 像是編輯,總編輯,美編,作家等等.

3.通路跟金流必須有新的觀念.

ebook online store 可以想作是批發商, Apps 則是零售商, 是不是自己搞這一系列, 必須要考量.

舉例: 如果要針對在 iPad上面的內容數位化, 要把 Apps當作是通路, 越多人擁有的Apps,代表通路越廣 (在這邊的通路不是只有指iPad, 是不管是在電腦上還是iPad/kindle上,所有平台能聯繫到ebook store的總和,像是kindle 有 kindle 裝置版, iPad版, 桌機版… 等).

4.另外不要忘了Apps 也是閱讀器, 在數位化的過程可以增加一些實體書本所沒有的互動,影片,遊戲等等,來增加競爭力.不過要顧慮到是否能讓自己的Apps能有很高的普及性,因為它等於你的零售商.

數位化內容是不可避免的趨勢, 早點做準備, 以便在這個數位化的轉變下一開始就有比別人更強的競爭力!

<缺軍師者,請找諸葛龐達>

以下是我歇斯底里對實體書本的胡思亂想.

數位化固然是趨勢,不過實體書本的物理形態,確應該會是億萬年在地球毀滅後, 殘留生物對我們這個現代了解的依據.

就像我們要去了解埃及, 也只能由物理性質的壁畫研究開始, 會不會當時的科技, 是有某種讀取裝置來記錄當時更厲害的高科技,只是以我們現在的角度去看卻不明白?

說不定我們現在make sense的電腦矽晶片等等的電腦技術,對在億萬年後的人們可能就像我們看埃及文物一樣的不解, 因為整個再來一遍的人類,可能不會發現電, 而發現了光速及四度空間也不一定.

小時候的磁片現在已經很難找的到5.25吋的磁碟機? 磁片的內容可能再過50年就是個謎. 以恆久來看, 數位化是對文明延續很冒險的一個進步.

今天發表的是對Apps的一些看法, 可能有一些跟前面相關的討論有交錯重複, 不過這篇主要就是針對這個問題:

自從apple用 iPhone 真正把 mobile devices 從通訊推到資訊大門, 原本一些 “手機只能打電話就好” 的人, 看著身邊朋友在社交中,秀出手機裡的一些玩意兒之後, 也紛紛的受不了去辦了 iPhone/aPhone. 最近連我覺得最不可能去辦的人, 都去辦了, 因為手持資訊已經普及到:

‘沒在電腦前面, 沒辦法 check email‘

的說法變的很奇怪, 應該好像隨時都要可以 check 才對. (就像現在如果有人說他沒有email, 我會覺得他是old fashion一樣…)

隨著這股普及程度, 除了資訊外, 手機上面多了一樣從前在手機上不普及的東西,那就是:  Apps (Application, 應用程式)
(話說Adobe Flash從很早之前就在耕耘這一塊 (Flash Lite) 可惜當時的技術跟定位都不是很成熟,所以Flash現在兵敗如山倒)

在一般電腦,裝應用程式來辦處理事情, 是理所當然的事情, 以這種想法看手機, 似乎也是對的, 好像只差了一點 ‘行動力’
(別小看這一點’行動力’喔! 他帶來的方便性可遠超過在某個定點的資訊擷取. 我認為在web 2.0以後的資訊革命,可都是由整合性/社交性爆發出來的!)

這個”行動力”顯而易見, 不過大家可能沒發現在行動裝置上雖多了行動力,可是卻少了很多應用程式該有的元素.

以下分做兩個方向,理性與感性來討論:

理性

系統+安裝:

這個方面跟本主題的apps的討論,似乎沒有什麼關聯,不過確是造成了不少的影響.

不管打開 windows / marc / linux, 難免會看到一些一般USER看不到的系統檔案, 在 mobile devices這些完全都藏了起來. 當然也看不到所謂的安裝檔.

在現行的 iOS 機制, 所有的 Apps 都要透過上架的功能, 才能讓人安裝, 雖說這樣可以中央控管, 避免病毒,色情,賭博等等的 Apps 在Apps Store裡面亂竄, 但同時以造成了這個機制在使用方面的漏洞.

上次有個朋友想要用 iPad 來做菜單, 不過該菜單不一定是要給所有的人使用, 而是客制化給某家餐廳的, 像這種客製化的, 並不想要開放給大眾的 Apps, 會發生的情況非常多.  現在的解決方法也是相當可笑, 就是讓該軟體停留在測試階段而不上架, 客戶端必須提供序號給開發者, 才能在 iTunes 上面看到該軟體. 這種繞路的方法在一些預想使用方式的規則機制下, 容易產生層出不窮的問題. (Apple 當初應該沒有想到這個部分)

I/O存取:

在行動裝置上面, 系統要求簡潔, 所以不該讓使用者看到的東西, 幾乎都隱藏了起來.想想一些人平常已經抓了一堆Apps, 如果再加上該 Apps 的文件,那整個桌面會是多麼可怕的事情!!!

一般來講, 電腦裡面的檔案撇開一般用不到的系統檔來看, 檔案分做 Application, 跟不同Applications產生的Documents(文件), 像是 .psd 要用 photoshop開, .doc 則是words的檔案格式, 但是在手機上, 在系統裡面好像只能看到Application, 而看不到 Documents?
在iOS裡面, 所有的 Documents 都是打開該 Apps的時候才會出現, Documents 非常忠於 Applications, 如果你在 Brush 畫了張圖,想用另外的程式打開來打一些字, 在現行的 mobile OS 架構, 要處理這樣的情形是相當可笑的.

以iPhone為例子必須要先存到一 Apple內建的 photos 裡面,然後再由其他的程式由 photos 打開.

如果是先在mobile devices上面作業, 之後再交給 desktop / laptop上面製作, 好像唯一的方式是透過email的方式, 所以就算 mobile device椄上電腦,還是得乖乖的打開email來寄, 非常之蠢, 也非常不方便…

難道Apple上萬人的公司會沒有想到這個嗎?  其實這是一個矛與盾的對戰, (以下之前的文章有討論過,我在這邊再打一次(我真熱心啊~)) Apple 如果打開了桌機與iOS之門, 將會很難確保其下所有產品的版權, 像是 音樂, 影片,當然還有 Apps. 為了保護這些, 所以Apple建立了一個像是關卡的管道來控制出境與入境的旅客,那就是iTunes… 然而當初的構想跟後來的發展產生了現在的矛盾問題…

我能想到的解決方法是, 在mobile device的系統介面上面會有兩種模式切換, 一種是 Apps View, 一種是 Documents View, 一般都使用都在 Apps View, 而在Documents View的時候, 如果有兩個以上的 Apps 都可以打開該文件, 則會出現一個選擇menu,讓user來決定要用哪一個 App 打開. (而在一般電腦端, 也要透過一個特殊的軟體,才能把檔案存入 Documents View, 也就是該 Documents 必須要有可以打開的 App 才行, 除非放到 Storage 空間)

操作性:

指標

在手機市場上,不是必要的觸摸多點控制,反而變成了是主要的控制方式. 多點帶來一些方便的操作性,不過在某些時候,手指是不會比筆尖還細的,一些繪畫軟體, 還是得要有比手指精確的控制方式會比較好, 像現在市面上有幾家公司出產電容式的筆(TenOne,stylus…),專門給觸控螢幕使用.
使用了多點控制代替滑鼠,相對的就是少了滑鼠的功能, 或許可以說對應了滑鼠的一些功能:

(X)RollOver
(V)Click
(V)拖曳
(X)右鍵
(X)中鍵
等等

鍵盤

當然觸摸式鍵盤因為沒有回饋的原因,不會比實際的鍵盤好打,除此之外也少了快速鍵.(這方面多說無益,省略)

擴充性:

用電腦用習慣的人,在用掰咖版的行動裝置App,一定會受不了他因為簡易後,帶來的不便性.像是browser少了 share to facebook, add to delicious等功能, 加上如果不是特別為行動裝置所設計的網頁,要一直縮放也是件挺麻煩的事情. 在 iPhone上面已經有人推出 browser 把以上的一些功能加進去, 我想在擴充性方面已經漸漸的有解決方案.

網頁 , 雲端 該不該 Apps:

如同剛剛所說, 以很鑽牛腳間的照字面上看, Application 應用程式, 它應該就像是筆一樣, 並沒有內容的成分, 它應該就是個工具, 不同的工具解決不同的問題, 打字的工具,畫圖的工具,分析的工具,好玩的工具(Games), 或其他好用的工具.

Application的相對應, 應該叫做 Documents, 它必須透過Application來打開, 或者為了怕另一方沒有對應的APP, 自己被自己打開的文件. 這些都是 Document.

會寫 iPhone SDK 的人都知道, 有一個 UIKit 叫 WebView, 它可以把讀取網路的格式秀出來,並且隱藏 browser 上面的 navigation / url bars.

現在很多商家搞不清楚狀況, 把自己公司的東西弄上 iOS 好像是很時尚的行為, 所以紛紛的花錢聘請人製作(因為不懂,所以製作費都比 website 高). 對於這種商家, 雖然讓我賺的到錢,不過我覺得他們早日會倒店, 因為除了超有名的品牌, 才會有粉絲特別經過 Apps Store 的手續去把這類 presentation 的內容下載放在手機裡面. 唯一的好處好像只有離線閱讀而已, 然而這類網站內容通常不多, 何必離線閱讀? 與其做這個不如好好的花錢做一個可以自動切換成 一般 web / mobile web的網站還比較實在.

Apps 之所以叫做應用程式, 它應該就有應用程式的樣子, 像是 content driven 的東西比較接近於文件(Documents)類, 把他做成 Apps, 對我而言感覺怪怪的. (除非他真的很炫,有些東西在browser裡面秀不出來)

除了行動裝置,現在還有另外一 項當紅科技話題, 叫做雲端, 其實說穿了就是

1.在server端(雲端)做運算

2.處理數大便是美的情形

3.到處都可以用的程式

如果雲端的 View 是透過 browser 來呈現,那大可不用作成 Apps, 現在新的 mobile device都搭載有最先進的 html5, 用那個開就好了, 如果browser 無法呈現, 那也只好做成 Apps 讓人下載了.

所以到底哪些該做成Apps, 哪些不該呢?

1.由Apps目前download機制造成的特性, 就是沒法上網的狀態,Apps的東西應該在 local 端, 如果這種情形, 那還是做成 Apps吧.

2.還有,目前mobile device的多點觸控特性, 如果你的Apps有用到特殊的多點操控,那也非得用Apps的形式不可. (所謂的”特殊的多點操控”是不能用滑鼠替代的操控,還有不是基本 mobile web browser上面提供的制式化多點操控)

3.最後最後, Money Talks, 該付費的內容, 可以做成 Apps, 不過文字的話我 Prefer 昨成 ebooks.

總之,該不該Apps,我認為只要在網頁上辦的到的免費事情,都沒有必要做成Apps. 除非你想騙吃騙喝.

感性

正經->裝笑ㄟ->笑ㄟ:

人類雖然科技發展至今, 東西可以越做越小, 不過人卻是越長越高, 所以小東西做小事, 大東西做大事的情形,好像還是天經地義的存在.

根據這些科技產品的大小, 好像漸漸的已經區分成

桌上電腦 >= 筆記型電腦 > 平板(小型)電腦 (eeePC / tablet / iPad) > 手機

Apps 的功能也跟著大小除了有能力的區別,也有笑料的區別.

舉例來說, 在 iPhone上面有一個打火機的程式, 模擬 Zippo 打開->點火->並且火焰會隨著擺動, 還能感應吹氣, 這類的笑料作品, 如果是出現在桌上型電腦, 可能會是個超級冷笑話, 但是在手機上卻是一項很不錯的創意.

到目前為止, 大家不會 Expect 要在手機上面做很 Serious 的事情, 遊戲也是越簡單越白癡越賣!

在這個道理之下, 像是 iPad這種中間的產品, 顯的有些尷尬, 因為它介於認真與不認真之間, 它的大小讓人會想要拿它來幹些正經事,不過這些正經是卻也又沒辦法項真正的電腦一樣, 因為速度及規格的關係, 也沒辦法太正經, 所以它是處在一個’裝笑ㄟ’的區間.

在這邊 ‘裝笑ㄟ’ 應該也可以說身藏不露啦, 在iPad上面的一些軟體,在使用後都讓我嚇一跳, 因為真的是有夠專業, 像是 Korg 的 iELECTRIBE 幾乎是整台桌機放進 iPad 裡面,加上多點觸控, 做到在一搬電腦上做不到的事情.

革命無罪,造反有理, 創意加分, 資本微分

大家現在打開電腦,看看你有哪些程式,之後在看看手機上面的,如果完很兇的人,會發現, 手機上的程式筆電腦裡的還多,出版公司也是五花八門.

我能想像一般人的電腦,可能裡面就一套 MS Office頂多再加上 Adobe Creative Suite, 更專業的加上 Autodesk 3d Softwares, 或是一些剪接影像或是編輯聲音的專業程式,搞財經的有個 專業的 MathLab / 看盤程式, 這些軟體用的製作公司, 用手指都算的出來.

反觀在手機上面, 雖說他在速度跟基能上算是掰咖的電腦, 不過這掰的也很有創意, 因為它雖然掰咖,不過他擁有更敏捷的知覺, 也就是搭配了最新的 sensor 科技, 也因為行動裝置的原因它還多了場域因素GPS,這些科技, 讓一些創意人搞出了五花八門的應用程式, 遊戲,Social Network Apps等等,開發的公司也是沒一個聽過的, 甚至個體戶!

這個機制歸功於Apple 發明了Apps Store, 以超便宜的價位販賣Apps, (在桌機上哪有一個程式是賣0.99的?) 這些現象完全的違反了實行已久的運作方式.

這些思維完全是脫離傳統桌機電腦框架,而且桌機根本也沒必要加上這些sensor…, 反而, 為什麼當初的筆電並沒有想到!?

台灣產業

講到這裡,我想到3年前跟某大公司工設部門的朋友討論的一件事情, 內容遠比產品的造型重要, 當時我還以為做一個作業系統相當的複雜, 根本不太可能會有第四個大作業系統, (Window , Mac OSX, Linux) 當時 eeePC 正流行, 我看到一些國人自己改的Linux 系統, 感到高興, 因為系統才是真正的精神, 其他的指示軀殼而已.

不過業主可能還都在汲汲營營的做OEM,接單, 所以eeePC上面的系統並沒有起來, 反而新的 iOS SDK 產出了十五萬以上的程式, 當初eeePC如果多一些規劃,多一些堅持, 我想應該也會造成像是iPad的旋風!

電腦的Apps 戰場形式已經篤定, 行動Apps的戰場才要開始! 如果能好好的掌握並且在解決這些問題, 我想在這亂世應該可以出個梟雄的!
(如果有缺軍師, 請寫信給諸葛龐達)

第二期數位典藏國家型計畫（National Digital Archives Program）主要目標為擴展數位典藏公共資產，促成典藏內容與技術融入教育、研究、產業與社會發展。為達成此目標，針對不同族群與產業層面，協助改善 數位落差與近用能力方面，數位典藏資料平台之互動設計良善與否，擔負非常重大的責任。本網頁設計競賽與其他相關競賽之不同，旨在推廣數位互動設計不僅是視 覺創意或技術之呈現，更應強調使用性設計(usability design) ，此符合使用者中心設計的主要核心概念。希望藉由本次競賽，圖拋磚引玉，讓相關設計開發人員更瞭解使用性概念之重要性。

以下是在dbox的作品最進更新, 這些並不完全是我設計跟我做的, 應該說是所有的同事一起努力, 利用我規劃的機制完成, 加上我的,各部門的,客戶的及彼此同事的綜合意見,達到最後的結果.

internationalgemtower.com

theashleynyc.com

playagrande.com

pearlisland.com

2003年的時候,我剛畢業,抱著一顆興奮的心情去R/GA interview, 面視官之一就是 稻本零, (其他的都忘記了,因為稻本零長的最帥,幾乎是全場的發言人)

當時interview完,他丟了一句,我不曉得你為什麼找不到工作? 後來他們還是沒有錄取我, 可能是911後經濟超不景氣吧.(那年畢業生,幾乎全部回國發展了)

六年後,稻本零已是 AKQA 創意長.

去年底餐加了i@T舉辦的互動創意講座. 講師陣容堅強,包括:

稻本零（Rei Inamoto），舊金山獨立數位廣告公司AKQA創意長

伊藤直樹(Naoki Ito)，東京GT. Inc 點子人（Idea Man）

田中耕一郎(Koichiro Tanaka)，東京Projector 創辦人暨創意總監

稻本零

帥勁的Rei,是三者唯一在跨國際的美國公司,他的Presentation相當的前後呼應,有調有理,最後還把重點都重複一次,相當專業,我想他應該經常演講.

Rei 主要是說明時代的不同,以往數位媒體+廣告公司的方式將會被新的web2.0傳播方式漸漸取代. 重點分做:

Start from the other end

Supersonic (NIKE + Web2.0 )

Click here to view the embedded video.

利用活動的方式, 預賽在倫敦錄製成節目, 優勝者可以獲取參加馬拉松比賽的資格,整個過程利用myspace直撥,似乎還有用到tweeter之類的?

To predict the future, invent it

USPS + augument reality

Click here to view the embedded video.

利用 AR 技術, 讓使用者了解他需要多大的包裹箱子

It’s good to be first, it’s better to good.
It is best to be both.

VW Gti iPhone game

Click here to view the embedded video.

把廣告做成遊戲,並用比賽得到免費車子作為獎品

xxx

由Rei的演講及他舉的例子, 不難發現他擅長運用最新的科技並且跟廣告做結合.

聽完他的演講啟發了我一些想法:

• 網際網路剛開始流行的時候大多數是以自己架設一個主要官方網頁為主,使用者必須知道網址才可以連到這個網頁 -> 效應:好名字的 domain name變的很貴
• Google search 也是一個管道, 要在某些關鍵字上排列前茅, 也是人家找到網站的要點 -> 效應: 大家狂做 SEO/關鍵字行銷
• Web2.0所產生的族群, 以往獨立網站的概念逐漸瓦解, 不知道網址的人, 除了Search engine之外, Tweeter / plunk / facebook / blog / flickr / myspace 等也漸漸變成傳播資訊的主要平台

伊藤直樹

Love Distance

Click here to view the embedded video.

伊藤直樹以站遠一點的角度去看待宣傳的主題, 以 Love Distance – Sagami condom 為例, 他把保險套廣告轉換成一個活動, 由全日本徵求一對情侶, 一個在北,一個在南(一個從北海道, 一個從京都?),然後開始往日本中部跑1000km的馬拉松,並且在網路上實況轉撥, 也發表剪輯之後的廣告成品. 在廣告片段上不斷的用數字來顯示他們之間的距離, 一直到最後兩人擁抱, 0cm, 然後再把數字拉大, “愛需要一點距離 – Love needs distance – 0.02mm sagami original”

這個廣告, 從愛情出發, 用很大距離的馬拉松方式強調產品超薄的特性, 最後用有點反向操作的”愛需要一點距離”的巧思帶出保險套的特色, 讓人會心一笑, 實在是很有人性跟創意的作品.

整個活動實況轉撥做成影片節目, 不僅讓整個作品跳出一般影片廣告的範圍, 也以很巧妙的方式利用到web2.0的特性,除了有創意之外,在宣傳的方式上面也非常聰明.

Helicopter Boyz

Click here to view the embedded video.

另外一個作品是日本味十足的 nikon 微型投影式數位相機, 利用搞怪及反向思考, 以一個很怪異的兒童舞蹈表演來展示產品的特性, 由於整個影片內容很奇怪, 所以造成了朋友之間互相轉寄的病毒式行銷, 這個轉化也算是達到了效果. (這個方式讓我想起了msi 魔高一丈的超薄電腦影片…不知道是被人惡搞還是商家刻意製作)

Click here to view the embedded video.

田中耕一郎

Uniclock

田中先生的大作 uniclock, 利用舞蹈的節走與時間突顯 uniqlo 衣服的色彩樣式的特色.

田中的經歷跟其他演講者略有不同, uniclock的創作流程跟出發點, 剛好是其他的相反.
他早期興趣是電影製作, 可能在收入跟競爭的壓力下, 他可以轉戰電視短片或是電視廣告影片,不過他選擇了新的方式 – 網站互動影片.

在 uniclock的製作過程中, 他以影片出發,嘗試的根uniclock的服裝行銷做結合. 在摸索之中最後產生了這一系列藝術性相當高的作品.好像看著可愛美妹歇斯底里的跳舞不管男女都有一種樂趣…

uniqlo calendar 則是 uniclock 之後衍伸出來的作品, 把 uniqlo 的企業形象跟日本文化做結合, 讓uniqlo不只是大眾口味的衣服, 更是把日本文化行銷到世界各地.

田中先生的創作過程比較不像是廣告策略的商業運作發想, 而是類似藝術創作的嘗試, 讓我回想起學生時代做設計的熱情跟態度. 工作之後,在客戶的要求, 商業策略的介入, 原始創意往往會受到限制, 久而久之會開始妥協而因循故往, 喪失掉了學生時代的初衷, 田中先生能在 uniqlo 這個大企業中執行自己的原始想法, 我感到十分勇敢,直著及欽佩.

這次研討會的三位講者都用了他們自己的方法利用 web 2.0來行銷. 雖說不應該依賴技術來發想創意,但以創意出發來利用技術,刺激出來的火花,我想是此次演講最重要的心得.

全球苦哈哈的氣候下，不景氣有不景氣的做法。Uniqlo讓你在家裡也能坐享runway show的前排。在Bryant Park New York Fashion Week如火如荼進行時，讓我們翹著二郎腿喝杯熱茶優哉得欣賞平民時尚吧!

這是在舊金山舉行的Apple的WWDC展出的一個電視牆, 基本上就是把現在可以在app store裡面可買到的application的icon按照顏色組合成這個grid, 如果有人從app store買了application, 他就會及時的在這各電視牆上的那個icon產生一各ripple, 象水面的漣漪一樣, 相當酷, 也讓人覺得商機很大

一切都歸源於次級房貸風波, 之前願者上勾的公司網站,也被迫重新定位, 目的在於招攬更多的案子.

策劃 SITE MAP

公司經營十來年,服務項目不斷的擴張, 依據製作項目分類可以有以下這些業務:

• Illustration – 3D Modeling / Rendering…
• Photography – Fashion / Portrait / Architecture…
• Graphic Design – Logo, Brochure, Copy writing…
• Web – Website, Interactive Kiosk…

加上公司簡介跟成員

• Company Bio / Info
• People

大致上可以分做五大資訊內容.

PS: 就像上館子吃飯一樣,有時候有趣的名字會給人有好奇心,或是高級感:

沙茶炒空心菜  -> 馬來風光
豆辦醬炒粉絲  ->螞蟻上樹
辣牛肉肺片 -> 夫妻肺片
等等

應該是類似的道理,我們開始依據target客群的策略,再把內容分類重新劃分一次:

Intro:

因為之前網頁太少資訊,所以這次開門見山, Company Bio: 變成三個問句放在最前面當作 intro, 告訴大家我們在幹麻…

原本的設計是擺三個問句在那裡,右下角放一個 ENTER. 不過有人根本不知道那可以rollover,所以我們決定要起碼 rollover 一個以後,下面的黃色的 bar 才會跑出來,用黃色是因為他夠明顯,而且也是敝公司的 CI 顏色.
ENTER 則改成 MENU, 因為之後每一個 section 都會有這個按鈕, 我們決定利用intro的時候先讓人使用,也算是介紹他的功能.

Menu 從單字變成一個句子

Illustration

• CGI still or in motion?

Photography

• photography?

Web Design:

• fancy an interactive experience?

Graphic Design:

• brand, design and re-design!
• do you need to position or shift some property?

Info

• want a magic dboxDVR?
• please contact dbox

People

• hungry? No really, are you hungry?

之後在把句子藏起來,除了讓版面看起來簡單,同時引起 Viewer 的一些好奇心之外,其實還有一些策略性的模糊地帶.

本公司很多客人是 broker, 或是紐約的大型房地產代銷公司(就像台灣的信義房屋）, 基本上這些代銷公司都是打著 Branding / Marketing 的號招,招攬地產開發公司. 而本公司在裡面扮演的角色就是提供設計跟視覺上的協助, – 但是 – 我們公司也想要開始朝 Branding 這塊發展, 那就可能會招惹到一些我們現有待消公司,因為業務重疊, 所以我們將一些字藏起來, rollover 的時候才會出現.

一般地產公司的人會來看我們的 CGI / Property 部份, 可能會略過 Branding, Design這個部份,所以也就比較沒有關係, 我們的目的是要 隱藏我們的目的,老闆說這個事道下, 有時候得玩一點躲貓貓的遊戲… <- 這其實是用介面的互動,把句子藏起來的主因.

另外,在成員方面, 我們不想用一般的方式來介紹公司成員,所以決定用比較另類的方式: 大家煮東西放食譜上去,當作是成員介紹.

PLUG-IN 機制

除此之外我們為了因應現在多變的市場,我們把所有的內容模組化並且獨立,也就是說從 intro 到 上述主要目錄,都只是個 launcher, 其實所有 sections 都是獨立的小型網站,也就是說他們可以用 deeplinking 或是獨立的 URL 路徑方式進入,像是 http://www.dbox.com/cgi 或是 http://www.dbox.com/interactive.

這樣一來可以針對不同的客戶,很快速的拿掉或增加內容,雖然說有點詭異,不過我想針對現在變化多端的市場,這一招算是很妙.

在製作上,我把應有的內容分成一些 template, 之後要增加的話, 只要編修 xml 就可以快速的讓 sales 拿去簡報, 是一個很 powerful 的 presentation tool. 必要的話還可以在主網站增加 menu(隱藏小句子那個), 變成官方網頁.

分開來做還有一個好處,就是 Google Analytics 會很開心,而且 SEO, 也比較好做.

技術

這次開發在技術上大多 recycle 之前有的 code, 整個開發到完成時間不到一個月, 在 website 部份, 四個人製作（但大家都還是有別的案子在跑）,兩人程式, 一人 video 設計 + 剪接,一人處理校正資料.
在程式技術上並不是太難, 主要著重於控制 loading 時間, 依據不同螢幕大小 load 不同的圖片以確保最好的影像品質, 全螢幕及圖片播放的預先 loading, 還有 sections 之間流暢簡單的轉場, loose deeplinking, google analytics, xml based content, & SEO(未完成)
剪接部份一人擔綱, 在 interactive 部份, 針對每一個影片的特色, 擷取 3-4 段精華, 來表現該網站
總而言之 : 製作並不難, 細部調很久.

LOOP 影片

本 站花最多心力的就是這些 Loop 影片了, 橫跨歐美亞洲, 幾乎動員了公司全部 3D 的人, 連老闆假日都跑去拍, 看來大家玩得不亦樂呼, 這些影片營造出的 “氣氛”, 大概就是本站最大的特色了, 一開始各地的工作夥伴紛紛寄來了許多影片, 在經過很嚴格的篩選跟 loop 的編排之後, 還根據每一片的內容, 一個個分開壓縮, 最後在依據 section 的種類做配置.

在配置方面, 應該一般人都會選很直接能連想到的影片, 不過這樣是不是就淺了, 所以我們在選片的時候, 都刻意的偏離一點, 跟該頁內容保持一些安全距離, 才不會讓人覺得 “看圖說故事”, 也讓人比較有聯想空間, 及新鮮感.

之後可能要開始加入聲音, 再度加強氣氛, 不過我想會是跟頻寬 / 流暢奮戰的掙扎.

DESIGN TASK

這個案子我主要扮演的腳色是設計諮詢,溝通跟整合,從寫一堆code變成講一堆話跟寫一堆email… 發現其實這個工作並沒有比較輕鬆,所以如果你還是在做事的人,千萬不要覺得管事的人很爽啊,因為我們除了要知道每個人在進度,做最妥善的人力派遣之外,還得多想好幾步,分配每一步的時間,詳細的步驟,然後溝通,最後還要承擔成敗的責任~

這次的網站設計,我主要想要達到的目的是用最少的 interface design 去 support 基本的  navigation functionality.裡面有的自動導航功能(auto pilot), 所以地產開發公司的大爺們,可以只按幾下滑鼠就可以看完整個網站.

原本以數字形態最為圖片庫的分類,顯示了比較沒有意義的圖片數目,之後換成羅馬數字.

大部分的介面上有用到 I,II,III… 等等羅馬數字, 這是用像是書本章節的概念來增添影像的故事性,同時每一張圖下面都有編號,這樣讓 tel conference 的時候,會比較好溝通. Interactive 的部分, rollover 會有影格往上延伸,這算是唯一本站在互動上的 eye candy 了,因為我們決定在這個 section 加一點 eye candy,單是又要保持住整體的 tone 調.

在這案子我想要達到”無我”的介面設計(就是連一個特別的 icon 都沒有),並且用 rollover / off 來show / hide 圖文,達到很簡潔的視覺經驗,有些地方可能會 try and error,不過通常在你開始有一點點困惑的時候,答案應該就會出現,所以一切在使用上,保持了一點探索,並維持一致的 rollover / rollout 簡單的互動模式,整體界面還算直覺.

本站的設計目的是希望觀眾在看完網站之後,對 interface 毫無印象,卻對網站裡面的內容及留下記憶.

During this design progress, I try to use minimal interface design to support essential navigation functionality. So viewers can focus on content and won’t even notice of / surprise to anything cool / special on the web interface.

Nike SPARQ has been nominated Interactive Advertising> the Rich Media: B to C category and the Rich Media: Promotional category.

Nike Football Head2Head has been nominated for Interactive Advertising > the Game or Application category.

http://gravatar.com 已經出來許久,說實在的他也沒幹嘛,就是讓人放個照片/icon在gravatar的server.

今天我在 RecentComments 裡面加了這項功能, 可以顯示個人化的小圖示. 他的運作很簡單,就是在 gravatar 上面放一張小圖片,之後如果有這個機制的 2.0 網站(一般是根據email的樣子）,就可以顯示出來.

gravatar 可以依據設定,還可以設定G/PG/R/X等級的圖示,根據顯示端設定輸出不同大小的圖示,也可以random generate不同的樣式給沒有設定的人

現在流行的 blogger / wordpress…等等都有支援,沒有的人可以去申請一個.(FREE)

PS: gravatar 用 md5加密,所以在傳遞的時候不用怕個人的資料被偷竊… 應該是這樣子吧…

Gravatar implementor’s guide

這支廣告引起了廣大的remix版本,是一之相當成功的網路廣告.

初看 The Glue Society 的網站,介面很像ipod, 字體滑鼠都很大,感覺設計師在跟客戶嘔氣…

hey guys, i just updated my new showreel, hope you like it!
http://www.letinmotion.com/letinmotionREEL.htm

Grid:
對於 Dynamic Website, 所有資料都是從 database 輸入, 網站管理者會輸入多少的圖文量並不像平面設計一樣,對固定的每篇文字可以做字量,字型,字距,或是行距的細部最佳化. Dynamic 填入網頁內容,圖文的視覺部分本身控制比較不定,但是也可以用雜誌書報慣用的格線設計方法來解決. 不過不同於一般平面設計的頁面大小已經確定,網站必須考慮到變動的Browser頁面大小(例如小電腦的螢幕較小,或是安裝一堆browser tool bar的寬高也會佔掉不少.這些都要考慮到)
定義好格線框架,整個網站基本的圖文分布可以底定,至於內容圖文的變化,就可以在這框架內做有趣的變化.

前篇提過,Front案的寬度是固定的,而高度則是依業面大小取80%來使用,所以橫向的Grid如果至上對齊,短一點的內容會讓整體頁面都浮在上半部,所以我還是將內容部分居中,而navigation部份則保留在 80% 的大小,這樣一來整個頁面在視覺上還是會造成一個版面範圍的整體視覺效果,而不會造成navigation靠到四角與內容分開的孤立情形.

Navigation:

瀏覽機制一直是我認為的flash website技術跟設計的重點

技術方面:瀏覽方式設計完成,其餘就只剩內容的讀取與卸除. 如果加上 Deeplinking 的機能,整個瀏覽系統會更符合客戶需求,不過在 F 案裡, 所有的 menu 全部都是及時從 database 產生, 製作 Deeplinking 幾乎花上我好幾倍的時間製作…

瀏覽過此站的人不難發現,整個網站的重點其實是在 Works 裡面, 當初我的規劃是將 Works 獨立出來,其他的Menu放在另一邊, 這樣一來可以直接突顯主要Content, 不過再 presentation的時候,這個訴求反而不被客戶接受, 客戶認為此站並不想要特別突顯作品部份, 會顯的有點 show off. 所以還是決定將所有的 menu 放在一起.

現有的 Menu 運作規劃 idea 來自 ipod, 從前ipod的設計, 除了一層層進去外, 按menu要一層層出來,或是直接跳到第一層, 由於螢幕小,所以這樣的設計非常恰當, 不過當初在使用的時候, 發現小螢幕把瀏覽簡化了, 但也帶來了一些隨之而逝的方便, 所以我把相同的 idea 用在螢幕範圍大的網頁上, 加上將選取後的menu也呈現出來, 讓user可以方便的直接跳著點回去上層或上上層選單.

同時在整個頁面的區域上,變成 logo 以左的是以選取內容,也是現在你正在看的內容,logo右變則是你可以選取的下一個內容, 這樣的區域分割乾淨簡單明瞭,並且把滑鼠的運作區域留在左變,不會按鈕散佈各地,讓人不知從哪邊按起.

在製作的時候發現了第一層menu也會是最後一層 menu 的標題, 而最後一層標題對應內容的內容部份,也可以是歸類的屬性之一,於至我把這兩者之間的關係用動態表示出來,一來形成向太極一樣的迴旋動感,二來,所有的動態都是 menu 跑來跑去,在最後一頁的資訊,直接可以讓人有所有的文字都是可以點選的意圖.

Visual Style:

在 Visual Style方面, 在製作之初就遇到兩大難題:
1. 客戶的圖片幾乎都是未加修飾的照片
2. 不能有太多的裝飾線條,圖形點綴 (客戶是那種很小心的人,認為用錯一些設計導致的尷尬,不如什麼都不要那種)

解決1. 的方法就是用版面的設計去蓋過圖片的不完美, 不過這又牴觸了2.
在乎相矛盾之下我決定誘導客戶讓他們接受一些很基本的元素. 我成功的用圓形擄獲了老闆娘的支持. 所以好不容易才在網站上有了圓形這個元素…

把圓形用於代表project的元件上之外, 要用圓形做所有的界面似乎不太可能, 很多內容還是必須要有方形的元素才可以完成, 所以每個 section 的過場加上了一個大圓,讓大圓變成一條線,在轉成方形,這樣就可以用圓形來貫穿整個網站.

Project Items:

原本的設計並非用小圓形,而是以一個很大的甜甜圈形(中空)呈現,在視覺上比較獨特, 不過跟客戶開會時,他們覺得這個甜甜圈形非常搶眼,讓人印象深刻,不過跟他們的branding以及整個形象並沒有任何關連,所以要求改成基本的圓形即可.

在設計的時候,有時候只顧及到整個視覺的呈現,卻忽略的真正或隱藏在裡面的涵意, 我想常常會是設計師的盲點,在這個案子的製作過程裡,我上了一課…