Skip to content

Commit

Permalink
doc: update badge description (#2727)
Browse files Browse the repository at this point in the history
  • Loading branch information
ftium4 authored and airyland committed May 7, 2018
1 parent 6a75f35 commit 8363d73
Showing 1 changed file with 8 additions and 2 deletions.
10 changes: 8 additions & 2 deletions src/components/badge/metas.yml
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
description: |
Badge是指通常出现在图标或文字右上角的红色圆点、数字或者文字,表示有新内容或者待处理的信息。中文一般称呼为小红点、角标或徽标。
- 强提醒的使用场景。如果只需让用户了解有更新或新内容必然只有一条时,Badge无需标注具体数字,单纯的红点即可,例如微信公众号更新和App版本更新采用无数字类型。
- 弱提醒的使用场景。如果需要让用户精确了解有多少条更新且新内容有多条,Badge可标注具体的数字,例如IM的未读消息、邮箱的未处理邮件。有数字的Badge给用户带来的心理压力会更大,也会更吸引用户注意力。
- 注意数字的长度和上限。对于有数字的Badge,由于界面显示空间有限,因此要注意视场景和信息类型决定数字最长显示多少位,如果数字达到上限该如何显示。
- 谨慎在设计图标时内运用红色圆点元素。红色小圆点这个视觉元素已经成为一种社会性语义符号,即用户看到红色小圆点就会认为这代表着有新内容,因此图标设计应当谨慎使用红色圆点。
category:
en: Data Display
zh-CN: 数据展示
icon: ''
color: '#f74c31'
references:
zh-CN:
-
-
title: 这个控件叫:Badge/徽标/小红点
link: https://zhuanlan.zhihu.com/p/26107887
props:
Expand All @@ -24,4 +30,4 @@ changes:
en:
- '[fix] Fix className:vux-badge-single not work for number #1223'
zh-CN:
- '[fix] 修复个位数字样式不正确 #1223'
- '[fix] 修复个位数字样式不正确 #1223'

0 comments on commit 8363d73

Please sign in to comment.