雖然已經乘坐過不少次飛機，但是每次依然會有一點點緊張。行李、證件一堆有的沒的已經令人神經緊繃，最後航空公司還要再給你一張收據似的東西－登機證。

上圖是美國 Delta Airline 的證機證，很像一張能張能夠隨手丟棄的收據吧？我有坐過 Delta Airline 的航班，不用提那亂來的排版和 spacing 了，光是它的大小已經很奇怪 － 無論長寬都超過我銀包的大小，害我都不知把它放哪裡好了。所以大家的登機証都是摺痕處處，因為不對摺的話跟哪裡都放不進。在找閘口的時候經常需要用到登機證，所以放進銀包是最合理的。可是它的大小卻只能夾在 passport 裡頭，除非你不介意把這破紙對摺兩次。

有設計師受夠了這種設計，自行重新設計了新的登機證，有多種不同概念，請到 http://passfail.squarespace.com/ 欣賞。

莫斯科地鐵系統是世上最複雜的地鐵系統之上，在使用率上僅次日本東京地鐵。

有人找到了其地鐵圖的設計改良過程，請到原文欣賞：http://www.ruanyifeng.com/blog/2010/06/moscow_metro_map.html

要數最近幾個月最令人興奮的科技新聞，Windows Phone Series 7 的出現絕對是第一名。Windows Phone Series 7 的 UI 比起 iPhone 的更令人驚艷和有創意，更得我歡心。當日消息一傳開後我便四處找相關的 screen shot。

Microsoft 在昨天的 MIX2010 後公開了 Windows Phone Series 7 的 UI Design and Interaction Guide (PDF) ，簡單地介紹了 Windows Phone Series 7 上的基本的設計概念與哲學，有興趣者可以下載讀讀看看。注意本文檔很可能會在上市前不斷修改。

老實說，iPhone 的 UI 實在很一般，只是作為第一隻全觸控手機，情有可原（但到了 iPad 上仍不見寸進就難以接受了）。後來者 Palm 的 WebOS 要好一點。但 Google Android 在兩年後仍然把界面搞得跟 PC 一樣就說不過去了。錢買不了感情，大概連美感也買不到。而我覺得承傳自 Zune 的 Windows Phone Series 7 UI 最大特點是充份利用了觸控的特點，大量地用 slide 來瀏覽系統，由一頁到另一頁只需用手指簡單一畫就可以，而不是按某個按鈕 － 用按鈕進行瀏覽可是 PC 的做法。

當然 Windows Phone Series 7 的 UI 也有其缺點。首先是效率上可能比不上 iPhone ，在 iPhone 點一下的事情在 Window Phone 上可能要 slide 數次。而且對新用戶來說，不 try and error 很難知道有甚麼在下一頁。相信熟悉操作後就不成一個問題。值不值得為了美感而放棄效率就見人見志。其次，可按的文字跟一般文字沒有明顯分別，這個可用性問題我覺得還是頗嚴重的。另外，文字跟背景圖片很可能會有重疊，文字顏色跟背景的對比度不足，會令文字可讀性大減。

對於這些問題，我可以總結為「美中不足」吧？期待年底的上市。

一個 icon 設計的好壞，除了好看與否以外，還有是功能性的考量 － 是否容易、準確地讓用戶理解到其所想表達的意思。每一個 UI 上的 icon （符號）背後其實都是一個「隱喻」，運用真實世界所熟悉的概念來描述某功能。

其中一個影響 icon 表達能力的因素是 icon 的真實度（realism）。在《Realism in UI Design》一文中作者舉出了如下例子：

可見 icon 的呈現並不是越真實越好。一個優秀的 icon 必須抽絲剝繭，把不必要的細節去除掉，同時又不能過於抽像。事實上，一個 icon 的認知度跟細節有如下圖的關係：

當然，抽絲之前當然先得確保對像是正確。特別是要形像化一些抽像概念的時候，選擇一個正確的符號會是整個設計中最困難的一個環節。Mac 軟件開發公司 Panic 的設計部門在設計 清除 Clear 按鈕的時候就嘗試了二十多種做法：

結果該團隊決定參考 Apple 的做法，直接寫 Clear 了事 XD

著名的 icon 設計公司 iconwerk.de 早前推出了一個 video podcast，展示了他們設計 icon 的過程。包括一些描像概念的 icon。

希望你喜歡本文章。

先來數一數白隊共互傳了多少次球？

如果有觀察過一些不熟悉電腦操作軟件／網頁的情況，大概會時常發生一些 developer 和 designer 難以理解的現像－何以這麼大的一顆按鈕、一個告示，居然會被忽略掉？

並不是因為他們有先天缺陷，「發雞盲」。如果明白到所有視覺影像都需先經大腦處理方可解讀，會發生以上情況就不是那麼難以理解了。學者稱之為「failures of visual awareness」，其成因眾說紛紜，本文無意探討（『演化心理學！』蕭生聽眾如是說 XD）。failures of visual awareness 可大概分為兩類，Change Blindness 及 Inattentional Blindness。

illinois university 對此兩者進行了一系列研究，並有大量錄像可供觀看，十分有趣： http://viscog.beckman.illinois.edu/djs_lab/demos.html

