美文网首页
《术与道-移动UI设计必修课》03.图标与图片

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

作者: 清無 | 来源:发表于2017-03-14 09:52 被阅读57次

    1. App图标的特点

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

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

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

    2. App图标设计流程

    1. 寻找隐喻

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

    1. 抽象图形

    太过抽象和太过具象的图形,识别率都很低;

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

    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为常见照片的原始尺寸比例

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/xbucnttx.html