《术与道-移动UI设计必修课》03.图标与图片

1. App图标的特点

类似于平面设计中的品牌logo；
既要能表达应用的功能性，又要体现自己的独特性；

• 独特的图形
• 表意准确
• 谨慎用色
• 避免使用大量文字
• 避免使用照片
• 能够适应各种场景需求

小尺寸图片应该重新设计，去除不必要的细节如纹理和质感等

2. App图标设计流程

1. 寻找隐喻

可以把要设计的应用的功能点罗列出来，然后通过关键词进行头脑风暴，比如“休息”，可以联想到椅子、沙发、床和咖啡等；

2. 抽象图形

太过抽象和太过具象的图形，识别率都很低；

3. 竞品分析
4. 确定风格
5. 调整细节
6. 场景测试

3. App图标设计方法

• 正负形组合

根据应用抽象出两到三个重要的功能点或产品特质，然后提炼相应的图形，选择轮廓面积较大的为主图形，把轮廓较小的进行负形处理，通过图形的组合、叠加或扣除，以组成新的图形。

• 折叠图形
• 局部提取
• 线性图标

多以彩色微渐变背景、白色线条组合图形居多。

• 透明渐变
• 色块拼接
• 图形复用
• 背景组合

4. 图标的视觉统一

有时圆形图形多的话看起来显大，长条形图形多的话看起来显小。
为了保证各种类型图标的视觉统一性，可以采用双重边框法来统一图形的视觉大小；

5. iOS应用图标规范

以iPhone6为例

• App图标 120x120
• AppStore 1024x1024 + 180 round-radius
• TabBar 50x50
• NavigationBar / ToolBar 44x44
• 设置列表中图标 58x58
• WebClip 120x120

6. Android应用图标规范

• LDPI 3 75x75
• MDPI 4 100x100
• HDPI 6 150x150
• XHDPI 8 200x200
• XXHDPI 12 300x300
• Android应用图标标准 Launcher 144x144 XHDPI

7. 线性图标

• 风格：大圆角、直角、断线（类似儿童画中的一笔画）

8. 图片的使用

• JPG
• PNG8 / PNG24 可以存储的颜色种类为2^8 和 2^24种；
• PNG24支持半透明，PNG8只支持全透明和全不透明；
• JPG存储图像压缩8x8的栅格像素信息，而PNG则存储的是像素位置信息以及像素色值索引板信息，所以为无损压缩；
• 常见图片比例为

1:1 用户头像
3:2 产品详情页头部展示图片
4:3 / 16:9为常见照片的原始尺寸比例