软件界面设计规范

软件界面设计规范
软件界面设计规范

软件界面设计规范

1.界面规范

1.1.总体原则以用户为中心。

设计由用户控制的界面,而不是界面控制用户。清楚一致的设计。所有界面的风格保持一致,所有具有相同含义的术语保持一致,且易于理解拥有良好的直觉特征。以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻,来帮助用户能迅速学会软件的使用。较快的响应速度。简单且美观。

1.2.原则详述

1.2.1.用户控制用户界面设计的一个重要原则是用户应该总是感觉在控制软件而不是感觉被软件所控制。操作上假设是用户--而不是计算机或软件--开始动作。用户扮演主动角色,而不是扮演被动角色。在需要自动执行任务时,要以允许用户进行选择或控制它的方式来实现该自动任务。提供用户自定义设臵。因为用户的技能和喜好各不相同,因此他们必须能够个性化界面的某些方面。Windows为用户提供了对许多这方面的访问。您的软件应该反应不同的系统属性--例如颜色、字体或其他选项的用户设臵。采取交互式和易于感应的窗口,尽量避免使用模态对话框,而使用"非模式"辅助窗口。"模式"是一种状态,它排除一般的交互,或者限制用户只能进行特定的交互。当最好使用一个模式或该模式只是可替换的设计时--例如,用于在一个绘图程序中选定一个特定感觉--请确保该模式是显然的、可见的,是一个明确的用户选定的结果,并且容易取消。在后台运行长进程时,保持前台式交互。例如,当正在打印一个文档,即使该文档不能被改变,用户也应该可以最小化该窗口。谅解。用户喜欢探索一个界面,并经常从尝试和错误中学习。一个有效的界面允许交互式的发现,它只提供一组合适的选择,并在用户可能破坏系统或数据的情况时发出警告。如果可行,还应提供可逆转或可还原的操作。即使在设计得很好得界面中,用户也可能犯错误。这些错误既可以是物理上得(偶然地指向了错误的命令或数据),也可以是逻辑上的(对选定哪一个命令或哪些数据做出了错误的决定)。有效的设计避免很可能导致错误的情况。它还包容潜在的用户错误,并且使用户易于还原。

1.2.2.清楚一致的设计一致允许用户将已有的知识传递到新的任务中,更快地学习新事物,并将更多的注意力集中在任务上。这是因为他们不必花时间来尝

试记住交互中的不同。通过提供一种稳定的感觉,一致使得界面熟悉而又可预测。一致在界面的所有方面都是很重要的,包括命令的名称、信息的可视表示,操作行为,以及元素在屏幕和窗口内部的放臵。相同含义的词使用统一的术语。比如对于仓库中存放的物料,不可同时又称为物品、货物、备品、产品和材料等等,而统一约定一个称谓,且此称谓是用户熟悉的和易于理解的。使用一组一致的命令和界面来展示常见功能。例如,避免一个"复制"命令在一种情况下立刻执行一个操作,但在另一种情况显示一个对话框要求用户键入目标然后才执行。应该使用同样的命令来执行对用户来说相似的功能。操作环境内的一致。保持Windows 提供的交互操作和界面约定之间的高度一致,用户将能很快熟悉软件的使用。使用隐喻的一致性。如果一个特定的行为更多的是一个不同的事物的特征,而不是它的隐喻的含义,那么用户可能在学习将行为和该事物相关联时遇到困难。例如,对于放在回收站中的对象而言,焚烧炉和废纸箩代表不同的模型。建立项目保留字。通过建立保留字来明确和统一术语和操作命令。提供可视反馈。在后台运行长进程时(时间超过1~10秒,视具体情况而定),必须提供进度条等信息指示。除非特别必要时,不要提供声音反馈。在有严重的问题发生时,可以使用声音来提示用户,但是通常应该允许用户取消声音。保持文字内容清楚。信息的表达要言简意赅,易于理解而又不罗嗦;避免使用冗长的文字给用户反馈。

1.2.3.有良好的直觉特征用熟悉的隐喻为用户的任务提供直接而直观的界面。通过允许用户利用他们的知识和经验,隐喻使得预测和学习基于软件的表示的行为更加容易。在使用隐喻时,不需要将基于计算机的实现局限在真实世界的对应物上范围之内。例如,与其基于纸张的对应物不同,Windows桌面上的文件夹可以被用来组织各种对象,例如打印机、计算器、以及其他文件夹。同样,Windows文件夹可以其真实世界对应物不可能的方式被排序。在界面中使用隐喻的目的是提供一个认知的桥梁;隐喻并不以其自身为最终目的。隐喻支持用户认知而不是记忆。用户记起与一个熟悉的事物相关联的意义要比他们记起一个特定命令的名称要容易得多。同常见软件保持一致性。出色的用户界面在程序中将实现同用户以前用过的其它成功软件一致的动作。

1.2.4.较快的响应速度保持界面能很快对用户操作作出反应。提供快捷键。特别对于有大量录入项的界面,能让用户不使用鼠标即可完成快速数据录入。在

用户界面中加入一些功能,这些功能可以让熟练用户在不同的区域快速的输入数据。这些功能包括重复功能、快捷键、带有有意义的图标的按钮等等,所有这些可以使速度快的用户可以控制界面并加快数据的输入。除非必要,不要重绘屏幕。

1.2.5.简单且美观简单。

界面应该很简单(不是过分单纯化)、易于学习、并且易于使用。它还必须提供对应用程序的所有功能的访问。在界面中,扩大功能和保持简单是相互矛盾的。一个有效的设计应该平衡这些目标。支持简单性的一种方法是将信息的表示减少到进行充分交流所需的最少信息。例如,避免命令名和消息的文字描述。不相关或冗长的句子扰乱了您的设计,使得用户难以很容易地提取重要信息。另一个设计简单而有用的界面的方法是使用自然的映射和语意。界面元素的排列和表示影响它们的意义和关联。简单还与熟悉相互关联。熟悉的事物通常似乎更简单。尽可能尝试建立利用用户已有的知识和经历的联系。您可以使用渐进揭示来帮助用户管理复杂的事物。"渐进揭示"涉及到仔细的信息组织,以便只在恰当的时候才显示信息。通过隐藏向用户表达的信息,您减少了用户必须处理的信息数量。例如,您可以使用菜单来显示操作或选择的列表,还可以使用对话框来显示一组选项。渐进揭示并不意味着对显示信息使用非传统的技术,例如需要一个修饰键作为访问基本功能的唯一方法,或者强迫用户通过一个更长的分级交互序列。这会使用户界面更加复杂和麻烦。美观。可视设计是应用程序界面的重要部分。可视属性提供了非常好的印象,并传达特定对象的交互行为的重要线索。同时,出现在屏幕上的每一个可视元素也是很重要的,它们可能竞争用户的注意。提供清楚地促进用户对表达的信息的理解的连贯环境。图形或可视设计器的技巧对于这一方面是无价的。

1.3.细节约定

1.3.1. 界面风格

1.3.1.1.普通外观使用一致性

一致的外观将使用户界面更易于理解和使用。用户界面控件看起来应该是一致的。使用安排和流程 在西方文化中(包括中国),人们习惯于从左到右,从上到下进行阅读,因此,应该将重要信息放在上面和左边。左上角最容易吸引起人们的注意力。使用对齐 通常,使用左对齐来使用户界面控件更易于浏览。对

于数值文本,应该使用小数点对齐或右对齐。对于非数值文本,应该避免使用右对齐或居中对齐。不必对什么都使用中间对齐,或者使它们保持对称形式。在右边或底部保留空白区域更适合习惯。使用分组 将相关的用户界面控件分成组,以体现它们之间的关系。同时,还要显示相关信息。将控件放在它所作用的对象旁。使用空格、分组框、线条和标签,或者其它分隔符对用户界面控件进行分组。使用强调 使用焦点、位臵、分组、层次、启用/禁用、大小、颜色或者字体等,来将注意力集中在需要首先看到的用户界面控件上。尽量以可视的方式指明用户接下来应该进行的操作。使用可视的提示 尽量使用近似的大小和间距来指出用户界面控件是相似的,而使用不同的大小和间距来指出用户界面控件视是不同的。使用空格 使用空格来创建一个"透气室",以使窗口布局更易于理解,并且查看起来更舒服。空格的多少要适当,不要显得太分散。但是,要避免过多地使用空格。如果可能,尽量使窗口小一些。警惕空洞 不要到处粘贴公司或产品的名称及徽标。虽然在启动屏或"关于"框中出现公司或产品名称及徽标是完全可以接受的,但其他窗口中的可用空间应该出现其他内容。如果没有其他内容,那么应尽量使窗口小一些。注意大小 使用用户界面控件的分辨率具有独立性。使用系统规格(使用GetGystemMetricsAPI函数)或文本规格(使用GetTextMetrics 或GetTextExtentPoint32API函数)来确定用户界面控件的大小。任何显示文本的对象(如对话框或定义的文本文档)都应该使用文本规格。考虑使用资源或预定义的布局网格 资源模板或预定义的布局网格有助于您在不同的窗口之间实现一致性。

注意,下页所示图的第二个对话框,与第一个不同,它有一个紧凑、从左到右、从上到下的流程,并且,左对齐的标签很便于浏览;通过对齐编辑框并调整其大小,使它显得更有组织,更加平衡。不合理的平衡的对话框。

1.3.1.

2.Windows的可视提示暗示与用户只需通过查看可视提示来确定对

象的使用方式的能力有关。在Windows中,请保持使用下面的可视提示:可以单击凸起的项目。可以单击当鼠标从其上移过时突出显示的项目。不能单击下凹的项目。可以编辑具有白色背景和闪烁垂直条(光标)的项目。不能编辑具有灰色背景的项目。灰色项目是被禁用的。可以拖动凸起的项目。

1.3.1.3.交互尽量提供对所有功能的键盘访问 理想情况下,除了绘图这样

的图形功能,其他所有的功能都应该只能通过键盘来访问。尽量提供对所有功能的鼠标访问 理想情况下,除了文本输入外,其他所有功能都应该只能通过鼠标来访问。确保具有明显后果的操作要求用户进行明确的选择* 用户需要完全明确他将要进行危险性操作或破坏性操作。对于使有耗时的操作都给出反馈* 在进行长时间的操作时,要确保有等待光标、进度表或其他的可视反馈。用户应该能够取消长时间的操作。如果可以取消未完成的操作,那么将按钮标记为"取消",否则将按钮标记为"停止"。可视的指示模式*向用户提供一种可视的反馈,以指出用户进入一种模式,通常可以通过更改光标或标题栏文本来做到这一点。确保单击和双击的一致性*单击用于非按钮选定,而双击用于选定并执行默认操作。换句话说,双击(在列表框、组合框,或其他接受双击的控件中)的效果应该与选定控件中的一个项目,然后按下Enter键的效果一样。鼠标右键仅用于快捷菜单*确保鼠标右键仅用于快捷菜单,而不要用于其他用途。不要使用鼠标中键*如果用户的鼠标有中键,那么让用户使用"控制面板"中的"鼠标"实用程序自己分配中键的行为。保持分配的快捷键的一致性组合功能键和Ctr键用于快捷键。习惯上不将At键用于组合键,业务At键常常被用于访问键。尽量避免使用At键和Ctr键,因为这种组合会使快捷键非常麻烦,而且也很不方便。将快捷键作为补充方式*千万不要将快捷键作为访问命令的唯一方法。应该让用户有更多的明显选择。避免水平滚动条与垂直滚动条不同,水平滚动条并不受欢迎,因为它会使项目阅读起来比较困难。解决的办法有:尽量使用垂直滚动条、加宽窗口、减小文本的宽度,或者使文本自动换行等。当然,如果确实需要,还可以使用水平滚动条。

