会议材料交互0503培训p1

1、苏宁易购用户体验设计规范Suning User Experience Design Guidelines 2022年5月3日1PartPD-UED-? 基础初级 用户体验设计专业序列 用户体验中心所有角色顾巍版本号修订日期修订内容修订者v1.02013.5.2课程初稿顾巍 2 苏宁易购用户体验设计规范：Part 1培训主题时间时长讲师苏宁易购用户体验设计规范：Part 12013.5.32 Hour顾巍苏宁易购用户体验设计规范：Part 2未定2 Hour顾巍培训内容I.设计规范的相关须知II.规范内容 Part 11.文字2.图片3.Icon4.时间元素5.窗口规则6.输入框7.单选&复选框

2、8.分页9.对话框v2.1版 设计规范0502 苏宁易购设计规范 v2.1.pdf0502 苏宁易购设计规范检查清单.xlsx苏宁易购设计组件库0502 苏宁易购设计规范培训文档.pptx设计规范的组成部分制定过程规范评审竞品分析付丽红李俊伟陈吉波陈斯召何玲杨敏秦玉国潘夏辰姜陵竞王良彪卢仁峰顾巍高渤1 界面框架1.1 版式布局1.2 标准头部1.3 标准尾部1.4 登录注册退出2 组件规范2.1 输入框2.2 单选框2.3 复选框2.4 列表框2.5 按钮2.6 进度条2.7 标签页2.8 分页2.9 对话框2.10 提示2.11 表格2.12 分步导航2.13 广告轮播3 页面元素3.1 文

3、字3.2 色彩3.3 图片3.4 Icon3.5 超链接4 其他4.1 时间元素4.2 异常反馈4.3 窗口规则2 组件规范2.1 输入框2.2 单选框2.3 复选框2.8 分页2.9 对话框3 页面元素3.1 文字3.3 图片3.4 Icon4 其他4.1 时间元素4.3 窗口规则3.1 文字 / 字体宋体微软雅黑ArialTahoma, Verdana正文、标题正文、标题、导航符号、数字、英文价格中的数字2799.00注：￥ 和 元 不可并存，推荐 ￥潘夏辰，王良彪，秦玉国3.1 文字 / 字号宋体微软雅黑12px用户体验团队14px用户体验团队12px用户体验团队14px用户体验团队16

4、px用户体验团队注：使用12px 微软雅黑 需向规范组报备？px根据版面使用大于16px的偶数字号Arial12pxUser Experience Designers根据版面选择字号，但禁止小于11px?px潘夏辰，王良彪，秦玉国3.1 文字 / 样式加粗用户体验团队下划线用户体验团队删除线用户体验团队用于文字标题或着重提示用于超链接的鼠标悬浮交互状态用于老价格，促销、团购、抢购的原价用于标题、导航、Tab潘夏辰，王良彪，秦玉国3.1 文字 / 颜色#333333默认文字颜色、所有信息列表及文章内容、栏目标题文字、商品名称#666666当一条信息中有注册之分时，此颜色用来表达信息的次要性#99

5、9999不可点击的灰色文本，一般用在输入框中的默认提示信息#0066CC取自网站主色调的蓝色，只用某些需要突出的信息，禁止大量使用，如：栏目标题；面包屑；送货地址；评论条数；用户名称#FFFFFF用于深色背景上的文字，如：主导航栏；四级页面商品信息Tab标题；四级页面右侧栏目#FF6600取自网站主色调的橙色，如：用于超链接的鼠标悬浮交互状态；商品卖点文字；热门信息#DD0000商品价格#FF0000报错提示文字#44AA00表示通过的含义，如：订单状态。潘夏辰，王良彪，秦玉国3.3 图片 / 基础闫贤贤，王良彪，秦玉国DPI72格式jpg/png/gif大小边框边框定义在图片外3.3 图片

