您现在的位置是：首页 >技术教程 >ui车载规范的图标与热区网站首页技术教程

四、图标与热区

控件交互⾏为中最常⽤到的点击/滑动等，交互对象包含icon、图⽚、⽂字按钮等元素，为确保⽤户的可读性和操作的易⽤性，图标按钮及热区需 满⾜规范要求。

、

点击是交互行为中最为常用的动作，为确保用户点击操作的易用性和成功率，操作按钮及热区需满足以下规则：

图标：最小的图标尺寸为6.9mm，推荐图标大小为9.2mm。

热区：最小10.7mm，推荐热区15.3mm以上，热区间隔3mm以上。

控件尺⼨：

• 最⼩图标尺⼨ 24px；

• 推荐主图标尺⼨ 48px，次级图标尺⼨32px

• 图标尺⼨允许宽度上略微收缩，但必须满⾜最⼩24px的⾼度要求
热区尺⼨：

• 最⼩热区尺⼨72px

• 热区尺⼨允许宽度上略微收缩，但必须满⾜最⼩72px的⾼度要求

控件与热区组合：

• 控件与热区居中对⻬布局（⽔平居中且垂直居中）

• 热区整体尺⼨必须⼤于或等于控件

• 控件的任何元素部分均不能超出热区范围

热区间隔：

• 热区之间的间隔距离⾄少16px

拉伸

• 组件内元素随组件可以往四个方向拉伸。

• 元素通过定义在组件内的四个边距，当控件发生宽度/高度变化时，保证边距固定的• • 前提下对内容进行拉伸。

• 允许定义组件拉伸的水平方向和垂直方向的最大值和最小值。

缩放

• 组件内元素随组件等比缩放。

• 组件本身只能等比放大。

• 组件内元素根据当前和组件的横竖比例关系，当组件缩放时一起缩放。

• 允许定义组件缩放的最大值和最小值。

隐藏

• 当组件内元素横向布局，元素间的距离是固定时，布局可显示元素的数量随着显示宽度的改变而发生改变

均分

• 组件内元素根据个数均分空间。

• 组件内元素根据当前个数和组件的宽度，均分各个元素之间的间距。

• 允许定义组件最左端和最右端是否一起均分/指定固定值。

• 限制均分的结果，间距必须大于等于0，开发者可以定义更大值。

占比

• 组件内元素始终占据一定比例在组件中布局。

• 允许定义元素在组件中占据的具体比例值。