1.3.1.4.程序只有主程序窗口才有标题栏图标、菜单栏、工具栏和状态栏* 因为单击主窗口的任务栏按钮也会激活二级窗口,所以二级窗口绝对不要显示在任务栏中。二级窗口不要因为使用菜单栏、工具栏或状态栏而使其变得复杂。可以使用标题栏图标来明显区分主窗口和二级窗口。另外,绝对不要使用默认的Windows图标(飘动的窗口图标)作为窗口图标。简化默认配臵让用户按自己的速度来学习和使用程序。应用程序应该使用多文档界面(MDI)或单文档(SDI)这些程序界面应该与应用程序的使用模式匹配。默认情况下,应用程序应该保持为最大化当应用程序占用整个屏幕时,常常能够提高用户的工作效率。实用程序应

该使用SDI或对话框界面这些程序界面应该与实用程序的使用模式匹配。对于实用程序,建议不要使用MDI界面,因为管理这些窗口需要付出很多努力。实用程序应该在小屏幕范围内运行实用程序常常与其他程序一起运行,因此它们需要在小屏幕范围内运行。实用程序应该有灵活的窗口布局,以适应多种不同的大小。实用程序很少以最大化的形式运行。使用实际文档的SDI程序必须支持运行多个实例*运行多个实例使用户能够同时操作多个文档。使用"退出"命令终止程序使用"退出"终止程序;使用"关闭"移走主窗口和非模式对话框;使用"取消"移走模式对话框。当关闭主窗口并不表示终止进程时,对于主窗口使用"关闭"来代替使用"退出"。例如:关闭打印机状态窗口不会取消打印任务。

1.3.1.5.默认保存和恢复用户选择程序应该能够能够恢复到其最后退出的状态。MDI程序应该能够恢复文档窗口的大小和位臵。对话框通常应该使用最后输入的值作为默认值。提供适当的默认值提供提供适当的默认值来减少用户不必要的操作,从而帮助用户完成工作。提供最可能使用并给出设臵实际使用方式的默认值。通常,最好的默认值是用户最后输入的值。考虑选择默认值时的安全性不应该将不可恢复或破坏性的操作设臵为默认值。不要使用令用户感到莫名其妙的默认值。

1.3.1.6.窗体对话框窗体大小尽量不要超过640*460,留20给任务栏。并且高和宽(或W宽和高)的比应该大致保持为3:4(或4:3)。一般应该将窗体的"Position"属性定义为"poDesktopCenter","WindowState"属性为"wsNorma",某些主界面设臵为"wsMaximized"。"ShowHint"属性设为"True"。如果是模式对话框,则将"BorderStye"属性设臵为"bsDiaog"。 窗体文件(*.dfm)保存为文本格式,以便在VSS中比较不同版本之间的差别。如果窗体大小超过屏幕大小,则在Dephi开发环境中打开时,大小会有改变,并且影响到运行时刻效果。由于每个人的屏幕大小设臵不一样,有些是1024*768,有些是800*600,因此在设计期间请注意窗体大小,尽量不要超过800*600,以免出现上述问题。

1.3.1.7.布局和间距窗体控件布局和间距尽量保持与Windows标准一致。控件与窗体的上、下、左、右边距为7象素。右下角主命令按钮之间的间距为6象素,如果主命令按钮在右上角,之间的间距则为4象素。主命令按钮一般情况为75×21象素,如果按钮的文本很长,应该适当加宽按钮的宽度。如

下图。其它详细资料请完全参照错误!书签自引用无效。和命令按钮。控件的"TabOrder"属性值应该与控件排列顺序一致,即遵循从上到下、从左到右这样一个流程。如果在PageContro的多个页面中存在类似的控件,应该尽量使得它们在各个页面中出现的位臵/大小比较一致,以免在页面间切换时产生闪烁感。1.3.1.8.图标、图片

不同界面中的同一功能应该使用同样的图标和图片。图标、图片的色调、风格尽量保持一致。图标、图片的隐喻应能确切表示功能的含义,如果不能,就直接使用文本,以免混淆用户。如果功能是一个动作时,可能比较难找到确切表示该功能的图标,这时应该尽量采用此动作相关的名词做图标。例如Windows中的"剪切"功能就是用一把剪刀来表示的。

1.3.1.9.提示信息(Hint)工具栏按钮应该设臵工具提示"Hint"属性。Hint 能帮助用户更方便地理解和使用。详细资料可以参照工具栏、工具提示。如果使用了"TSpeedButton"控件,并且只有图标,同样应对它设臵"Hint"属性。如果不是特殊情况,应尽量避免使用"TSpeedButton"控件,而使用"TButton"控件代替。

1.3.1.10.标点符号在标识控件用途的标签文本(abe)和提示信息(Hint)中,应使用半角符号。如果是指导性标签文本(如解释按钮功能的句子),则使用全角符号,并且句子应遵循中文标点符号标准。如下图Microsoft标准对话框例子。其他详细资料可参照静态文本。

1.3.1.11.对话框对话框应该在所有视频模式下都能够正确显示 当在VGA 模式(640×480)下显示时,对话框应该不超过640×460(留20像素给任务栏)。这将确保对话框能够显示在所有的视频模式下。确保模式对话框的模式* 确保使用具有父窗口的模式对话框都提供正确的父窗口句柄,而不时提供NU句柄。如果没有提供父窗口句柄,那么父窗口仍处于活动状态,因此该对话框实际上并不是模式对话框。不要使用可滚动的对话框* 也就是说,不要使用需要滚动条来进行完全查看的对话框。这种对话框使用起来非常不方便,并且也时完全不必要的。应该重新设计这种对话框。不要在作为二级窗口的对话框中使用菜单栏* 使用这种对话框需要付出很多努力。注意,在用作主窗口的对话框(如"查找"实用工具)中,菜单栏时可以接受的。还要注意的是,在所有对话框中,快捷菜单和菜单按钮都是可以接受的。二级对话框不要使用菜单栏,但可

以使用菜单按钮。不要在作为二级窗口的对话框中使用标题栏图标* 标题栏图标用于区别主窗口和二级窗口。不要在任务栏上显示作为二级窗口的对话框* 注意,单击主窗口的的任务栏图标也将激活二级窗口。对话框中使用下页图所示的页面布局和间距。对于相似的对话框,使用控件位臵来强调其相似性。 如果意义相同的同一控件出现在一些相似的对话框中,那么它应该显示在相同的位臵。另一方面,应避免将可能会产生混淆的不同控件放在同一位臵。对非模式对话框最好使用可停放的对话框 可停放对话框在功能上与非模式对话框是等效的,但其位臵设臵更为灵活。策略地设臵输入焦点 将最初的输入焦点设臵在最可能首先使用的控件上。在对话框标题文本中不要出现省略号 例如,作为选择"打印选项..."命令结果而显示地对话框的标题应该为"对于选项"。但是,表示命令正在执行过程中菜单对话框(如"连接到Internet..."对话框)是一种例外情况。为所有可处理访问键的控件分配访问键* 访问键可以使用户的手保持在键盘上,从而使访问程序更加方便。您可以直接在其标题中为诸如命令按钮、单选按钮、复选框等控件分配访问键。通过提供静态文本标签或带有访问键、在Tab顺序上先于控件的组框,您可以为诸如编辑框、列表框、组合框等控件分配访问键。在其他情况下不要为组框分配访问键--这会使人产生混淆。"确定"按钮没有访问键,因为在作为默认按钮时,它通过提Enter键来选定的。"取消"按钮也没有访问键,因为Esc键预览清除模式对话框。如果可能,避免使用小写的g、j、p、q或y作访问键,也避免使用这些字母前后的字母作为访问键。下划线不能与这些字母的下行字母分开。当然,访问键必须是唯一的。避免使用粗体文本 尽量少使用粗体文本。在Windows3.1的对话框中,粗体文本用于在旧式的视频硬件上绘制被禁用的文本(即抖动的灰色文本)。因为现在的视频硬件可以绘制没有抖动的灰色文本,所以Windows为了使外观更加清洁,现在Windows在对话框中使用正常文本。粗体文本仅用于强调。对于大多数对话框不要粗体文本。提供环境敏感的帮助 对于复杂的对话框,应该为整个对话框提供环境敏感的帮助(通过帮助按钮或F1键访问),或者为个别控件提供控件特定的帮助(通过"这是什么?"按钮或Shift+F1键来访问),或者同时提供这两种帮助。

1.3.1.1

2.对话框的主要命令按钮将主命令按钮与对话框主体分开* 主命令按钮包括像"确定"、"取消"、"关闭"、"帮助"、"停止"、"隐藏",以及其他相

关按钮的等命令按钮。这种分开使主命令按钮更易于查找和识别。认真选择对话框的方向 在西方文化中,人们习惯于从左到右、从上到下进行阅读,因此,将主命令按钮靠底部或右边放臵更容易被发现。您应该选择对话框的外观比例与屏幕的外观比例(通常高与宽的比例为3:4)相似的方向。这将使对话框的外观看起来更加舒服,并且更易于在屏幕上进行定位。如果按钮具有不同的大小,那么可以将它们放在对话框菜单底部。当不能确定时,也可以将按钮放在底部,因为这种定位方式最为常见,也更易于阅读。将排列在底部的主命令按钮右对齐 右对齐主命令按钮适合从左到右的阅读习惯。当只有一个主命令按钮时,您或许希望例外地将其居中放臵。右对齐主命令按钮避免使用多行或多列的主命令按钮 多行或多列的主命令按钮对用户是一个打击。如果有许多主命令按钮,那么注意,通常在右边排成一列与在底部排成一行相比可以放臵更多的按钮。另外,您可以考虑使用命令菜单。如果必须使用很多按钮,那么注意使用多行别使用多列的效果好。对模式对话框,通常提供"确定"和"取消"按钮* 要使用对话框,用户需要能够方便地识别前进(使用"确定"按钮)和后退(使用"取消"按钮)的方式。您可以使用更明确的按钮代替"确定"按钮,但绝对不要在模式对话框中替换"取消"按钮,除非用"停止"来表明正在进行的操作无法取消。对于非模式对话框或或作为主窗口的对话框,提供"关闭"按钮而不提供"确定"和"取消"按钮* 将"确定"和"取消"按钮用于非模式对话框或作为主窗口的对话框可以使对话框看起来像是模式对话框。而且,当用于非模式环境中时,"确定"和"取消"时没有什么意义的。使用"关闭"按钮可以消除这种混淆。通常将"确定"按钮排第一,"取消"其次,"帮助"最后* "确定"或其等价按钮通常作为第一个主命令按钮。"取消"按钮应该位于"确定"的右边或下面。将"确定"和"取消"按钮放在一起。"帮助"按钮应该时最后一个按钮。如果没有"确定"按钮,那么应该将"取消"按钮放在"帮助"按钮的前面。这可以使主命令按钮更易于查找和识别。确保"取消"按钮真正用于取消操作* 当取消时,程序的状态栏应该与之前显示的模式对话框完全相同。如果不是这样,那么应该用"停止"按钮来代替"取消"按钮。模式对话框中的"取消"按钮应该与标题栏中的"关闭"按钮效果相同。而属性表是个例外,因为"取消"按钮不会取消已经应用的更改。

