Update 4:

• 重新命名桌面上的檔案時會看到動畫效果….。
• 現在從應用程式選擇「開啟檔案」時出現的 Finder 視窗支援 Quick Look 了。

Update 3:

• 啟動 Expose，按下 tab，可以單獨顯示某個應用程式的鎖有視窗，這個以前就有了，但下方的 dock 會亮起來，更加的清楚明瞭。另外，按著 dock 上的某個 icon 不放，也可以進入這個模式，非常棒。

• Expose 模式下，如果你有縮小到 dock 的視窗，會在下方用一條橫線隔開顯示，點一下可以直接放大該視窗。以前縮到 dock 的視窗是無法透過 Expose 使用的。

• 還有一個新功能，在 Dock 的設定裡可以勾選「Minimize windows into application icon」，啟動他之後，縮小視窗不會跑到最右邊，而是直接縮小到該程式的 icon 上。

Update 2:

• 螢幕小鍵盤的外觀看起來非常業餘，字都糊掉了。

  

Update 1:

• 連線到無線網路時，icon 會有動畫。

• 使用 Safari 播放 Quicktime 檔案時，會出現帥氣的播放按鈕。

  

原文：

• 升級後顯示的顏色有些微的變化，由本來的 Gamma 1.8 調整為 2.2。我的螢幕顏色有用 Huey 校色過，Snow Leopard 比 Huey 調整過的顏色稍亮一點點，但差別不大。

• 如果你的 iChat 連絡人有兩個帳號（如 iChat 與 Jabber），iChat 會讓你選擇要用哪個帳號傳送訊息。

• 使用 Cmd + Space 切換輸入法時，按著 Cmd 不放，會出現輸入法的切換指示，此時再按空白鍵可以不斷切換輸入法。

• 桌面檔案重新排序時有動畫效果。

• 似乎所有程式都變快了，但 Microsoft Word 還是一樣慢，不知是否為心理作用。

• 漢音輸入法更名為「注音」，有變的更聰明的趨勢，但還是沒有 Yahoo! KeyKey 好用；另外，打錯時「刪除整字」的選項似乎消失了。

• Quicktime X（應該是念做 Ten？）不相容於超級外掛 Perian，幸好 Snow Leopard 還會保留原來的 Quicktime 7。

• Quicktime X 現在可以錄製 Screencast 了。

• Quick Look 更強大，可以在 icon 上直接點左右箭頭切換頁面（這點有看 Keynote 的就會知道）我注意到其實是按下空白鍵後，Quick Look 視窗會顯示縮圖裡的那個頁面，也就是說，你在小 icon 裡切換到第 10 頁，放大的視窗也會顯示第 10 頁。

• Finder 的偏好設定視窗過場動畫似乎多了 Fade-in，也可能只是我的錯覺。

通常在 iPhone 軟體下方，你會看到兩種不同的按鈕列，且兩者無法共存：

• 黑底白 icon：可以在 iPod.app 和 Phone.app 上看到。
• 藍底白 icon：可以在 Mail.app 和 Safari.app 上看到。

這兩種按鈕列上面的圖案都是單純的符號，但是代表的意義不同。黑底的是 tab bar，用來切換軟體的不同畫面；藍底的是 toolbar，用來當按鈕發出指令。

Justin Wiliams 在 Die You Damn, Dirty Tab Bar 這篇文章裡提到：

Rather than taking the easy way and slapping a tab bar at the bottom of your UI, put the extra effort into the design process to see if it is possible to do the application using a single navigation stack. In most cases, I think the answer is yes. It may be a bit more work up front, but as your application matures (if it matures), you’ll find that the extra usable space along the bottom of your view will be much appreciated.

由於（標準的） tab bar 會永遠佔掉螢幕下方的空間，所以他認為開發者如果能不用到 tab bar，就盡量不用，未來要新增功能時，可以輕易在軟體下方添加新按鈕。

他以 App Store 為例（iTunes Store 亦同）：

App Store 裡的各種 tab 如 Featured, Categories, Top 25 都是針對商店內容的不同瀏覽方式，也就是當做 filter 來使用。同樣的商店內容，也可以擠在一起，變成像 iPod 階層式的瀏覽方式，這樣的作法在使用上也不會有任何問題。

