《2022年2022年交互设计规范 2.pdf》由会员分享，可在线阅读，更多相关《2022年2022年交互设计规范 2.pdf（10页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、交互设计规范文档1 / 10交互设计规范( 基于后台) 产品部2011 年 08 月 24 日名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 10 页 - - - - - - - - - 交互设计规范文档2 / 10修订历史版本时间修订人描述V1.0 完成页面规范、 信息交互规范、 通用组件规范的制定。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共
2、10 页 - - - - - - - - - 交互设计规范文档3 / 10目录1概述 . 41.1设计说明 . 41.2读者对象 . 41.3名词解释 . 42页面信息规范. 52.1页面标题规范. 5 2.2链接新窗口规范. 5 2.3页面图片信息规范. 5 3信息交互规范. 63.1预先信息提示. 6 3.2操作信息提示. 7 3.3结果信息提示. 8 4通用组件规范. 94.1导航 . 9 4.2按钮 . 9 4.3输入框 . 94.4搜索 . 9 4.5浮层 .10 4.6列表 .10 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - -
3、 - - - 名师精心整理 - - - - - - - 第 3 页，共 10 页 - - - - - - - - - 交互设计规范文档4 / 101.概述1.1设计说明交互设计是很自由的事情，因此规范不会对细微之处作明确规定。该文档为通用性质，通用交互规范目的是保证整站的交互体验的一致性。并且保证一些体验较好的交互方式能在各个模块中得以使用，从而保证产品设计的一致性，提升整体产品质量。注：本交互规范基于55 后台制定，与前台部分设计可参考。页面信息规范针对页面交互信息的标准，包括：页面标题、链接新窗口打开规范、图片信息。信息交互规范交互流程中包含的信息交互方式，包括：预先提示信息、 操作提示信
4、息、 结果信息提示。通用组件规范对于一些可在多页面中使用的通用组件进行规范，包括：按钮、导航、输入框、搜索、浮层、列表。1.2读者对象产品开发人员，产品交互人员，产品UI 设计人员1.3名词解释名 词解 释通用组件指的是在各页面均有使用的功能，比如导航栏ALT 图片无法显示的时候显示替代文字TITLE 指针指向图片的时候显示的文字名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 10 页 - - - - - - - - - 交互设计规范文档5 / 10BLANK 超链接预先
5、信息提示操作说明，比如某一输入框后面显示的输入内容太提示语。通用组件指在很多页面出现的功能组件，比如按钮，输入框，导航条。浮层页面中点击操作之后在该页面之上弹出的界面。该区域叫浮层。2.页面信息规范2.1页面标题规范用于规范整个产品中所有不同层级不同功能的页面应该使用的标题。标题需要加粗，不同层级的标题均需要加粗，设计过程中可自定义字体大小。2.2链接新窗口规范用于规范页面链接是采用新窗口打开还是本窗口打开。1.本窗口打开查询结果、上下翻页、内容保存等操作在本窗口打开。2.新窗口打开各类详情页面、商品预览页面（编辑）采用新窗口打开、2.3页面图片信息规范用于规范页面图片信息显示是否带有alt
6、、title值、 BLANK 链接。目前后台图片分为：按钮图片、内容型图片1.按钮图片Alt ：交互使用的按钮图片（不带文字）：如编辑、添加、警告等。图片ALT 必须为交互操作的名称。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 10 页 - - - - - - - - - 交互设计规范文档6 / 10Title ：按钮图片不增加Title 值2.内容型图片Alt ：服务器中保存该图片，在图片无法显示的时候可显示替代文字各详情页面中该图片预览框中显示替代文字各列表的图片
7、预览框中不显示替代文字。Title ：鼠标过去显示的文字后台各详情页面指针指向该图片时显示文字后台各列表页面指针指向该图片时显示文字3.BLANK 链接后台各详情页面点击该图片无效，不激活BLAN 链接后台各列表页面点击列表中的图片则在新窗口打开商品详情页面。3.信息交互规范3.1预先信息提示所有交互都应该提供较多的预先信息提示让用户知道该怎么做，做的后果什么， 可填写什么。大体分为内容提交类、谨慎类操作、差异化规则1.内容提交类每个输入项、 条件选选项 （包括时间选择）均需要给出提示信息。该提示信息可放置在输入框内或者控件尾部（如密码要多少多少位。搜索框提示用户输入什么内容等。）2.谨慎类操
8、作名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 10 页 - - - - - - - - - 交互设计规范文档7 / 10针对不可修改、 重要操作选择等操作属于谨慎类操作，均需给出提示信息。如审核是否通过操作、退款申请操作、价格输入等。3.差异化规则如果某一项操作与用户操作习惯相悖需要给出提示信息，比如渠道想添加某个商品但是该商品的供应商资料不完善没通过审核，需要提给出提出和帮助链接。3.2操作信息提示发生任何操作时都需要进行信息提示，不管成功与失败。比如操作提交，数据
9、输入。分为三大类：确认提示、错误提示、读取提示1.确认提示修改设置、 删除数据等操作时需要弹出提示框，用户需要选择后方可执行。比如品控审核某商品点击通过按钮之后，弹出提示框品控人员需选择是或否，方可完成操作。2.错误提示当用户的操作不符合规则、输入数据不符合规则需要给出操作提示。比如输入数值不符系统规定，则进行提示。错误提示分为：即时提示、提交后提示即时提示需手动输入 /选择的项目可以进行即时提示，当输入焦点移除之后不管输入框内是否有内容即可进行判断如果有误即显示提示，比如在添加商品过程中输入商品价格，价格如果超过系统设定当输入焦点移除之后则进行判断并进行错误提示。注：上线时间不做判断当选择完
10、下线时间之后即可判断如有错即可进行提示，服务开始结束时间也可如此。可及时判断的项目包括：输入框、日期选择名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 10 页 - - - - - - - - - 交互设计规范文档8 / 10提交后提示对于未作任何输入操作和选择的项目不做及时判断，只能当提交表单之后才做判断并进行错误提示。比如商品是否可退未必选，但是没有系统默认选项，操作人员未做选择点击了提交定稿按钮，这时才会显示是否可退的错误提示信息。对于提交后判断的项目包括：图片是否
11、上传、单选/多选、下来菜单选择。3.读取提示涉及到大量信息读取缓慢的时候应该进行提示。比如进入后台查看商品列表时，由于网络、数据量大等原导致载入缓慢，应该显示读取提示信息，已避免用户过度重复点击操作。3.3结果信息提示当成功完成某一操作之后需要显示反馈的结果信息提示，比如查询商品， 未查询到与条件匹配的商品则需要显示信息提示。提示分为： 保存结果提示、 查询结果提示、添加结果提示1.保存结果提示当进行商品添加/修改此类涉及到数据保存的操作，不管是否成功均需给出提示。2.查询结果提示任何信息列表、 查询结果， 当对应信息结果的时候需要给出有无结果状态提示。不得使用空白信息。3.添加结果提示当涉及
12、到填写评审未通过原因这类的内容添加操作。保存之后可直接显示结果页面。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 10 页 - - - - - - - - - 交互设计规范文档9 / 104.通用组件规范4.1导航后才操作页面导航分为两部分：导航条、软文导航导航条：平台标题+各功能标签。 （上下隶属关系，平台标题字体大于功能标签字体）软文导航：平台标题功能标签（字体相同颜相同）激活标签与未激活标签显示不同颜色指针指向未激活标签时标签字体显示下划线表示可激活4.2按钮按钮
13、分为两大类，一类是各页面中的功能操作按钮，比如确定、 取消按钮； 一类是数据表格下方的翻页按钮1.功能操作按钮各页面操作按钮需采用统一样式，按钮上的操作名称采用统一字体、颜色。不可用按钮需要致灰显示2.翻页按钮翻页按钮可采用纯文字链接，比如：首页、 上一页、下一页、尾页。文字属性必须统一。当表格只有一页时翻页按钮需致灰显示。4.3输入框规范各页面中的文本输入框。1.同一页面内单行文本输入框长宽尺寸必须统一，比如商品添加页面中的商品原价、商品名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - -
14、第 9 页，共 10 页 - - - - - - - - - 交互设计规范文档10 / 10现价两个输入框的尺寸就必须要统一。2.多行文本输入框长宽尺寸可根据允许最大输入字符数来做决定。比如商品添加中的商品长标题输入框。3.所有页面内单行与多行文本输入框均有边框4.所有页面内输入框中所输入的字符属性必须统一（字体，颜色，字号）4.4搜索规范各平台中的搜索设计所有平台中的搜过功能均采用：名称标签+ 条件输入框 /条件筛选 + 搜索按钮的模式1.名称标签需要规范，搜索与查询不能同时出现，比如“订单搜索”“商品查询”就不符规范，需要统一为“订单查询”“商品查询”2.按钮需要规范，按钮功能名称统一为“查询”或者“搜索”4.5浮层用于规范各页面内的浮层设计，是否可以禁止浮层以外的操作。1.浮层意外的区域是不可操作的，需要用户通过操作关闭浮层才可。比如弹出确认提示框、切换城市等。 只可在浮层区域内进行操作。可将浮层意外的区域进行暗显处理，以便与浮层明显区别开，方便操作。4.6列表用于规范各项数据信息列表。各类信息列表均采用统一的显示格式、翻页方式、单页显示数量。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 10 页 - - - - - - - - -