Microsoft Surface 交互设计规范范文

Microsoft Surface 交互设计规范范文
Microsoft Surface 交互设计规范范文

第1.0节:

简介

微软的Surface使开发人员和设计人员,为他们的客户提供惊人的,社交的,具有很强的互动体验。来自四面八方的人们可以使用360°接口面对面的协作,合作和建立信任。

开发引人注目的Serface体验需要不同的方法来设计接口。本文提出的设计原则和指导方针,以解决关键方面,包括:互动,视觉,声音,文字,和更多的应用程序界面设计。使用这些原则和惯例为出发点,得到最有效的界面软件和硬件平台的独特功能。

第4.0节:

Serface 硬件

本节讨论具体涉及到serface的硬件设计注意事项和指导方针。

第4.1节:

输入法

1.基于视觉的触摸

与serface互动的主要方式是触摸。Serface从一开始就在为触摸设计,它是Surface 应用程序中互动的关键动力。

手指和blobs :serface自动识别区分手指和blobs。当有人将手指放在屏幕上,手指会被识别。他们指出的方向,视觉输入系统会自动检测到手指数目、位置和方向。当其它不认定为手指或者标签的物品被放置在屏幕上时,被列为blobs。提供基本大小的信息并分配一个任意方向。方向值在blobs中通常是没有可靠的手指或者标签。

触摸交互- 表面SDK操作处理器识别三个离散的操作:移动,旋转和调整大小。

事实上,Surface SDK中只有三个操作手势是一个技术性的事实,但是从交互的角度看,有许多不同的触摸交互,一个人可以使用这些操作。下面的插图显示了如何使用一个手指或者几个手指,在各种触摸交互中执行虚拟对象。

点击- 按,然后释放

保持-然后按住

滑动或推- 使用你的手指滑动或推来移动对象

轻击-轻按,迅速滑落,然后释放

触摸并开启- 将你的手指,靠近物体外侧边缘的一块内容,并围绕其中心旋转

自旋- 扭转迅速用两个手指旋转对象

拉伸-用两只手的手指移动分开

收缩-用两只手,将手指并拢

扭转- 两个或两个以上的手指旋转对象,如转动旋钮或一张纸

捏- 将两个手指向一个点并拢

挤压- 将三个或三个以上手指向一个点并拢

屏开- 移动手指分开

定住打开- 定住要打开的对象,同时用另一只手的一个手指拖动对象周围的固定点

2.对象

Serface不仅支持手指触摸互动,它还支持一系列的互动物体触摸屏幕.使用Surface应用程序中的对象提供了以下独特的优势:

●帮助人们方便地的控制共享应用程序

●帮助应用程序在屏幕上识别谁在使用它以及它们的物理位置

●为人们提供直观的方式,即时了解和互动

●提供一种方法,瞬间物理对象链接与数字内容

●提供了一个几乎是无止境的离散标识和身份

●提供一个人与他们的数字信息的方式

●提供表面和其他移动设备之间的无缝链接

●创建神奇的在以前是不可能的方式,引人入胜的体验

下面详细解释支持的对象类型。

标签和定位- A标记的对象是一个物理对象,有一个特殊的标记点,Serface通过红外线(IR)的波长图案贴上标记。人的眼睛看不到红外光,但是微软的Surface硬件可以看到和识别这些执行动作与标签相关的标记。例如, 当一个客户把一个环子放在屏幕上时,在

杯子的底部使用一个标记,杯子底部周围的屏幕出现气泡。

在另一个例子中,当一个人在屏幕上放置一个对象时,可以用一个标记来显示一个菜单或其他信息。

标签的对象也可以动态地与在一个特定应用程序的内容相关联。这意味着对象可以重用应用程序,而不必硬编码特定的值。一个应用程序可能会在一个餐厅的服务器上提示,在一个特定的点显示放置了一个标签的橙汁。该应用程序最初并不需要一个特定的唯一标记值,但把该对象的行为,在已知点的服务器可以识别的应用程序里显示:放在那里是一杯橙汁。根据需要,这可以重复; 例如,服务器可能也向表中添加一个标签的一杯咖啡,在一个指定的点。该标签也可以与咖啡相关联,它可以继续这样做,直到顾客的用餐体验结束。如果有人拿起杯子,并把它们放到在屏幕的另一个位置,serface仍然是能够识别他们。

BLOB数据对象,原始图像和几何型的触点--除了看到特殊标签,serface的硬件可以在屏幕上放置对象,只要它们反映回足够的红外光。应用程序开发人员可以使用对象的尺寸,以自己的优势它反映基本形态;如简单的椭圆形和矩形。例如,放置在屏幕上的一个固定的和已知的直径的硬币,在一个特定的应用程序内可以很容易识别它的范围。在

一个特定的交互中,固定尺寸的立方体或圆柱体也可能被放置在屏幕上,而不需要的标记。

更高级的应用程序可以使用原始图像的视觉输入系统中提供的数据来分析一个对象的

触点的形状、轮廓或剪影,为复杂的形状提供有意义的互动。例如,开发人员可以使用人的手的形状,创建新类型的触摸交互。对象像星星一样具有独特的形状,三角形、八角形等,也可以提供特殊的交互,并且不需要为标签。例如,开发人员可以使用人的手的形状,创建新类型的触摸交互。这种类型的物体识别,需要有能力的应用程序开发和高性能的成本,但能够提供远远超出那些一般的Serface应用的体验。

某些Serface应用程序的原始位图图像来自传感器,以确定一个特定应用程序范围内的对象和它们的用途。这种方法通常不同,因为它超越了在基本形状来识别对象。使用原始图像可能是一个很好的方法来捕获快照的对象,可以对数据库以前拍摄的图像进行比较。这种方法可以正确识别更复杂的对象。其他应用程序可能甚至不知道如何识别一个复杂的对象,但可以使用视觉输入处理器捕获图像,很像一台复印机或扫描仪,使人们可以使用serface中的查看、编辑、并与图像交互。这种类型的图像捕获可以是有限的,如果对象不反映了足够数量的红外光源。

透明物体--许多物体放置在serface的屏幕上时,字面亮起。这些对象包含明确的标签,其中包含相同的字节模式作为标准的标签,但不能被人眼看到。这使透明玻璃和塑料的物体被放置在屏幕上时,可以通过他们的软件驱动图像进行投影。