階層式的安排，雖然在切換到不同瀏覽方式時，需要多點一下，但會釋出下方螢幕空間供更多功能使用；使用 tab bar，雖可以在各個模式間快速切換，但螢幕下方永遠都不能再放別的東西。

對照一下兩個 Twitter client：Tweetie² 和 Birdfeed³ 更可以理解這兩種設計邏輯的差異。

左為 Tweetie，右為 Birdfeed。

Tweetie 有黑色 tab bar，可以在各種頁面間切換。但是基本上這些不同頁面只是相同資料以不同 filter 呈現的結果而已，所以同樣的內容呈現也可以設計成 Birdfeed 這種形式：完全的階層式設計。

接下來，我隨便點一則訊息進入詳細畫面。

嗯…，你注意到以上兩個畫面奇妙的違和感了嗎？

Tweetie 下方的黑色 tab bar，竟然直接變成藍色工具列。

照理採用了 tab bar，應該要在任何畫面都顯示 tab bar，他提供的「快速切換」功能才有意義，但 Tweetie 這裡卻讓 tab bar 消失，以普通工具列取代。

再來看右方的 Birdfeed，點進 tweet 訊息的詳細畫面後，竟然沒有 toolbar 按鈕可用，設計者反而將按鈕變成內文的一個「欄位」：看起來是可以點進去下一層的「Reply, Favorite, Forward, Delete」等字樣，事實上被當成按鈕來用。

合理的設計方式應該是將兩個軟體的畫面互換，也就是說：

• Tweetie 的訊息畫面應該是採用右圖的方式，將按鈕安排成普通欄位的樣式，並且保留下方的黑色 tab bar。
• Birdfeed 則應該使用左圖的藍色工具列，把按鈕擺在 toolbar 上。

這樣一換，操作的感覺就會自然許多。

互換後才是對的？

為什麼這兩個很棒的 Twitter client 各自採用不合理的設計方式？為何兩者會形成「互換畫面才正確」的現象？

以我自己的經驗，也許可以稍稍回答這個問題。

在設計 UI 時，最困難（同時也最有趣）的是，設計者如何將各種抽象的行為具體化：即是將「行為」化為實際的「操作流程」。

當軟體的 UI 完成時，代表所有操作流程形成一個系統，在這個系統裡，在哪一個畫面可以做哪些事，是固定而且合乎邏輯的，只要達到這個目標，這個 UI 就幾乎算完工了。

仔細觀察 Tweetie 和 Birdfeed 的畫面，你會發現兩者在該畫面可以使用的功能其實是一模一樣的，只不過呈現方式不同。

對使用者來說，他們在這個畫面可以做哪些事非常清楚，所以功能不管是安排在 toolbar 或是跟內文放在一起，對使用者不太會造成影響。

回到之前的問題，Tweetie 為何會將本該永遠存在 tab bar 換成 toolbar？

只是單純沒有想到按鈕還可以用「內文欄位」的樣子呈現吧。他們發現空間不夠用了，但是又非要這些按鈕不可，只好把佔空間的 tab bar 換掉。這算是 Tweetie 的一個小瑕疵。

至於 Birdfeed，為什麼不在下面的空間裡放一個 toolbar？除了「設計者的堅持」外，我找不出別的理由，也許跟設計者個人美感有關。

結論

Justin 在文章中建議的：「不使用 tab bar，將下方空間留給未來利用」，正是現在 Birdfeed 採用的方式。

假設明天 Twitter API 多了一個可利用的功能，Birdfeed 也許只要加一個按鈕就能辦到，但 Tweetie （在不偷換工具列的前提下）就要多花點功夫。

臭氧先生訂購的衣服已經到了，經檢查後確認沒問題，收到地址後會寄出，如果收到以後太小件（我訂的是 M）會換 L 的給你。

氣味

衣物在印製過程中，染色原料在烘乾時會產生些許酸味，洗滌過一次味道便會完全消失。

洗滌方式

將衣物反面置入洗衣袋洗滌，水溫勿超過 60 度並且請勿用烘衣機烘乾。T shirt 洗後纖維會變成不整齊狀態，圖案顏色會呈現出略微變淡的感覺，並非掉色現象。

Thanks!

感謝您支持 UI 魂，遇到壞客戶被逼著做出以後不敢承認是自己做的爛設計的時候可以這樣說：

就算我原諒你，鬼也不會原諒你的！（指指自己的 T shirt）

感謝 hlb 提供這句 slogan。

