UIUE设计规范( 邮政 )
李巍
2012年10月01日
修订历史
版
时间
修订
描述
V10
20121001
李巍
完成页面规范信息交互规范通组件规范制定
目录
1 概述 5
11 设计说明 5
12 样处: 5
13 读者象 5
14 名词解释 5
2 页面信息规范 6
21 页面标题规范 6
22 链接新窗口规范 6
23 页面图片信息规范 6
3 信息交互规范 7
31 预先信息提示 7
32 操作信息提示 7
33 结果信息提示 8
34 界面显示细节约定: 9
35 交互操作时细节约定: 9
4 界面设计规范 10
5 通控件规范 11
51 导航 11
52 钮 11
53 输入框 11
54 搜索 11
55 浮层 12
56 列表 12
57 流程图展示控件 12
58 统计图 12
6 系统反馈信息规范 13
61 服务器反馈信息 13
62 数库信息 13
63 系统信息 13
64 操作相关反馈信息 13
7 前线作业系统规范细约定 13
8 UI框架规范 16
9 命名规范 16
91 统术语 16
概述
11 设计说明
交互设计事情规范会细微处作明确规定该文档通性质通交互规范目保证整站交互体验致性保证体验较交互方式模块中保证产品设计致性提升整体产品质量
Ø 页面信息规范
针页面交互信息标准包括:页面标题链接新窗口开规范图片信息
Ø 信息交互规范
交互流程中包含信息交互方式包括:预先提示信息操作提示信息结果信息提示
Ø 通控件规范
页面中通组件进行规范包括:钮导航输入框搜索浮层列表
12 样处:
Ø 户起够建立起精确心里模型熟练界面切换外界面够轻松推测出种功语句理解需费神理解
Ø 降低培训支持成支持员费力逐指导
Ø 户统感觉觉混乱心情愉快支持度增加
13 读者象
产品设计员产品开发员产品交互员产品UI设计员
14 名词解释
名 词
解 释
通布局
指页面均功导航栏状态栏logo
ALT
图片法显示时候显示代文字
TITLE
信息区标题文字标题
BLANK
超链接
预先信息提示
操作说明某输入框面显示输入容太提示语
通组件
指页面出现功组件钮输入框导航条
浮层
页面中点击操作该页面弹出界面该区域浮层
2 页面信息规范
21 页面标题规范
Ø 页面标题命名规范
根户web端系统惯Title命名基前页面名称放首位父级页面名称排列越面原名称面包屑导航致
名称名称中间适应英文空格英文
格式:前页面名称 次父级页面名称 父级页面名称 台名称
22 链接新窗口规范
Ø 规范页面链接采新窗口开窗口开
1 窗口开
查询结果翻页容保存等操作窗口开
2 新窗口开
类详情页面信息预览页面详细信息编辑采新窗口开
3 弹出层显示
根需求选择弹出层显示系数简短数表格显示等
23 页面图片信息规范
Ø 规范页面图片信息显示否带alttitle值BLANK链接
目前系统图片分:钮图片容型图片
1 钮图片
Alt:交互钮图片(带文字):编辑添加警告等图片ALT必须交互操作名称
2 容型图片(统计图等)
Alt:服务器中保存该图片图片法显示时候显示代文字
详情页面中该图片预览框中显示代文字
列表图片预览框中显示代文字
Title:鼠标显示文字
系统详情页面指针指该图片时显示文字
系统列表页面指针指该图片时显示文字
3 BLANK链接
台详情页面点击该图片效激活BLAN链接
台列表页面点击列表中图片新窗口开图片详情页面
3 信息交互规范
31 预先信息提示
Ø 交互应该提供较预先信息提示户知道该做做果什填写什
体分容提交类谨慎类操作差异化规
1 容提交类
输入项条件选选项(包括时间选择)均需出提示信息该提示信息放置输入框者控件尾部(密码少少位搜索框提示户输入什容等)
2 谨慎类操作
针修改重操作选择等操作属谨慎类操作均需出提示信息
3 差异化规
果某项操作户操作惯相悖需出提示信息譬户认知匹配时
32 操作信息提示
Ø 发生操作时需进行信息提示成功失败操作提交数输入
Ø 分三类:确认提示错误提示读取提示
1 确认提示
修改设置删数等操作时需弹出提示框户需选择方执行户信息删点击通钮弹出提示框系统理员需选择否方完成操作
2 错误提示
户操作符合规输入数符合规需出操作提示输入数值符系统规定进行提示错误提示分:时提示提交提示
l 时提示
需手动输入选择项目进行时提示输入焦点移输入框否容进行判断果误显示提示验证码验证时候验证码果匹配输入焦点移进行判断进行错误提示
注:开始时间做判断选择完结束时间判断错进行提示服务激活开始结束时间
时判断项目包括:输入框日期选择
l 提交提示
未作输入操作选择项目做时判断提交表单做判断进行错误提示表单必填项操作员未做选择点击提交钮时会显示必填项错误提示信息
提交判断项目包括:图片否传单选选拉菜单选择
3 读取提示
涉量信息读取缓慢时候应该进行提示进入查信息列表时网络数量等原导致载入缓慢应该显示读取提示信息已避免户度重复点击操作
数读取失败等页面错误结果需反馈错误信息相应解决办法
33 结果信息提示
Ø 成功完成某操作需显示反馈结果信息提示查询户未查询条件匹配时需显示信息提示提示分:保存结果提示查询结果提示添加结果提示
1 保存结果提示
进行变更添加修改类涉数保存操作否成功均需出提示
2 查询结果提示
信息列表查询结果应信息结果时候需出结果状态提示空白信息
3 添加结果提示
涉填写表单容添加操作保存直接显示结果页面
34 界面显示细节约定:
Ø 致性致外观户界面更易理解户界面控件起应该致
Ø 系统兼容全部浏览器全部分辨率
Ø 安排流程西方文化中(包括中国)惯左右进行阅读应该重信息放面左边左角容易吸引起注意力
Ø 齐通常左齐户界面控件更易浏览数值文应该数点齐右齐非数值文应该避免右齐居中齐必什中间齐者保持称形式右边底部保留空白区域更适合惯
Ø 分组相关户界面控件分成组体现间关系时显示相关信息控件放作象旁空格分组框线条标签者分隔符户界面控件进行分组
Ø 强调焦点位置分组层次启禁颜色者字体等注意力集中需首先户界面控件量视方式指明户接应该进行操作
Ø 视提示量似间距指出户界面控件相似间距指出户界面控件视
35 交互操作时细节约定:
Ø 量提供功键盘访问理想情况绘图样图形功功应该通键盘访问
Ø 量提供功鼠标访问理想情况文输入外功应该通鼠标访问
Ø 确保具明显果操作求户进行明确选择户需完全明确进行危险性操作破坏性操作
Ø 耗时操作出反馈进行长时间操作时确保等光标进度表视反馈户应该够取消长时间操作果取消未完成操作钮标记
取消否钮标记停止
Ø 视指示模式户提供种视反馈指出户进入种模式通常通更改光标标题栏文做点
Ø 确保单击双击致性单击非钮选定双击选定执行默认操作换句话说双击(列表框组合框接受双击控件中)效果应该选定控件中项目然Enter键效果样l鼠标右键仅快捷菜单确保鼠标右键仅快捷菜单途
Ø 鼠标中键果户鼠标中键户控制面板中鼠标实程序分配中键行
Ø 保持分配快捷键致性组合功键Ctrl键快捷键惯Alt键组合键量避免Alt键Ctrl键种组合会快捷键非常麻烦方便
Ø 快捷键作补充方式千万快捷键作访问命令唯方法应该户更明显选择
Ø 避免水滚动条垂直滚动条水滚动条受欢迎会项目阅读起较困难解决办法:量垂直滚动条加宽窗口减文宽度者文动换行等然果确实需水滚动条量页面出现滚动条
Ø 重复性操作必须提供复制批量操作功
Ø 文件传应该充分提供兼容文件格式
Ø 文件导出需提供常格式
Ø 横滚动必须种操作方式:箭头钮滚动键盘操作滚动条等
4 界面设计规范
Ø 提供统户表现交互关键环节界面设计必须遵循适设计规范统系统表现
Ø 详细见附件:css框架说明文档
5 通控件规范
51 导航
Ø 操作页面导航分两部分:导航菜单页面标签
导航菜单:台标题+功标签(隶属关系台标题字体功标签字体)
面包屑导航:台标题>功标签(字体相颜相)
l 激活标签未激活标签显示颜色
l 指针指未激活标签时标签字体变化状态表示激活
52 钮
Ø 钮分两类类页面中功操作钮确定取消钮类数表格方翻页钮
l 功操作钮
页面操作钮需采统样式钮操作名称采统字体颜色
钮需致灰显示
l 翻页钮
翻页钮采纯文字链接:首页页页尾页文字属性必须统表格页时翻页钮需致灰显示
53 输入框
Ø 规范页面中文输入框
l 页面单行文输入框长宽尺寸必须统
l 行文输入框长宽尺寸根允许输入字符数做决定
l 页面单行行文输入框均边框
l 页面输入框中输入字符属性必须统(字体颜色字号)
l 页面表单控件必须定式样齐规
l 输入框前提示名字根绝系统语言选择
54 搜索
Ø 规范台中搜索设计
台中搜功均采:名称标签+条件输入框条件筛选+搜索钮模式
l 名称标签需规范搜索查询时出现户搜索单查询符规范需统户查询单查询
l 钮需规范钮功名称统查询者搜索
55 浮层
Ø 规范页面浮层设计否禁止浮层外操作
l 浮层意外区域操作需户通操作关闭浮层弹出确认提示框切换城市等浮层区域进行操作浮层意外区域进行暗显处理便浮层明显区开方便操作
56 列表
Ø 规范项数信息列表
类信息列表均采统显示格式翻页方式单页显示数量
Ø 配置表格显示条数(页60条100条)
Ø 选取提供表单数功
Ø 表格需提供表格配置功
Ø 表格提供表头数筛选功容匹配标准:模糊匹配
Ø 表格数应该业务员关心容显示衡量标准
Ø 信息量操作应该前表格直接操作
57 流程图展示控件
Ø 涉流程业务页面必须查整体流程界面前流程进度提示
58 统计图
Ø 统计图果种图表应该提供户行选取图形展示功(默认展示方式)
6 系统反馈信息规范
61 服务器反馈信息
Ø 服务器相关包括:服务器机IIS错误等应该反馈准确描述户知道服务器问题完成前操作
Ø 错误处理办法:提供错误处理相关部门者员电话提醒键报障等
62 数库信息
Ø 数库信息包括:网络原数堵塞数查询数出错数查询等等
Ø 错误处理办法:提供数查询等标识提供数库错误反馈编号提供适文字提醒等
63 系统信息
Ø 系统信息包括:页面错误页面丢失程序bug等等
Ø 错误处理办法:提供系统错误者页面错误编号提供程序bug错误编号适文字提醒
64 操作相关反馈信息
Ø 操作相关包括:户错误操作引起问题系统功关联错误引起问题系统间接口等素引起问题
Ø 错误处理办法:提供正确操作办法提供出错方提供接口功关联错误编号
7 前线作业系统规范细约定
Ø 普通外观:
l 致性致外观户界面更易理解户界面控件起应该致
l 分组相关户界面控件分成组体现间关系时显示相关信息控件放作象旁空格分组框线条标签者分隔符户界面控件进行分组
l 强调焦点位置分组层次启禁颜色者字体等注意力集中需首先户界面控件量视方式指明户接应该进行操作
l 视提示量似间距指出户界面控件相似间距指出户界面控件视
l 注意户界面控件分辨率具独立性兼容性
l 考虑资源预定义布局网格助您窗口间实现致性
Ø 交互
l 量提供功键盘访问理想情况绘图样图形功功应该通键盘访问
l 量提供功鼠标访问理想情况文输入外功应该通鼠标访问
l 确保具明显果操作求户进行明确选择户需完全明确进行危险性操作破坏性操作
l 量提高系统反馈速度
l 视指示模式户提供种视反馈指出户进入种模式通常通更改光标标题栏文做点
l 鼠标右键仅快捷菜单确保鼠标右键仅快捷菜单途
Ø 默认
l 保存恢复户选择程序应该够够恢复退出状态话框通常应该输入值作默认值
l 提供适默认值提供提供适默认值减少户必操作帮助户完成工作提供出设置实际方式默认值通常默认值户输入值
l 考虑选择默认值时安全性应该恢复破坏性操作设置默认值令户感莫名妙默认值
Ø 图片图标
l 界面中功应该样图标图片图标图片色调风格量保持致图标图片隐喻应确切表示功含义果直接文免混淆户果功动作时较难找确切表示该功图标时应该量采动作相关名词做图标例Windows 中剪切功剪刀表示
Ø 导
l 高级复杂常务导
l 导非常高级复杂务十分省户许麻烦操作导常务时效果常务导显
Ø 控件
l 量采标准控件采标准控件完全合理时定义控件
l 定制标准控件时心改变标准控件标准外观行时定心常常出错方
l 效控件置适前程序状态控件置
l 取消必滚动条量控件尺寸足够避免滚动条
Ø 文
l 左齐静态文标签左齐标签外观更条理易浏览
l 宁静态文标签置相关控件左边面样齐标签更易发现方便标签控件浏览明显长控件例外情况列表视图树形视图(Tree)行编辑框
l 总标识控件静态文标签带号号明显表示控件标签文控件提供附加信息标签应该号解释滑块控件标签
l 标签作屏幕读出器输入信息静态文置凸起边界凸起边界静态文起钮户会试图单击
Ø 菜单
l 菜单栏文间留空隙菜单栏文难
l 避免占行菜单栏父窗口缩足够窄时菜单栏占行避免正常时菜单项占行菜单栏
l 保持菜单稳定效菜单置删
l 合理安排菜单项序相关菜单项组合起重命令应该位菜单顶部重菜单位菜单底部
l 分配访问键访问键户手离开键盘进行操作提供程序访问性然菜单中访问键应该唯
l 总采省略号表示需更信息
l 复选标记开关选项单选组改变模式复选标记进行选项开关操作效果模式改变外种状态难免迷惑
l 列拉菜单列增加菜单必复杂性
l 右齐菜单标题易
8 UI框架规范
Ø UI框架程度提高开发员效率
Ø 详细见附件:深圳客户营销理系统CSS框架
9 命名规范
91 统术语
Ø 术语重性
名称区描述查找事物名称分解理解熟悉事物采统术语助更理解进行交流简化统户界面术语助户理解充分应设计界面
术语描述相事物迷惑改变已熟悉术语害
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容,不代表《香当网》观点或立场,请自行判断内容的真实性和可靠性!
该内容是文档的文本内容,更好的格式请下载文档