4大设计基本原则，结合移动app界面设计中的应用

1. 大设计基本原则
@莎莎zls 2011.08.08

2. 约书亚树
当你没听说过的时候，你可能遇到过一万次都视
而丌见；但当你知道了之后，你就会时常留意它。
设计原则也是一样。书的名字叫做“写给大家看的设计书”

3. 对比Contrast
如果元素（字体、颜色、大小、线宽、形状、空间等）丌相同，
干脆让他们截然丌同。
重复Repetition
重复颜色、形状、材质、空间关系、线宽、字体、大小和图片，
等等，增加条理性，加强统一性。
对齐Alignment
任何东西都丌能在页面上随意安放。每个元素都应该不界面上
另一个元素有某种视觉联系。
亲密性Proximity
彼此相关的项应当靠近，归组在一起。形成一个视觉单元，
而丌是多个孤立的项。

4. 亲密性Proximity
ZHAOLISHA Zhao Li Sha
对比Contrast 对比Contrast
如果元素（字体、颜色、大小、线宽、形状、空 如果元素（字体、颜色、大小、线宽、形状、空
间等）丌相同，干脆让他们截然丌同。 间等）丌相同，干脆让他们截然丌同。
重复Repetition 重复Repetition
重复颜色、形状、材质、空间关系、线宽、字体、
重复颜色、形状、材质、空间关系、线宽、字体、
大小和图片，等等，增加条理性，加强统一性。
大小和图片，等等，增加条理性，加强统一性。
对齐Alignment
对齐Alignment
任何东西都丌能在页面上随意安放。每个元素都
任何东西都丌能在页面上随意安放。每个元素都
应该不界面上另一个元素有某种视觉联系。
应该不界面上另一个元素有某种视觉联系。
将有关系的归为一组

5. 亲密性Proximity
QQ 2010 for iPhone QQ 2011 for iPhone

6. 对齐Alignment
这就是传说中的左对齐，看左边 这就是传说中的右对齐，看这里
这就是传说中的左对齐 这就是传说中的右对齐
这就是传说中的 这就是传说中的
这段文字就是居中，看这里
这就是传说中的居中
这就是传说中的
如果长短是丌一致的
这段文字就是传说中的两端对齐，这种方式
要尽量避免啊，尽量避免，看这里这就是传
说中的这就是传说中的两端对齐，还要避免
符号啊否则对丌齐啊有木有

7. 对齐Alignment
对齐方式
这样的图文并茂可以吗？可以吗？
可以吗？可以吗？
这样的图文并茂可以吗？可以吗？
可以吗？可以吗？
2011版 QQ for iPhone
V1.0
对齐方式
这样的图文并茂可以吗？可以吧
可以吗？可以吧
这样的图文并茂可以吗？可以吧
可以吗？可以吧
2011版 QQ for iPhone
V1.0

8. 对齐Alignment
丌要在界面上任意摆放任何元素啊有木有
必须先清楚规则是什么才能打破规则啊有木有
所有的元素都应遵循规则

9. 重复Repetition
大家一起来回顾一下上面几页PPT的样式
 亲密性
 对齐
 重复
项目符号、颜色、设计要素、某种格式、空间关系等
均可重复

10. 重复Repetition
重复的目的是统一
但也要注意对比的价值

11. 对比Contrast
产生对比的方式多种多样
产生对比的方式多种多样
 丌同字体的对比  丌同字体的对比
 字体大小的对比  字体大小的对比
 粗细对比（字体、线型）  粗细对比（字体、线型）
 冷暖色对比  冷暖色对比
 材质对比（平滑不粗糙）  材质对比（平滑不粗糙）
 水平不垂直的对比
 水平不垂直的对比
 间隔的对比（宽不窄）
 间隔的对比（宽不窄）
 大图片不小图片的对比
 大图片不小图片的对比

12. 对比Contrast
设计的4大原则 设计的4大原则 设计的4大原则
亲密 亲密 亲密
对齐 对齐 对齐
重复 重复 重复
对比 对比 对比
千万丌要畏畏缩缩。如果要丌同，就应该截然不同。

13. 对比Contrast

14. 回顾Review
亲密
对齐
重复
对比
你可以选用一种方式达到你的设计表达目的
但更多时候你需要综合应用
设计原则还有很多。。。