交互设计规范(内部文档)(仅需1个财富值)

交互设计规范( 基于后台 )

产品部

2011年08月24日

修订历史

目录

1

概述 . ......................................................................................................................... 4 1.1 1.2 1.3 2

设计说明 ................................................................................................................................................ 4 读者对象 ................................................................................................................................................ 4 名词解释 ................................................................................................................................................ 4

页面信息规范............................................................................................................. 5 2.1 2.2 2.3

页面标题规范 ....................................................................................................................................... 5 链接新窗口规范 . .................................................................................................................................. 5 页面图片信息规范 .............................................................................................................................. 5

3 信息交互规范............................................................................................................. 6 3.1 3.2 3.3

预先信息提示 ....................................................................................................................................... 6 操作信息提示 ....................................................................................................................................... 7 结果信息提示 ....................................................................................................................................... 8

4 通用组件规范............................................................................................................. 9 4.1 4.2 4.3 4.4 4.5 4.6

导航 . ........................................................................................................................................................ 9 按钮 . ........................................................................................................................................................ 9 输入框..................................................................................................................................................... 9 搜索 . ........................................................................................................................................................ 9 浮层 . ......................................................................................................................................................10 列表 . ......................................................................................................................................................10

1. 概述

1.1 设计说明

交互设计是很自由的事情，因此规范不会对细微之处作明确规定。该文档为通用性质，通用交互规范目的是保证整站的交互体验的一致性。并且保证一些体验较好的交互方式能在各个模块中得以使用，从而保证产品设计的一致性，提升整体产品质量。 注：本交互规范基于55后台制定，与前台部分设计可参考。 页面信息规范

针对页面交互信息的标准，包括：页面标题、链接新窗口打开规范、图片信息。 信息交互规范

交互流程中包含的信息交互方式，包括：预先提示信息、操作提示信息、结果信息提示。 通用组件规范

对于一些可在多页面中使用的通用组件进行规范，包括：按钮、导航、输入框、搜索、浮层、列表。

1.2 读者对象

产品开发人员，产品交互人员，产品UI 设计人员

1.3 名词解释

2. 页面信息规范

2.1 页面标题规范

用于规范整个产品中所有不同层级不同功能的页面应该使用的标题。

标题需要加粗，不同层级的标题均需要加粗，设计过程中可自定义字体大小。

2.2 链接新窗口规范

用于规范页面链接是采用新窗口打开还是本窗口打开。 1. 本窗口打开

查询结果、上下翻页、内容保存等操作在本窗口打开。 2. 新窗口打开

各类详情页面、商品预览页面（编辑）采用新窗口打开、

2.3 页面图片信息规范

用于规范页面图片信息显示是否带有alt 、title 值、BLANK 链接。

目前后台图片分为：按钮图片、内容型图片 1. 按钮图片

Alt ：交互使用的按钮图片（不带文字）：如编辑交互操作的名称。

、添加、警告等。图片ALT 必须为

Title ：按钮图片不增加Title 值 2. 内容型图片

Alt ：服务器中保存该图片，在图片无法显示的时候可显示替代文字 各详情页面中该图片预览框中显示替代文字 各列表的图片预览框中不显示替代文字。 Title ：鼠标过去显示的文字

后台各详情页面指针指向该图片时显示文字 后台各列表页面指针指向该图片时显示文字 3. BLANK 链接

后台各详情页面点击该图片无效，不激活BLAN 链接

后台各列表页面点击列表中的图片则在新窗口打开商品详情页面。

3. 信息交互规范

3.1 预先信息提示

所有交互都应该提供较多的预先信息提示让用户知道该怎么做，做的后果什么，可填写

什么。

大体分为内容提交类、谨慎类操作、差异化规则 1. 内容提交类

每个输入项、条件选选项（包括时间选择）均需要给出提示信息。该提示信息可放置在输入框内或者控件尾部（如密码要多少多少位。搜索框提示用户输入什么内容等。） 2. 谨慎类操作

针对不可修改、重要操作选择等操作属于谨慎类操作，均需给出提示信息。如审核是否通过操作、退款申请操作、价格输入等。 3. 差异化规则

如果某一项操作与用户操作习惯相悖需要给出提示信息，比如渠道想添加某个商品但是该商品的供应商资料不完善没通过审核，需要提给出提出和帮助链接。

3.2 操作信息提示

发生任何操作时都需要进行信息提示，不管成功与失败。比如操作提交，数据输入。 分为三大类：确认提示、错误提示、读取提示 1. 确认提示