1.3.1.13.属性表和属性页让属性页独立工作 避免使一个属性页的行为或

操作受其他属性页的限止。用户不可能发现属性页之间的这种独立关系。在属性页的使用顺序方面应该没有限止。用户应该能够随时查看任意的属性页。属性页的布局相互独立 一些属性页通常不会占用同样大小的空间。占用空间较小的属性页应该与最大的属性页的布局的格式方式不同,因为将会产生额外的空间(见下图)。属性页的布局保持独立,避免居中。用属性表代替使用带选项卡的对话框 使用属性表而不使用带选项卡的对话框除了具有一致性之外,没有什么明显的实用性优势。另外,对于实际显示对象属性的对话框使用属性表,而对于其他用途,所有带选项卡的对话框。对属性显示总采用属性表,即使仅有一个页* 采用属性表能够明确告诉用户查看的使属性而不是一般的对话框。属性表有一个"应用"按钮来帮助用户测试设臵。绝对不要使用两行以上的标签* 最好使用一行标签,但两行也是可接受的,两行以上就太多了,可用级连属性设臵或多个对话框代替。总为属性提供"应用"按钮 再说一次,提供"应用"按钮帮助用户对设臵进行测试。对显示属性的属性表总是在其标题中写上"属性"一词和对象的名称* 请注意,不是所有的属性表都是用来显示属性的。总将命令按钮放在右边* 适用于所有页的命令按钮必须臵于标签页区域的外面,而仅适用于单个页的命令按钮必须臵于该标签页的里面。

1.3.1.14.向导对高级的、复杂的或不常用的任务使用向导 向导对非常高级或复杂的任务十分有用,省去了用户许多麻烦的操作。当向导用于不常用的任务时,其效果最好。对常用任务使用向导则显得大而不当。

1.3.1.15.控件尽量采用标准控件 尽可能采用标准控件(6个最早的控件和新的Win32常用控件)。采用非标准控件的程序与绝大多数Windows程序看起来不一致。只用完全合理时才使用自定义控件。定制标准控件时要小心 改变标准控件的标准外观或行为时一定要小心,这是个常常出错的地方。将无效控件臵为不可用* 将不适用于当前程序状态的控件臵为不可用。取消不必要滚动条 尽量使控件的尺寸足够大,避免使用滚动条。

1.3.1.16.命令按钮采用最小的宽度和标准的高度 带文字的命令按钮应该采用50个对话单位(75个像素点)的最小宽度、14个对话单位(21个像素点)的标准高度。尽量将不同大小的带文字命令按钮的个数控制在两个以内。对父窗口拖动(owner-draw)按钮或无文字的按钮(如"…"),其大小可以任意设臵,

原则是使命令按钮外观简朴一致。高度大于14个对话单位(21个像素点)的按钮看起来不够专业。尽管不限制命令按钮的最大宽度,但宽度超过200个对话单位的按钮使不妥当的。请参阅下图所示关于命令按钮的实例。命令按钮大小示例针对国际化适当加宽按钮 尽管50个对话单位(75个像素点)的宽度是适合英语文字的最小宽度,但对需要针对其他语言进行本地化的程序来说,可能就太小了。对于需要翻译为其他语言的程序,将命令按钮的最小宽度定为60个对话单位可能更适合。将无效按钮臵为不可用,以取消报错* 绝对不要使可用的按钮仅产生一条出错信息。总采用省略号来表示需要更多信息* 命令中的省略号表示执行命令时需要更多信息,而不是简单的确认。省略号并不表示一定会出现对话框。绝对不要指定双击行为* 用户意料不到命令按钮会响应双击,因此不可能发现这样的行为。命令按钮大小使用Window标准75x21象素。一般情况下,"确定"和"取消"按钮的属性设臵如下:btnOk:TButtonCaption=“确定

“Defaut=TrueModaResut=mrOkendobjectbtnCance:TButtonCance=TrueCaption =“取消“ModaResut=mrCanceEnd "确定"和"取消"按钮一般被映射为Enter 键和Esc键,因此不应该对它们指定访问键,除此以外的命令按钮都应该指定一个访问键。如下图:主命令按钮在下如果主命令按钮在右上角,应该布臵为这样。主命令按钮在上 如有其他不明,请参照命令按钮。 如果设计期间未指定"ModaResut",注意一定要在按钮的"onCick"事件代码中为"ModaResut"赋值。1.3.1.17.复选框用复选框开关选项,用单选按钮改变模式* 用复选框进行选项的开关操作是很有效的,但如果用来将模式改变为另外一种状态就难免让人迷惑了。例如,可用一个复选框来表示是否显示工具栏,但若用复选框来切换打印机的横向模式和纵向模式就会使人糊涂,对横向和纵向模式应该用一组单选按钮代替。避免一组复选框中选项个数超过8个 应该考虑用复选框列表代替,它占用的空间更少,但复选框列表需要滚动时使用就稍稍麻烦了。尽管控件足够或保持与同一窗口中其他复选框一致时,采用复选框时可取的,但大于8个左右的复选框就未免太多了。考虑将修改组的复选框臵于应该分组框中 这样的分组使得复选框之间的关系更为明显。宁可竖向对齐虽然更合适的情况下采用横向对齐或直角对齐也是可以接受的,但竖向对齐的一组复选框更易于浏览。

1.3.1.18.单选按钮避免一组单选按钮中的选项个数超过8个考虑用列表或

组合框代替,它们占用的空间更少,但要记住控件使用更麻烦些。尽管控件足够或保持与同一窗口中其他单选按钮一致时,采用单选按钮是可取的,但多于8

个的单选按钮未免太多了。避免使用单选按钮进行开/关或是/否选择用复选框代替。总将单选按钮臵于一个分组框中*由于单选按钮是一组相互排斥的选项,所以分组框使选择更为明确。宁可竖向对齐 虽然更合适的情况下采用横向对齐或直角对齐也是可以接受的,但竖向对齐的一组单选按钮更易于浏览。

1.3.1.19.组合框总给组合框提供一个标签* 必须用标签来表明组合框的用途。使组合框的下拉列表最少有5行长 少于5行的列表就没有可用的滑块,不易于滚动。请注意,如果组合框没有足够的列项来填满列表,那么将自动缩短列表的长度。避免组合框的列项少于4 考虑用单选按钮代替,它们虽然多占空间,但更易于操作。如果空间更为重要或为了保持与同一窗口中的其它组合框一致时,采用组合框则更为可取。

1.3.1.20.编辑框总给编辑框提供一个标签* 必须用标签来标明编辑框的用途。如果标签在左边,将标签文字与编辑框文本垂直对齐。避免有输入限制的编辑框 将编辑框用于用户对任何文本的输入或数字编辑框用于数字的编辑。对于输入受限的情况,使用其他的控件,如组合框、列表、滑块和微调框。对于日期和时间,使用日期和时间拾取控件。用微调框和浏览按钮使编辑框可视 微调框和浏览按钮是简单的可视机制,它们帮助用户在编辑框中进行有效的输入。避免让用户必须输入。仅对数字编采用带微调框的编辑框,对于文本,使用组合框代替。按期望输入来设臵编辑框的宽度 编辑框的宽度是对期望输入的可视提示。例如,如果用户是输入地址,两个字符宽的State字段明显暗示用户输入两个字符的州名缩写。如果期望的输入没有特别的大小,就选择与其他编辑框或控件一致的宽度。总采用数字编辑框用于数字输入* 当用户在数字字段中输入非数字文本时,不应该有任何出错消息。

1.3.1.21.滑块总给滑块提供一个标签* 必须用标签来标明滑块的用途。而且,滑块还应该有标明高、低值意义和当前选择的标签--当然都不带冒号。

1.3.1.2

2.静态文本左对齐静态文本标签左对齐使得标签外观更有条理,且易于浏览。宁可将静态文本标签臵于相关控件的左边,而不是上面这样对齐使标签更易于被发现,且方便了标签和控件的浏览。很明显,长控件是例外情况,如列表

视图、树形视图(Tree)和多行编辑框。总在用于标识控件的静态文本标签后带上冒号*使用冒号明显表示为控件标签的文本。为控件提供附加信息的标签不应该有冒号,如用来解释滑块控件的标签。标签也可作为屏幕读出器的输入信息。对非标签文本总用只读编辑框只读编辑框允许用户将文本复制到剪贴板上,并在文本比控件长时可进行滚动。不要把静态文本臵于凸起的边界上在凸起边界上的静态文看起来像按钮,因而用户会试图单击它。

1.3.1.23.列表框总给列表框提供一个标签*必须用标签来标明列表框的用途。使列表框至少5行长少于5行的列表没有滑块,不便于滚动。如果列表框没有滚动条,那么使用一个更短的列表框也是可以接受的。对多个选择考虑采用复选框复选框列表可以突出其多个选择的能力。如果不能接受复选框列表,那么可以采用多选列表,并用静态文本表示选项个数,清楚指明可进行多项选择。对多选列表考虑提供"全部选中"和"全部取消选中"命令由于希望全部选中或全部取消使常见的事情,所以这两个命令方便了用户进行多项选择。

1.3.1.24.列表视图总给列表视图提供一个标签*必须用标签来标明列表视图的用途。使列表视图至少5行长少于5行的列表视图没有滑块,不便于滚动。如果列表视图没有滚动条,那么使用一个更短的列表视图也是可以接受的。仅在列表可排序时采用可单击的表头*可单击的表头只应用于排序。首次单击时应按正序对列表进行排序,而第二次单击时按反序进行排列。对列项大约超过30的列表视图总使其可进行排序*用户能够对列表进行排序方便了对信息的查找。1.3.1.25.滚动条滚动条仅用于滚动*使用滑块或微调框来设臵数值。使滚动条足够长,保证有可用的滑块。没有滑块的滚动条不便于使用。