这可以使惰性塑料立方体变的更为生动,或者一个晚餐的玻璃杯成为一个互动的控制对象。玻璃中的液面已达到一定的水平时,特殊的对象甚至可以使用独特的性质,以提醒serface,通过使用光纤光学元件的对象或项目动画的视觉效果。这些类型的对象往往是使用廉价的方式来创建,其他设备和平台不能提供这些独特的体验。Surface应用程序使用对象进行交互的可能性几乎是无限的。

第4.2节:

硬件的具体注意事项

1.倾斜

微软Surface 硬件设计了水平部署和垂直部署。在设备中的传感器中,将指示该设备目前的倾斜角度。一个水平的移动设备报告的值接近0度,而垂直的移动设备报告的值接近90°。有些设备可以安装在倾斜0度和90度之间,在测试和应用时,请开发人员记住这一点很重要。

2.边框缓冲器

内容的设计应注意表面硬件参数。最小尺寸的触摸内容应至少18毫米×18毫米。可触摸的内容显示在屏幕边缘时,应插入至少4毫米,以确保手指和其他接触点被传感器感应。显示器倾斜角度 垂直管理

显示器倾斜角度

水平管理

静止状态的Surface Access Points,为在屏幕边缘最小触摸目标的大小、距离、交互内容,提供了良好的视觉指示器。内容停靠在屏幕的边缘,应该坚持至少距离屏幕边缘22毫米,以确保它是可用的。

3.连通性

Serface的硬件上配备了蓝牙和WiFi功能。这使serface轻松地连接到无线网络,并与其他设备进行交互。serface也可以直接连接以太网端口,可提供远程管理功能。

许多serface应用还提供了与移动设备的连接,通过使用基于云的服务和移动应用程序。当结合视觉输入和跟踪能力的硬件互动,移动设备可以完全无缝。serface还配备了HDMI 输入和输出功能,以及耳机,麦克风,SD卡和USB端口。

系统界面设计规范

B/S 系统界面设计规范 1.引言 界面美观、操作易用性、维护成本低是评价B/S系统的关键。本规范参考了一些成熟产品科学的开发方法,将开发过程中的方式、规则等强行的约束。希望藉此来提高用户操作感受,提升B/S产品的质量。 1.1. 编写目的 广义的界面概念包含了除页面布局设计之外,交互性的设计,及人体工程学方面的研究。本规范制订的依据从广义概念出发,总结以往项目的成败经验,目的是从整体上提升公司B/S类产品的质量、开发效率。从以技术为中心发展为以客户为中心,将类似项目成功的经验继承和积累下来,将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层面。新的开发方式强调分层,规范出界面设计人员做什么,服务器编程人员做什么,这样就把页面和控制代码两个层面清晰的分开。 1.2. 背景 B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点,在公司产品线中占越来越大的比重,.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工程方法统一起来,突出服务器端技术,这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作,团队的合作方式甚至决定了一个系统开发的成败。目前公司较多的服务器端编程人员仍然处于“后ASP 时代”的开发方式,表现为前台页面仍然与服务器代码高度的关联,带来的后果是重复建设、高昂的维护成本或失去控制的项目,没有充分的发挥出集成开发工具的优势。在以往的开发方式下界面设计侧重在静态页面的建设上,每个页面作为一个独立的模块来处理,在页面交互中则是程序员根据自己的习惯来控制,程序对个人的编程风格的依赖很强,这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的,甚至是背道而弛的,当然也不利于规模化的团队合作。 1.3. 定义 术语定义: 效果图:由界面设计人员设计的页面效果图,综合了概要设计的业务需要和整个站点的风格,它规定了页面布局上的每个细节。 容器:即HTML 标记的嵌套结构,如在表格->行->单元格内放置图片,那么可以认为单元格是放置图片的容器。 样式表:即级联式样式表CSS,它是W3C机构在HTML标记语言上扩展的格式语言。 非标准交互控件:是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封装的控件,或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。 2. 界面设计规范细则 总体目标 以规范作为基本原则,在此框架内进行合理的扩展和变化,将站点内的每个模块服从于整个站点,模块页面与“高内聚”的控制代码紧密的结合在一起,同时对应于应用程序基于系统的架构分析。 2.1. 通用原则 1 界面色彩要求:计算机屏幕的发光成像和普通视觉成像有很大的不同,应该注意这种

UI界面设计规范要点

UI设计(流程/界面)规范 一:UI设计基本概念与流程 1.1 目的 规范公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性。 1.2范围 l 界面设计 l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。 1.3 概述 UI设计包括交互设计,用户研究,与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始,UI设计师就应根据流程规范,参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节,履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计,并根据客户(市场)要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求,以保证每个环节的工作质量。 1.4 基本介绍 A、需求阶段 软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者,使用环境,使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人

用(用户的年龄,性别,爱好,收入,教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场所)。如何用(鼠标键盘/遥控器/触摸屏)。上面的任何一个元素改变结果都会有相应的改变。 除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世,我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适,更合适于我们的最终用户的就是最好的。B、分析设计阶段 通过分析上面的需求,我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。 C、调研验证阶段 几套风格必须保证在同等的设计制作水平上,不能明显看出差异,这样才能得到用户客观真实的反馈。 测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。 调研阶段需要从以下几个问题出发: 用户对各套方案的第一印象 用户对各套方案的综合印象 用户对各套方案的单独评价 选出最喜欢的 选出其次喜欢的 对各方案的色彩,文字,图形等分别打分。 结论出来以后请所有用户说出最受欢迎方案的优缺点。 所有这些都需要用图形表达出来,直观科学。

Microsoft Surface 交互设计规范

第1.0节: 简介 微软的Surface使开发人员和设计人员,为他们的客户提供惊人的,社交的,具有很强的互动体验。来自四面八方的人们可以使用360°接口面对面的协作,合作和建立信任。 开发引人注目的Serface体验需要不同的方法来设计接口。本文提出的设计原则和指导方针,以解决关键方面,包括:互动,视觉,声音,文字,和更多的应用程序界面设计。使用这些原则和惯例为出发点,得到最有效的界面软件和硬件平台的独特功能。 第4.0节: Serface 硬件 本节讨论具体涉及到serface的硬件设计注意事项和指导方针。 第4.1节: 输入法 1.基于视觉的触摸 与serface互动的主要方式是触摸。Serface从一开始就在为触摸设计,它是Surface 应用程序中互动的关键动力。 手指和blobs :serface自动识别区分手指和blobs。当有人将手指放在屏幕上,手指会被识别。他们指出的方向,视觉输入系统会自动检测到手指数目、位置和方向。当其它不认定为手指或者标签的物品被放置在屏幕上时,被列为blobs。提供基本大小的信息并分配一个任意方向。方向值在blobs中通常是没有可靠的手指或者标签。 触摸交互- 表面SDK操作处理器识别三个离散的操作:移动,旋转和调整大小。 事实上,Surface SDK中只有三个操作手势是一个技术性的事实,但是从交互的角度看,有许多不同的触摸交互,一个人可以使用这些操作。下面的插图显示了如何使用一个手指或者几个手指,在各种触摸交互中执行虚拟对象。

