《深入淺出 網站設計》筆記

一.前置作業:完整流程
1.收集所有內容
2.腦力激盪，想出主題與視覺譬喻
視覺譬喻:利用視覺效果讓user一眼就能明白網站想表達的事
3.開發視覺譬喻，並思考版面佈局
4.建立分鏡表（紙上作業）
5.卡片分類並建立IA圖
卡片分類:運用卡片組織網站的資訊架構。包含名稱、簡短描述內容的一句話
IA圖:網站架構圖
6.位內容加上標記語言，並以css製作樣式風格

自行假設兩個虛擬人物進入你的網站，他們會想要獲得什麼

二.智慧導覽:
1.導覽應該在使用者預期導覽出現的地方，通常是網頁頂端，或是左右側其中一側
2.超連結應給使用者一種可以點擊的感覺
3.我們應該能清楚地分辨超連結,而且可以區分各個超連結
4.為文字配上圖示，而不是為圖示配上文字

三.網站寫作:
清單的使用時機:1.需要文章的可掃讀性時2.段落或句子具有可表列的項目時3.大型文字區塊可被分成一或兩句組成的區段時

清單可用於:1.你的主要內容2.側欄3.導覽與標題

標題的重要性以層級來表達，而非尺寸
h1 ~ h6

四.無障礙:
alt屬性質內的文字只需簡短明確、具描述性的片語

忽視無障礙性，就如同忽視一部份聽眾，因此要把無障礙想成你設計每個網站的重大關鍵

所有使用色慘傳達的資訊，須確定它們在沒有色彩的狀況下也能表達

如果網站上用到表格，確認表格列與欄都有標題




css框架:http://www.wowbox.com.tw/blog/article.asp?id=3314
blueprint彈性佳

每日優質部落格網站:http://9rules.com/

色相環:http://kuler.adobe.com/#create/fromacolor

Cynthia Says檢查網站的無障礙程度

Pencil 針對分鏡表、介面圓形與設計圖的建立而設計:http://pencil.evolus.vn/en-US/Home.aspx

WriteMaps 建立IA圖:http://writemaps.com/

CSSTidy 解析與最佳化CSS:http://csstidy.sourceforge.net/

Firebug 為Firefox附加元件，可直接編輯目前所顯示網頁的原始碼並套用:http://getfirebug.com/