网站全局性设计问题整理及解决 — 命令按钮            开始       用户体验部 | UDC | 李龙
Contents   前言:Why & How   网站中命令按钮的使用情况   问题归类   命令按钮定义、核心功能、核心原则   命令按钮使用原则 & 规范
Why?   效率   质量
How?1. 尊重习惯,延续习惯,通过一致形成习惯 注: 我们不追求绝对正确,通过一致形成的习惯就是正确。   我们基于现有的情况和理解形成一致。2. 先对现有使用情况进行整理和归类,发现问题,针对性的辨析和解决
网站中(命令)按钮的使用情况
首页+搜索
Detail
交易
后台
后台
行业
……
问题 应用场景多 样式很多 层次和优先级不清晰 状态不全 状态语义不准确
什么是命令按钮 命令按钮: 命令按钮(command button)是用于开始一个即时操作的交互控件,通常 情况下,这个操作是重要操作。 命令按钮的两大特征: 可发现性:   其视觉样式赋予了强烈的视觉焦点属性 功能可见性: 其视觉样式(看...
使用命令按钮的核心原则一、不要滥用可发现性 —— 用于相对重要的操作和主要的命令二、坚持功能可见性 —— 合适的样式以及完整的翻转状态三、标签文案准确、简短、易于理解 —— 易识别,无歧义
命令按钮的设计规范 —— 11. 根据操作对用户的重要程度,我们把按钮分为:主要按钮、次要按钮、轻量按钮三个层级。同一页面中按钮的层次不要超过这三个,每个层次的按钮样式只有一种或一个系列。注:三个层级是基于操作对用户的重要程度来区分的,并不是基...
命令按钮的设计规范 —— 22. 任意一个命令按钮在使用中都需要具备normal、hover、这两种状态,保持其功能可见性的完整,并给以用户良好的交互反馈。在需要并且适当的情况下,可以增加disable、和down(active)的状态。(以下...
命令按钮的设计规范 —— 33. 建议通过发光位置变化、高亮、清晰度增强、边框增强等方式,表达此按钮的hover状态。不要使用变暗、降低清晰度等方式,这样的语义是不恰当的;通过去色+减弱文字与背景对比度的方式表达按钮的disable状态    ...
命令按钮的设计建议光源:光源统一来自顶部,垂直90°照射至按钮表面光感:按钮顶部需有一像素高光,提升按钮体感质感:亚光剖面:按钮表面微凸,不宜给用户造成明显的弧度感阴影:若有此效果,阴影效果必须90°垂直向下尺寸:文字内容与按钮边框的最大、最小...
与其他控件的设计辨析 — 命令按钮 & 链接 如该命令是次要的,于当前页面的主要目的没有关系,则轻量级的命令按钮或链接则更为合适。 (以下为示例) 如不是基于线性流程的主要逻辑,而是导航至相关页面、显示帮助主题、和辅助内容等,使用链接更为合...
与其他控件的设计辨析 — 命令按钮 & 选项按钮 如存在多种可能操作,且需要用户在决定前查看附加信息时,考虑将选项按钮于命令按钮组合使用。 (以下为示例)
与其他控件的设计辨析 — 命令按钮 & 分割按钮 可以用分割按钮来组合一个命令的一组变化,尤其是当其中一个命令特别常用时。 (以下为示例)注1:与下来菜单或者命令菜单等控件不同的是,单击按钮的左侧部分,将直接执行标签文本上所示的动作。注2:在...
产品线命令按钮设计规范表格模板                               按钮状态产品线    按钮层次              normal   hover     disable   down(active)      ...
网站基础控件设计原则&规范——命令按钮
Upcoming SlideShare
Loading in …5
×

网站基础控件设计原则&规范——命令按钮

906 views
772 views

Published on

网站基础控件设计原则&规范——命令按钮

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
906
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

网站基础控件设计原则&规范——命令按钮

  1. 1. 网站全局性设计问题整理及解决 — 命令按钮 开始 用户体验部 | UDC | 李龙
  2. 2. Contents  前言:Why & How  网站中命令按钮的使用情况  问题归类  命令按钮定义、核心功能、核心原则  命令按钮使用原则 & 规范
  3. 3. Why? 效率 质量
  4. 4. How?1. 尊重习惯,延续习惯,通过一致形成习惯 注: 我们不追求绝对正确,通过一致形成的习惯就是正确。 我们基于现有的情况和理解形成一致。2. 先对现有使用情况进行整理和归类,发现问题,针对性的辨析和解决
  5. 5. 网站中(命令)按钮的使用情况
  6. 6. 首页+搜索
  7. 7. Detail
  8. 8. 交易
  9. 9. 后台
  10. 10. 后台
  11. 11. 行业
  12. 12. ……
  13. 13. 问题 应用场景多 样式很多 层次和优先级不清晰 状态不全 状态语义不准确
  14. 14. 什么是命令按钮 命令按钮: 命令按钮(command button)是用于开始一个即时操作的交互控件,通常 情况下,这个操作是重要操作。 命令按钮的两大特征: 可发现性: 其视觉样式赋予了强烈的视觉焦点属性 功能可见性: 其视觉样式(看起来像是可以被按下的)暗示了它的使用方法
  15. 15. 使用命令按钮的核心原则一、不要滥用可发现性 —— 用于相对重要的操作和主要的命令二、坚持功能可见性 —— 合适的样式以及完整的翻转状态三、标签文案准确、简短、易于理解 —— 易识别,无歧义
  16. 16. 命令按钮的设计规范 —— 11. 根据操作对用户的重要程度,我们把按钮分为:主要按钮、次要按钮、轻量按钮三个层级。同一页面中按钮的层次不要超过这三个,每个层次的按钮样式只有一种或一个系列。注:三个层级是基于操作对用户的重要程度来区分的,并不是基于视觉样式来定义的注:每条产品线需定义好本产品线所使用的三个层级的按钮(如ppt后的模板表格),并在产品设计当中严格执行
  17. 17. 命令按钮的设计规范 —— 22. 任意一个命令按钮在使用中都需要具备normal、hover、这两种状态,保持其功能可见性的完整,并给以用户良好的交互反馈。在需要并且适当的情况下,可以增加disable、和down(active)的状态。(以下为示例) Normal Hover Disable Down (active)
  18. 18. 命令按钮的设计规范 —— 33. 建议通过发光位置变化、高亮、清晰度增强、边框增强等方式,表达此按钮的hover状态。不要使用变暗、降低清晰度等方式,这样的语义是不恰当的;通过去色+减弱文字与背景对比度的方式表达按钮的disable状态 normal hover normal disable normal hover normal disable
  19. 19. 命令按钮的设计建议光源:光源统一来自顶部,垂直90°照射至按钮表面光感:按钮顶部需有一像素高光,提升按钮体感质感:亚光剖面:按钮表面微凸,不宜给用户造成明显的弧度感阴影:若有此效果,阴影效果必须90°垂直向下尺寸:文字内容与按钮边框的最大、最小边距为图例中所标示
  20. 20. 与其他控件的设计辨析 — 命令按钮 & 链接 如该命令是次要的,于当前页面的主要目的没有关系,则轻量级的命令按钮或链接则更为合适。 (以下为示例) 如不是基于线性流程的主要逻辑,而是导航至相关页面、显示帮助主题、和辅助内容等,使用链接更为合适。(以下为示例) 轻量级的命令按钮: 链接:
  21. 21. 与其他控件的设计辨析 — 命令按钮 & 选项按钮 如存在多种可能操作,且需要用户在决定前查看附加信息时,考虑将选项按钮于命令按钮组合使用。 (以下为示例)
  22. 22. 与其他控件的设计辨析 — 命令按钮 & 分割按钮 可以用分割按钮来组合一个命令的一组变化,尤其是当其中一个命令特别常用时。 (以下为示例)注1:与下来菜单或者命令菜单等控件不同的是,单击按钮的左侧部分,将直接执行标签文本上所示的动作。注2:在某些特定场景中,当下次操作往往与上次操作相同时,分割按钮会非常有效
  23. 23. 产品线命令按钮设计规范表格模板 按钮状态产品线 按钮层次 normal hover disable down(active) 主要按钮 次要按钮 轻量级按钮

×