好的网页设计概念
- 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. 保持颁厂厂的可读性
- 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