User Interface, Prototyping and CS3 (images added)

最近因為工作的關係，又開始變身成 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，感謝原圖提供者。