網頁設計課題.ppt

電子書設計課題 製作電子書的軟體 Ark builder Ebooks Writers Lite Sbook builder 諾亞方舟數位出版系統 可於以下網址下載.tw/soft/categories_detial.asp?fid1=2fid2=318 或於下網址亦可.tw/search/search.php 製作電子書的軟體 Ark builder Ebooks Writers Lite Sbook builder 諾亞方舟數位出版系統 可於以下網址下載.tw/soft/categories_detial.asp?fid1=2fid2=318 或於下網址亦可.tw/search/search.php 網頁設計課題 網頁設計簡介 網路技術的發展快速到令一般人無法掌握,所以大部分製作網頁的人多是新技術的生手 網頁的組成成分(元素)有? 文字 圖畫 導引元素 聲音 動畫 影片 一般網頁有什麼顯著的特徵? 內容: 通通都是文字? 都是圖畫? 首頁的目的 突顯主題—揮灑創意 “引誘” 讀者進一步進入第二頁 注意兩件事 Accessibility Usability 何謂創意? 查閱accessibility的資源-Memphis大學的資源 查閱accessibility的資源-Memphis大學的資源 這個guideline overview一定要看 Accessibility資源2 10個錯誤的對待殘障人士的想法 請進入以下網址, 為以下影片檔做中文介紹 /crt/ada/videogallery.htm#tensmallbusinessmistakesdslcaptioned 何謂web accessibility? 請報告這一頁內容的精義 /WAI/intro/accessibility.php 認識幾個簡單的guide line 進入以下網址,認識Jakob Nielsen的短文中所提供的幾個網頁設計原則 /alertbox/9610.html 看看Window XP有什麼accessibility的考量吧! /enable/products/windowsxp/default.aspx 抓一個AGC軟體來玩玩,看人家怎麼設計accessible software /products/braille-math/AGC/download/ 抓一個Hal Screen Reader看看人家是怎麼對待盲人的 到以下網址去抓來玩玩 /downloads/index.asp 盲人的accessibility問題 ---- 文字模式的點字觸摸器 知道該如何讓你的鍵盤按起來更快? 參考以下的介紹吧 /enable/training/windowsxp/keyboardlayout.aspx 簡單性(simplicity)原則 每一個畫面要呈現的訊息,盡量越簡單越好 太多花俏的圖案多只會干擾理解 太多種字型與顏色的變化易造成分心,分散注意力 試(事)不過三原則 一致性(consistency)原則 擅用人類的慣性 畫面的顏色與字型線索一致 圖片樣式一致 術語一致 回饋(feedback) 導覽(navigation) 與 輸出入格式 一致 結構項目位置一致 清晰度(Clarity)原則 儘量用條列式 句子越簡短越好 Icon之間有間隔 避免太過學術 或 次文化的行話 敘述 多用大家熟悉的例子 與 陳述方式 顏色、亮度對比要清晰 清晰度(Clarity)原則—圖例 平衡原則 除了特殊需要,各類別的內容項目應儘量平衡 畫面亮度、大小平衡 最重要訊息放中間, 一般觀看者的視線不會看到畫面底部 文案設計原則 英文最好都靠左,減少換行的hyphenation,中文則兩邊都對齊,較利於閱讀 英文字型不論大小,似乎以verdana 9-14 point,或 Georgia 9-14 point 為宜 文字色彩最好依不同功能分類,而有不同色,不要任意上色 考慮色盲者或單色螢幕的使用者問題,即不同色之間也要有亮度差異. Navigation interface設計原則 Affordance: icon、button、menu設計得讓人看起來就知道要按它 Feedback: 最好不要企圖只用icon傳達抽象新奇的概念 Usability: 這些是很好的輔助與回饋(feedback)的例子 要不要使用frame? 超連結配置色彩的問題 其它色彩配置的問題 利用photoshop 讓影像的色彩飽和度增加 黑底白字好看? 還是 白底黑字好看? 從視覺生理觀點: 白底黑字比較舒服 從突顯文字資料的觀點:白底黑字比較突顯 據研究顯示,亮灰底最好 其他配色的例子----日本風 使用褐色系、黃綠色系和彩度較低的黃色作為使