UI组件交互与视觉设计规范

按钮 Button

按钮由文字和/或图标组成。

按钮文字必须预示点击后的内容，且符合使用者的预期。

按钮的文案应该把该操作说清楚，且不啰嗦。包含语意的按钮，例如「确认提交」比「确定」要好

1）常规按钮

按钮的设计应当和应用的颜色主题保持一致。

关键操作按钮

Call To Action button（下称CTA）

当页面中的 CTA 按钮随着页面滚动消失在用户视野中时，该操作将出现在页面底部，并保持锁定。此动画可逆。

CTA 按钮建议使用色块按钮。

文本框 Text field

文本框可以让用户输入文本。

它们可以是单行的，也可以是多行的。点击文本框后显示光标，并自动显示键盘。

吐司  Toast

吐司是用来做通知的组件，告知用户眼下发生了什么，内容应该轻量，just come and go。

如果通知内容需要常驻在界面上，应该使用通知栏。

吐司从样式上分为两类：常规吐司与带图标的吐司

对话框 Dialog

对话框用于提示用户做决定，或者是完成某个任务时需要的一些其它额外的信息。

所有的对话框都是模态对话框。对话框只能通过点击操作按钮关闭，不允许点击遮罩区域关闭，以确保用户看到当前的内容。

对话框从页面底部向上升起，操作区域保持在页面下部，即用户单手操作的舒适区域。

10月17日更新————————————————————————————————————————————————————————————————

标签 Tab

Tabs 用来显示有关联的分组内容。

Tabs 应该显示在一行内。

Tabs 不应该被嵌套。也就是说，一个 tab 里的内容不应包含另一组 tabs。

一组 tabs 至少包含 2 个 tab。

Tab 中当前可见内容要高亮显示。

保持 tab 和它的内容相邻，可以明确两者间的关系，距离太远会让人误解。

1）固定的 Tabs

同时显示所有 tabs，最适合用于快速相互切换的 tabs （例如，在地图中切换线路的交通方式）。

点击切换

滑动切换

视觉规范

贴士 Tips

贴士用来对于当前页面上需要额外说明的字段进行解释，常用于问号图标。

注意，在 KD 里，请统一使用问号图标，禁止使用 info 图标。

统一使用问号图标

禁止使用info图标，使用者未必知道 info ＝ 信息。

底部标签栏 Bottom tabs

底部标签栏常用于应用的全局导航。

标签栏有两种形式，纯文字方式，以及图标+文字的方式。

标签栏至多放置 4 个固定标签。

若标签超过 4 个，则采用控件滚动标签的形式。

！注意，应该尽量避免出现滚动标签栏，试着从需求层面给导航栏减肥。

标签栏 DEMO

当页面很长时，例如超过 3 屏，为了尽量利用设备的高度，显示更多的内容。

当用户向下划动页面查看内容时，隐藏标签栏；

当用户快速向上划动页面查看内容时，且页面滚动速率

操作列表 Action sheet

操作列表用来呈现一系列同级/类操作。

操作列表从页面底部向上升起，操作区域保持在页面下部，即用户单手操作的舒适区域。

点击「取消」或者遮罩区域，收起弹窗

点击「取消」按钮关闭操作菜单

动效拆解请移步操作列表动效

点击「遮罩区域」关闭操作菜单

动效拆解请移步操作列表动效

列表 List

列表用于展示同类的数据或数据组。

列表里的每一行称为一个 cell。

根据需求，cell 里的信息布局可以分为两类：

上下结构的 cell；

左右结构的 cell。

上一篇《交互与视觉设计规范一》理论篇

下一篇《交互与视觉设计规范二》模式状态篇

下一遍将详细介绍特殊情况下的规范