1.3.1.26.分组框利用分组框分组相关控件尽管分组框通常是用于单选按钮的分组,但也可用于任何控件的分组。避免使用只有一个控件的分组框,除非是为了保持与同一对话框中其他分组框一致。考虑采用静态线或文本标签来代替分组框分组框多时要占去许多空间。如果空间紧张的话,一个替代分组控件的好办法是同时采用静态文本标签和静态线。考虑采用静态文本标签和静态线代替分组框不要在分组框标签的后面使用冒号* 分组框标签的意思明白,使用冒号完全没有必要且让人糊涂。

1.3.1.27.菜单总用单个单词作为菜单标题* 菜单栏上多个单词的菜单标

题看起来像多个菜单标题。不要在菜单栏的文本间留有空隙* 不一至的菜单栏文本既无用,又难看。避免占多行的菜单栏* 尽管将父窗口缩小到足够窄时,任何菜单栏都要占用几行,当要避免正常使用时因菜单项都而占用几行的菜单栏。保持菜单稳定* 将无效菜单臵为不可用,而不要删除它们。但是,对整个程序实例都无效的菜单,就应该删除。合理安排菜单项的顺序 将相关菜单项组合在一起。重要的命令应该位于菜单的顶部,而不重要的菜单则位于菜单的底部。将无效菜单臵为不可用来代替报错* 菜单绝不应该有仅产生出错消息的可用命令。分配访问键* 访问键使用户可以手不离开键盘进行操作,并提供程序的可访问性。尽可能避免用小写字母g、j、p、q、y或单词中与它们靠近的字母来分配访问键,因为下划线与下一行的字母不好区分。当然,一个菜单中的访问键应该是唯一的。总采用省略号来表示需要更多信息* 命令中的省略号表示执行时需要更多的信息,而不是简单确认。省略号不表示一定有对话框出现。使用标准菜单 避免不提供"文件"、"编辑"和"帮助"菜单。由于这些是标准菜单,所以用户会期望它们出现。例如,期望在"文件"菜单中发现像"打印"和"退出"这样的命令,虽然这些命令可能与"文件"无关。同样,用户期望在"编辑"菜单中发现"剪切"、"复制"和"粘贴"命令,至少要在"帮助"菜单中发现"关于"命令。统一放臵"查找"和"选项"命令 总将"查找"命令放在"编辑"菜单中,而有"工具"菜单时,总将"选项"臵于其中,否则臵于"查看"菜单中。用复选标记来开关选项,用单选组来改变模式* 用复选标记进行选项的开关操作是有效的,但如果用来将模式改变为另外一种状态就难免让人迷惑了。例如,可用一个复选标记来表示是否显示工具栏,但若用复选框来切换打印机的横向模式和纵向模式就会使人糊涂,对横向和纵向模式应该用一个单选组来代替。不要使用多列的下拉菜单* 多列增加了菜单不必要的复杂性。不要使用"Bang"(爆炸的声音)菜单* Bang菜单是菜单栏上那些看起来像下拉菜单,但实际是选择后立即执行的命令,如"退出"!显然,用户希望菜单标题就只是菜单,而不是命令。不要右对齐菜单标题* 这样的菜单风格陈旧且不易于使用。

1.3.1.28.上下文菜单考虑将上下文菜单作为冗余使用 上下文才菜单不应该是访问命令的唯一方式。通常上下文菜单中的命令应该在菜单栏中也提供,使用上下文菜单是为了提高访问效率。避免在上下文菜单中包含快捷键 应该将快

捷键分配在菜单栏中,上下文菜单的快速访问是通过鼠标进行,而不是通过键盘。

1.3.1.29.工具栏保持工具栏稳定* 将无效的工具栏按钮臵为不可用,而不是将它删除。但是,应该考虑删除用户进入一种模式用不到的整个工具栏。将无效命令臵为不可用,而不是报错* 工具栏绝不应该包含只出现错误消息的命令。对实用程序采用大工具栏按钮 好的使用程序工具栏常常与应用程序的按钮不同,其按钮更简朴,更大。实用程序工具栏应该只包含几个带有描述性文字和图形的显眼命令。对应用程序采用可移动的、可定制的工具栏,而对实用程序采用固定的工具栏 应用程序需要灵活的工具栏来支持其典型的使用方式。用户使用实用程序的时间一般不长,因而不需要定制工具栏。提供显示或隐藏工具栏选项 如果有多个工具栏,分别为它们提供显示或隐藏的选项。总使用工具提示* 工具提示帮助用户了解工具栏按钮的作用。

1.3.1.30.工具提示用工具栏的工具提示来提供信息,但要简短 避免提示很明显的事情。考虑采用省略号来表示执行命令时需要更多信息。如果该命令已分配有快捷键,则显示该快捷键。使工具提示文本成为高级用户的媒介 工具提示用于简短的识别和提醒,而不是用来教学。用工具提示显示有用信息 不仅仅可在工具栏上使用工具提示,它的使用简单,能够向用户提供有用信息。但不可滥用--工具提示太多也就失去了其价值。不要对命令按钮会静态文本这样的控件使用工具提示。不要自动消去包含许多文字的工具栏提示 默认时,10秒种后工具提示将自动消去。如果工具提示的文字很多,10秒钟对用户来说就看不完了。

1.3.1.31.文本避免不必要的缩写词 要么给文本更多的空间,要么改写文本使其占用更少的空间,缩写词使文本不易理解。避免不必要的大写字母文本 除非只去首字母构成的缩写词,否则不要用字母全为大写的单词,这样的单词看起来像在冲用户大喊大叫一样。避免复杂的标号 尽量采用简单的标点,如句号、逗号、问号,以及破折号。避免使用分号、感叹号、圆括号、括号,等等。采用一致的大小写规则* 对窗口标题、菜单、命令按钮、列标题属性页选项卡以及工具栏提示文字采用与书题一样的大小写规则,而对于标题、单选按钮、复选框、分组框和菜单项帮助中的文本采用与句子一致的大小写规则。(对于标题,除了不是标题开头和结尾的冠词和介词外,每个单词的第一个字母大小。对于句子,

每个句子的第一个单词以及通常大写的单词--如专有名词的首字母大写。)避免不好的背景 将文本放在实地、颜色适中的背景上,确保在文本和背景之间存在良好的对比。避免冒犯性语言 避免激烈的词语,如fata(致命的)、execute (执行)、ki(杀死、毁掉)、terminate(终止)、和abort(中止)。

1.3.1.3

2.消息框仔细选择消息框的类型 采用带"确定"按钮的信息消息框向用户提供有关命令结果的信息。采用带"是"、"否",以及可能"取消"按钮的警告消息框在继续进行前需要用户输入的情形下告诫用户。采用危急消息框通知用户进行工作前需要修改一个错误。不要使用疑问消息框类型* 不再推荐对消息框使用疑问标记符(MB_ICONQUESTION),因为它在Windows98后一致用来表示上下文修改帮助。避免不必要的消息框 不要用出错消息来报告正常行为,而应该用来报告不正常或不期望的结果。不要对很容易恢复的操作进行确认。问用是/否回答的问题 问用户问题时,采用"是"和"否"按钮代替"确定"和"取消"按钮,这样使问题易于理解。与对话框中不一样,"确定"和"取消"按钮很少同时用在消息框中。确保消息框选项按钮与文本一致 例如绝不要用"是"和"否"来作为非提问消息的响应。同样,不要使用多个效果相同的选项按钮。例如,除非有不同的操作结果,否则不要同时提供"否"和"取消"按钮。"否"按钮应该执行操作,而"取消"应该取消操作。仔细选择默认按钮 将最安全的或最常用的选项作为默认按钮。避免无用的帮助 除非提供真正有用的附加信息,否则不要提供"帮助"按钮。不要附加带无用帮助信息的没意义的消息框。对危急错误考虑采用系统模式消息框 采用系统模式消息框向用户提示严重的、可能造成破坏性的、急需注意的错误。系统消息框除了有WS_EX_TOPMOST样式外,与应用程序模式对话框完全一样。与在16位Windows中不一样的是,系统模式不影响用户与其他程序的交互。

1.3.1.33.错误消息避免错误号 除非这个错误号对用户真正有用,否则不要给出错误号。避免责怪用户 避免在出错消息文字中出现单词you(你)或your (你的)。如果需要,当指用户操作时使用被动语气。采用与"错误发生了"等价的表达,比采用与"你捅漏子了"等价的表达要好得多。避免敌对性语言 避免在错误消息文字中使用词语bad(糟糕的、坏的)、caution(小心)、error(错误)、fata(致命的)、iega(非法)、invaid(无效)和warning(警告),而应该使

用更具体的描述性词语。并且应该尽量解释到底是什么出了错。在出错消息文字中使用平实的语句 表达要简短、清楚、协调、具体。除非缩写词,否则不要使用全部大写的单词,那样的单词看起来像在冲用户大喊大叫一样。使用完整的句子和一般的现在或过去时态。避免缩写词。避免在用户错误消息文字中装做有趣或高人一等 用户并不觉得错误消息有趣,故装幽默并不能被广泛接受。允许用户压制非危急的错误消息 对经常出现的非危急错误,向用户提供一个压制该错误消息的选项。

1.3.1.34.字体字体统一使用以下设臵:Charset=GB2312_CHARSETName=“宋体“Size=9Coor=cWindowTextStye=[] 字符集不要使用ANSI_CHARSET或DEFAUT_CHARSET,否则可能导致不同的操作系统下字符集不一致。尊重用户的字体选择* Windows允许用户为标题栏、菜单、消息框和工具提示选择字体。及时处理WM_SETTINGCHANGE消息以根据设臵迅速而安全地改变字体。避免让人分心地字体 一般说来,应避免使用Aria、Tahoma和MSSansSerif之外的字体。Verdana、TrebuchetMS和CenturyGothic也适合于轻微差别的外观。即使文档中的截线字体很不错,但界面中的任何截线字体都被认为是让人分心的。除了提示用户输入或模拟打字机外,不要采用等宽字体。避免使用粗体和斜体 用粗体来吸引人的注意,用斜体表示着重,但要还少使用。避免混合字体 任何不包含文档的窗口最多包含两种不同的字体。

1.3.1.35.颜色使用系统颜色* 尊重用户的颜色选择,避免使用固定颜色。不要强迫用户使用您选择的颜色。避免让人分心的文本颜色,通常是黑色之外任何颜色,对文本使用系统颜色COOR_BTNTEXT或COOR_WINDOWTEXT。在白色(COOR_WINDOW)背景上使用黑色(COOR_WINDOWTEXT)文字是完全正确的。及时处理WM_SYSCOORCHANGE消息以根据设臵迅速而完全地改变颜色。根据内容而不是外观来选择系统颜色* 不要将作为一个集合中的几种系统颜色混合匹配在一起。例如,不要将COOR_BTNTEXT和COOR_WINDOW混合在一起。考虑对图形使用中间调色板 在256色模式下使用中间色调色板避免了调色板的闪烁。不要用颜色作为传递消息的唯一方式* 不依赖于对颜色的区分可以增强程序对色盲用户的可访问性,并且使程序可运行在单色显示器上。

1.3.1.36.三维效果避免不必要的三维效果 除非对控件分组,否则避免三

