我 lag 了之 Web 2.0 視覺設計

這篇 Web 2.0 how-to design style guide 擺在 ScrapBook 裡很久沒看，現在不能上網就拿出來翻翻，以下是一堆簡譯組成的摘要：

1. 簡潔：「對於必須滿足的條件，以最簡要的功能滿足之。」
   • 簡潔比較好，因為：
     • 每個網頁都確實有目的
     • 讀者的注意力很珍貴
     • 設計師本來就該協助使用者找到所需內容（或讓他們看到該注意的東西）
     • 越多元素就越擾亂視線
   • When? Always!
   • How? a) 刪掉不必要元素 b) 試著換種簡單方式解決問題
   • 「『完備』該是減一分太少，而不見得是增一分太多」
   • 「只要在促進與讀者間的必須溝通上（有任何）需要，該放多少元素就放。」所以不是說別設計得很漂亮什麼的。與讀者溝通的資訊有軟硬之分，通常我們是要來軟的：
   • • 硬：不容模糊的純然事實，像是新聞、股價、時間、金額… etc.
     • 軟：較抽象的東西，第一印象、感覺、概念… etc.
2. 版面置中
   • 置中比較好，因為：
     • 直接擺中間比較直接，簡單。
     • 因為要簡潔，所以也不用擺得整個版面都是。
   • When? 除非有理由，不然就置中。例如 Web 程式可能會想在一頁中擺上許多資訊，那就不見得要置中。
3. 減少欄位
   • 欄位少比較好，因為：
     • 欄位少比較簡單
     • 要傳達的資訊會比較清楚
   • 建議不要超過 3 個欄位。
   • 有的特殊情形的確可以把 4 個以上欄位的版面玩得很好：Derek Powazek 的 blog，下方有四欄，那是要強調「要什麼就拿什麼」的感覺。
4. 區隔刊頭部份
   • 區隔刊頭比較好，因為：
     • 很容易明白這裡就是頁首
     • 在最開始就給使用者直接且強烈的印象。
   • 建議將 logo 放在最上方，隨後是主導覽列
   • 視覺上刊頭區應該與內文有所區隔
5. 以實色區隔頁面上的重要元素
   • 重要元素如導覽列、背景、內文、其他雜七雜八
   • 「實色」也可以是白色
6. 簡化導覽工作
   • 原則是又大又清楚，文字簡要達意（例如 MozTW 的「wiki」可能就不太好，我一直想改）
   • 「導覽列（在視覺上）跟其他部份要明顯區隔」
   • 內文連結應與純文字明顯區分
   • 簡化導覽比較好，因為：
     • 讀者容易辨識現處所在
     • 也容易辨識還可以去哪
7. 大 logo
   • 明確表現「我們就是這玩意」
   • 原則：
   • 能以各類方式呈現（內文、週邊）
   • 能清楚辨識、與其他商標區別
   • 表現品牌的內涵
8. 字體放大
   • 簡化頁面就有更多空間可以把重要元素放大
   • 字體放大比較好，因為更容易閱讀
   • 如果某些字體應該比一般的更大，應有理由，只為了「要像 2.0 網站」而放大字體沒什麼意義。
   • 如果頁面元素必定就是得那麼多（personal dashboard, web ap），那麼讓字小點反而可能較好。
9. 引言字體粗又大
   • 引言就用關鍵字句（Basecamp 的「Work well」是很好的例子）
   • 只用一次。
10. 用明顯的色彩
    • 區隔各部份、標示重要部份
    • 色彩是企業視覺辨識系統的重要部分
    • 用在非關鍵處時請慎加考慮，會吸走目光（看原文的例子）
11. 有質感的佈景
    • 2.0 網站大多（很小心地）使用 3D 效果來加強整體佈景的質感。
    • 重點是小心、適量。
    • 「如果頁面元素本來就設計得爛，再多努力也幫不上忙，先把基礎搞定再說。」
    • 不用 3D 效果的理由：
      • 要多費工夫
      • 會讓網頁變肥
      • 本來就不是「必須」要做的事
12. 漸層
    • 漸層可以營造氣氛
    • 要跟實色搭配才最棒
13. 光影效果
    • 例如 Apple 的 Aquar Style
    • 或者 2.0 Logos 最常見的倒影效果
14. 可愛的圖示
    • 用少量圖示引出廣泛意涵
    • 簡潔、可愛、富有意涵
15. 星形效果
    • 有類似大賣場「特價」的吸引目光效果
    • 一頁最多最多就用一次