Love is not a victory march 蘇麗文

這場比賽剛好有看到，看著看著就想到 YouTube - Jeff Buckley - Hallelujah 這首歌，如果上面真的有造物主的話，讚美主。

米果【私‧生活意見】:蘇麗文，你是我們的驕傲，請不要說抱歉 - 樂多日誌

Emotional Design 情感設計

美國有個熱門的選秀節目American Idol，2008 年選手 Jason Castro雖然沒有進前三名，但是他演唱 Hallelujah 時候，得到很好的回響，也讓這首歌重新熱門起來，剛好最近在看Norman 的 Emotional Design: Why we love (or hate) everyday things ，覺得他說的反思 Reflective 層，真的是設計者不容易觸及的部份。

Norman 在 Emotional Design 中提到設計過程中有許多要考慮的因子，但情感面的設計考量對產品成功更重要。

這首歌的歷史可以參閱 Hallelujah (Leonard Cohen song) 說明，強烈的共鳴應該是來自 Jeff Buckley 這位早逝的音樂人，他在 Grace (album) 專輯中唱的這首歌YouTube - Jeff Buckley - Hallelujah，從一開始的嘆息聲到最後，給人很強烈的感動。

過沒多久 Jeff 就走了，到了 2008 年，當 Jason 在舞台上自彈自唱地唱到 Love is not a victory march. Its a cold and its a broken hallelujah. 的這個時候，整個氛圍讓人強烈地想到彷彿 Jeff Buckley 的重現，對 Jeff 的歌迷來說，心中只怕也是 Hallelujah。

Jason 唱的風格與 Jeff 不同，但是歌詞中讚美主所引起的反思(Reflective)，在這時候和感官層面(Visceral)以及行為層面(Behavioral) 很適當的結合在一起。

• Jeff Buckley | Hallelujah lyrics
• 陳珊妮說 聽Jeff Buckley 時說話的人是有罪的
• » 專訪唐‧諾曼（Donald Norman）
• 好讀推薦: Donald A. Norman - MMDays
  

看著 Amanda Jenssen 在聽到 Hallelujah (Idol 2007) 前奏就差點哭了起來，後來也唱到快哭出來，對沒有宗教信仰的設計者來說，上帝與人之間的情感實在是不容易感受到。

最後以 Emotional Arithmetic (2007) 電影介紹開始的一句話作結束，這部電影的部分背景是二次大戰的猶太人大屠殺 的集中營，說的是倖存者過了幾十年後仍在與心魔奮戰的故事。

If you ask me if I believe in God,
I am forced to answer does God believe in us?

• 【巴黎心，楓葉情Emotional Arithmetic】
• Emotional Arithmetic - Wikipedia
• Review: Emotional Arithmetic | DearCinema
  

Petty Person 小人

主要是看到余秋雨寫的小人一文而來，描述在歷史暗角中存在的小人，至於要如何避開犯小人？作者的建議是不能避，越退麻煩越多，看來直接面對小人是最有效的方式，用拖鞋只是示意，請不要真的要這樣做，因為你如何確認對方是小人？你有把握嗎？

Elizabeth: The Golden Age (2007) 一片中，瑪麗皇后在法庭上的台詞讓人非常地印象深刻。她說的部分在 Elizabeth: The Golden Age Script at IMSDb (P80) 可以看到，引述如下：

Who are you to sit in judgement on me?
By what authority do you condemn a Queen?
God alone has made me what I am. He is my only judge.
Raise your law above God's law, and what law remains?
In your vanity and ignorance you set loose the monster of misrule.
You know neither who you are nor what you do.
But I know who I am. I die as I have lived -
trusting in the mercy of my God - a Queen.

大意是只有造我的上帝可以審判我，別無知地舉起人間法律，妄想高過上帝的律法，瑪麗皇后一角初看有點像是陰險小人，問題在於那個氛圍惠讓你這樣以為，後來卻覺得瑪麗不過是可憐的犧牲品而已。

所以舉起你的腳要踩小人的時候，請注意上帝的高度。

上面電影的一些參考連結：

• 電影 伊莉莎白：輝煌年代 - 我酷網MooVi電影入口
• 伊莉莎白: 輝煌年代 The Golden Age -- @movies開眼電影
• 共生- [情報] 謝哈卡普電影Elizabeth: the Golden Age 劇本初探

Tabs and jQuery 頁籤設計

MOTUDO上方有個調整幾個方格的頁籤，做這個已經一陣子了，想要改一下比較活潑，幾年前買的Don't Make Me Think書現在又拿出來看，主要是書中強力推薦使用 tab 頁籤的方式來當做網頁的導覽，這種技巧的好處書中 Four reasons why I love tabs (P79) 提到四點。

• self-evident 一看就明白用途
  
• hard to miss 很難視而不見
  
• slick 感覺有趣但是 HTML 可以很輕巧
  
• suggest a physical space 頁籤活化後，形成該頁浮到前面的視覺效果

