按钮
卡片中的按钮分为文字按钮、圆形按钮、底部图标按钮与开关四类。应用声明按钮的类型与内容,位置与排列由星河岛按以下规则决定;文字按钮的每行个数、分宽与落单位置可由应用按卡设置。
按钮类型
| 类型 | 位置 | 数量上限 | 用途 |
|---|---|---|---|
| 文字按钮 | 底部,默认每行三个、最多两行;四个时平均分两行;仅一个且第一行右侧无其他内容时,以胶囊按钮置于第一行右侧。应用可按卡设置每行个数与落单位置 | 4 | 打开页面、确认、取消等操作 |
| 圆形按钮 | 卡片第一行右侧 | 3 | 仅需图标即可表达的操作,如暂停、继续、停止;仅通用、进度、强调、明细与状态卡片可用 |
| 底部图标按钮 | 底部另起一行并列 | 4 | 一组同类的图标操作,如静音、字幕、结束 |
| 开关 | 底部并列一行,开启状态使用强调色 | 3 | 可切换的状态,如录音、字幕 |
文字按钮、圆形按钮与底部图标按钮三类合计最多 4 个,开关另计。大图与消息卡片不使用圆形按钮;音乐卡片使用固定的上一首、播放或暂停、下一首按键,对称卡片不显示按钮。
文字按钮
文字按钮的底色为不透明度 15% 的白色,呈上沿较亮、下沿较暗的玻璃质感;圆形按钮与底部图标按钮的灰底为 16% 白。主要操作可使用强调色实底;具有破坏性的操作(如删除、取消订单)显示为淡红底红字,淡红底同样为玻璃质感。普通样式的文字按钮也可自带底色:不透明度过半显示为实心底,否则显示为浅色底。



文字按钮的排列
文字按钮排在卡片底部,由星河岛按规范排列:默认每行三个、各占三分之一;四个按钮平均分两行、各两个;一排里只剩一个时占半排居中。应用可通过卡片构建器的 setButtonLayout 按卡调整:每行 1~4 个、主要或带底色的按钮占两份宽或整排按文字长短排、单独的一个占半排或整排、靠左居中或靠右;不设置时按默认排法。
| 种类 | 位置 | 上限 |
|---|---|---|
TextButton | 卡片底部,可按文字长短与说明分配宽度 | 4 |
IconButton | 第一行右侧的圆形图标按钮 | 3 |
BarIconButton | 底部另起一排的图标按钮 | 4 |
ToggleButton | 底部并排的开关,打开时以强调色显示 | 3(另计) |
GenericCard.Builder("停车计费")
.addButton(TextButton("pay", "缴费", ButtonStyle.PRIMARY))
.addButton(TextButton("later", "稍后"))
.addButton(BarIconButton("detail", detailIcon, "查看明细"))
.setButtonLayout(ButtonLayout(perRow = 2))
.build()文字、圆形与底部图标三类合计最多 4 个,开关另计最多 3 个。按钮位置、大小与过渡由星河岛按规范决定,应用不指定坐标。
圆形按钮
圆形按钮只显示图标,位于卡片右侧,适合高频且含义明确的操作。


开关
开关在底部并列一行显示,开启状态使用强调色。按下后由应用更新开关状态,卡片随之变化。

底部图标按钮
只有图标、没有文字的一组操作,在底部另起一行平分宽度并列显示,底色为玻璃质感的灰色圆角。每个按钮须提供读屏说明。

行为
- 按钮在按下时立即显示按压状态;手指移出按钮范围后,本次操作取消。
- 用户可在「布局与动画」页关闭「自适应按钮按压」(默认开启)。开启后,按按钮可见面积计算按压缩放(85%~97%),长宽比超过 2 时同时计入比例;关闭时使用统一的 95% 缩放与通用弹簧。此设置只作用于展开卡片的共用按钮,不影响胶囊。
- 操作打开了应用或页面时,卡片立即收起;暂停、继续、上一首等不离开卡片的操作执行后,卡片保持展开,并重新计算自动收起时间。外部应用的按钮由接入应用处理,星河岛不判断这一下是否打开了页面。
- 应用可将按钮标记为「需解锁」,锁屏时该按钮单独隐藏。
- 按钮的操作结果由应用处理。星河岛将用户点按的按钮告知应用,不代替应用执行操作。
按钮文案
- 使用动词或动宾短语,如「查看」「暂停」「取消订单」,不超过四个字为宜。
- 同一卡片中的按钮文案长度相近,避免一长一短。
- 不使用「点击这里」「更多」等含义不明的文案。