# 评分 用于展示评分，或为用户提供评分功能。 ## 组成要素 1. **分数 - 已打分** ：用于显示已确认/已达到（或悬浮预览）的分数 1. **分数 - 未打分** ：用于显示未打分/不足的分数 1. **即时提示（可选）**：用于对当前评分状态进行解释说明，允许自定义 （ ***** *为必选项）* ## 控件类型 ### 类型总览 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/2093838fa25b4d6a15a0e8e4c15afe85_GbRH7LgGIa.png?height=324&lazyload=true&maxWidth=800&width=2048) >图示：左为星级评分、右为好评差评 ### 星级评分 #### 使用场景 用于需要精确评分的场景，在用户作出选择后可以有进一步的选项。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/b1306765db212a756f21b62415fc40ed_KF5IYcVj3V.png?height=1316&lazyload=true&maxWidth=800&width=2048) #### 步长 可交互的评分组件提供默认步长为 1。也提供 0.5 步长作为备选，用于不同精度的打分系统。 使用 0.5 步长时，点击星星右半边则给全星，点击星星左半边则给半星。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/afb6baf298b55bab19f5d98b7b59ce00_vLz67mtp5y.png?height=504&lazyload=true&maxWidth=800&width=2048)
当评分组件仅用作展示时，可支持更精确的小数（自由步长）。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/4245900d595f39405d640c3f2f52115d_FTQKfMAUuX.png?height=402&lazyload=true&maxWidth=800&width=2048) #### 即时提示 为了统一评分标准，用户 Hover 时需要即时显示当前分数的提示文字，选中后提示文字依然保留。 各星级默认文案如图所示，可根据场景进行调整。 半星提示默认与全星保持一致。即：2 星半提示默认与 3 星一致。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/8e85f24578c325a9223e2ea3f1e798fc_vbo41kkL9Q.png?height=716&lazyload=true&maxWidth=800&width=2048)
提示文案超长可折行处理，确保提示文案显示完整。同时文案应该精简明确。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/2f6d11a60aed752a646ddaeda94bccd1_nrKmumvAIo.png?height=496&lazyload=true&maxWidth=800&width=2048) #### 设计说明 **视觉** - 单个星星容器尺寸为 32 * 32 px，容器间隔为 16 px。 - 星星图标尺寸：一般为 28 * 28 px，Hover 时放大至 32 * 32 px。 - 色彩：Normal 为 N300，Hover 和 Selected 为 Y500。
**交互** 点击即选择评分，再次点击其他位置即改变评分。 可根据场景选择允许或禁用清除评分。若允许清除，则再次点击原位置，回到未选择状态。若禁用清除，则再次点击原位置无变化。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/3a4f7fa6481297ca0605bb6d2dc20e5c_4ntLQ29hEs.png?height=352&lazyload=true&maxWidth=800&width=2048) ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/7d867c935b04245f0f72f0448eff407b_FHM44dIGMw.png?height=1060&lazyload=true&maxWidth=800&width=2048) #### 自定义图标 评分组件默认形状为星星图标，设计师也可使用自定义图标替换，或使用不同颜色标记分数，以满足不同场景需求。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/d4122686b92d008dc4797dcd6f7aac60_tn3oAxAFZI.png?height=630&lazyload=true&maxWidth=800&width=2048) #### 注意事项 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/ff02f377003854cc7859d24102abd239_SnVYAQMknZ.png?height=308&lazyload=true&width=1000) | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/4b63637347a48f4a9b14121e4eb63e67_je61wCcIB2.png?height=308&lazyload=true&width=1000) ---|--- ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f280964f6dabb16bf6ea6801799276a3_3hYp5rFRao.png?height=20&lazyload=true&width=800)
**正确：**
评分组件默认分数段为 5，符合大多数用户对评分系统的认知，同时有限精度下方便快速评分。 | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/5d576ae0cad45457a2c92e8b32194543_EWbyDet7Zc.png?height=20&lazyload=true&width=800)
**避免：**
非特殊情况下不建议更改分数段设置。 ### 好评差评 用于无精度需求的快捷评分场景。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/0988b36cceb3526846c90026c0cff581_R964REKNPP.png?height=368&lazyload=true&maxWidth=800&width=2048) #### 普通好评差评 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/8b1f7175e154a4302c414f1c8bb293f0_4Aa3SjzF7k.png?height=1166&lazyload=true&maxWidth=800&width=2048) **使用场景** 在用户作出选择后可以有进一步的选项。 可根据场景场景调整文案。
**设计说明** 最小宽度 112 px。若左右间距小于 16 px，则宽度根据左右间距值来自适应。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/9330103eec0aa19816ed084f8b68abb0_JRfjI1Y29F.png?height=672&lazyload=true&maxWidth=800&width=2048) #### 小型好评差评 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/7afd35cf4ed226b23a902cb82eb228c5_wxdAhd0AtT.png?height=948&lazyload=true&maxWidth=800&width=2048) **使用场景** 仅用于边缘评分场景，用户作出选择后不会出现进一步的选项。 可根据场景调整文案。
**设计说明** 已选评价后，点击另一个按钮可改选评价。 可根据场景选择允许或禁用清除评分。若允许清除，则再次点击原评价，回到未选择状态。若禁用清除，则再次点击原评价无变化。