UI界面设计原则

UI界面设计原则第1页/共99页UI设计原则UI设计的宗旨：1、减少用户的认知负担2、保持界面的一致性3、满足不同目标用户的创意需求4、用户界面友好性5、图标功能的一致性6、建立界面与用户的互动交流第2页/共99页UI的主要应用领域：手机通讯移动产品、电脑操作平台、软件产品、PDA产品、数码产品、车载系统产品、智能家电产品、游戏产品、产品的在线推广等。UI设计原则第3页/共99页空间记忆当人们进入一个全新环境时,他们需要对空间建立认知模型,要有个空间记忆的感觉。同样，当新用户打开一个全新、陌生的软件时，用户也希望有个类似站点地图的东西。但如果想让用户更加自如的使用软件，让用户毫无顾及的去尝试，不怕迷路，我们必须为用户建立起空间记忆模式。它犹如沙漠中迷途者手中的指南针与行驶在荒原上汽车装的GPS一样.第4页/共99页

当人们使用东西或文档时，他们经常通过回忆它们在哪里来再次找到它们，而不是它们的名字。

很多软件把它们的表单按钮——确定、取消等——放在预定的位置上，部分原因是由于它们的空间记忆依赖性。

在复杂的应用系统中，工具条上的工具、层级结构中的对象等，也可以由记忆它们的相对位置找到；因此，我们应该小心使用像响应式展开这样的模式。第5页/共99页

把某个东西添加到界面上通常不会引起麻烦，但是把控件重新排列会打乱空间记忆，从而难以找到。空间记忆和习惯之间的关系很密切。和习惯一样，空间记忆也是一个在应用中及在应用间保持一致性会带来好处的理由。人们会期望在类似的地方找到类似的功能表现。顺便说一句，网站导航菜单列表的顶部和底部都是很特别的区域，从认知的角度说，与处于菜单中间的项目相比，顶部和底部的项目会获得用户更多的注意力，记忆也更持久。如果他们发生改变，对用户的重新建立空间记忆势必会造成影响，请慎之。不论软件是升级还是改善。交互方式不能随意改变，当用户建立起空间记忆对公司软件产品的长期发展是很有必要的。第6页/共99页一、图形界面设计的基本原则第7页/共99页用户原则是图形界面设计最基本和最重要的设计原则。所谓用户原则，就是在软件界面设计中，要充分体现出“以人为本”、“用户友好”的基本要求，做到：易懂、易学、易用。第8页/共99页1.1图形界面设计的“黄金法则”用户原则是大原则，人们在长期的图形界面设计过程中，总结出了图形界面设计中一些有用的法则，这些原则被称作软件界面设计的“黄金法则”。这些法则进一步丰富了用户原则，使用户原则变得实在、可操作。第9页/共99页1、图形界面的一致性原则一致性原则是“黄金法则”中最重要的原则，也是界面开发人员最容易忽略和违反的一个原则。一致性原则有利于减少用户的学习量和记忆量，用户可以把局部的经验和知识推广到其他应用场合。第10页/共99页

