在 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/

設計網頁時最頭痛的往往是風格的定形、顏色的選擇。花數個小時在配色上對我來說是司空見慣的事情。所幸網路上有不少配色工具和配色收集網站，絕對可以在配色的時候幫你一把。本文精選了幾個最實用而又具特式的工具，方便日後查找。

Colorotate

與眾不同的顏色選擇工具，將顏色以 3d 的關係呈現出來。用戶可以調整光源角度／強度／對比度等等，而且還可以匯出成 Adobe Swatch Exchange (ASE) 檔案。

http://www.colorotate.org/

Color scheme designer 3

一個很專業的配色工具。它的前身是 color scheme generator 1 ＆ 2。除了從光譜上選擇顏色外，還可以選擇顏色的飽和度／色調，制作不同格調的網站時必能太派用場。

http://colorschemedesigner.com/

Adobe Kuler

相比其他配色工具，Adobe Kuler 更像是一個配色管理／分享工具。用戶可以上傳自己的配色，或者瀏覽他人的配色並評分。因為有 Adobe 的加持，Kuler 還有 AIR 版本及 Photoshop extension。

http://kuler.adobe.com/

ColourLover

很知名的一個配色愛好者社區。除了收集配色外，還收集 patterns。可以匯出成各種格式，包括Photoshop/ AI/ GIMP 等等。

http://www.colourlovers.com/

Contrast-A

這個比較傳統一點

http://www.dasplankton.de/ContrastA/

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

家儒已經回港，找summer job中。書架上尚有很多兩年前買下卻還未讀完的書，還要找時間更新一下 resume 和 portfolio…放假一樣忙啊！

一般電腦上的網頁設計收藏網站多不勝數，但是 iPhone 上網頁設計收藏站你又知道幾個呢？

因為工作需要，用 Google 搜了一下，發現了cssiPhone.com 。cssiPhone.com 可能是第一個專注於收集 iphone 網頁的設計收藏站。

cssiPhone 作為目前唯一一個同類型的網站，雖然目前收藏品並不太多，但不失為一個不錯的靈感源泉。

以下是該站的自我介紹：

Creative mobile web design is here, and it can be tough searching for iPhone interface inspiration when you need some. You never know if a site has a mobile alternative, and if they do you either have to use your phone to find it, or take a stab at what the sub-domain is: m, iphone, mobile, ect..

CSSiphone.com is dedicated to helping you find your iPhone inspiration.

另外，iPhone 的網站必須用 Safari 才能正常觀看啊。

最近真的很忙，文章有點短請大家見諒。

在埋怨過 Expression Web SuperPreview 的無能後，為了工作便利，只好把  IE 8.0 刪掉換上 Multiple IE。今天終於發現了另一套 IE 測試軟件：Internet Explorer Collection。 Internet Explorer Collection 比 Multiple IE 更強大，從 IE 1.0 至 IE 8.0 通通都支援，而且能在 Window Vista 和 Window 7 下執行，還附上 IE Developer Toolbar。

經在下簡單測試後，Internet Explorer Collection 能正確將各版本的 bug 重現。安裝檔 54.4MB，敬請愛用。

Internet Explorer Collection 支援以下版本的 IE

• Internet Explorer 1.0 (4.40.308)
• Internet Explorer 1.5 (0.1.0.10)
• Internet Explorer 2.01 (2.01.046)
• Internet Explorer 3.0 (3.0.1152)
• Internet Explorer 4.01 (4.72.3110.0)
• Internet Explorer 5.01 (5.00.3314.2100)
• Internet Explorer 5.5 (5.51.4807.2300)
• Internet Explorer 6.0 (6.00.2800.1106)
• Internet Explorer 6.0 (6.00.2900.2180)
• Internet Explorer 7.0 (7.00.5730.13)
• Internet Explorer 8.0 (8.00.6001.18702)

滿心歡喜的下載了剛推出的 Internet Explorer 8.0，安裝後發現原本測試用的 IE6 和 IE 7 都不能正常運作！我試過了 standalone version 和 IETester 均告無效。最網上搜尋一下後發現，原來 Microsoft 自家也有一套工具 Microsoft Expression Web SuperPreview，正是用以測試 IE6 和 IE 7 的。

最經典的地方來了，這套 Expression Web SuperPreview 居然 tmd 的一套收費軟件！！無恥到令人難以置信的地步吧？明明是自己搞出來的爛攤子，居然還好意思要跟別人收費。