很多設計師沒有找到溝通的方式，他們的熱情在外行人意見的轟炸下逐漸消逝，一次次的妥協造就無趣的成品，最後失去自己的靈魂。

在某大公司不到半年，我的靈魂已經在生死關頭徘徊無數次，雖然說賽亞人瀕臨死亡後實力會提昇，但是不小心就死掉的案例也是有的…，既然隨時都有掛點的可能，不如趁我的 UI 魂還在的時候用他賺點小錢吧！

我的 UI 魂價值 700 萬¹，把它切成一千分來賣的話，每一份價值 7000 元，但經濟不景氣打折，每份只要 70 塊就夠了。

要怎麼賣 UI 魂呢？把它印在 T-shirt 上就好了，每件定價是：

$550（T-shirt 製作） + $70（UI 魂）+ $80（運費）= $700

沒錯，只要 $700 就可以獲得一件 UI 魂 T，而且還擁有自己的專屬編號！

001 號

已售出。

002 號

003 號

1 號 T 已經賣掉了，所以現在要賣的是 2 和 3 號，反應好的話²（賣掉兩件的意思），會 unlock 4 號「嘔吐 UI 魂」與 5 號「UI 鬼」。

該說的都說了，快買吧！直接留言說要買哪一號就好了！

Icon 有三種 size：超巨大、中、小。要用在那裡都沒關係，有用的話說是我做的就好了。

使用方式

要更改 icon 必須要用繪圖軟體，如果你用 Fireworks，可以下載原始檔；如果用 Fireworks 以外的軟體，請直接下載 png 檔案。

• 下載 Fireworks 原始檔（修正）
• 下載 PNG 檔案

我把 icon 的各部位拆散了，你必須在繪圖軟體裡自己組合，每一個檔案夾裡都有附上 sample.png 供你參考。

Icon 裡用到的字型是 Aller，可以免費下載；當然你也可以用自己電腦裡原有的字型。

如果要改變顏色，請改變檔案夾裡 top.png 的 Hue/Saturation 數值，應該所有繪圖軟體都可以辦到。

Update: 修正了檔案內容，請重新下載 Fireworks 原始檔。

雖然兩者都是為了幫助使用者執行 GTD 而設計的軟體，但並不是每個使用者都有時間去讀 David Allen 兩百多頁的書¹；就算讀完書，也並不一定會照書本嚴格執行，而是會將書中的方式自行修調整為適合自己的方式，因此任務管理軟體如果能夠具備適應其他使用方式的彈性，可以接觸到更多的使用者。

OmniFocus 和 Things 都聲稱自己的軟體功能強大且具彈性，可以適用各種使用方式，然而對從未接觸過 GTD 的使用者來說，Things 的「彈性」比 OmniFocus 還大。因為它的介面較簡潔²，且 sidebar 功能較單純，和其他 Mac 軟體的邏輯符合，整體而言沒有 OmniFocus 那麼「硬派」；此外、兩者的定價也反映出市場定位的不同：Things $49 / 約台幣 $1600； OmniFocus $79 約台幣 $2700。

最近新推出的 The Hit List 也是遵循 GTD 邏輯的任務管理軟體，和 Things 一樣有著簡單乾淨的介面，連定價也一樣，但是在使用的友善程度上甚至超越了 Things。

53 x 26 px 造成的差異

這是兩個軟體的 sidebar 對照，左邊是 Things，右邊是 The Hit List。

Thing 由上到下依序是：

1. Inbox
2. Focus
3. Projects
4. Areas

The Hit List 由上到下依序是：

1. Inbox
2. Hit Lists
3. Folders

前三個區塊功能雷同，但 Things 多了一個 Areas 區塊，。

GTD 的邏輯是要使用者把所有待辦事項記在 Inbox 裡，然後將這些項目依 Projects 和 Context（即 Things 的 Area）分類，再依照時間、地點、或是專案類別來選擇當下要進行的工作。

從 sidebar 內容的排列方式就可以看出 Things 的 Areas 區塊完全符合 GTD 的使用邏輯。

相較於 Things，The Hit List 的 sidebar 裡並沒有 Context / Areas 這個區塊。但沒有該區塊並不代表 The Hit List 少了這個功能，而是設計者 Andy Kim 用不同的介面來達到同樣的效果。

取代 Context / Areas 功能的是在藍色 sidebar 上方的這個區塊：