修改设置、删除数据等操作时需要弹出提示框，用户需要选择后方可执行。比如品控审核某商品点击通过按钮之后，弹出提示框品控人员需选择是或否，方可完成操作。 2. 错误提示

当用户的操作不符合规则、输入数据不符合规则需要给出操作提示。比如输入数值不符系统规定，则进行提示。错误提示分为：即时提示、提交后提示 ●

即时提示

需手动输入/选择的项目可以进行即时提示，当输入焦点移除之后不管输入框内是否有内容即可进行判断如果有误即显示提示，比如在添加商品过程中输入商品价格，价格如果超过系统设定当输入焦点移除之后则进行判断并进行错误提示。 注：上线时间不做判断当选择完下线时间之后即可判断如有错即可进行提示，服务开始结束时间也可如此。

可及时判断的项目包括：输入框、日期选择

● 提交后提示

对于未作任何输入操作和选择的项目不做及时判断，只能当提交表单之后才做判断并进行错误提示。比如商品是否可退未必选，但是没有系统默认选项，操作人员未做选择点击了提交定稿按钮，这时才会显示是否可退的错误提示信息。 对于提交后判断的项目包括：图片是否上传、单选/多选、下来菜单选择。

3. 读取提示

涉及到大量信息读取缓慢的时候应该进行提示。比如进入后台查看商品列表时，由于网络、数据量大等原导致载入缓慢，应该显示读取提示信息，已避免用户过度重复点击操作。

3.3 结果信息提示

当成功完成某一操作之后需要显示反馈的结果信息提示，比如查询商品，未查询到与条

件匹配的商品则需要显示信息提示。提示分为：保存结果提示、查询结果提示、添加结果提示 1. 保存结果提示

当进行商品添加/修改此类涉及到数据保存的操作，不管是否成功均需给出提示。 2. 查询结果提示

任何信息列表、查询结果，当对应信息结果的时候需要给出有无结果状态提示。不得使用空白信息。 3. 添加结果提示

当涉及到填写评审未通过原因这类的内容添加操作。保存之后可直接显示结果页面。

4. 通用组件规范

4.1 导航

后才操作页面导航分为两部分：导航条、软文导航

导航条：平台标题+各功能标签。（上下隶属关系，平台标题字体大于功能标签字体） 软文导航：平台标题>功能标签（字体相同颜相同） ● ●

激活标签与未激活标签显示不同颜色

指针指向未激活标签时标签字体显示下划线表示可激活

4.2 按钮

按钮分为两大类，一类是各页面中的功能操作按钮，比如确定、取消按钮；一类是数据

表格下方的翻页按钮 1. 功能操作按钮

各页面操作按钮需采用统一样式，按钮上的操作名称采用统一字体、颜色。 不可用按钮需要致灰显示 2. 翻页按钮

翻页按钮可采用纯文字链接，比如：首页、上一页、下一页、尾页。文字属性必须统一。当表格只有一页时翻页按钮需致灰显示。

4.3 输入框

规范各页面中的文本输入框。

1. 同一页面内单行文本输入框长宽尺寸必须统一，比如商品添加页面中的商品原价、商品

现价两个输入框的尺寸就必须要统一。

2. 多行文本输入框长宽尺寸可根据允许最大输入字符数来做决定。比如商品添加中的商品

长标题输入框。

3. 所有页面内单行与多行文本输入框均有边框

4. 所有页面内输入框中所输入的字符属性必须统一（字体，颜色，字号）

4.4 搜索

4.5 浮层

4.6 列表

规范各平台中的搜索设计

所有平台中的搜过功能均采用：名称标签+条件输入框/条件筛选+搜索按钮的模式 1. 名称标签需要规范，搜索与查询不能同时出现，比如“订单搜索”“商品查询”就

不符规范，需要统一为“订单查询”“商品查询”

2. 按钮需要规范，按钮功能名称统一为“查询”或者“搜索”

用于规范各页面内的浮层设计，是否可以禁止浮层以外的操作。

1. 浮层意外的区域是不可操作的，需要用户通过操作关闭浮层才可。比如弹出确认提

示框、切换城市等。只可在浮层区域内进行操作。可将浮层意外的区域进行暗显处理，以便与浮层明显区别开，方便操作。

用于规范各项数据信息列表。

各类信息列表均采用统一的显示格式、翻页方式、单页显示数量。