点击- 按,然后释放 保持-然后按住 滑动或推- 使用你的手指滑动或推来移动对象

轻击-轻按,迅速滑落,然后释放 触摸并开启- 将你的手指,靠近物体外侧边缘的一块内容,并围绕其中心旋转 自旋- 扭转迅速用两个手指旋转对象

交互设计方案衡量标准的五层总结

用户目标需要有真实的用户信息输入,输入途径可以是和用研合作进行调研分析、向熟悉用户的业务方请教、现场观察和访谈等,忌讳设计师自行脑补。将用户画像与故事板建立起来并传达给大家,也可以在评审时更好地帮助与会者代入真实用户、理解感受他们的核心痛点与诉求,进而对设计方案给出更准确的判断,而不是纯粹站在自己的角度上提不接地气的建议。 基于业务和用户背景提炼出具体的设计目标后,设计方案需要紧密围绕目标展开,而不是在被别人问到你的设计方案如何体现出这一目标时,才发现目标和方案实际上基本不相干甚至南辕北辙,这也是一些初级设计师(包括我自己)会犯的错误。 2、流程完整性 有些外人对交互设计的理解可能就是简单的「画画线框图」,但实际上前期的这些流程才是耗费时间与精力最多的,虽然并不是每一个项目都需要完全覆盖到(没有必要,特别是日常迭代的小 需求)。 在交互设计文档里完整展示这些阶段产出物还是很有价值的,它们能更好地体现出你的专业态度和充分的思考推导过程,给设计提案的说服力提升(见上一篇文章)增加筹码。 3、整体美观性 要以设计师的态度去认真对待工作中的每一件事情,虽然有专业的视觉设计师存在,但交互设计师同样需要懂得和追求基础的美感,这点在设计文档、线框图等关键交付物中都可以体现出来。 第二层:易理解性、易操作性、技术可行性、分支与边界状态 这一部分仍然属于「基础」,主要体现在对细节的推敲程度上,也是交互设计师体现自身「专业性」的重要环节。 1、易理解性

这一部分内容比较基础,我就不多加说明了,在打磨的过程中多思考、多尝试、多推敲、多做用户测试,有时候对业务太过熟悉会让我们意识不到一些比如文案理解困难的问题,而身边不那么了解业务的同事要更容易一眼发现问题所在,所以,多用开放的心态听取大家的反馈吧。 2、易操作性 同样是一些很基础的知识,主要参考尼尔森十大可用性原则(http://online- https://www.360docs.net/doc/aa11887210.html,/testing/usability-principles-jakob-nielsen),不再赘述。 3、技术可行性 这一部分因为我是根据自己的业务场景梳理的,不具备通用性,所以就不分享具体内容了。 交互设计师不一定非要懂技术,但一次次技术评审下来,对于「什么能做、什么不能做」(对于一些优秀技术同学,还可以加一条「有挑战但技术乐意做」,哈哈)要逐渐形成清晰的概念并进行总结,必要时也可以体现在自己的设计文档上(让大家理解你有时做出一些看上去略古怪的设计方案的苦衷)。设计过程中也要及时找技术同学沟通确认可行性、倾听他们的建议和反馈,而不是次次都是等方案设计完成、正式评审了才发现技术上实现成本过高,进而被迫放弃。 4、分支与边界状态

产品设计交互规范

产品设计交互规范 常州广传网络技术有限公司 编写:王英 2013年11月

目录

1概述 规范的制定采用UCD(以用户为中心的设计)方法,遵循ISO9241-11部分标准的要求。设计过程以用户的使用习惯和心理需求作为出发点,在认真研究并参考了国内外各种优秀设计的基础上,制定出了适合我集团应用服务产品的设计规范。此外,为保证规范具有良好的可用性和广泛的适用性,UE研究室对设计出的每个模式都进行了严格的用户测试,并对各组件采取了不同应用场景的测试。 该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中,给出了模式描述和扩展描述的规范描述,供不同的应用类型和使用场景选择、组合使用。 1.1规范的目的 ●在产品开发过程中,给不同部门的相关人员提供统一的规范与指导,使沟通与合作顺利 有效地进行,以保证产品界面的最终规范化实现; ●从一点一滴入手解决公司产品的可用性问题:使操作更人性化,减轻用户的认知负担, 改善产品的用户体验,提升产品的市场竞争力; ●使产品在界面外观和操作行为上形成一致,加强公司产品的品牌化特征。 1.2规范适用的范围 广传项目部内的所有产品。 1.3规范适用的人群 参与产品设计的所有人员、前端开发人员及测试人员等。 注:从正式发文之日起属于新项目范畴的必须遵循此规范,对于已有项目进行重大版本升级的项目要遵循此规范。

2基本原则 以下原则主要用来说明此规范的指导思想与设计依据。简单描述如下,以供该文档的阅读者参考和使用。具体的原则描述请参见《界面设计指南》。 2.1一致性 ●视觉一致:在同一产品内,所有的同类界面元素在相同的应用环境下,界面外观在视 觉上应该保持一致;否则,界面外观要予以区分; ●操作行为一致:类似场景的界面设计,其操作方式必须保持一致;当操作行为相同时 要保持视觉上的一致;当操作行为不同时,在视觉上就一定要有所区别; ●外观与使用者的预期一致:保持对象与其行为相符,保持不同作用的对象外观的不同; 视觉元素的外观及其操作结果,必须与用户的心理认知相符。 2.2简洁性 ●减轻视觉负担:使用尽可能少的元素,不提供与当前任务无关的信息; ●简明的文字表述:文字表述必须简明扼要、清晰易懂,内涵丰富,并易于理解和记忆; ●操作简单:减少冗余的操作步骤。 2.3避免干扰和打断 ●避免干扰:明确用户在特定界面中的首要任务和目标,尽可能避免该界面上的视觉噪 声和其它干扰。 ●避免打断:让用户的操作连贯顺畅,避免使用模态对话框(弹出的独占焦点的对话框) 打断用户的工作。 2.4减轻用户记忆负担 ●认知明确:产品中界面元素外观要明晰,易于辨别;产品的逻辑意义要合理,导航要 及时准确; ●系统智能化:提供默认值;帮助用户记住尽可能多的信息,最低限度地从用户那里索 取信息; ●合理的隐喻和习惯用法:使用用户熟悉的,符合使用习惯的隐喻,及通用的习惯用法, 为用户的任务提供直观易用的界面; ●有效的启示:提供具有明确引导性的启示来指导用户正确操作(启示:某对象用来说 明自身可以如何使用的外观属性)。 2.5及时有效的反馈

人机交互实验报告-网页界面设计与分析

课程实验报告 专业年级计算机科学与技术课程名称人机交互技术 指导教师 学生姓名 学号 实验日期 实验地点 实验成绩 教务处制 二O一O 年十月二十五日

3)网站名称:中国移动通信集团公司 网址: 印象分:8 3.比较搜索引擎。你选用的搜索引擎是: 百度 谷歌 搜搜 你搜索比较的商品(关键字)是: 1)硬盘 3个搜索引擎的比较分析:百度搜索到相关网页约100,000,000篇,用时秒;谷歌获得约 58,600,000 条结果,用时秒;搜搜搜索到约22,800,000项结果,用时秒。2)电脑 3个搜索引擎的比较分析:百度一下,找到相关网页约100,000,000篇,用时秒;谷歌获得约 235,000,000 条结果,用时秒;搜搜搜索到约823,300,000项结果,用时秒 3)鼠标 3个搜索引擎的比较分析:百度一下,找到相关网页约100,000,000篇,用时秒;谷歌获得约 57,600,000 条结果,用时秒;搜搜搜索到约14,500,000项结果,用时秒4.优劣分析:当当网()目前是全球最大的中文网上图书音像商城,面向全世界中文读者提供近30多万种中文图书和音像商品,每天为成千上万的消费者提供方便、快捷的服务,给网上购物者带来极大的方便和实惠。 卓越网 )发布于2000年5月,主营音像、图书、软件、游戏、礼品等流行时尚文化产品。迅速成长为国内最有影响力和辐射力的电子商务网站,赢得了超过520万注册用户的衷心支持,发展成为中国访问量最大、营业额最高的零售网站。 当当网与卓越网都是国内B2C模式电子商务网站排名比较靠前的经营网站,两者的业务模式、所卖商品都极其类似,他们也取得不同程度上的成功。

