抽屉 设计体系

检查进度

重置

01

结构及意义

在使用环境中比较信息和演示。

说明面板的内容使用标题来了解这是导航、洞察还是编辑。查看主要内容时选择抽屉仍然有助于完成任务。示例 “订单详细信息”面板在右侧打开，订单列表保留在后面。选择一致的开放边缘保持开口方向适合角色，并且空间足够宽以阅读内容。指定每种类型面板的最小和最大宽度;相同的角色应该从相同的边缘开放以保持期望。表示面板已打开将打开按钮与面板关联并反映打开或关闭状态。打开按钮名称需要表明会出现什么内容;即使抽屉是通过 Escape 关闭的,打开状态也必须更新。按面板类型管理焦点对于模态抽屉，将焦点保持在内部并在关闭时返回打开按钮。内容旁边的抽屉支持和模式抽屉有不同的规则;当用户仍需要与这两个区域交互时,不要锁定焦点。

02

交互性和可用性

尝试操作，更改状态并继续工作。

有一条清晰的路在适当的情况下启用关闭、退出和后台按钮，而不会丢失数据。滚动时保持关闭按钮可见;如果需要未保存的草稿警告,则所有关闭都必须使用相同的规则。保持长篇内容易于访问对于滚动内容，不要覆盖标题或结束操作。在窄屏上测试当面板占据整个屏幕时，调整宽度、键盘和按钮位置。当面板变成全屏时,检查返回、安全区域和键盘;不要只是最小化桌面。

03

完成体验

检查设计投入使用时容易忽略的细节。

整理抽屉操作区域当抽屉支持编辑时,请将保存和取消操作保存在与滚动内容不同的稳定位置。如果将面板支脚固定到位,请在内容末尾留出足够的空间,以免覆盖最后一个字段;在您的手机上,也请在键盘打开的情况下尝试。

进度会自动保存在此浏览器中。

指南

检查方法

01

说明面板的内容

查看主要内容时选择抽屉仍然有助于完成任务。

示例

应用示例

说明面板的内容

“订单详细信息”面板在右侧打开，订单列表保留在后面。