我想現在大家應該沒人不知道QR code了吧，在網站上、平面海報、電視牆、甚至你的發票上都會出現一個小小黑白黑白的方塊，只要拿出你的智慧型手機，輕輕地掃描一下，手機就會帶你去那個code裡面的內容（雖然大部分都是廣告），不過既然是繪畫教室，我們就不探討怎麼利用QR code讓你的事業更成功、如何交到女朋友或是男朋友之類的，這裡只教你如何畫畫。

Source: wikipedia

我們先來介紹一下QR Code的歷史吧，這個一開始是由Toyota下面的Denso Wave在1994年發明出來的，本來是用來追蹤車輛的，後來發展到現在大家都熟知用法，QR code一共有40種Version，第一種也是最簡單的一種，一邊有21個點（21 x 21），每多一個Version，每邊就會多四個點（舉例：Version2 就是 25 x25），到了Version 40，一邊有177個點，點越多，可以容納的字數就越多。根據訂製的規格書，QR code可以放四種東西，第一是數字，第二是英文字母加數字（和一些標點符號），第三種是8 bit的二元碼，第四種是日文（好吧，因為這是日本人發明的）

每個coding 系統都會有所謂的錯誤修正碼（error correct code），這些碼是外加在原本內容上面的，主要以防這個 code在傳輸時，中間有些數字或是點被弄髒、弄丟了，我們可以借用這個多餘的數字來還原我們原本的內容。QR code用的是Reed-Solomon error correction，這種麼算的，我們這裡也就不介紹，只要知道一點就是，這個演算法需要修正碼長度等於要修正的碼的兩倍，聽起來像是繞口令是吧，聽我講個例子就會明白了，假如說你的內容有100個字，在你傳送時，有50個字消失了，假如你需要復原那50個字，你則需要100個字的修正碼，所以你需要傳送 200個字（其中100個字是修正碼），然後你可以修正50個字，換句話說，你可以修正25% （50/200）的內文，目前QR code有定四種修正等級，最高可以回復到30%的字串。

source:http://www.swetake.com/qr/qr1_en.html

好吧，我們來看看真正的QR code是怎麼形成的，上圖是一個Version 1的QR code，一邊有21個小方塊，各位看到那三個黑黑的方塊了嗎，那是用來辨認方位的，所以程式在掃描時，可以確認位置，那三個方塊中間被一個像是斑馬線的線連起來，那兩條是用來讓程式方便辨認座標的，黃色區域是Code的內容並且加上修正碼，那各青色部份則是一些格式的設定（像是你要哪種的修正等級之類的）。

我們先來填填黃色區域，假設我們想要把文字”ABCDE123″ 轉成 QR code，一開始，我們要先告訴這內容是哪種型態（數字、文字、還是日文），看我的文字是屬於字母加上數字型，在QR code的定義裡，這是0010（別忘了，在QR code的世界裡，只有黑點跟白點，也就是0跟1），這也是黃色區的起頭，接下來，我們要告訴decoder，這串文字有多長，那串文字一共有八個字母，在二進位中是1000，在Version 1-9，QR code給你9 bit來定義長度，所以前面要加上五個零來湊成9 bit，所以我們的字母就便成了

0010 000001000 （前四個是型態 後九個是長度）

source: wikipedia

接下來我們要來進入真正的文字內容了，大家看看上面那個表，每個數字和字母都有一個代表的值，在QR code中是用每兩個字母來分別編碼，每兩個字母給你11 bit來用，用我們上述的例子，我們得把內容分為”AB”, “CD”,”E1″,”23″來看，先來看”AB”，A在那個表中是10，B是11，QR code規定的計算公式是用10x 45+11 = 461，為什麼要乘以45呢？大家看一下那個表一共有45個值（有點像是45進位），然後我們再把461換成2進位也就是 00111001101，在加上我們之前的編碼就變成了 0010 00000100 00111001101，以此類推，我們也可以算出”CD”, “E1″,”23″的值。

等文字全部都轉換完成 我們在結尾加入 0000當做結尾，最後得出以下的字串

0010 000001000 00111001101 01000101001 01001110111 00001011101 0000

我們把這一串數字整理一下，讓它變成8 bit 一組，假如不足8 就用0把它補足

00100000 01000001 11001101 01000101 00101001 11011100 00101110 10000000

我們現在得到了8組 8 bit的數據，但是即使在Version 1 和最多的修正碼下，QR code可以容納9組 8bit的數據 (看表)，所以我們在後面在填上了一組11101100 （萬一要填兩組以上，第二組要填 00010001，第三組再填11101100 輪流交替填這兩組直到到容納上限為止）

00100000 01000001 11001101 01000101 00101001 11011100 00101110 10000000 11101100

好了，這就是我們所有的內文了。

source:wikipedia

接下來我們要學怎麼來填這個格子，我們來看看上面這張圖，填格子要從最下面左邊開始填，你可照上面的，先填四個，以後都是八個八個填，也可以直接用8個來填，這個規則是這樣的，先往左邊填，兩個一組，填到第二個，退回原來一個，然後往上，萬一不能往上，就往下，萬一不能往下，就往左（反正無論怎樣都不會往右就是了），假如字串是0，就不填，是1就把格子塗滿。

最後畫出來就是這樣，大家會不會覺得奇怪，怎麼畫出來有點少阿，還有老師是不是作弊，明明就只需要黑筆，為什麼最後出現紅色呢？畫出來有點少，是因為我們還缺乏修正碼，那些紅色的條是拿來填格式的資訊的，我先把它塗紅下來，免得畫錯…（好吧，我還是做了點弊），至於怎麼補那些紅條和剩下的空白呢？那請各位期待102拉。（其實是老師黑色筆沒水了）

最後在這個聖誕夜，想祝大家佳節愉快，或許在台灣感受不深，不過聖誕夜可是西方重要節日，希望大家都有一個美好的聖誕夜。

參考網站1:http://en.wikipedia.org/wiki/QR_code

參考網站2:http://www.swetake.com/qr/qr1_en.html

加入MMDays在facebook的粉絲團 隨時閱讀最新文章

對於 HCI (Human Computer Interaction) 研究的熱愛，讓我對任何新創的互動技術都非常感興趣，閱讀最新的 SIGCHI 或是 UIST 論文 （HCI 領域中的兩個頂尖國際會議，一個在春天舉辦，一個在秋天舉辦） 便成了我每年當季的固定嗜好。因為幾乎每一篇 paper 我都會掃過去，因此也就會順便注意一下當年的研究大概都是從哪裡發出來，這有助於歸結一下每年的研究趨勢之外，還可以推估一下產學界的發展變化。像是今年的 UIST 有高達一半的 paper 的作者是從業界或是業界的研究機構投稿過來，這或許已經說明了 HCI 的研究在業界的心理地位：“值得投資的領域”。這或許是因為 HCI 研究的議題範圍多是科技產品互動設計相關，而其產出又容易申請專利，並且容易產品化之故。

Chris Harrison

(圖片來源：Justin Merriman)

因為每年都在掃這兩大國際會議，因此有些常勝軍的名字自然就會常常出現。其中有一個人在很早的時候，就已經擄獲我的眼光，那就是 Chris Harrison，一個年紀跟我相仿，但是比我高竿個幾百倍的天才。這邊我對於 Chris 的佩服不在於他想出來的技術有多麼艱深，而是在於他的眼光跟思考路徑竟是如此的獨特。通常一個人很努力擠上一篇頂尖國際會議就很不錯了，不過這位老兄每次一出手都是三、四篇，而且每一篇都相當精彩，而且想法極其獨特。今年的 UIST 上，這位傳奇又再度入選四篇。因此，在為文介紹 Takeo 跟 Baudisch 之後，我決定在這次的 UI 眾神系列當中，來介紹這位 “博士生” 如此特出的研究歷程。一個博士還未畢業就已經註定要成為大師的 Novel Interaction 天才 — Chris Harrison.

Chris 的 project collections

(圖片來源：Chris Harrison)

天才的稀有性在於他們真得很不一樣。觀看 Chris 的個人網頁像是在看一個萬花筒一般，每個面向都非常獨特，這個人似乎有用不完的精力一般，很難想像我們都是只有 24 小時的人，而他的人生卻是比普通你的我豐富了數十倍。對於從事的每一個值得註腳的事情，Chris 都把它放到網頁上了，似乎是在向世界大聲吶喊著: “別忽視了我的存在！”。Chris 的興趣非常廣泛，這也呈現在他的選集裡面，包羅萬象包括了資訊視覺化、攝影、手工藝製作、互動藝術等等都在他的每日行程裡面。

Chris 的旅遊行腳

（圖片來源: Chris Harrison）

而最令他感到驕傲的另外一件事情或許就是他的行腳已經踏遍了全球超過 50 個國家，而且這個數字還在向上累積當中。所以，如果你以為他每天只會宅在家裡做研究寫 paper，那就是對天才的另外一個誤解。顯然我們永遠也不知道為什麼這個人可以集如此多的才華於一身。

當然他的優異研究也讓他連續兩年獲得 Microsoft PhD Fellow，並且在 2009 年起擔任 ACM XRDS 這個學生旗艦雜誌的總編。所有的天才大都是小時了了，大了也佳，Chris Harrison 顯然也是屬於這種人。Chris 對於科研的熱忱似乎從很小的時候就展現出來了。然而真正有紀錄的時點是從他高中開始，他以學生研究員的身分到 Curtis Instruments 這家公司研究充電電池自動最佳化的平台。回想起我的中學生活，似乎連電子是什麼都還沒搞清楚哩！

其後，Chris 進入了紐約大學的數學科研所（Courant Institute of Mathematical Science），這個科研所是美國最頂尖的數學科研所之一。不過，Chris 只用了四年就取得了大學跟碩士學位，並且還在其間去了 IBM Research 跟 AT&T 的 Lab 做了研究。顯然時間對他來說不是什麼特別的問題，而似乎也沒有甚麼特別難的數學可以阻礙他的直覺思考。然而或許數學的世界對他來說太過無趣，而他還是比較喜歡一些工程上面的發明，因此他在博士班的時候跑到了 CMU，當然他所跟隨的也是當今的 HCI 大師 Scott Hudson. 在 Scott 的指導之下，Chris 第一年就投上一篇 UIST，並且在隨後開竅了，然後發論文就像流水一般了。這邊我就選擇幾篇 Chris 於 SIGCHI 和 UIST 的研究來當成他的研究主軸來介紹他：

2007 UIST: 初試啼聲：進度條的啓示

在進入博士班的第一年， Chris 就用了一篇名為 “Rethinking the Progress Bar” 的論文順利地進入了 HCI 領域的最高殿堂。在這篇研究中，他們發現不同的進度表現方式，使用者感受的確會有所不同。他們一共研究了九種不同的進度表現方式，最後得出了一個結論: 測試顯示的結果告訴我們，凡是曲線中有明顯停頓的，使用者所感知的進度都比較慢，而進度中一直在加速的，使用者都會覺得進度走得很快。研究者們還指出雖然一個穩 定的系統應該使用線性的進度條，但是如果能應用加速型的進度條，確實能小幅地改善用戶體驗。但是當進度並不能被準確測量時，進度條並不是一個很好的選擇， 實際情況下可以選用不斷重複的動畫來代替。這對於一般的軟體設計者來說或許是個不錯的啓發。

2008: SIGCHI: Lean & Zoom

從這篇論文開始，Chris 開始對輸入裝置感到興趣，而開啓了一連串的 Novel interaction 的研究，包括硬體的發明以及改造。這篇 work 非常簡單，Chris 發現筆電現在都有一個 webcam，應該可以做些甚麼來改善甚麼現狀。他的直覺思考，馬上就讓他想到了 Webcam 可以來解決自動 zoom-in 跟 zoom-out 的問題，只要使用者比較接近就自動放大；相反地就縮小。

2008: UIST: Placement Aware

對於影像這件事情，Chris 似乎受到了啓發，因此隨著這個思路而去，他組了一個成本非常低的感測模組 (sensor module)，這組模組的零件沒有一樣你在光華商場會找不到。組成元件包括紅外光 LED, 紫外光 LED, RGB LED, 然後再加上光敏電阻以及光感測 IC. 透過實驗，Chris 發現不同的材質的反射率不一樣，也因此透過這樣子的搭配，這個簡單的模組就可以辨認裝置是在哪種環境裡面。

2008: UIST: Scratch Input

天才跟一般人最不同的地方就在於當他們看到一個問題時，會觸類旁通看到其他的機會。用不同的光譜可以感知不同的介面，那麼用聲音似乎可以達到類似的效果。不過這次，Chris 不是要感測不同的輸入界面了，而是利用使用者刮著表面所產生的高頻來偵測判斷不同的手勢。透過立體麥克風的收音，就能夠達到非常驚人的效果。

2008: CHI: Dynamically Changeable Physical Buttons

同年，對於 “表面” 這件事情，Chris 似乎有很多想法。不僅在同年的 CHI 的 Texture Displays 這一篇中討論不同的表面材質如何帶來被動的反饋之外，在這一篇論文中，Chris 提出了結合 visual display 可任意變化的好處和實體物理介面提供觸覺回饋的好處；簡而言之，就是一個可以變形的實體介面，也就是最近非常受到關注的議題：有機界面 (Organic UI)。在這一年 CHI， Chris 又投上了三篇。所以在這一年裡面，他就投上了五篇 top 的 paper, 這還不包括他的一些其他 conference 的作品。

2009: UIST: 磁力介面 Abracadabra

持續對於各種輸入介面科技的關注，從光到聲音，在這一年 Chris 把腦筋動到磁力上面。利用磁鐵跟電子羅盤，一個創新的嶄新超距力互動介面於焉誕生。說實在的，有時候，創新這件事情總是天外飛來一筆，而天才跟一般人的不同在於，他飛過來的筆數總是比你多。

2010: CHI: 身體介面 Skinput

時序進入 2010,  Chris 對於各種不同可能性的介面的探索沒有終點。現在他把思緒移到了身體上面來。憑著之前 Scratch Input 的研究，讓他瞭解到了利用麥克風可以收音來判斷 input 的手勢後，他思考著或許裝著一組麥克風也可以收取皮膚上面的震動。利用機器學習 （machine learning）的技術，他成功了，而且這篇研究也登上了 Best Paper. 而這一篇研究僅僅只是當年度他投上的四篇研究之一。他有另外兩篇也被提名為最佳 paper.

2010: CHI: Minput

相較於 Skinput 的科技重大突破，Minput 似乎就有點像是 Chris 在吃飯吃到一半順便想到的 idea. 他想了想，結合兩個光學滑鼠的 sensor，那他就可以 enable 一個小型裝置上面的 2D 平面上的 gesture, 來解決小螢幕遮蔽的問題。於是 Minput 就這樣子順便被做完了，也順便寫了一篇 paper, 因為 Minput 用的軟體介面跟上一篇 Abracadabra 是一模一樣的，完成起來沒費甚麼功夫，估計也是吃完飯順便就做完了。

