「我覺得頁面不好看但說不出來」、「不懂設計卻覺得不協調」、「審美要加強」——這類對話常是產品與設計矛盾的導火索。其實設計是理性學科，唯有言之有理的設計才能說服他人。若設計師僅按原型機械輸出，忽視版式規則，極易產生不協調結果，雙方皆不滿意。

UI 設計中存在大量版式原理，若產品與設計共同掌握，溝通評審將更高效。以下總結常見原理，為良好視覺效果奠基。

1. 信息的排布

排布信息必須掌握對齊、重複、親密性、對比四大核心原則。

對齊

除建立清晰精巧外觀，還利於開發實現。基於「左上到右下」閱讀習慣，移動端常用左對齊與居中對齊；表單輸入項常用右對齊。

重複與對比：組合拳

設計需有輕重緩急，別讓用戶找重點，應讓重要信息流暢觸達。重複視覺元素增強條理性與統一性，降低認知難度；對比（尺寸、顏色差異）則在關鍵處強調重點，直觀傳達核心信息。

親密性：組織複雜信息

相關信息靠近歸組，形成視覺單元而非孤立元素，減少混亂，提供清晰結構。

易讀性與可視化表達

適當用圖形提升易讀性與設計感，圖形理解效率高於文字。冗長文字說明轉為可視化圖形，能將說明、標題、數值等生硬內容柔和呈現。

2. 圖片的使用

頁面結構與文本定稿後，圖標/按鈕/圖片的安排將頁面從「閱讀型」轉為「觀看型」，極大影響易讀性與整體效果。圖版率（圖片佔比）是關鍵杠桿：

• 降低圖版率 → 寧靜典雅、高級感
• 提升圖版率 → 活力感染力、畫面張力

圖片元素、色調、情感表達直接傳達應用氣質：「高級」、「平民化」、「友好」等。

內容少時如何提升豐富度？

可用色塊、抽象擬真物件（電影票、書頁、優惠券、便籤等）填充，增加友好感、減少空洞感。注意：此法主要改變色調/質感，不改變「閱讀型」內容佔比。

3. 顏色的使用

移動端通常需定義：主色調（決定風格，小面積用於導航、關鍵按鈕、Icon、特殊頁，起定調作用，如網易紅/騰訊藍）、**標準色**（全套色彩規範：文本、線條、圖標、背景）、**點睛色**（標題、按鈕、Icon，起強調引導）。

常見配色策略

1. 鄰近色配色（色相環鄰近）：過渡自然柔和，最常用。
2. 同色系配色（色相一致、飽和度不同）：統一感強。
3. 點亮色配色（主色沉穩 + 高亮點睛色）：帶動氛圍、強調重點。
4. 中性色配色（中性色為基調）：弱化干擾，移動端最常見。

漸變、明暗對比、多色搭配等進階手法不一一展開，請自行體會。

未完待續…… 下篇將講解：留白藝術、視覺心理靈活運用、沒有設計的設計。