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)，它提到幾種方式可以參考。

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