研究中心

用户体验文章

如何更好的迎接视网膜RETINA屏幕时代

thursday 05 march 2015 at 22h54

Categories : 用户体验

随着苹果产品的不断创新和增加,(Retina)视网膜屏幕技术的使用也越来越广泛。如今,我们有具备视网膜屏幕的iPhoneiPodipadMac。这些产品拥有大量的用户,就像您周围看到的,这群庞大的用户正逐渐深入到人们的生活。

我们就目前项目里的案例来说明,怎么使你的图标适应不同屏幕,手机屏幕,甚至是视网膜屏幕。

不过你首先需要一个测试环境,有MACpro也好,IPAD也好,不然你根本就不知道,图标在RETINA屏幕下是如何难看的。

我们来看一下,图标在普通屏幕的尺寸下是个什么样子的:

按照传统的做法PNG或者点阵图格式,如果放到视网膜屏幕下,是个什么效果:

如果假定100PX的图标在视网膜屏幕下就是被拉伸的样子,边缘很粗糙,样子是不是很挫?

至少用了完美屏的人情感上肯定是接受不了的!

那么如何做到,适应不同屏幕并且又很平滑呢!这里我们用到SVG 这个矢量格式

SVG的格式在各种尺寸下依旧很清晰平滑。

SVG是什么?

SVG是一种用XML定义的语言,用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象:矢量图形(vectorgraphicshape例如:由直线和曲线组成的路径)、图象(image)、文本(text)。图形对象还可进行分组、添加样式、变换、组合等操作,特征集包括嵌套变换(nestedtransformations)、剪切路径(clippingpaths)、alpha蒙板(alphamasks)、滤镜效果(filtereffects)、模板对象。

如何制作SVG格式的图标

示例文件,请下载!

下载AI模板

AI保存成AVG格式就OK了,你可以看到你的图标在视网膜屏幕上圆润无比!

作者:付波 Q:2396003