数字界面设计——界面的整体设计

《数字界面设计——界面的整体设计》由会员分享，可在线阅读，更多相关《数字界面设计——界面的整体设计（57页珍藏版）》请在金锄头文库上搜索。

1、界面的整体设计,第三章,界面整体设计的分析阶段,用户分析,任务分析,市场分析,目标分析,4,1,2,3,分析阶段着重解决的问题是界面设计的方向和预期目标。,3.1.1用户分析,在一个界面产品生命周期的最初阶段，一切的策略都应当以满足用户的需求为基本出发点和最终目的，用户思想就是整个界面设计的核心思想。,3.1.1用户分析,1.文化背景 2.教育背景 2.读写能力 4.对专业知识的掌握程度 5.以往的经历,生理因素,1.年龄 2.性别 3.习惯 4.体能,1.实际环境 2.社会环境,心理因素,1.完成任务的动机 2.完成任务的态度,3.1.2任务分析,任务分析的重要作用在于使界面操作的逻辑尽量与

2、用户完成任务的思维方式相吻合，而实现这一点则需要对用户任务进行多方面、多角度、详尽的描述.,使用行 为分析 图,任务分析用到的常用工具,操作顺 序分析 图,协作关 系分析 图,操作顺 序制约 陈述,职责和信息流程分析图,任务金 字塔分 析图,任务过程和决策分析图,任务情 节描述,使用行为分析图,使用行为分析图可以将界面系统的用户和系统功能之间的关联清晰表达出来。这是对于一个界面系统最为宏观的表达方式，简单地说就是“界面系统的用户是由哪些人组成的”“他们在界面中需要做些什么”等。例如，设计一个学生注册系统的界面，主要的用户成员和行为可能包括：,使用行为分析图,1、教师：输入、修改和删除课程信息、

3、查询课程注册情况、答疑 2、学生：付费注册、查询课程信息、就课程信息提问、查询教师的答疑信息、注册课程、取消注册 3、系统管理员：发放注册后的课程资料、查询注册情况,使用行为分析图,操作顺序分析图,每一个用户成员的使用行为都需要通过某些顺序步骤来实现，而这些顺序步骤是可以通过操作顺序的描述来进行分析的。操作顺序分析图最大的特点就是能够直观描述界面用户在实现某一行为时所需的先后顺序，但它并不能直观体现界面系统元素之间的关系，而协作关系图就能实现这一点。,操作顺序分析图,图3.2 学生注册系统界面的操作顺序分析图,协作关系分析图,协作关系分析图其实是操作分析图的具体化，二者用不同的方式描述了相同的

4、内容，只是协作关系分析图着重显示了某一用户行为中各个子界面的关系，而各个步骤的时间顺序则并不是协作关系分析图描述的重点。协作关系分析图与操作顺序分析图是可以相互转化的。,协作关系分析图,操作顺序制约陈述,操作顺序总是体现为一定的逻辑关系，而这种逻辑关系的实现总是需要一定的制约条件。操作顺序的制约陈述保证了系统用户操作界面时能够得到相互协调的信息交流，同时它也确定了界面使用的基本规则。,操作顺序制约陈述,下面是学生注册系统的操作顺序制约陈述： 1、学生必须缴纳注册费后才能登陆注册系统。 2、学生必须用账号密码登陆系统后才能查询课程的信息。 3、教师需要在学生开始查询课程信息之前就输入课程信息到数

5、据库。 4、教师可以在学生开始查询课程信息之后更该课程信息并发出相应的通知。,职责和信息流程分析图,当某个界面系统的功能需要由多人共同协作完成时，界面设计师往往就需要分析各个用户行为和信息在这些用户之间的流动情况，职责和信息流程分析图就是完成这一工作的重要工具。职责和信息流程分析图一方面关注某一用户成员的行为；另一方面也能体现信息在成员之间的流动情况。,职责和信息流程分析图,任务金字塔分析图,任务金字塔分析图所阐述的是不同层次任务之间的关系。任何一个界面操作的任务都可能由若干个子任务构成，子任务与任务之间的关系就像一个层级清晰的金字塔。,任务金字塔分析图,任务过程和决策分析图,界面用户在内部或