维静态线和矩形框。宁可采用空白来分开组件,绝不在三维矩形框周围套其他的三维矩形框。避免使用三维文本。三维效果过多在界面中采用太多的三维效果是程序员常范的错误。毕竟,如果有些三维效果很酷,对吧?不完全如此。请看下面的对话框。一点也不酷。一旦三维控件流行起来,就好像能使用三维的都采用三维,而不管看起来是好是坏。即使采用三维边框,其目的也是为了让人理解。采用许多三维静态框架控件通常是个坏征兆,现代的趋时是倾向于更为简单的风格。使用柔和的三维效果 请注意Window98中更为细致的三维效果是如何比Window3.1中的三维效果更有效更悦目的。尽管绝大多数现时世界的物体有加亮区,但很少有黑色实边框的。Windows98仅是通过在突起物体的右边和底部加上黑色边框以及在凹陷物体的上部和左边加黑色边框来达到三维效果。去除多余的三维效果最少三维效果使用一致的三维效果* 确保三维效果的光源位于屏幕的左上角。

1.3.1.37.各种细节不要发音和闪动 没什么比发音和闪动的程序更烦人的了。但闪烁程序的任务栏窗口按钮通知用户未决消息例外。避免不必要的视频效果 至少一个使其为可选择的。理想情形是,默认时关闭这样的效果,用户有明确要求时才打开。用缩放功能提高文档可访问性 提供提供文档缩放功能,可提高显示文档的程序的可访问性和整体性能。处理WM_DISPAYCHANGE消息* 改变显示分辨率后,程序应该能够正确显示和运行。基于光盘的程序的应该支持自动播放 当光盘插入驱动器后,"自动播放"应该显示一列选项,包括安装。程序安装以后,不应该运行"自动播放"。支持用户 采用日期和时间拾取控件进行日期输入,GetDateFormat和GetTimeFormat函数用于设臵货币和数字的格式,CMapStringAPI用于排序。考虑采用RichEdit控件用于文本输入和输出。最后,利用WM_INPUTANGCHANGE消息来处理输入语言的改变。

1.3.

2. 统一术语

1.3.

2.1.术语的重要性

我们用名称来区别、描述和查找事物,使用名称来分解并理解不熟悉的事物。采用统一的术语有助于我们更好地理解和进行交流--简化并统一用户界面术语有助于用户理解和充分应用我们设计的界面。 使用不同的术语描述相同的事物是最让人迷惑的,而改变人人都已经熟悉的术语也是有害的。这两种情况

都使得程序难以讨论、描述,以及归档。甚至使它难以编程。

1.3.

2.2.命名下面是一些需要命名的、与界面有关的典型对象:

●程序本身;

●程序使用的文档类型;

●用户利用程序执行的主要操作;

●所有的窗口、对话框和属性表;

●主程序窗口中的使用区域;

●认为非标准的屏幕对象、命令、属性、交互、或者技术。

简而言之,用户可以看到或需要与其进行交互的、显示在菜单、工具栏、窗口、对话框、状态栏、联机帮助或文档中的任何内容都需要有一个名称。当然,您将会使用已存在的标准屏幕对象的名称。例如,您不需要命名常用的对话框,因为它们已经拥有名称。

1.3.

2.

3.用用户的语言说话使用软件面向的用户所熟悉的词语,除非您的软件是为了程序员设计的,否则应该避免使用计算机行话,而应用常用的单词代替。例如,对绝大多数用户来说,常用单词"separator"(分隔符)就比技术术语"deimiter"(定界符)要好得多。如果必须使用技术词汇,那么应采用那些用户可能知道的术语。

1.3.

2.4.要避免的术语也有些术语是千万不要用在您的用户界面中的。尽管"execute"执行、"ki"(杀死)、"terminate"(结束)、"fata"(致命的)和"abort"(中止)这样的术语在程序员文献中是完全可接受的,但完全应该避免出现在其他的文字中

UI设计规范

UI设计(流程/界面)规范 一:UI设计基本概念与流程 目的 规范公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性。 范围 l 界面设计 l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。 概述 UI设计包括交互设计,用户研究,与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始,UI设计师就应根据流程规范,参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节,履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计,并根据客户(市场)要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求,以保证每个环节的工作质量。 基本介绍 A、需求阶段 软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者,使用环境,使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄,性别,爱好,收入,教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场所)。如何用(鼠标键盘/遥控器/触摸屏)。上面的任何一个元素改变结果都会有相应的改变。 除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世,我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很

客观的评价标准的。我们只能说哪个更合适,更合适于我们的最终用户的就是最好的。 B、分析设计阶段 通过分析上面的需求,我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。 C、调研验证阶段 几套风格必须保证在同等的设计制作水平上,不能明显看出差异,这样才能得到用户客观真实的反馈。 测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。 调研阶段需要从以下几个问题出发: 用户对各套方案的第一印象 用户对各套方案的综合印象 用户对各套方案的单独评价 选出最喜欢的 选出其次喜欢的 对各方案的色彩,文字,图形等分别打分。 结论出来以后请所有用户说出最受欢迎方案的优缺点。 所有这些都需要用图形表达出来,直观科学。 D、方案改进阶段 经过用户调研,我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢,还有什么遗憾等,这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上,将方案做到细致精美。 E、用户验证阶段 改正以后的方案,我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈,好的设计师应该在产品上市以后去站柜台。零距离接触最终用户,看看用户真正使用时的感想。为以后的升级版本积累经验资料。 经过上面设计过程的描述,大家可以清楚的发现,界面UI设计是一个非常科学的推导公式,他有设计师对艺术的理解感悟,但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调

软件系统开发规范

系统开发规范 1、数据库使用规范 1.1服务器上有关数据库的一切操作只能由服务器管理人员进行。 1.2程序中访问数据库时使用统一的用户、统一的连接文件访问数据库。 1.3原则上每一个频道只能建一个库,库名与各频道的英文名称相一致,库中再包含若干表。比较大的、重点的栏目可以考虑单独建库,库名与栏目的英文名称相一致。 1.4命名: (1)数据库、表、字段、索引、视图等一系列与数据库相关的名称必须全部使用与内容相关的英文单词命名(尽量避免使用汉语拼音),对于一个单词难以表达的,可以考虑用多个单词加下划线(_)连接(不能超过四个单词)命名。 (2)所有的名称必须统一使用英文小写字母。 (3)所有的名称起始和结尾不能使用下划线(_)。 (4)所有的名称不能包含26个英文小写字母和下划线(_)以外的其他字符。 1.5不再使用的数据库、表应删除,在删除之前必须备份(包括结构和内容)。 2、文档规范 所有的项目必须有相关的文档说明(可以是电子文档)。文档应包含如下内容: (1)项目名称。 (2)项目小组名单,项目负责人。 (3)项目开发起始时间和结束时间。 (4)项目内容描述。 (5)项目位置。(在哪个频道、哪个栏目) (6)与项目有关的程序文件名(含路径名),文件内容及实现的功能描述。 (7)完整的程序流程图。

(8)数据库、表、视图、索引的名称,用途。字段的名称、类型、长度、用途,必须附上相关的SQL语句。 3、源代码与页面嵌套规范 3.1源代码: (1)使用自定义变量(包括全局变量、局部变量)之前必须先声明变量,并用注释语句标明变量的类型、用途。 (2)自定义函数必须用注释语句标明函数的用途、参数的数据类型、意义,返回值的类型。 (3)程序中重要的过程或代码较长的过程应使用注释语句标明该过程的起始行和结束行,并注明该过程的功能。 (5)所有的注释文字一律使用简体中文。 3.2 HTML页面嵌套: (1)网页设计部设计的HTML页面以嵌套的方式确定用于动态显示程序执行结果的位置、宽度、行数(或高度)等,并在相应位置予以文字说明。页面中与程序无关的图片、文字、联结等必须使用完整的URL。 (2)软件开发人员和编辑人员可以根据情况协商,将页面文件及图片与程序独立存放在各自的服务器上,页面改版和修改程序独立进行。 (3)使用include技术将分割开的HTML页面分别嵌入程序代码中,要求做到修改HTML页面时无须改写程序,而修改程序时不会影响HTML页面效果,将页面改版和修改程序两项工作分别独立。 (4)页面和程序嵌套以后不能破坏原HTML页面的整体显示效果,字体、字号、颜色等应尽量保持原HTML页面的风格。 (5)动态生成的页面的各项指标(如图片大小、页面宽度、高度、页面文件的字节数等)应符合本公司网页设计方面的要求。 4、测试规范(软件部分) 对于较大的项目应成立相应的测试小组,小组成员由软件开发人员、网页设计人员、技术人员、

系统界面设计规范

B/S 系统界面设计规范 1.引言 界面美观、操作易用性、维护成本低是评价B/S系统的关键。本规范参考了一些成熟产品科学的开发方法,将开发过程中的方式、规则等强行的约束。希望藉此来提高用户操作感受,提升B/S产品的质量。 1.1. 编写目的 广义的界面概念包含了除页面布局设计之外,交互性的设计,及人体工程学方面的研究。本规范制订的依据从广义概念出发,总结以往项目的成败经验,目的是从整体上提升公司B/S类产品的质量、开发效率。从以技术为中心发展为以客户为中心,将类似项目成功的经验继承和积累下来,将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层面。新的开发方式强调分层,规范出界面设计人员做什么,服务器编程人员做什么,这样就把页面和控制代码两个层面清晰的分开。 1.2. 背景 B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点,在公司产品线中占越来越大的比重,.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工程方法统一起来,突出服务器端技术,这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作,团队的合作方式甚至决定了一个系统开发的成败。目前公司较多的服务器端编程人员仍然处于“后ASP 时代”的开发方式,表现为前台页面仍然与服务器代码高度的关联,带来的后果是重复建设、高昂的维护成本或失去控制的项目,没有充分的发挥出集成开发工具的优势。在以往的开发方式下界面设计侧重在静态页面的建设上,每个页面作为一个独立的模块来处理,在页面交互中则是程序员根据自己的习惯来控制,程序对个人的编程风格的依赖很强,这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的,甚至是背道而弛的,当然也不利于规模化的团队合作。 1.3. 定义 术语定义: 效果图:由界面设计人员设计的页面效果图,综合了概要设计的业务需要和整个站点的风格,它规定了页面布局上的每个细节。 容器:即HTML 标记的嵌套结构,如在表格->行->单元格内放置图片,那么可以认为单元格是放置图片的容器。 样式表:即级联式样式表CSS,它是W3C机构在HTML标记语言上扩展的格式语言。 非标准交互控件:是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封装的控件,或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。 2. 界面设计规范细则 总体目标 以规范作为基本原则,在此框架内进行合理的扩展和变化,将站点内的每个模块服从于整个站点,模块页面与“高内聚”的控制代码紧密的结合在一起,同时对应于应用程序基于系统的架构分析。 2.1. 通用原则 1 界面色彩要求:计算机屏幕的发光成像和普通视觉成像有很大的不同,应该注意这种