2010: UIST: TeslaTouch

這一年他跑去了 Dinsey 去做 HCI 研究，當然還是 focus 在 input 介面上面。他們利用了電震動 （electrovibration）的方式來模擬各種可能的介面的摩擦阻礙。當然實際上介面沒有震動，而是你的手指頭因為電位的變動的關係而產生的錯覺。當然這個技術非常有商機，因為來自芬蘭的另外一家公司用了相同的技術，而且已經進入商業化階段了，或許明年我們就會看到這種技術的產品了。

2011: CHI: 會動的 icon: Kineticons

就像是個有無限精力跟創意的人，或許是在用 iPhone 的時候，他受到了那些抖動們的 icon 的啓發，讓他覺得讓 icon 動起來似乎非常有意思。因此他決定設計一連串會動的 icon, 並且制定這些會動的 icon 該怎麼來使用。一連串的使用者測試當然是免不了，如果對於想要設計會動的 icon 的人，或許 Chris 所制訂出來的 guideline 對於你會有相當的啓發。

2011: UIST: ObliqueLCD

大師唾手就可以取得題目，得來全不費力氣。 Chris 在電腦螢幕前，突然發現好像用不同的角度看所顯示的顏色不太一樣。這個發現又讓他可以利用空閒的時間來做做 “娛樂性質” 的研究來打發他那無聊的時段。於是這篇超級短只有三頁的 paper 就在他茶餘飯後完成了。當年的 UIST, Chris 又投上了四篇。

2011:UIST: OmniTouch