寬 53px ，高 26px ，但它卻是 The Hit List 和 Things 兩個軟體設計理念的分界點。

按下右方的 tag 圖示之後，會看到 tag 列表。

如果你不懂 GTD，看到的的只是三個 tag；但如果你是 GTD 使用者，馬上就會知道前面加 「@」 符號的 tag 在 GTD 裡代表的就是 Context / Area 區塊。

這樣設計是希望讓不懂 GTD 的人輕鬆的使用，畢竟一般的使用者不會去將待辦事項依照「地區」做分類，tag 功能就足以滿足大部分人的需求，因此 Context 這個區塊可以擺到裡面一點；但這樣的作法也沒有犧牲 GTD 使用者所需的功能，稍後會再提到。

從這個設計，就可以察覺 Andy Kim 是「以一般使用者為中心，但進階 GTD 使用者也可以用」的想法來設計。

相較之下，Things/OmniFocus 的理念則是「以進階使用者為中心，但一般使用者也可以用」。

天才都在細節裡之一：Context + tag

The Hit List 在整體設計上都以一般使用者為中心。

例如，The Hit List 將 GTD 裡 Context 和 tag 的概念融合在一起。

在 GTD 的邏輯中，每一個待辦事項都要有所屬的區域（如辦公室、家中、銀行…），這樣使用者就可以集中精神處理在該區域所能辦的事。

在增加一個事項時，使用者可以為該事項加上 tag 或 context tag。

一般使用者不會明白 tag 和 context tag 有什麼不同，但是並不影響到他使用，因為 tag 是一個能夠彈性管理資料的方式，可以適用於任何情況；但是 GTD 使用者則可以併用 tag 與 context tag，又因為兩者都是在同一個介面裡出現，所以用起來非常的方便。

將 context 和 tag 融合的設計不但直覺，也同時適用於一般使用者與 GTD 使用者，但前面提到的三套軟體中，只有 The Hit List 是這樣設計；Things 的 tag 和 context 是分開的，而 OmniFocus 根本沒有 tag 功能。

天才都在細節裡之二：命名方式

考慮到沒接觸過 GTD 使用者，軟體功能的命名就要平易近人，不能拿 GTD 中的專有名詞來嚇人。

之前提過的 context，在 The Hit List 中叫做 tag 就是這個道理。

此外，一般使用者也不見得會有 「project」在進行，所以 project 在 The Hit List 中只是單純的「folders」。

將 project 變成 folder 不只簡明，還增加了使用上的彈性，例如，每一個 list 都可以有自己的目錄，而目錄底下還可以有更多目錄。此外，進階使用者也可以直接將目錄拿來當 Context 來用，只要將他的名稱命名為 「@Office」 或是直接是「Office」即可。

命名的方式也顯示出設計者的思考方向，同樣的 Context，在 The Hit List 裡叫做 「tag」，非常的清楚；在 Things 裡叫 「Areas」，不懂 GTD 的人也能明白。

你猜猜在 OmniFocus 裡怎麼命名 context？

天才就在細節裡之三：以鍵盤為中心的操作方式

如果你還沒試過一個以鍵盤為中心設計的任務管理軟體，那麼你不會了解 The Hit List 是多麼好用。

OmniFocus 和 Things 都為常用功能安排了快速鍵以增加使用的方便性，但 The Hit List 則是根本把鍵盤輸入當成主要的使用方式。

雖然使用快速鍵很方便，但為了不讓使用者去記憶這麼多排列組合，Andy Kim 將最常用的快速鍵放在下方，以 Hints 的方式呈現，會隨著目前介面的不同而顯示不同的提示。

The Hit List 的使用者可以用滑鼠去點這些「按鈕」，也可以直接按照軟體的提示使用鍵盤輸入。

Andy Kim 在純鍵盤輸入上下了很大的功夫，要輸入下圖這樣的待辦事項時，手根本不用離開鍵盤。

一般的日期輸入都會用到滑鼠，但在 The Hit List 裡只要打打字就好了，例如 tomorrow、next week、april 4 等³。

以鍵盤為主要輸入方式的另一個好處，就是輸入待辦事項的介面可以更加的精簡 — 精簡到根本沒有介面⁴。

天才就在細節裡之四：第一次啟動的畫面

這點你要親自去下載 The Hit List 才能理解，這邊就不提了。

