身為一個設計師不能不知道的必備專業知識

1. 線上問答 0625
設計師業界必備知識

2. ✦ 圖片
-⾊色彩模式
-圖檔模式
-輸出格式
⼤大綱
——設計師業界必備知識
✦ 字體
-⽂文字排版
-字體類別
-字體授權
✦ 規範
-設計軟體
-網格系統
-設計規範

3. ⾊色彩模式、圖檔模式、輸出格式
圖片

4. ——設計師業界必備知識
RGB vs CMYK

5. RGB 與 CMYK 是兩兩種最常使⽤用
的⾊色彩模式，分別應⽤用在螢幕顯
⽰示以及印刷輸出。
常⾒見見的
⾊色彩模式
——設計師業界必備知識

6. RGB
RGB 俗稱「⾊色光三原⾊色」，顏⾊色越
疊加越亮，分別是紅、綠、藍藍三⾊色，
⾊色域涵蓋範圍較 CMYK 廣。
CMYK
CMYK 俗稱「印刷四⾊色」，顏⾊色越疊
加越暗，分別是青、洋紅、黃、⿊黑四
⾊色，模擬印刷油墨墨的⾊色彩。
——設計師業界必備知識
R
G B
C
M Y
K

7. ——設計師業界必備知識
RGB CMYK

8. ——設計師業界必備知識
RGB CMYK
應⽤用載體 螢幕顯⽰示 印刷輸出
組成⾊色彩 紅、綠、藍藍 青、洋紅、黃、⿊黑
⾊色彩⾊色階 0-255 0-100
混⾊色模式 加⾊色混合 減⾊色混合

9. #RRGGBB
補充
HEX ⾊色碼原理理
以＃開頭，使⽤用 3 位元組共 6
個⼗十六進位數字表⽰示⼀一種顏⾊色，
每位元組從 00 到 FF，相當⼗十
進位數字從 0 到 255。
——設計師業界必備知識

10. ——設計師業界必備知識
向量量圖 vs 點陣圖

11. ——設計師業界必備知識
網⾴頁設計常要與圖片打交道，⽽而
常⾒見見的圖片格式有兩兩種：向量量圖
與點陣圖。
常⾒見見的
圖片格式

12. 點陣圖
點陣圖是由⼀一格格的「像素」組成。
每格像素都是獨立⾊色彩，影像表現細
緻，但縮放後會失真。
向量量圖
向量量圖是由點、線等等數學⽅方程式產
⽣生的幾何圖像，無尺⼨寸限制，但細節
表現不如點陣圖豐富。
——設計師業界必備知識
pixel (x,0)

13. ——設計師業界必備知識
點陣圖
向量量圖

14. ——設計師業界必備知識
點陣圖 向量量圖
繪圖原理理 像素格點 數學⽅方程式
常⽤用範疇 照片、精細插畫 插畫、網⾴頁、商標
優缺點
⾊色彩層次表現細緻
檔案較⼤大不易易傳輸
適合精細線條繪圖
檔案較⼩小易易於傳輸
副檔名 png/jpeg/bmp/tiff/gif ai/cdr/eps/svg
常⽤用軟體 Photoshop/Painter Illustrator/Adobe XD

15. ——設計師業界必備知識
圖檔輸出格式

16. 在網⾴頁設計上，常會運⽤用到許多
圖片，最常使⽤用的圖片格式有
JPEG、PNG、與 SVG 三種。
常⽤用的
圖片格式
——設計師業界必備知識

17. ——設計師業界必備知識
JPEG PNG SVG
圖片類型 點陣圖 點陣圖 向量量圖
壓縮⽅方式 有損壓縮 無損壓縮 -
⽀支援透明度 X V V
⽀支援動畫 X X V
最佳運⽤用 攝影圖片 包含透明度的圖像 精細線條圖像

18. ——設計師業界必備知識
JPEG 影像，422 KB PNG 影像，913 KB
⾊色彩豐富的攝影圖片建議使⽤用 JPEG

19. ——設計師業界必備知識
JPEG 影像，255 KB PNG 影像，132 KB
⾊色彩重複性⾼高的圖片建議使⽤用 PNG

20. ——設計師業界必備知識
SVG 影像，2 KB PNG 影像，15 KB
需要多尺⼨寸運⽤用的圖⽰示建議使⽤用 SVG

21. ⽂文字排版、字體類別、字型授權
字體

22. ——設計師業界必備知識
⽂文字排版

23. ⽂文字排版上最常⾒見見的觀念念有
kerning、tracking、leading，
對版⾯面呈現有舉⾜足輕重的影響。
⽂文字排版
觀念念
——設計師業界必備知識

24. Kerning
Kerning
Kerning 指在調整兩兩個字元之間
的尷尬距離，使其達成視覺上的
間距⼀一致，通常在商標、⼤大標等
情況較常會去調整。
——設計師業界必備知識

26. Tracking
Tracking
Tracking 是指字間的微調，它
會影響閱讀上的舒適程度，以及
⽂文字整體給⼈人的氛圍。
✦ letter-spacing
——設計師業界必備知識

27. Superdry
L O U I S V U I T T O N

28. Leading
LeadingLeading
Leading 指的是⾏行行距或⾏行行⾼高（從
上⾏行行基線到下⾏行行基線的距離），
旨在增加版⾯面的可讀性。
✦ line-height
——設計師業界必備知識

30. ——設計師業界必備知識
字體類別

