MeeGo的UI个性化指南
界面个性化基础
颜色
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.外观、纹理的感觉
怎样个性化
个性化的步骤和改变高亮颜色的步骤相同。应用于按钮,开关以及其他元素的所有状态必须使用相同的规则。
其他
文本和背景颜色需要被进行相应的调整。