第九章UI界面设计原则

交互设计的核心 ●一切以用户为中心的设计。
UI设计原则
UI设计的宗旨： ●1、减少用户的认知负担 ●2、保持界面的一致性
●3、满足不同目标用户的创意需求
●4、用户界面友好性
●5、图标功能的一致性
●6、建立界面与用户的互动交流
UI设计原则
UI的主要应用领域：
手机通讯移动产品、电脑操作平台、软件产 品 、PDA产品 、数码产品 、车载系统产品、 智能家电产品 、游戏产品 、产品的在线推 广等。
2)：完成同一功能或任务的元素放在集中位置，减少鼠标 移动的距离。
3)：按功能将界面划分局域块，用框子框括起来,并要有 功能说明或标题。
4)：界面要支持键盘自动浏览按钮功能，即按Tab键的自
动切换功能。
5)：界面上首先应输入的和重要信息的控件在Tab顺序中 应当靠前,位置也应放在窗口上较醒目的位置。
1、色调的一致性 色调的一致性指的是在整个软件系统中要采 用统一的色调，就是有个主色调。例如，用 绿色表示运行正常，那么软件的色彩编码就 要始终用绿色表示运行正常，如果色彩编码 改变了，用户就会认为信息的意义变了。所 以，在软件界面设计前，设计者应该把色彩 编码标推方案写出来，以利于每一个设计者 遵守。
不同的色彩可以帮助用户加快对各种数据的识 别，明亮的色彩可以有效地突出或者吸引人们 对重要区域的注意力。
5、能让用户控制配色方案
通常图形界面都可以让用户自定义界面色彩配 置，选择自己最喜欢的颜色。例如windows操作 系统界面，浏览器，QQ界面等等。
6、色彩搭配要便于阅读
要确保屏幕的可读性，就要注意色彩的搭配， 有效的方法是遵循对比法则。在浅色背景上使 用深色文字，在深色背景上使用浅色文字等等。 动态对象的颜色应该比较鲜明，静态对象的颜 色应该较暗淡。
例如很多程序采用交通灯的色彩编码含义。
2、保守地使用色彩
大多数的界面设计者都赞成这一色彩配置原则。所谓 保守地使用色彩，就是从大多数的用户考虑出发，根据 不同的用户设计不同的色彩。界面设计时提倡采用一些 柔和的、中性的颜色，以便于绝大多数用户能接受。因 为有时急于使用色彩突出显示效果，反而适得其反。如 有的软件界面使用大号字母，每个字母还使用不同的颜 色显示，在远距离看来，屏幕耀眼夺目，可是它不利于 阅读，而且会导致多屏显示。
1.1 图形界面设计的“黄金法则”
用户原则是大原则，人们在长期的图形界面设 计过程中，总结出了图形界面设计中一些有用 的法则，这些原则被称作软件界面设计的“黄 金法则”。这些法则进一步丰富了用户原则， 使用户原则变得实在、可操作。
1、图形界面的一致性原则 一致性原则是“黄金法则”中最重要的原则， 也是界面开发人员最容易忽略和违反的一个 原则。
把某个东西添加到界面上通常不会引起麻烦，但是把控件
重新排列会打乱空间记忆，从而难以找到。空间记忆和习惯之间 的关系很密切。和习惯一样，空间记忆也是一个在应用中及在应 用间保持一致性会带来好处的理由。人们会期望在类似的地方找 到类似的功能表现。顺便说一句，网站导航菜单列表的顶部和底
部都是很特别的区域，从认知的角度说，与处于菜单中间的项目
例如，在电子地图上可以用不同的颜色区分不 同的省、不同的国家；也可以用同一颜色的不 同深法度来区分海洋的深度或地形的高度；在 电脑游戏中可用颜色来表示游戏的进程。相反 地，如果错误地使用颜色，会误导用户放弃操 作，如有的打印程序用红色表示激光打印机预 热就绪，可以打印，但有的用户却误解为机器 出现危险而放弃操作。因此，屏幕色彩的配置 直接关系到用户对软件操作的信赖程度。
不同软件开发商之间的界面设计要保持某种 一致：例如Windows操作系统下的各种软件 都具有一致性。
Dreamweaver界面
Flash界面
After Effects界面
Premiere 界面
2、图形界面的简洁性原则
简洁不仅是界面设计的美学原则，而且也是 显示屏幕大小所要求的。 复杂化是界面设计 的一大误区！ 简洁性原则主要表现在：
一致性原则有利于减少用户的学习量和记忆 量，用户可以把局部的经验和知识推广到其 他应用场合。
一致性原则要做到：
界面外观上的一致：具有相似的外观布局和 信息显示格式。例如Office和Adobe软件。 操作次序上的一致：例如不同命令操作后的 显示效果一致。
概念、语义、命令语法一致：例如同一功能 的命令名称要一致，例如“复制”命令。
目前流行的界面风格有三种方式：多窗体、单窗体以及资
源管理器风格，无论那种风格，以下十条规则是应该被重视的。
2：
规范性：
通常界面设计都按Windows界面的规范来设计，即
包含“菜单条、工具栏、工具箱、状态栏、滚动条、右键 快捷菜单”的标准格式，可以说：界面遵循规范化的程度 越高，则易用性相应的就越好。小型软件一般不提供工具 箱。
功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强
大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计 引起软件设计人员的重视的程度还远远不够，直到最近网页制作的 兴起，才受到专家的青睐。而且设计良好的界面由于需要具有艺术 美的天赋而遭拒绝。
目前流行的界面风格有三种方式：多窗体、单窗体以及资
Βιβλιοθήκη Baidu
4、软件信息的反馈原则
软件界面对用户的每个操作都应当提供及时的 信息反馈，尤其是简明的错误处理和帮助功能 是软件界面的重要反馈信息。
例如光盘刻录程序在工作的时候提示进度，结 束的时候告诉任务完成、如果没有光盘提示插 入光盘等反馈信息；手机信息发送成功\失败 提示等。
5、软件界面的在线帮助原则
软件界面的友好性还体现在为用户提供有好的 帮助界面，帮助用户学习和使用本软件。如下 图：
3、色彩选取尽可能符合人们的习惯用法
对于一些专门软件，在配置颜色时，要充分考 虑用户对颜色的喜爱。例如明亮的红色、绿色 和黄色适用于为儿童设计的应用程序。一般来 说红色表示错误，黄色表示警告，绿色表示运 行正常等等。 思考下面配色方案可能适合的群体和环境：
4、把色彩作为功能分界的识别元素
1.2 图形界面的配色原则（色彩构成）
在黑白显示器的年代，人们是不用考虑色彩的 配置的。今天，屏幕色彩的配置是屏幕显示设 计的一个关键。恰当的色彩运用，不但能美化 软件界面，而且还能够增加用户的兴趣，引导 用户顺利完成操作。 《色彩构成》是配色的基础，请同学们好好回 顾一下，学会把色彩构成理论用到图形界面设 计当中。
11)：复选框和选项框按选择几率的高底而先后排列。
12)：复选框和选项框要有默认选项，并支持Tab选择。
13)：选项数相同时多用选项框而不用下拉列表框。
14)：界面空间较小时使用下拉框而不用选项框。
15)：选项数叫少时使用选项框，相反使用下拉列表框。
16)：专业性强的软件要使用相关的专业术语，通用性界 面则提倡使用通用性词眼。
19)：右键快捷菜单采用与菜单相同的准则。
3：帮助设施： 系统应该提供详尽而可靠的帮助文档，在用户使用产生迷 惑时可以自己寻求解决方法。
7、色彩数目应该有限
建议把单个界面颜色限制为4种以内，整个软 件系统系列颜色应限制在7种以内。
●二、UI设计的规范法则
三.设计规则和规范(界面)
界面是软件与用户交互的最直接的层，界面的好坏决定用户 对软件的第一印象。而且设计良好的界面能够引导用户自己完成相 应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用 户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成
15)：滚动条的长度要根据显示信息的长度或宽度能及时
变换，以利于用户了解显示信息的
位置和百分比。
16)：状态条的高度以放置五好字为宜，滚动条的宽度比 状态条的略窄。
17)：菜单和工具条要有清楚的界限;菜单要求凸出显示， 这样在移走工具条时仍有立体感。
18)：菜单和状态条中通常使用5号字体。工具条一般比菜 单要宽，但不要宽的太多，否则看起来很不协调。
空间记忆
● 当人们进入一个全新环境时,他们需要对空间建立认知模
型,要有个空间记忆的感觉。 ● 同样，当新用户打开一个全新、陌生的软件时，用户也希 望有个类似站点地图的东西。但如果想让用户更加自如的使用 软件，让用户毫无顾及的去尝试，不怕迷路，我们必须为用户
建立起空间记忆模式。它犹如沙漠中迷途者手中的指南针与行
内容归类合理、内容排列整齐一致
3、图形界面的快捷方式原则 用户希望能减少人机对话的次数以减轻操作的频率， 快捷方式就是一个较好的办法。 Windows常用的快捷方式有：删除、查找、插入、保 存、打开、复制、粘贴、帮助、打印、关闭、剪切等。 Windows操作操作系统下的应用程序基本都遵循一样 的快捷方式原则。
8)：一条工具栏的长度最长不能超出屏幕宽度。
9)：工具栏的图标能直观的代表要完成的操作。
10)：系统常用的工具栏设置默认放置位置。
11)：工具栏太多时可以考虑使用工具箱。
12)：工具箱要具有可增减性，由用户自己根据需求定制。
13)：工具箱的默认总宽度不要超过屏幕宽度的1/5。
14)：状态条要能显示用户切实需要的信息，常用的有： 目前的操作、系统状态、用户位置、用户信息、提示信息、 错误信息等，如果某一操作需要的时间较长，还应该显示 进度条和进程提示。
为减少记忆量，应该通过菜单设计及联机帮助 等形式帮助用户记忆，一般地说，用户的短期 记忆不要超过7个项目。
8、图形界面操作序列的完整性原则
界面中每个操作序列都应该清楚地标明开始和 结结束，其余的操作应插在中间。操作序列的 结尾应该给用户完成的感觉，并指示下一个任 务的开始。
想象一下发送手机信息的整个操作过程。
源管理器风格，无论那种风格，以下十条规则是应该被重视的。
1.易用性：
按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，
要与同一界面上的其他按钮易于区分，能望文知意最好。 理想的情况是用户不用查阅帮助就能知道该界面的功能并 进行相关的正确操作。
易用性细则：
1)：完成相同或相近功能的按钮用框子框起来，常用按钮 要支持快捷方式。
驶在荒原上汽车装的GPS一样.
●
当人们使用东西或文档时，他们经常通过回忆它们在哪里来
再次找到它们，而不是它们的名字。
● 很多软件把它们的表单按钮——确定、取消等——放在预定 的位置上，部分原因是由于它们的空间记忆依赖性。
●
在复杂的应用系统中，工具条上的工具、层级结构中的对象
等，也可以由记忆它们的相对位置找到；因此，我们应该小心 使用像响应式展开这样的模式。
相比，顶部和底部的项目会获得用户更多的注意力，记忆也更持 久。如果他们发生改变，对用户的重新建立空间记忆势必会造成 影响，请慎之。 不论软件是升级还是改善。交互方式不能随意改变，当用户 建立起空间记忆对公司软件产品的长期发展是很有必要的。
一、图形界面设计的基本原则
用户原则是图形界面设计最基本和最重 要的设计原则。所谓用户原则，就是在 软件界面设计中，要充分体现出“以人为 本”、“用户友好”的基本要求，做到：易 懂、易学、易用。
6)：同一界面上的控件数最好不要超过10个，多于10个 时可以考虑使用分页界面显示。
7)：分页界面要支持在页面间的快捷切换，常用组合快捷 键Ctrl+Tab
8)：默认按钮要支持Enter及选操作，即按Enter后自动
执行默认按钮对应操作
9)：可写控件检测到非法输入后应给出说明并能自动获得 焦点。
10)：Tab键的顺序与控件排列顺序要一直，目前流行总 体从上到下，同时行间从左到右的方式。
规范性细则：
1)：常用菜单要有命令快捷方式。
2)：完成相同或相近功能的菜单用横线隔开放在同一位置。
3)：菜单前的图标能直观的代表要完成的操作。
4)：菜单深度一般要求最多控制在三层以内。
5)：工具栏要求可以根据用户的要求自己选择定制。
6)：相同或相近功能的工具栏放在一起。
7)：工具栏中的每一个按钮要有及时提示信息。
6、软件界面的操作可逆性原则
操作的可逆性对用户来说，是一种有效的鼓 励。如果用户知道操作是可逆的，即使发生 错误也能恢复到原来的状态，用户就能大胆 地对不熟悉的功能进行探索和学习。如下图：
7、图形界面的最少记忆项目原则
好的图形界面应该尽量减少用户的记忆量，用 户必须记住的任何信息应该是和当前操作有关 的，而不是和计算机相关。