界面设计基本原则课件

界面设计基本原则,鼎利通信研发部 2008,制订并严格遵守标准,产品在开始设计的时候就制定统一的标准，开发过程当中严格遵守，所有开发人员不得随意违反界面准则，产品经理应该负责制定标准 遵循国际标准或者微软的普遍标准 如果不知道怎么界面设计，就请参考Windows和Office,一致性！,一致性，最重要！一致性包括操作的一致性和界面布局元素的一致性，也包括业务逻辑控制的一致性，文字说明一致性。 操作一致性：如果你可以通过在某个列表框里双击其中一个条目来触发一个事件，那你必须保证在所有的列表框里双击条目都会产生相似的反应。弹出菜单、拖放等等也是一样，包括【OK】按钮在左边和右边都要一致！ 界面布局一致性：所有窗口里的按钮都应该放在同一个位置，按钮标题与提示的措辞应保持一致，还应保持一致的色彩设置。 业务逻辑一致性：例如输入后会立即检查数据有效性，还是在确定的时候检查有效性等等； 名词和术语也要一致。我们的典型问题：每个软件的字段名称都不一样！各个软件随心所欲。 一致性也包括文档的一致性，如说明书、手册与界面一致等等 一致的用户界面会使得使用者建立起关于应用程序工作流程的正确理解，而用户对应用程序工作流程的正确理解会带来更低的训练与支持费用。,典型例子,问题在那里？,易用性,按钮名称应该易懂，用词准确，屏弃模糊的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。 理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。,布局方式,阅读习惯是从左到右，由上至下。所以你在界面设计中必须遵循从左到右，由上至下的原则 两种常见布局方式都可以，但在同一个软件中一定要统一！ 界面布局必须整齐，看起来不要凌乱，控件对齐是基本要求！ 黄金分割比例，考虑到整个界面的和谐性 界面应该整洁，朴素，不要太花哨,文字标签问题,文字标签要恰当，过多和过少都是问题，内容要准确，指示要合理 文字标签要考虑到将来多语言化的问题，预留足够的长度空间，一般地同样含义的英语的长度比中文长40%60% 使用适当的字体，注意字符集的问题，例如在Win9x和XP下界面显示不一致,操作方式,操作方式，以普通点击为准，如单击，双击，回车是用户最优先考虑到的，界面操作都应该考虑到这点 弹出菜单操作次之 拖放再次之 右键拖放再次之 辅助键盘特定按键，再加鼠标的，最次之，如按住Ctlr + Alt + 鼠标拖放之类等操作是最隐藏功能的，用户几乎不会用到！ 记住：MAC OS和鼠标，只有一个按键，一样可以搞定所有事情！ 高级的操作特性只能作为方面操作的补充，而不能作为唯一的手段，即用户必定可以通过弹出菜单、点击等来完成相关的操作,恰当的说明,输入特定格式数据时，要在数据输入框附近添加恰当的说明文字,明确含义无歧义,界面的功能和文字说明等，不能有歧义 右边的问题？ Reset Current Page Reset All？ 功能性问题：Reset之后是OK后起作用，还是Cancel后可以取消？,界面提示,适当的用户界面的标签与消息内容措辞，除的确是行业的专业术语外，尽量不采用缩写 界面提示包括文本标签、Tool Tips等等，建议对一些功能稍微复杂的控件都加上Tool Tips 提示信息必须准确，不要使用模糊的措辞，例如“输入错误”和“没有输入用户名”,合理分组,界面元素合理进行分组，如功能性分组，控件类型分组等等 分组方式：分组线，面板，选项卡，分组框等等,“高级”,对于界面上的功能，不常用的，可以单独折叠起来，用一个“高级”按钮来展开和收拢，降低用户的“复杂”感觉程度，提升亲和力和“易用性”感觉,对话的三阶段,一连串的动作应该被组织成开始、中间、结束三部份。当动作结束的时候，要提供回馈让使用者知道动作已经完成。在做下个一连串的动作之前，先告知使用者整个流程，能够减轻使用者的压力、提高满意度。,合理反馈,鼠标指针状态：忙时、正常、后台等等 界面提示信息文字准确恰当 进度指示准确合理 控件状态：变灰，消失，禁止输入，只读等等 注意指示信息的恢复！使用try finally end/ try catch等处理异常，避免潜在问题 一般方式： UpdateUI(False); Try / Do something Finally UpdateUI(True); End; 反馈规则：越频繁的动作，反馈强度越低，越重要越不常用动作反馈强度越大,引导信息,合理和恰当的引导信息，提示用户该怎么去做！ 用户第一反应应该是看得见，摸得着的东西，而不是隐藏起来的 右边对话框有什么问题？,对话框,对话框不能太多，尤其是对话框中再弹出对话框，层次不要超过7层，一般超过3层已经让用户感觉不好了 流行的方式：多页面方式，而不是弹出对话框，如右图,默认按钮,默认按钮应该是非破坏性的 防止用户误操作如误按回车损坏数据 右边对话框的默认按钮应该为Cancel才对,窗口Owner,注意窗口的Owner属性，避免窗口不经意被切换到后台导致无法切换回来而出现假死机情况 Delphi的程序经常发生类似情况，窗口动态创建时可以指定Owner就没有问题，重载CreateParams，设定Para. WndParent即可 对话框设定Owner之后，对话框弹出时，点击Owner窗体，则对话框会闪动标题栏，说明Owner OK，否则就存在“假死机”隐患。 MessageBox应该设定对话框的ParentHandle，否则以桌面为Owner，显示也会有问题,注意窗口的缩放,注意窗口的缩放大小对控件的影响 固定大小的窗体，请禁用窗体大小控制 需要用户调整大小的，请注意设定控件的Anchors属性，或者自己写代码调整窗体的大小、位置等,分辨率问题,注意界面的分辨率设定，开发状态和运行在不同的系统上，分辨率是很重要的 窗口的初始化位置也很重要，要注意窗体的初始化位置，一般的对话框，应该是在Owner窗体的正中间显示，应用程序窗体应该是Screen的正中间或者最大化 特别是在高分辨率下开发的窗体，到低分辨率下后，可能下面的OK按钮别人都点击不到！ 对话框窗体设计的分辨率参考标准是640 * 480，也就是说一个对话框的大小，最好不要超过640 * 480，否则你需要自己按比例缩小窗体（Scale特性）,快捷键问题,界面快捷键要按标准方式，如Ctrl + C，Ctrl + V 界面快捷键要统一 快捷键要考虑全局和单窗口方式 快捷键不要冲突 考虑没有鼠标的用户！（远程桌面、笔记本、服务器、临时没有鼠标等等） 专家级别用户使用快捷键是非常有效的，考虑到用户使用频率！,常见快捷键,复制，粘贴，剪切，撤销，全选，查找：Ctrl + C, Ctrl + V, Ctrl + X，Ctrl + Z，Ctrl + A，Ctrl + F 打开，新建，保存，打印：Ctrl + O，Ctrl + N，Ctrl + S，Ctrl + P Tab，Ctrl + Tab，Alt + F4，Shift + Tab，F1，F10，Ctrl + F6，Ctrl + F4 软件自定义的快捷键应避免和通用快捷键冲突,弹出菜单问题,弹出菜单要合理 弹出菜单要是Context Sensitive的，不要把无关的也加进来 防止滥用弹出菜单 弹出菜单中不用的选项绝对要禁止或者隐藏掉 隐蔽的弹出菜单要有合理的提示，有的用户可能考虑不到用右键！,界面密度,整体窗口布局的密度不应大于40%，局部密度不应该大于62% （Mayhew，1992） 密度过大，可以通过调整表现形式来解决,错误处理,应该在恰当的时候就检查输入错误 输入的时候立即检查 对话框点击确定后，关闭前做检查 错误处理方式越简单越好。最好不要让系统有严重错误的可能性。如果还是造成错误，系统应该能够侦测出出来，并提供一个简单、使用者可以理解的错误处理方式 错误提示信息应该准确恰当，下面那个更恰当？ “输入错误” “用户名不正确”,允许撤销,应该允许用户恢复到改动前，允许用户撤销最近的操作 恢复改动，回到最近的保存状态 恢复默认值 回到上一步功能 “取消”对话框 撤销可以降低使用者的担心和焦虑，“胜败乃兵家常事，大侠请重新来过”，撤销可以鼓励用户探索不熟悉的东西,满足使用者的控制需求,让用户感觉到是他们在玩电脑，而不是电脑在玩他们，有经验的使用者强烈的感觉到他们在控制系统，做出动作之后，系统提供回馈。系统设计上要让使用者作为动作的处发者，而不是响应者。,减少短期记忆需求,人类的短期记忆有限，因此显示上要保持简单、能同时显示多页数据以减少窗口切换频率，减少记忆指令和动作顺序的时间。 故事：Fleet 4的交叉页面跳转,一般准则,整形数右对齐，浮点数以小数点为基准对齐，字符串左对齐 禁止使用，而不是不显示，避免给用户造成迷惑（当然License需要的除外） 使用容易阅读的字体如宋体，Times Roman等，一个界面不使用超过3种字体（下划线，颜色不同等都算不同字体） 遵循色彩对比度规则：即在浅色背景上显示深色文本或者在深色背景上显示浅色文本 适当的使用色彩 ：用户可能色盲也可能色弱，或者在不同的电脑上表现不一样（显示器显示能力限制、显示配色方案主题不一样、不同的操作系统默认处理方式不一样等） 颜色使用要适当，最好在3种颜色之内。遵循普遍的标准，例如红色表示错误，黄色表示警告，绿色表示正常等；图标使用也类似,易用性细则 1,完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。 完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。 按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。 界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。 界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。 同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。 分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab,易用性细则 2,默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。 可编辑控件检测到非法输入后应给出说明并能自动获得焦点。 Tab键的顺序与控件排列顺序要一致，目前流行总体从上到下，同时行间从左到右的方式。 复选框和选项框按选择几率的高底而先后排列。 复选框和选项框要有默认选项，并支持Tab选择。 选项数相同时多用选项框而不用下拉列表框。 界面空间较小时使用下拉框而不用选项框。 选项数叫少时使用选项框，相反使用下拉列表框。 专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。,美观与协调 1,界面应该适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。 长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。 布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。 按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。 按钮的大小要与界面的大小和空间要协调。 避免空旷的界面上放置很大的按钮。 放置完控件后界面不应有很大的空缺位置。 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观，很少使用超过12号的字体。在一般应用程序中考虑 Tahoma 等系统字体,美观与协调 2,前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。常用色考虑使用Windows界面色调。 如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。 界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。 如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。 对于含有按钮的界面一般不应该支持缩放，即右上角只有关闭功能。 通常父窗体支持缩放时，子窗体没有必要缩放。 如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。,建议,界面和业务逻辑以及数据分离原则 * 使用非破坏性功能的默认按钮 ：例如如果默认删除数据，那么用户很可能无