31. 歐⽂文字體可以粗略略分為襯線體與
無襯線體；⽽而漢字可以分為⿊黑體
與明體（宋體）。
常⾒見見的
字體類別
——設計師業界必備知識

32. Serif
歐⽂文襯線體
襯線體是帶有襯線的字體，通常有著
較明顯的筆畫粗細對比；還能細分成
舊體、過渡體、現代體等等。
Sans-serif
歐⽂文無襯線體
無襯線體是沒有裝飾襯線的字體，筆
畫粗細較⼀一致；還能細分成歌德體、
新歌德體、古典體、幾何體等等。
——設計師業界必備知識

33. ——設計師業界必備知識
Sans-serif

34. 漢字⿊黑體
⿊黑體是⼀一種筆畫在視覺上的粗細⼀一
致，且起筆、收筆切平的漢字印刷字
體。不等於無襯線體。
漢字明體
明體，或稱宋體，是⼀一種漢字印刷字
體。外型⽅方正，橫筆細縱筆粗；橫筆
收筆處的三⾓角形突起是其特⾊色。
——設計師業界必備知識

35. ——設計師業界必備知識
⿊黑體 明體

36. ——設計師業界必備知識
中⽂文 英⽂文
Windows
微軟正⿊黑體
（Microsoft JhengHei）
Segoe UI
macOS 蘋⽅方（PingFang） San Francisco
Android DroidSansFallback Roboto
iOS 蘋⽅方（PingFang） San Francisco

37. ——設計師業界必備知識
字體授權

38. 電腦裡⾯面的字型並不是無中⽣生有
的，若若沒有搞清楚授權模式隨便便
下載來來使⽤用，有可能會觸法。
字體授權
是什什麼？
——設計師業界必備知識

39. 買斷模式
最好懂的⼀一種模式，透過直接購
買來來獲得字型的使⽤用權，但要注
意的是有分個⼈人或是商業授權。
✦ 凝書體
——設計師業界必備知識

40. 租賃模式
透過固定週期給付字型商費⽤用，
來來使⽤用該廠商的授權範圍內的字
型，期滿要續約才能繼續使⽤用。
✦ MORISAWA PASSPORT
——設計師業界必備知識

41. 裝置嵌入
裝置嵌入的授權通常會應⽤用於電
⼦子書或是 App 的內嵌字體，通
常授權⾦金金額會是最貴的。
✦ ⽂文鼎嵌入式系統字型
——設計師業界必備知識

42. 雲端字體
雲端字體是現在比較新興的授權
⽅方式，使⽤用者不會擁有該字型，
收費⽅方式也能相當彈性。
✦ Google Fonts
——設計師業界必備知識

43. 設計軟體、網格系統、設計規範
規範

44. ——設計師業界必備知識
設計軟體

45. 不同的設計需求，最好就要使⽤用
不同的設計軟體來來完成，才能達
到事半功倍的效果。
使⽤用對的
設計軟體
——設計師業界必備知識

46. 平⾯面設計
常⽤用軟體
✦ 向量量繪圖：illustrator
✦ 影像編修：Photoshop
✦ 書籍排版：Indesign
——設計師業界必備知識

47. 介⾯面設計
常⽤用軟體
✦ Adobe Xd
✦ Sketch
✦ Figma
✦ Framer X
——設計師業界必備知識

48. ——設計師業界必備知識
Sketch XD illustrator Photoshop
主要⽤用途 UI 介⾯面設計 UI 介⾯面設計 向量量繪圖 影像編修
適⽤用系統 Mac only Win / Mac Win / Mac Win / Mac
向量量繪圖 是 是 是 否
價格比較 USD 99 / 年年 有免費版 NTD 7,680 / 年年 NTD 7,680 / 年年

49. ——設計師業界必備知識
網格系統

50. 網格系統能讓設計稿更更有邏輯，
是設計師必須掌握的技能，但也
不需要把這類系統視為圭臬。
⽤用網格系統
輔助設計
——設計師業界必備知識

51. 平⾯面設計
網格系統
網格系統只是平⾯面設計風格的其
中之⼀一（國際主義風格），但也
是最常被運⽤用的⼀一種。
——設計師業界必備知識

52. 介⾯面設計
網格系統
960 Grid System 是最經典的
網⾴頁網格系統，常⾒見見分為⼗十⼆二欄欄
的佈局，總寬度為 960px，也
有依照情況分成⼗十六欄欄的樣式。
——設計師業界必備知識

53. ——設計師業界必備知識
設計規範

54. ⽤用途在於降低開發時的溝通⾨門檻
與提升迭代速度，可以參參考⼤大品
牌的設計規範來來客製⼀一份規範。
設計規範
——設計師業界必備知識

55. Material
Design Guideline
由 Google 推出，靈感來來⾃自紙張
與紋理理，包括光線反射和陰影投
射，常⽤用於 Android 的介⾯面。
✦ Material design
——設計師業界必備知識

56. Human Interface
Guideline
蘋果官⽅方的設計規範，包括
macOS、iOS、watchOS、
tvOS 等等皆有規範。
✦ Human Interface Guideline
——設計師業界必備知識

57. 補充
Atomic Design
原⼦子設計是⼀一個設計⽅方法論，由
五種不同的階段組合，創建⼀一個
有層次、計畫性的介⾯面系統。
✦ Atomic Design
——設計師業界必備知識

58. 補充
品牌規範
✦ NASA
✦ Uber
✦ Dropbox
✦ Facebook
——設計師業界必備知識

59. ——設計師業界必備知識
Ｑ＆Ａ