
用户界面设计原则.ppt
33页单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,用户界面设计原则,内容概要,设计的总则,界面设计的,3,大原则,界面设计的基本原则,界面设计的一般详则,桌面应用界面设计的原则,Web,应用界面设计的原则,4.1,设计的总体原则,功能原则,计算机不能破坏用户的工作,也不能因其懈怠而使用户的工作受到破坏,用户原则,计算机不应该浪费用户的时间,或者要求用户做与实现目的无关的其他事情,4.1.1,信息架构原则,一个界面一个主题,个人信息,&,公共信息,两种基本内容:列表和表单,越少的信息越好,用户生成的内容有两个状态:浏览状态,&,编辑状态,结构树尽量窄而浅,并保持平衡,与现实经验一致,固定的位置,并列的样式,4.1.2,界面表达原则,越少的信息量越好,结构化更易于理解,信息的表达应该清楚、明确、直接,操作可识别,操作前,结果可预知,操作时,操作有反馈,操作后,操作可撤销,让用户知道身处何地,避免内容看上去象广告,不提供多余的功能,相同的功能,在不同的页面中应保持一致性,措辞统一,4.1.3,视觉表现原则,滚动条看上去像滚动条,表单统一的对齐方式,重要的内容放在第一屏,导航在第一屏的上半部,避免使用装饰性的图标,避免内容看上去像广告,醒目的光标样式,红色表示警告,绿色表示正常,黄色表示提醒,灰色表示,“,暂不可用,”,4.2,界面设计的三大原则,以用户为中心,将界面置于用户的控制之下,减轻用户的记忆负担,良好的直觉特性,保持界面的一致性,4.2.1,用户中心,用户应该总是感觉在控制软件而不是感觉被软件所控制,用户,-,而不是计算机或软件,-,开始动作,采取交互式和易感应的窗口,从用户的视角出发,使用用户的语言,后台运行长进程时,保持前台的交互性,容忍用户探索中出错,提供用户自定义设置,4.2.2,记忆负担,用熟悉的隐喻为用户的任务提供直接而直观的界面,唤醒用户的知识和经验,支持用户认知而不是记忆,与常见软件保持一致,4.2.3,一致性,一致性为用户提供熟悉可预测的环境,用户能够将已有的知识应用到新的任务中,从而更快地接受新事物,统一的命令术语,一致的操作环境,一致的功能和响应,一致的隐喻,4.3,界面设计的基本原则,界面简洁方便,较快的响应速度,整体的美感,视觉冲击力和吸引力,标准化,IBM 1993/Microsoft 1995,工业标准,人性化,定制界面,升级是常态,多媒体,4.4,界面设计的一般详则,交互,布局,色彩,图标,联机帮助,错误处理,4.4.1,交互的设计原则,尽量提供对所有功能的键盘访问,尽量提供对所有功能的鼠标访问,不可逆的操作要求用户确认,耗时的操作给出反馈,可视的状态转换反馈,鼠标右键仅用于快捷菜单,快捷键的习惯一致性,避免水平滚动条,4.4.2,版式布局的设计原则,平衡原则,整齐有序、整体平衡,协调原则,划分一致的功能区,对比原则,预期原则,屏幕上所有对象的动作可预期,顺序原则,根据需要排列对象显示的顺序,4.4.3,色彩的设计原则,合理利用颜色,实现内容与形式的协调,采用柔和中性的颜色,支持用户定制,颜色设计一致,尽量用单色,一屏的色彩种类少于,7,种,对象颜色的选取符合习惯(如果有的话),重要对象选取醒目颜色,为区分对象,首先按亮度、其次按颜色,背景色选取浅色调,暖色调接近观众,冷色调远离观众,4.4.4,图标的设计原则,图标表示的映射关系尽可能的直观简单,图标表示的映射关系是唯一的,一个图标系列中的映射模式相同,附以简短的文字作为图标的冗余信息,4.4.5,联机帮助的设计原则,对用户的操作随时给出必要的帮助,提供帮助信息而不是数据,帮助信息的内容简洁易懂,帮助信息的形式包括图表、动画和声音等,帮助信息有统一的风格,为不同类型的用户提供不同的帮助功能,帮助不能影响用户的工作任务,联机帮助结束后应该返回用户的工作任务,4.4.6,错误处理的设计原则,检测用户的错误,并提供简明的错误处理手段,报错信息以可视化的形式出现,报错信息语气友善,报错信息尽可能准确,报错信息简洁明了、通俗易懂,报错信息风格一致,提供保护功能和恢复,(Undo),功能,4.5,桌面应用界面设计原则,易用性,规范性,合理性,协调性,独特性,安全性,多窗口,菜单位置,快捷方式,联机帮助,4.6 Web,界面设计原则,强调整体,形式与内容的统一,3C,(,Concise/Consistent/Contrast,),减少浏览的层次,最少垂直滚动,避免,/,隐藏右键操作,页面体积最小,屏幕尺寸、屏幕分辨率、浏览器的兼容,。









![2019版 人教版 高中语文 必修 上册《第一单元》大单元整体教学设计[2020课标]](http://img.jinchutou.com/static_www/Images/s.gif)