除此以外，Window 7 的用戶是無法用它來測試 IE 6，廣大的 Web developer 們準備用 XP 直至天荒地老 IE 6 滅亡吧！如果 Window 7 是預載 IE8 的話，可能連 IE7 也無法測試，因為網站上寫著 Internet Explorer 7 (if previously installed)。

各位讀者不用傷心，經過家儒試用後，發覺這套 Expression Web SuperPreview 真的只是 preview only，只能用以 view 而不能做出任何動作，包括 javascript，甚至連超連結也不可用。換言之這只不過是一個 screen shot 而已，跟本不是 IETester 的代用品。SuperPreview 唯一好處是它的位置比較功能（下圖），能夠準確比較兩個頁面同一 element 的位置有何不同。不過相信世上已經再沒有這麼執著的 web designer 了。

Expression Web SuperPreview 目前公測中，本年（2009）十月前大家都可放心使用。

下載點：SuperPreview_Trial_en.exe (Download Size: 250.4 MB Orz….)。

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 會把訪客的一舉一動記錄在案，並公開讓大家在網上重播。

Microsoft 的研發部門 Microsoft Office Labs 最近把其對「未來辦公室」的概念研究成果公開，並制作成一段長達 5 分鐘的影片。片中展示了大量新的高科技產品和概念，如無處不在的 multi-touch 投射式螢幕（surface）、比哈利波特魔法世界更炫的電子報紙，透明螢幕、即時翻譯、cross-device interaction 等等。

雖然片中所及大部份都是天馬行空，但當中不少 UI 的設計都很具參值，特別是與人交互方面，值得留意。按此觀看影片。

觀看後欲罷不能？此 Powerpoint 介紹了片中的每個概念，方便大家參詳參詳。

PS: 感謝網友 Kin 提醒，應為「辦公室」而非「辦工室」。再次感謝。

瑞典 UI 團隊 TAT–The Astonishing Tribe 設計了很多創新手機 UI，有興趣的讀者不妨瀏覽一下他們的 showcase 或 youtube 的 channel。例如上方影片所演示的 3D eyetracking UI，令手機 UI 變得有層次、有深度。

上面是 TAT 另一個很有新意的 UI 概念性作品－Print UI。Print UI 捨棄了傳統手機 UI 的造法，給使用者一種耳目一新的感覺。

如果 Google Android 的 UI 也這麼有設計感，應該會大賣吧？

本文轉載自 UIUI，很有參考價值的一篇文章。

來自 CMU 的研究, 他們在 UIST 2007 上面發表了一篇名為 Rethinking Progress Bar 的研究, 他們發現不同的進度表現方式, 使用者感受的確會有所不同, 恩, 聽起來真是廢話, 不過如果只有這樣子的廢話的話, 應該是上不了 UIST. 他們研究了九種不同的進度表現方式, 最後得出了一個結論:

測試顯示的結果告訴我們，凡是曲線中有明顯停頓的，使用者所感知的進度都比較慢，而進度中一直在加速的，使用者都會覺得進 度走得很快。研究者們還指出雖然一個穩 定的系統應該使用線性的進度條，但是如果能應用加速型的進度條，確實能小幅地改善用戶體驗。但是當進度並不能被準確測量時，進度條並不是一個很好的選擇， 實際情況下可以選用不斷重複的動畫來代替

恩, 所以, 下次設計 progress bar 時, 請讓它不停的跑, 然後讓它越跑越快…反正人的感情是很容易被欺騙了

順道一提, 九種 progress bar 為:

• 線性 （Linear）：遞增率是常量
• 前停頓（Early paus）：類似於線性，但在25%進度附近進度遞增非常慢
• 後停頓（Late paus）：類似於線性，但在75%進度附近進度遞增非常慢
• 慢速波狀曲線（Slow wavy ）：速度時快時慢，整個過程有3個週期
• 快速波狀曲線（Fast wavy ）：類似於慢速波狀曲線，但波長很短，有很多週期
• 平方曲線（Power）：進度的遞增率不斷在增加，也就是一開始很慢，隨後越來越快
• 反平方曲線（Inverse power）：和平方曲線像反，一開始很快，隨後越來越慢
• 快速平方曲線（Fast power）：類似于平方曲線，只是進度的遞增率更高
• 快速反平方曲線（Inverse fast power）和反平方曲線類似,只是進度的變化率更大