基本上原來格式已經差不多，現在像要做的是滑鼠移過去的圖示效果，請參閱 jQuery Tutorials for Designers 的 5b. Animated hover effect #2，因為用 title 比較方便排版。

這裡的 jQuery: The Write Less, Do More, JavaScript Library 直接用 AJAX Libraries API 的版本。 載入 http://www.google.com/jsapi 之後，加上 google.load("jquery", "1.2.6") 就可以用 jQuery 1.2.6 版了，不用另外上傳 jquery.js。

結論是做完就後悔了，第一是 IE7 中，hover.png 會先出現一個黑框然後才變成透明，看起還好像壞掉，另外沒有預期中資訊比較豐富，雜訊反而等於多一層，最後還是拿掉，但是把字體改大一點。

延伸

1. MOTUDO 網誌: jQuery 做簡易問答網頁
2. MOTUDO 網誌: jQuery

Olympic Baseball 2008 奧運棒球賽

傷了、跳了、怨了、累了、拼了、罵了，總要休息一下吧，還有下次不是嗎？

2008年夏季奧林匹克運動會中華台北代表團 - 維基百科

Finger and Horse 天地一指萬物一馬

這裡畫莊子在齊物論裡說的天地一指萬物一馬。

以指喻指之非指，不若以非指喻指之非指也；以馬喻馬之非馬，不若以非馬喻馬之非馬也。天地一指也，萬物一馬也。

要說上面是什麼意思，只能說我還不知「道」，關於指與馬，歷來有很多解釋，可進一步參考 「天地一指也，萬物一馬也」析釋。

關於圖示方面，指來自Fingerspelling - Wikimedia，馬來自甲骨文 Oracle bone script - Wikipedia。

再附上 Pablo Picasso 的話：

We all know that Art is not truth.
Art is a lie that makes us realize the truth, at least the truth
that is given to us to understand.

Threat Detection 威脅偵測

俗語說一朝被蛇咬，十年怕草繩，找到威脅物這是物種進化必須具備的基本能力，這些東西進入大腦的處理區域與一般看的東西的不同，更快的抓住你的注意力。所以看到上圖時，蠍子很快吸引注意力，花並不在威脅之中，它會被放到旁邊，即使它有數量多與顏色鮮豔等吸引注意力的基本元素。

關於利用威脅偵測來設計的相關資料可參閱 Universal principles of design : Threat Detection (P192)，除了蛇、蜘蛛之外，帶有惡意的臉孔也很容易觸發威脅偵測開關，所以寫內有惡犬應該比不上一張猛犬的圖案。

參閱連結：

• 彭晓哲: 情绪信息与注意偏向
  
• Neuroimaging studies of attention and the processing of emotion-laden stimuli

Shading 倒角

為了讓圖示看起來更立體，常需要將二維的圖示展示成三維的樣子，這時就需要一點視覺方面的技巧。做一個看起來像是倒角的東西，主要的技巧是陰影的交互使用，比較暗的，自然會覺得比較離光源比較遠，就靠這種視覺的暗示，讓人在二維圖案中出現三維的感覺。

這裡主要參考 Apple Air Banner in Fireworks | Abduzeedo 來做，另外原則性的說明可以參考Universal principles of design : Three Dimensional Projection(P194)。

這篇 色胚子部落 » 繪製Web 2.0 Style圖示的概念也有類似說明。

如果把握陰影漸層原則，工具反而是輔助而已，例如上圖用 inkscape 畫，Abduzeedo 則是用 Fireworks，色胚子用的是 Photoshop，都可以達成類似的視覺效果。

God's Stuff 神品

最近常常需要描些東西，發現古時的印章有的非常有意思，有機會也來刻些印章，這裡先從前人的章臨摹起。這是之前做 Motudo Calligraphy Game 摩圖獨書法永字八法遊戲 時看到，該「神品」章取自 蘭亭集序的永和九年旁，不知是誰的章，有機會找找。

Highlighting 強調

MOTUDO原先下方的按紐使用 Tango Desktop Project 的圖示，後來看看感覺單單利用預設圖示不夠明顯，乍看不像是可以按的東西，既然要換，就乾脆自己畫個簡單版本的。

這裡使用強調的一些小技巧，來改 MOTUDO的按鈕設計，讓圖示更簡單一點，更像按鈕，以及滑鼠移過去會變色等方式，讓這個圖示區塊看起來是 clickable 的，其實可以更強調按鈕的部份，可惜 32px 真的太小，很多細節無法呈現，加上這方面經驗有限，只好省略。

小有小的好處，像之前在 MOTUDO 中文網誌: Signal noise ratio 可以再清楚一些嗎？畫的，傳達的資料儘可能精準剛好，不要太多多餘的東西干擾。

關於強調的技巧很多，可參閱 Universal principles of design : Highlighting (P108)，它提到幾種方式可以參考。

• 不要用太多強調技法，都用全篇加大字體反而變成沒強調。
• 換字體，或是用字體的粗體或斜體。
• 顏色
• 閃爍