總結

Less is more.

但這個 Less 不是指功能上的 less，而是透過功能性的 more 才有可能達到介面上的 less。如果 UI design 也有教科書，The Hit List 應該要列入標準教材。

喔對了，請務必在待辦事項裡輸入「玩 Super Mario Bros」和「打敗 Darth Vader」試試。

這個才是真的，還贈送小丁。

「H，HLB」是新的 slogan，以後有人問他名字，他都要學 James Bond 這樣回答。

另一個 slogan 是「頭文字 H」，也不賴。

從此以後，再也不會有人抱怨跟你聊天時，「卻要看著那隻戴紅色帽子的怪方塊~」這種話了，恭喜您！

H, HLB 的製作過程非常艱辛，請看下圖左上角有一個原來的 icon，中間有一個真人照片，要把他們兩者的特色融合起來，但是又要看的出特徵真是很難。

最後做出的 icon 算是半人半布丁。

小丁頭上戴的是嬰兒帽，穿的是嬰兒服裝：HLB 穿的是襯衫，頭上戴的是 beanie 帽。

我的同事在工作態度與溝通能力上無可挑剔，這些衝突完全來自於對「設計」的認知差異，而這個差異就是讓人痛苦的主因。

#1 人客，你想去哪兒？

理想中的設計師對客戶關係是這樣：設計師像計程車司機，客戶像乘客。乘客上車，只要告訴司機他想去那兒就行了，不必告訴司機「怎麼走」。

客戶給的每一個指示，都是在限制設計師的可能性。

有的時候司機可以拒載，有的時候乘客可以拒乘，但更多時候司機為了錢總會被逼著在尖峰時刻開上市民大道跟大家一起塞。

如果你不信任我，那就不要上車。

#2 大家的意見一樣重要，所以來投票吧

有時候討論會進行到無關緊要的細節上，例如開始討論起配色與 icon 樣式，或是爭論哪種流程對使用者比較好。

設計網站的介面或流程時，並沒有一個絕對最好的方式，只要該介面和流程有內在的邏輯，使用者就可以很輕鬆的「學會」操作。

每個人習慣的操作方式都不同，所以各自會有不同的操作邏輯，如果為了所有人加入了這些多餘的邏輯，設計出來的成品就會混亂。

照設計師的意思來做，可以滿足操作邏輯和該設計師相似的群眾；照大家的意思來做，不會滿足任何群眾。

#3 美工先生，請幫我設計網站（揪咪！）

Steve Jobs:

Most people make the mistake of thinking design is what it looks like. People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.

對我來說，真正的設計是完全了解市場與客戶需求後做出的整體規劃，網站只是整體設計的一部分，但想做這種大設計，只有自己開公司才辦的到。

另一種常會跟設計搞混的叫做「美工」，美工就是沒有太多自主權，位置不要管，流程不要管，專注外觀就好了。

美工或設計沒有高低之分，只不過工作內容與定位不同而已；但麻煩的是有很多人會把設計誤會成美工，或是把美工誤會成設計。所以當有人請美工小哥¹設計網站時，我都會很開心的接下，然後開完第一次會議後哭著回家²。

如果你只是想找美工，請不要叫我設計師。

Logo

本來是想用經典的 Script 字型畫一個典雅的 logo 的，但是時間不夠用，只好把它變成火腿…。用 icon 做 logo 可能會有一些問題，但…以後再說吧！

We’ll Meet 的字型是用免費的 Aller Display。

原始設定檔

基本的設定概念是「傳單」。

揪團網就像一個公布欄，想找人辦活動的話，到這邊填一張活動傳單貼在揪團網上就好了。

HTML/CSS

網站 HTML/CSS 就用首頁的圖形稍作修改，搭配 960.gs CSS framework。老實講要是沒有 960.gs 我沒辦法將網站那麼快速的完成。

在個人首頁可以看到一張張傳單，點進去可以看詳細資料，再決定要不要參加。

進階的功能包括多個時間地點可供選擇，還有需要邀請碼才能參加的功能，到時再來多畫一些 icon 吧～。

這次的 Screencast 應該有比上次好一點，介紹如何用 Fireworks 畫 Andorid Icon。

要看 Screencast 請點頁面最下方的 JIWO COFFEE (iTunes) 連結，會自動開啟 iTunes。

JIWO COFFEE #2 範例檔案下載。