您的位置:知识库 » 手机开发

MeeGo的UI个性化指南

作者: 公子小白  来源: www.meegoq.com  发布时间: 2010-10-10 12:54  阅读: 3146 次  推荐: 0   原文链接   [收藏]  

  界面个性化基础

  颜色

  MeeGo的基础主题主要包括三种颜色。
  所有的控件(例如按钮,列表,开关等)通常具有:

  1.普通状态(在基础主题中为浅灰色)

  2.被按下的状态(深灰色,呈现为被按下的状态)

  3.被选择的状态(通常用于切换按钮和多选菜单,作用为指示出被选择的项)
  主题中图形的颜色在不同的控件中是不同的,主题中文本的颜色为通用的。
  怎样个性化

  MeeGo中控件的图形界面为SVG矢量图形图像,被储存在svg文件夹中,设计人员可以使用Inkscape或Illustrator CS4和以上版本进行编辑。其中颜色的规则必须被复制到所有的图形组中。
  文本颜色的颜色规则是通用的,只可在constants.ini文件中进行修改。
  其他
  图形颜色和文本颜色需要遵循相同的规则。例如,默认的按钮颜色为黑色,则文本颜色的color_foreground需要更改为白色。所以文本颜色的翻转颜色为黑色。所以按下、所选状态的图形需要对黑色文本有足够的对比度。要注意同样要调整背景和对话框的颜色风格,确保文本具有良好的可读性。
  颜色规则是允许有特例的,他们可以在特定控件的CSS文件中被修改。
  按钮图形

  文本颜色:COLOR_FOREGROUND (黑色)

  状态:还没有被点击过的按钮的颜色状态


  按钮图形

  文本颜色:COLOR_FOREGROUND (黑色)

  状态:还没有被点击过的按钮的颜色状态


  按钮图形

  文本颜色:COLOR_FOREGROUND (黑色)

  状态:当按钮被选择时的颜色状态。

  字体
  字体和大小是可以自定义的。
  怎样个性化
  文件中使用的字体可以在constants.ini文档中进行更改。可更改的内容包括字体名字和大小。字体必须只有被安装后才能被使用。
  其他
  文本的大小可以不变,但是在使用一些新的字体的时候要注意该字体的大小是否合适。

  图标
  移动设备上的任何图标都可以被个性化。
  怎样个性化

  MeeGo中的图标文件均为SVG矢量文件,被存储在图标文件夹中。因为它们是矢量图像,所以图标可以被任意改变大小来适应相应的布局。图标的名称代表了其相应的应用程序,例如icon-m-messaging-smiley-wink被用于和信息有关的应用程序,icon-m-common-phone则用于和电话有关的应用程序中。
  其他
  要注意背景会影响到图标的显示效果。如果应用程序的命令区域被换成了白色,则现有的白色图标不可见,而且要改变为深的颜色。

  应用程序的背景
  应用程序的背景可以是一张图片,也可以只是背景颜色。主页和锁屏的背景是不同的。
  怎样个性化
  应用程序的背景被存储在图像(Image)文件夹中,被叫做duiapplicationpage-background.png.

  其他
  应用程序的背景在设计时要注意和该应用程序的用户界面相符合。要注意对话框也有背景。

  被选择的状态
  个性化主题的一个简单的方法就是更换其不同状态下的颜色。被选择的状态的颜色在用户界面上的很多地方都可以看到,例如按钮,开关,列表,消息框以及其他的相互元素中。

  怎样个性化
  1.备份svg文件夹
  2.用photoshop等图像编辑软件打开svg文件夹中的svg文件,例如meegotouch-button.svg

  3.进行个性化(要注意不要改变组名称,例如meegotouch-button-background-selected,因为这些名称是被应用软件读取的关键)
  4.保存图像文件为svg文件
  5.进行测试
  6.在svg文件夹中对所有的状态图标进行修改,即重复步骤2-4

  其他
  记住同时还要更新constants.ini文件中的文本颜色。(如果新的主题显示的不完美,则会自动变回基础主题的外观)

  按钮状态的变化
  个性化按钮的变化是改变按钮的外观和使用感觉的一个好方法。
  按钮的变化可以包括:
  1.3D效果的外观
  2.光的效果和光的方向
  3.外观、纹理的感觉
  怎样个性化
  个性化的步骤和改变高亮颜色的步骤相同。应用于按钮,开关以及其他元素的所有状态必须使用相同的规则。
  其他
  文本和背景颜色需要被进行相应的调整。

0
0
标签:MeeGo教程

手机开发热门文章

    手机开发最新文章

      最新新闻

        热门新闻