一致性原则要做到：界面外观上的一致：具有相似的外观布局和信息显示格式。例如Office和Adobe软件。操作次序上的一致：例如不同命令操作后的显示效果一致。概念、语义、命令语法一致：例如同一功能的命令名称要一致，例如“复制”命令。不同软件开发商之间的界面设计要保持某种一致：例如Windows操作系统下的各种软件都具有一致性。第11页/共99页Dreamweaver界面第12页/共99页Flash界面第13页/共99页AfterEffects界面第14页/共99页Premiere界面第15页/共99页2、图形界面的简洁性原则简洁不仅是界面设计的美学原则，而且也是显示屏幕大小所要求的。复杂化是界面设计的一大误区！简洁性原则主要表现在：内容归类合理、内容排列整齐一致第16页/共99页第17页/共99页3、图形界面的快捷方式原则用户希望能减少人机对话的次数以减轻操作的频率，快捷方式就是一个较好的办法。Windows常用的快捷方式有：删除、查找、插入、保存、打开、复制、粘贴、帮助、打印、关闭、剪切等。Windows操作操作系统下的应用程序基本都遵循一样的快捷方式原则。第18页/共99页第19页/共99页4、软件信息的反馈原则软件界面对用户的每个操作都应当提供及时的信息反馈，尤其是简明的错误处理和帮助功能是软件界面的重要反馈信息。例如光盘刻录程序在工作的时候提示进度，结束的时候告诉任务完成、如果没有光盘提示插入光盘等反馈信息；手机信息发送成功\失败提示等。第20页/共99页5、软件界面的在线帮助原则软件界面的友好性还体现在为用户提供有好的帮助界面，帮助用户学习和使用本软件。如下图：第21页/共99页第22页/共99页6、软件界面的操作可逆性原则操作的可逆性对用户来说，是一种有效的鼓励。如果用户知道操作是可逆的，即使发生错误也能恢复到原来的状态，用户就能大胆地对不熟悉的功能进行探索和学习。如下图：第23页/共99页第24页/共99页7、图形界面的最少记忆项目原则好的图形界面应该尽量减少用户的记忆量，用户必须记住的任何信息应该是和当前操作有关的，而不是和计算机相关。为减少记忆量，应该通过菜单设计及联机帮助等形式帮助用户记忆，一般地说，用户的短期记忆不要超过7个项目。第25页/共99页8、图形界面操作序列的完整性原则界面中每个操作序列都应该清楚地标明开始和结结束，其余的操作应插在中间。操作序列的结尾应该给用户完成的感觉，并指示下一个任务的开始。想象一下发送手机信息的整个操作过程。第26页/共99页1.2图形界面的配色原则（色彩构成）在黑白显示器的年代，人们是不用考虑色彩的配置的。今天，屏幕色彩的配置是屏幕显示设计的一个关键。恰当的色彩运用，不但能美化软件界面，而且还能够增加用户的兴趣，引导用户顺利完成操作。《色彩构成》是配色的基础，请同学们好好回顾一下，学会把色彩构成理论用到图形界面设计当中。第27页/共99页例如，在电子地图上可以用不同的颜色区分不同的省、不同的国家；也可以用同一颜色的不同深法度来区分海洋的深度或地形的高度；在电脑游戏中可用颜色来表示游戏的进程。相反地，如果错误地使用颜色，会误导用户放弃操作，如有的打印程序用红色表示激光打印机预热就绪，可以打印，但有的用户却误解为机器出现危险而放弃操作。因此，屏幕色彩的配置直接关系到用户对软件操作的信赖程度。第28页/共99页1、色调的一致性色调的一致性指的是在整个软件系统中要采用统一的色调，就是有个主色调。例如，用绿色表示运行正常，那么软件的色彩编码就要始终用绿色表示运行正常，如果色彩编码改变了，用户就会认为信息的意义变了。所以，在软件界面设计前，设计者应该把色彩编码标推方案写出来，以利于每一个设计者遵守。例如很多程序采用交通灯的色彩编码含义。第29页/共99页第30页/共99页第31页/共99页第32页/共99页第33页/共99页第34页/共99页2、保守地使用色彩大多数的界面设计者都赞成这一色彩配置原则。所谓保守地使用色彩，就是从大多数的用户考虑出发，根据不同的用户设计不同的色彩。界面设计时提倡采用一些柔和的、中性的颜色，以便于绝大多数用户能接受。因为有时急于使用色彩突出显示效果，反而适得其反。如有的软件界面使用大号字母，每个字母还使用不同的颜色显示，在远距离看来，屏幕耀眼夺目，可是它不利于阅读，而且会导致多屏显示。

第35页/共99页3、色彩选取尽可能符合人们的习惯用法对于一些专门软件，在配置颜色时，要充分考虑用户对颜色的喜爱。例如明亮的红色、绿色和黄色适用于为儿童设计的应用程序。一般来说红色表示错误，黄色表示警告，绿色表示运行正常等等。思考下面配色方案可能适合的群体和环境：

第36页/共99页第37页/共99页第38页/共99页第39页/共99页第40页/共99页第41页/共99页第42页/共99页第43页/共99页4、把色彩作为功能分界的识别元素不同的色彩可以帮助用户加快对各种数据的识别，明亮的色彩可以有效地突出或者吸引人们对重要区域的注意力。