via: 譯言

早前 Google, Yahoo! 及 Microsoft 共同宣布支持一個新的 tag： canonical （標準？正準？）。canonical tag 是用於指定一個網頁的「標準網址」，旨在改善內容重複的問題。

甚麼是標準網址？舉個例子，假設我有一個網上商店，其中某商品（id=18）頁面的網址是這樣的：

http://shop.com/item.php?id=18

最近該商品正在以電郵速銷中，並提供優惠券給老顧客。這些老顧客看到的頁面會比一般訪客的有少許不同，多了點速銷廣告。為了做到區分來源的不同，programmer 在網址上加上一個新的變數（coupon），新的網址是這樣的：

http://shop.com/item.php?id=18&coupon=true

兩個網頁的內容幾乎完全一樣，即便如此，搜尋引擎依然會把它判別為一個不同的網頁。這可是對 SEO優化 不太有利，因為網頁的反向連結可能會被「新頁面」分薄了。這時候 canonical 就大派用場了。只要在新頁面的 <head> 部份加入 canonical：

<link rel="canonical" href="http://shop.com/item.php?id=18" />

這樣所有指向該頁面的連結都會算在指定頁面上了（在此例中是原頁面）。

其他要留意的地方：

• 可以用到的地方還包括 sort-by、order-by、rel 等等；
• 如例子所述，兩個網頁的內容容許少許不同。如果是徹頭徹尾的兩個網頁，作為一個好學生，我不建議你使用 canonical。如果在下是 black hat seo 高手，另有所圖，則作別論；
• 可以自己指向自己，所以為每個網頁都設定 canonical 理應有利無害的；
• 只適用於同一域名之內的網頁，包括二級域名。利用這點可以耍些小手段為自己增加大量外部連結，風險自付；
• canonical 對搜尋引擎來說只是一個額外資訊（hint），而非指令。搜尋引擎不一定參考這些數據；

也沒有甚麼特別要注意的地方了，更多問答請到 google webmaster central blog。

萬千香港莘莘學子，千方百計想盡辦法考進商學院，為甚麼？他朝成為金融巨鱷，可以一注千億，賭輸了更有政府打救（雷曼苦主賭輸了則貴客自理）；要不然成為哪間公司的行政總裁高級經理，一人之下指指點點還能日進千金；即使是 marketing major 的將來也可以靠著一張嘴而進帳萬斗。（憎人富貴ing）

何事如此令我感慨？

百事公司早前公佈了一個百萬美金的新 logo 設計（右），並將花 12 億美元將之推而廣之。眾人均認為新 logo 噁心有餘美感不足，對於百事居然願意為此買單的原因嘖嘖稱奇。

最新消息，根據百事內部文件表示，此 logo 乃「蘊涵了萬有引力地球磁場廣義相對論黃金分割風水學以及人類五千年來種種智慧和美學感悟於一身」（出處），和寡只因曲高，我等愚民恐怕不是 pepsi 的 target audience。

該文件現正公開下載，中、英皆有。有助練成嘴炮，絕對的唬人經典。

文至此處，小弟不得不大大讚揚香港特區政府於2000年設計的飛龍標誌（上圖）。其喻意雖不及百事般貫古通今知天曉地，但也隱藏著「香港」和「HK」二字，重點是居然只花了香港政府900萬港元。香港政府一向闊綽，一條九龍到新界的西鐵建造費居然比京九鐵路還高，現在又打算花四、五百億打造個西九民娛區，但在請人設計 logo 的時候居然比身為商業機構的百事精明，勁！

希望香港政府能夠把這些稅收花在納稅人身上，或者直接派錢就好……

很久沒有寫過搜尋引擎優化(SEO) 的文章了，技術性的差不多寫無可寫了。而且我相信這類觀察類文章更能讓 SEO 老手得益。

近半個月一直在觀察 Yahoo! HK 某 keyword 的排名變化。上圖正是該 keyword 的網站排名變化，自二月起每天更新一次。縱列為日期（日），橫列為網站。深綠代表排名越高，紅色反之。不太方公佈更詳盡的資料，但足以供各位看出個所以然來。

跟據觀察所得，

