手机图标选择

手机图标格式的选择

随着智能机的普及,手机页面越来越被大家使用,不管是小程序页面,H5页面、还是APP页面,我个人都觉得都属于手机页面,只是功能的复杂程度不一样,面对的群体不一样而已。

界面上的结构有很多相同点,其中有一个元素是必不可少的,那就是图标,高级点我们会把图标和UI合并在一起,一般点的话,我们觉得图标就是ico图片,他就是一个图片。

对于图片大家已经熟悉不能在熟悉了,都知道一个原理,图片变小了,就会不清晰,面对于手机,图标图片就会存在变小的情况,太小了,变模糊,用起来体验度很差,可是我们去看APP 一些小程序的图标的时候人家又会很清晰,是不是很奇怪!

 

这个就是图标格式的选择

常规网页使用图片的格式有jpg、png、gif、如果图片在30px,宽度范围以上的图片,在显示是时候图片看起来还可以,起码清晰,能够勉强接受,如果再小就不行了,一小坨,如果图片信息在复杂点,直接就看不清,图标在手机页面上,一个是栏目导航部分,一个是底部浮动的菜单栏目部分,参考位置如淘宝京东手机版

这里图标采用的图片格式,png的图片,一些大的企业在设计的时候,都会设计不同的尺寸,程序进行调用,但是像类似我们这种的,我们统一只用一个图片,用百分比的尺寸进行控制,就会出现在以些小的手机上,图标就会变得模糊,如果是用线性得图标,感觉边框有重影,效果很不理想。

针对这种情况我试过很多办法,调整过很多图片的格式,针对不同的情况具体使用,

1.图片情况(如果设计师弄了很多版本的图片,问题不大,如果只用一个图片,根据百分比和rem 单位来控制的话,复杂的图片就会出现问题,)建议使用大图标,缺点缩小会变模糊。

2.图标字体库(比如阿里图标、Font Awesome、Bootstrap图标、前端框架自带的图标)调用的时候通过css 样式进行调用,操作方便,优点缩放矢量图标保障清晰,大小、颜色、阴影以及任何可以用CSS的样式,缺点受限于框架自带的图标,扩展性小,

3.svg 图标(可绘制格式的矢量图标,保障清晰,扩展性很强,样式多样化,效果绚丽)但是我不会写,我只能通过AI软件存储为svg 格式的图片,调用图片的方式进行调用,但是图片显示的效果很好(推荐使用)

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值