第44页/共99页5、能让用户控制配色方案通常图形界面都可以让用户自定义界面色彩配置，选择自己最喜欢的颜色。例如windows操作系统界面，浏览器，QQ界面等等。

第45页/共99页第46页/共99页6、色彩搭配要便于阅读要确保屏幕的可读性，就要注意色彩的搭配，有效的方法是遵循对比法则。在浅色背景上使用深色文字，在深色背景上使用浅色文字等等。动态对象的颜色应该比较鲜明，静态对象的颜色应该较暗淡。

第47页/共99页第48页/共99页第49页/共99页第50页/共99页7、色彩数目应该有限建议把单个界面颜色限制为4种以内，整个软件系统系列颜色应限制在7种以内。

第51页/共99页二、UI设计的规范法则第52页/共99页三.设计规则和规范(界面)界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够，直到最近网页制作的兴起，才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。第53页/共99页目前流行的界面风格有三种方式：多窗体、单窗体以及资源管理器风格，无论那种风格，以下十条规则是应该被重视的。1.易用性：按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。第54页/共99页易用性细则：1)：完成相同或相近功能的按钮用框子框起来，常用按钮要支持快捷方式。2)：完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。3)：按功能将界面划分局域块，用框子框括起来,并要有功能说明或标题。第55页/共99页4)：界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。5)：界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。6)：同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。7)：分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab第56页/共99页8)：默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作9)：可写控件检测到非法输入后应给出说明并能自动获得焦点。10)：Tab键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式。11)：复选框和选项框按选择几率的高底而先后排列。第57页/共99页12)：复选框和选项框要有默认选项，并支持Tab选择。13)：选项数相同时多用选项框而不用下拉列表框。14)：界面空间较小时使用下拉框而不用选项框。15)：选项数叫少时使用选项框，相反使用下拉列表框。16)：专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。第58页/共99页目前流行的界面风格有三种方式：多窗体、单窗体以及资源管理器风格，无论那种风格，以下十条规则是应该被重视的。2：规范性：通常界面设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具箱、状态栏、滚动条、右键快捷菜单”的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。小型软件一般不提供工具箱。第59页/共99页规范性细则：1)：常用菜单要有命令快捷方式。2)：完成相同或相近功能的菜单用横线隔开放在同一位置。3)：菜单前的图标能直观的代表要完成的操作。4)：菜单深度一般要求最多控制在三层以内。5)：工具栏要求可以根据用户的要求自己选择定制。第60页/共99页6)：相同或相近功能的工具栏放在一起。

7)：工具栏中的每一个按钮要有及时提示信息。8)：一条工具栏的长度最长不能超出屏幕宽度。9)：工具栏的图标能直观的代表要完成的操作。10)：系统常用的工具栏设置默认放置位置。

11)：工具栏太多时可以考虑使用工具箱。第61页/共99页12)：工具箱要具有可增减性，由用户自己根据需求定制。

13)：工具箱的默认总宽度不要超过屏幕宽度的1/5。14)：状态条要能显示用户切实需要的信息，常用的有：目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。15)：滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。第62页/共99页16)：状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。17)：菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。18)：菜单和状态条中通常使用5号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。19)：右键快捷菜单采用与菜单相同的准则。第63页/共99页3：帮助设施：系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。第64页/共99页帮助设施细则：1)：帮助文档中的性能介绍与说明要与系统性能配套一致。2)：打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。3)：操作时要提供及时调用系统帮助的功能。常用F1。4)：在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。5)：最好提供目前流行的联机帮助格式或HTML帮助格式。第65页/共99页6)：用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词。7)：如果没有提供书面的帮助文档的话，最好有打印帮助的功能。8)：在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。第66页/共99页4：合理性：屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。第67页/共99页合理性细则：1)：父窗体或主窗体的中心位置应该在对角线焦点附近。2)：子窗体位置应该在主窗体的左上角或正中3)：多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜。4)：重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。5)：错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。第68页/共99页6)：与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示，没法使用该按钮)。7)：对可能造成数据无法恢复的操作必须提供确认信息,给