meego手持移动设备的ui设计指导书

n更多企业学院： 中小企业管理全能版183套讲座+89700份资料总经理、高层管理49套讲座+16388份资料中层管理学院46套讲座+6020份资料国学智慧、易经46套讲座人力资源学院56套讲座+27123份资料各阶段员工培训学院77套讲座+ 324份资料员工管理企业学院67套讲座+ 8720份资料工厂生产管理学院52套讲座+ 13920份资料财务管理学院53套讲座+ 17945份资料销售经理学院56套讲座+ 14350份资料销售人员培训学院72套讲座+ 4879份资料1.介绍在这个信息高度发达的新移动时代，人们希望他们的终端设备能包含更多的应用，围绕这个对丰富手机应用的追求，一个新的经济正在发展。以设计法则作为我们的核心信条，他驱使我们的每一个讨论都以设计步骤为基础。 MeeGo的界面可以根据不同的屏幕大小、分辨率和比例来调整，同时还支持肖像和风景模式。 使用这些指南可以帮助你解决在设计和开发MeeGo应用程序上遇到的问题，他们的内容都是“活”的，因此在项目开发的同时他们的内容也会随着增加和改变。 怎样来用这些信息 目标你可以使用这些指南作为设计MeeGo程序的向导，目前他们的内容主要涵盖了交互和视觉设计的部分。视觉设计的指南今后还会有新的版本或手册。这不是真正的说明书这些指南不是用来替代拥有详细技术内容的说明书。相反，它是对MeeGo交互模式的一个大概描述。我们期望真正的说明书不久可以提供给大家下载，它将对每一个开发工具做出详细的描述，并且提出相关的建议。2. UI Model 总揽（概况）锁屏（Lock Screen）当用户第一次唤醒移动设备的时候显示主页（Home）通过按键进入已经打开的应用程序。显示收藏的应用程序，并且可以进入开始键。启动栏（Launcher）进入移动设备中任何可用的应用程序手势和触摸操作的简单介绍符号名字动作用途Tap（轻点）（快速按下并松开）打开物件，选择按钮，连接。插入光标（在文本区域内）显示隐藏的控件使滚动的浏览器等操作停止。Longpress（长按）（按住按键）显示目标菜单切换到全键盘Drag（拖拽）（按住并拖拽到合适位置并松开）平移或滚动内容。在文本区域内选择并改变文本的颜色（此动作需要一开始横向选择，否则将执行平移动作）Flick（快速拖拽）（快速拖拽并松开）快速平移或滚动内容（在某些情况下会显示新的内容，例如观看图片时，从一张图片换到另一张）DoubleTap（双击）（在一定时间内轻点两次）缩放（触摸屏）静音警告（加速器）捏（多点触控的手势）（按下按键，松开）缩放（随着手指在屏幕的相应位置触摸）Two-fingerlong Press（两个手指长按）（按住按键，松开）选择文本（在不可编辑的文本域）锁屏当用户按下电源按键把移动设备从闲置的状态唤醒的时候，该设备的屏幕是锁住的。移动设备的屏幕上会显示墙纸（用户可以自己更换），日期和时间，还有解锁按钮。用户可以通过拖拽屏幕上的解锁按钮到墙纸区域来解锁屏幕。在屏幕锁定的情况下移动设备仍然可以接收消息和通知，他们会以相似的形式叠放在一个通知栏里。启动栏（Launcher） 开始栏是一个包含了显示所有安装在移动设备里的应用程序的链接（图标）的平面。在开始栏里，用户可以浏览每个应用程序，而且还可以向在屏幕下方的快速启动条里添加最多4个应用程序的链接（图标）。在编辑模式下，用户还可以改变这些应用程序的链接（图标）的顺序。 所有的应用程序会以4x4的网格形式显示在启动栏里。在应用程序超过16个的情况下，系统会自动在原页面的右边新建一个相同的页面来放置多余的链接（图标）。用户可以通过把当前页面托下屏幕来完成页面之间的从转换。每当用户安装了新的应用程序时，这个新的应用程序的链接（图标）将会被放在最后面。切换器（Switcher） 很多时候用户会同时运行多个应用程序，例如在听歌的时候写短信等，这既是多任务处理。切换器是管理多任务处理的一块区域。切换器的基本功能如下： 当用户第一次启动一个应用程序时，即开始了一个新的任务。在该应用程序里此任务将会以当前内容的动态缩略图形式显示在切换器中。用户可以通过屏幕左上角的主页按钮（home）选择进入切换器。当第二个应用程序被打开时，这个新的任务就被加入到了切换器当中。在这种情况下，MeeGo可以让用户通过按主页按钮（home）的方式来进行应用程序之间的切换。用户即可以从启动栏中打开应用程序，也可以从一个应用程序中打开另外一个应用程序，例如从email里打开地图或图片。 当用户点击启动栏中之前已经被开启的应用程序时，系统会显示该应用程序，并不会重新启动该应用程序。程序的顺序，浏览方式和不同模式之间的转换 MeeGo中的任务会以它们被打开的先后顺序从左到右显示。每当新的任务被打开时，它就会把之前的任务的面板向左推移，并且在之前的任务右边添加一个缩略图。切换器的默认显示方式是把焦点给到最近用过的任务上，其他的任务一字向右排开排列。缩略图按照任务被打开的时间长短来排列。 用户即可以通过慢慢的拖拽缩略图，也可以通过从列表的一边快速平移到另一边来浏览被开启的任务。在快速切换的时候，用户可以通过轻点屏幕来使其停在被点击的位置，但是该应用程序不会被打开。要打开该应用程序，用户需要点击相应的缩略图。用户可以用多点触控动作让切换器进入总揽模式。使用两个手指同时向内滑动的手势可以让缩略图进入网格显示的界面。该网格最高可以达到3x3的模式，在达到这个最高规格之后，切换器就会开始创建新的页面来显示之前页面未显示的缩略图。核心交互动作（CoreInteractions）UI的反馈（UI Feedback） 直接反馈是指当用户使用触摸UI的时候，用户接收到的该操作的信息反馈。只要有操作，就会得到反馈。间接反馈是指当用户没有使用移动设备时得到的反馈，或接收到的反馈并不是由正在使用的UI所引起的反馈。 直接反馈可以是用户操作后得到的震动反馈，声音反馈或视觉信息反馈。间接反馈则基本上为消息或通知类型的反馈。此消息或通知可以同时包括声音和震动反馈，也可以只是视觉信息反馈，或只包括视觉信息和声音反馈。(但原则上讲也可以只是视觉信息和震动反馈) 一般情况下，当一个移动设备的屏幕被锁定时，用户通常都不是在使用该设备。而你如果要把用户的注意力从别的地方吸引到该设备上时，你可以使用声音和震动类型的反馈，并且再附加上一条视觉信息反馈。但有时候就算用户在使用该设备时，他们的注意力也会在别的地方。比如说如果一个操作需要等待的时间很长，那么用户的注意力也许就会被转移到别处，或者当用户的注意力光集中在移动设备的某些硬件上时（例如键盘），那么在屏幕上发生的事就会被漏掉。还有些时候，在用户做完一个操作就需要马上得到反馈信息的时候（例如用户在发Email时忘了输入“接受者”的时候），只使用一个视觉信息反馈（例如一个消息框）就可以了，因为此时用户的注意力已经在这个设备上了。 在有些情况下，你可以使用声音和震动反馈来强调视觉反馈。例如，有些确认消息可能会在显示的同时还播放一个带有疑问性质的声音，从而来强调用户需要特别注意此操作。然而，在使用声音和震动的同时也需要多注意，因为太频繁的话会让用户感觉很讨厌。你可以只用声音来提示用户，或声音加上视觉信息也是不错的选择，但是最好不要只使用声音和震动。当不确定用户的注意力在不在移动设备上的时候，你可以使用震动反馈来提醒他们。例如，当打开一个网页时用了很长的时间，就算这时候移动设备的屏幕并没被锁住，用户的注意力很可能已经不在该设备上了，这时候你可以使用一个短震动来提醒他们网页已经加载完毕。 短震动可以用来确认用户完成的动作，这时候视觉消息反馈也许就会显得太多余了。例如，给移动设备充电，连接电源线时（或因为插了一个不符合规则的电源线从而导致移动设备并没有开始充电时）。在这些情况下，震动反馈就显得很适用了，因为用户手里正在拿着他们的移动设备。 另外要注意的是，不管是基于声音反馈形式的警告响声，还是基于视觉信息反馈的一条消息，都要看用户当时在用哪种情景模式。例如，在用户正在通话时，该移动设备的铃声也许会有所改变。（有时候会只发出哔哔的声音，有时候会是震动）文本输入Text InputMeeGo即支持普通的物理键盘，也支持虚拟键盘。当用户需要输入文本的时候，虚拟键盘会自动被激活。浏览器的标签栏和状态栏同时也会消失，从而给用户提供出更大的显示空间。MeeGo的虚拟键盘还包括肖像和风景两种模式，当用户旋转移动设备的方向，即从竖立状态转移为水平状态时（或执行相反的动作时），屏幕的整体内容也会很流畅的进行相应的转换。 用户即可以通过轻敲文本输入域的外边，又可以通过把虚拟键盘拖拽到屏幕下方的方式来关闭虚拟键盘。需要注意的是，在以拖拽的方式关闭了虚拟键盘后，用户并不可以再将其从下方拖拽出来。要想重新开启虚拟键盘，用户可以通过再次点击文本输入域来将其激活。只要物理键盘被激活，虚拟键盘就会自动关闭。删除文字每按下退格键（backspace）一次，可以向回删除一个字。长按可以连续向回删除多个字。语言输入语言的选择是自动的，MeeGo会根据用户在第一次开机设置其移动设备时的设置来选择相应的输入语言。用户可以在“设置”里改变当前设置。确认在大多情况下，应用程序都会有一个“确认键”，例如在发信息或登录网站时。另外还有些软件会在用户输入文本时自动进行确认并执行相应的操作，例如在搜索时，MeeGo会在用户输入想要搜索的信息同时自动显示出相应的搜索结果。 然而，MeeGo还有些其它类型的确认方式。在一个只有一条线的文本域下，输入键（enter）会执行确认功能。（例如输入网址或密码时）当然你也可以在该文本域的下方加一个确认按钮，但是我们只建议在需要快速输入信息的时候使用，例如填表。全屏模式 某些应用软件只有在全屏模式下才能让用户感觉到更爽。但是，不要忘了添加一个退出全屏的按钮（适用的情况下最好再加上导航显示）。MeeGo的全屏模式有两种：完全全屏模式：所有的控件（标题栏，状态栏，附加控制栏等）都不可见，输出的显示为最大尺寸内容。用户可以通过触摸屏幕的方式来显示控件。完全全屏模式非常适合于多媒体播放。含有控件的全屏模式：因为有些运行MeeGo的移动设备也许会没有相应的导航按键功能，所以提供一种固定的带有退出功能的按键在进行全屏播放时是很有必要的。在有些情况下，用触摸屏幕的方式显示控件是不可能的，（例如一个含有交互内容的Flash播放器）在这种情况下不管什么时候，用户都需要这种按键来退出或关闭全屏播放。在应用程序的内容中嵌入退出功能在少数的几种特殊情况下，比如说游戏，需要让用户玩的尽可能的尽兴。所以最好在使游戏全屏显示的同时还有一个退出键来使用户退出到另外一个界面，从而显示各项选择按键。3.设计你的应用程序设计技巧:保持简单易用有问题要一个一个的解决，并且一定要解决彻底 要尽量使应用程序简单易用 要尽量使应用程序短小精干，最好做到一键多用，减少不必要的功能 设计程序时最好要遵循从上到下的原则，把重要的内容放在上面 从人体工程学的方面考虑，在设计程序时一定要注意人的手指对操作的影响等关键性问题要注意滚动条的使用 一个好的滚动条可以帮助用户理解应用程序的一部分内容，并会让用户在还没使用滚动条的时候就知道内容里大概包含了什么。尽量只使用滚动条在重复的内容或列表上，不要把重要的内容放在滚动条里默认可见区域的下方，要让用户在不使用滚动条的情况下就看见他们，因为人们有时也许不知道他们需要使用滚动条才能找到他们需要的内容。要保持应用程序和核心内容相一致 如果允许，尽量在你的应用程序中使用MeeGo中的常用组件。这会让用户很快的上手并熟练的使用你的程序。除了在全屏播放下（如视频播放器），每个应用程序的每个界面都需要有“Home”和“Back”按键。要站在用户的角度考虑 当设计程序的时候，要考虑什么因素会是用户放弃使用你的应用程序而去使用其他的应用程序。要为多线程任务处理优化你的程序。要有标志性的特征 尽量让你的应用程序的每个界面即都有特点又意图明确，就算是在切换器（Switcher）里被缩小的图标也是这样。一个应用程序应该有其独特的内容和功能，并在不损失用户使用体验、感觉的情况下尽量提高程序的标志性，即要让用户感觉你的程序耳目一新。要明确你程序的用途 在你开始设计应用程序之前，明确你将要设计的程序的用途是非常重要的。这一点应该是驱使你设计程序的主要目的。同时还要考虑应用程序的重点和用户使用此程序的动机。明确程序的用途还会帮助你完善程序界面和交互的设计。“效率”程序 如果一个应用程序需要频繁的实际操作，例如发短信，那么我们可以归纳这种类型的程序为“效率”程序。这种类型的程序一般都是要求效率第一，不光是程序的任务执行的要好，而且还要快。此类程序要求用户可以在使用该程序时得到快速响应，并且程序要简单易用。此类程序最好使用简单的“向下排列模式”界面，并带有一个简单的工具条。 因此，这类程序的UI大多是由常用组件来组成的，越简单越好。简单的界面并不意味着用户不能达到其使用初衷。程序的使用投入感 还有些应用程序比较偏向于娱乐或需要丰富的视觉效果体验，例如播放视频或玩游戏等，在这些情况下经常会用到全屏功能。在用户切换到新的视觉环境下，控制MeeGo行为的核心UI可以让用户得心应手的使用该程序，但有时候自定义布局或组件却会给用户提供更好的使用体验。 游戏是这种类型程序的典型代表。当用户启动一个游戏的时候他们也期待将会进入一个“新的世界”。不管这个游戏有着简单还是复杂的结构，其内容，控制和交互都是由设计者来设计完成的。有些时候，这并不能让用户使用的得心应手。因此，如果提供一些简单的可以让用户自定义的功能则会大大提高用户的使用体验。程序的基本界面 应用程序有时会有多种显示方式（例如全屏显示，表格显示等），但是大多数的显示方式都遵循着一个基本结构。状态栏 状态栏的主要用途有显示手机、网络等的信号强弱，电池电量以及消息信息等。在某些情况下，应用程序可以不含有状态栏。标题栏 标题栏包含了主屏按钮，标题，视图菜单以及关闭和还原按钮。每个界面的标题栏都有其相对应的标题。换句话说，在多数情况下标题栏是根据用户进入到不同界面时随时更新的。此外，在某些情况下，应用程序可以不含有标题栏。内容区域 内容区域是程序执行大多数动作时以及程序结构发生变化的显示区域。内容区域可以包含方向选择，文本和多媒体等内容。程序的这些动作不仅局限于使用视图菜单和工具栏，他们有时会和程序内容一起显示。其他类型的动作，例如多媒体控制按钮，则总是和程序的内容在一起显示。具体请参考“常见组件”的内容。工具栏 工具栏是在用户需要使用应用程序时，可以控制该程序核心命令的一个可选的固定工具条。工具栏同样也可用于方向控制，但最多只限于4个动作。在风景模式下（即把设备水平放置），工具栏在屏幕上方显示，和标题栏一起。虽然即可以在工具栏中使用图标，也可以使用文字（但两者不可同时使用），但趋于移动设备屏幕的局限性，一般使用图标的效果比文字要好。布局的建议 就像在本篇前面提到的“要明确你程序的用途”中说的一样，在设计应用程序的时候不仅要考虑到怎么去设计，还要注重程序的布局，因为布局会极大程度的影响用户使用应用程序的操作感。例如列表方式的布局非常适合于需要显示目录类（多个文件或多项任务）的程序。 虽然导航方式可以帮助组织应用程序的结构布局，但是他们却不管应用程序怎么显示这个布局。“向下排列模式”就是个很好的例子。这种模式可以应用于很多应用程序中，例如电话本和图片浏览器等。他可以显示不同类型的内容，因此很常用。 在这里我们给出大家两种显示图片的选择（见下图），他们都采用“向下排列模式”作为他们的导航方式。应用程序不显示长列表，只用缩略图作为提供主要信息的手段。这种向下排列的方式和在程序首页提供通向最新添加或最近访问的文件的快速通道，有助于用户更加方便的使用该应用程序，从而提高使用效果。 设计的时候要考虑到程序内容的不同种类以及其结构的复杂性，还有移动设备屏幕的实际尺寸。肖像模式（垂直状态） VS. 风景模式（水平状态） 应用程序的视图界面要适应移动设备不同的方位状态（垂直或水平）。风景模式（即把设备水平放置）比较适合于观看视频播放，而肖像模式（即把设备垂直放置）则比较适用于如电话本之类需要往下滚动显示多条信息的程序。 MeeGo对以上两种模式均提供相应的常用组件。换言之，使用这些常用组件可以减少程序设计者在界面设计上的很多工作。不管怎样，我们建议程序员在设计程序时对组件的任何修改都要注释出来，因为有些修改会影响程序的使用效果。 MeeGo中默认的组件是可以被修改过后的组件所覆盖的。我们建议所有的应用程序最好都要有肖像和风景两种模式。这主要是因为使用MeeGo的移动设备有着不同的硬件类型。例如在有侧滑键盘的移动设备中，风景模式是至关重要的，其他硬件类型的设备以此类推。因此用户不应该因为要使用某种程序而强制把移动设备垂直放置或平放。但玩游戏是少数例外中的一个，因为大多情况下玩游戏是要根据不同类型的游戏来选择设备的方位状态的。 程序的视图界面应根据移动设备的方位状态来进行缩放或重新布局，从而来适应当前屏幕。1栏VS2栏列表可能是最常用的UI布局了。列表根据移动设备不同的方位状态也有着不同的动作。 肖像模式可以显示更多的列表信息，风景模式可以显示一条信息中更多内容。所以对于文本显示来说，风景模式更为有用。 在使用风景模式时，有些应用程序会把屏幕一分为二，使视图界面形成两列，这样做可以非常合理的使用移动设备中有限的显示空间。分屏一般都是当显示的内容没有按一定的排列顺序排列时才被使用，一般都是在第一级的向下排列模式的页面。但是，当显示的内容按照一定规则排列的时候最好不要用分屏。（例如按日期排列或A-Z排列等） 按钮应该被集中在一起（在分屏时尤为重要），并且宽度在两种方位模式下都要相同于屏幕宽度。设置 应该每时每刻都考虑到应用程序的设置。用户通过程序中的视图菜单进入设置选项。在设置的视图界面中，应该包括Home，Back和标签。（视图菜单不是必须的） 在某些情况下，提供一个应用程序中常用设置的快速通道会给用户带来方便。这些快速通道可以是一个应用程序相应全局设置的子设置界面。例如，要在一个Email程序的子视图界面下设置账户，通过普通的方法用户需要一步步的进入到账户的设置菜单。如果提供一个账户设置的快捷栏则会方便很多。但是这样就会使界面的导航发生变化。例如用户通过快捷栏进入到一个设置的子设置界面时，“Back”按钮只会将视图界面返回到打开这个子设置界面之前的界面，并不是这个设置的最上级界面。 在设置的视图界面中，把有着相近或连带关系的几个设置分组放在一起会帮助用户更方便的找到他们所需要的设置。每个组可以包括多项项目，例如文本，图像和按钮等。 如果用户可以从UI直接进行某些设置，则不要将这些设置放在设置的视图界面中。例如如果用户可以从桌面的时钟上直接设置闹表的话，则不要将闹表的设置放到时钟的设置的界面中。注意当用户完成了一项设置时，该设置应该立即生效，没有保存设置的需要。你可以使用视图菜单中的撤销按钮取消任何已经完成的设置，或将设置恢复成初始状态。撤销按钮只在设置被改变之后才出现。应用程序的导向 应用程序有时会有多种导向形式。MeeGo提供了3中模板来帮助应用程序实现其主要功能。向下排列模板： 这是用的最多的一种模板，用于进入所有导向位置在顶部的应用程序。布局不仅局限于列表形式。当用户向下观看内容时，关闭按钮被取代为返回（Back）按钮。视图菜单中的导向模板： 这个模板也是平时经常会用到的，其原理为按照导向结构来对程序的内容进行优先化。视图菜单用于在导向选项之间选择转换。和标签条（见下面）正相反，这种转换可以用于多项选项之间。因为所有的导向点都在应用程序的顶部，所以就算导向被改变了，关闭按钮仍在。要注意的是就算是在一个视图菜单中，导向模板中的过滤器的功能也是不同的。过滤器和向下排列模板相似，关闭按钮会被返回按钮所代替，例如，在几个信息账号之间切换。标签条模板： 这个模板用于快速进入不同的区域或模式。要注意在标签条中和导向连接有关的混合动作（如“写信息”）。在这种布局下如需要的话，要尽量使用程序内容区域中的按钮来进行操作。这个模板最多只能有4个导向选项，而且不能随时间而变化。4.皮肤 MeeGo提供了多种皮肤共程序设计人员选择，其中即包括对系统整体皮肤的改变，也允许人们在不改变整体的情况下依据自己喜好来进行个性化设置。设计人员只需花很少的时间对一些基本元素，如颜色、形状和背景等进行设置即可得到一个完美的UI。此外，制作MeeGo的皮肤非常简单，程序设计人员无需使用大量的代码即可制作出一个完全新的皮肤来。更多关于“皮肤”的信息即将推出视觉效果的个性化更换视觉效果的好处：个性化用户体验上的视觉效果是一个可以让一个移动设备具有你的特色的有力手段。个性化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_INVERTED_FOREGROUND (白色)状态：当按钮被按下时的颜色（只会显示一小段时间）按钮图形文本颜色：COLOR_FOREGROUND (黑色)状态：当按钮被选择时的颜色状态。字体字体和大小是可以自定义的。怎样个性化文件中使用的字体可以在constants.ini文档中进行更改。可更改的内容包括字体名字和大小。字体必须只有被安装后才能被使用。其他文本的大小可以不变，但是在使用一些新的字体的时候要注意该字体的大小是否合适。图标移动设备上的任何图标都可以被个性化。怎样个性化MeeGo中的图标文件均为SVG矢量文件，被存储在图标文件夹中。因为它们是矢量图像，所以图标可以被任意改变大小来适应相应的布局。图标的名称代表了其相应的应用程序，例如icon-m-messaging-smiley-wink被用于和信息有关的应用程序，icon-m-common-phone则用于和电话有关的应用程序中。其他要注意背景会影响到图标的显示效果。如果应用程序的命令区域被换成了白色，则现有的白色图标不可见，而且要改变为深的颜色。应用程序的背景应用程序的背景可以是一张图片，也可以只是背景颜色。主页和锁屏的背景是不同的。怎样个性化应用程序的背景被存储在图像（Image）文件夹中，被叫做duiapplicationpage-background.png. 其他应用程序的背景在设计时要注意和该应用程序的用户界面相符合。要注意对话框也有背景。被选择的状态个性化主题的一个简单的方法就是更换其不同状态下的颜色。被选择的状态的颜色在用户界面上的很多地方都可以看到，例如按钮，开关，列表，消息框以及其他的相互元素中。按钮状态的变化个性化按钮的变化是改变按钮的外观和使用感觉的一个好方法。按钮的变化可以包括：1.3D效果的外观2.光的效果和光的方向3.外观、纹理的感觉怎样个性化个性化的步骤和改变高亮颜色的步骤相同。应用于按钮，开关以及其他元素的所有状态必须使用相同的规则。其他文本和背景颜色需要被进行相应的调整。5.常用组件 MeeGo的设计理念是“手指运动”，并且可以适应各种不同的屏幕尺寸和分辨率。例如，如果一个MeeGo中的常用组件有8mm高，那么不管屏幕的尺寸和分辨率如何，这个组件从始至终都会是8mm高。每个常用组件的大小和最终规格将会在今后的说明文档中详细解释。常用组件说明按钮按钮可以用于起始一个动作，例如在电话本中选中一个电话。按钮上面可以添加文本标签用以说明按钮的用途。按钮的排列方式有左对齐，右对齐和居中。开关开关可以用于设置功能或函数的开关。可以在开关旁边添加文本标签用以说明。开关上不能添加链接。开关在一个列表中只能用于一个功能或函数。如果在操作开关时需要执行一些动作时，那么这些动作应该在该开关旁列出来，用以说明。复选框复选框可以用于对多项信息的选择。在复选框旁应该有注释说明其用途。用户可以使用单击对复选框进行操作。图标按钮图标按钮由图标（必选）和文本标签（可选）组成。和按钮不一样，图标按钮没有普通按钮式的边框，所以他们看起来更像是个图标。例如工具条里的图标按钮。滑杆滑杆可以用于连续性的设置值，如调节音量。可以为滑杆定义文本标签用以说明滑杆的用途。可以定义用滑杆设置值的缩略图（当滑杆被滑动的时候显示）。最大值和最小值是可选的。 播放进度条播放进度条时一种特殊的滑杆，用于显示多媒体等播放的进度。滑杆的前进速度是可定义的。最大值和最小值的显示是可选的。进度条 已知周期用进度条来指出动作的状态，例如在有足够空间以及过程持续时间已知时的上载和下载。进度条可以被放在其他UI组件的最上层。（即先于其他任何UI组件显示）当一个过程大于2秒时，建议使用进度条。进度条 未知周期当在不知道一个过程的持续周期下，进度条会暂时处在“未知周期”的形式下，直到该持续时间已知为止。不要将此进度条用于自动升级中。此进度条有两种外观，“螺旋器外观”和“普通外观”。要避免在同一个视图界面中同时用到这两种外观。进度条 - 螺旋器外观当可用空间有限并且持续周围未知的情况下，可以将螺旋器外观的进度条用于扫描或刷新等动作。当可用空间极其有限的情况下也可使用螺旋器外观的进度条。螺旋器外观的进度条可以被放在对话框、容器或视图菜单中其他UI组件的最上层。（即先于其他任何UI组件显示）单选对话框该对话框用于快速接收用户的回应信息。当该对话框出现时，其后面的背景变暗并被锁住，从而焦点集中在该对话框上。和消息框不一样，只要用户不点选关闭，该对话框将不会从UI上自动消失。要尽量保持对话框中的文本信息少而精。询问对话框“询问对话框”和“单选对话框”之间的不同之处是“询问对话框”需要用户必须在两个选择之间选择其中一个。询问对话框可以用于像删除文件和从错误中恢复等任何重要性的操作。如果询问对话框中包含多个按钮，比如说有两个按钮，一个为“确认按钮”，一个为“取消按钮”。为了保持对话框从左到右，从上到下的风格习惯，最好把“确认按钮”作为第一个按钮，“取消按钮”放到最后。多功能对话框多功能对话框是普通询问对话框的高级模式，可以用于获取对话框中显示的图片或警告图标的反馈信息。这种对话框要求用户在进入到下一界面之前要进行相应的动作。列表列表可以说成是一个垂直显示的容器，而且是最常用的一种UI。在不知道要显示的内容有多少的情况下，通常可以考虑使用列表。当列表显示时，其内容的数目也是可以改变的。如果当列表中显示的内容超出了当前视图界面，列表会自动平移。有时候在列表中会用到列表分隔线。列表分隔线可以把一个长列表分开，从而提高可读性。对象菜单对象菜单是用户可以对对象进行操作的含有一系列相关动作的列表。虽然对象菜单具有可扩展性，但是不要在里面放超过8个动作，从而避免菜单的平移。注意当用户安装其他含有插件的应用程序时，对象菜单中也许会加入新的菜单选项。工具栏/导航栏工具栏用于对当前正在获得焦点的内容执行动作。在风景模式（即把移动设备水平放置）下，工具栏固定在UI的上方。在肖像模式（即把移动设备垂直放置）下，工具栏固定在UI的下方。要不在工具栏中放太多的命令，以2到4个重要的命令为佳。导航动作经常被放在工具栏的右端。视图菜单视图菜单由包含了当前视图（或应用程序）相关命令的列表组成。该列表在长度上没有限制，如果里面的内容超过了屏幕尺寸则用户可以通过滚动条来继续向下查看内容。但是要注意不要在视图菜单里面放置太多的内容。消息框消息框有两种，即“无交互消息框”和“交互消息框”。在不能在当前UI上面显示消息的情况下，可以使用“无交互消息框”。当需要用户在看到消息后进行一定操作时（如通知错误和例外时），可以使用“交互消息框”。组合框开放式组合框由子按钮控件和对话框组成。组合框继承了单选对话框的属性和交互动作。例如，如果组合框的高大于屏幕尺寸，则组合框会平移并显示一个位置指示器。封闭式组合框有三种不同的布局。6.Use FlowsSubmitted by on 9 July, 2010 - 02:34 Certain key aspects of the use flows, such as background image, can be customized easily by changing the contents or parameters of specific configuration packages. The sections below will provide detailed information on the customizable parts of the use flows.Lock screen and unlock sequenceThe lock screen is shown when the user wakes the device from the idle state. The lock screen offers two alternatives: Date/time at the top and unlock mechanism at the bottom Date/time and unlock mechanism at the top Date and time are placed at the top with possible notifications displayed above them. The unlock sequence is placed at the bottom of the screen.The unlocking is done by moving the lock icon upwards to the drop area.Date and time are placed at the top with possible notifications displayed above them. The unlock sequence is placed at the top of the screen. The unlocking is done by moving the lock icon downwards to the drop area.How to customize1. Select the position of the lock (top/bottom) and base your customization on this alternative. 2. The lock screen button and drop area states are in the meegotouch-lockscreen.svg file. Update the colors, lock-button style, and transparency to your liking. 3. The background in lock screen is the same in all the home and lock views. It can be zoomed and cropped differently to portrait and landscape. The default background is defined in the home application configuration file. 4. The lock application related CS style file can be modified for more extensive changes. Home/Switcher screenThe home screen can have two different default layouts, a carousel, or a grid. Each one has its own set of customizable parameters.The general customizable options are how running applications are presented, their relative location, and the theme.The theme related parameters are found in the home application CSS file. The CSS has some common parameters for all the views (switcher views and launcher). For example, the page flip transition and the page indicator can be customized.CarouselThe carousel view displays the running applications in a carousel-like format. Switching between applications is done by panning the applications and selecting the one you want to use. Users can move from carousel view to grid view by zooming out.Theme customizingCarousel can be customized through the theme. The size of the cards, how much they overlap, how much the cards zoom, and even transition speed and rotation can be modified. The switcher style is accessible through the home application CSS file.The background is the same as in the lock and other home views. However, the switcher views have a blur and darkening effect to highlight the cards better. The opacity of the darkening can be customized.There are two different carousel switcher views.GridIn grid view, the running applications are displayed in a grid. There are several grid view pages if there are more running applications than can fit on the screen. Users can move from grid to carousel view by zooming in.Theme customizingThe grid, also called switcher overview, can be customized through theme. The amount of rows and columns can be changed, as well as the spacing between the cards. The page indicator is the same as in the carousel view. The parameters are found in the same home application CSS file as the other home views.Different grid views.LauncherThe launcher features all the applications available on the device.Customization options start with the theme and icon graphics. The default set of applications can also be customized, as well as the arrangement of icons. All of this provides tools to guide the end user to the most important applications and solutions. Further customization options