Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à 好的網頁設計概念
Similaire à 好的網頁設計概念 (20)
好的網頁設計概念
- 3. Grid System
- 4. 選一個吧
- 5. 平面設計 網頁設計
- 7. 網頁是活的
- 9. 網頁是會被操作的
- 11. 吸引人的第一視覺區，留住使用者 • 僅保留精華資訊，以節省高度 • 加上標題，協助使用者快速理解頁面內容 • 讓使用者知道頁面下方還有內容 • 運用圖片增加畫面吸引力
- 12. 可以知道下面還有
- 14. 適當的文字大小 14
- 15. 注意文字的階層性
- 16. 控制每行的文字數量
- 17. 視線起點的定位
- 18. F 型版式設計
- 20. 層次明確的引導視線
- 21. 保持一致的設計很重要
- 22. 網頁標準色配色 • 一般企業形象類：以LOGO色系為主 • 時尚類： 黑色、深紅色、桃紅色、紫色、棕色 • 科技類： 銀色(灰色)、藍色、白色，黑色(冷色系) • 商業類： 藍色、白色 • 古典風： 棕色、橙色、黑色、紅色(暖色系為主) • 普普風： 鮮明色彩(幾何圖型為主) • 休閒風： 綠色、藍色、白色(亮色系為主) • 活潑型： 使用多種色彩混搭(用色鮮明對比強烈)
- 23. 色彩的分布比例 • 5％的鮮明色彩 來凸顯及其重要 的文字 • 60％左右較高 明度的色彩來 賦予重點內容 文字 • 15％左右中低 明度的色彩賦 予必要的輔助 文字 • 20％的配額為 最低明度色彩 留給非必要的 輔助文字 1 2 3 4 4 5 6
- 25. • http://www.cssclip.com/ CSS Clip: 一個以顏色分類的 CSS 設計收集站 Adobe Kuler 配色網站
- 26. 標準化設計
- 28. 善用工具
- 29. HTML5 • 新的<header>和 <footer>標籤 • 新的<canvas>和<svg>標籤 • 新的<section>和<article>標籤 • 新的<menu>和<figure>標籤 • 新的<audio>和<video>標籤 • 全新的表單設計 • 不再使用<b>和<font>標籤 • 不再使用 <frame>, <center>, <big>標籤 前往學習 >
- 30. CSS3 • 新的transform與transition做動態效果 • 新的text-shadow做文字陰影 • 新的box-shadow做區塊陰影 • 新的border-radius做區塊導圓角 • 新的column-count與column-gap與column- rule做區塊排版 • 新的border-image做邊框圖片設計 前往學習 >
- 31. LESS & SASS 前往學習 >
- 33. reset.css或normalize.css 世界知名的 CSS 大師「Eric A. Meyer」整理出一個 很棒的解決方法「reset CSS」 針對 CSS 語法最容易出問題的部份 例如 margin 外間距，各大瀏覽器最常發生不一致 的狀況，現在將 margin 全部統一歸 0 ，其他部份， 文字大小和行高也全部統成一樣的大小 …等 只要掛上這一段「Reset CSS」語法，就可以讓所 有的各大瀏覽器乖乖聽話，呈現一樣的結果 最佳的方法「reset CSS」
- 34. jQuery Mobile 前往學習 >參考: http://codepen.io/vernonk/pen/iJmjk
- 35. Google Fonts CDN>參考: http://codepen.io/heydon/pen/lyEwv • 引用 http://fonts.googleapis.com/earlyaccess/n otosanstc.css 前往學習 >
- 36. 網頁結構設計 • 將有關聯的事物進行分組 • 易讀的標題 • 注意文字的密度 • 把文字看作是使用者界面（UI）的一部份 • 藍色往往是最適合連結的顏色 • 留白讓內容更容易被理解 • 適當的字體大小 • 不要過度使用邊框，這樣會讓界面四分五裂
- 38. 什麼是無障礙網頁設計?
- 40. 無障礙網頁設計原則 • 多媒體相關資訊的替代文字 • 避免使用表格標籤切版 • 無障礙宣告/快捷鍵說明
- 41. 如何寫出優化的網頁?
- 42. 建立好的HTML結構 • 大標題盡量使用h1 • 副標題使用h2 • 盡量引入css檔案的方式 • div盡量在三層以內 • 良好的命名習慣，如：class=“news”等 • 區塊切割完整並加入註釋，如： <! -- 最新消息 --> <! -- //最新消息 -->
- 44. 代碼縮寫 常見縮寫 >
- 45. 適當的代碼注釋 • /* HEADE———————————————-*/ • /* FOOTER——————————————-*/ • /* SIDEBAR——————————————-*/
- 46. 保持CSS的可讀性
- 54. 常使用指示性的圖形和圖標
- 55. 文字或特殊符號的引導
- 56. 引用文獻 • http://vide.tw/topics/design/website-design • http://1ke.co/course/137 • https://buzzorange.com/techorange/2015/04/22/20- design-rules-you-should-never-break/ • https://read01.com/xAdko2.html • http://www.rocidea.com/roc-22534.aspx • https://www.cadiis.com.tw/zh-tw/lessons- learned/597-rwd-webdesign-svg-scalable-vector- graphics-icon • http://bbs.flash2u.com.tw/_html/article/Good_Design _Website/Good_Design_Website.htm