恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
APP内图标经验小总结
0.0°
2017-04-19 原创文章 经验/观点 举报 3791 40 17 1


表现形式

(1)面型图标:完整色块填充;

(2)线性图标:最理想是2px,最通用是3px,4px一般通用,尽量避免1px;

(3)线+面图标:这种表现形式能比较好的做出立体感;

(4)MEB风格:近年在追波比较流行的风格,通过点、线、高光和颜色来表现,比较萌可爱;

PS:通常情况下线越小图标细节越多,会越精致,但表现力也会相应减弱;


APP内icon的使用规范(@2x)

(1)顶部栏icon:一般情况下,图标的高度不超过顶部栏高度的一半。以iPhone 6的尺寸为例,顶部栏高度为88px,icon最好不超过顶部栏的一半,因此一般icon的高度控制在32-36 px左右。

(2)内容区域icon:按钮icon、纯展示icon

按钮icon常用尺寸:48x48px、64x64px;

纯展示icon常用尺寸:24x24px、32x32px;

(3)底部导航栏icon:icon+文字、纯icon

icon+文字:icon(44px)与文字(20px)间距一般控制在14 px左右;

纯icon常用尺寸:48px;

PS:一般情况下,我会保持icon高度与文字的高度一致。

Image title


测试可行性

(1)可行性—单色模式:把icon变单色,icon的含义不变,那么它是一个可行的icon;如果含义变得很弱甚至影响用户识别,那么还需继续修改;因为带色彩的icon会进一步提高识别性;

(2)可识别性:观察新用户在使用产品的过程中,是否对icon的表达的意思有疑惑,用户过多的思考这个图标是啥意思是否能清晰理解icon所传达的意思;

(3)可记忆性:告诉用户一组图标所代表的含义,几个星期后再询问他们是否记得这组icon的含义。

PS:icon的作用是表达信息和传递信息,简洁易懂好看的icon才是王道。


小tips

(1)在PS中开启“像素网格对齐”功能:编辑-首选项-常规-勾选“将矢量工具与变化和像素网格对齐”,作用是避免绘制icon的时候出现虚边,解决了图形模糊的问题,尤其是将画布放大N倍的时候,精度可以达到像素级;

(2)矩形工具----对齐边缘:用矩形工具绘制形状的时候,将画布放大N倍后,还是会有虚边,勾选了对齐像素的选项之后,边缘就清晰了,不会再出现虚边;

(3)绘制icon的时候,我会尽量保持icon左右上下留白2px。举个栗子:绘制32px的icon时,如图:

Image title


更新:2017-04-19

收藏

40人已收藏

Choi_Sophie

Around u Design for u(微信号同上)

  • 10

    作品

  • 1055

    粉丝

  • 21

    关注

  • 丝域养发·预约小程序
  • 允斌顺时生活·小程序
  • 新零售生鲜电商平台---大街小象
  • 如何制作一枚艺术二维码
相关标签
设计经验GUI

    猜你喜欢

      2017-04-19 原创文章 经验/观点 举报 3791 40 17 1

      APP内图标经验小总结

      0.0°

      你确定要举报APP内图标经验小总结

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年04月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      17
      40
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录