O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Vertical rhythm

4.126 visualizações

Publicada em

Publicada em: Tecnologia
  • Entre para ver os comentários

Vertical rhythm

  1. 1. 高雄前端社群#9 前端圖形再進化! WIFI:NSYSU-Guest 密碼:12345678
  2. 2. Welcome
  3. 3. • 前端工程師/5y • 熱愛HTML & CSS • 2013年創辦高雄前端 廖洧杰
  4. 4. 圖文排版最佳化 (vertical_rhythm)
  5. 5. 該如何排出友善的圖文排版?
  6. 6. 使用垂直韻律(Vertical Rhythm)
  7. 7. 不符合固定比例的間距難以閱讀 http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
  8. 8. 所以在網頁排版上也要有這個觀念 http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
  9. 9. 除文字外,所有元素也可依照此規則
  10. 10. 那麼該如何用CSS來實踐垂直韻律?
  11. 11. 首先必須先瞭解行距(Line-height)
  12. 12. 文字高度來自『行距』,非文字大小 • http://codepen.io/liao/pen/EmIat http://www.pearsonified.com/2011/12/golden-ratio-typography.php
  13. 13. 先確認你網頁的行距(24px),確認 好等同於在網頁上畫上行線 24px 24px 24px
  14. 14. 段落設定行距24px,文字大小16px, 文字就會垂直置中於行距 4px 4px 16px
  15. 15. 有些網站服務也可以看其效果 • http://drewish.com/tools/vertical-rhythm/
  16. 16. 當標題文字大於24px以上時,行距可 設定為兩行 44px24px+24px=48p x
  17. 17. 使用文繞圖時,圖片寬高也需整除 高度= 24px(行距) * 4 = 96px 寬度= 16px(字距) * 10 =160px 44px
  18. 18. 要不規則也是ok的,只要確保 有遵守垂直韻律即可 http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
  19. 19. 純CSS設計方式 • http://codepen.io/liao/pen/pHyhg Sass+Compass設計方式 • http://codepen.io/liao/pen/DouJz/
  20. 20. 問題
  21. 21. • A. 行距 (line-height) • B. 狀態 (:hover、:active) • C. 背景圖案 (background) • D.字型大小 (font-size) 1.如果要使用垂直韻律,在文字上 哪些是一定要設定的?(複選)
  22. 22. 2.如果網頁行距設定24px,在設計文 繞圖時,哪張圖片較麻煩?(寬*高)
  23. 23. 3.如果網頁行距設定24px,當文字大 小為38px的時候,需要幾行空間?
  24. 24. 總結
  25. 25. 總結 • 設計網頁時,先構想好基本行距要設定多少, 常見預設行距為24px。 24px
  26. 26. 總結 • 並不是說所有元素都必須統一使用垂直韻律, 你可以只侷限部分元素使用。例如:文章內 容區塊。
  27. 27. • 如果行距為24px,使用到垂直韻律的區塊, 元素記得要以24px的倍數來設計。 高度= 24px(行距) * 4 = 96px 寬度= 16px(字距) * 10 =160px 總結

×