前端工程師不一定要成為設計師,但每天都在「實作設計」——切版、調間距、選色、排版。懂一點設計原則,能讓你在沒有設計稿時做出合理判斷,與設計師溝通時抓到重點,也能在 code review 時看出「為什麼這個畫面看起來很亂」。
本章把幾個經典的設計與簡化原則,轉化為前端可以用 CSS/HTML 直接落實的角度。
核心心法#
好的視覺設計多半來自「刻意」而非「隨意」。
畫面之所以看起來凌亂,通常不是因為缺乏裝飾,而是因為對齊、間距、層級是「隨手擺的」。先把這些講清楚,再談美感。
關聯閱讀#
- 用 CSS 落實這些原則 ➡️
02-css-mastery - 無障礙與語義化 ➡️
01-html-semantics