• 排名幾天更新一次，頗為頻密。這點跟我過往相信的有很大出入；
• 相信網站年齡依然是影響排名最重要的因素之一；
• 更新頻率對網站排名的幫助很大；
• 網站排名跳動可以很大，而且多數在網站更新之後發生；
• SEO 在香港還是不怎麼流行，位列前矛的網站大部份是靠年資的，站內優化幾乎全無；

作為一名網頁設計／介面設計的愛好者，每次看到一些設計出色的網站都會令我有種莫名的興奮，心中暗嘆「原來還可以這樣作的！為甚麼我從來沒想到過！」。

介面設計其中一個令我著迷的地方是，it is all about improvements! 更研發不同，改進並不是要創造一樣全新的東西。改進，是把原有的事情做得更好。這要求設計師會用不同角度觀察同一件事情，才能想出一個不同的方法去達成同一目標，一個更友善更高效的方法。

Viewzi 是一個搜尋引擎。跟其他搜尋引擎不同，Viewzi 並不標榜其準確性、資料來源、Social 與否等等。Viewzi 只專注於一件事情：提供更優秀的搜索體驗。同一組搜尋結果，Viewzi 提供了近 20 個不同的 UI （views）供用家選擇。而且這些 UI 都有相當程度的可用性，跟那些中看不中用的實驗性作品有天壤之別。

搜尋結果除了來自 Google 外，還包括 Amazon、Flickr 和 Joost 等。

PS: 本文的標題起得太誇張了點嗎？要在十數字內畫龍點精不容易啊。
另，本 blog IE版修復。因為版面幾個月前做了些小修改，卻忘記了在 IE 下測試。感謝網友提醒。

tags 與 categories 作為分類的方法，它們各有優點，而其共通處又使之可互相取代。有些網站 tags 與 categories 二擇其一（如 aNobii, Douban 均只有 tags），有些網站兩者兼有（WordPress）。兩個方法／系統該如何取捨呢？

Categories 的特點

• 分類嚴謹、有系統
• 可選分類基本上是預設的
• 數量較少，一般不出三個
• 具有層級的特性（主分類下可有子分類，如「家電＞電視」）

得益於其嚴謹與系統性，人們一般覺得 categories 比較可靠，比較能夠方便人們從一大堆東西之中快速縮小選擇範圍。但其缺點也是明顯的，要準確地分類必需要一個精密的系統才能辦到，或者使用人工分類。Yahoo! 的網站分類也是靠人力的。

Tags 的特點

• 數量可多可少
• 可由用戶自由添加
• 內容不受限制

相對於 categories 的嚴密， tags 更著重其自由度。而自由度高的最大好處是令電腦系統能夠籍著tags辨認出相似的項目，這點是光靠 categories 辦不到的。

例如我想找一個跟本blog相似的網站，靠categories 只能列出一堆同樣關注網頁設計、Web 2.0分類下的網站。這些只能算是同類的網站，而非「相似」。如果想找出相似的網站，還需要靠tags才能達成。這些tags可能是「客覲」、「後知後覺」、「男生寫的」、「久不更新」等等…它們可能既主觀、隨意、又不準確，但只有相類似的 tags 收集到一定數量後，它才能發揮它的價值。

總結

兩個方法的分別在於使用者如何使用它，而非站方如何稱呼它。如果用戶像用 categories 一樣的嚴謹地使用一個 tags 系統，結果其實跟使用 categories 無異。所以其實我覺得站方應該鼓勵用戶隨意地加入tags，以使tags系統能發揮其預其的效果。而最好的鼓勵方法，可能是同時使用 categories 和 tags 了，這樣用戶就能各取所需。

收買人心可行嗎？

ReadWriteWeb 昨天發表了一篇名為 Twitter May Have Found Its Business Model 的文章，文中提出了一個 twitter 可行的商業模式，大意是這樣的：公司付費給訂閱它 twitter 的用戶，將來用戶可自由決定是否退訂。我沽且稱之為收買人心。

我想提出一個現實：金錢利益從未成功在網上推動任何活動。blog的置入式行銷被人所懷疑、Microsoft 的你搜我付無疾而終。相反，不花分毫而得到網民認可、參與甚至倒貼的事例在這個 2.0 世代比比皆是，比如 Wikipedia 最近就籌到了不少資金；商業機構如Google、Apple 等也各自有大量死忠 fans，說明不是只有非營利的活動才能引起大眾附和追隨的。

