000苏宁UED交互规范(第一讲)教程.pptxVIP

交互规范讲解;交互规范讲解;;;板式布局;;标准头部;标准头部;标准尾部;;;;输入框（Text fields）;输入框（Text fields）;;必须执行： 1.如果需要填写的数据有限制，需要设定好输入框的长度或者可以输入的字符类型 ;单选框（Radio）;单选框（Radio）;2.点击选项内容也应该触发选择（适当扩大点选区域） 3.几组单选项之间应有明确的间隔和归属关系 4.选项一般为2-9个，多余9个建议使用下拉列表，以节省页面空间 5.不要使用单选框来进行开关操作，应使用复选框。单选框为必选项，复选框选择的自由度更高 ;复选框（Checkbox ）;复选框（Checkbox ）;列表框（Select）;2.选项过多时，需要使用滚动条 ;按钮（Button）;按钮（Button）;设计原则（必须执行）： 1.按钮被点击后，如需用户等待，则必须提供反馈 （反馈方式有多种情况:变换按钮状态 / 鼠标指针 / 浏览器状态栏 / 页面顶部提示区。可根据情况采用不同的反馈方式。 如果命令需要额外信息才能成功完成，其标签应当以省略号结尾。） 2.至少提供 默认状态 和 悬浮状态 ;按钮（Button）;按钮（Button）;进度条 （Progress Bar）;进度图示（必须）：用静态图片表示预加载内容，为自动加载;进度图示（必须）：用持续不断的动画（gif）来表示数据加载，或操作正在进行中 ??????????????????????;进度条 （Progress Bar）;确定进度的进度条;进度条 （Progress Bar）;标签页（Tab）;前提条件 1.有大量信息需要在有限的版面中展示2、各个Tab之间应该是平级关系3、各个Tab之间有明显联系，否则考虑分别放置 1.Tab之间不属于互斥信息（互斥信息采用下拉列表/单选框）2.Tab之间不属于从属关系信息3.Tab之间不属于任务多个步骤（步骤关系请采用分步导航）;设计原则（必须执行）： 1.Tab标题和内容需有明显的对应关系 2.标签的个数不应该超过7个（超过建议用下拉列表） 3.标签的嵌套不超过两层（否则用户会看不过来），并且在视觉上显示出明显的层级关系 4.每个标签页的大小需保持一致,防止跳动 5.对于标签内容，按钮只针对当前标签信息有效;标签页风格指引 高度24px 文字对齐：水平居中/???直居中 ;翻页（Page Navigation） ;翻页（Page Navigation） ;设计原则(必须执行)： 1.如无特殊原因，应固定展示 第一页 和 最后一页 的数字链接 2.采用 上一页 和 下一页 的方案 3.当前页需明确表示不可点击的含义 ;弹出窗口（Windows） ;弹出窗口（Windows） ;弹出窗口（Windows） ;提示（Tips） ;提示（Tips） ;提示（Tips） ;提示（Tips） ;提示（Tips） ;提示（Tips） ;表格（Table）;表格（Table）;表格（Table）;表格（Table）;表格（Table）;分步导航（Step Navigation）;设计原则（必须执行）： 1.分布导航的步骤总体分为三类，走过的，当前的，未走过的。 2.视觉上突出强调当前的，已完成状态次要，未完成的状态最弱 3.导航标签在形制上应当具有明显的顺序指向性，如：使用箭头，尖角矩形等形状，使用字母数字标号等 4.分步导航适用于用户操作步骤大于3步小于9步（依据“7±2”原则）的场景，超出该范围时不推荐使用分步导航 5.除少数特殊情况外，建议使用单层分步导航，不推荐使用多层嵌套的分步导航 6.多数分步导航只用作指示，不支持点击 ;;;;;;分步导航（Step Navigation）——“7±2”原则;分步导航（Step Navigation）;分步导航（Step Navigation）