相對於 programing ， design 往往是感性的，沒有標準答案。所以要設計出一個好作品必需對完美有所追求，而這往往要求 designer 有無限的耐心，更要有走彎路的決心。（當然這也同時要求公司有足夠的時間資源提供）

這個 video 展示了一款 iphone app 的 UI 設計過程，完全可以看出該 designer 花了多少時間與心血在此之上啊。

Convert Design Evolution from tap tap tap on Vimeo.

較早前讀到一篇《The Definitive Guide to GET vs POST》，簡釋了一下 GET 和 POST 的優缺。並總結了 4 條準則：

• 用 GET 來處理比較安全的動作（例如 search、view 等），因為 GET 可以被 cache 及 share 的特性；
• 用 GET 來發送 ajax request，因為 POST 要先 send header 再 send 內容，比較麻煩；
• 用 POST 來處理長的字串，因為 GET 的上限為 2048 個字符；
• 用 POST 來處理敏感資料；

該文附送一張 work flow chart 一張，亦是我會轉載至這裡的唯一原因：

－－－－－－－－

願死者安息，望生者堅強。

Front-end developer 一定對傳統的 css image replacement 很熟悉：先為文字設定一個背景圖片，再把文字用負數的 text-indent 隱去，這樣一來一往就只剩下圖片了。以前學習 css 時，都說這個方法有個優點，就是在沒有 css 的情況下（如手機、Google 的 bot），網頁依然保持可讀。只是，這方法在有 css 卻沒有圖片的情況下則表現得一團糟了：圖片沒有了，文字也沒回來。

最近有人提出一套叫 State Scopes Method 的辦法，可解決以上提到的這個問題。解決方法是這樣的：先測一下瀏覽器是否能夠正常顯示圖片，正常的話才做 image replacement 的工作。

但這個辦法的缺點也很明顯：需要用到 Javascript，寫 css 時也變得麻煩。下面是一段 css

h1 {
  width: 100px;
  height: 50px;
}
@media screen {
  .images-on h1 {
    text-indent: -10000px;
    background-image: url(image.png);
    overflow: hidden;
  }
}

其實我個人覺得舊方法已經足夠好了，實在沒必要為了那一小部份人（可能是零）花這麼多功夫去完善 css。這些知識，知道就好了。

詳情請參考：The State Scope Method of CSS Image Replacement

－－－－完－－－－

在下現在是 香港中文大學 計算機科學系 一年級生。

對一件事情很不滿，身為香港的中文大學，為甚麼要捨香港通譯「電腦」不用，反而跟隨國內譯法把 computer 譯成「計算機」呢？

jQuery 其中一個比其他 javascript library 優勝的地方，就是 jQuery 擁有眾多的插件。可是要在茫茫插件中要找到知適的又談何容易。jQuery 官方網站上的搜尋功能不太靈光，Google 一下子拋出萬千筆資料又實在令人無所適從。

http://jquerylist.com/ 此網站整理了二百五十多個 jQuery 插件，分門別類，將會是你唯一一個需要的 jQuery 插件列表。較可惜的是只提供了網頁截圖，卻沒有插件的相關圖片。不過總比甚麼都沒有好，畢竟每個插件的名命方式都大同小異，很難靠文字就能辨別出自己想要的插件。

－－－－－－－

希望能考上香港大學……

在 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 了，這樣用戶就能各取所需。