产品规划模板——用户体验规范总纲


    




    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)户传

    《香当网》用户分享的内容,不代表《香当网》观点或立场,请自行判断内容的真实性和可靠性!
    该内容是文档的文本内容,更好的格式请下载文档

    下载文档到电脑,查找使用更方便

    文档的实际排版效果,会与网站的显示效果略有不同!!

    需要 2 积分 [ 获取积分 ]

    下载文档

    相关文档

    导航用户体验优化项目体验报告

    内部管理系统导航功能用户体验优化项目体验报告1 前言导航是管理系统中的重要部分,指示着用户所在的位置,并指引着用户的行动方向,用户通过各种导航在系统上完成各项任务。导航的清晰与否强烈地影响着用...

    9年前   
    664    0

    QQ安全助手体验产品体验

    QQ安全助手体验好的地方最突出的特点就是人性化,很多细节都有体现!首先是界面:颜色好看,布局清晰简洁,操作引导简单方便。然后是功能:软件管理方便(包括卸载、点评和介绍);软件更新更为方便;人性...

    9年前   
    550    0

    用户体验的76要素

    一、感官体验:呈现给用户视听上的体验,强调舒适性。 1. 设计风格:符合目标客户的审美习惯,并具有一定的引导性。 网站在设计之前,必须明确目标客户群体,并针对目标客户的审美喜好,进行分析,从而...

    8年前   
    493    0

    浅析京东商城最终产品页的营销手段和用户体验

    浅析京东商城最终产品页的营销手段和用户体验(一)在《浅析京东最终产品页的SEO 合理分布关键字密度》中,分析了京东的seo部分,今天咱们来看其营销手段。对于电商来说,产品图片可以说是最最重要的...

    9年前   
    647    0

    微信产品体验

    微信体验优势1. 非常省流量2. 声音可以切换到听筒,非常体贴细心3. 联系人全面覆盖:手机通讯录、QQ好友、QQ邮箱、微博4. 打通上述平台,收发QQ离线消息、可以于微博互发私信5. 视频功...

    11年前   
    499    0

    产品审核规范

    产品审核规范 CAL QT 8-2本规范规定了产品审核的目的、依据、计划、范围、频次、人员、缺陷分级和质量指数、目标值、未达标和缺陷处理措施、审核结果和报告、计划外审核以及审核流程等内容。1...

    2年前   
    565    0

    软件产品用户服务条款

    软件产品用户服务条款  一、软件产品保护条款  1._________软件产品由_________计算机系统有限公司开发。本软件产品受中华人民共和国版权法及国际版权条约和其他知识产权法及条约的...

    11年前   
    495    0

    产品需求分析:用户的“奶酪”不要碰

    产品需求分析:用户的“奶酪”不要碰2011-9-14 21:34| 发布者: admin| 查看: 79| 评论: 0花了差不多2周时间去研究了卖猪肉的商贩,当和行业内朋友谈及这个形象的范例时...

    11年前   
    510    0

    用户手册编制规范

     用户手册编制规范 沈阳东大阿尔派软件股份有限公司 2000.2 版权声明 《用户...

    7年前   
    9179    0

    QQ手机通讯录产品体验

    QQ手机通讯录体验优点1. 操作界面简洁明了,易于新上手的人使用2. 颜色搭配好看3. 选中某个联系人后,有拨打电话、拨打IP电话、发送信息、发送名片,联系人管理(编辑、删除、加入分组)五个选...

    10年前   
    514    0

    软件项目用户体验性测试报告

    <单击此处输入项目名称>用户体验性测试报告模板文档编号:受控状态:受控版本号:V1.0年月日修 订 记 录类别:A – 增加 M – 修改 D – 删除版本日期制定类别批准描述(注明修改的...

    4年前   
    973    0

    分析网站优化与SEO及用户体验的关系

    分析网站优化与SEO及用户体验的关系  [摘 要]随着互联网技术的发展, 网站优化推, 已经成为当今企业拓展企业业绩的一种重要手段。网站优化包括了用户体验优化、搜索引擎优化(se0)以及网站运...

    8年前   
    600    0

    面向健康领域手持终端的用户体验设计

     面向健康领域手持终端的用户体验设计   摘要随着社会的不断发展和科技的不断进步,人们对自身身体健康的重视程度越来越高,智能医疗服务在全球都受到...

    2年前   
    394    0

    产品规划模板——UI框架JS使用说明

    黄埔海关JS说明JS使用说明2013-05-14文件:DD_belatedPNG_0.0.8a-min.js <!--[if IE 6]><script src=“js/DD_belatedP...

    11年前   
    529    0

    产品规划模板——UI框架设计说明文档

    UI框架设计说明黄埔海关规范文档2012-12-07一、CSS框架 文件结构说明名称类型备注/根目录images目录存放模板图片目录css目录存样式文件目录 login.css样式文件登...

    10年前   
    584    0

    产品规划模板——UI框架CSS说明文档

    黄埔海关UI框架CSS说明控件使用说明2013-05-14login.css 关键样式class说明class备注.container内容区宽高.logoLogo定位样式.login_box...

    12年前   
    586    0

    安全操作规程总纲

    操作规程总纲 1、      驾驶员安全操作规程……. 2、      押运员安全操作规程……. 3、      危险货物运输安全操作规程……. 安全管理制度 一、机动车辆安全管理制...

    12年前   
    11630    0

    拓扑心理学总纲

    拓扑心理学拓扑心理学”(topological psychology)是格式塔心理学派的一个变种或分支。为德国心理学家库尔特•勒温(Kurt Lewm 1890—1947)所创立。拓扑学是几何...

    3年前   
    647    0

    产品标识管理规范方法

    产品标识管理规范方法 1          目的 为保证在产品实现的全过程中有效地识别产品,应对产品进行适当标识,以防止不同型号不同状态的产品混淆或误用,特制定本产品标识管理规范方法。 ...

    14年前   
    18696    0

    产品技术规范书

    多年以来,电力电缆运行与维护部门对电力电缆刺扎,均按照行业标准DL409-91第234条要求,采用人工试扎待锯电缆,一旦电缆识别出错,误刺扎带电运行电缆将造成极大的危害。

    6年前   
    13457    0