【精品报告】常用中后台交互设计控件使用场景与规范总结

常用中后台交互设计控件使用场景与规范总结 最近刚完成平台安畅云 2.0 的改版设计,平台模块很多,经常存在很多类似的页面和组件,若不制定统一的规范和控件,则会导致很多重复的工作,大大降低产品的设计效率; 同时,平台的一致性也得不到保障。 所以,我们视觉、交互、前端的小伙伴们针对我们踩过的坑,大家认真总结和提炼出一个 符合公司定位的设计规范,统一公司项目的前端 UI 设计,规避不必要的设计差异和实现 成本,实现设计和前端资源的效率最大化。 此设计规范主要分享了中后台常用设计组件的定义、组成、使用场景及注意事项。 字体 概述 字体是界面设计中最基本的构成元素之一,用户通过文字来理解内容和完成任务,合适的 字体将大大提升用户的阅读体验及工作效率。在安畅云项目的字体使用中,为了使页面的 视觉层次更加清晰,我们从以下三方面来使平台的字体符合易阅读和美观的要求。 合理的使用不同的字重、字号和颜色来强调界面中需要突出的信息; 尽量使用单种字体,使用多种字体会让界面看起来零散和杂乱无章; 遵循 WCAG 2.0 标准(标准详情见 https://https://www.360docs.net/doc/aa11887210.html,/Translations/WCAG20- zh/#visual-audio-contrast),字体在使用时与背景颜色的对比值满足无障碍阅读的最 低标准。 字体使用建议 中文字体优先级:PingFang SC、Hiragino Sans GB 、Microsoft YaHei(平台使用字体)英文字体优先级:Helvetica Neue、Helvetica、Arial(平台使用字体)

字号使用建议 行高使用建议 行高也是影响用户阅读体验的重要因素之一,我们查阅资料得知西文的基本行高通常是字号的 1.2em 左右,而中文因为字符复杂,所以中文行高需要更大。现在公认1.5em 至1.8em 之间会有一个比较好的视觉阅读效果。 安畅云项目行高计算公式:行高值=字号 x 1.5,例如:12 号字体的行高为 18px,14 号字体的行高为 21px。

网站交互体验设计原则及注意事项

网站交互体验设计原则及注意事项 交互体验,简单的说就是用户在操作上的体验,注重用户的易用性和可用性。当用户进入一个网站,想搜索想要的资料,没有搜索框;想咨询没有找到咨询窗口;想留言或者评论却找不到入口,oh,my god,无论谁是用户都会受不了想关掉的。 但是,在互联网发展早期,很多网站的交互设计其实非常简单,往往一个翻页效果、一个简短的动画就能吸引到很多用户。如今随着互联网的不断更新迭代,技术不断革新,网站交互也得到了很大程度的加强,可以说当前网站的交互效果是多种多样的。所以,清楚网站建设的交互设计原则和交互设计的注意注意事项对企业来说很重要。 一、网站交互设计的原则 1、交互设计的目的是为了优化用户体验 网站建设本身就是一项重视用户体验的工程:完整的网站地图和面包屑导航、相关的推荐和搜索框等,每一个都是为了能够拉近与用户之间的距离。一个好的交互效果能够很大程度的提升用户在浏览网站时的体验,不仅有利用户了解网站,更有利于留住用户。 2、网站功能性的视觉元素 推己及人,想想我们在访问和浏览网站的时候,都是直观的从网站上获取信息,这时的视觉、重点展现就显得尤为重要。而同等情况对于用户也是一样,要吸引用户,就应该在网站产品特色的视觉元素上一定要明显一点。3、交互设计上的扁平化设计 扁平化的网站设计一直以来都是网站建设制作中最好的网站交互方式,而其最重要的理念就是简洁、直接!可以让用户在每一个页面以最短的时间和最快的效率找到自己想要的内容。 4、可用性方面的交互设计 相比于网站交互的趣味性设计,网站的实用性设计显得更加重要。实用性设计给用户提供更多产品相关的优质内

容和工具,这也是为什么能够更吸引用户的原因,当然,不仅如此,实用性网站还能够更好的提升用户留存和转化效果。 5、交互之外,响应速度更重要 在网站交互设计中,响应时间最为用户体验最重要的因素之一,在设计时在炫酷的交互效果之外一定要考虑到网站的响应速度!如果效果很精彩、很炫,但响应速度很慢,那么一定要以速度为准。因为网站响应速度就好像人与人交流一样,如果半天没有作出回应和反响,自然留不住用户。 二、网站交互设计需要注意的几个方面 1、要有对比度 对比度是构建视觉层次最重要的手段之一,也是让视觉元素吸引用户的绝佳方式。在网页设计中,对比度不仅仅是通过色彩来呈现的,尺寸控制、形状设计、位置调整也都能表现出对比度。 2、保持一致性 网站本身应该是很令人惊叹的,然而网站也应该需要正常使用。在进行网站交互设计时应该遵守某些设计惯例,让网站方便浏览和理解,不要为了与众不同而违背常规,相反,接受你将需要实现一定的规则的事实,能帮助你的用户轻松地访问你的网站。 3、当页面或应用下载数据较慢时,载入过程应该有提示 如果我们不考虑载入时的信息反馈,会让页面呈现假死的状态。 4、用户应掌握控制权 一般而言用户希望自己去控制系统交互,在执行任务中,用户应该可以随时中止或退出,而不是无奈的看着系统继续。 5、界面的转场交互动效设计 网站建设越来越强调沉浸式的体验,页面和页面之间切换也需要更加的流畅,转场动效需要更加的极致和平滑。 6、动效使用适当 偶尔使用的交互式动画可以提升你的网站内容。然而,让你的页面负担一个又一个疯狂的动效,会让你的用户感觉到有点像是进入了在线疯人院里,甚至更糟糕。 7、注意表单样式 表单设计其实是用户体验设计的基本组成部分之一。每个网站都有不同的设计目标,不论是销售产品、呈现信息还是提供沟通平台,然而许多设计漂亮的网站总会给你一个令人感到无聊的复杂表单,除了那些极其想加入会员或者想参与问卷调查的那些访客,许多用户会直接关闭页面,离开网站。 总结: 页面交互性设计要站在用户的角度,吸引到用户,实现流量转化为订单的目的。所以说,网站交互性提升了,网站的流量也会增加,那么网站的转化率也会升高。

交互设计评估标准-w

交互设计评估标准-1 1. 优先级 a. 用户优先级 b. 功能优先级 c. 内容/信息优先级 d. 交互优先级 e. 视觉优先级 2 一致性 a. 交互逻辑的一致性 b. 元素的一致性 c. 语词的一致性 d. 信息架构的一致性 3. 感觉 a. 快的感觉 b. 安全的感觉 c. 其他感觉 1. 优先级 当你把所有重要的东西都摆上桌面,就没有重要的东西了。用户的认知空间和认知能力有限,当他们面前有1条路可以选择时,事情会变的很简单,但是当他们面临3条路时,往往会踌躇不前。尽管我们难以量化的说用户有多少精力在这种抉择中损耗掉了,但这种损失是显而易见的。看看Android原生系统的设计,用户想要运行一个应用时,有几条路? 设计中对优先级的把握就是要让我们能够将真正重要的功能/内容/元素放到突

出的位置,以最多的界面资源去展示它们,而将次要的部分,弱化、隐藏起来,再次的部分,则索性砍掉。 a. 用户优先级 把握核心用户,为产品自己真正的用户群做设计,不要天真的认为你的设计可以满足所有用户。 b. 功能优先级 把握核心需求,亮点功能往往两三个就足够多了。功能航母往往容易沉没(看看为何现代战争中巨型战列舰都逐渐被淘汰了),Nokia VS Apple也是这样。有一次Tina(创新工场的CEO)的一句话很受教,她说她以前在(微软或IBM)做Marketing时,给客户讲产品,往往一次只讲三个Feature,即使这个产品或版本有再多的亮点。设计或者开发产品时我们总是想尽可能的将好东西放进去,但是打动客户/用户的点却往往只在三个之内。 c. 内容/信息优先级 将内容分成不同的层次,核心内容需要明显的突出出来。报纸上的标题、摘要、征文等层次清晰、泾渭分明也是这个原因。 d. 交互优先级 主要的交互路径需要让用户以最小的精神代价就能走的通,尽量减少这条路上的分支。为此,一些时候不得不将一些次要的交互路径更含蓄的隐藏起来。最常用的可能是“高级设置”这样的形式。 e. 视觉优先级 视觉更需要层次,重点的视觉元素需要让用户一眼扫过去就能看到,而次要的信息则要拉开距离,通过留白、颜色对比等等手段。一个例子是做PPT,当我们看到好的PPT时,总发现里面有大量的空间、有灰色的文字,这样将重点突出出来,而很多人在做PPT时则会直接COPY大段文字,直接用粗体、黑色,满屏幕只见到黑色的一片。和优先级这个原则互通的概念还有简化(简化的目的实际上就是突出重点)、减法原则等等。 2 一致性 一致性可以让界面更容易被预知,可以降低用户的学习成本等等。一致性几乎是

脚本语言和交互网页设计复习题图文新版

脚本语言和交互网页设计复习题 一、单项选择题 1.假设在helloapp应用中有一个hello.jsp,它的文件路径如下: %CATALINA_HOME%/webapps/helloapp/hello/hello.jsp,那么在浏览器端访问hello.jsp的URL是什么? ( ) A、http://localhost:8080/hello.jsp B、http://localhost:8080/helloapp/hello.jsp C、http://localhost:8080/helloapp/hello/hello.jsp D、http://localhost:8080/webapps/helloapp/hello/hello.jsp 2.下面对useBean动作描述正确的是( ) A.在页面被请求的时候引入一个文件。 B.寻找或者实例化一个JavaBean。 C.把请求转到一个新的页面。 D.输出某个JavaBean的属性。 3.在MVC体系架构中,承担显示功能(VIEW层)的组件是( ) A.JSP B.JavaBean C. Servlet D.JDBC 4.在JSP页面中的输出语句是( ) A.System.out.print() B. Println() C.Out.println() D .Out.printValues() 5.exception对象的作用是( ) A.针对错误网页,未捕捉的例外 B.用来传送回应的输出 C.正在执行的内容 D.用户端请求,此请求会包含来自GET/POST请求的参数 6.下面哪一个不是JSP本身已加载的基本类?() A、https://www.360docs.net/doc/aa11887210.html,ng.* B、java.io.* C、javax.servlet.* D、javax.servlet.jsp.* 7.对于预定义<%!预定义%>的说法错误的是:() A、一次可声明多个变量和方法,只要以“;”结尾就行 B、一个声明仅在一个页面中有效 C、声明的变量将作为局部变量 D、在预定义中声明的变量将在JSP页面初始化时初始化 8.从“员工” 表的“姓名”字段中找出名字包含“玛丽”的人,下面哪条select语句正

前端交互页面设计要求

任我游门户前端交互页面设计要求 文档编号: 文档版本: 1.0 拟制部门_____软件技术部______ 拟制_____李祖玉_2012_年_2_月 1 _日 审核_____ _______ _____年____月日 标准化审查_ 年月日 批准年月日上海易罗信息科技有限公司

文件更改记录

任我游门户前端交互页面设计要求3 / 9

任我游门户前端交互页面设计要求 5 / 9目录 1.规范说明 (6) 2.编码方式 (6) 3.注释 (6) 4.页面结构布局 (6) 4.1.使用HTML5标准 (7) 4.2.采用DIV布局 (7) 5.样式设计要求 (7) 5.1.避免使用CSS expressions (7) 5.2.合并样式中图片 (7) 5.3.尽量引用外部的CSS (7) 5.4.CSS引用放在顶部 (7) 6.JS设计要求 (8) 6.1.统一使用Jquery框架 (8) 6.2.JS尽量放在页面底部 (8) 7.MyGou静态文件目录结构 (8) 8.版本控制 (9) 9.前端页面进度安排 (9)

1.规范说明 为规范管理前端页面设计,提高页面加载速度,改善用户体验,便于项目的维护、更新和升级,特制定此标准。 2.编码方式 统一使用UTF-8编码 3.注释 HTML、CSS、JS文件都要写上注释。 HTML注释:结构体比较大时,分别在开始标签和结束标签写上注释(如: … );每个单独完整的结构体可以在开始和结束标签写上功能名称(如: … )。 CSS 注释:在css的文件的头部写上创建日期、修改内容等注释信息;每段HTML结构样式写上区块名称(如:/****** toolbar start******/…/****** toolbar end ******/)。 JS注释:在js的头部写上创建日期、修改内容等注释信息;在每个function 写上注释说明;功能复杂的functon在内部注释说明。 4.页面结构布局 合理的结构布局可以提高页面的加载速度,使浏览器兼容性更强,可读性更好,有利于html元素结构的重用和封装。

完整交互设计的基本原则

完整交互设计的基本原则: 1.美学 1)美术设计应该留给那些受过正规训练的有足够技术能力的图形或视觉设计师 2)设计潮流应该先考虑可用性 3)像测试交互设计一样也要对视觉设计进行测试 4)保持一致性 5) 2.预知需求 1)在用户达成目标的每一步都把所有必要的信息和工具带给用户 3.用户自主 1)不管是硬件环境还是软件环境都应该属于用户,但是这不是说用户自主控制就意味着我们要放任这个规则 2)让人们自主做出决定,尽管有些用户没有好的审美或者行为并不高效 3)一步步实践来提供给用户恰当的控制 4) 4.链接的触发机制 1)设备状态让用户可知 2)让状态信息保持及时更新并且容易看到 3)确保状态信息是精确的 4) 5.颜色 1)在用户界面设计中你想通过颜色传达信息时,你应该也要使用第二个线索来给那些不能 准确看清楚颜色的用户传达清楚信息。 2)测试一下你的网站去看一看色盲用户眼中你的网站是什么样子 3)不要因为不是每个用户都能看清楚每个颜色而避免在界面中使用颜色 4)在用户界面中不要因为一时的时尚潮流完全不用颜色或者使用大量的颜色线索 6.一致性 1)按照等级的不同维持严格的一致性 2)平台一致性和内部产品的一致性 3)系列产品的一致性 4)应用的欢迎屏、首页等设计元素的总体的视觉一致性 5)小的可见的结构元素一致性 6)不可见的产品元素的一致性 7)用户行为的响应 7.不一致性 1)就像当元素行为一样时视觉一致一样当元素行为不同时保持视觉不一致也是极其重要 的 2) 8.连续性 1)经过一段时间,追求连续性而不是一致性 2) 9.用户期待的一致性 10.默认 1)输入框中字段的默认行为

