1. App图标的特点
类似于平面设计中的品牌logo;
既要能表达应用的功能性,又要体现自己的独特性;
- 独特的图形
- 表意准确
- 谨慎用色
- 避免使用大量文字
- 避免使用照片
- 能够适应各种场景需求
小尺寸图片应该重新设计,去除不必要的细节如纹理和质感等
2. App图标设计流程
- 寻找隐喻
可以把要设计的应用的功能点罗列出来,然后通过关键词进行头脑风暴,比如“休息”,可以联想到椅子、沙发、床和咖啡等;
- 抽象图形
太过抽象和太过具象的图形,识别率都很低;
- 竞品分析
- 确定风格
- 调整细节
- 场景测试
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为常见照片的原始尺寸比例