課程連結：Adobe XD 網頁設計好容易| 六角學院

一、向量是什麼？

  • 點陣圖
    • 繪圖原理：由一格格的「像素(Pixel)」組成，每格都是獨立色彩
    • 優點：色彩層次表現細緻
    • 缺點：縮放後會失真、檔案較大
    • 用途：照片、精細插畫
    • 副檔名：png/jpeg/bmp/tiff/gif
  • 向量圖
    • 繪圖原理：由點、線等數學方程式產生的幾何圖形
    • 優點：無尺寸限制可任意縮放、檔案較小
    • 缺點：細節表現不如點陣圖
    • 用途：插畫、網頁、商標
    • 副檔名：ai/cdr/eps/svg

二、RGB 與 CMYK

  • RGB(色光三原色)
    • 組成：紅(Red)、綠(Green)、藍(Blue)，越疊越亮
    • 應用：色彩涵蓋範圍較廣，螢幕顯示
    • 色彩色階：0-255
    • 混色模式：加色混和
  • CMYK(印刷四色)
    • 組成：青(Cyan)、洋紅(Magenta)、黃(Yellow)、黑(Black)，越疊越暗
    • 應用：模擬印刷油墨的色彩，印刷輸出
    • 色彩色階：0-100
    • 混色模式：減色混和

三、解析度

  • 解釋：影像中所含的像素數目，數目越高代表影像品質越好
  • 單位：
    • ppi(pixels per inch)：每英吋有幾個「像素」，用於電腦顯示
    • dpi(dots per inch)：每英吋有幾個「點」，用於印刷輸出
  • 常用解析度：
    • 電腦：1920 x 1080
    • 平板：768 x 1024
    • 手機：360 x 640
  • 圖片輸出格式：建議 PNG

四、網頁設計與平面設計的差異

  • 平面設計
    • 實體印刷輸出
    • 固定尺寸
    • 印刷技術、材質表現
  • 網頁設計
    • 需符合多種裝置尺寸
    • 透過滾動視窗瀏覽內容
    • 常有互動狀態視覺回饋

五、字體介紹：襯線、無襯線

  • 歐文體系
    • 襯線體(Serif)：較明顯的筆畫粗細對比
    • 無襯線體(Sans-serif)：粗細比較一致
  • 漢字體系
    • 黑體：粗細比較一致，容易和無襯線體混用，但不等於無襯線體
    • 明體(宋體)：外型方正，橫筆細、縱筆粗
      推薦網路字體：Google Fonts