人机交互技术-熟悉网页设计

重庆邮电大学移通学院学生实验报告 实验名称:熟悉网页设计 专业班级: 姓名: 学号: 实验日期:

实验7:熟悉网页设计 实验目的 (1)熟悉企业网页设计的基本内容与要求; (2)通过因特网搜索与浏览,欣赏成功网站的设计,分析网站建设需要注意的问题,学习网页设计的成功经验。 工具/准备工作 在开始本实验之前,请认真阅读课程的相关内容。 需要准备一台带有浏览器,能够访问英特网的计算机。 实验内容与步骤 1.网站的对比分析 下面主要通过对一些成功网站的分析,来了解网页设计需要注意的问题,学习网页设计的成功经验。 步骤1:任务分析。为了成功地提供企业整体形象,为访问者和潜在的消费者提供所需的信息,企业在建设网站时要完成的6个任务是: (1)表达企业的整体形象。 (2)提供对企业信息的方便访问。 (3)允许访问者以不同方式和不同层次访问网站。 (4)为消费者提供有意义的双向沟通方式。 (5)维系消费者的这一里并鼓励重复访问。 (6)提供对产品和服务及使用方式的方便访问。 请在网上找到你认为能满足其中三个以上任务的网站,并解释这个网站是如何实现这些目标的。

