所有232 展开类目

矢量图标的管理和应用 ƕ

2012/07/11
嘘... 嘘... 嘘... 嘘... 嘘... 嘘...

 

设计的循环

      毕加索终生喜欢画牛。年轻时他画的牛体形庞大,有血有肉,威武雄壮。但随着年龄的增长,他画的牛越来越突显筋骨。到他八十多岁时,他画的牛只有瘳瘳数笔,乍看上去就象一副牛的骨架。那些牛的外在的皮毛、血肉全没有了,只剩一副具有牛的神韵的骨架了。

      设计也同样,过去我们借助工具希望把我们的设计做的很饱满很逼真,通过渐变、高光、投影等手段把效果做的很绚丽,但是随着设计风格的推进,简约越来越受设计师们推崇,可能因为我们生活在一个嘈杂的社会,设计师们希望通过简化设计,去除一些无用的元素凸显产品主要功能为我们的科技生活带来一些宁静;

      我们仿佛看到了大师画11副牛时思考的画面。简单——真实——简练;

 

前端应用

 

第一步:使用font-face声明字体
@font-face {font-family: 'uxiconfont';src: url('uxiconfont.eot'); /* IE9*/src: url('uxiconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('uxiconfont.woff') format('woff'), /* chrome、firefox */url('uxiconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('uxiconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */}
 
第二步:定义使用iconfont的样式
.iconfont{font-family:"uxiconfont";font-size:16px;font-style:normal;}
 
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="iconfont">&#33</i>
7 条评论   |   账号登录: è域账号     Ƹ淘宝账号     ǔ新浪微博
kinglate
kinglate 发表于: 2013-01-31 18:10:29
好东西
kingfanxt
kingfanxt 发表于: 2012-10-31 11:49:24
学到了
嘘...
嘘... 发表于: 2012-10-26 13:16:27
是的~~我觉得这个优势在app中的提现尤其大,在pc中我们可能还担心ie6的渲染效果不是很好,但是在app中他的渲染效果是完美的~~~而且矢量,可以兼容各种分辨率,格式设备显示器~~~
做梦的可白
做梦的可白 发表于: 2012-10-26 10:55:12
请问关于手机客户端的app里面也可以用这种方式做图标吗
嘘...
嘘... 发表于: 2012-09-12 11:02:00
嘘...
嘘... 发表于: 2012-09-12 10:45:09
我也喜欢牛
嘘...
嘘... 发表于: 2012-09-12 10:34:06
test
loading...