细解鸿蒙之元服务UX上架标准-上下图文信息量适中

是否必须遵守：必须

标准项描述：

在应用程序的界面设计中，上下图文信息量符合要求是指在特定的页面布局下，上下部分的文字与图片所传递的信息在数量、质量、相互匹配等方面满足特定标准与用户期望。

内容层面

  1. 1.

    文字信息：文字的数量、质量与表达清晰程度是关键。文字需准确传达主题及相关信息，避免模糊、歧义或冗长。例如在产品介绍页面，文字应简洁明了地阐述产品特点、功能与优势。同时，文字的排版、字体大小也影响信息传达效果。
    2 图片信息：图片的数量、清晰度、分辨率及与文字的关联性至关重要。图片要能直观展示产品或相关内容，增强文字信息的表现力。如旅游宣传页面，图片可展示景点风光、特色建筑等，帮助用户理解文字描述。图片大小与比例需与文字内容相匹配，避免出现图片过大或过小影响视觉效果。

布局设计

1 空间分配：上下部分空间分配要合理，依据内容重要性与需求调整。例如新闻页面，上部展示新闻标题与图片，下部展示详细新闻内容，空间分配要确保用户能清晰浏览与理解信息。布局设计要考虑页面整体美观与协调性，避免上下部分比例失调或布局混乱。
2 视觉效果：上下图文信息布局要注重视觉效果，使文字与图片相互配合，营造良好视觉体验。图片颜色、风格与文字排版要相互协调，形成和谐氛围。此外，图片位置与大小也影响视觉效果，需根据页面整体布局合理安排。

用户需求

1 信息获取：用户期望能快速、准确获取所需信息。上下图文信息呈现应满足用户需求，方便用户阅读与理解。如产品展示页面，用户通过图片与文字了解产品详细信息，信息需满足用户需求。
2 操作便捷：用户在操作过程中希望能便捷浏览与切换上下图文信息。布局设计要考虑用户操作习惯，提供便捷操作方式。如移动应用中，用户可通过滑动屏幕或点击按钮切换上下图文信息，操作要简单流畅。

设备屏幕尺寸

1 屏幕大小：不同设备屏幕尺寸不同，上下图文信息展示方式受影响。大屏幕设备上，上下图文信息可更充分展示；小屏幕设备上，需根据屏幕尺寸调整。如手机屏幕上，上下图文信息可能更紧凑。
2 分辨率：屏幕分辨率影响图文信息展示效果。高分辨率屏幕能展示更多细节与清晰图片，低分辨率屏幕可能导致图片模糊或文字显示不清晰。上下图文信息呈现需根据设备屏幕分辨率调整，确保信息质量与视觉效果。
综上，上下图文信息量符合要求，能提升用户体验、优化信息传达、增强界面美观并适应不同设备屏幕。

--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)
            //字体大小
            .fontSize("20vp")

          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：实际项目中如有出入，请告知博主，博主会第一时间修改得哇~