6、外部条件下的干预可能会随时调整完成任务的步骤和策略。任务过程和决策分析图就是通过直观的流程图来表达不同用户或不同条件下完成某任务可能采取的步骤和策略的选择情况。借助工具界面能够应对不同的使用情况要求，从而体现界面的“智能决策”特征。,任务过程和决策分析图,有选择性,人物情节描述,进行任务分析也可以通过任务情节描述的方式得到一个情境化的用户场景。与以上的任务分析方法相比，任务情节描述显得尤为生动，因为它讲述了一个典型用户使用系统的全部过程，这个过程包含了很多的细节，除了界面系统本身的功能之外，还设计了很多与界面整体设计密切相关的环境和辅助因素，这都是界面整体设计时应该考虑的问题。,人物情节描述,

7、人物：汤婕，大学二年级学生 目标：注册一门感兴趣的课程 现状：开学前三天 环境：学校注册厅、服务台、服务台终端、若干注册系统终端、打印机等。 步骤：填表、缴费、登录注册系统、修改密码、查询选择课程、了解课程信息、注册课程、打印结果、退出系统。 策略：如果课程信息不够详细，则可以向教师提问；如果课程信息足够详细则直接注册。 情感：对系统满意，因为节省了时间。,3.1.3市场分析,市场分析,用户测试,3.1.4目标分析,目标分析,明确了设计的目标，还需对每一个项目目标具体化、规范化，这就是目标的分析。,1.网络运行的计算机系统 2.为管理员设置专门的管理窗口 ,1.在校学生和教职员工 2.适用于在

8、校大学生和与教务相关的教职员工 ,1.方面快捷 2.用户满意率应在90%以上 ,1.开学注册选课 2.查询可选课程与注册要求 ,实验作业与下节课内容,下次理论课：界面整体设计的实施阶段 实验作业：试分析你所要设计的电子产品的用用户、任务、市场与目标。 尽量可以根据本节课所讲的内容，做一些任务分析图，或写出设计方案。,3.2界面整体设计的实施阶段,对象的模型化,界面视图的设计,1,2,需要产生一个界面的整体构架！,3.2.1对象的模型化,所谓模型化是将那些抽象的概念与关系用图式的方法直观而又全面地表述出来。 在这个阶段我们需要把这些分析整合化，并落实到界面系统所针对的对象上去。这里所说的对象主要

9、来源于分析阶段所发现的“名词”，这些“名词”可以是具体的，例如“学生”，也可以是抽象的，例如“数据库”。从某种意义上说，将这些对象模型化实质上是理清它们之间的关系。,3.2.1对象的模型化,计算机系统,数据库,课程查询结果,课程信息 属性： 课程名称 授课时间 课程编号 负责院系 课程介绍 注册现状 水平要求 学分数 行为： 查询 发表信息 注册 提出新课 设为待选 更改内容 打印 删除课程 发表问题 公布课程 发表答案,学生的提问,教师的回答,公告栏,查询,浏览,与注册有关的操作,学生,教师,提出,发送,发送,提供,1n,课程内容的管理,浏览,浏览,3.2.1对象的模型化,“ ”表动作： 学

10、生可以查询数据库，浏览课程查询的结果。 学生可以对课程进行与注册相关的操作。 教师可以对某一课程的信息进行内容上的修改。 学生可以向授课教师提出问题，教师可以提供答案。,3.2.1对象的模型化,“ ”表从属： 计算机系统包括数据库。 数据库中包括课表查询结果列表。 课程查询结果列表中包含各种课程。 某个课程信息可以包括各种关于该课程的问题和答案。,“1n”是指任何查询课程的结果列表必须包括一个课程，如果数据库中没有满足用户输入的查询条件的课程时，则不需要显示课程查询列表，只显示“没有符合查询条件的课程”即可。,3.2.1对象的模型化,仔细分析后我们发现，某些对象既可以表达为单独的对象，也可以表

11、达为某个对象的从属。（公告栏） 对象的模型化为界面的整体设计提供一个较为清晰直观的思路，也是对于分析阶段成果的汇总过程。,3.2.2界面视图的设计,确定界面视图的雏形,界面视图的粗略设计,界面视图的关联性设计,界面整体设计的跨文化特性,4,1,2,3,1.确定界面视图的雏形,确定界面雏形是界面设计的第一步。完成这一步最有效的方法就是仔细研究对象模型化的结果，并勾勒出界面系统基本状态。简单地说就是在审视对象的模型时应随时提出这样的问题“这里是否需要一个视图”“还有哪里需要一个视图才能把事情表达清楚？”,确定界面的视图模型,2.界面视图的粗略设计,2.界面视图的粗略设计,进行粗略设计时需要考虑以下

