Badge 新体验：以小巧设计带动大不同

梁林烁
220 阅读5分钟

环境及工具

HarmonyOS 5.0.0 Release
DevEcoStudio
适用于HarmonyOS Next原生开发

1.容器组件Badge

Badge（徽章）容器组件

Badge 是用户界面设计中的一个小型、视觉上突出的组件，通常用来展示简短的信息或状态更新。它经常用于强调某些元素的重要性或提供额外的状态指示。以下是关于 Badge 组件的详细扩写：

功能描述
  • 信息显示：  Badge 主要用来显示数字计数、状态标签（如“新”、“热”）、通知提醒等简短信息。
  • 视觉强调：  通过颜色、形状和位置的选择，Badge 可以吸引用户的注意力到特定的 UI 元素上，例如未读消息数、购物车商品数量等。
  • 紧凑设计：  Badge 的设计通常是小巧且不显眼的，不会干扰主内容，但又能有效地传达信息。
  • 自定义样式：  支持多种颜色、大小和形状的变化，可以根据品牌指南或具体场景进行定制。
  • 动画效果：  可以添加轻微的动画效果（如淡入淡出、闪烁），以增强交互体验，特别是在有新的通知时。
使用场景
  • 通知中心：  显示未读通知的数量，帮助用户快速了解是否有新的活动或更新。
  • 购物应用：  展示购物车中的商品数量，或是促销活动的标记。
  • 社交平台：  指示新私信、点赞、评论等互动的数量。
  • 系统状态：  在仪表盘或设置页面中，用作服务状态、更新版本号等的提示。
设计原则
  • 简洁明了：  Badge 内容应尽可能简短，只包含必要的信息，避免过多文字造成混乱。
  • 一致性：  整个应用程序中 Badge 的外观和行为应该保持一致，以便用户能够形成预期。
  • 对比度：  确保 Badge 的背景色与所在元素有足够的对比度，使信息易于阅读。
  • 位置固定：  徽章的位置应当相对固定，一般位于其关联元素的右上角或左上角，这样用户可以轻松定位。
交互特性
  • 点击反馈：  如果 Badge 是可点击的，那么点击后应该有明确的反馈动作，比如清空计数或跳转到相关页面。
  • 动态更新：  当后台数据发生变化时，Badge 内容应及时更新，确保信息准确无误。
  • 辅助功能：  对于屏幕阅读器用户，应确保 Badge 内容可以通过 ARIA 标签等方式被正确读取。
实现注意事项
  • 响应式布局：  在不同尺寸的屏幕上，Badge 应该能自动调整大小和位置，不影响用户体验。
  • 性能优化：  如果 Badge 需要频繁更新，确保更新机制高效，不会影响页面性能。
  • 国际化支持：  考虑到不同语言环境下文本长度的变化，设计时应留有足够的空间适应多语言环境。

总之，Badge 是一种简单却强大的 UI 组件，它可以极大地提升用户体验，帮助用户更直观地理解界面中的重要信息。我们在设计和实现 Badge 时，应当注重细节，确保其既美观又实用。

Badge是 容器组件， 只支持单个子元素

  Badge({count:0,style:{}}){
    // 单个子元素
  }
参数名参数类型必填参数描述
countnumber是设置提醒消息数。 说明： 小于等于0时不显示信息标记。
positionBadgePosition否设置提示点显示位置。 默认值：BadgePosition.RightTop
maxCountnumber否最大消息数，超过最大消息时仅显示maxCount+。 默认值：99 取值范围
styleBadgeStyle是Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

属性：支持通用属性

事件：支持通用事件

实战示例

image.png

@Entry
@Component
struct Page14_Badge {
  build() {
    Column() {
      Text('Badge 组件')
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
      // 基本用法
      Badge({ count: 10, style: {} }) {
        Text('信息')
          .border({ width:.7, })
          .borderRadius(10)
          .padding(10)
      }
      .margin({
        top:14,
        bottom:14
      })
      // 调整位置
      Badge({ value:'new', position: BadgePosition.Left, style: {} }) {
        Text('信息')
          .border({ width: .7, })
          .borderRadius(10)
          .padding(10)
      }
      .margin({
        bottom:14
      })
      // 调整位置
      Badge({ count: 10, position: BadgePosition.Right, style: {} }) {
        Text('信息')
          .border({ width: .7, })
          .borderRadius(10)
          .padding(10)
      }
      .margin({
        bottom:14
      })
      // 3. 最大个数
      Badge({ count: 12, maxCount: 99, position: BadgePosition.Right, style: {} }) {
        Text('烁烁最帅了')
          .border({ width: .7, })
          .borderRadius(10)
          .padding(10)

      }
      .margin({
        bottom:14
      })
      // 4. 调整样式
      Badge({
        count: 12, style: {
          fontSize: 20,
          color: Color.Orange,
          badgeColor: Color.Black,
          borderColor: Color.Black,
          badgeSize: 30

        }
      }) {
        Text('烁烁最帅了')
          .border({ width: .7, })
          .borderRadius(10)
          .padding(10)
      }

    }
    .width('100%')
    .height('100%')
  }
}

补充

参数名参数类型必填参数描述
valuestring是提示内容的文本字符串。

注意事项

  1. 保持简洁：

    • Badge 应该尽量简洁明了，不要包含过多的信息，以免影响用户体验。

  2. 视觉一致性：

    • 确保 Badge 在整个应用程序中的视觉设计风格一致，包括颜色、字体和位置等。

  3. 避免过度使用：

    • 不要在一个界面上放置太多的 Badge，以免造成视觉混乱。只在必要的地方使用它来强调重要信息。

  4. 响应式设计：

    • 考虑不同屏幕尺寸下的显示效果，确保 Badge 在各种设备上都能良好显示。

  5. 性能考虑：

    • 如果 Badge 的值频繁变化，注意优化更新逻辑，避免不必要的重新渲染。
avatar
文章
阅读
粉丝