Chris 對於不斷地提出各種可以被 Touch 的介面似乎樂此不疲，而且他每年總有很多想法。看到了 Kinect 之後，受到去年的 LightSpace 的啓發後，他覺得似乎不需要這麼麻煩地在天花板架三個 Kinect, 應該在肩膀上面弄一個，順便搭上一個 Pico Projector (微型投影機），應該就可以讓任何手可觸及的地方都變成了 touch 介面。或許你也注意到了，他所用的 Kinect 跟別人不太一樣，是的，他跑到 MSR 做研究了，而且用的是最新型的 Kinect, 解析度高上一倍。對於一般人的確是不可能取得的機器，加上他創意的腦力，讓他的速度比飛奔還快了。

2011:UIST: TapSense

如果當年度去參加 UIST 的人要不認識 Chris 應該也很難，這個人一直在上上下下地，每過一會又是他的 paper, 或許可以弄成一個叫做 Chris Harrison Session 也不為過。也許是某個下午，當他敲打著他 iPhone 的螢幕的時候，他突然發現，指尖敲下去跟指腹敲下去的聲音不一樣。這簡直是發現新大陸，但是要是換成一般普通的人的話，可能就是敲敲螢幕就過去了。但是 Chris 之前做過聲音的研究，因此事不遲疑，他馬上開始敲起鍵盤開始寫一堆利用辨別指尖或是指腹或是指關節敲下去不同的應用，甚至還拿不同種類的筆頭來敲，來創造更多可能的應用。

早在 2009 年時，我就注意到這個不尋常的天才，因此在當年去 SIGGRAPH 會場看 E-Tech demo 時，看到他擺了一張小桌子，我就非常興奮地跑過去，我忘了我跟他說了什麼，但是我鐵定說了：“WOW! You are Chris Harrison!” 就像看到搖滾巨星般，我跟他合照了一張，只差沒請他簽名。今年，Chris 在 UIST 會場聽了我們的研究後，跑來告訴我們他看到的最新發現點，他的發現點竟然是我們完全沒想到的地方，而那項科技是我們發明的，他的直覺是這麼閃耀。我相信，雖然我們處在同一個世界裡，但是他所看到的世界鐵定是跟我們很不一樣。

時序又要進入了 2012，這位 paper 發不完的老兄還沒畢業，不知道是他自己不想畢業還是他的老師不讓他畢業。不過似乎有沒有畢業對他也沒有太大的差別，反正他現在也可以任意地進入任何頂尖的實驗室。而 2012 的 CHI 又及將公佈結果了，如果沒意外的話，或許也是應該要有個三四篇吧！如同閃亮的鑽石一般，他是閃亮的天才。

(如果你想要跟我討論 UI，或是閱讀及時 UI 資訊，你可以訪問 facebook 的 UIUI)

加入MMDays在facebook的粉絲團 隨時閱讀最新文章

這個東西叫做：行動版網頁。

你的網址是？

這也是自從智慧型手機與平板電腦開始流行以後常遇到的問題：太多的網站不是為行動裝置設計，所以需要使用者不斷放大縮小才能順利觀看。

一般直覺的解法：那就另外作個行動版網頁，把手機過來的流量導到這個版本去。

在不影響原本網站的開發架構下，行動版網頁往往是另外 “加” 上去的，所以往往是用近似但不同的網址，

• 例：噗浪網站 www.plurk.com 、行動版 www.plurk.com/m/

所以，同一個內容的網頁，用不同的裝置開、會有不同的網址。

• 例：重灌狂人的噗浪網址 www.plurk.com/briian ，手機版的網址則是 www.plurk.com/m/u/briian

這為什麼會有問題呢？想想你今天在網站上看到一篇好文章，但是分享到臉書上後朋友抱怨說在他的智慧型手機上不會自動轉成行動版網頁？反之，你朋友用 iphone 分享了一篇連結，結果你在電腦上打開，內文卻是超小又超擠的手機版字體？

（前者比較少發生，因為大半的網站主會幫你轉址；但後者的發生機率就頗高）

更別提其他因為網址不同而帶來的拉里拉砸問題了（譬如臉書的按讚數因此變成兩個分開的統計）。

所以最近 Responsive Web Design 這個名詞開始流行了起來。

Responsive Web Design

Responsive Web Design，簡單來說就是網址不變，網頁內容會自行根據觀看裝置的大小自動調整。

譬如以下這個網址： http://2011.dconstruct.org/

當我用 Mac 打開時（螢幕解析度 1280×960 ），我看到的畫面長這樣子

而當我把瀏覽器寬度縮減時，我看到的畫面會自動調整成這個樣子：（寬度調560 px 以下）

看起來好像有點厲害，但實際上說穿了也不稀奇，這就是用了些 CSS 3 media query 的技巧。在 CSS 3 裡你可以針對不同的螢幕寬窄設定不同的 CSS 樣式，在支援 CSS 3 的瀏覽器上就可以自動調整。如果再加上 HTML 5 與 javascript 的配合，能夠達到的效果就更多（譬如可以偵測裝置是否旋轉、現在狀態為直立或橫放而執行不同的 javascript ）。

因此 Responsive Web Design 的目標就是，在同樣的 URL 之下，不管你今天是拿筆記型電腦還是手持裝置，整個網站能夠讓所有裝置的使用者，都順暢無礙的使用所有網頁與功能。

聽起來很好，但是真的跳下去弄，才遇到一個更大的問題是…. 瀏、覽、器。

你用什麼瀏覽器？

講到瀏覽器就不能不提 IE 系列。惡名昭彰的 IE 系列直到 IE9 才 “號稱會” 支援以上 CSS 3 的功能。

不過這還好解決，如果你想讓舊版的瀏覽器也支援這樣的 media query 功能，可以在網頁上外加這個 css3-mediaqueries javascript ，據稱掛了之後就可以讓 IE 5+ 、Firefox 1+ 與 Safari 2 等舊型瀏覽器都支援上述功能，我是沒試過（不用 IE 久矣），有興趣的人可以找來用看看。

比較麻煩的問題反而是許多在電腦上執行得好好的 javascript library 在行動裝置上可能無法順利執行。這個地方就因人而異。我遇到的問題是某個在桌機版一個網頁就可以執行的事情，在 iPhone 內建的 Safari 上就因為種種技術問題而必須要拆成兩個網頁才能完成。這麼一來等於是手機版會多一個網址，那這不就違反 Responsive Web Design 的目標了嗎？

還有瀏覽體驗

還有一點是我個人的觀察。在桌面版的網頁上，常常有很多超連結，但是在手機或 ipad 上，超連結卻不是很受歡迎。

原因很簡單，因為在電腦上大家有滑鼠，但在手機與平板上卻是用觸控。原本大家很習慣的超連結，到了手機上立刻就因為 fat finger 而很難點，原本要點連結 A 而誤觸連結 B 的情況比比皆是。在行動裝置上大家還是比較喜歡用按鈕（或者至少是一個大區塊），但 “桌面版本的超連結到了手機版上會變按鈕 ” 可就不是簡單兩三行 CSS 就能解決的事情。有時候你怎麼喬就是不好看，搞不好重新設計全部版本的 layout 還比較快。

如果再考慮使用情境的問題就更搞不完。手機螢幕大小有限、一個畫面能呈現的資訊量也有限，我自己用手機時往往恨不得只要幾個 click 就可以直接點到我想要的資訊，根本不會想用手機來做很複雜的事情，更遑論把桌機版的每一個網址都搬到行動裝置上來（你想想看誰會用手機去查旅遊景點行程、買機票、規劃醫療保險或查銀行記錄？） 針對不同的使用情境，開發 Native App ，有時候可能是更好的選擇。

可 Native App 也不是萬能，譬如，它就沒有網址可以讓你在 facebook 上分享。（為此兩個都搞的也大有人在）

未解的問題

到目前為止，iPad 上市也不過就才一年半。這個壽命在科技產品裡面算很短的，但就在這短短的一年半裡面 iPad 全球賣了幾千萬台、還火速出了 iPad 2，其他廠商也出了一堆有的沒的平板（最新當然是 Amazon Kindle Fire ）。如果加上 iPhone （同樣是 Apple 引領的智慧型手機風潮），每天打開科技新聞，就是平板、智慧型手機、平板、智慧型手機… 。

我一直覺得這中間應該預示著許多消費者行為與軟體產業的模式改變，不過這些改變需要時間，而且有些問題…我也沒答案。就如同這篇文章提到的行動版網頁，顯然是一個待解的難題。

不過，這應該可以確定一件事，就是幾年內所有的公司會需要網頁開發人員來開發行動版網頁。這…在現在低迷的就業市場中算是好事吧？

加入MMDays在facebook的粉絲團 隨時閱讀最新文章

(圖片來源: 博客來)

我想人生的因緣有時候是非常殊勝的，當時引領我進入人機互動領域的第一本書正是 Donald Norman 的 <設計&日常生活>。遙想當時我正在做產品設計的相關工作，正煩惱著究竟是否有一個好的產品設計指導原則來將產品設計得更為好用，更接近使用者；而就在當時，我在一個同事的書架上看到了那本書，那本書在當時不僅解決了我的疑惑，也開啟了我對於人機互動研究的知識大門。從那時起，我就成為了 Donald Norman 忠實的粉絲以及信徒。他的每一部著作都被我買回家拜讀，有些著作還不只讀過一次，每次看，總有不同的想法，著實獲益良多。時間一轉眼，數年過去了，想不到第一次幫別人寫推薦序就是 Donald Norman 的書，這樣子的緣分真是讓我感到非常開心，也非常驚喜！

在 Donald Norman 的著作裡面，我覺得此書可以看成是 <設計&日常生活> 的續集。在<設計&日常生活> 中，Donald Norman 談到了如何的設計可以讓產品變得易用，並提到瞭解使用者的心智模式和利用素材的預設用途的重要性。而在這一本書，Donald Norman 更清楚地闡述了大家對於易用性的錯誤觀念，易用性不等於簡單，簡單的東西不一定就是易用。生活是複雜的，既然如此，那麼科技的複雜性就不可避免。而重點是，身為設計師的我們，該怎麼將這複雜的科技轉換成使用者可以理解的心智模型；或許，Donald Norman 提出的讓使用者和設計者成為夥伴關係是一個可行的方向。而此書的另外一個特點，就是Donald Norman 提出的一個新名詞: 指意，並且用了許多範例說明了指意如何有效地幫助使用者認識整個系統的目前狀況。借著這樣子的闡述，Donald Norman 再度帶出了一個重要的觀念: 好的系統設計，是必須要能夠跟使用者達成社會溝通的。

每每看 Donald Norman 的新書，總是能從其中獲得許多新的設計觀念；而每一個新的思維，在閱讀過後，都有如醍醐灌頂一般，讓自己的設計思考層次也隨著 Donald Norman 的分享而更上一層。這一本書同樣也跟之前的系列著作一樣精采，當我一翻開此書後，就被裡頭精彩的內容深深吸引住了。我對於這本書的喜愛是僅次於 Donald Norman 的 <設計&日常生活>。這邊我誠心地推薦給大家，也希望對設計互動有興趣的同好們，也能因為閱讀了此書，從而提升了自己對於設計的想法以及觀念，進而不吝分享傳播你所體悟的設計理念。

最後，為了促進本書的知識流傳，Mr. Monday 這邊也跟遠流出版社合作，提供了小小的贈書活動。目前我們提供了五本免費的書籍，要獲取書本的方法非常簡單: 首先你一定要有一個 Blog，並且至少最近一個月有 Blog 的記錄。如果你已經符合這個記錄，那麼趕快到 UIUI 這邊留言給我，並且附上你的 Blog 網址，我會親自跟你連絡，並把書寄到你家，你唯一需要答應的條件就是看完後寫一篇小小的心得文放在你的 Blog 上，並且同時 post 到 UIUI 上面同大家分享

那活動採先搶先贏制，晚睡的鳥兒有蟲吃!

加入MMDays在facebook的粉絲團 隨時閱讀最新文章

在我有閒暇的時間，我除了喜歡瀏覽一些設計作品，或是創新的互動科技之外，我另外一項嗜好就是瀏覽大師們的著作列表，透過著作列表的時間序，我彷彿也親眼看見了一個大師的成長歷程。台灣對於 HCI 或是 UI 方面的研究資訊相對較少， 因此， 我也希望能夠利用閒暇的時間來幫大家做個介紹。不過要介紹誰， 總是一個 trade-off. 在 UI 眾神系列當中，之前已經為大家介紹過德國 UI 之神 Patrick Baudisch 以及日本 UI 之神 Takeo Igarashi，當我再次提筆之時, 我腦子裡閃過了數個大師，包括美國多點觸控之神 Andy Wilson、日本 AR 先驅 Jun Rekimoto、新加坡身體介面之神 Desney Tan…等 (或許讀者們可以期待^_^) 。這些人的確都很特別，不過，再特別，也沒有腦中突然閃過的 Takeo 特別。相隔了四年半的介紹，Takeo 的成長可以用驚異來形容，因此，我決定再度為文介紹 Takeo, 一個大師的研究進行曲

(圖片來源: Igarashi網站)

我四年前為文介紹 Takeo 時，Takeo 當時只是個副教授，然而我不知道，當年我下筆的同時，正也是 Takeo 人生的轉捩點。 同年 12 月，JST ERATO Igarashi Design Interface Project 成立，Takeo在日本國科會(JST)的資助之下正式成立了所屬的國家級 UI Lab，在洋洋灑灑的名單當中，由一個副教授來做總 Director 領導以及組織一群教授以及研究員，這件事情可以說是破格，在日本這樣子的體系當中，可以說是破格中的破格。Takeo 用著優異的實力技壓群雄，讓眾研究員都對他刮目相看。日本的學術體系的話通常助理教授是不能授課的，而副教授是通常會跟著一個教授的實驗室，而沒有自己的實驗室。這樣子看來，大家就明白這件事情有多麼破格了。而在今年中，一個好消息捎來了，Takeo 正式升為了東大的正教授。從 2000 年拿到 PhD 學位，到正教授，走過了說長不長、說短不短的 11 年，Takeo 再度用自己的實力打破了日本傳統的學術界的倫理制度，以著不到 40 歲的年紀再度破格拔擢為正教授。這或許也意味著，日本正在尋找著像是 Takeo 這般代表新世代的年輕人，來為日本停滯不前的僵局創造出一番新的氣象，或許日本還沒有我們想像得這般僵死，而像 Takeo 這般優秀有熱情的年輕人或許可以重然日本的引擎。

從事 GUI 研究的 Takeo，很早(1999)就開始踏入 HCI (Human Computer Interaction) 的研究領域，不過大多還是著重在傳統的 GUI 設計上面。然而創辦了 JST ERATO 之後，Takeo 決定要再度擴大他的研究領域，用 GUI 的力量來改善傳統的機器人互動界面。因此在研究上面，Takeo 不再著重於軟體的研究，同時也開始機器人介面的硬體研究，有著國科會的經費的靠山之後，Takeo 開始大刀闊斧地實踐他的夢想，不僅僅是在國內招募了優秀的年輕研究員，像是知名的 AR (Augmented Reality) 達人 Sunao Hashimoto 和機器人專家 Daisuke Sakamoto 外，也開始在全世界募集一流的 UI 軟硬體研究人才。整個 Lab 充滿了天才的 Engineer，可以在一個禮拜前打完嘴砲後，第二個禮拜就把 workable prototype 做出來的 Geek 大軍。偌大的 Lab 空間內，堆滿了各式各樣的機器人，其中有一半是自己 Lab 所改造或是從無到有所建出來的。各種昂貴的 UI 器材更是應有盡有，要 Motion Capture ，有! 要 3D 出模機器，有! 有新的機器人出來了，買! 下個禮拜送到! 如此高效率的執行團隊，讓 Takeo 的研究又更上了一層樓。熱情的年輕大師，引領著熱情的年輕人，這個 Lab 像是一發衝天的火箭一般，你看不到它的盡頭，因為它還沒完全加速!

(Teddy System Demo)

就在此時，我又重新地認識了 Takeo，一個冷酷，但是對於研究如此熱情而執著的大師。自從 Teddy 系統一戰成名之後 (瞧，連 JST ERATO 都是小熊為 LOGO，可見 Takeo 有多麼愛他這個 project)，Takeo 並沒有就此就把編譯器從他的電腦給移除了，相反的，Takeo 秉持著天天 programming 有益身心健康的態度，每年還是日復一日地 programming 自己所感興趣的 project，如果要用 GPU 加速，他就買 GPU 的書來看；如果要用到物理模擬，他就買 JAVA 物理模擬的書來看 (Takeo 只用 Java, 他自己維持了一堆 Java 的代源碼)；你跟他合作，他還會問你需要他 programming 哪一塊。大家可以轉身看一下您四周的教授，還有多少人的電腦裡面還灌有著編譯器 (哪一種都好) ? 如此的熱情，渲染著整個 Lab，大家皆以身為 geek 為榮。

(Takeo 於 JST ERATO, 其所做的 Chair 亦是研究產出結果之一; 圖片來源 Flickr)

雖然 Takeo 身為日本人，PhD 也是從東京大學取得，可說是土生土長的日本博士，但是在 Takeo 的 Lab 內卻沒有著一絲絲的日本嚴謹氣息 (或許有一點啦)。一般的 Lab 的學生有著嚴格的上班時間，在 Takeo 的 Lab 內，卻是什麼時間想來就來，什麼時間想走就走，天才管理天才是不需要硬性規定的，Takeo 深知這一點。除此之外，Takeo 也知道自己的行為將會成為大家的模範 (在日本，主管尤其會被大家所關注)，因此，Takeo 在 Lab 待的時間，沒有意外的話，絕對不會超過七點，就連投 paper 的 deadline 當天，他都提早回家了。Takeo 不喜歡 social，因此你也不用跟他套人際關係，更沒有什麼下班後喝酒的文化，他唯一關心的就是你的研究議題跟你的研究進度。效率，是 Takeo 所在意的，如果你表現得太蠢的話，他可是會皺眉頭的!

(JST ERATO Project list)

在創立了 JST ERATO 之後，Takeo 開始積極的將 GUI 的介面跟知識導入到家庭機器人的互動模式之上。並且在 AR 達人 Sunao 的幫助之下，建立起了獨一無二的機器人 AR 識別系統。藉由著 AR 標籤的辨認來操作指揮 Robot，因此，一個嶄新的研究系列誕生了。

(Magic Cards System Demo)

2009 Magic Cards

在 2009 年，Takeo 首度在 CHI 這個 HCI 頂尖的國際會議上面發表的有關機器人互動的界面研究。在這篇研究裡面，Takeo 用著跟傳統不一樣的思考角度，來思考機器人的互動。在傳統當中，機器人的操作是需要當場下指令，並且直接操作機器人。Takeo 在這篇研究裡提出了另外一種模式，使用者只需要把下達的指令卡放在需要處理的地方，機器人在接到指令卡之後，辨識上面的指令，就接著完成所指示的任務。這將大大減少人直接 monitor 機器人的 effort。當然，這篇研究也牽扯到了如何設計這種卡片系統，亦可以說是融合了設計跟科技的研究。有興趣的人可以直接參考其計畫網頁。

(Sketch and Run 示意圖; 圖片來源: Sketch and Run)

2009 Sketch and Run

有了 Sunao 所建置的 AR Marker 系統之後，Takeo 開始把所有 GUI 的可能都拿下來試試看了。在傳統的 GUI 上面，我們會有很多的 Sketch 手勢，因此 Takeo 就想，為什不能也利用 Sketch 來直接對 Robot 下命令呢? 直接 sketch robot 所要移動的路徑不是更加直覺嗎? 因此這樣子的互動界面就誕生了，並且也同時發表在當年的 CHI conference 上面 (demo video 在其網站上，有興趣者可前往觀看)。

(Stroke Gestures from Laser Pointer System Demo)

2009 Laser Control

延續著 Sketch User Interface 的想法，Takeo 想著，如果可以在電腦內用 gesture 來操控 robot 的話，為什麼不能在真實世界裡面畫 gesture 來操作 robot 呢? 因此，利用 laser point 來操作 robot 的 idea 就此誕生。這個研究並且在當年的 SIGGRAPH Asia 的 E-Tech 做當場 Demo。

(Andy Toolkit Demo)

2009 Andy

瞭解到了 AR Marker 系統如此的好用，如此地有幫助，Takeo 馬上將這個系統模組化，並且做成了 Toolkit，這個 Toolkit 不僅僅用在 Takeo 自己的課堂教學之上，他同時也將這個 Toolkit 於 UIST 2009 之上分享給所有的研究學者。(UIST 為 HCI 裡面做技術這個 spectrum 的人的聖杯之一)。

(Cooky System Demo)

2010 Cooky

延續著 2009 年 Magic Cards 的想法跟理念，Takeo 這次把 Card system 從家庭打掃延伸到了煮菜這件事情上面了。藉著卡片系統來指揮小小的 robot 就像指揮著一個個小廚師一般。神奇的卡片系統再一次在烹調領域上面發揮了作用。這個前端的研究也被收入在 CHI 2010 當中。

(Drag and Drop 互動示意圖)

2010 Drag-and-Drop

當 Takeo 挾著在圖學方面的知識在 CHI 領域初試啼聲之後，Takeo 決定正式用圖學的知識跨足到 Robot 的領域。這邊的正式是指，他開始將 research 投稿到 robot 的知名 conference 如 HRI、ROMAN 以及 ICRA。這篇投稿於 ROMAN 2010 作品，延伸著直接 sketch 操作 robot 的想法，不過這一篇更不一樣的是，直接讓使用者拖動螢幕上面的物件，而螢幕上的物件的最後的移動狀態就可以顯示在螢幕之上，而相對應的 robot 就會來處理這個物件移動的事情。這個處理物件最後位移的狀態牽扯到了圖學的 GrabCut 演算法，這也是 Takeo 將圖學演算法順利地帶入機器人互動領域的代表作。相關 Demo video 見其網站。

(Dipole 演算法示意圖)

2010 Dipole

瞭解到了在系列研究之中，機器人最常處理的就是移動物體，因此 Takeo 決定親自下來改善機器人移動物體的演算法。Takeo 結合磁極的概念，發明並且親自測試了自己所研發出來的物體移動演算法 (親自 code)，此後這個演算法幫助了 Lab 所要要移動物體的研究一個大忙，因為從此以後，大家只要 call 一個 API 就好了。這篇研究也同時發表在 ICRA 2010 之上。

(Homotopic Path Planning 演算法示意圖)

2010 Homotopic Path Planning

Takeo 由於親自參與第一線的研究，因此對於機器人操作所發生的問題倍感深刻。除了發現機器人處理物體移動的問題之外，Takeo 也發現了機器人目前也都帶有著延長線的尾巴。而這個延長線的尾巴可能會讓機器人在空間中移走產生問題。瞭解到了這問題之後，Takeo 開始思考著新的演算法來解決這個問題，並且第一次踏足了演算法證明的領域。在 Takeo 講解著這個 project 時，可以看出他的興奮之情，這代表著，他自己又將自己的知識跟技能向前拓寬了一大步。此篇研究發表在 WAFR 2010 之上，這個是專門出演算法的 conference。Demo video 跟程式都可以在其 project 頁面下載。

(Snappy System Demo)

2010 Snappy

除了在演算法上有所斬獲之外，Takeo 也繼續致力地引入更直覺以及方便的方式來讓 Robot 移動物體。因此，Snappy 這個 project 就誕生了。使用者只需要將最後的完成狀態照一張相，之後想要再回復到這個狀態，就只要再秀出照片即可。此篇延就收入在 HRI 之後，也是 Takeo 第一篇攻入 HRI 的 paper。

(RoboJacky 系統示意圖)

2010 RoboJacky

如果循著歷程的話，不難發現，Takeo 的 robot design 都是處理一些重複的事情。Takeo 也發現了這個事情，他也發現了，Robot 似乎很適合處理 repeat 的工作，那這個樣的話，何不就重新設計 timeline，讓 timeline 可以重現 repeat 的動作。一但這個可以不斷 repeat 的 timeline 被發明之後，他們發現，這樣子正好適用於有節奏的跳舞，於是 RoboJacky 這個 project 就是在這樣子的思維下誕生。這篇 Paper 後來被 ACE 2010 (一個 game 的 top conference) 所接受，並獲得了Best Paper Silver Award。其 Demo video 可見其計畫網站。

(RoboShop 系統示意)

2011 RoboShop

時序進入到了 2011，Takeo 連續三年在 Robot 的領域在 CHI 這個 HCI 的最高論壇上面有所斬獲。延續著 MagicCards 在家庭打掃的概念之上，Takeo 構思著，如何讓使用者能夠利用系統來規劃這些重複性很高的系統，並且方便儲存這些已經事先安排好或是安排過的事物。因此，這個類似 PhotoShop 的圖層概念的 robot 互動就誕生了，並且被 CHI 2011 所接受。目前 Project 網站上無 demo video，有興趣的人可前往 ACM 網站上觀看。

(Actuated Physical Puppet 系統示意)

2011 Actuated Physical Puppet

融合著圖學的概念，Takeo 真是將圖學的概念在 robot 互動上面發揮地淋漓盡致。對於人形 robot 的操作，Takeo 瞭解到了，人的關節會有一些互動模式，像是你彎腰的時候，腳也會跟著微曲等。這些人的互動模式都可以透過 motion capture 這個裝置來事先截取，而 motion capture 這樣子的 device 之前是用在電腦動畫之上，來幫助 3D 動畫師來作人物的 animation。現在這個裝置也可以來幫助人形機器人的互動了。此篇研究亦發表在 CHI 2011，這是 Takeo 第一次有兩篇 CHI 的 full paper 關於 robot interaction 發表在 CHI，對於 Takeo 來說也是一個新的突破。Demo video 可見其 project 網站。

(TouchMe 系統示意)

2011 TouchMe

持續地將圖學的知識灌入 robot interaction 的領域，Takeo 持續地這麼做著。關於如何直覺得操作 robot，Takeo 在度把虛擬 model 的操作跟實際的 robot 合在一起。使用者可以操作著虛擬 model，並且看到虛擬 model 的最後模擬的動作，然後在操作的同時就可以獲得立即的視覺回饋。這樣子的計畫，正在持續地進行著。

(smoon System Demo)

2011 smoon

Takeo 不僅僅是個 engineer，Takeo 其時也非常喜歡設計跟 digital art，如果你觀看 Takeo 的 publication 的 list 的話，你會看到一些很有趣、很無厘頭的 work，如 Another shadow，這個利用 shadow 的暫留時間來創造出有趣的互動，後來被收錄在 SIGGRAPH Asia Art Gallery 2009 當中。如果你去日本一些互動藝術展覽的地方買書的話，你多少也會看到關於 Takeo 的作品的章節的書本。在 JST ERATO 裡面，Takeo 不僅僅只是招收了engineer researcher，Takeo 也招收了有著 design 趨向的 researcher，因此也才會有 Sketch Chair 這樣子的 project，大家也才會看到 Takeo 親自作在他們親自設計出來的 chair 上面的照片(上圖 flickr)。smoon 就是利用機器人的科技來完成的 design project，雖然只是一個小小的 design 發明，讓機器人可以自動衡量要加入的粉末成分多寡，但是這或許是在告知大家，或許 Takeo 的下一步，就是要正式跨入設計領域了!

研究的進行曲

Takeo 一個新世代的研究巨星，引領著新一代日本年輕人一次又一次的創新。一次又一次地自我突破之後，一次又一次地打破日本倫理常規，不斷地破格、不斷地超越，Takeo 本身作為一個向上的指標來說，不僅僅對日本的年輕人最了良好的示範跟激勵之外，對全世界的研究學者來說，也是一個景仰的模範: 專注於研究的最前線。然而，不論 Takeo 是否自己有意識到這一點，Takeo 本身依然故我地沉浸在他的研究樂趣裡面，你如果到他 Lab 參訪的話，或許你有機會看到他斜躺在沙發上面看 paper 的輕鬆樣；或者是，你會看到他更隨性的一面，將數個椅子拉起來拼成一張 “床”，斜靠在 “床” 跟牆壁的交界處，思考著 paper 上面的問題。

對於 Takeo 來說，或許獲得更多的資源，是用來實踐他夢想的手段。當大家喝采著 Takeo 的教授升等時，Takeo 只是淡淡回應: “thanks, but this also means more management meetings and less research time… (或許這意味著更多的管理的會議以及更少的研究時間)”。這多少表現出了 Takeo 的無奈，而且是出自於對於研究熱愛所散發出來的無奈。不過，或許 Takeo 自己也瞭解到這一點，唯有他要自己不斷地向前走，他的夢想，以及他所引領的新一代的年輕人的夢想才能有一個出口。用了 11 年的光陰，從助理教授到正教授；從圖學領域橫跨 HCI 領域，又再橫跨到 Robot 領域，或許現在只是在 Takeo 夢想的半路之上。這個火箭還沒完全加速，而此時此刻，又再度到了 Takeo 人生的轉捩點，研究的進行曲還在持續著，或許我們可以再度期待下一個四年

(如果你想要跟我討論 UI，或是閱讀及時 UI 資訊，你可以訪問 facebook 的 UIUI)

加入MMDays在facebook的粉絲團 隨時閱讀最新文章

說實話，T.Design的文章，算是事件爆發至今比較完整的批判論述，但我總覺得沒有騷到癢處，也沒踢到要害。

在這裡，我想長話短說（和上一篇相比），說說我對「第30屆新一代設計展的海報被識破是模仿(或說是抄襲)Lomography Spinner 360°的圖案」這件事情的看法。

關於創，或文創，我寫過這篇文章，沒什麼人推，
使得T.Design在引用張大春先生的狗屁文創時，並沒有提到它，我在裡面，其實是反對張大春的文創狗屁論的。過去事，表過不提。
我決定針對創、以及文創，或者更一般而言的”創意”再寫一次我的看法。

這次的抄襲事件，不知怎的，我老覺得有哪裡怪怪，

就像511的王老師末日當時給我的感覺一樣。

這次的新一代抄襲事件，給我帶來的感受，和王老師的末日預言，以及其所造成臺灣人類圈裡超乎尋常的騷動所帶給我的奇怪感受相類似。

王老師錯了嗎？媒體錯了嗎？貨櫃屋錯了嗎？
有位設計界的奇人（團體），說出了我心中想說，卻又說不出來的話語：

iPad都出到第2代了，人類應對謠言的智慧卻還停留在中世紀。倘若真有個以人為對象的世界末日，雖不中，亦不遠矣。 – by Manual. B

是的，王老師錯了，貨櫃屋也錯了，
但是無論是深信不疑的人，還是瞎起鬨的人，也都該負上一些責任。

回到這次的新一代抄襲事件，
看著新聞，看著部落格評析，我的心中，無論如何揮之不去的，
是那王老師般的怪怪感覺，
可是，大家說得好像又都沒錯。

但我們不怪台創，不怪設計，那又該要怪誰呢？

臺灣創意中心– 俗稱台創，成立於2003年的國家級設計中心「財團法人台灣創意設計中心」，並於2004年正式啟動營運。在這次事件中，負責發案（第30屆新一代設計展海報設計）給陳永基設計有限公司

陳永基設計公司– 陳永基先生擔任該公司創意總監，領銜設計的「2009世界運動會在高雄」海報系列榮獲紅點grand prix全場大獎，成為大中華地區首位拿到該獎的平面設計師。

了不起啊！

真了不起啊，台創在關於我們的頁面裡，明明白白寫了「主要任務為提升設計人才原創能力」結果是這個新一代抄襲事件的案主，

真的了不起啊！陳永基先生，沒有公司網頁的設計公司，能夠大案子一個接一個，根據兩個地方的網站資料（1, 2），他還是堂堂﹣經濟部商業司提升商業設計計畫諮詢委員 ﹣經濟部工業局創意設計發展計畫委任輔導專家 ﹣教育部台灣國際創意設計大賽視覺設計類組評審召集人/評審委員，擔任這麼多公部門的計畫審查委員、諮詢委員，卻沒有確保自己工作室出來的東西是不是合乎遊戲規則、道德規範，結果成為這個新一代抄襲事件的設計執行者。

但實際上，我覺得大家都錯怪他們了

大家都錯怪他們了，台創和陳永基先生都沒有大錯，這件事情，他們根本不應該遭受輿論如此撻伐，基本上，抄襲只是一個miss一個失誤，抄襲，是所有設計成果設計出來之前、之後都可能會被質疑，會被檢驗的問題。

他們或許有錯，但並沒有錯到要讓大家說，台灣的設計不好，創意不對，如此這般。
能夠指摘的，或許只能說，沒有完整檢查抄襲的機制，或者，有檢查機制，但是沒有檢查出來。

抄襲不是原罪。

如果抄襲真是原罪，
那很簡單，開一個規則，
「所有政府主辦、協辦單位所協助生產的設計品都需先行檢查是否抄襲，否則查辦。」就好了，不是？

問題是，要怎麼檢查？
難道說，設計出來的東西，一一往回頭去查，查所有的年鑒，查所有的專書，問問看設計專家（陳永基先生也是專家呀）看有沒有類似的，而，是要查到什麼時候為止，18世紀嗎？還是19世紀就好？什麼樣的東西才算是抄襲，什麼樣的東西才算是類似？我忘了究竟是莎士比亞還是誰，曾說過

「這世界上再無全新的梗」

不管這是誰說過這話，它都非常的有道理。
創意的來源是生活，是所見所聞，每一個創意的背後其實都有跡可尋，既然你我都生活在同樣的世界上，呼吸一樣的空氣，看見一樣的太陽，賞同一顆月亮，我讀過的東西你可能讀過，我看過的東西你也可能看過，是要如何保證你我的作品或創意裡頭的所有成分皆有不同？如何知道多少成分，或是多少比例的創意靈感，是來自不同的泉源？這也是為何常常有人說「不知道為什麼，許多偉大的發明或突破，往往都有兩個以上的人在差不多同一時間想到」不過這有些離題了，以後再說。

沒有全新的梗，
所以，你真的要檢查創意檢查抄襲，查得完嗎？
那麼，規則或許就不應該那樣訂了，那…
「所有政府單位主辦、協辦所產出的設計品都需提供原始素材來源、發想過程，以及至少三個以上的演化版本以供檢驗。」
這下總ok了吧？
好，你覺得ok的話，那表示你外行。

這整個抄襲事件，

該是讓內行人出來說說話了

你罵台創，但你有去過台創嗎？
我去過。
你去過台創，那有跟他們談過案子嗎？還是純參觀？
我談過。
台創是個什麼地方？
是個富麗堂皇的地方，
裡面有職權的員工，一個比一個跩。
但我覺得這都不是問題，
你跩，你花俏，都沒問題，只要沒有太過火，而又能把案子做好，讓台灣…嗯，怎麼說 創意升級好了，
那通通ok。

但現在有三個連鎖問題橫在眼前：
第一：
臺灣的設計案案主（後略），有沒有給足夠的時間給設計工作者做設計，做創意？
再來：
知不知道應該要給足夠的時間讓創意工作者做設計、做創意？
而最後一個問題是：
有沒有本錢給足夠的時間讓創意工作者做設計、做創意？
在這個事件裡，台創是案主，也就是廣告公司/設計公司俗稱的 客戶，也就是千萬要抱緊大腿好來好去的對象。

內行人在這裡，說話了：

客戶有兩種，一種是問東問西，問到最後，設計師只好照客戶喜歡的風格去做的”阿盧（台語，很煩人的人）”，但誰知道喜歡Lomo廣告風的是設計公司還是台創？請見下圖：

真的是證據確鑿，但實在無從確定到底出問題的，導向抄襲這條路的人，究竟是誰，是發案的台創呢？還是接案的陳永基設計公司。

另一種的客戶，是根本不管，想約開會都不給約，神龍不見馬尾，到最後設計公司只好”自己來”。

無論台創和陳永基設計公司，誰是屬於哪一種客戶，哪一種設計工作者，「新一代抄襲事件」，是誰的錯？都錯！

好的創意，需要時間。
這是任何內行人都懂的，

你不懂？
我說，其實你們都懂；
只要看過犀利人妻的，就一定懂。

「每個女人心中都住了一個小女孩 -by 溫瑞凡」
「讓妳心中的小女孩出來透透氣 -by 溫瑞凡」
這是犀利人妻劇情裡頭，溫瑞凡飾演的行銷經理，在和小三一段談天之後，突然被激發出來的行銷靈感。如果當時他沒有推翻發想會議的結果，對部門同仁說「好，還要更好，請繼續發想，我相信我們還能想到更棒的！」他可能也不會得到這個幾乎篤定會成功的好創意，至少，劇情是說他”原本”一定會成功（笑）。

陳永基或者其他的設計工作者需要的事什麼？當然不是小三，

當然不是，恐怕他需要的，是足夠的時間。

好，那這次事件，
有人去問陳永基設計公司從接案，到執行一共被給予了多少時間嗎？

有個學長在柏林念書，認識一位在柏林ART+COM (唸作 Art Plus Com)工作的彼岸同胞，那是世界上最知名的互動行銷公司之一。閒聊的時候同胞說，來到柏林，在ART+COM工作覺得很不習慣，步調太慢了，客戶給的一個案子，執行時間很多時候是整整一年，而案子的前半年，就都在柏林過閒晃，在生活中找靈感。

反觀臺灣廣告公司？天天打仗。
紐約的廣告公司可能也一樣，但，問題是，全世界的廣告菁英可能有一半在紐約，他們可以用世界菁英的一半菁，來換取縮短原創創意生成的一半時間，提高原創創意生成的一半機會。臺灣呢？我們用什麼去換？

案主，或者甚至整個社會，期待要看到設計師生出與世界同步的優秀創意，但是又沒有足夠的資源讓給設計工作者足夠的時間去設計，那是要怎麼設得出來？

好的創意，光有錢沒用，有好的規則（不准抄襲），也沒用，還要有足夠的時間。假設，以上都有了，有錢有規則也有時間，那就夠了嗎？
不夠。

創意本來就不是什麼都 “有了”，就會 “有了！” 的東西。

這就是為什麼我很早就說，創意這兩個字，根本就用錯了（請見「創」一文後半部的文創議題討論）我說，臺灣創意中心根本就不應該要叫做創意中心，因為”創意”根本就不容易結構化地管理，有系統地提昇，”設計”還比較容易。（請見「創」）

那你說，要怎麼辦？
不要說台灣人年輕人台灣部落客就只會批，不會講方法？
我現在就講看看給你聽。

真正的核心，在於 “原創力” 而不是創意

在台灣，大家很重視創意，
啊，那
假使有一天，有個挪威設計師設計一張好玩椅子，很有創意，
我把它抄過來，然後拿給沒看過原作品的你看，
你會有什麼感覺？
對，
你會覺得這好有”創意”。

看，這就是問題所在。
創意這兩字本身要嘛就太模糊要嘛就太不精確，
臺灣要提倡的
應該是「原創」、「原創力」以及「設計」，
創意這兩個字，就請別再鬧了吧，就請讓它過去了吧。
臺灣之所以創意提倡了這麼久，
還是很多抄襲創意的案例出現，
什麼花博抄長野，Jolin抄GaGa，
背後的原因，內行人一清二楚：老闆只要好東西，其他什麼都不管。
什麼是好東西？好東西的水準到哪裡？
沒人知道，你不知道我不知道，老闆也不知道，
而那些不管的東西，抄不抄襲就是其中一樣。

以前網路還不發達，業主能接觸到的東西不多，比較容易接觸到的，可能僅僅是廣告公司提供的外國創意範例，這時候，業主反而說不定還覺得 他嗎的果然還是專業公司的專業比較專業 ，有時候也便客客氣氣地尊重設計/廣告公司的專業，只要設計/廣告公司堅持不抄襲，那就還能有好的作品誕生，大家一起成長。
現在可好，網路發達了，業主整天都會看YouTube了，
廣告公司、製作公司，提案天天被打槍，

為什麼人家GaGa的MV這麼酷，為什麼人家長野冬運Logo這麼感人
為什麼你們就是弄不出來？

這下可好，提案提個幾次，團隊氣力差不多耗盡，提案時間差不多用完，提案費也差不多也花光，MV要發了，Logo也快要公布了，卻還沒定案，該怎麼辦？

抄啊！

用力的抄 拼命的抄啊

所以，問題出在哪？
不尊重原創。
再說一次，臺灣要提倡的，不是創意，甚至也不是設計，
而是「原創設計」！

臺灣的原創設計一直不被尊重，是行內人早就一清二楚的事，
一個案子5000做到好，兩個案子三週完成，買海報送網站，買網站送App。
誰的錯？
大家都有錯。
這不尊重的原罪，除了來自案主（客戶, 老闆）以外，也來自設計者。
念過設計科技的學生都知道，
誠品賣得最好的設計書，一定是如 Web Design Index之類的設計年鑒。
為什麼？
因為大家都沒時間啊，
沒時間發想啊，因為…

還有什麼是比 “抄”更有效率，水準更高的設計？

在我還在接觸設計的時候，
我買過一本Web Design Index，淺藍色的封面，有隻兔子，
翻過一遍以後，我就發誓從此以後我不再接觸它，一本也不買，直到有一天我設計的網站登上下一本Web Design Index為止。
我知道，如果我現在抄，
那麼我就註定一輩子抄。

在那段時間裡，鮮少遇到和我抱持相同想法的人，
從Web Index 1, 2 , 3, 4 買到 56789買不完的彼彼皆是，
從日本網站設計1998 1999 買到美國設計年鑒 19876543 ，每一本買來都當做寶一樣，下一個案主來了，就把曾經折起來的那幾頁給他 “參考”，案主 “參考”完了， “欽點”完，就換設計者自己 “參考”了。

我參觀過幾間台灣的設計公司，
擺在最顯眼的地方，一碰就可以拿起來看的，絕對不是過往的設計案例，
而是，各式各樣的設計年鑒和素材集，誰資金雄厚，誰素材多，誰能五千八千一萬二的年鑒買得齊，誰就是老大？

夠了

臺灣的設計環境，產業環境一天不尊重原創力，就一天別想搞創意，
搞出來的，就真的都是狗屁（註：張大春先生說的，不是我說的）。

再問一次誰的錯？
大家的錯。
學校有錯，學生有錯，發案公司有錯，接案公司也有錯，你有沒有錯？
你也有錯。

看了報紙就以為新一代抄襲事件，錯只在抄襲二字的，就通通都有錯！

錯不在抄襲，而在沒有人要原創，那怎麼辦？
靠政府啊！（這當然又是另一個自由市場競爭與政府介入的百年大辯，我就不碰了）
臺灣嘛，地小人稠資源少，不靠政府幫一點忙，靠誰？設計界的陳樹菊嗎？（我承認這個有點不太好笑）
如果政府或者是你，因為搞懂這篇文章，進而搞懂這個問題，
就會知道，需要補助的不是什麼海報設計獎，也不是什麼讓政府單位發案給民間公司設計設計展”原創”海報，
而應該是去想辦法提昇整個產業對「原創意的尊重！」


政府要做的，是開班授課，

授課對象不應該只是設計師、程式人（見『北市App課程 打造憤怒鳥第2』、『發展App 工業局獵人頭』），而應該要是大老闆，是中小企業，是政府部門發包案子出去的金主，也就是那些出錢的老佛爺，
請他們坐到教室裡把屁股放好，
聽聽看了解看看，到底什麼是創意，什麼是設計，什麼才是原創，什麼叫做抄襲，最重要的是…

了解抄襲在這個時代是一件多麼容易被抓包，而且多麼快能夠被傳開的事。

人家溫瑞凡偷吃小妹妹，而且還偷吃人妻表親，不只很難被發現，而且就算被發現了也還是有觀眾會在網路上聲援他，
而你如果偷吃人家的創意，不只很快會被抓包，很快傳開，而且其羞恥的程度已經到了網路罵聲遍野，不會有人聲援，也不會有人願意為你多做解釋的程度，
大家只會把大變根雞蛋往你頭上丟，然後大罵你無恥、失智。
只有像我這樣的人，才會願意出來說說真話，
說說行內人才說得出來的真心話。（＊以上為道德信心喊話）

除了開班授課，讓那些丟錢出來養活千百個設計公司的單位知道該怎麼審案子，怎樣審美，怎樣審創意、審設計，審道德，之外，當然還有很多其他的辦法，讓產業學會如何「審原創意」，甚至是做更多的事情，透過更多種方法，也讓整個社會「尊重原創力」，不只是設計圈，文化圈、學術圈，都一樣。但都怕離題，故表過不提。

政府要做的，可能還有提撥補助，讓設計案能有更多的執行資源、執行時間，
當然，還有一些完整的配套規則，讓這些錢不會用去把老佛爺的屁股養得更肥，讓創意工作者的荷包更瘦頭髮更少，

臺灣創意中心，應該改名為 “臺灣原創設計中心”

此外，如果大家都認同，政府也認同– 設計就是國力，
那麼至少，國策顧問（名單）裡面應該要具有一定比例的原創力、原創設計背景專家（現在有，但太少），並且，臺灣原創設計中心也應該要有資金、權力，聘請和國策顧問同等級的 Steering Committee（類似督導委員會或指導委員會），來確保台灣創意、文化創意這台概念車不會老是翻車出問題，
此外，這群所謂的原創設計顧問裡頭，也至少要請到一位以上六十年次以後出生的人，才能確保他們在這個時代裡，做對的事情，讓他們

用這個時代的眼神，檢視這個時代的問題；

用這個時代的口舌，問對這個時代的問題。

好，我的”長話短說”就到此為止，有錯請指正，我會隨時修正補充文章裡的不是。

覺得這篇文章能算得上有半分道理的，歡迎你的讚和分享；

而剛剛被我的通通都有錯給不小心點到名的，
承認有錯（笑），想要贖罪的，就也請點個讚分享轉貼出去，

不能苟同的，你可以不按讚，但也請你大而無畏地分享轉貼，然後在下面說說，哪一個地方你最不能苟同，讓更多的人也可以加入他們的看法，

且讓我們席地而坐，討論討論罷。

加入MMDays在facebook的粉絲團 隨時閱讀最新文章

城邦媒體集團和遠傳電信合作推出了儂儂 iPad App 的互動電子雜誌，因其新穎的互動設計，加上媒體的大量報導。因此，這款 App 在短短的時間內就擠上了 iPad Lifestyle 銷售排行榜的第一名。(而在我進行 review 的當下，依然是雄踞第一名)。這款互動雜誌的推出就如同當時 Wired 推出第一本互動式電子雜誌一般轟動，雖然沒有 Wired 那麼誇張的火力展示，不過相去也不遠了。

由於 MMDays 長期關注電子書的發展，加上這款互動電子雜誌的程式執行團隊是 MMDays 的朋友，因此，特別邀請我們進行 Review。而因緣際會地，正準備休假的 Mr. Monday 在下就被賦予了這個任務。我已經將近有兩年沒有進行產品的 Review 了，就連產品的發表會的邀約都因為太過忙碌而婉拒參加，不過 Mr. Tuesday 極力讚賞這個產品，加上敝人也對電子書的互動非常感興趣，因此就犧牲一點休假的時間來幫忙做了 review。

為了避免大家覺得我們有幫產品宣傳的嫌疑，這邊先跟讀者說明，這次 review，為了維持 review 的客觀性，敝人沒有收取任何費用，就是純粹興趣性質的 review。而實際上，這篇文章不僅僅只是單純地 Bella 的 App review，在這篇文章裡我還有意藉題發揮闡述一些問題。希望這篇 review 的報告對各位讀者能夠有幫助。不過報告本身非常冗長，如果讀者們對於互動的內容分析不感興趣，你可以直接跳到結尾討論部分。

Reviewer

通常一般在做產品 Review 的時候，我們會找一個非常有產品經驗的人，因相信其專業，所以認為這樣子的人 review 出來的結果會特別有公信力。簡單來說，這樣子的 review 做法就是專家 review。好處是，我們可以從一個專家的角度，就可以得到許多非常有用的回饋。不過相對的壞處是，這樣子也有很多的意見就是專家的喜好問題了，加上專家因為已經成了專家，所以很多認為理所當然的東西就會成為專家的盲點。

這次，我決定來一次不一樣的 review: 專家 review + 使用者測試。透過使用者測試，觀察使用者的行為，專家可以非常敏略地抓出問題所在，並且修正自己的盲點，而同時保有專家的洞見。雖然這樣子 review 的 effort 會比較高一點，時間會稍微長一點，但是在過程中卻是值得的。此外，成本跟方法也沒有想像中的高以及複雜。在這邊，我是要做一個簡單的示範，跟業界的產品設計者分享透過這樣子的 review 方式，可以在讓你出貨前可以如何用最簡單的方式，最小的成本來獲得使用者意見。這種 combo 的 review 絕對是值得的。

首先，我們要找一個專家，因為整個測試都是由專家來主導，因此專家的知識是非常重要的。在一個組織裡面，你總可以找到設計專家，或是互動經驗相關的專家，如果都沒有的話，你可以找相關的朋友，如果連朋友都沒有的話…嗯…就趕快交一個吧!

專家

我想對於 review 這個電子性產品我或許可以算是專家。我本身是研究 HCI (人機互動介面)，有產品設計經驗，同時也具有技術能力，對於操弄使用者測試，雖然說不到專業，但是一些簡單的使用者測試也算熟稔。此外，對於 3C 電子產品的互動介面，除了還在 lab 裡面秘密研究的東西之外，大概沒有什麼特別新奇的互動是我沒看過的。因此，任何新穎的 UI 在我面前要構成新穎的話，是有點困難。這邊只是想要闡述，敝人很難受到新穎性的 UI 的影響，這是好事也是壞事。好事是，我可以更客觀地評估可用性 (usability) 問題，壞事是，我會低估新穎性帶給市場的震撼。因為對於大部分的一般使用者，這類型的互動介面依然是超前的。這也說明了為什麼這款 App 在可用性如此之差的情況之下，也可以賣得這麼好的原因。

這邊我想要說明一下，賣得好不等於設計成功。除非你原本就預期是這個樣子。比如說，你原本預期的目標市場是 A，結果因為其他的因素，結果你在市場 B 成功了，那麼這個是瞎貓碰到死耗子，你無法準確地預測你的成功。因此，你可能以為你在市場 A 成功，所以，你下次就想要用同樣的手段進攻市場 A，但是你一直沒有搞清楚，其實你是在市場 B 成功。這次的 App 大賣，我想很多的因素或許是歸結於新穎性的互動，吸引了對這樣子嚐鮮感興趣的買家/玩家，但是或許不是讀者。我建議，可以對買家做個分析，以釐清問題。關於這樣子互動電子書的個人想法，我留到最後再來討論，畢竟是比較個人意見的部分。

使用者

對於這次測試，我知道儂儂是個女性雜誌。但是，Mr. Tuesday 是個男生，並且非常欣賞這樣子的互動設計。因此，我覺得內容跟互動可以分開來檢視，所以，測試的使用者不僅僅只有女生，也包括了男生。除此之外，此目標平台是 iPad，因此我在測試上面也測試了有 iPad 使用經驗的人，以及沒有 iPad 使用經驗的人。在使用者的背景上，全部都有資訊背景，這一點的確是比較偏頗。不過沒關係，因為在使用者測試之前，我已經充分玩過了，我玩過後的結論是，即使是擁有資訊背景經驗的人都會讓這個產品的可用性 (usability) 曝露出很大的問題，我就沒有必要找一個非資訊背景的人來折磨他/她了。

值得一提的是，使用者當中，的確有真正的 “原本的目標讀者”，如果設計者的意圖是要給原本閱讀儂儂這類雜誌的讀者的話。另外，在測試者當中，也有設計師，以及非常頂尖的 Geek，原因是，我想要從另外一個專家的角度來看這個互動。所以，你可以說，在使用者的尋找上面，我也是搭配了專家/非專家/目標群眾/非目標群眾，這是因為我想要從多元的角度來檢視這些互動。總共的測試者有七位，四女，三男。好了，我想使用者的 profile 到這邊應該可以了，再下去，可能連星座/出生年月日/MSN 帳號都要列出來了。

程序

每一位受測的使用者都非常 free，因為都是我的朋友，所以基本上不會有什麼非常緊張，或是以為自己在接受什麼智力測驗的這種問題。每一個位使用者，我都讓他們從 App 的 icon 親自點進去，第一頁一定是那堆文字漂浮的首頁。然後，我會跟他們說，這是我朋友做的軟體，想請你試用一下，基本上你在操作的時候，就按照你的喜好使用就好，除非你遇到非常大的困難，不然我只會在旁邊靜靜地看你的操作。如果你在玩的時候，有什麼意見或是想法你就直接說出來就好了。我沒有用任何筆記紀錄，因為筆記會讓操作者以為這是個非常嚴謹的測試，而記錄本身就會讓使用者的腎上腺素升高，而無法讓他們輕鬆自在。因此我選擇不用筆記，不過我相信我的記憶力應該沒什麼問題。

總體結果

這款軟體的確在互動上面讓使用者玩得非常開心，因為使用者通常非常少接觸到這麼多不同形式的互動。除此之外，使用者也對整體介面呈現的質感趕到讚賞 (不過這本來就是一款設計雜誌)。另外對於內容方面，在真正的使用者身上，大家一致感興趣的是瘦身的那個單元，除了那個單元的文字有被所有的女生閱讀之外，其它單元的文字大概就是被 “甩” 過去而已。而封面故事，以及人物專訪，通常是一個雜誌吸引讀者的核心 (這就是為什麼我們需要封面人物)，對於儂儂的 “目標讀者” 來說，還算成功，因為這位讀者的確讀了封面故事以及人物專訪，並且非常喜歡嵌入的影音功能，因為一般的紙本雜誌不能達到這件事情。不過，這位讀者表示，內容似乎太少，尤其是衣服的部分。關於內容太少的部分，我會在後面的使用者測試，再度闡述這個問題是怎麼一回事。

前面都是使用者感到非常滿意的地方，而總體而言，除了幾次意外的當機之外，這個 App 設計得非常好玩，而不是非常好讀。因為整個 App 設計的有點類似遊戲，如果說是做火力展示 (像是 Wired 的電子雜誌)， 這樣子就說得過去了。但是這樣子的設計有其缺點，最大的缺點就是裡面有 “太多” 互動的可能。因此，必須要使用者自己來 “探索” 這些互動的可能。加上這些互動的可能手勢非常混亂，混亂到使用者也搞不清楚在哪邊要用哪種手勢。不過沒關係，如果這個 App 只是想要突顯新穎性的話，這邊的確也成功了。

接下來我們就來仔細地 Review 使用者所遭遇的困難，然後我們可以一同透過這個使用者測試，或許可以讓我們瞭解互動的電子雜誌該要怎麼被設計。而本篇的 review 在措詞上面或許會稍微嚴厲一點，這主要是凸顯出問題的所在點。總體而言，此電子書的設計在台灣還是非常創新以及前端的，只是如果我們能夠在設計的時候，能夠更加注重這些設計的原則或是方法，可以讓互動更加順暢，也可提升產品的價值。

首頁

首頁是漂浮文字，使用者可以透過在螢幕上滑動，可以拖曳瀏覽這群目錄。當然，貼心的設計者，也在每一個頁面，設計了一個小問號在右上角。這是為了讓使用者感到迷惑的時候，可以點選小問號來做操作。當按下小問號時，就會如同上面圖片一般，跳出使用者提示。每一個頁面會根據不同的互動要點，有不同的提示，可說是煞費苦心。不過，有經驗的設計師都知道，如果你的產品 (這邊只一般的消費型產品) 設計到需要使用者打開手冊查詢怎麼使用的時候，實際上，你已經離一般的使用用漸行漸遠了。

基本上，在使用者測試過程當中，使用者並不會主動去按那個問號，或者是說，根本沒有人想去按那個問號。除非用手誤觸到之外，那個東西是永遠不會被開啟的。使用者會儘力的嘗試可能的互動，當他/她認為互動以及被他/她 “探索完畢” 後，他/她就會自動跑去下一個單元了。

所以，另外一個問題就出現了。這些太多的互動設計，實際上，並沒有全部被使用者玩過。而大部分的使用者在初步測試的時候只有走過一半的內容，甚至不到。當然，這跟其奇差無比的目錄設計有關。我們在下面會討論到這個部分。簡而言之，使用者自以為玩完後，為了獲取其他遺失章節的使用者回饋，我會主動告知使用者沒有看到的部分。

目錄設計

這本 “雜誌” 設計地最敗筆的地方是它的目錄 (如果它還算是一本雜誌的話)。這本雜誌從讀者開始點入的瞬間，就已經讓讀者開始迷失了。 一般的實體書，因為有書本的厚度，因此，讀者可以藉由這個書本的厚度資訊，大概瞭解自己讀到了哪裡，或者是有哪些沒有看過。加上一般閱讀都是線性，或者說單一方向，就是從前面翻到後面，一般來說即使是跳過不感興趣的單元，也是這樣子線性跳過。

每次我都會笑笑的問: “你知道怎麼回到首頁嗎?” 能夠順利而無礙的操作的人只有一個，就是那個 Geek，我相信他應該跟我一樣宅，但是即使如他，他也沒有發現所有的手勢 (顯然我的宅度稍微高了一點)。沒有一個人知道要按左上角 (如上圖，是按過之後的中間動畫的一張) 就可以回到首頁目錄。因此，使用者總是在自以為是的情況之下以為閱讀完雜誌了。實際上是，他/她根本只看了一半或是一半都不到。對於雜誌製作的人，最悲慘的事情莫過於此吧!  真是讓我想到一個寓言，”如果一棵樹在森林中倒下了，可是它周圍沒有任何可以聽見它聲音的人，那請問這棵樹有產生聲音嗎?”

當使用者按下左上方之後，會切到目錄 (如上圖右)，而不是首頁。不過這樣子設計也是對的，因為目錄才是重點，不過這個目錄顯然無法凸顯重點，多個使用者跟我反映，透過這些縮圖她/他根本搞不清楚裡面有什麼東西。我們想像一下，實體雜誌多少會在標題上面用文字解釋一下，這邊是連文字都省了 。當然也不是沒有文字說明，而是你要點選一個小 icon 後，下面就有文字說明，圖片上也有文字說明。不過這個跟一般雜誌 “一目瞭然” 的閱讀習慣有很大的差別，我們在最後會統一敘述。

瀏覽列

瀏覽列 (上圖右上角) 也是令人迷惑的地方。基本上，整本雜誌設計得很有質感，我也知道設計師都喜歡把按鈕藏得隱而不顯，不過或許是太過隱而不顯，我發現有一半以上的使用者非常費力地才找到按鈕，然後甚至有人會找不到。因為白色的按鈕搭配白色的背景，我想除了設計只之外，大概沒有人會覺得那樣子的按鈕會有多麼直覺。除了迷惑人的按鈕之外，大家對於兩個按鈕的中間也感到迷惑，迷惑的原因是，有時候它會出現一個小房子，有時候不會出現。使用者都以為那個小房子是要回到首頁。當然，的確是回到 “首頁”，但是是單元首頁。不過使用者顯然沒有猜到設計者的意圖，我看到使用者在小房子消失的單元裡面，還試圖點選中間的空白地方，其實他/她應該要點選的地方應該是左上角! 不過天曉得，左上角一個按鈕都沒有，誰又會知道要點左上角! (“沒關係，我們還有問號”…我們就不要再提這個東西了)

另外一個讓所有人都感到困惑的地方，就在於每一個單元，當走到最後一頁，或是最後一個互動的時候。使用者就會不其然地被卡住，而使用者必須要按右上角的按鈕來切換到下一章。每一個使用者，沒有一個例外，都會在任何一個章節被卡了兩三次後，才會意識到要換下一個單元了，該去右上角按一下了。這點就非常令人疑惑了，因為在一般翻閱雜誌的時候，使用者是不需要做一個奇怪的動作，然後才能翻到下一頁，因此，同樣的，如果在單元的最後一頁也應當要直接往下切換才是。對於這樣子的設計，我只能猜測是程式設計時，單元是切開來設計。不過這邊我不太想討論技術設計細節，因為所有的技術設計應該是要支援到無痛的互動。

這張圖，我弄上來還有另外一個事情需要說明。當使用者捲到最後的時候，這時候就會有如上圖的小對話框跳出來，提醒使用者點擊前往下一章節。結果，所有的人都點擊了那個小小的對話框，然後發現沒有反應，以為是觸控面板反應不良，繼續點擊，直到他/她誤觸了那個往右的箭頭。我猜自始自終，他/她大概都沒發現那個對話框是沒有辦法作用的吧。所以，何不讓那個對話框可以作用就好了呢? 這點可用性可以輕易地改善，只要透過這種簡單的使用者測試即可。

接下來我們終於要進入到內頁的部分了，在內頁的互動上面，幾乎是每一頁都有問題。所以，敝人認為這個電子書的設計真是個非常好的 Case ，可以讓我們從中討論學習到未來的電子書或是電子雜誌該要如何設計。

Cover Story

此本雜誌的設計用了一個一慣的手勢，就是照片往左走時，文字會往下拖動到對應的章節；同樣的，當文字往下拖動時，照片會往左或往右拖動到對應的照片。這點手勢正是令大部分的使用者感到困惑的地方。因為使用者不知道整體的手勢是要往左右拖，還是要往上下拖，重點是，無論是哪種拖動，整個頁面都在動。這個頁面還算簡單的頁面，往後的單元有比較更複雜一點的，我就看到使用者手忙腳亂的樣子了。

除了沒有統一的手勢以外，絕大部分的使用者並不知道這個文字可以按上面的小點點那一欄就可以縮下來了。而即使成功縮下來的使用者，顯然意圖就是想要看照片而已，但是一切到下一張照片，文字又跑上來了；然後使用者又要把它縮下去；如此來回，真是令人挫折。使用者跟我反應，他們實在不是很瞭解，當她/他想看照片時，她/他就是要看照片，為什麼無法只捲動照片就好呢? 這個問題充斥了整本雜誌。

Hot Items

這個單元似乎是測試使用者對於流行趨勢的敏感度，因此，當使用者把相關的物件從上方的那一欄拖曳列裡面拖到下方的六個空格，補滿之後，就可以按確認，然後系統就會給個評價。不過自始自終，沒有人搞清楚是怎麼評價的，因為似乎也不是看搭配 (如圖，使用者可以把六雙鞋子都拖進來，雖然不明白其意義)。我猜想是想要順便展示這些商品，不過這樣子展式的方式顯然效果大打折扣。因為根本沒有人會去理那個商品，整題而言，大家就是 “玩” 了一下，然後切到下一個單元。

Movie+Music

在這個單元裡面，有非常好玩的爆米花。這個爆米花會跳出來，然後你把 iPad 左右傾斜的時候，這堆爆米花也會跟著移動，然後…最後就擋住你要看的文字。當然，你還要在左右移動調整一下爆米花的位置，如果你對那一堆文字還感興趣的話。基本上，只有兩類的使用者，一類的使用者，沒有注意到爆米花可以移動，這類的使用者會開始看一下有沒有感興趣的電影；另一類的使用者會發現爆米花可以移動，然後就開始玩起爆米花，基本上內容不重點了，玩完後就進到下一個章節了。所以無論是哪一種使用者，我想爆米花除了好玩之外，弊多於利。

Fashion Notes

在這個小小的章節裡面，其實也 “藏” 了不少互動。我們可以看到如圖，設計者用了小小的箭頭來提示使用者，這個是個很貼心的設計。不過這個箭頭的位置，以及大小都值得商榷。因為在不同的章節裡面，我還有看到標示方向跟互動方向完全相反的箭頭，或者是太過隱而不顯的箭頭。總體而言，使用者沒什麼困難操作這個頁面，他們只是都沒有發現有一個互動而已，就是他們可以點選上方的任何一個小張圖片，然後左邊的模特兒就會如上圖改變。沒有一個人發現，所以，這個互動可以說是白做了。

Jewelry

使用者按了那個看似小門的 icon 後，就會跑出一個小拼圖。不過，沒有人把它玩完，因為玩完也不是重點，或許也沒人記得他們看到了什麼鑽石。不過，如果我們聚焦在討論那個拼圖該怎麼被互動的話，會發現使用者沒把它玩完的其中一個理由是，拼圖似乎不按照他們想要移動的方式移動。拼圖移動的方式不是用拖曳的，而是用點選的。不過，整個 App 都是用拖曳在完成事情，所以使用者認為應該有拖曳的手勢也是不意外。

1 item x 5 styles

這個有趣的章節，或許應該會很受女生喜愛，不過這個有幾個互動設計上的缺點。讓這個單元的有趣性下降了，甚至是消失了。有數位使用者直接跳過了這個章節，我最初以為他們是不感興趣。結果其實不是的，是因為他們以為這個就只有一頁。他們當然也不會注意到，當你把 iPad 往左右傾斜的時候，那個標籤還會左右飄盪。那個進入提示真是太隱而不顯了。非常漂亮地融入到了背景當中。

好吧，如果使用者順利進到內頁。這時候，設計師又假設了使用者會把所有的服裝翻完一圈，然後就會在最後的 Weekend 上面看到一個類似小門的進入按鈕，接著進去後就可以做這個換衣服有趣的互動。這邊設計師，又再度提高了使用者玩這個最有趣的東西的門檻，因為你一定要翻到一個特定的頁面，才會有那個按鈕存在，最後你才會進到這個遊戲。如果以階層計算，你要走三層，如果以步數計算，你從封面走到這個互動大概要 10 步。所以，有一半的使用者玩不到這個互動也是理所當然，因為設計師自己架設了莫名的高門檻。

好不容易進入這個好玩的遊戲之後，我發現可以換衣服的手勢似乎只有在某些區域可以運作，而這某些區域還不在衣服上面。所以，我看到使用者們，轉了幾下後，大多是玩了一次就出去了。因為光是要搭好一個全身上下的衣服所花費的力氣就非常高了。沒有人會想再搭第二次了。非常可惜地，因為女生都很喜歡搭衣服。但是顯然這邊有著太多令人費解的門檻提高了跟這個單元的互動。

Fashion trends

在這個章節，使用者必須要把 iPad 往下傾斜。關於這一點，對其中一半的使用者幾乎沒什麼問題，因為他們在使用的時候，本來就是呈現最優閒的姿態– 將 iPad 放在大腿上傾斜閱讀。另外一半的使用者，會把它放在桌上，然後就會點選那個要使用者傾斜的提使標示，他們誤以為那個是按鈕，當然沒有任何說明說要把 iPad 傾斜。而這些把 iPad 放在桌上的人，顯然也不想要拿起來，關於這一點，我會在後面說明閱讀器的本身會怎麼影響使用者的互動。所以，對另外一半的使用者，他們會嘗試在整個畫面上面亂畫手勢，這時候，我就會告訴他們…你該把 iPad 立起來玩了…

當使用者把 iPad 立起來之後，他們又會遇到一個小關卡，就是它們會看到所有的東西都退去了，只留下中間的空白。沒關係，他們依然會亂揮，因為他們不會看到左邊小小的向上箭頭 (如上面右圖) 告訴他們其實就是用一個向上手手勢而以。不過沒關係，到這邊為止，通常只要不是一開始就進入這個單元的使用者，已經很習慣要 “探索” 這件事情了。所以，在一陣混亂的手勢之下，他們可以找到互動的方式…

Fashion trends – slideshow

這個單元應該理所當然是最簡單的單元才是。不過還好我們有做使用者測試，才避免到這個盲點。在這邊使用者應該是只要看 slideshow 就好，但是這邊又牽扯到一個問題了，如果這個不是使用者進入到的第一個單元，經過長久而新奇的互動，使用者想這件事情絕對不是這麼簡單。所以，他們會以為這個是照片而不會認為這個是影片 (喔, 對於非技術人員來說，看起來像照片的東西應該就是照片)。所以，我就會看到使用者嘗試著用左右拖曳的手勢想要 “換” 到下一張照片。甚至有些人用起多點觸控手勢，然後想要放大縮小，關於這一點是屬於使用的閱讀器問題我們稍後會一併闡述。

當使用者發現怎麼都無法互動時，大部分的人會轉過頭來問我，總可以快轉吧? 我這時候就只能聳聳肩，沒有，這一個章節沒有互動。所以，到這邊，大家瞭解到使用者 “適應性” 跟 “慣性” 有多強了吧。

Beauty Trend

這個互動章節看似沒有問題，要是我獨自一人寫 review 的話，我大概也就幾句話帶過了。不過我發現使用者有很大的問題，大家是否注意到瓶瓶罐罐的旁邊有小小的加號，這些都是可以打開一個窗口來看產品的細節。不過我發現有高達一半的使用者沒這麼做，沒這麼做的原因是因為他們完全忽略那幾個小小黑黑的圈圈。除了這一點以外，我們在最之前有提到，圖片是向左右的手勢，文字是向上下的手勢，然後無論你動哪一個，整個畫面都會動起來。這邊就是真正的大魔王了，整個畫面動得眼花撩亂，然後我也看使用者弄得手忙腳亂，在圖片上面嘗試著上下，在文字上面嘗試著左右，然後畫面就忽前忽後。真是具有極高的互動性…

Step by Step

有高達一半以上的使用者就在上面用左右的手勢看完照片後就出去了。也就是說，有一半的使用者並不知道他們要點選進去，然後裡面有互動。當然，融入背景的提示居功厥偉。當使用者進入到裡面開始幫模特兒上妝時 (如上面右圖)，使用者嘗試了一下就知道要拖曳到臉上了，沒關係這個門檻不高。不過讓使用者迷惑的是，這個拖曳似乎沒有意義，因為無論他們拖到眼睛還是鼻子還是嘴巴上面都無關緊要。對於左邊的長條 bar，使用者也會嘗試著想要直接跳到其他的步驟，不過顯然沒有意義，因為左邊的 slide bar 是無法互動的。只有兩個人做完這個上妝動作。我猜也沒有人在意裡面到底放了什麼牌子的化妝品。

Beauty special report

這個單元前面有一些簡單的互動，像是是非題之類的。大部分的使用者對於美白似乎不這麼感興趣，或者是說，這樣子的排版，讓她們感興趣不起來，這邊我說的她們是指那四個女生。沒關係，經過導引後，大家都會到這個有趣的轉輪上面。然後我又再一次看到使用者不解地操作。這個轉輪似乎是很直覺地要用滑動手勢，不過不知道為什麼使用者在這個地方反而在用點選的手勢，當然，點選手勢無效。對於上方的標題，我們在整本雜誌，終於首次出現了提示使用者前後頁的 icon 了。由於出現的是 icon，所以使用者又下意識地點選，而不是用滑動手勢。這點觀察是頗有趣的，因為在大量的手勢互動之後，使用者應該很習慣用手勢，但是我們可以看到 icon 的制約力有多麼強大。只要是 icon 出現，使用者就會進入點選制約模式，這當然是長久的視窗介面訓練的結果。

Body

這個章節 highlight 出來，不是因為它有問題，而是它沒問題，而且是設計地非常成功。所有的使用者 (這邊我指女性們) 都對這個章節的內容感興趣，並且可以順利地互動。這個章節代表著僅存的成功設計。我們會在後面討論這樣子的設計究竟帶給我們什麼樣的啟發。

Travel

這個章節或許也沒什麼問題，因為使用者就看看文字，看看照片就好了。但是經過使用者測試後，發現問題還蠻大的。我們之前說過，當你拉動下面的文字的時候，上面的圖片會跟著轉動。不過有些小章節裡面，介紹的圖片過多，因此文字不夠捲動完圖片。因此設計師就貼心地在圖片右下角放了一個提示 (不過是跟手勢相反的提示)，不過這個提示非常隱而不顯。結果，使用者測試完畢，只有我知道有多餘的相片可以看。或許這些多擺的相片也是放心酸的吧。

隱藏手勢

終於我們到了內容的尾聲。當使用者盡情互動完後，我們瞭解到這個雜誌的設計只有單點觸控的手勢。除此之外，當你拖到單元的結尾的時候，你不得已必須要按右上方的按鈕切換到下一個單元。其實，切換單元不必這麼麻煩，你只要用兩根手指頭拖曳一下，就可以切到下一個單元了。而這也是全部 App 裡面僅有的多點觸控手勢。不過這個手勢顯然設計地太過進階，常人是無法發掘的，只有阿宅中的阿宅才會發現這個神奇的手勢。(別問我怎麼發掘的，或許這就是專業的所在?)

總體討論

市場

我想這個產品無遺的是個很好的 case，讓我們透過了這次的 case study，深入瞭解了一個電子書如何被設計，以及設計出來的手勢對使用者會造成什麼問題。透過簡單的使用者測試，顯示了這款產品在易用性 (usability) 的度量上面是失敗的，除了易用性上面的失敗以外，內容也是失敗的，因為使用者是 “玩” 得很開心，不是 “讀” 得很開心。那麼為什麼這款產品又會賣得這麼好呢?  我想歸結的原因就是新穎性，因為市面上沒有類似的產品，因此這個產品在初步推出後可以獲得成功，這一點是合理的。

因為新穎性，而吸引到了許多喜歡嘗鮮的玩家，也就是在 “Crossing the Chasm” 裡面所提到的 “Early Adopter”。而一般目前買 iPad 的使用者大部分都是屬於 “Early Adopter”。因此，至於產品的設計成功或是失敗，就要端看產品設計者是否一開始就瞄準的是這樣子的客群。如果原本是瞄準 A 市場，最後在 B 市場成功，這樣子的成功不能算是成功，反而會給團隊帶來很大的誤解，而朝著錯誤的方向走去。所以，我建議可以檢視購買的族群，而根據我的猜測，購買此 App 的人是對 “互動的新穎方式” 感到興趣，而不是對內容感到興趣。 如果是這個樣子的話，這樣子的設計就不足以為長遠設計的依據，因為喜歡嘗鮮互動的人，並不對內容感到興趣，而是對表現的手法感到興趣。所以，如果要瞄準同一個市場，你下一版唯一的方式，就是弄出一套完全不一樣的互動方式，這樣子你可以吸引到同一個群族的人。

閱讀還是玩樂?

在這次的體驗裡面，無論是我個人覺得，或是經過使用者觀察後，我發現這個經驗都不能稱之為閱讀經驗了，我倒是覺得比較是在玩遊樂器。而且太多的互動，反而讓整體的閱讀失焦了。我想我們這邊是談論電子書，所以另外一面玩樂怎麼設計我們就不討論了。這個 case 很明顯的告訴我們，當使用者有太多的手勢或是互動需要探索的時候，使用者本身的注意力已經不在內容本身，而是在於如何理解這些互動。而有興趣理解這些互動的人，本身也僅僅只是對互動設計感興趣，而不是對雜誌內容感興趣。也就是，做為儂儂雜誌，所謂的 “雜誌” 本身已經蕩然無存。

此外，過多的手勢，造成使用者的困擾不言而喻。我們在產品設計的時候，我們都一定會強調產品的使用經驗的一致性。這個一致性不是因為產品設計師想要，所以我們要設計一致性；而是這樣子的一致性是使用者的天性的需求。我們在前面已經述說了，使用者對於使用產品會有慣性的行為，這樣子的行為我們就稱之為一致性。如果我們硬要套上一個學術名詞的話，那就是心智模型 (mental model)，不過這邊我們還是把這個先擺在一邊。所以，當使用者在開始接觸到這個 App 之後，發現手勢很多，能夠互動的元件很多時，每當進入到一個新的章節時，我就會看到使用者嘗試著用各種不同的手勢尋找可能隱藏的互動，包括把整個 iPad 晃來晃去，倒過來使用之類的；因此我們就不意外，為什麼使用者對於 slideshow 的章節會期待應該要有所互動了。

不過，無論是怎麼樣的互動，這樣子的互動都太誇張，而且超過了一般電子雜誌閱讀的需求。試著想想，請問你看雜誌的時候會有這樣子的動作嗎: 把書本晃來晃去、費盡心力去尋找可以被互動的元件。閱讀本身應該是安靜的，而既然是閱讀，就應該要支援閱讀的一些功能。比如說，目錄，或是 index，可以方便讓使用者知道自己在哪兒。而這整本雜誌的設計，顯然是讓使用者完全迷失了。而不良的設計不但讓使用者迷失了，並且連帶地連這些內容都被使用者不自覺地忽略了。

此外，這些過度注重美感的設計，把所有的按鈕以及該要顯示的使用者提示全部都藏得非常好，我想這邊就是設計師的失誤。為了維持美感，而妨害到了易用性 (usability) 這可是最大的忌諱，美感是要兼具易用性，而不是設計得看起來非常好看，但是非常難用。當我們設計互動的時候，我們要特別注意到使用者的 flow，這邊所謂的 flow 就是只當使用者進入到使用的 mode 的時候，眼睛會不自主地聚焦在部分區域，並隨著工作流程而改變注意的地方，因此會產生所謂的 “Selective Attention” 現象 (如上圖 video)。所以，除非是自然的一些必然的互動，不然一些什麼額外的提示，都會自然地被使用者排除在注意力範圍之外。而此 App 就因此做了很多 “無用” 的設計，這邊指的無用並不是指真的無用，而是指，使用者根本沒有用到，或是沒有意識到，那整個設計無論多麼費力都是白搭。

閱讀器本身

使用的閱讀器本身實際上也提供了強大的制約效果。iPad 是 Apple 非常有名的產品，因此，使用者對於 iPad 的期待，會自然地轉移到對於 App 的期待。這是因為使用者無法辨別這是 iPad 所提供的技術，還是 App 本身所應該要提供的技術。不過對於使用者來說，iPad 所提供的技術，不是本來應該就要有的嗎?  所以，當使用者開始看照片時，我可以看到使用者會試著用多點觸控地手勢想要放大看這些照片，或者是想要用 zoom in 的手勢將文字放大。使用者這些行為都是對的，因為這些行為都是 Apple 教導他們應該有的行為，就好像我在任何的文書處理軟體裡面要做 “剪下” 的快捷鍵是 Ctrl+x 一般，如果當我下了這個指令沒有動作我自然會困惑；如果出現其它的動作我就會更加困惑!  所以，當我們建立在一個閱讀器上面實現互動的閱讀時，我們要特別注意，到底使用者對於這個閱讀器的使用習慣是什麼，這些都是應該被考慮到互動設計元素裡面。

此外，我也發現 iPad 本身重量不輕。因此，使用者不是放在桌上，就是放在大腿上，然後就很少移動了。幾乎很少人單手立起來看，因為這實在太不舒服了。瞭解到這一點，我們就瞭解到那個爆米花的設計是多麼讓使用者費力。當有許多種技術可以被實現的時候，並不代表我們就一定要實現它；你可以做得到的事，並不代表你一定要這麼做。所以，除非有特別特殊的應用，不然就不要隨隨便便用到 iPad 的 Gyroscope 或是 Accelerator，除非你想讓使用者鍛鍊他的臂部肌肉。而實際上，在閱讀的時候，本身也沒必要這樣子晃來晃去。

良好的設計

在前面，我們說 Body 那個章節是個良好的設計，為什麼說它良好，主要是它符合了幾個重要的事情。第一個，使用者可以專心在內容上面；第二個，使用者可以利用已知的自然手勢來做互動，毫不費力。這樣子是否給了我們什麼樣的啟發呢?  的確，如果是一本閱讀刊物，我們的互動應該是要讓使用者能夠對內容物本身感興趣，而互動是用來幫助使用者能夠方便探索內容物，或是方便理解內容物。因此，增加 Video 是好的，因為傳統的雜誌做不到這件事情；增加圖表是好的，尤其是可以縮放或是具有不同深度/複雜度表現的圖表 (level-of-detail)； 很多的漂亮的圖片是好的；可以簡單做書籤，做筆記是好的。

另外由於儂儂是針對女性一些衣飾的雜誌，因此，有些特性也應該要具有。比如說，傳統雜誌一個頁面可以呈現多種商品讓使用者比較，這邊的 App 反而在一個頁面的內容減少了，或者是排版的關係，讓使用者甚至覺得內容比傳統雜誌少很多。因此，如果能夠有一個介面可以把這些商品都在同一個頁面陳列，以視覺的方式做比較，這也比較好；此外，如果能夠把一些喜歡的東西放入到 “我的最愛” 或是個人虛擬衣櫃裡面也很不錯。

另外，這種雜誌說明白點，就是希望女性能夠購買這些介紹的商品。然而如何去那兒購買，購買的資訊如何等，都非常不清楚。或者是，這些資訊都離物件本身非常遙遠。既然有電腦互動技術的支援，這些東西應該可以用一個小標籤標在物件旁邊方便使用者查詢；又或者是可以連到購物商店直接做購買 (當然這就要看電子書本身的規範是否支援了)；又或者是可以連到相關網頁看更多的資訊。既然是連網的電子書，是否可以更加發揮網路的優勢呢? 對於某一些商品，使用者是否可以直接評論，而其他的讀者也可以即時看到這些評論而參與討論呢?

既然是在 iPad 上面做設計，我推薦觀看此影片，或許可以增加一些設計上面的 sense:

Designing Graceful, Gracious Interfaces for iPad from The Omni Group on Vimeo.

結論

我想設計一個新產品是困難的，尤其是利用新的科技設計新的產品。我們都是在科技的前緣探索互動的可能。但是在設計產品的時候，我們或許要記得，一般使用者離這些前緣非常遙遠，如果我們一定要介紹新的互動給使用者，我們就必須要教導他們；而一個新的產品，或是一個新的應用，如果有新的互動，最好不要超過三個，因為你總要讓使用者慢慢適應，慢慢習慣這些新的互動方式。而當你一旦創立了某種互動的手勢，這個互動的手勢既不可以跟以前既有的手勢衝突，也不可以跟以後即將開發的手勢衝突，簡而言之，就是要有一致性。而且最好的是，我們應當設計最小的手勢集合來互動絕大多數的功能。80/20 原則永遠適用，讓80% 的功能由 20% 的手勢完成。不要挑戰使用者的記憶力或是學習能力，使用者不是來上軟體訓練班，他們只是想要用這些軟體達到他們要做的事情而以，用這些軟體對他們而言只是過程而已。況且，如果是閱讀的話，我就更想不到為什麼我們要挑戰使用者的破關能力了。

在這邊，我示範了簡單的專家搭配使用者測試，我們就可以得到許多設計上面的啟發以及修正。這些都只需要非常低的成本，以及相對少的時間就可以達成。我期望未來的產品設計者，都能夠用這種方式跟目標使用者做接觸。親自瞭解使用者，會讓你的產品的設計更貼近使用者，也會讓你的設計經驗以及設計技巧更上一層樓。

最後，我要用我的好友的話來結尾。最好的設計，應當是讓使用者察覺不出有經過設計的設計；也就是說，當使用者用的時候覺得理所當然的時候，那就是成功的設計了。

好了，我該關機休假去了。希望這篇文章對大家有所助益。如果你想獲得一些比較即時的 UI 資訊，或是想跟我討論的話，歡迎你到 Facebook UIUI

註: 本文章圖片來源均截圖自儂儂 (Bella) iPad App，所截取圖片皆經過授權

加入MMDays在facebook的粉絲團 隨時閱讀最新文章

(Hack KINECT 後，用手勢操作 Roomba. 圖片來源: sina.com)

由於我們的好朋友 Mr. Wednesday 目前被要事纏身，所以今天就由小弟我來代打了。由於我是學習人機互動 (Human Computer Interaction) 的，因此經常在研究的領域能夠比一般的應用看到更前瞻一點的互動技術或是應用。雖然這些技術目前都還在實驗室裡面，但是因為都是實際做出來可以運作的原型(prototype)，因此，離實際的應用也不遠了。所以，我一直很想要寫一系列的文章來介紹這些即將改變你我的生活環境的互動技術，讓沒有任何技術背景的人也可以瞭解到，原來我們未來的世界即將要被這樣子的科技所改變了。我想這一系列的文章就叫做 “改變世界的互動科技” 好了。

在 HCI 裡面，我目前所學習的領域橫跨了影像 (Video)、照片(Photo)、多點觸控介面(Multitouch User Interface)、手機介面 (Mobile)、資訊視覺化 (Information Visualization)、機器人互動(Human-Robot-Interaction)、人腦運算 (Human Computation)、社群網路 (Social Network)、實體介面 (Tangible UI)、傳統的視窗互動 (WIMP-Window-Icon-Menu-Pointer)、擴增實境 (Augmented Reality) 以及現在正紅的體感介面 (Body User Interface)。當然，這不是人機互動領域的全部，但是由於目前我只熟悉到這個階段，因此我將會先從這些領域來跟大家做介紹。不過，學有不專，如果有這個領域的專家看完小弟的文章後，願意出來補充，那這個文章也就達到了拋磚引玉的效果了。

(HRP-4C, 日本機器人頂尖的代表作. 圖片來源: JIAU)

在眾多的領域當中，我想，我就先選擇機器人互動 (Human Robot Interaction) 領域好了。主要原因不僅僅是為是這我目前才剛學習的新領域之外，也是因為今年的 HCI 領域中最高的 國際會議 (SIGCHI) 的閉幕演講的主題就是 “基於道德的角度出發來跟機器人做互動 ” (Doing what’s right with robots: an ethical appraisal)。是由來自英國的 Noel Sharkey 大師所給的一場精采的演講 (有興趣的人可以看這 Sharkey 在 Science Magazine 上面所發表的文章)。這也正說明了，機器人已經離我們不遠了，而實際上，可能你家就有一隻名叫做 roomba 的機器人。或許它不叫做 roomba，而是叫做藍波。

當然，我想你已經迫不及待想要知道有哪些互動介面被發展出來來操作機器人，但是在進入介紹這些酷炫的互動科技之前。我想，就讓我們先來看看機器人互動這件事情。我很喜歡看科幻小說，其中艾西莫夫的<基地>裡所描述的索拉利星上面的情況最令我難忘，因為，這個在多年以前完成的作品，似乎即將預言未來的人”機”互動。在索拉利星上面的人機比 (人類 : 機器人) 是非常之小，也就是說，一個人可以統馭數千萬台的機器人，這個是何等壯觀啊!  當然，如果你以為這個樣子的世界離我們很遠的話，那麼經由歷史來看，我們可以看到人類在物質文明上面的進步絕大部分是來自於自動化的科技。也就是說，利用了這些自動化的科技，以往需要 100 個人才能完成的事情，現在大概一個人可以完成。比如說，你利用 Google 來蒐集資料，不就是利用 Google 後面的演算法 “自動” 幫你把相關的資料給分析排序了。

(Roomba. 圖片來源: DVICE.com)

然而雖然資訊科技可以幫忙自動化許多的事情，但是還是有很多的事情我們還是要有實體的代理人來替我們處理。比如說打掃家裡，這就是一個需要實體的代理人來親自拖拖地、掃掃地、折折衣服等等。因此，隨著科技日新月異的進步，終於，我們的科技到達了可以支持我們可以有處理居家雜事的機器人終於誕生了! 由 iRobot 所研發的 roomba 風靡全球，許多人現在出門只要按下一個鍵之後，然後就可以安心上班出門，然後等著回來看著家裡乾乾淨淨的地板囉!

(使用者想像的機器人. 圖片來源: robot in the wild)

嗯，等會兒，真得是這麼一回事嗎?  其實，人類的行為比你想像中的還要複雜，所以，當然不是這麼一回事! 研究學者們當時為了瞭解使用者如何跟這類 “新型” 的 “機器人” 互動，特別跑去使用者家裡做了使用者測試。他們當然會給使用者免費的 roomba，但是給他們 roomba 之前，他們是先詢問他們對於所謂的機器人的期待。於是大部分的使用者就利用手邊的東西剪剪貼貼畫畫，喔，想必聰明的你也一定猜到了。這些使用者當然認為機器人應該就是至少要有手有腳囉! 顯然我們的教科書並不是白教的，有智慧的生物不都應該至少要 “這個樣子” 嗎? 所以，當然你也可以預想到當使用者看到 roomba 時的訝異表情: “你不是開玩笑吧?”

所以，當使用者開始初步使用這個看似不是智慧生物的機器人的時候，實際上根本不是跑出去做買菜這類的事情，反而是在家裡面監視著這個機器人。他們看著這個蠢傢伙在那裏轉來轉去當然有他們的理由。這個圓圓的東西又沒有長眼睛，怎麼會知道哪裡吸過哪裡沒吸過，一定是會弄的不乾不淨啦!  不然就是，搞不好這個蠢傢伙會不知道為什麼卡在哪一邊可能再也出不來了，我好歹在旁邊也可以救它一下。所以，事情正好相反，原因就在於，一般的使用者無法充分信任如此看似愚蠢的機器人。

(使用 roomba 前, 兩個禮拜跟六個月後的房間圖, 資料來源: Domestic Robot Ecology)

不過如果你以為故事到這邊就結束了，那又太小看了 roomba，也太小看了人類。其實這個 roomba 當然也不是那麼愚蠢以及無用，所以，幾次下來之後，使用者發現，這個呆呆的 roomba 竟然還可以把吸地板這種家事做得還不錯。只不過這個傢伙因為什麼都吸，有時候吸到一些無法入口東西把吸口都嗆住了，還要幫它解圍，這可真是麻煩。不過山不轉路轉，瞧，原本凌亂的使用者房間，為了讓 roomba 可以順利地運作，竟然在跟 roomba 相處了六個月後，使用者的居住房間自動向上升級為可以跟 roomba 共生的環境。

(使用者裝飾 roomba. 圖片來源: Make)

除了跟 roomba 共生之外，這隻會動來動去的傢伙，很快就成了家庭中的 “成員” 了。不少使用者甚至給這些機器人賦予名字，然後在路上看到這亂竄的傢伙的時候，還會順便問候打個招呼，於是 roomba 又從一個原本使用者認為愚蠢的傢伙升級成了一個似乎有點智力的好夥伴，甚至可以說，也許是一種另類的寵物。所以，這邊我們可不能小看人類的移情作用。

(小朋友跟 robot 互動.圖片來源: robotsnob.com)

根據研究，如果我們把人形機器人跟小孩子在一起相處，小孩子所發揮的移情作用比你想像中的還要大。小孩子會認為他是個真的生物，並且在離開時跟它說掰掰就算了，竟然還會幫機器人蓋被子以免它著涼哩! 如果相處久了，小孩子甚至還會模仿機器人的行為，可真是所謂的潛移默化。因此，這邊作者又不禁要佩服艾西莫夫的想像力了，在 <基地> 系列裡面，艾西莫夫以深刻的筆觸描寫了索拉利星誕生的小孩對於機器人的依賴以及親密度跟信任感，這樣子的感覺甚至遠大於跟真實的人相處。因此，這讓我們不禁又再度思考，當我們把一個新的科技帶入了社會之後，或許，這才是真正互動的開始。

人類雖然發明了這樣子先端的科技，然而自己的行為以及認知，又反過來被自己所發明的科技所改變，如此反覆下去。因此，對於這些科技的互動設計，是如此的深遠地影響著我們的認知以及日常生活。因此，如何能不好好設計這些互動的介面呢? 不過，寫到這邊，我想，篇幅也已經太長，這些新發明的居家機器人操作介面就讓我們留到下回分曉吧! (讀者: 啊! 呼嚨了這麼久竟然一個新的操作介面都沒看到! #$%^&… [哈! 不好意思囉! ])

加入MMDays在facebook的粉絲團 隨時閱讀最新文章

(圖片來源: 博客來)

我很久沒有寫書評了，不是因為我看的書少，而是因為我時間太少。但是，這本書我一定要為它寫書評。因為這本書來自於我的好友吳翰中 (Han)。Han 在我從一個完全沒有任何設計背景的人，轉型到 HCI (Human Computer Interaction) 的研究人員以及設計師，給了我很多有用的意見以及幫助。現在看到他終於順利地產下了這本書，著實讓我非常開心。因為我知道: 他從半年以前就已經開始專心在寫這本書了。Han 是個典型的跨界思考的設計師，對於推廣 “美學經濟” 這個概念不遺餘力，從他個人的 blog  ”美感經濟與風格社會的對話“ 的文章就可以看出來了。身為一個念美國杜克大學企管碩士的高材生，Han 對設計這個領域可說是嚮往不已。然而，不一樣的是，Han 將他在管理學學到的知識挹注到設計這個領域，並且非常熱衷地成為了 “美學經濟” 的傳福者 (evangelist)。

當我在誠品拾起這本書時，我很高興它還依然列在暢銷排行榜的書櫃上面。當我在日本從事研究的時候，我將這本書給我同事看的時候，他們很喜歡這個書本的編排設計，當他們問我這本書是否會在日本發行的時候，我只能跟他們說，真是抱歉，目前只有中文版。(@Han: 你可以考慮翻譯一下 )。這本書在寫作上面非常用心，避免使用艱澀的專有名詞來迷惑大家，並且羅列了大量精美的圖片，我想光是看圖片也會是一種享受。除了書本最前頁用來表示各個地方的設計的 “設計地圖” 之外，書本的末頁還附上了作者們用心編排的設計年表。

我想本書的設定應該是給想要一窺設計的商業人士。因此，在書本的編排上面，比較像是管理學上面的個案探討 (case study)。藉由一個又一個成功的案例來闡述美學如何成為企業在差別化中的競爭力。然而如果你以為所謂的 “設計”，就是把東西弄得漂漂亮亮，這樣子就是設計的話，Han 會告訴你，真正的設計是 “以人為中心的設計”。所以，設計不僅僅只是外表上面的設計，而是在透徹地瞭解人的認知以及需求後，所產生出來的整體使用者經驗。

當我閱讀著這本書的同時，我也一一地翻動著我的記憶。其實，在我的短短的人生生涯當中，我看過的商業書籍跟我看過的程式書籍是差不多一樣多；而在我轉變成為 HCI 研究員之後，我看過的 HCI 書籍又跟前面的兩者的份量差不多一樣多了。因此，當我看到 ZARA 這個名詞的時候，我腦中浮現的不僅僅是 “快速時尚” 這個名詞，這個名詞還代表著一個不同以往的商業策略 (Business model) 以及設計策略 (Design strategy)。”快速時尚” 僅僅只是一個抽象概念，然而如何支援 “快速時尚” 的成功，就牽扯到了整條供應鏈以及對於人性的觀察。如同詹宏志在這期商周的感言一般: “一分鐘能知道的事情，兩年才能做得出來; 五分鐘能知道的事情，五年才會實現”。因此，我想，大家在讀過此書後，雖然有著 “美學經濟” 的概念了，但是我必須要說，落實這樣子的概念，在實作上面跟在抽象概念上面，還有很多的路要走。

如果你期望，在導入 “美學經濟” 的概念之後，事業馬上就一飛衝天。這個是緣木求魚。在利用這個樣子的概念之前，這個樣子的概念必須要成為公司的 “基因”，也就是說，無論你在下什麼決策之前，你的 check list 上面永遠會自然地想到這個因素。只有養成了這個習慣的動作，這樣子的能力才會在實戰中展現出來。因此，從概念到成為公司的基因，這往往是一條漫長的路。就如同六個 sigma 的道理如此簡單易懂一般，講一遍，你就會懂了。不過懂了，跟真得做到了; 然後持續地做到了，這就需要時間了。不過長久來看，如果企業需要走品牌路線，這樣子的基因是不可或缺的。

當然，由於本書的設定是給沒有任何設計背景的商業人士，或是沒有任何商業背景的設計人士。因此，對於一般已經有基本認識的人來說，本書的深度或許來說會稍為淺顯了一點。然而即使如此，快速地翻過這些成功結合設計的案例，依然頗有溫故知新的效果。而且我也相信，作者群們應該也會努力不懈地來個第二彈，來滿足一下像我們這一類已經不是初階人士的讀者吧  我衷心期盼作者的努力能夠開花結果，也衷心地期盼這本書的續集。讓我們用更深刻的案例分析來剖析思考如何將 “設計” 與 “商業” 結合。

加入MMDays在facebook的粉絲團 隨時閱讀最新文章

本來 iOS（iPhone OS的新名字）在可用度以及現有應用程式就有領先，但由於用的軟硬體比較舊，慢慢被其他廠商追上時， Apple又出了一個不是迎頭趕上、就是超越的新裝置 iPhone 4，這下差距又拉開了。

優秀的硬體與工業設計

這次的 WWDC，iPhone 4 再度展現出優秀的硬體與工業設計能力。重頭戲落在高畫質的顯示螢幕 (Retina Display) 上：362326 dpi。Steve Jobs 說的沒錯，iPhone 4 是設定新標準，以後其他廠商又只能想辦法在後苦追。362326 dpi有什麼好強調的呢？關鍵是 iPhone 4 展現的是「超乎印刷品質」。例如說，一個字母實際尺寸要多大眼睛看了才舒服？大概就是那麼大，解析度高的時候字可以小些，但也不能太小。手機螢幕物理尺寸就是如此，因此你能放的內容並不會多多少。但 dpi 高，你可以用更多點來組成，觀看效果就會舒服。這點由老賈的 demo 可以明顯看出。

光是外觀與顯示上的差異，用戶就會覺得這是精緻的產品。iPhone 在顯示品質這方面是其他競爭對手所不及。例如 Nexus One 的 AMOLED 賬面上解析度不低 (800 x 480)，但實際有效的辨識度大概要折半。

右圖：數位圖案原圖，左圖：Nexus One的Amold顯示結果。原文出處

至於工業設計指的就是外表很美XD（當然你可以有不同意見），此外金屬邊殼當成兩個天線這設計很不錯，收訊會因此更好嗎？還不知道，要看校調得怎樣，如果真的好，那可能又是另一個專利保護的硬體設計。例如 MacBook 那個電源插頭，明明蘋果這樣的設計比較好，但其他廠商就是不能學。Apple 的強項就是在整體：例如同時間發表的HTC Evo 4G，在部分硬體規格勝過iPhone 4（譬如前後鏡頭的解析度），但到了實際使用，iPhone整體經驗仍然會是較佳的。

Facetime 將帶動視訊電話新標準？

除了硬體規格之外，Apple 還宣布了 Facetime 這個視訊電話的應用。雖然說這是個舊點子，但過去數年來一直沒有人推行成功。不過，ReadWriteWeb 對Facetime的評價，值得玩味。

ReadWriteWeb的論點，是Facetime即將再度帶動美國（以及全世界）電信商對視訊電話的重視，包括提供更便宜、更高的頻寬（以提供視訊電話），並且推動Facetime成為統一的通訊規格。就ReadWriteWeb原文表示，美國不同的電信網路之間，使用的視訊標準不同，因此雖然AT&T的用戶可以打電話給Sprint的用戶，卻不能用視訊通話。但iPhone 4的推出肯定會讓電信商著手整合、讓facetime成為視訊通訊的標準。

不過這個論點還頗有值得玩味之處。因為根據過去經驗，Apple並不是特別熱衷訂立開放標準，反倒比較傾向封閉標準。因此底下這段話Steve Jobs到底能做到幾分？值得觀察。

Jobs said on stage that the system was based on extensive use of open technical standards, and that the company intends to work hard to make FaceTime an open industry standard itself.

（賈柏斯在台上說，facetime是根據許多公開的技術標準所完成，而且Apple會致力於讓facetime成為產業公開通用標準）

如果順利的話，Apple 死忠粉絲開始使用Facetime => 電信商不得不跟進標準 => 現行唯一的通用標準… 然而，就算Apple這樣打算，其他人買不買帳仍然是未知數。就如同Microsoft力推 Open XML，名字很 open，規格也公開了，但真的在用的仍然只有自家產品。很可能，Google還會跳出來主導另一套標準。

那，facetime的出現會導致視訊電話需求因此大增嗎？Carrier的合作會是關鍵。以現實來說，美國其實有（還算）普遍的WiFi（AT&T之爛就被罵翻），3G 那邊技術上也沒問題，主要阻力是電信商抗拒：以後只能收3G的錢，這東西開通了誰還打普通電話啊？大家都選擇3G 吃到飽方案，錢哪裡來？幾天前有則新聞可以印證這項道理：美國AT&T不顧用戶意見，宣布停止3G吃到飽方案。

不過產業生態就是這樣：你不提供，就會有別家提供。Apple 開了視訊電話這一槍，肯定會讓電信商為難，AT&T沒有3G吃到飽，用戶會一直抱怨，競爭者就會開始提供這一服務，如同Verizon先前宣布免費無限開通Google Voice/Skype一樣。當然，這就是老賈的計畫啊。

其他功能

例如A4，其實是來自ARM的Cortex A9A8核心，由Samsung製造。目前由iPad的表現，還看不出硬體上有特別先進的地方。Battery life 雖然老賈大力鼓吹，但也並沒有特別優秀。例如 Nexus One 的 2G standby帳面數據290小時，而 iPhone 4 是300小時。3G Internet N1為5小時，iPhone 4是6小時等等，參考看看即可。雙麥克風降噪是其他裝置已有的功能，陀螺儀可以增加有趣的應用，Tap to focus（點擊螢幕對焦）在Android也有、Backside illumination sensor在低照明情況下有更好表現、720p錄影能辦到的硬體不少，例如N1 root以後也辦得到。新的 iOS 4 功能加上了Android一開始就有的資料夾與多工能力等。

結論？

回到前頭那張表：

我們發現，新的iPhone在以往較弱的領域如硬體、作業系統功能等等，不是追平就是超越，而既有的優秀使用者體驗以及大量的殺手應用程式、加上優越的工業設計能力，追趕者目前仍束手無策。iPhone 4 的出現，在其市場區隔中與其他手機陣營的差距又拉開了。老賈的自信不是沒有理由的。

加入MMDays在facebook的粉絲團 隨時閱讀最新文章