為你的 UI 設計增色的 37 種簡單方法

曾經做過一個感覺太平淡的設計嗎？ 讓我們看看幾十種簡單的方法來增加趣味。 準備好為此頁面加入書籤，因為您將來會想要引用此清單。 令人難以置信的是，有多少令人難以置信的專業級設計在堅實的基礎使用了下面列出的一些技巧。

原文 “37 Easy Ways to Spice Up Your UI Designs“，底下是範例的快速一覽。

背景技術

1. 有角度的過渡背景
2. 彎曲的過渡背景
3. 傾斜的強調形狀
4. 背景強調形狀
5. 圖標強調形狀
6. 微妙的圖案作為背景
7. 微妙的線條作為背景
8. 背景中的 XL 文字

邊界和分隔線技術

1. 虛線邊框虛線分隔線
2. 雙邊框
3. 漸變邊框
4. 斜邊邊框
5. 手繪邊框
6. 圖案邊框
7. 厚的透明邊框
8. 淡化邊框

陰影技術

1. 浮體陰影
2. 實體陰影
3. 輪廓陰影
4. 圖案陰影

文字技巧

1. 分層文字
2. 單行文字裡的圖片
3. 有趣的要點
4. 粗體底線
5. 更改字體以顯示突出
6. 寬度變化

其他技術

1. 點網格
2. 打破框架
3. 手繪元素
4. 3D立體化
5. 偏移背景或邊框
6. 口袋裁切
7. 重複形狀
8. 不規則形狀容器
9. 傾斜元素
10. 可見網格

Angled Background Transition， 有角度的過渡背景

Curved Background Transition，彎曲的過渡背景

Tilted Highlight Shape，傾斜的強調形狀

Background Highlight Shape，背景強調形狀

Icon Highlight Shape，圖標強調形狀

Subtle Pattern as Background，微妙的圖案作為背景

Subtle Lines as Background，微妙的線條作為背景

XL text in Background，背景中的 XL 文字

Dotted Border，虛線邊框虛線分隔線

Double Border，雙邊框

Gradient Border，漸變邊框

Bevelled Border，斜邊邊框

Hand-Drawn Border，手繪邊框

Patterned Border，圖案邊框

Thick Transparent Border，厚的透明邊框

Fading Borders，淡化邊框

Floating Shadow，浮體陰影

Solid Shadow，實體陰影

Outline Shadow，輪廓陰影

Pattern Shadow，圖案陰影

Layered Text，分層文字

Inline Imagery，單行文字裡的圖片

Interesting Bullet Points，有趣的要點

Thick Underlines，粗體底線

Font-Change as Highlight，更改字體以顯示突出

Width Changes，寬度變化

Dot Grid，點網格

Break the Frame，打破框架

Hand-Drawn Elements，手繪元素

Enter the Third Dimension，3D立體化

Offset Background or Border，偏移背景或邊框

Pocket Cut-Off，口袋裁切

Repeated Shape，重複形狀

Uneven Shape Container，不規則形狀容器

Tilted Element，傾斜元素

Visible Grid，可見網格

就是這些了，希望對您有所幫助！