Change Blindness 是指人對事的的變化視若無睹。例如緩慢的局部漸變往往很容易地被人忽略。在「A subject in a real-world person change event」這個實驗中，被實驗者甚至無法察覺到交談對像已被換掉（前提是不能是帥哥美女、年紀相近，否則印像太深會影響結果 XD）。

Inattentional Blindness 比較為人所熟知，是指注意力集中的時候往往會無視掉畫面上的其他元素。文章開頭的那則廣告已是一例，第一次看該影片的人沒多少個能發現那隻黑猩猩。影響 Inattentional blindness 的最大因素是用戶的認知負擔。負擔越大，需要更專心，便越容易無視身邊環境。其實就該實驗而言，兩隊顏色的相比度越高（即相似性減低），受試者會更難發現大猩猩。當然大猩猩跟兩隊的相似性也會影響結果。

對 UI 設計有何啟示？老生常談：

1. 減低用戶認知負擔，一個 UI 只做一件事；
2. 利用對比突出重點。

（影片可能無法在 RSS Reader 上正常顯示）

一直認為目前市場上所謂「電子雜誌」的存在是種倒退，將影印版原原本本地轉成 PDF 格式搬到電腦上，缺乏互動，麻煩之餘比網頁更加不如。

最近 Adobe 跟 WIRED magazine 在 TED 上展示了如影片中的電子雜誌概念，利用 tablet 提供讀者全新的使用體驗：

• 基於 touch screen 的設計
• image slideshows
• 產品 360 度全觀可能
• 影音可能
• 當然跟 iPhone 一樣有垂直／水平版本

這大概是最接近我理想中的電子雜誌。而且變成現實的機會不少，因為成本上大概不會比傳統雜誌高出多少。除了那個 360 view 以外，其他素材都是可跟影印版共用。平台方面也是一次性的支出，只需開發一次，說不定 Adobe 還會提供個 framework 呢。唯一成本大概是要請幾個長駐的 developer。

此 demo 基於 Adobe AIR （Flash）建成的，不提供下載，亦大概不可能出現在 iPad 上。

在 engadget 上看到這則關於 Moblin 2.0 beta 的消息。Moblin 是 Intel 旗下的一個 Linux-based netbook OS project，雖然目前只是 beta 版，但從 ui 上看已經非常成熟（金玉其外？）。我已經深深的被它的 ui 吸引，希望能取代 xp 成為主要的 netbook OS（當然絕大部份都會同時擁有兩個 os 啦）。就是風格方面有點像 sony 的 VAIO/PSP。

以下是官方提供的操作畫面：

流暢、簡單而華麗（？）的 UI，令人讚不絕口。我對 netbook 要求只有：email、calendar、RSS reader、browser、office、media player，目前 moblin 好像尚缺 open office （email、calendar、rss reader都可靠browser來完成），但已經滿足了我大部份需求。

上圖是 moblin alpha 版的 ui。喜見 beta 版的改進不單單只是重繪 icon 這麼馬虎草率，而是從根本裡重新制作。

如欲嘗鮮請到 http://moblin.org/

Bill Scott 為其新書《Designing Web Interfaces》作了一場演講，內容主要圍繞著書中談及的 6 個網頁介面設計原則，並提供了大量例子和 patterns。該 6 個原則為：

• make it direct
• keep it lightweight
• stay on the page
• provide invitation
• use transition
• react immediately

作者很大方的把書中的大量圖片上載到 Flickr，大方得令人懷疑有再沒有購買的需要。就書的內容而言，雖然內容稍欠新意，但看在大量整理得井井有條的 patterns 份上，應該不失為一本優秀的參考書。而該演講已經可以在 Youtube 觀看，slides 亦可在 slideshare.net 下載。

早前介紹過的 LukeW 在 VizThink 2009 中就網上視覺傳播作了一場演講，內容包括 介紹利用視覺組織來傳達重要訊息、實作技巧和案例。

雖然沒找到該演講的視頻，但 slides 已經可以公開下載，有興趣的讀者請按此處下載（5MB PDF）。

以下是一些重點：

• The end goal of visual communication
  • Quicker communication
    • Usefulness - what is it?
    • Usability - How to use it?
    • Desirability - Why should I care?
• What makes great presentation?
  • Visual Organization
    • Communicates the relationships between user interface elements
  • Personality
    • Communicates the brand essence of a product
• Terms
  • Visual Communication is part
  • Visual Organization and part personality.
  • Visual Hierarchy is a deliberate prioritization of
  • Visual Weight enabled by the manipulation of
  • Visual Relationships to create
  • Meaning for users.

Vista 其中一個為人垢病的地方，是其問長問短絮絮不休的介面，每一個多餘的點擊都令人不勝其煩。

想試一下「無點擊」的 UI 嗎？到 DontClick.it 體驗一下吧。這是一個建立於 2005 年的實驗性網站，這網站不允許訪客使用滑鼠點擊，否則會出現警告畫面。你會發現，人的習慣是很難改變的。

網站內包含了一些無點擊 UI 下可行方法的研究和實作。其實制作一個無點擊 UI 是有一定難度的，因為電腦上常用的 mouse events 在不允許點擊環境下只剩下 mouse over 一項。相反，一個 touch screen UI 卻沒有了 mouse over 這一 event ，因為每個 touch 都是一個 click。有甚麼情況是無法點擊呢？眼球控制的 UI 就是了，如果有的話。

另外，dontclick.it 會把訪客的一舉一動記錄在案，並公開讓大家在網上重播。