全国免费咨询热线:400-611-9921
 
未来大趋势——响应式图标

2015-12-03

809

说实话,第一次听到“响应式图标”我也觉得怪怪的,正如不久之前,人们为了让图标字体更适合不同设备,而更改它们的大小一样,但是这一想法却让响应式设计以及图标设计有了长足的进步。那么今天,我们就来八一八,这...

说实话,第一次听到“响应式图标”我也觉得怪怪的,正如不久之前,人们为了让图标字体更适合不同设备,而更改它们的大小一样,但是这一想法却让响应式设计以及图标设计有了长足的进步。那么今天,我们就来八一八,这到底什么个什么玩意儿。

他是什么?

响应式图标并不是说图标大小会随屏幕尺寸的变动而改变,而是意味着图标会根据自己所处何种设备来改变自身大小。这就意味着屏幕尺寸对图标来说不是那么重要了,因为它能自动调节,它可以变大变小——同一时间,同一屏幕。图标的设计上的差别不会太明显,一般都是细节问题。详细请看下图:

Responsive Icons
响应式图标很重要吗?
随着字体图标、响应式网页以及微型设计的流行,我们的风格也随着改变,设计里的扁平化图标越来越多。我觉得这个东西有人接受那肯定就有人不愿意接受,不愿改变的不一定就是做的不好的,但是我相信走在改革前沿的肯定比没有动作的人领先一大截。

响应式图标推动了图标设计的发展,让用户得到了更好的体验,操作性更好,视觉效果更佳。为了让网页更加优秀,我们提出了响应式图标,这也是每个设计师以及用户心里所想、所愿。

Responsive Icons
Iconic?
如果你没有听说过iconic,那它可能就是一个产品,但是我觉得你肯定看到过,因为iconic制作了一系列非常流行的图标,几乎人尽皆知。这个团队致力于开发响应式图标,可以说他们是响应式图标背后的男人。

Iconic

Iconic近期干过最大的一票是成功发起并完成 Kickstarted运动,这让他们获得92624美元的利润,是的你没看错,我也没有忘记小数点,这超出他们预期的15000美元的618%。有了这些钱,他们就可以进行深入研究,让响应式图标变得更好。所以说,有些事情你做了才知道对不对、行不行,就像你不知道他们最初的目的仅仅是对网页图标进行改革。
如果我想做响应式图标,怎么做?
如果你准备开发响应式图标,这里有几种方法供你选择,这些方法是iconic已经摸索到的、可能的方法,供你参考。

Media queries

这是迄今为止最简单的方式,其允许我们在不改变内容的情况下,改变页面的布局以适应不同的设备,以此加强体验。但是这种方法也有弊端,它无法将细节处理完美。从表面上看,media queries仍旧是响应式图标设计的核心方法,试试就知道。

Media queries

 

polyfills
很多人都不知道它是什么,所以我跟大家解释一下:你可以把它想象成media queries,只不过是由元素组成。比如说下面的例子,它的意思是当页脚大于等于250px时,背景变为白色。这种方法比media queries要直接精确一些。

1
2
3
footer[min-width~=”250px”]{
        background#fff;
}

元素查询是一个新兴概念,不是所有的浏览器都支持,不过若你使用javascript,它就可以正常工作,详细了解请点击: here

Media queries

SVG窗口

SVG窗口这个方法有点儿意思嗬,完完全全意料之外。SVG允许动态控制元素以及图标,这也给图标设计带来了新的方向。试想一下,如果将SVG与media queries相结合,那么图标就可以自己感受屏幕的大小随之改变了~但是这点实现起来有一定的难度…就像SVG窗口很难和DOM相结合一样。

总结

师父领进门,修行在个人,今天我们带你感受了一下响应式图标,对此,你心里的想法是…?请在下方的评论里告诉我们吧~


关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。
广州市纵天信息科技有限公司公众号
本文来自广州品牌网站建设网站设计制作公司-纵天
关键词:广州网站建设公司,广州网页设计公司,广州网站设计公司,移动网站建设
热门标签
营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设德国商会品牌网站建设福美控股赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设网站建酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作三盟科技物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站斯帝罗兰网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设公司网站制作拉链官网广州建站广州网站建设纵天科技
立即致电纵天品牌顾问:
400-611-9921
联系我们:

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