《术与道-移动UI设计必修课》03.图标与图片
2017-03-14 本文已影响57人
清無
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为常见照片的原始尺寸比例