Social Norms and Market Norms

人們不為金錢所動，那麼為何而動呢？心理學提供了一個合理的解釋－Social norm 與 market norm，先解釋一下這兩個詞：（個人認為其中譯「社會規範」並不達意，所以先用英文）

• Market norm 是斤斤計較的價值判斷模式 （you get what you pay for）；
• Social norm 則是著重互助互惠的價值判斷模式。

Predictably Irrational 一書中提及過一個真實例子：某組織請求律師們以低價 $30/hour 給需要的人提供服務，結果無人理會如石沈大海。但當該組織再次提出同一請求，但將回報降至0 －請求律師們提供無償服務時，反應比上次熱烈得多。可見人們其實並不介意參與和工作，只不過不是在支薪的情況下而已。

另一實驗分別要求三組人做同一項沉悶的工作－畫圈；不同的是，A 組將得到 $5 作回報；B 組將得到 $0.5 ；C 組則被要求無償工作。結果：

• A 組（$5）：    159 個圈；
• B 組（$0.5）： 101 個圈；
• C 組（$0）：    168 個圈

結果顯示，人們在無償的情況下更願意付出更多（畫了更多圈）。是甚麼驅使之發生？心理學家認為是金錢是激活了 market norm ，以至人們對其付出「斤斤計較」。同理，一位消費者之所以自願接收，甚至分享／傳播某廠商的 twitter 訊息，是出於許多複雜的心理因素使然（Social norm），可能是為了幫助別人，可能是自我身份凝造（我愛Apple，我與眾不同？），但是就不包括「因此獲利」在內。一旦跟金錢拉上關係，就會激活了 market norm，屇時將無任何廠商能籍著 twitter 而得到用戶的歡心，並永遠達成不了口耳相傳效果：當 twitter 成了一份有薪工作時，交出真心 跟 二次傳播 便成了勞而無獲的額外工作，就跟開 OT 一樣。

僅以書中一句作結：“Money, as it turns out, is very often the most expensive way to motivate people. Social norms are not only cheaper, but often more effective as well.”

• 大圖版按此下載
• PDF版按此下載

作為 freelancer，因為收費是按 project 而非按時計的，時間就是金錢，收入跟效率成正比，提高效率對我來說十分重要。因此這個聖誕假期花了些時間用 Adobe AIR 寫了個 time tracker。

目前 AIR 上的時間管理軟件可謂五花八門，但沒有一個是完全合我所需的。Adobe AIR 上的 time tracker 有 Klok、Compuccino time track 和 Kronos 等，都是很優秀的免費軟件。當中我最喜歡的是 Tick 這個服務（有提供 AIR 版本，可同步至網站），可惜它是付費軟件，我倒是沒打算為了個計時器而每年付幾十美金。反正也想練習一下寫程式的技巧，所以就決定依 Tick 為藍本自己寫了個相似的 app。

如果以上介紹的 app 都不能使你滿意的話，不妨試試我的這個 app－Timer。它的功能很簡單－在開始工作時打開 Timer 並開始計時，工作結束後指定一個相關的 task。日後便可以在 reports 頁面查看你在每項工作所花的時間，及該項工作佔整個 project 的百分比。相信這些數據能助你日後更準確估計出每項工作的所需時間。

下載點：http://www.box.net/shared/c3a6rocirz

雖然我知道目前功能還是不太完善，以及有很多 bug，不過由於假期快結束，大概日後也沒辦法花太多時間在它身上，所以決定現在釋出 beta 版。對於那些會 Javascript 的 developer，大可以動手修改本程式。反正 source code 都是公開的，打開 C:\Program Files\Timer 直接修改即可。

有下載過 YouTube 影片的人都知道，一般下載網站都要求用戶提供影片的 URL，一切都看似很順理成章。直至看到這個 KickYouTube.com 所用的方法，大感佩服。使用方法請看上面的影片。

有一個令我印像很深的經典的可用性案例，是 Donald Norman 在 Design of Everyday Things 中提及的門把例子：為甚麼我們會看到一個拉把在一道推門上？

優秀的設計固然不容易做到，沒有靈感也是沒辦法的事情。但我相信我們都有能力分辨和避免一些糟糕設計。想像一下，如果有部空調的控制器，調節的是「噴出空氣的溫度」，而不是「室內氣溫」，會帶來甚麼問題？