交互设计规范 - 副本.docxVIP

交互设计规范( 基于后台 )产品部2011年08月24日修订历史版本时间修订人描述V1.0完成页面规范、信息交互规范、通用组件规范的制定。目录1概述41.1设计说明41.2读者对象41.3名词解释42页面信息规范52.1页面标题规范52.2链接新窗口规范52.3页面图片信息规范53信息交互规范63.1预先信息提示63.2操作信息提示73.3结果信息提示84通用组件规范94.1导航94.2按钮94.3输入框94.4搜索94.5浮层104.6列表10概述设计说明交互设计是很自由的事情，因此规范不会对细微之处作明确规定。该文档为通用性质，通用交互规范目的是保证整站的交互体验的一致性。并且保证一些体验较好的交互方式能在各个模块中得以使用，从而保证产品设计的一致性，提升整体产品质量。注：本交互规范基于55后台制定，与前台部分设计可参考。页面信息规范针对页面交互信息的标准，包括：页面标题、链接新窗口打开规范、图片信息。信息交互规范交互流程中包含的信息交互方式，包括：预先提示信息、操作提示信息、结果信息提示。通用组件规范对于一些可在多页面中使用的通用组件进行规范，包括：按钮、导航、输入框、搜索、浮层、列表。读者对象产品开发人员，产品交互人员，产品UI设计人员名词解释名 词解 释通用组件指的是在各页面均有使用的功能，比如导航栏ALT图片无法显示的时候显示替代文字TITLE指针指向图片的时候显示的文字BLANK超链接预先信息提示操作说明，比如某一输入框后面显示的输入内容太提示语。通用组件指在很多页面出现的功能组件，比如按钮，输入框，导航条。浮层页面中点击操作之后在该页面之上弹出的界面。该区域叫浮层。页面信息规范页面标题规范用于规范整个产品中所有不同层级不同功能的页面应该使用的标题。标题需要加粗，不同层级的标题均需要加粗，设计过程中可自定义字体大小。链接新窗口规范用于规范页面链接是采用新窗口打开还是本窗口打开。本窗口打开查询结果、上下翻页、内容保存等操作在本窗口打开。新窗口打开各类详情页面、商品预览页面（编辑）采用新窗口打开、页面图片信息规范用于规范页面图片信息显示是否带有alt、title值、BLANK链接。目前后台图片分为：按钮图片、内容型图片按钮图片Alt：交互使用的按钮图片（不带文字）：如编辑、添加、警告等。图片ALT必须为交互操作的名称。Title：按钮图片不增加Title值内容型图片Alt：服务器中保存该图片，在图片无法显示的时候可显示替代文字各详情页面中该图片预览框中显示替代文字各列表的图片预览框中不显示替代文字。Title：鼠标过去显示的文字后台各详情页面指针指向该图片时显示文字后台各列表页面指针指向该图片时显示文字BLANK链接后台各详情页面点击该图片无效，不激活BLAN链接后台各列表页面点击列表中的图片则在新窗口打开商品详情页面。信息交互规范预先信息提示所有交互都应该提供较多的预先信息提示让用户知道该怎么做，做的后果什么，可填写什么。大体分为内容提交类、谨慎类操作、差异化规则内容提交类每个输入项、条件选选项（包括时间选择）均需要给出提示信息。该提示信息可放置在输入框内或者控件尾部（如密码要多少多少位。搜索框提示用户输入什么内容等。）谨慎类操作针对不可修改、重要操作选择等操作属于谨慎类操作，均需给出提示信息。如审核是否通过操作、退款申请操作、价格输入等。差异化规则如果某一项操作与用户操作习惯相悖需要给出提示信息，比如渠道想添加某个商品但是该商品的供应商资料不完善没通过审核，需要提给出提出和帮助链接。操作信息提示发生任何操作时都需要进行信息提示，不管成功与失败。比如操作提交，数据输入。分为三大类：确认提示、错误提示、读取提示确认提示修改设置、删除数据等操作时需要弹出提示框，用户需要选择后方可执行。比如品控审核某商品点击通过按钮之后，弹出提示框品控人员需选择是或否，方可完成操作。错误提示当用户的操作不符合规则、输入数据不符合规则需要给出操作提示。比如输入数值不符系统规定，则进行提示。错误提示分为：即时提示、提交后提示即时提示需手动输入/选择的项目可以进行即时提示，当输入焦点移除之后不管输入框内是否有内容即可进行判断如果有误即显示提示，比如在添加商品过程中输入商品价格，价格如果超过系统设定当输入焦点移除之后则进行判断并进行错误提示。注：上线时间不做判断当选择完下线时间之后即可判断如有错即可进行提示，服务开始结束时间也可如此。可及时判断的项目包括：输入框、日期选择提交后提示对于未作任何输入操作和选择的项目不做及时判断，只能当提交表单之后才做判断并进行错误提示。比如商品是否可退未必选，但是没有系统默认选项，操作人员未做选择点击了提交定稿按钮，这时才会显示是否可退的错误提示信息。对于提交后判断的项目包括：图片是否上传、单选/多选、下来菜单选