7.细解鸿蒙之元服务UX上架标准-色彩对比度

王老实及其友伴的鸿蒙路
163 阅读5分钟

细解鸿蒙之元服务UX上架标准-色彩对比度

是否必须遵守：必须

标准项描述：

在应用或元服务的设计与开发过程中，色彩的使用需要满足最小对比度要求，这一要求对于确保用户能够清晰、准确地识别和理解界面元素至关重要。

最小对比度要求

最小对比度是指在特定环境下，两个颜色之间的视觉差异程度，以保证用户能够区分不同的元素。具体来说，它要求界面上的文字、图标、按钮等元素与其背景之间有足够的对比度，使得它们在视觉上易于辨认。例如，文本与背景之间的对比度不足可能导致文字难以阅读，而按钮与背景之间的对比度不够则可能使按钮的操作状态不明确。

为什么要满足最小对比度要求

    可读性：足够的对比度有助于提高文本的可读性。当文字与背景之间的对比度较低时，文字会变得模糊不清，难以辨认。这对于视力不好或在光线较暗环境下的用户尤为重要。例如，在白底黑字的文本中，如果黑色字体与白色背景之间的对比度不够，可能会出现字迹模糊的情况，影响用户阅读。

    可识别性：对比度对于识别图标、按钮等元素也非常重要。当这些元素与背景之间的对比度不足时，它们可能会与背景融为一体，难以被用户识别。例如，在一个图标与背景颜色相近的情况下，用户可能无法准确判断图标的形状和位置，从而影响操作。

    操作体验：满足最小对比度要求可以提高用户的操作体验。当按钮、菜单等元素的对比度足够时，用户能够更清晰地看到它们的状态和位置，从而更准确地进行操作。例如，在一个按钮与背景颜色对比度较高的情况下，用户可以更容易地判断按钮是否被按下，提高操作的准确性。

如何满足最小对比度要求

    选择合适的颜色：在设计界面时，应选择对比度较高的颜色组合。例如，黑白、黑黄、蓝白等颜色组合通常具有较高的对比度。同时，要考虑颜色的饱和度和亮度，避免颜色过于鲜艳或暗淡。

    调整颜色的对比度：可以通过调整颜色的对比度来满足最小对比度要求。例如，在设计文本时，可以增加文本与背景之间的对比度，使文字更加清晰。在设计按钮时，可以通过改变按钮的颜色或背景颜色来提高对比度。

    测试和评估：在应用或元服务的开发过程中，应进行测试和评估，确保颜色的对比度满足最小对比度要求。可以使用专业的测试工具来检测颜色对比度，并根据测试结果进行调整。

应用场景

    移动应用：在移动设备上，由于屏幕尺寸较小，用户需要更加清晰地识别界面元素。因此，移动应用的颜色对比度要求较高。例如，在手机应用的界面设计中，文字与背景之间的对比度应足够高，以保证用户能够轻松阅读。
    2 网页应用：网页应用的用户群体广泛，不同用户可能在不同的环境下使用。因此，网页应用的颜色对比度要求也较高。例如，在网页的设计中，应确保文字与背景之间的对比度足够高，以满足不同用户的需求。
    3 游戏应用：游戏应用通常需要吸引用户的注意力，因此颜色对比度要求较高。例如，游戏中的按钮、图标等元素与背景之间的对比度应足够高，以提高用户的操作体验。

总之，应用或元服务使用的色彩满足最小对比度要求是为了保证用户能够清晰、准确地识别和理解界面元素，提高用户体验。在设计和开发过程中，应选择合适的颜色组合，并进行测试和评估，确保颜色的对比度满足最小对比度要求。

--javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

import { router } from '@kit.ArkUI';

@Entry
@Component
struct Home {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Row() {
        Column() {
          Text('看谁点的快').fontColor(Color.White)
          Image('/image/shu1.jpg').height(200).width("90%")
            .objectFit(ImageFit.Contain)

        }
        .alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.Center)
//色彩度
        .backgroundColor('#ffb54343')
        .height(300)
        .width("40%")
        .borderRadius(40)
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Index',
          }, router.RouterMode.Standard, (err) => {
            if (err) {
              console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
              return;
            }
            console.info('Invoke pushUrl succeeded.');
          });
        })

        Column() {
          Text('看谁翻的快').fontColor(Color.White)
          Image('/image/zuixin.png').height(200).width("90%")
            .objectFit(ImageFit.Contain)
        }
        .margin({left:10})
        .width("40%")
        .borderRadius(40)
        .alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.Center)
//色彩度
        .backgroundColor('#ff6dadb3')
        .height(300)
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Fan',
          }, router.RouterMode.Standard, (err) => {
            if (err) {
              console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
              return;
            }
            console.info('Invoke pushUrl succeeded.');
          });
        })
      }
      Row(){
        Text('点击开始游戏，看看一分钟谁最快')
          .margin({top:10})
      }
    }
    .linearGradient({
      direction: GradientDirection.Bottom, // 渐变方向
      repeating: false, // 渐变颜色是否重复
      colors: [[0xFF14E2ED, 0.0], [0xFFFFFF, 0.7]] // 数组末尾元素占比小于1时满足重复着色效果, [[0xFF14E2ED, 0.0], [0xFFFFFF, 0.7]]代表渐变的比例
    })
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

PS：实际项目中如有出入，请告知博主，博主会第一时间修改得哇~

avatar
文章
阅读
粉丝