S60第三版-SVG矢量图标的春天?

以往我们在给手机做图形的时候,往往要被屏幕大小所困扰,有时候不得不点像素或者抠像素,Nokia的Scalable UI就是想把设计师们从困扰里面解救出来,在我以前写的一篇blog 《Mobile Game UI design system》中,也曾经设想过SDK可以做到很强大以减轻开发压力。

S60第三版是革命性的,抛弃了向下兼容(cool and pain),也带来了对2维矢量图的支持(也就是说不光是在图标上你可以使用矢量图,在程序里面比如说Flash lite或者小游戏什么的你也可以使用SVGTiny)。

传统的icon制法也仍然有效,比如说用一个黑白的2bit的bmp来做mask以实现透明(Transparent),但是这种mask只能导致边缘的残破(如果你点像素的话,应该还okay,但是不同的分辨率和屏幕大小呢? 也还是有尴尬的问题)。

S60支持的SVG是SVG Tiny,非压缩(Copression: No(ASCII text or Binary)), 24bits/pixel Color depth, 对文件大小也有一定的要求(10k以下,根据具体条件还有7k以下或者4k以下)。所以坦白地说,作为设计师,你的压力并未减小(尝试用最朴素的填色方法,更简洁的曲线,更少的效果)。因为曲线和控制点影响到文件大小,进而影响到运行起来需要的资源,所以你现在只能说是解放了脑子,但是双手还没有彻底解放:)

(我之前写过用C4D、PS来模拟N70这种风格的图标,现在看来,只要你熟悉矢量绘图软件,那么直接上SVG当然最好!)

至于生成SVG Tiny,你可以用AI CS,也可以用Free hand,在官方文档里面有一份简单的列表可以参考。同时S60开发SDK里面也有一个SVG到SVGT的转换程序。

一些链接:

  • 1) S60 Platform: Scalable UI Example v2.0
  • 2) Introduction To The S60 Scalable UI v1.4
  • 3) S60 Platform: Vector Graphics Optimization
  • 4) http://www.svg.org/story/2005/11/2/22356/0817

  • 2 Comments so far

    1. 大哥 你能教我怎么做诺基亚智能机的待机的时间跟信号的矢量图吗?
      我刚学会做主题
      但不喜欢诺基亚自带的时间显示风格
      万分感谢!!!~
      期待援助!!!~

    2. 你可以先看看我写的另外一篇blog:
      http://www.orangedo.com/blog/2007/10/31/svg-icon-for-s60/

      你改相应的信号的图

      然后最后一步导出整个主题,然后安装到手机上,换成当前主题就可以了

    Have your say

    Fields in bold are required. Email addresses are never published or distributed.

    Some HTML code is allowed:
    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
    URIs must be fully qualified (eg: http://www.domainname.com) and all tags must be properly closed.

    Line breaks and paragraphs are automatically converted.

    Please keep comments relevant. Off-topic, offensive or inappropriate comments may be edited or removed.