UI自学入门笔记1-软件设计基础-图形图像基础

自学麦子学院UI设计课程，第一阶段：软件设计基础-图形图像基础

有一些我认为重要的理论作如下笔记，希望能共享和复习的作用。

 

图片

设计配色

主流：

1. 色相
2. 色调
3. 明度
4. 纯度
5. 其他

 

其他配色方式

• 渐变
• 强调
• 分离反复
• 自然
• 人工

 

图片参数设置

PS保存时的图片参数设置，

开始学习可以设置成默认，后期有需要可以尝试改变寻找区别。

 

常见图片格式

位图

1. JPG  有损压缩
2. PNG 无损压缩
3. TIF
4. GIF
5. BMP

矢量图

AI

CDR

PNG8和PNG24

颜色的丰富度

 

总结

• 照片和图片一般是位图，由像素组成；矢量图一般由点线组成。
• 有损压缩图片会越来越不清晰，无损压缩图片清晰度不变：jpg有损，png无损；PNG24比PNG8色彩丰富。
• 常见图片格式：jpg、png、AI、gif... TIF\BMP\CDR

 

尺寸

Web常用尺寸

 

APP常用尺寸

 

纸媒常用尺寸

 

总结

 

色彩

色彩的三个属性

色相：色彩的相貌

明度：色彩的明暗度

纯度/饱和度：色彩的鲜亮度

 

 

色彩模式

显示屏主要使用RGB，印刷品适应CMYK。

 

 

色彩的心里效果

• 暖色让人感觉很近，冷色距离感远。
• 膨胀色与收缩色：明亮显得更大，灰暗显得更小
• 色相影响冷暖；明度影响轻重；纯度(饱和度)影响华美与质朴。
• 色彩的诱目性：红黄橙的诱目性高。

 

 

UI配色原则

最多四种颜色：主色，辅色，底色和强调色。

 

色相配色

1. 同一色
2. 邻近色
3. 类似色 -- 色相差为2         -- 既有共性又有变化
4. 中差色 -- 色相差为3~5     -- 既明快又不冲突 
5. 对比色 -- 色相差为6~7     -- 大气
6. 补色    -- 色相差为8         -- 醒目