我 lag 了之 Web 2.0 視覺設計

一月 4th, 2007 at 3:59 下午 (所見所聞)

這篇 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. 星形效果
    • 有類似大賣場「特價」的吸引目光效果
    • 一頁最多最多就用一次

Technorati Tags: ,

Advertisements

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: