MeeGo的UI个性化指南

  更换视觉效果的好处

个性化用户体验上的视觉效果是一个可以让一个移动设备具有你的特色的有力手段。个性化UI的基本元素包括:颜色,字体,照片和格式等。有时候只要一个小小的改变就可以让整个设备的使用方式有所变化。

使用不同的视觉外观可以在一定程度上根据不同的用户群体,年龄人口,地理位置和产品分类吸引一定人群。个性化UI可以使你从竞争对手中脱颖而出,吸引你的用户在不同的设备上使用你的程序,并增加对你程序的忠诚度。个性化视觉效果可以让你做到事半功倍,可以说是四两拨千斤那。

MeeGo的主题系统可以说是万能的,它即提供对整体主题的改变,也允许只对整体主题进行局部改变。对程序员来说,根据自己的风格只对基本颜色、字体以及背景等作出一点改变也是有可能的。此外,就算没有复杂的代码,也可以对主题作出最精细的编辑,从而使它焕然一新。

下一节“个性化指南概要”将介绍个性化的好处,以及主题的常用颜色搭配等基本元素。

个性化视觉效果是彻底改变移动设备使用效果的利器!!!

  这一章将主要介绍怎样通过用户界面来

  个性化的主题颜色被应用应用界面上

  颜色

  MeeGo允许人们对颜色进行自定义。MeeGo保留了一些基本颜色作为其主题颜色,使人们在对颜色进行自定义时给予大体的方向指南。
  在这里我们建议大家多使用中型颜色作为个性化的主体颜色,并在适当的地方使用个性化较强的颜色来突出自身的亮点。

  和打印出来的宣传画等东西不一样,在我们个性化MeeGo的用户界面时除了要考虑颜色的数量之外,还要考虑颜色的使用次数。鲜明的颜色最好用于在要突出显示一个控件和界面的时候,例如一个已经被选择了的按钮,或者是消息框等。

  更多关于颜色的介绍请参考“界面个性化基础”。

  字体

  在MeeGo中变换字体和调整字体的大小是非常简单的。更多内容请参考“字体”章节。

  图标

  图标在MeeGo有着重要的作用。图标一般用于在有限的屏幕中向用户提供附加的信息。例如在移动设备中用于启动一个程序的程序图标。

  更多内容请参考“图标”章节。

  Logo

  Logo一般是人们记住一个程序或软件的最重要的元素。对于MeeGo来说,其Logo一般出现于当屏幕处于开关机的状态时,和屏幕锁定和回到主页时。对于硬件厂商来说,其Logo可以贴在其出产的硬件上。

  照片和图像

  照片和图像有时候可以让人们对你个性化的MeeGo系统留以深刻印象。如果一个图像对你的个性化非常有代表性的话,你可以考虑把它作为主背景。更多情况下,主背景可以由与你个性化相关的图形或你的个性化的基本颜色组成的图像组成。更多内容请参考“程序背景”章节。

  有的个性化有其自己的主题模式,例如一个贯穿整个个性化主题的曲线。用户界面是由一套按钮,开关,进程条以及其他元素组成的。个性化的界面应尽量友好、柔和(例如下图)。界面既可以做的非常简单,也可以包含很多元素,但是一定要多而不乱。要实现这一点需要更多努力和对关于界面个性化的更多了解。

  更多内容请参考“高级界面个性化”。

 

  界面个性化基础

  颜色

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

it知识库MeeGo的UI个性化指南,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。