12、几个方面的问题： 对象的属性和行为都体现于模型中，而在粗略的设计图中，对象的属性体现为具体的信息内容，而对象的行为则体现为可以引发行为的按钮控件。 粗略设计时，我们应关注对象状态的转变。 粗略设计时，一个按钮控件有时可以同时控制两个或多个行为。,界面视图的粗略设计,界面视图的粗略设计,3.界面视图的关联性设计,用户在不同的界面视图中需要根据自己完成的任务进行不同的操作，而这些界面视图之间需要进行相互转换才能适应用户的需求。对于界面视图进行关联性设计时，要考虑用户完成任务时所需要的信息交互以及转化到另外视图时所必需的触键。,3.界面视图的关联性设计,3.界面视图的关联性设计,对某一界面视图进行关

13、联性设计时应考虑这样两个问题： （1）这个视图的前一个或几个视图是什么内容，用户可能通过哪些途径或方法到达这个视图。 （2）用户到达该视图后下一步可能要做什么，可能会进入到哪些其他视图中去。,3.界面视图的关联性设计,3.界面视图的关联性设计,3.界面视图的关联性设计,3.界面视图的关联性设计,4.界面整体设计的跨文化特性,文化的差异主要源于历史和地理环境。不同区域的文化差异主要体现在四个方面：语言、风俗习惯、价值观和宗教信仰。由这四个方面的差异可能会引起社会生活方方面面的不同。 文化的差异给界面设计的影响是十分深刻的。尤其是在一些技术性的因素上，例如，操作平台的语言系统、各地的度量单位和纸张

14、的尺寸等。这些问题看起来十分琐碎，但都是影响界面设计的重要因素。只有这样才能保证界面最大程度上的可用性。,4.界面整体设计的跨文化特性,面对文化的差异，应该让界面一方面更适应与当地的文化；另一方面也要最大限度地与国际接轨。 客观来说，国际化和本土化是两个紧密关联的部分。这里说的国际化，主要指所设计的界面其主体构架不需要做大的修改就可以在其他国家和区域顺利使用。本土化是指针对某个国家或区域的文化特点，对界面产品元素进行调整以适应本国或本区域的用户使用要求。,4.界面整体设计的跨文化特性,要实现界面产品的国际化和本土化需要在设计中注意以下几个方面： (1)尽量多使用一些广泛被接受的符号，对于那些有

15、明显特定文化内涵的符号应慎重使用。在界面中当某些图像符号的表意不是非常清晰时，可以结合当地的文字来表意。但应当尽量避免用纯文字，因为文字的文化壁垒是最坚固的，在这方面图形化的东西跨文化特性反而更强一些。,4.界面整体设计的跨文化特性,(2)在进行界面的语言翻译时，应注意目标用户的语言习惯，让界面看起来更加具有亲和力。 (3)在设计界面图形时，要注意到所使用的图形符号的含义可能会仅局限与某个区域使用，如果超越这个使用区域就可能会形成图形符号的误读和不解。 (4)尽量避免不适于当地用户的信息出现在界面上，避免出现一些明显伤害当地人情感的观点或有争议事物。,4.界面整体设计的跨文化特性,(5)注意非

16、语言传播的意义，例如，不同手势和肢体语言，这些非语言传播在不同地区所表达的意义出入很大，如果造成误读的话影响会超过预期。 (6)注意人与人之间的关系与相处方式。礼仪尺度有时候在界面设计中十分重要。 (7)各个地区对于人种、性别、宗教观念和看法都有所不同，对于这些观念和看法在界面设计中都应予以尊重，否则也会造成不利的影响。,4.界面整体设计的跨文化特性,(8)在界面设计中色彩是能够表意的，所以要注意色彩的使用。色彩作为一种表现语言有明显的地域特征，在不同的区域，同一个色彩的含义会有差别，而这些差别也正是我们应该关注的。,4.界面整体设计的跨文化特性,形成跨文化特性的界面产品需要做到几点： （1）在设计项目开始时就需要全面完整地定义界面产品所面向的文化环境和用户背景，这样才能目的鲜明，少走弯路。 （2）在所有的设计环节中，时时注意以全部用户的文化背景作为参照，以全球观念作为设计的指导。 （3）聘用有国际化和本土化双重设计经验的人员，让他们对设计的各个环节提供指导和相应的咨询。 （4）尽量在用户研究的所有环节中邀请不同文化背景的用户参与，并在这些用户的实际使用环境中进行界面的测试。,