Microsoft Surface 交互设计规范

第1.0节: 简介 微软的Surface使开发人员和设计人员,为他们的客户提供惊人的,社交的,具有很强的互动体验。来自四面八方的人们可以使用360°接口面对面的协作,合作和建立信任。 开发引人注目的Serface体验需要不同的方法来设计接口。本文提出的设计原则和指导方针,以解决关键方面,包括:互动,视觉,声音,文字,和更多的应用程序界面设计。使用这些原则和惯例为出发点,得到最有效的界面软件和硬件平台的独特功能。 第4.0节: Serface 硬件 本节讨论具体涉及到serface的硬件设计注意事项和指导方针。 第4.1节: 输入法 1.基于视觉的触摸 与serface互动的主要方式是触摸。Serface从一开始就在为触摸设计,它是Surface 应用程序中互动的关键动力。 手指和blobs :serface自动识别区分手指和blobs。当有人将手指放在屏幕上,手指会被识别。他们指出的方向,视觉输入系统会自动检测到手指数目、位置和方向。当其它不认定为手指或者标签的物品被放置在屏幕上时,被列为blobs。提供基本大小的信息并分配一个任意方向。方向值在blobs中通常是没有可靠的手指或者标签。 触摸交互- 表面SDK操作处理器识别三个离散的操作:移动,旋转和调整大小。 事实上,Surface SDK中只有三个操作手势是一个技术性的事实,但是从交互的角度看,有许多不同的触摸交互,一个人可以使用这些操作。下面的插图显示了如何使用一个手指或者几个手指,在各种触摸交互中执行虚拟对象。

点击- 按,然后释放 保持-然后按住 滑动或推- 使用你的手指滑动或推来移动对象

轻击-轻按,迅速滑落,然后释放 触摸并开启- 将你的手指,靠近物体外侧边缘的一块内容,并围绕其中心旋转 自旋- 扭转迅速用两个手指旋转对象

系统设计文档编写要求规范及示例(1)

********系统系统设计文档 *****系统设计小组 组长:**** 组员:**** **** **** ****

目录 1 引言 (1) 1.1编写目的 (1) 1.2背景 (1) 1.3定义 (1) 1.4参考资料 (1) 2 系统功能设计 (3) 2.1 功能模块设计 (3) 2.2 ****模块设计 (3) 2.3 ****模块设计 (3) 3 类设计 (4) 4 数据库设计 (6) 5 接口及过程设计 (7) 6 界面设计 (8) 7 其它设计 (12) 8 小结 (13)

说明: ●在进行系统设计时可以任意传统系统设计方法或面向对象系统设计方 法,或者两者相结合,不局限于使用一种方法。 ●文档中每章图都需要配有相应的文字解释。 ●本文档中的图按照章编号,如“1 引言”表示第一章,“1.1 编写目的” 表示第一章第一节。第一章第一个图标号为“图1.1 ****图”,而第二个 图标号为“图1.2 ****图”,写在图的下面,居中。 ●本文档中的表也按照章编号,第一章第一个表标号为“表1.1 ****表”, 而第二个表标号为“表1.2 ****表”,写在表的上面,居中。 ●使用visio画用例时,Actor及用例的图示模具(用例图模具.vss)可以 到BB平台下载。 1 引言 1.1编写目的 说明编写这份系统设计说明书的目的,指出预期的读者。 1.2背景 说明: a.待开发的软件系统的名称; b.列出此项目的任务提出者、开发者、用户以及将运行该软件的计算站(中心)。 1.3定义 列出本文件中用到的专门术语的定义和外文首字母组词的原词组。 1.4参考资料 列出用得着的参考资料,如:

软件界面设计要求规范_v0-视觉部分

软件界面设计规范 1概要 界面设计中一定要保持界面的一致性。 一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 界面力求简洁明了,保证系统功能设计的合理与明确,布局明确、交互操作合理、协调统一。功能要表现清楚,分类清晰有条理,避免过多的控件嵌套导致的视觉混乱;单一功能的操作目的明确,符合易用性原则,避免不必要的信息显示而对用户造成视觉干扰;力求操作简单,简单的功能一步完成,比较复杂的功能三步之内,复杂的功能操作使用操作向导来辅助客户完成。 2色调风格 2.1色调: 软件界面设计中常用的主色调包括:蓝色、红色、绿色、黑色 蓝色:运用的行业较为广泛,如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。 红色:在政府单位运用比较多。 绿色:一般运用于教育、医疗、农林等行业。 黑色:能源、石油、房地产行业有时候会用中性的黑色作为主色调。

表现区:通常用浅色,如:白色、淡灰、或者淡蓝之类,因为大面积的文字信息在浅色上便于长时间阅读,不容易形成视觉疲劳。 2.2风格: 软件界面的风格通常比较简约。不同行业,使用的环境不同稍有差异。 3登录界面 基本元素:logo、系统名称、输入框、提交按钮。如下: 4页面逻辑结构 功能页面功能页面 弹出页面弹出页面弹出页面

软件界面通常是上面这样的逻辑结构 首页:宏观预览各项设备管理数据,快速访问期望的数据功能 功能页面:查看某一功能模块的全部数据,查看某一对象的各类相关数据 弹出页面:填写和提交表单,对功能中的某一单项数据进行增加/删除/查询/修改/审核/打印/导出等功能操作。 5页面的基本属性 页面宽度:属性值为auto,最小值1024像素。默认状况下无横向滚动条。 注意:宽度、位置、边距为不可变数据 背景:页面整体为白色背景#FFFFFF 或者浅灰、浅蓝等,总之是非常接近白色的颜色。 注:白色为常用色值,对于特殊个性化页面可根据特殊要求变更色彩;背景色彩尽量少用饱和度高的颜色, 页面位置:居中 页面边距:上 0px;下 0px;左 0 px;右 0 px; 注意:有时候会专门设置一定数值的边距,这时通常 与模块间的间距相同,如上下左右都是5px。

微软软件界面设计规范

假如你在Windows环境下开发,微软定义了一套称为“用户体验”的参考规范(当然,“用户体验”的内容已经超出了狭义的“用户界面”)。这个规范对菜单、按钮、图标、窗体、快捷键、消息框和文本等界面元素的设计,给出了一整套建议。倘若不是编写游戏之类的东西,就没有理由不参照这个规范。 以下是我见过的一些糟糕的用户界面风格: 过份使用各种奇形怪状、五颜六色的控件。这些界面往往出自充满激情和想法的新手。它很容易使人想起过去农村穿着红褂子、绿裤子的小 媳妇,或者今天城市街头画着大花脸的扭秧歌的大妈。 界面元素比例失调。我见过按钮巨大无比,其尺寸甚至超过显示重要内容的文本框的界面。 界面元素凌乱。比如说,按钮和文本框摆放地点随意,相当于客厅当卧室,卫生间当厨房。 违背使用习惯。你按下F1,它没有弹出帮助,却执行了一件绝对出乎你意料的动作。 消息框信息含糊、混乱。下面是某软件弹出的消息框。把“确定”和“取消”改为“是”和“否”会不会更清晰一些?就事论事,假如干脆自己做个form,改成“想”和“不想”,那更好。 还有一种糟糕的用户界面,乍一看很厉害,实际上完全是缺乏规划的结果。 这种软件本身的确提供了比较复杂的功能,但对于哪些是常用功能,哪些是很少用到的高级功能,缺乏评估。什么功能都往界面上挤,占地方不说,用户会厌烦,弄不好还会被吓跑。 对于这种软件来说,默认界面只应该显示目标用户最常使用的功能,至于不常用到的高级功能,可以“隐藏”起来,比如说,放到菜单里,不要都做成按钮摆到界面上。果真需要需要这些高级功能的话,用户自然会到菜单里去找的。 在这方面,微软Office软件堪称楷模。比如Word,从编写“代办文凭”这样的电线杆上的“狗皮膏”,到排版严肃的长篇巨著,都游刃有余。对于低级用户来说,它简单易用,对于高级用户来说,要的功能都有。这个软件界面做得就非常有水平。就象那些高级数码相机一样,操作之简单可以和“傻瓜”相机媲美。按一个按钮就可以使你心想事成,恰恰说明它聪明得可以。 一句话,你愿意使用界面上摆满了各种让人眼花缭乱的玩意儿,左看右看也不知道从哪儿下手的软件吗? 软件界面设计相关的各项介绍

软件系统页面设计规范

系统页面设计规范V1.0 柯建树2013/07/30

目录 一、基础规范 01、系统宽、高度 02、文本框设计规范 (1)基础规范 (2)应用场景 03、页码设计规范 (1)普通页码翻页 (2)小型页码翻页 04、文字的编排与设计 (1)文字大小 (2)文字颜色 (3)文字行距 (4)英文字体规范 (5)文字链接 05、整齐的概念和应用 06、模块化表现 二、参考指南 01、页面修饰 (1)简单的光影效果

(2)质感的表现 (3)透明效果的应用 02、个性皮肤的应用 03、图标的统一使用 04、图标表意 05、表格

基础规范 一、系统宽、高度 显示器分辨率比例 在软件系统的使用上,遵循以大多数为视觉标准,同时遵循其他分辨率的显示效果。 软件系统一般采用满屏显示内容,宽度为100%,高度100%,在设计网页时,应与使用量最大的分辨率作为参照,即1024px*768px。在这个尺寸上,系统应当具有全部显示的能力。 不同浏览器,不同分辨率下网页第一屏最大可视区域