请记录:你找到的这两个网站是: (1)网站名称:小米商城 网址:入选理由:界面优美、提供对企业信息的方便访问。 请简述该网站是如何实现这些目标的。 答:通过各种分类来设计其二维菜单给了用户以良好的选项概览,减少所需要 动作数,并且允许快速选择。从而提供对企业信息的方便访问,使消费者重复 访问。 (2)网站名称:中国三星电子官网 网址:入选理由:该官网提供对产品和服务及应用方式的方便访问、界面比较 简单、合理的介绍该旗下产品 请简述该网站是如何实现这些目标的。 答:通过本公司的各类分工,来设计的网站。能够体现本公司的最新产品介绍, 吸引消费者来消费。可以通过二维菜单来给用户良好的选项概览。提供了对企 业的方便访问,是消费者重复访问。 步骤2:比较网页设计。网页设计作为一种视觉语言,要研究色彩、编排和布局。版式设计通过文字图形的空间组合,表达出和谐与美。 请在网上找到你认为网页设计比较好的网站,并以10分为满分,给这些网站的网页设计打个印象分。 请记录:你找到的这两个网站是: (1)网站名称:携程旅行网 网址:印象分:5 (2)网站名称:飞猪 网址:印象分:6 步骤3:比较网站运营质量,进入网上书城(如当当、亚马逊和互动出版网等),订购一本《项目管理与应用》书,比较其商品数量、价格(折扣)、配送和支付手段等环节的优劣。 请简述你的分析结论。

