Best practices come from having done worst practices and figuring out a better way. I have this feeling there simply aren’t enough of those lessons learned to even know.
簡單的簡釋就是: best practices 都是血的教訓，所以如果血流的不夠多，教訓就不會出來…
非常一針見血的說法啊~
今天在亂逛時發現頂頂大名的 Frog Design 正在幫 Yahoo Messenger 設計下一代IM介面，並且是完全 target Windows Vista，相關資料如下：
接著是幾張擷圖(按小圖可看大圖)
1.新介面 + tabbed-chat window
2.有趣的換色工具
不是用一般常見的 color palette 而是用立體的色盤，不過如果我要的顏色不在那六個裏，恐怕還是一樣要開啟 vista 內建的選色工具。
3. 檔案分享介面
這裏可以分享 photo, music, video, document。
選取檔案的介面還算乾淨簡潔好用，比較有趣的是下方用紅色圈出的地方，user可以直接將照片拉放到上面，就完成選取工作。
這樣做的好處是user 不用學會 ctrl-click or shift-click or drag-select，就是當白癡用拖放即可(能讓 user 操作時當白癡並且很快樂的得到結果，就是最上乘的設計啊)
4. 實際分享照片
這張是跳出選取照片框，回到原本的聊天window裏，可在下方看到剛才選的四張圖片仍然在 photo-stripe裏，此時只要拖拉照片到上方就可分享出去，而且旁邊的文字交談也不會中斷。
5. 全螢幕看圖
這是把照片切到全螢幕的畫面，此時所有的交談者都會看到同樣的畫面，有點類似 co-browsing 的味道了。
＊幾點想法
-基本上我還是很討厭 Vista 所謂的 Aeron style 介面，覺得它佔去了太多螢幕空間，整個的做法感覺是「為了設計而設計」，不必要的邊框厚度，光影/暈等，但很不幸的看來這將會未來幾年 Vista 的標準介面風格。
(更慘的是關不掉啊，以前在 XP裏，不喜歡那塑膠玩具式的介面，還可以選擇傳統 windows介面，但在 vista 裏有很多部份是沒法切換掉的，如果真的選了傳統介面，就會精彩到一個神奇的境界…)
-但即使 OS 本身缺陷如此，設計師還是可以很努力的克服並且擠出一些有趣的idea，例如選取圖片的 photo-stripe 與分享圖片的方式。
-目前從業界聽來的(不負責)八卦是 Frog Design 做的介面設計很棒，但有很多部份在 WPF 裏不是那麼容易達成，像是介面的視覺與動畫效果，所以 Y社的人實作起來應該非常歡樂，這也是為何新版 YIM 已經delay數個月的原因…
-從這裏難免會想到如果同樣的東西用 Flex/AIR 做大概會需時多久呢？(呃，我知道 YIM web edition就是用 flex 寫的)，我想最大的差別在於 UI 的難度會低很多，因為在 Flex 裏要客製化元件或改變程式的外觀是很容易的事。
段數低一點的就算只用 CSS 加上一些簡單的 skin assets 也可以達到不錯的效果，至於道行高一點就可以把整個元件都翻掉大改一翻，那就是無所不能(well, 前提是客戶願意簽收並付費，那就真的沒什麼不可能)
-所以綜合以上的想法，再來思考 AIR 未來存在的價值與可能應用，或許會得到一些啟發，當有些事變的不太重要，有些事或許就變的比較有意義。
不過重點是，其實我只用 skype/gtalk/msn 啊~
最近似乎開發 IM 已經成為 flash/flex/air developer 的顯學，再過不久應該就會成為學完 hello world, array swap 後的第三個基礎練習了 
Velvetpuffin 基本上走 trillian 路線，號稱可以整合多種 im account，但原本 trillian 就已經夠槽了，現在用 flash 重寫一次下場也沒太好。
幾個有趣的觀察：
-Velvetpuffin 應該是用 flash 而非 flex 寫成，這點從安裝介面時使用的元件就可看出。
下圖中可以看到它用的 button，是 flash 8時代的 halo style，雙邊線的 button border 是經典代表。
-Velvetpuffin 應該使用了某種 projector wrapper，例如 Zinc 或 screenweaver 之類的程式，但我找不到這兩著的 memory trace，也有可能它是自已用 c++ 硬幹的。
-Velvetpuffin 是個超級 resource hog，開啟後立刻吃光 100% cpu，光憑這點 firefox 平常吃個一兩百 mb ram根本不算什麼啊~大家最好可以再比爛一點…
所以簡單結論是，呃，根本懶得結論了，大家別浪費時間裝就是，現在我要想辦法把它移乾淨…
同場加映：
昨天也順手裝了 gaim 的新版本，現在改名為 pidgin，它同樣也是一個 trillian-style 的 multi-IM client，也同樣的，以一種很特別的方式在難用…
不知道是因為用了 GTK on windows 或怎樣, 整個介面看上去就是很奇怪，一部份是難用，一部份是操作邏輯，multiple windows 的管理等等，簡單來說就是給人一種「玩具」的感覺，我想一個很簡單的原因是它太超過一般user已經習慣的 UI logic & look&feel，所以從啟動的那一刻就輸掉全局了，很可惜啊~
最近因為工作的關係，又開始變身成 interaction designer 同時兼任 information architect 的角色，要為下一個產品做介面設計，也順便把最近市面上十幾個常見軟體的使用者介面重新 survey 一遍，下面是些零碎的心得(以比例來說，大約是全部的 10%左右…)
由於我已經一兩年沒有專任 UI designer (這裏的 design 指的不是視覺設計，而是偏向在進入視覺之前的 information architect, wireframes & mockup) 的工作，因此最先做的事就是把 2005 年後新上市的幾款軟體裝起來玩玩看，我鎖定的方向有三：
-Apple 全系列產品：包含 iTune, iPhoto, iCalendar, Aperture, Page, KeyNote, Final Cut Studio(這裏面就有六套軟體)
-Adobe CS3 全系列：由於某些神奇的因素，兩個月前我收到一份 fedex 來的package，裏面是九片dvd光碟，正是那時還未上市的 CS3 Master Edition，基本上就是什麼東西都有，不過我主要是 focus 在 Flash / Fireworks / Dreamweaver / Photoshop / Illustrator 與外加的 Lightroom
-Web App: 主要看的是 Adobe Live Connect (也就是 Breeze)跟 SalesForce.com 上一些 app 軟體
在一連串頻繁的使用與測試中，最讓我眼睛一亮的就是 aperture, lightroom 與 CS3，下面分別來談談。
＊Aperture
在之前的文章裏我已經稍微講過把玩 Aperture 後發現的有趣玩意(就是它的 palette 按鈕等)，其實除了些 UI controls外，Aperture 很棒的一點是它的 UI layout 設計的非常好，很乾淨，在視覺動線上讓人很容易 follow，而不同功能模組的切換與 toolbar 的配置也讓操作變的很容易，這是一件非常不容易的事。
最近一兩年 Apple 官方推出的幾個 app 都有著這樣的特色，將複雜的功能藏在方便的位置，用漸進的方式一步步 reveal 出來，平常 user 看不到它們，但當需要時立刻就可找到並使用，而要做到這個程度同時還兼顧畫面美感與功能實用性，這真的是要下苦心研究的。
＊Lightroom
Lightroom 基本上跟 Aperture 是同類的軟體，都是讓人整理照片並做適當的後製處理，它會特別讓人注意是因為它的介面配置跟同時期出品的 CS3 suite 很不一樣，似乎是一個完全獨立的 team 做出來的東西。
它的特別之處在於採取了完全不同於 Aperture 般 palette 的設計，而是用 Sidebar 式的組件，同時它很聰明的將工作類型區分成幾大項，例如 Library, Develop, Slideshow 與 Print，當user切換到不同的項目時，就顯示該項目下的幾個 tool panels，透過這種方式，Lightroom 也達成了化繁為簡的目地，user不會被幾十個panels 給癱瘓掉，仍然能保有一個主要的視覺中心(也就是圖片編輯區)
Lightroom 讓我比較頭痛的地方就是那純黑的介面，如果可能的話，我希望能改成螢光綠(反正要wow-factor 就乾脆反差大一點bling翻天 XD) 然後程式一啟動就開始播「眉飛色舞」…總之，黑色介面如雙面刃，慎用慎用。
＊CS3
此次 survey 中最讓人印象深刻的就是 CS3 的全新介面，個人認為這大概是近十年來最棒的設計(相形之下原本穩拿2007 冠軍的 Office 2007 就立刻落馬了，不過對微軟來說開業二十年能上榜一次算不錯了，繼續加油…看看 Vista 能不能打掉重練一次？ XD )。
CS3 的新介面主要是由非常彈性的 palette 與 docks 所組成，所有的 palette 平常可以單獨漂浮(floating)在畫面上，但也可以輕易的收納到app右邊的 docks，更棒的是 docks 還分兩種狀態，一種是全開式，可以看到 palette 所有內容，另一種則是所謂的 iconic dock，此時所有的 palette / group 以 button 的方式呈現，按下 button 後就會彈出完整的 palette。
這樣的設計最大好處在於：非常節省空間。
螢幕空間對做設計的人來說是非常重要的，以往多少設計師要用雙螢幕或三螢幕，為的就是能把一堆 palette 全拖過去讓它們不會互相重疊以方便使用(然後下班回家時拔了 laptop 就走回到家才發現奇怪我的 color palette 怎麼不見了？喔 原來還在第二顆螢幕上…啦啦啦)
CS3 的設計讓有限的畫面上可以容納最多的面板，而且彼此之間完全不會互相干擾，同時也將視覺重心永遠保持在畫布上，空出最多的空間讓設計師專心工作，這才是軟體真正該有的功能不是嗎？。
由於我實在太愛這個設計，因此忍不住去找一下是何方大德的佈施，結果很幸運找到下面資料
Adobe CS3 UI team interview
這是 Photoshop senior product manager 的 blog，他訪談了 CS3 的兩位主要介面設計師問他們是從那裏得到靈感這樣設計新介面，內容非常精彩，comments 更有過之而無不及。
文中還提供了一張圖，展示了 UI team 從 2004 年起訪談的幾百個 user 的使用畫面，看完真是覺得，『做研究就是要這樣搞啊~』Orz Orz Orz
＊CS3 後話
既然談到 CS3 就順說說其它的觀察。
比較有趣的是新介面並沒有套用在所有 CS3 的產品上，目前觀察到的只有 Photoshop, Illustrator, InDesign 與 Flash 採取了這種介面，至於 Fireworks 與 Dreamweaver 則還是維持 Macromedia 時代的舊設計，在上面的 blog文中他有解釋這是因為時間不夠，沒辦法統一所有的產品線，所以我想下一版時應該就會update了吧。
另外，我也無聊裝了 Soundbooth, Premiere, After Effect 起來玩了一下，發現這三支app用的又是另一種介面組件，基本上難用的很有風格，我想大概是程式功能都快做不完了很難有時間顧到介面美不美吧，不過反正平常用不到就隨它去吧…
所以這代表光一套 CS3 suite裏，就有三種完全不同的 UI controls，這還不加上 Bridge 的介面喔…
＊關於 Prototyping
咳咳，回到正題。
基本上這次會想做 app survey 主要就是想看一下這一兩年流行的介面風格，所以當研究做完，當然就要回來幹正事準備設計產品。
這時我才想到，該用什麼工具來做設計呢？以往常用的 visio, powerpoint 或 flash 都各有缺點，適手性實在不高(通常阻擾我思考的程度都比真正的貢獻多)，而其它常見的 axure, iRise等又比較適合做一般 web app，此時才突然想起很久前似乎曾想過或許可用 Fireworks 來試試…
用Fireworks做 prototype 的好處有幾個
1、它是一個向量/點陣兼容的軟體，因此不論是要畫些簡單的 wireframe 或抓些既有的圖片來修改，都可以一站完成，感覺很順手
2、Fireworks CS3 支援 9-slice 設定，而且它的 9-slice 是在 authoring-time 就能發功，不像 Flash 要到 run-time 才能生效(有時還生不出來 :P)，所以我可以輕鬆的自製組件，設定好 9-slice 格線後放在 common library 裏隨時使用，這樣不論在設計過程中要改變 layout 多少次都很容易
3、Fireworks CS3 新增了一個 Page 面板，基本上就像 layer，可以按頁來設計，而且在每個 page 下面又可以有 nested layers，所以自由組合後威力無窮
我自已試做了幾回後發現還真是好用到一個不行，也興起上網查查是否有其它人也這樣想，結果找到一堆(前面的*代表重要程度)，看來 prototyping 本來就是 fireworks 很重要的基本教義之一啊：
**Using Fireworks CS3 to design effective, interactive website presentations
*Wireframing with Fireworks CS3
Rapid prototyping in Fireworks CS3
＊小結
所以，結論是什麼呢？
-Aperture 跟 Lightroom 在介面設計上各有擅場
-CS3 新介面下足功力用心致極實在讓人嘆為觀止
-Fireworks + 9-slice 是製作 prototype/wireframe/mockup 的好幫手
另外之前提過的 About Face 3 買回來後終於有時間看了幾章，日後有空再來寫心得，快速結論是：很值得看，你也該買一本試試(然後這裏是不是該接個書店的link 就可以賺筆 referral fee ? ccc)。
ps. 不過天瓏似乎只有兩本，其中一本沒膠套被翻過很多次，另一本我買走了…so…
ps2. 本文後來加上去的圖案全來自 google image，感謝原圖提供者。