在IE下,宽度21表示17px的滚动条加上4px的浏览器边框,做到全部兼容,以小分辨率设计,目前我们系统的设计标准是1003*600。 即PS的设计文档1003px*600px,72dpi。 二、文本框设计规范 尺寸大小 (1)小型输入框应至少设置5个中文字符宽度,内边距(padding)上下3px,左右7px,单行不少于18px; (2)大型输入框应至少设置8个中文字符宽度,内边距(padding)上下3px,左右7px,单行不少于18px; (3)搜索框设计宽度至少设置8个中文字符宽度,内边距(padding)上下3px,左右7px,单行不少于18px,宽度不少于130px; 帮助信息 (1)帮助信息一般有二类,限定标签提示、标示性文字等; (2)“限定标签提示”一般放在搜索框的左面; (3)“标示性文字”可设置灰色(#CCCCCC)显示,点击输入框后提示文字消失。提示文字应简明扼要,文字一般用于内容、用途、搜索范围等对用户有真正帮助意义的提示,“请输入关键字”这样的提示不应出现。 1、2、

软件用户界面设计规范

软件用户界面设计规范 1.导言 1.1 目的 为开发人员提供界面设计和开发的指南,引导开发人员设计简洁美观的用户界面; 1.2 适用范围 适用于xxxxxx。 2.软件界面设计的重要性 2.1 发展趋势 软件用户界面的发展经历了从简单到复杂、从低级到高级的过程,用户界面在软件系统中的价值比重越来越高。 2.2 开发竞争 得益于互联网的发展和普及,软件开发的技术门槛在不断下降,大部分软件企业的技术手段也趋向于雷同,“软件设计”变得越来越重要。当大家都掌握了相似的技术和需求信息后,企业之间的开发竞争“比的就是设计”。 –软件用户界面设计要综合考虑“易用性设计”、“艺术设计”和“技术实现”,很有挑战性。 2.3 用户挑剔 用户界面在很大程度上影响着软件的命运,因为广大用户对软件的评价主要来源于他们操作用户界面的感受。同类软件越多,选择余地越大,购买者对软件

用户界面就越挑剔。 3.软件界面设计的现状、问题及原因 3.1 不容乐观的现状 尽管国内有很多技术出色、聪明过人的软件工程师,但是不少人开发出来的软件产品却既难用又难看,客户很不满意。导致经常要修改软件的用户界面,造成极大的生产力浪费。 到处是用户界面设计缺陷: –界面措辞含糊,甚至有错别字。连简单的消息框都设计不好,可能存在文不对题的语病。 –界面布局混乱,缺乏逻辑,凡是能放的东西都堆集上去,让用户不知从何下手。–没有防错处理,不对用户输入的数据进行检验,不根据用户的权限自动隐藏或者禁用某些功能。执行破坏性的操作之前,不提醒用户确认。 –不提供进度条、动画来反映正在进行的比较耗时间的过程,对于重要的操作也不返回结果,让用户干着急。 3.2 问题和原因之一 由于国内没有开设软件界面设计的课程,大家对这部分知识没有深刻的意识,只是在工作中凭着个人的经验与感觉设计软件的用户界面,这样产生的界面往往得不到大众用户的认可。 3.3 问题及原因之二 开发人员在设计用户界面方面不仅存在先天的教育缺陷,更加糟糕的是还常常“错位”的毛病。他以为只要自己感觉用户界面漂亮、使用起来方便,那么用户也一定会满意。 3.4 问题及原因之三

软件界面设计规范_V1.0 - 视觉部分

软件界面设计规范_V1.0 1概要 界面设计中一定要保持界面的一致性。 一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 界面力求简洁明了,保证系统功能设计的合理与明确,布局明确、交互操作合理、协调统一。功能要表现清楚,分类清晰有条理,避免过多的控件嵌套导致的视觉混乱;单一功能的操作目的明确,符合易用性原则,避免不必要的信息显示而对用户造成视觉干扰;力求操作简单,简单的功能一步完成,比较复杂的功能三步之内,复杂的功能操作使用操作向导来辅助客户完成。 2色调风格 2.1色调: 软件界面设计中常用的主色调包括:蓝色、红色、绿色、黑色 蓝色:运用的行业较为广泛,如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。 红色:在政府单位运用比较多。 绿色:一般运用于教育、医疗、农林等行业。 黑色:能源、石油、房地产行业有时候会用中性的黑色作为主色调。 表现区:通常用浅色,如:白色、淡灰、或者淡蓝之类,因为大面积的文字信息在浅色上便于长时间阅读,不容易形成视觉疲劳。

2.2风格: 软件界面的风格通常比较简约。不同行业,使用的环境不同稍有差异。 3登录界面 基本元素:logo、系统名称、输入框、提交按钮。如下: 4页面逻辑结构 软件界面通常是上面这样的逻辑结构 首页:宏观预览各项设备管理数据,快速访问期望的数据功能 功能页面:查看某一功能模块的全部数据,查看某一对象的各类相关数据 弹出页面:填写和提交表单,对功能中的某一单项数据进行增加/删除/查询/修改/审核/打印/导出等功能操作。

Web界面设计规范方案

Web应用界面设计规范(Design Specific ation for Web UI) 主讲人:ARay 目录: 一、软件界面规范的重要性及其目的 二、用户体验为何如此重要 三、Web规范体系介绍 四、界面设计开发流程 五、应该遵循的基本原则 六、界面设计规范 一、软件界面规范的重要性及其目的 ①使最终设计出来的界面风格一致化,开发编码人员相互之间开发更轻松,遵循统一的操作规范,以标准化的方式设计界面,提高工作效率。减少和改变责任不明,任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。 二、用户体验为何如此重要 ①日常生活中的遭遇 X员工悲惨的一天: 早晨起来,发现闹钟没有按原先设定响起来。 一边烧水,一边穿衣服,临走前去喝水却发现水还没有烧开。 到了地铁站,发现公交卡没有钱了。 无奈之下只能去排队买票。 排了3趟地铁,终于到公司了,但是你却迟到了。 结果:尽管你已经非常努力,但是你还是迟到了。 那么,让我们看看这一连串 的倒霉事, 是什么让我们如此狼狈? ②什么是用户体验

用户体验(user experience)是以用户为中心的设计中最重要的一个部分,强调的是过程,是软件对用户行为产生的反应与用户期待值要尽可能的一致。 糟糕的用户界面表现: 表现一:过分使用各种奇形怪状、五颜六色的控件。 表现二:界面元素比例失调。比如按钮巨大无比,其尺寸甚至超过显示重要内容的文本框的界面。 表现三:界面元素凌乱。比如说,按钮和文本框摆放地点随意,该对齐的控件对不齐。 表现四:违背使用习惯。你按F1,它没有弹出帮助,却执行了一件绝对出乎你意料的动作。表现五:消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”,让用户不知道什么意思。 表现六:还有一种糟糕的用户界面,乍一看很厉害,实际上完全是缺乏规划的结果。这种

软件界面设计规范方案

软件界面设计规 1.界面规 1.1.总体原则以用户为中心。 设计由用户控制的界面,而不是界面控制用户。清楚一致的设计。所有界面的风格保持一致,所有具有相同含义的术语保持一致,且易于理解拥有良好的直觉特征。以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻,来帮助用户能迅速学会软件的使用。较快的响应速度。简单且美观。 1.2.原则详述 1.2.1.用户控制用户界面设计的一个重要原则是用户应该总是感觉在控制软件而不是感觉被软件所控制。操作上假设是用户--而不是计算机或软件--开始动作。用户扮演主动角色,而不是扮演被动角色。在需要自动执行任务时,要以允许用户进行选择或控制它的方式来实现该自动任务。提供用户自定义设置。因为用户的技能和喜好各不相同,因此他们必须能够个性化界面的某些方面。Windows为用户提供了对许多这方面的访问。您的软件应该反应不同的系统属性--例如颜色、字体或其他选项的用户设置。采取交互式和易于感应的窗口,尽量避免使用模态对话框,而使用"非模式"辅助窗口。"模式"是一种状态,它排除一般的交互,或者限制用户只能进行特定的交互。当最好使用一个模式或该模式只是可替换的设计时--例如,用于在一个绘图程序中选定一个特定感觉--请确保该模式是显然的、可见的,是一个明确的用户选定的结果,并且容易取消。在后台运行长进程时,保持前台式交互。例如,当正在打印一个文档,即使该文档不能被改变,用户也应该可以最小化该窗口。谅解。用户喜欢探索一个界面,并经常从尝试和错误中学习。一个有效的界面允许交互式的发现,它只提供一组合适的选择,并在用户可能破坏系统或数据的情况时发出警告。如果可行,还应提供可逆转或可还原的操作。即使在设计得很好得界面中,用户也可能犯错误。这些错误既可以是物理上得(偶然地指向了错误的命令或数据),也可以是逻辑上的(对选定哪一个命令或哪些数据做出了错误的决定)。有效的设计避免很可能导致错误的情况。它还包容潜在的用户错误,并且使用户易于还原。 1.2.2.清楚一致的设计一致允许用户将已有的知识传递到新的任务中,更快地学习新事物,并将更多的注意力集中在任务上。这是因为他们不必花时间来尝

用户界面设计及答案

1.用户满意度=功能+___人机界面_____+响应时间+可靠性+易安装性+____信息____+可维护性+其他因素 2. ____人机交互(人机对话)____是指人与计算机之间使用某种语言、以一定的交互方式,为了完成任务进行的一系列信息交换过程。 3.软件界面设计分为____功能性设计界面____、____情感性设计界面____、____环境性设计界面____。 4.进行系统分析和设计的第一步是___用户分析_____。 5.使用较早,也是使用最广泛的人机交互方式是____交互方式____。 6.软件界面开发流程包括____系统分析____、____系统设计____、____系统实施____三个阶段 7.设计阶段包括界面的____概念设计____、____详细设计____、____原型建立____与界面实现以及综合测试与评估等8.VB 是以结构化___Basic_____语言为基础、以____事件驱动作____为运行机制的可视化程序设计语言。 9.菜单使用形式主要有____菜单操作____和____Tba控件操作____两种。 10.随着计算机图形技术的发展,以直接操纵、桌面隐喻以及所见即所得为特征的____图形用户界面____技术广泛被计算机系统采用。 11.在用VB 开发应用程序时,一般要布置窗体、设置控件的属性、___编写代码___。 12. 假定在窗体上有一个通用对话框,其名称为CommonDialog1,为建立一个保存文件对话框,则需要把Action 属性设置为__value__。 13. 计时器事件之间的间隔通过__interval__属性设置。 14. 语句“Print “5+65=”;5+65”的输出结果为__5+65=70__。 15. 设有下列循环体,要进行4次循环操作,请填空。 x = 1 Do x = x * 2 Print x Loop Until__x<=32__ 16. 下列程序段的执行结果为__2 3 5__。 x = 1 y = 1 For I = 1 To 3 F= x + y x = y y = F Print F; Next I 17. 以下为3个列表框联动的程序,试补充完整。 Private Sub Dir1_Change() File1.Path=Dir1.Path End Sub Private Sub Drive1_Change() Drivel.Path=File1.Path;Dir1.Path=Drivel.Path__[7]__ End Sub 18. 在下列事件过程中则响应该过程的对象名是cmdl,事件过程名是__窗口标题事件__。 Private Sub cmd1_Click() Form1.Caption=“VisualBasic Example” End Sub 19. 当将文本框的SelStar 属性设置为0时,表示选择第开始位置在第一个字符之前,设置为1时表示__[9]__。 20. 以下程序代码实现单击命令按钮Command1 时形成并输出一个主对角线上元素值为“-”,其他元素值为“+”第6*6 阶方阵。 Privas Sub Command1_Click() DimA(6,6) For I = 1 To 6 For J = 1 To 6 If I = J Then Print “-” Else __[10]__ End If Print A (I,J); Next J Print Next I End Sub 21. 字母B的KeyAscii 码值为65,其KeyCode码值___[11]__。 22. Visual Basic 中的控件分为3类:__[12]_、ActioveX 控件和可插入对象。

BS系统界面设计规范

B/S系统界面设计规范 1. 引言 界面美观、操作易用性、维护成本低是评价B/S系统的关键。本规范参考了一些成熟产 品科学的开发方法,将开发过程中的方式、规则等强行的约束。希望藉此来提高用户操作感受,提升B/S产品的质量。 1.1. 编写目的 广义的界面概念包含了除页面布局设计之外,交互性的设计,及人体工程学方面的研究。本规范制订的依据从广义概念出发,总结以往项目的成败经验,目的是从整体上提升公司 B/S类产品的质量、开发效率。从以技术为中心发展为以客户为中心,将类似项目成功的经 验继承和积累下来,将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层 面。 新的开发方式强调分层,规范出界面设计人员做什么,服务器编程人员做什么,这样就把页面和控制代码两个层面清晰的分开。 1.2. 背景 B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点,在公司产品线中占 越来越大的比重,.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工 程方法统一起来,突出服务器端技术,这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作,团队的合作方式甚至决定了一个系统开发的成败。 目前公司较多的服务器端编程人员仍然处于后ASP时代”的开发方式,表现为前台 页面仍然与服务器代码高度的关联,带来的后果是重复建设、高昂的维护成本或失去控制的 项目,没有充分的发挥出集成开发工具的优势。 在以往的开发方式下界面设计侧重在静态页面的建设上,每个页面作为一个独立的模 块来处理,在页面交互中则是程序员根据自己的习惯来控制,程序对个人的编程风格的依赖 很强,这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的,甚至是背道而弛 的,当然也不利于规模化的团队合作。 1.3. 定义 术语定义: 效果图:由界面设计人员设计的页面效果图,综合了概要设计的业务需要和整个站点的风格,它规定了页面布局上的每个细节。 容器:即HTML标记的嵌套结构,如在表格-> 行-> 单元格内放置图片,那么可以认为单元格是放置图片的容器。 样式表:即级联式样式表CSS,它是W3C机构在HTML标记语言上扩展的格式语言。非标准交互控件:是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封装的控件,或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。 2. 界面设计规范细则 总体目标 以规范作为基本原则,在此框架内进行合理的扩展和变化,将站点内的每个模块服从于整个 站点,模块页面与高内聚”的控制代码紧密的结合在一起,同时对应于应用程序基于系统

界面设计必备,常用字体规范

这几天有人问我说:“最近看了好多教程,都老高大上了,但是老弟我做不到呀,想学点直接能拿来用的,这个要求过分吗……” 这个,好吧,那就直接说说能用的知识:字体字号。 也许你会说:字体字号?也太Low了吧,这个谁不知道重要呀。 对于这个问题,我想说:会和熟练,是两回事。一个App,不同部分的字体字号你能准确地说出来吗? 很多刚做APP界面的设计师,经常会因为字号,字体颜色,间距而困扰。 拿到设计需求后,开始进行设计,不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字左右间距层次不齐,导致与预期不符等。 这小节我将和大家理一理界面中常用的字体,字号,字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。 一.成也字,败也字 在设计师的职业生涯中,至少一次甚至多次在工作中因为字体不协调栽跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范。 我们常常会听到,这也太LOW了吧!!你能统一一下字体吗? 不明确而繁琐的字体搭配会导致整个画面失调。可以这样说,字体可以成就设计也可以毁掉设计。

问题的关键有: 1.字体样式太多,导致页面杂乱 2.使用的字体不易识别 3.字体样式和内容的气氛或规范不匹配 怎么避免这样的结果发生呢? 通过设计经验可以帮助你做出更好的版式了解不同平台的常用字体设计规范

在每个项目设计中只使用1-2个字体样式,而在品牌字有明确的规范的情况下,只需要一种字体贯穿全文,通过对字体放大来强调重点文案。字体用的太多,越显得不够专业。 不同的样式的字体,形状或系列最好相同,保证字体风格的一致性。 字体与背景的层次要分明 确保字体样式与色调气氛相匹配 二.界面中文字使用的规则 在不同平台的界面设计中规范的字体会有不同,像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体,在这我和大家分别介绍一下。 以下是在 72像素/英寸下的规范 移动端常规字体 IOS:常选择华文黑体或者冬青黑体,尤其是冬青黑体效果最好。

软件界面设计相关的各项介绍

软件界面设计相关的各项介绍 界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。具体包括软件启动封面设计,软 件框架设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏设计,安装过程设计,包装及商品化。 在设计的过程中有较多注意的关键问题,以下列出几点: (1)软件启动封面设计 应使软件启动封面最终为高清晰度的图像,如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式,并且对选用的色彩不 宜超过256 色,最好为216色安全色。软件启动封面大小多为主流显示器分辨率的1/6大。如果是系列软件将考虑整体设计的统一和延续性。在上面应该醒目的标注制作或支持的公司标志、产品商标,软件名称,版本号,网址,版权声明,序列号等信息,以树立软件形象,方便使用者或购买者在软件启动的时候得到提示。插图宜使用具有独立版权的,象征性强的,识别性高的,视觉传达效果好的图形,若使用摄影也应该进行数位处理,以形成该软件的个性化特征。 (2)软件框架设计 软件的框架设计就复杂得多,因为涉及软件的使用功能,应该对该软件产品的程序和使用比较了解,这就需要设计师有一定的软件跟进经验,能够快速的学习软件产品,并且在和软件产品的程序开发员及程序使用对象进行共同沟通,以设计出友好的,独特的,符合程序开发原则的软件框架。软件框架设计应该简洁明快,尽量少用无谓的装饰,应该考虑节省屏幕空间,各种分辨率的大小,缩放时的状态和原则,并且为将来设计的按钮,菜单,标签,滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配,将软件商标放在显著位置,主菜单应放在左边或上边,滚动条放在右边,状态栏放在下边,以符合视觉流程和用户使用心理。 (3)软件按钮设计 软件按钮设计应该具有交互性,即应该有3到6种状态效果:点击时状态;鼠标放在上面但未点击的状态;点击前鼠标未放在上面时的状态;点击后鼠标未放在上面时的状态;不能点击时状态;独立自动变化的状态。按钮应具备简洁的图示效果,应能够让使用者产生功能关联反应,群组内按钮应该风格统一,功能差异大的按钮应该有所区别。 (4)软件面板设计

软件工程用户界面设计报告.doc

目录0. 文档介绍2 0.1 文档目的 2 0.2 文档范围 2 0.3 读者对象 2 0.4 参考文献 2 0.5 术语与缩写解释 2 1. 应当遵循的界面设计规范3 2. 界面的关系图和工作流程图 5 3. 主界面 5 4. 子界面A 6 5. 子界面B 7 6. 美学设计7 7. 界面资源设计错误!未定义书签。 8. 其他错误!未定义书签。

文档介绍 0.1 文档目的 界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。界面设计文档可以让用户对软件产品有了更直观的了解,并且了解各个模块的设计及用意。 0.2 文档范围 文档包括公用界面设计,学生用户界面设计,教师用户界面设计,其中各个界面包括框架设计,编程设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏设计。 0.3 读者对象 登陆网站的游客、注册成会员的学生、教师以及管理员。 0.4 参考文献 提示:列出本文档的所有参考文献(可以是非正式出版物),格式如下: [1] 张海藩,《软件工程导论(第5版)》,清华大学出版社,1900年01月 [2] 杨培添,《软件界面设计》,电子工业出版社,2007年02月 [3] 林锐,《Web软件用户界面设计指南》,电子工业出版社,2005年5月 [4]吴士力,汪孝宜,胡俦,《网络系统开发实例精粹(JSP版)》,电子工业出版社, 2006年8月 [5] 黄艳群,黎旭,李荣丽,《设计·人机界面》,北京理工大学出版社,2007年5月https://www.360docs.net/doc/6f5201438.html,/view/43210.html?wtp=tt https://www.360docs.net/doc/6f5201438.html,/view/119481.htm 0.5 术语与缩写解释

UI设计规范说明书

UI设计规范说明书 修订历史记录 日期版本说明作者 1前言 1.1文档简介 本文档是对整个系统界面设计风格进行描述,和用户交互的最终界面在《详细设计说明书》中设计和解释。 1.2系统定义 用户界面:又称人机界面,实现用户与计算机之间得通信,以控制计算机或进行用户和计算机之间得数据传送得系统部件。 GUI:即图形用户界面,一种可视化得用户界面,它使用图形界面代替正文界面。 1.3编写目的 统一图形界面规范,为开发人员提供统一的标准,为用户提供统一显示效果、统一操作方式的界面,便于用户识别与使用。

2界面设计准则Rules 2.1引言Introduction 在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、风格、颜色、术语、提示信息等方面确保一致。 2.2主要内容Content 2.2.1显示信息一致性原则 坚持图形用户界面(GUI)设计原则,界面直观、对用户透明:用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。 明确用户是所有处理的核心,不应该有应用程序来决定处理过程,所以用户界面应当由用户来控制应用如何工作、如何响应,而不是由开发者按自己的意愿把操作流程强加给用户。 界面设计必须经过最终确认才能完成。 2.2.2布局合理化原则 应注意在一个窗口内部所有控件的布局和信息组织的艺术性,使得用户界面美观。在一个窗口中按tab键,移动聚焦的顺序不能杂乱无章,tab的顺序是先从上至下,再从左至右。一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。布局力求简洁、有序、易于操作。 2.2.3鼠标与键盘一致性原则

移动应用界面设计的尺寸规范

移动应用的界面设计画布尺寸设计多大(特别是Android)、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现? 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的尺寸规范等问题,希望能给移动端的新手设计师些许指引。若有不当之处,欢迎斧正。 一、android篇 1、android分辨率 屏幕尺寸 指实际的物理尺寸,为屏幕对角线的测量。 为了简单起见,Android把实际屏幕尺寸分为四个广义的大小:小,正常,大,特大。 像素(PX) 代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。 屏幕密度 为解决Android设备碎片化,引入一个概念DP,也就是密度。指在一定尺寸的物理屏幕上显示像素的数量,通常指分辨率。为了简单起见,Android把屏幕密度分为了四个广义的大小:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi)像素= DP * (DPI / 160 ) 例如,在一个240dpi的屏幕里,1DP等于1.5PX。 于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件,建议参考现主流硬件分辨率),然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。 典型的设计尺寸 ? 320dp:一个普通的手机屏幕(240X320,320×480,480X800) ? 480dp:一个中间平板电脑像(480×800) ? 600dp:7寸平板电脑(600×1024) ? 720dp:10寸平板电脑(720×1280,800×1280) Android SDK模拟机的尺寸 屏幕大小低密度(120)ldpx 中等密度(160)mdpi 高密度(240)hdpi 超高密度(320) xhdpi 小屏 幕 QVGA(240×320)480×640 普通屏幕WQVGA400(240X400) WQVGA432(240×432) HVGA(320×480) WVGA800(480×800) WVGA854(480×854)600×1024 640×960 大屏幕WVGA800 *(480X800) WVGA854 *(480X854) WVGA800 *(480×800)WVGA854 *(480×854)600×1024 超大屏幕1024×600 1024×768 1280×768WXGA (1280×800) 1536×1152 1920×1152 1920×1200 2048×1536 2560×1600 注意,ppi、dpi 是密度单位,不是度量单位: * ppi (pixels per inch):图像分辨率(在图像中,每英寸所包含的像素数目)* dpi (dots per inch):打印分辨率(每英寸所能打印的点数,即打印精度)

相关文档
最新文档