交互设计规范

中国体育彩票销售终端系统 交互设计规范 交互设计的定义 交互设计(Interaction Design, 缩写IxD 或者IaD),是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面(Wikipedia)。通过对界面和行为进行交互设计,从而可以让使用者使用人造物来完成目标,这就是交互设计的目的。进一步讲,交互设计,应当是创造承接人类与计算机之间的界面即人机界面。

交互设计的两方面 交互设计的出发点在于研究用户和计算机交流(dialog)的时候,人的心智模型和行为模型,并在此研究基础上,设计界面信息及其交互方式,用人机界面将用户的行为翻译给计算机,将计算机的行为翻译给用户,来满足人对软件使用的需求。所以,交互设计一方面,是面向用户的,这时交互设计所追求的既是可用性(Usability),这也是交互设计的目的所在;交互设计的另一个方面是面向计算机实现的,这时我们关注于“软件工程化”。 交互设计的核心要素 机器/系统,人,界面 精确描述我们的用户以及用户希望达到的目标,定义几个典型角色,并用故事的形 式表达出来。

交互设计的目标 目标是行动的驱动力,产品的功能和行为必须通过任务来解决目标产品成功的关键是目标,而不是特性 成功的交互设计师应该对目标高度敏感 用户目标:生活目标体验目标最终目标 产品目标:利润市场 交互设计的原则 可视性:功能可视性越好,越方便用户发现和了解使用方法

交互网页设计(毕业论文)

目录 一、异步交互的实现: (1) 1、同步Web应用模型与异步Web应用模型: (1) 2、Ajax异步通信技术: (2) 4、JavaScript脚本程序: (3) 5、服务器端程序 (4) 6、分析总结: (5) 三、一个完整的交互页面分析 (6) 1、界面设计及设计思路: (6) 2、相关HTML页面代码: (7) 3、Js脚本设计: (10) 4、服务器端ASP程序设计: (13) 5、页面交互分析: (15) 6、小结: (17)

交互网页设计 ——Ajax与jQuery技术实现网页异步交互 一个优秀的网站通常会有以下几个方面的优势:漂亮的设计、友好的界面、规范的结构、智能化的后台处理以及充实的内容,另外还有一个不可忽视的就是良好的交互性。网站的交互性通常是给用户网页浏览过程中良好体验的一个非常重要的环节,满足用户的浏览需求,对用户的选择作出“及时”的响应,是交互性网页设计的关键。网页设计者一定要明白,缺乏交互性的网站即使看上去很美也是没有生命力的。 “交互”的本质就是用户(客户端)发出请求,通过网络传送到服务器(服务器端),服务器端处理用户的请求后得到结果,再次通过网络传送到客户端,客户端将返回的结果展示给用户。现在的交互式网页设计技术中,使用的最为广泛的就是Ajax技术,那么什么是Ajax呢?如何实现Ajax的应用呢?以下就围绕着这两个问题并通过实例进行说明。 一、异步交互的实现: 1、同步Web应用模型与异步Web应用模型: 传统的网页设计技术中,“交互”就已经存在,但与Ajax异步通信之间存在有一定的区别,看下面图示:

从图示中,可以看到,传统的Web应用模型中,客户端与服务器端是直接通信的,客户端发出请求后,一直等待服务器端的返回数据,直到服务器端处理完成返回数据后,客户端才会显示出处理结果,中间的数据传递过程和处理过程就是客户的等待的过程,浏览器中往往是显示一片空白,这就是同步应用模型,其最大缺点就是:页面全刷新,用户等待时间长,体验差。 异步Web应用模型中,弱化了客户界面前台的表单功能,不再由表单来实现数据的传递,转而通过Ajax引擎向服务器端传递数据,Ajax功能的实现则通过JavaScript语言来完成,服务器端返回的数据也通过Ajax引擎,利用JavaScript 来操作Html DOM更新页面。由于与服务器端的数据交流是由Ajax引擎完成,客户在前台的操作是不会被打断的,即数据在传递的过程中,用户可以继续其他的操作,这实际上也就是我们常说的“局部刷新”技术,用户的体验是非常完美的,在良好的网络状态下,甚至与我们的本机应用程序操作体验近似。 2、Ajax异步通信技术: Ajax(Asynchronous JavaScript And XML,异步JavaScript和XML)并不是什么新的语言或技术,而是使用JavaScript和XML完成的异步发送请求。 Ajax实际上就是JavaScript语言操作了一个新的对象,这个对象就是XMLHttpRequest对象,XMLHttpRequest就是异步发送请求的对象,这就是Ajax 技术的核心,而开发Ajax程序则需要完成五件事情,分别是:获取XMLHttpRequest对象、注册回调方法、打开请求、发送请求、编写回调方法。 获取XMLHttpRequest对象:由于不同的浏览器对W3C标准的支持程度是不同的,所以在网页编程中一定要考虑到浏览器的兼容问题 var xmlHttp; XMLHttp"); }

Microsoft 交互设计规范

Windows 用户体验交互设计规范 此官方[1] Windows 用户体验交互设计规范(简称“UX 规范”)的目标在于:?为所有基于 Windows 的应用程序划定高品质与一致性的基准。 ?回答关于用户体验的问题。 ?使你的工作更为轻松! 设计原则 ?Windows 用户体验设计原则 ?最容易犯的错误 ?如何设计优秀的用户体验 ?简约而又强大 (20.3%) ?使用 WPF 进行设计 (29.4%) 控件 控件列表 ?气球状提示 ?复选框 ?命令按钮 ?命令按钮 vs 链接 ?命令链接 ?下拉列表框与组合框 ?分组框 ?链接 ?列表框 ?列表视图 ?进度条 ?渐进展开控件 ?选项按钮 ?搜索框 ?滑块 ?微调控件 ?状态栏 ?选项卡