6、/ 尺寸闫贤贤，王良彪，秦玉国头像图片品牌Logo商品图片40 x4060 x60100 x100120 x12090 x30120 x4040 x4060 x60100 x100120 x120160 x160400 x400800 x800可用商品图片尺寸宽、高均为20的倍数，最小使用40px团购165x110300 x200370 x245450 x300电子书45x6090 x120120 x160160 x200存在争议，有待优化注：请使用本列表中的尺寸，增加新尺寸请向规范组报备注：在同一页面设计中建议最多不要使用超过 4 种尺寸的商品图片。3.3 图片 / 组成闫贤贤，王良彪，秦玉

7、国图片焦点边框Alt鼠标悬浮时显示鼠标悬浮时，显示图片所表达信息的文字3.3 图片 / 状态闫贤贤，王良彪，秦玉国#01 预加载状态#02 默认状态#03 鼠标悬浮状态#04 图片加载失败图片可点击图片不可点击3.4 Icon / 文字符号闫贤贤，谭雄，秦玉国符号名称位置与用法邮件符号在电子邮件中使用，分隔用户名和服务器；项目符号（编号）标明每一条的列表内容，使文档内容条理清楚和重点突出，位置用在列表内容之前；右方向尖括号（英文输入法）表示导向性符号，用在“更多”“进入”等之后； 括号(半角)表示注释，对紧跟它的词的解释，里面的内容可以单独成句； 括号(全角) 括号(半角) 人民币符号在人民币

8、数目之前，用于区别于其他货币或数字；|分隔符用于分割字段间隔；省略号在文中表示内容省略，三个居中的点，需要换行的文字链后；注册符号已注册；版权符号版权所有；商业符号商标；3.4 Icon / 图标设计原则闫贤贤，谭雄，秦玉国尺寸1）图标规格采用软件icon的国际通用标准。即16、24、32、48、64px的1:1图片2）64-128px之间的图片尺寸可以定义为16的倍数 3）低于16px的图标为超小图标，4、8、12px三个类别允许有正负1-2px的浮动。 4）需要使用超过128px的图标，请执行图片使用规范格式jpg、png类型常用符号箭头符号表情符号提示符号 不要为小错误使用警告图标。警告

9、并不是“弱化”了的错误。 并不是每个消息都需要图标。 图标建议做成背景，用css sprite放于一张图内(方便图标整体风格的替换更改)。3.4 Icon / 提示图标设计闫贤贤，谭雄，秦玉国3.4 Icon / 常用图标设计闫贤贤，谭雄，秦玉国4.1 时间元素 / 时间值顾军，秦玉国位置描述时间设置联板广告切换联板广告切换间隔时间值设置5000ms联板广告渐隐渐显（如有）联板广告切换过渡效果展示时间值设置1000ms左侧目录导航鼠标移入首页、频道页左侧目录导航延时展开分类目录，延时时间值设置100ms目录导航移出接上条，移出展开的分类目录，分类目录延时收起，延时时间值设置100ms鼠标hov

10、er反馈鼠标Hover反馈是指鼠标hover到某区域后所触发的事件（不包括类似a标签hover效果），该事件需延时触发，此处检查该延时时间值设置。鼠标Hover反馈包括但不仅限于：Tab选项卡hover，头部导航hover，联板广告按钮hover。200ms按钮报对点击按钮，出现提示内容，提示内容展示一段时间后消失，该时间值设置。建议根据报对内容合理设置展示时间左右切点击左右切换按钮，内容左右切换，切换内容一屏切换时间值。建议根据左右切换内容长度合理设置4.3 窗口规则 / 原页刷新 or 新窗口顾军，秦玉国2.1 输入框 / 组件潘夏辰，徐银芳，秦玉国2.1 输入框 / 组成潘夏辰，徐银芳，秦玉国2.1 输入框 / 状态潘夏辰，徐银芳，秦玉国2.1 输入框 / 设计原则潘夏辰，徐银芳，秦玉国2.2 单选框 / 组成潘夏辰，徐银芳，秦玉国2.