界面组件级交互设计规范
交互式多媒体界面设计规范
交互式多媒体界面设计规范目标本文档旨在提供交互式多媒体界面设计的规范，以确保用户界面的易用性和一致性。
通过遵循这些规范，设计师可以创建出满足用户需求的高质量多媒体界面。
设计原则为了达到优秀的交互式多媒体界面设计，我们应该遵循以下原则：1.简洁性：界面应该尽可能简洁清晰，避免过度复杂和冗余的功能和元素，使用户能够轻松理解和掌握操作流程。
2.一致性：界面中的各个元素应该在样式、布局和交互方式上保持一致，这有助于用户形成稳定的认知模型，并提高用户的学习效率。
3.使用直观：设计师应该考虑用户的直观认知，尽量避免使用难以理解的符号、图标和术语。
界面设计应该能够自然而然地引导用户进行操作。
4.反馈与提醒：界面应该实时提供反馈信息，确保用户了解其操作的结果和状态。
同时，在必要时应该提供有效的提醒和警示，以防止用户的错误操作或遗漏重要信息。
5.可访问性：设计师应该考虑到用户的多样性，确保多媒体界面能够被各类用户（包括残障人士）方便地访问和使用。
布局和导航1.界面的布局应该符合用户的阅读习惯，重要的信息应该突出显示，并遵循读者的自然阅读方向。
2.导航元素应该清晰可见，并提供一致的导航路径。
导航的层级结构应该合理分明，保持用户的导航的直观性和可预测性。
3.在多媒体内容呈现时，应该注意平衡性和一致性，使得内容在各种不同的设备上都能够正常显示。
交互和反馈1.交互元素应该具有明确的标识和可触发的操作。
用户应该能够清晰地区分可点击的元素，如按钮和链接。
2.界面应该提供实时的反馈信息，以指示用户的操作是否成功，并帮助用户理解操作的结果。
3.对于复杂的交互过程，应该提供逐步引导和提示，以帮助用户完成操作。
多媒体元素的设计1.图像和图标应该具有高清晰度和良好的可辨识性。
避免使用过于复杂和模糊的图像和图标。
2.视频和音频的播放控制应该简洁明了，并提供必要的功能，如暂停、播放和音量控制等。
3.字幕和标注应该与多媒体内容相协调，以提供更好的可理解性和访问性。
交互设计规范
交互设计规范交互设计规范是指在设计交互界面时应遵循的一系列规范和准则。
良好的交互设计规范能够提高用户体验、降低学习成本，并且能够使系统更加易于使用和理解。
下面是一份交互设计规范的内部文档，内容包括设计原则、界面布局、文字设计、图标设计和交互操作等方面。
设计原则：1.简洁明了：界面的设计应该尽量简化和精简，避免过度复杂的布局和功能，保持界面的直观性和易用性。
2.一致性：设计中应保持一致的界面风格和交互方式，以便用户能够轻松理解和使用系统。
3.反馈与可见性：系统应及时给予用户反馈，包括按钮的按下效果、操作结果的提示等，以增强用户对系统操作的可见性。
4.可控性：系统应提供用户可以控制和调整的功能，如字体大小、语言选择等，以满足用户个性化需求。
5.容错性：系统应有良好的容错机制，包括输入验证、错误提示等，以尽量减少用户错误操作的影响。
界面布局：1.首屏重点：将最重要的信息和功能放在页面的首屏位置，以便用户一目了然。
2.信息组织：合理组织页面的信息结构，采用层次化的布局方式，使用户可以方便地找到所需信息。
3.视觉引导：使用视觉元素（如色彩、大小、形状等）来引导用户注意力，强调重要的功能或信息。
4.响应式设计：针对不同屏幕尺寸和设备类型，进行响应式设计，以确保在不同环境下都能呈现良好的用户体验。
文字设计：1.指导性文字：在操作界面上使用明确的指导性文字，告知用户该进行何种操作。
2.简洁明了：使用简洁明了的语言表达，避免使用模糊、歧义或难懂的词汇和句子。
3.值得注意：在重要的提示信息上使用醒目的字体、颜色或图标来吸引用户的注意。
图标设计：1.直观易懂：图标应具备直观性，能够准确传达其对应的功能或含义，避免使用过于复杂或难以理解的图标。
2.一致性：设计并使用一套统一的图标风格，以提升用户对图标的识别和理解。
3.可缩放：图标应该具备可缩放性，以适应不同尺寸和分辨率的屏幕。
交互操作：1.明确指示：为用户提供明确的操作指引，包括按钮、链接和操作步骤等，以减少用户的猜测和试错操作。
App界面交互设计规范人人都是产品经理
App界面交互设计规范人人都是产品经理在上篇《APP界面设计风格》确定下来后，产品经理（兼交互设计）还不用着急将所有的交互稿扔给设计师进行细致的界面设计。
在细节设计启动前，拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧！APP设计规范指对APP界面进行风格统一，对界面元素的样式、颜色和大小设定统一的规范和使用原则。
与设计、前端约定好统一的设计规范很重要，约定设计规范可以减少产品、设计、前端的沟通成本；可以使界面设计整洁、统一，减少界面元素的重复设计；可以减少设计素材，控制安装包的大小。
APP设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、loading、图标、按钮常态点击态等进行统一的梳理和规范。
一、页面布局规范页面布局页面布局和交互规范上建议安卓、ios尽量统一，这样可以避免安卓和ios分别设计一套稿子。
当然土豪公司可以忽略这个建议，安卓和ios分别做专门的设计当然更好。
在中小型项目来看，设计资源紧张的话可以考虑安卓和ios用同一个稿子，分别做相应的微调后输出适用安卓和ios不同的尺寸要求就可以。
推荐使用mac矢量设计工具”sketch”。
以ios平台的iPhone5的尺寸640*1136px作为标准尺寸设计。
在界面设计完成后可以做相应的微调导出适用ios和安卓尺寸的稿子。
这里可以首先统一设计稿输出规范：•安卓（720*1280px）：界面预览图、界面坐标图、标准界面的图标png文件•IOS（640*1136px）：界面预览图、界面坐标图、1-3倍图矢量图标pdf文件PS：界面坐标图指在设计已定稿的界面预览图上标注：界面元素的间距、文字的颜色、文字的字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等界面坐标图实例二、标准色规范标准色规范标准色规范：重要、一般、弱。
标准色重要：重要颜色中一般不超过3种，这里的例子重要颜色之一红色需要小面积使用,用于特别需要强调和突出的文字、按钮和icon；而黑色用于重要级文字信息比如标题、正文等。
交互设计规范
交互设计规范交互设计规范（Interaction Design Guidelines）是指为了提供用户友好和易用的界面体验而制定的一系列规则和准则。
以下是一些交互设计规范的例子：1. 一致性和可预测性：用户界面应该始终保持一致，使用相同的控件和布局风格。
用户应该能够预测他们的操作和界面的反应。
2. 易学性：用户界面应该易于学习和使用。
常见的操作和功能应该易于发现和理解，同时不应该过多地依赖于用户的记忆。
3. 可见性：重要的功能和信息应该能够在界面上明显展示，不应该隐藏在菜单或子页面中。
用户应该能够一眼看到他们所需的内容。
4. 导航和反馈：用户应该能够清晰地知道他们当前所处的位置和可以进行的操作。
导航菜单和面包屑导航可以帮助用户追踪他们的位置。
同时，界面应该给予及时的反馈，如按钮按下后的状态变化或加载进度条的显示。
5. 操作流畅性：界面应该能够尽可能地减少用户的操作步骤和点击次数。
常见的操作应该尽量简化和自动化，如自动填充表单或预先选择默认选项。
6. 错误处理：当用户犯了错误或出现问题时，界面应该给予明确的提示和帮助。
错误信息应该清晰地描述问题，并给出解决方案或建议。
7. 反馈和评估：交互设计规范应该不断地评估和改进。
收集用户的反馈和意见，分析用户的行为和使用数据，以便优化用户界面和体验。
8. 响应式设计：界面应该能够在不同设备和屏幕大小上适应和显示良好。
响应式设计可以提供更好的用户体验和可访问性。
9. 可访问性：界面应该尽可能地包容和支持不同的用户群体，包括残障人士和老年人。
通过提供可调节的字体大小、明暗度和语言转换等功能，使界面更易于访问。
10. 安全性和隐私保护：界面应该合理地保护用户的个人信息和数据安全。
用户界面应该清晰地表明哪些信息将被收集和使用，并提供用户控制和选择的选项。
这些交互设计规范可以帮助设计师和开发人员创建出更好的用户界面，提供更好的用户体验。
同时，对于用户来说，遵循这些规范的产品可以更加易于使用和理解，减少学习成本和困惑。
交互设计规范文档
交互设计规范文档一、引言。
交互设计规范文档是指在设计交互界面时所遵循的标准和规范，它是保证交互界面设计质量的重要工具。
本文档旨在为设计师提供一套完整的交互设计规范，以确保设计的一致性、可用性和用户体验。
二、设计原则。
1. 用户为中心，在设计交互界面时，必须始终将用户的需求和体验放在首位，确保用户能够轻松、高效地完成任务。
2. 一致性，交互界面的设计应该保持一致性，包括布局、颜色、字体等方面，以便用户能够快速熟悉并掌握界面操作。
3. 可用性，交互界面的设计应该简单直观，用户可以快速找到所需功能，避免复杂的操作流程和混乱的布局。
4. 反馈和提示，在交互设计中，应该为用户提供及时的反馈和提示，帮助用户理解当前操作的结果和下一步的操作流程。
5. 可访问性，交互界面的设计应该考虑到不同用户的需求，包括视觉障碍用户、听觉障碍用户等，确保他们也能够顺利使用界面。
6. 简洁性，交互界面的设计应该尽量简洁，避免过多的信息和功能，以免给用户造成混乱和压力。
三、界面设计规范。
1. 布局规范，交互界面的布局应该简洁明了，避免过多的元素和混乱的排版，确保用户能够快速找到所需功能。
2. 颜色规范，交互界面的颜色应该搭配合理，避免过于刺眼或对比度不足的情况，确保用户能够轻松辨识界面元素。
3. 字体规范，交互界面的字体应该清晰易读，避免使用过小或过大的字号，确保用户能够舒适地阅读界面内容。
4. 图标规范，交互界面的图标应该简洁明了，避免过多的细节和复杂的设计，确保用户能够快速理解图标的含义。
5. 按钮规范，交互界面的按钮应该清晰明了，避免使用过小或过大的按钮，确保用户能够轻松点击并完成操作。
6. 表单规范，交互界面的表单应该简洁明了，避免过多的输入项和复杂的排版，确保用户能够快速填写并提交表单。
四、交互设计规范。
1. 导航规范，交互界面的导航应该简单直观，避免过多的层级和复杂的结构，确保用户能够快速找到所需功能。
2. 操作规范，交互界面的操作应该简单易用，避免过多的步骤和复杂的流程，确保用户能够轻松完成操作。
界面组件级交互设计要求规范
界面交互设计规范—— IT应用服务产品界面组件级交互规范V1.0目录1概述 (5)1.1规范的目的 (5)1.2规范适用的范围 (5)1.3规范适用的人群 (5)2基本原则 (6)2.1一致性 (6)2.2简洁性 (6)2.3避免干扰和打断 (6)2.4减轻用户记忆负担 (6)2.5及时有效的反馈 (6)2.6让用户放松心态，不怕犯错 (7)3产品交互通用规范 (8)3.1受范性指示 (8)3.2操作不可用状态 (8)4组件规范 (10)4.1表格 (10)4.2单元格数据 (15)4.2.1 .......................................................... 单元格数据展示154.2.2 .................................................................. 通讯录164.3信息列表 (18)4.4编号和序号 (20)4.4.1 .................................................................... 编号204.4.2 .................................................................... 序号214.5注册表单 (23)4.6联系方式 (28)4.7图片裁切 (32)4.7.1 ........................................................ 固定尺寸图片裁切324.7.2 ....................................................... 自定义尺寸图片裁切344.8翻页 (35)4.9日期输入 (39)4.9.1 ........................................................ 通过日历选择日期394.9.2 ................................................. 年份跨度较大时的日期选择424.10分隔 (45)4.10.1 等量条目分隔线 (45)4.11高级加密 (47)4.12进度条 (50)4.13面包屑 (52)4.14星级评分 (53)4.15保留图标 (56)4.16弹出层 (58)4.16.1 非独占焦点层 (58)4.16.2 独占焦点层 (58)4.16.3 局部独占焦点层 (60)4.17搜索 (61)4.17.1 模糊搜索 (61)4.17.2 精确搜索 (63)4.18数据添加 (66)4.18.1 添加单个文件 (66)4.18.2 添加多个文件 (68)4.18.3 添加行 (71)4.19排序 (71)修订记录1概述《界面交互设计规范》对用户与产品交互的各个方面做了相关的描述。
B端UI界面交互设计规范概述人人都是产品经理
B端UI界面交互设计规范概述人人都是产品经理编辑导语：UI界面设计，是对软件的人机交互、操作逻辑、界面美观的整体设计。
那么，B端产品UI界面进行交互设计的通用规范是什么呢？本文作者为我们做出了解答。
一、概述1. 前言最近负责参与编写了公司的《B端UI界面交互设计规范》，主要对用户与产品交互的各个方面做了相关的描述，为B端产品的用户界面提供了规范与指导。
2. 目标《B端UI界面交互设计规范》为通用性质，用于指导与约束B端UI开发。
•在UI界面开发过程中，给各产品相关开发人员提供统一的规范与指导，提升了沟通效率，保证了产品界面的最终规范化的实现效果。
•通过规范保证了较好的体验方式并可在公司内部进行复用：提升了开发效率，降低了UI开发成本，提高了产品UI品质。
•保持了B端各模块UI界面外观与操作行为的一致性，加强了产品品牌化特征。
3. 适用范围本规范适用于B端所有产品，用于约束产品UI界面信息、操作交互、通用组件等相关内容，适用于产品经理、产品交互人员、产品UI 设计人员、产品开发、测试人员。
4. 基本原则本规范相关行为交互约束基于UCD相关方法论，参考尼尔森（Jakbob Nielsen）提出的十大可用性原则进行设计：1）状态可见性原则用户在页面上的任何操作，无论是单击、滚动还是按下键盘，页面应及时给出反馈。
其中”及时“是指，页面响应事件小于用户能够忍受的等待时间。
2）环境贴切原则页面一切表现和描述，应该尽可能贴近用户所在的环境（年龄、学历、文化、时代背景），而不要使用世界第二的语言。
3）撤销重做的原则为了避免用户的误用和误击，网页应提供撤销与重做的功能。
4）一致性原则使用同一用语、功能、操作保持一致，同样的语言、同样的情景、操作应该出现同样的结果。
5）防错原则通过页面的设计、重组或特别安排、防止用户出错，比出现错误信息提示更好的是更用心的设计防止这类问题发生。
6）易取原则尽量减少用户对操作目标的记忆负荷，动作和选项都应该是可见的，把需要记忆的内容摆上台面。
App界面版式设计规范及交互设计原则
原则八
优美简约原则
展示的内容应该去除不相关的信息或几乎不需要的信息。
原则九
容错原则
出现错误信息应该使用简洁的文字，指出错误是什么， 并给出解决建议。
原则十
人性化原则
应该提供一份帮助文档。任何帮助信息都应该可以方便 地搜索到，以用户的任务为核心，列出相应的步骤。
原则二
环境贴切原则
软件系统应该使用用户熟悉的语言、文字、语句，而非系统 语言。 软件中的信息应该尽量贴近真实世界，让信息更自然，逻辑 上也更容易被用户理解。
原则三
用户可控原则
用户误触到某些功能，应该让用户可以方便的退出。 用户发送一条消息、总会有意识到自己不对的地方，这 个叫做临界效应；支持撤销/重做功能。
……
……
App界面版式设计规范
对称
对称设计传达出页面的平衡、安静和稳定，同时表达 了完整性、专业性和一致性。
……
……
App界面版式设计规范
分组
常见的分组方式就是卡片，为用户选择提供专注而又明确 的浏览体验。
……
……
App界面版式设计规范
显示分辨率 逻辑分辨率 设计尺寸选择
设计适配
……
……
App界面版式设计规范
原则四
一致性原则
结构一致性 色彩一致性 操作一致性 反馈一致性 文字一致性
原则四
一致性原则
结构一致性 色彩一致性 操作一致性 反馈一致性 文字一致性
原则四
一致性原则
结构一致性 色彩一致性 操作一致性 反馈一致性 文字一致性
原则四
一致性原则
结构一致性 色彩一致性 操作一致性 反馈一致性 文字一致性
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
界面交互设计规范—— IT应用服务产品界面组件级交互规范V1.0目录1概述 (5)1.1规范的目的 (5)1.2规范适用的范围 (5)1.3规范适用的人群 (5)2基本原则 (6)2.1一致性 (6)2.2简洁性 (6)2.3避免干扰和打断 (6)2.4减轻用户记忆负担 (6)2.5及时有效的反馈 (6)2.6让用户放松心态，不怕犯错 (7)3产品交互通用规范 (8)3.1受范性指示 (8)3.2操作不可用状态 (8)4组件规范 (10)4.1表格 (10)4.2单元格数据 (15)4.2.1单元格数据展示 (15)4.2.2通讯录 (16)4.3信息列表 (18)4.4编号和序号 (20)4.4.1编号 (20)4.4.2序号 (21)4.5注册表单 (23)4.6联系方式 (28)4.7图片裁切 (32)4.7.1固定尺寸图片裁切 (32)4.7.2自定义尺寸图片裁切 (34)4.8翻页 (35)4.9日期输入 (39)4.9.1通过日历选择日期 (39)4.9.2年份跨度较大时的日期选择 (42)4.10分隔 (45)4.10.1 等量条目分隔线 (45)4.11高级加密 (47)4.12进度条 (50)4.13面包屑 (52)4.14星级评分 (53)4.15保留图标 (56)4.16弹出层 (58)4.16.1 非独占焦点层 (58)4.16.2 独占焦点层 (58)4.16.3 局部独占焦点层 (60)4.17搜索 (61)4.17.1 模糊搜索 (61)4.17.2 精确搜索 (63)4.18数据添加 (66)4.18.1 添加单个文件 (66)4.18.2 添加多个文件 (68)4.18.3 添加行 (71)4.19排序 (71)修订记录1概述《界面交互设计规范》对用户与产品交互的各个方面做了相关的描述。
该规范由“组件级”、“流程级”和“系统级”三个部分构成，分别从不同的层面，为IT应用服务产品的用户界面提供规范与指导。
规范的制定采用UCD（以用户为中心的设计）方法，遵循ISO9241-11部分标准的要求。
设计过程以用户的使用习惯和心理需求作为出发点，在认真研究并参考了国内外各种优秀设计的基础上，制定出了适合我集团应用服务产品的设计规范。
此外，为保证规范具有良好的可用性和广泛的适用性，UE研究室对设计出的每个模式都进行了严格的用户测试，并对各组件采取了不同应用场景的测试。
本规范是界面交互设计规范三个部分中的基础层面：组件级规范。
该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。
在每个组件规范中，给出了模式描述和扩展描述的规范描述，供不同的应用类型和使用场景选择、组合使用。
1.1规范的目的●在产品开发过程中，给不同部门的相关人员提供统一的规范与指导，使沟通与合作顺利有效地进行，以保证产品界面的最终规范化实现；●从一点一滴入手解决公司产品的可用性问题：使操作更人性化，减轻用户的认知负担，改善产品的用户体验，提升产品的市场竞争力；●使产品在界面外观和操作行为上形成一致，加强公司产品的品牌化特征。
1.2规范适用的范围集团内的所有产品。
1.3规范适用的人群参与产品设计的所有人员以及测试人员等。
注：从正式发文之日起属于新项目范畴的必须遵循此规范，对于已有项目进行重大版本升级的项目要遵循此规范。
规范演示网址：:71022基本原则以下原则主要用来说明此规范的指导思想与设计依据。
简单描述如下，以供该文档的阅读者参考和使用。
具体的原则描述请参见《界面设计指南》。
2.1一致性●视觉一致：在同一产品内，所有的同类界面元素在相同的应用环境下，界面外观在视觉上应该保持一致；否则，界面外观要予以区分；●操作行为一致：类似场景的界面设计，其操作方式必须保持一致；当操作行为相同时要保持视觉上的一致；当操作行为不同时，在视觉上就一定要有所区别；●外观与使用者的预期一致：保持对象与其行为相符，保持不同作用的对象外观的不同；视觉元素的外观及其操作结果，必须与用户的心理认知相符。
2.2简洁性●减轻视觉负担：使用尽可能少的元素，不提供与当前任务无关的信息；●简明的文字表述：文字表述必须简明扼要、清晰易懂，内涵丰富，并易于理解和记忆；●操作简单：减少冗余的操作步骤。
2.3避免干扰和打断●避免干扰：明确用户在特定界面中的首要任务和目标，尽可能避免该界面上的视觉噪声和其它干扰。
●避免打断：让用户的操作连贯顺畅，避免使用模态对话框（弹出的独占焦点的对话框）打断用户的工作。
2.4减轻用户记忆负担●认知明确：产品中界面元素外观要明晰，易于辨别；产品的逻辑意义要合理，导航要及时准确；●系统智能化：提供默认值；帮助用户记住尽可能多的信息，最低限度地从用户那里索取信息；●合理的隐喻和习惯用法：使用用户熟悉的，符合使用习惯的隐喻，及通用的习惯用法，为用户的任务提供直观易用的界面；●有效的启示：提供具有明确引导性的启示来指导用户正确操作（启示：某对象用来说明自身可以如何使用的外观属性）。
2.5及时有效的反馈●操作反馈：对用户的每一步操作给出及时的反馈，告知用户成功做了某事；●受范性反馈：界面对象的设计要在视觉上能提供即时响应鼠标操作行为的效果；●系统状态反馈：系统需要用户等待或系统出现错误时，要及时让用户明白现状；●选择合适的反馈形式：根据不同的情况，使用不同的反馈（如声音、触觉、语言、视觉反馈或是它们的组合）。
2.6让用户放松心态，不怕犯错●允许轻松的反向操作：在适当的时候，尽量提供撤销功能，使用户可以返回到上一步操作并重新进行选择；●让用户可以重新开始：提供“恢复初始设置”选项，让用户敢于尝试；●避免输入错误：使用合适的选择控件（单选/多选/下拉列表/列表框等），提供最有代表性的默认选项，以及相应的输入帮助，来方便用户准确输入信息；●提供校验等功能：对用户的输入和选择等操作进行实时的判断，帮助用户及时更正错误；●避免埋怨：当用户犯错时，避免责怪和鲁莽地打断与关闭，要礼貌地指出错误所在，并提供有用的恢复建议。
3产品交互通用规范以下为IT应用服务产品的交互设计通则，是所有的交互模式必须遵守的普遍规范，用以统一产品的交互行为。
（此部分规范将随着组件模式的不断扩充，进行逐步添加和完善。
）3.1受范性指示受范性是指鼠标指针移过可点击区域时可点击区域的视觉变化，用以说明该对象是可操作的以及何时可以进行操作。
●对象对鼠标指针移动的响应必须即时有效；●响应形式必须明确清晰（如：鼠标移过按钮，按钮有被按下的效果）；●受范性表现必须保持高度的一致：同等功能和操作的元素受范性必须相同（如：鼠标指向链接文字时都做同样的变化）；●在鼠标指针移开时对象必须即时恢复原来状态；●命令按钮也经常被显示为链接样式（文本+下划线），此时为了与普通的链接相区分，必须提供非常明显的不同于链接的受范性指示。
注：具体受范性指示的效果参见视觉规范。
3.2操作不可用状态当用户在某些时候不能进行某些操作时，该命令按钮或命令文本（或其它的形式）在外观上应显示为不可用状态（如置灰），用来使界面稳定，使用户保持恒定和完整的思维模式，减少用户的认知负担。
●显示为不可用状态的按钮或文本必须保持与可用状态的位置、大小、形态保持一致，仅色彩、灰度和立体效果等发生变化。
●操作不可用的情况主要包括：菜单性质和导航性质的操作不可用时不能隐藏，应该显示为不可用状态，如下图所示：图 3-1菜单操作不可用工具栏按钮不可用时不能隐藏，应该显示为不可用状态，如下图所示：图3-2 工具按钮不可用当一个操作在用户进行了某行为（如填写或选择了某选项时）就变为可操作，则该操作不可用时不能隐藏，应该显示为不可用状态，如下图所示：图 3-3操作命令不可用注：具体不可用状态效果见视觉规范。
4组件规范4.1表格主要应用于大批量数据的展示、查看、维护等方面。
基础表格是表格本身最原始的一些属性集合，针对表格在不同场景下的状况，在扩展设计中会一一罗列出来。
【设计意图】✓合理有效的组织数据信息；✓帮助用户快速、有效的查看表格数据；✓帮助用户快速、准确的完成对表格的操作；【应用条件】适用于批量数据的展示和维护；【模式描述】组成：表格标题+ 表格表头+ 表格行间隔线+ 表格行如下图所示：图 4-1 基础表格应用规范：●表格的标题：标题文字要与其它文字有所区别，如：加粗显示；标题文字内容以“内容+操作”的形式描述，标题文字前需要有相应的标题图标，文字与图标之间间隔一定的距离，如：一个半角空格；具体视觉效果参见《界面视觉规范》。
●表格的表头与表格主体在外观上要有区分；●表格行间隔线：表格的主体内容用表格线区分；表格线的粗细要适中，如1px。
【扩展描述】根据应用场景的不同，可以对基础表格进行扩展；可以为表格增加数据筛选区、命令按钮区、操作按钮区、表格主体区、翻页区、操作按钮区。
整体效果如下图所示：图 4-2 表格操作区分布1）标题列排序：●表格列标题可以排序时，表格的列标题要体现出当前排序状态，并要区分于其他列标题显示，如：背景和图标高亮显示；如下图所示：图 4-3 标题列排序●表格列标题进行切换时，原列标题恢复初始状态，切换到的列标题显示为排序状态；2）表格行选中操作：●表格中的第一列，既可表示对行的选择如复选框；同时还可以用图标标示数据状态；当两者都有时，显示复选框在上，图标被覆盖；●在对表格行进行选中（点选行的任意位置即可选中）时，此行要高亮显示，同时此行前复选框为选中状态，同时还可以进行多行选择；需要全选时，只需勾选列标题中的复选框即可选中当前列表的全部行数据。
3）数据筛选区：●当数据内容可以明确的按其状态、类别进行划分时，可以应用页签的形式来进行设计；●页签总宽度在表格宽度的75%之内为佳，超出此范围时，需应用其他设计形式如下拉框显示的形式等；如下图所示：图 4-4 数据筛选区●当前分类状态的的页签要高亮显示，要明显区别于其他页签；●页签内的文字，需要简单明了，相同内容的文字省略；如上图中未处理（订单）、处理中（订单）、处理完成（订单）；●应用页签设计时，页签类别要划分明确合理；如按照数据状态或分类进行划分。
4）命令按钮区：●针对整体页面进行操作或者对表格整体进行操作的按钮放置在此区域内；如：导入、导出、新增等；●按钮的其它细则参见《界面视觉规范》。
5）操作按钮区：●对表格主体的数据进行操作的按钮放置在此区域。
如：删除、发布、下架、上架、审核等；●当列表的数据超过一屏显示时，在列表上方也要显现操作按钮区，方便用户对列表进行操作；如下图所示：图 4-5 操作按钮区●按钮的其它细则参见《界面视觉规范》。
6）翻页区：●当列表中的数据量超过默认的数据显示条数时，应用翻页模式来处理多条数据的显示；●翻页在列表下方居中显示；●翻页的详细功能和模式参见“翻页模式组件规范”。