?文本框 ?工具提示与信息提示 ?树形视图 命令 ?菜单 o设计理念 (34%) ?工具栏 o设计理念 o使用模式 o设计规范 o推荐尺寸与间距 o标签 o文档编写 ?功能区(Ribbon) o设计理念 (35.7%) o设计规范 (8.7%) o标签 (25.1%) o文档编写 o功能区设计流程 (15.2%) o程序命令模式 (42.9%) 文本 ?用户界面文本 ?风格与语气 消息 ?错误信息 o设计理念 o使用模式 o设计规范 (31.3%) o文本 (11.7%) o文档编写 ?警告信息 o设计理念 (25.9%) o使用模式 o设计规范 o文本 o文档编写

?确认信息 o设计理念 (50.3%) o使用模式 o设计规范 (40.8%) o文本 o文档编写 ?通知 交互 ?键盘 o键盘快捷键 (0%) ?鼠标与指针 ?触摸 (11.6%) ?手写笔 (19.3%) ?无障碍访问(辅助特性) (3.5%) 窗口 ?窗口管理 ?对话框 (51.8%) o对话框设计理念 (19.5%) o对话框使用模式 (27.1%) ?通用对话框 ?向导 ?属性窗口 (5.3%) o属性窗口设计理念 (13.4%) o属性窗口使用模式 (35.3%) ?控制面板 (10.0%) o控制面板使用模式 (49.8%) 视觉 ?布局 o布局度量单位 ?窗口边框 ?字体(Segoe UI) ?颜色 ?图标 ?标准图标 (26.5%) ?动画与过渡NEW o设计理念 (11.2%)

(产品管理)产品设计交互规范最全版

(产品管理)产品设计交互规范

产品设计交互规范 常州广传网络技术有限公司 编写:王英 2013年11月

目录目录2 1概述3 1.1规范的目的4 1.2规范适用的范围4 1.3规范适用的人群4 2基本原则5 2.1一致性5 2.2简洁性5 2.3避免干扰和打断5 2.4减轻用户记忆负担5 2.5及时有效的反馈5 2.6让用户放松心态,不怕犯错6 3产品交互通用规范7 3.1受范性指示7 3.2操作不可用状态7 4组件规范9 4.1表格9 4.2单元格数据14 4.2.1单元格数据展示14

4.2.2通讯录15 4.3信息列表17 4.4编号和序号19 4.4.1编号19 4.4.2序号20 4.5注册表单22 4.6联系方式28 4.7图片裁切32 4.7.1固定尺寸32 4.7.2自定义尺寸34 4.8翻页35 4.9日期输入39 4.9.1通过日历选择日期39 4.9.2年份跨度较大时的日期选择43 4.9.3等量条目分隔线45 4.10高级加密48 4.11进度条51 4.12图形化面包屑53 4.13星级评分54 4.14保留图标57 4.15弹出层59

4.1 5.1非独占焦点层59 4.1 5.2独占焦点层60 4.1 5.3局部独占焦点层62 4.16搜索63 4.16.1模糊搜索63 4.16.2精确搜索65 4.17数据添加68 4.17.1添加单个文件68 4.17.2添加多个文件69 4.17.3添加行73 4.18排序73 1概述 规范的制定采用UCD(以用户为中心的设计)方法,遵循ISO9241-11部分标准的要求。 设计过程以用户的使用习惯和心理需求作为出发点,在认真研究并参考了国内外各种优秀设计的基础上,制定出了适合我集团应用服务产品的设计规范。此外,为保证规范具有良好的可用性和广泛的适用性,UE研究室对设计出的每个模式都进行了严格的用户测试,并对各组件采取了不同应用场景的测试。 该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中,给出了模式描述和扩展描述的规范描述,供不同的应用类型和使用场景选择、组合使用。 1.1规范的目的

(完整版)BS系统界面设计规范

B/S 系统界面设计规范 1. 引言 界面美观、操作易用性、维护成本低是评价B/S系统的关键。本规范参考了一些成熟产 品科学的开发方法,将开发过程中的方式、规则等强行的约束。希望藉此来提高用户操作感受,提升B/S产品的质量。 1.1. 编写目的 广义的界面概念包含了除页面布局设计之外,交互性的设计,及人体工程学方面的研究。本规范制订的依据从广义概念出发,总结以往项目的成败经验,目的是从整体上提升公司B/S类产品的质量、开发效率。从以技术为中心发展为以客户为中心,将类似项目成功的经 验继承和积累下来,将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层 面。 新的开发方式强调分层,规范出界面设计人员做什么,服务器编程人员做什么,这样就 把页面和控制代码两个层面清晰的分开。 1.2. 背景 B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点,在公司产品线中占 越来越大的比重,.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工 程方法统一起来,突出服务器端技术,这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作,团队的合作方式甚至决定了一个系统开发的成败。 目前公司较多的服务器端编程人员仍然处于“后ASP 时代”的开发方式,表现为前台 页面仍然与服务器代码高度的关联,带来的后果是重复建设、高昂的维护成本或失去控制的项目,没有充分的发挥出集成开发工具的优势。 在以往的开发方式下界面设计侧重在静态页面的建设上,每个页面作为一个独立的模 块来处理,在页面交互中则是程序员根据自己的习惯来控制,程序对个人的编程风格的依赖很强,这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的,甚至是背道而弛 的,当然也不利于规模化的团队合作。 1.3. 定义 术语定义: 效果图:由界面设计人员设计的页面效果图,综合了概要设计的业务需要和整个站点的 风格,它规定了页面布局上的每个细节。 容器:即HTML 标记的嵌套结构,如在表格->行->单元格内放置图片,那么可以认为 单元格是放置图片的容器。 样式表:即级联式样式表CSS,它是W3C机构在HTML标记语言上扩展的格式语言。 非标准交互控件:是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封 装的控件,或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。2. 界面设计规范细则 总体目标 以规范作为基本原则,在此框架内进行合理的扩展和变化,将站点内的每个模块服从于整个站点,模块页面与“高内聚”的控制代码紧密的结合在一起,同时对应于应用程序基于系统

相关文档
最新文档