UI设计知识参考.docx
《UI设计知识参考.docx》由会员分享，可在线阅读，更多相关《UI设计知识参考.docx（23页珍藏版）》请在冰豆网上搜索。
UI设计知识参考
界面设计原则
（一）
1.设计原则
（1）用户原则。
人机界面设计首先要确立用户类型。
划分类型可以从不同的角度，视实际情况而定。
确定类型后要针对其特点预测他们对不同界面的反应。
这就要从多方面设计分析。
（2）信息最小量原则。
人机界面设计要尽量减少用户记忆负担，采用有助于记忆的设计方案。
（3）帮助和提示原则。
要对用户的*作命令作出反应，帮助用户处理问题。
系统要设计有恢复出错现场的能力，在系统内部处理工作要有提示，尽量把主动权让给用户。
（4）媒体最佳组合原则。
多媒体界面的成功并不在于仅向用户提供丰富的媒体，而应在相关理论指导下，注意处理好各种媒体间的关系,恰当选用。
（详见媒体的选择）
2.界面分析与规范
在人机界面设计中，首先应进行界面设计分析，进行用户特性分析，用户任务分析，记录用户有关系统的概念、术语，这项工作可与多媒体应用系统分析结合进行，囊括于用户分析报告里。
3.人机界面的类型
任务设计之后，要决定界面类型。
目前有多种人机界面设计类型，各有不同的品质和性能，下图进行了详细的描述。
创造性地使用多媒体环境，将会使应用程序功能大大增强。
要做到这一点,需从如下两方面考虑:
媒体的选择
（1）媒体的功能：
没有任何一种媒体在所有场合都是最优的，每种媒体都有其各自擅长的特定范围，各种媒体
功能参考如下：
①文本：
在表现概念和刻划细节时可用表现。
②图形：
擅长表达思想轮廓及蕴含与大量数值数据内的趋向性信息，在空间信息方面有较大优势。
③动画：
可用来突出整个事物，特别适于表现静态图形无法表现的动作信息。
④视频影像：
适于表现其它媒体所难以表现的来自真实生活的事件和情景。
⑤语音：
能使对话信息突出，特别是在于影像，动画集合时能传递大量的信息。
⑥姿态与动作：
在与别的媒体结合时具有较强的信息引用能力，可以在相关信息之间建立起时间、
空间以及逻辑上的联系。
（2）媒体选择的结合与互补：
脚本设计可根据内容需要分配表达的媒体，这里要特别注意媒体间的结合与区别。
提出几条
原则如下：
①人们在问题求解过程中的不同阶段对信息媒体有不同需要。
一般在最初的探索阶段采用能提供
具体信息的媒体如语音、图像等，而在最后的分析阶段多采用描述抽象概念的文本媒体。
而一些
直观的信息（图形、图像等）介于两者之间，适于综合阶段。
②媒体种类对空间信息的传递并没有明显的影响，各种媒体各有所长。
③媒体结合是多媒体设计中需要研究的新课题。
媒体之间可以互相支持，也会互相干扰。
多种媒
体应密切相关，扣紧一个表现主题，而不应把不相关的媒体内容拼凑在一起。
④目前，媒体结合在技术上主要通过在一个窗口中提供多种媒体的信息片段（空间结合）和对声音、
语音、录相等随时间变化的动态媒体加以同步实现（时间序列组合）。
⑤媒体资源并非愈多愈好，如何在语义层上将各种媒体很好的，结合以更有效地传递信息，是要
很好地探索的研究课题，也是应用系统人机界面设计的关键问题。
MIS人机界面的设计原则
在计算机软件技术中，人机界面已经发展成为一个重要的分支。
在MIS开发中，人机界面的重要性尤为突出。
笔者根据多年从事MIS开发的经验，浅谈一下MIS类软件人机界面设计时应遵循的原则。
一、前言
随着计算机软硬件技术的发展，人机界面的重要性与日俱增。
一些专家指出：
对于用户，人机界面就是系统本身。
在计算机发展的早期，受计算速度、存储容量等条件的限制，用户一味追求运行速度与所占空间，致使程序员在开发软件时不得不绞尽脑汁，考虑如何使所开发的软件运行速度快、占用内存/外存小，故程序员在开发软件时无不把主要精力放在软件内部算法与数据结构上。
然而时过境迁，硬件技术的飞速发展，使计算速度与存储容量不再成为软件开发人员所担心的问题，用户关心的主要问题是能否比较容易地使用软件。
换言之，人们的着眼点在于软件的易用性，而易用与否主要取决于人机界面的优劣。
众所周知，在当今的硬件与软件环境下，一个MIS软件没有很好的界面设计就不能算是成功。
因为不管它内部有多么精巧的技术，只要用户不愿意使用它，它的优越性就得不到发挥，它的价值和作用也无从谈起。
正因如此，人机界面研究已经从过去的从属地位上升为一个专门的领域，国内外均有很多学者从事这方面的研究。
Windows操作系统的日臻完善，更给人机界面技术以强有力的支持。
二、MIS人机界面设计的基本原则
1．以通信功能作为界面设计的核心
人机界面的关键是使人与计算机之间能够准确地交流信息。
一方面，人向机器输入时应当尽量采取自然的方式；另一方面，机器向人传递的信息必须准确，不致引起误解或混乱。
另外，不要把内部的处理、加工与人机界面混在一起（人机界面程序只是通信），以免互相干扰，影响速度。
MIS设计时，针对每一个功能，都要按照I-P-O的模块化思想，使输入、处理与输出泾渭分明，充分体现人机界面的通信功能。
这样设计出来的程序不但不易出错，而且易于维护，即使有了错误也很容易加以改正。
报表打印是MIS必备的功能之一，而且打印之前常常需要计算。
毕其功于一役并非明智之举。
尽管这样做或许会节省一些运行时间，但对以后的维护极为不利。
计算与打印分开设计，固然会增加一些时空开销，但考虑到可维护性，付出这一代价是完全值得的。
2．界面必须始终一致
一致的人机界面不致增加用户的负担，让用户始终用同一种方式思考与操作。
最忌讳的是每换一个屏幕用户就要换一套操作命令与操作方法。
Windows下的应用软件之所以倍受青睐，与其界面的一致性不无关系。
例如，以问号图标表示帮助，以磁盘图标表示存盘，以打印机图标表示打印，等等。
3．界面必须使用户随时掌握任务的进展情况
人机界面应该能够告诉用户软件运行的进度。
特别是在需要较长时间的等待时，必须让用户了解工作进展情况，如已经完成了百分之几等。
切不可让用户面对一个没有反应的屏幕，以致怀疑是否出现了死机现象。
目前，Windows下的应用软件无论大小，其安装程序几乎均做到了这一点。
开发MIS软件时，这一点很值得借鉴。
4．界面必须能够提供帮助
决不可以认为使用程序的用户都是专家，无需提供帮助。
有关的提示、信息、说明应该放在随手可得的位置。
一个优秀的MIS软件应该提供在线求助功能，甚至提供使用向导，这无疑会给用户带来极大的方便。
使用超链接技术将使求助功能锦上添花。
在多媒体环境下，以语音提示作为操作向导，不会干扰屏幕信息，是一个极佳的选择。
5．宁可让程序多干，不可让用户多干
多数MIS软件的数据输入量较大。
对于一些相对固定的数据，不应让用户频频输入（特别是汉字），而应让用户用鼠标轻松选择。
例如，人事管理系统中?
quot;文化程度系相对固定的数据，其值一般取小学、初中、高中、大专、大本、硕研、博研等。
录入这类数据之前，MIS软件应在相应位置弹出一个列表框，待用户以鼠标点击，而不应让用户每次都输入这些汉字。
汉字输入与西文输入的状态切换虽说是举手之劳，但频繁进行状态切换令人颇感厌烦。
若能够在程序中实现自动切换，无疑是深受用户欢迎的。
MIS软件开发完毕后，交付给用户使用时，开发人员往往要求用户记录软件的出错情况。
这不能不说是强人所难，因为此举增加了用户的额外负担。
开发者应编写一个错误实时记录程序，自动记录何日、何时、何程序出了何种错误。
总之，所开发的MIS在使用过程中，应使用户的数据输入量降至最低限度，同时使用户的干预尽量少。
实践证明，用户干预愈少，MIS系统的满意程度愈高。
6．输入画面尽可能接近实际
如果某个电算会计软件的凭证录入画面是表格式的，一屏可录入多条记录，而且与实际凭证一模一样，甚至连颜色都无异，用户在终端上录入凭证，仿佛用笔在纸上填写凭证，那么，一种亲切感会油然而生。
试想，哪个用户不愿意使用呢？
相反，如果一屏只能录一条记录，录入一条凭证要操作数屏，那么结果是可想而知的。
7．具有较强的容错功能
误操作、按键连击等均有可能导致数据误录。
巧妙地进行程序设计，可以避免此类因素造成的错误。
例如，录入学生成绩时，我们可以对其范围进行限定，使用户无法输入0-100以外的数据；录入学生年龄时，不妨根据实际情况将范围限制在15-20之间。
三、人机界面设计中的矛盾及解决办法
设计人机界面时，经常会遇到灵活性与一致性的权衡问题。
原则上，对某一软件来说，用户的思维方式应当是一致的，操作与控制的方式也应当是一致的。
只有这样，才能减轻用户使用软件的困难，使用户不知不觉地进入统一的思维框架，从而正确地、顺利地应用这个软件。
但这只是问题的一个方面。
另一方面的问题是，用户是多种多样的，它们有各自的习惯与爱好，应当让他们有一定的灵活性，能够自由地选择某些功能的操作方式。
例如，出于方便，有人喜欢使用箭头键选择下拉菜单中列出的某项功能，有人则偏偏习惯于使用快捷键，因为它们非常快捷。
设计软件时，我们不妨使鱼与熊掌兼得。
再如，对于人机界面的色彩，有人从提高工作效率着眼，喜欢鲜艳悦目的彩色界面；有人则则从保护视力出发，宁愿要黑白的。
开发MIS软件时，程序员不妨给用户选择颜色的余地。
四、结束语
在MIS软件的开发中，人机界面的重要性已经提到议事日程上来，其优劣已是衡量软件质量的重要标准之一。
GUI设计禁忌
本文列举JeffJohnson:
《GUI设计禁忌》一书中提及的明确针对Web设计和笔者认为对Web设计有参考意义的设计原则和禁忌。
设计Web项目时尽量参考一下基本原则，避免设计禁忌，应该能使Web项目的GUI上一个层次。
基本原则：
1、关注用户及其任务，而不是技术
2、首先考虑功能，然后才是表示
3、从用户的视角看问题，使用用户的词汇进行描述
4、不要向用户暴露实现细节
5、使常用的用户任务简单化，不要让用户解决额外的问题
6、保持一致性，引导用户的使用习惯
7、保持显示惯性，传递信息，而不仅仅是数据
8、设计应满足响应需求
禁忌：
1、同一页面包含重复功能的链接或按钮
2、将复选框用作单选按钮
3、无初始值的多选一设置
4、在非开/关设置中使用复选框
5、用文本框显示只读数据
6、单选按钮之间间隔太大
7、属性标记对齐方式不一致
8、当前无效的控件不充分置灰
9、显示对用户无意义的错误提示
10、不同的类型页面窗口显示相同的标题
11、窗口的标题和调用的命令不一致
12、要求用户输入随机数
13、相似的功能却有不一致的用户操作界面
14、取消按钮无法真正取消操作
15、网站结构反映公司的结构或网站升级的历史
16、返回按钮不能达到预期的目的
17、搜索选项过多，过度复杂
18、使用容易被忽略的隐藏的图片链接
19、需要向下滚动才能看到当前页的重要信息
20、图片按钮对鼠标按下操作没有视觉变化
21、无意义的虚假进度条
22、执行长时间的任务时鼠标指针不显示成忙状态
23、不考虑用户可能的人为的错误输入
24、认为好的UI就是漂亮的UI
25、盲目错误的使用页面模块化设计
交互设计细节中的常见问题
1.同类型内容表达形式要一致，不同类内容不能在相近区域一致。
2.合理使用页面的主体与次要位置。
最常见的页面结构时：
下载（16.92KB）
2010-7-514:
34
保证主体位置的核心功能，不在主体位置强推推荐功能。
一般意义上左下方和页面右侧为次要推荐位。
3.关联内容间的功能，在页面中的鼠标移动跨度不宜太大。
（如：
浏览中的回到顶端）
4.同一功能模块，不宜有太多的功能入口，至少保证用户通过主导航深入的路径通顺。
5.同一功能模块，不宜有过多的不同表现形式，甚至有得地方功能多，有的地方功能少。
6.保证主导航在各个页面功能入口的完整性，不能在某些页面出现主导航入口缺失。
7.不轻易改变互联网上普遍遵循的几近标准的用户习惯。
8.功能的入口层级不宜过深，一般控制在3级以内。
9.不增加过程中无必要的点击，状态更新提示在页面中完成，不增加额外的确认点击。
10.选择内容最适合的表达方式，不盲目占用不必要的空间，跳转不必要的页面。
同时注意到留白、隔断等，不在狭小区域密集太多非必需功能。
11.注重文字部分的表达修炼，力求文字简明、扼要、无歧义，合理的表达顺序，必要时配合图标，帮助诠释含义。
-----------------------------------------------------
以下是对应上边编号的错误实例：
1.同类型内容表达形式要一致，不同类内容不能在相近区域一致。
下载（19.36KB）
2010-7-514:
43
下载（12.11KB）
2010-7-514:
43
-----------------------------------------------------
2.合理使用页面的主体与次要位置。
下载（238.7KB）
2010-7-514:
45
下载（216.36KB）
2010-7-514:
45
下载（58KB）
2010-7-515:
10
-----------------------------------------------------
3.关联内容间的功能，在页面中的鼠标移动跨度不宜太大。
下载（84.88KB）
2010-7-514:
51
下载（53.77KB）
2010-7-514:
51
下载（75.72KB）
2010-7-514:
51
-----------------------------------------------------
4.同一功能模块，不宜有太多的功能入口，至少保证用户通过主导航深入的路径通顺。
5.同一功能模块，不宜有过多的不同表现形式，甚至有得地方功能多，有的地方功能少。
下载（85.49KB）
2010-7-514:
53
-----------------------------------------------------
6.保证主导航在各个页面功能入口的完整性，不能在某些页面出现主导航入口缺失。
下载（460.22KB）
2010-7-514:
58
-----------------------------------------------------
7.不轻易改变互联网上普遍遵循的几近标准的用户习惯。
下载（31.23KB）
2010-7-515:
00
-----------------------------------------------------
8.功能的入口层级不宜过深，一般控制在3级以内。
下载（140.2KB）
2010-7-515:
02
下载（24.42KB）
2010-7-515:
02
-----------------------------------------------------
9.不增加过程中无必要的点击，状态更新提示在页面中完成，不增加额外的确认点击。
下载（35.56KB）
2010-7-515:
02
-----------------------------------------------------
10.选择内容最适合的表达方式，不盲目占用不必要的空间，跳转不必要的页面。
下载（88.48KB）
2010-7-514:
56
-----------------------------------------------------
11.注重文字部分的表达修炼，力求文字简明、扼要、无歧义，合理的表达顺序，必要时配合图标，帮助诠释含义。
下载（218.24KB）
2010-7-515:
09
下载（202.91KB）
2010-7-515:
09
本主题由尹广磊于2010-7-515:
11置顶
收藏分享评分
升级会员 