本文以美妆购物应用“美寇商城”为例，详细阐述如何将一个概念Demo演进为符合HarmonyOS设计哲学与品牌调性的成熟产品。我们将严格遵循HarmonyOS官方设计规范与开发指南，重点展示ArkUI框架在构建一致、流畅用户体验方面的强大能力。

如果您有任何疑问、对文章写的不满意、发现错误或者有更好的方法，欢迎在评论、私信或邮件中提出，非常感谢您的支持。🙏
嘻嘻嘻，关注我！！！黑马波哥
也可以关注我的抖音号: 黑马程序员burger(50696424331) 在直播间交流(18:00-20:00)

一、设计哲学与品牌DNA融合

1.1 品牌定位与设计语言转化

美寇商城定位于“科技赋能的美妆体验专家”，其品牌DNA是专业、探索、愉悦。我们将其转化为以下设计原则：

  • 专业感：通过清晰的视觉层次、精准的色彩系统和专业的排版来体现。
  • 探索欲：利用HarmonyOS流畅的动效和直观的导航，激发用户探索美妆世界的兴趣。
  • 愉悦感：通过细腻的触感反馈（Haptic Feedback）、优雅的过渡动画和个性化的内容呈现来创造。

1.2 HarmonyOS设计原则应用

我们深度融入HarmonyOS的四大核心设计原则：

设计原则 美寇商城的应用体现
清晰直观 使用ArkUI预置的规范化布局与组件，确保界面信息层级分明，操作路径明确。
流畅高效 利用List、Swiper等高性能组件和LazyForEach懒加载，保证商品浏览、图片预览的极致流畅。
包容统一 遵循资源限定词规则，为不同语言、深浅色模式、设备尺寸提供自适应界面，确保跨设备一致体验。
智慧贴心 结合@ohos.app.ability.common等Kit，实现跨设备无缝流转，例如在手机加入购物车，在平板上继续浏览。

二、UI/UX设计规范体系

2.1 设计Token系统

我们基于资源管理能力，在src/main/resources目录下建立了一套系统化的设计Token，确保品牌和样式的一致性、可维护性。

// 颜色资源文件：src/main/resources/base/element/color.json
{
  "color": {
    // 品牌主色 - 灵感源于玫瑰金
    "brand_primary": "#FF6B8B",
    "brand_primary_light": "#FFCAD4",
    "brand_primary_dark": "#D6456C",
    
    // 中性色 - 用于文字、背景、边框
    "text_primary": "#1A1A1A",
    "text_secondary": "#666666",
    "background_primary": "#FFFFFF",
    "border": "#E5E5E5",
    
    // 功能色
    "success": "#52C41A",
    "warning": "#FAAD14",
    "error": "#FF4D4F"
  }
}

// 在ArkTS组件中引用设计Token
@Component
struct ProductCard {
  build() {
    Column() {
      Image($r('app.media.product_image'))
        .width('100%')
        .aspectRatio(1)
      Text($r('app.string.product_name'))
        .fontSize($r('app.float.font_size_m'))
        .fontColor($r('app.color.text_primary'))
        .margin({ top: 8 })
      Text($r('app.string.product_price'))
        .fontSize($r('app.float.font_size_l'))
        .fontColor($r('app.color.brand_primary'))
        .margin({ top: 4 })
    }
    .padding(12)
    .backgroundColor($r('app.color.background_primary'))
    .border({ color: $r('app.color.border'), width: 1 })
  }
}

2.2 原子化组件库建设

我们基于ArkUI的组件系统，构建了美寇商城的原子化组件库，其架构遵循从原子到页面的演进路径。

设计Token
颜色/字体/圆角等

基础原子组件

按钮/标签/图标

输入框/单选框

图片/文本

复合分子组件

商品卡片

导航栏

底部操作栏

业务模块模板

商品详情页

购物车页

个人中心页

完整应用页面

以下是几个关键组件的代码示例：

// 1. 品牌主按钮 - 原子组件
@Component
struct MeiKouButton {
  @Prop text: string = '';
  @Prop type: 'primary' | 'default' = 'primary';
  @Prop disabled: boolean = false;

  build() {
    Button(this.text)
      .fontSize($r('app.float.font_size_m'))
      .fontWeight(FontWeight.Medium)
      .fontColor(this.type === 'primary' ? Color.White : $r('app.color.text_primary'))
      .backgroundColor(this.disabled ? $r('app.color.border') : 
                      (this.type === 'primary' ? $r('app.color.brand_primary') : Color.White))
      .borderRadius($r('app.float.border_radius_m'))
      .stateEffect(!this.disabled) // 启用状态特效
      .opacity(this.disabled ? 0.5 : 1)
      .onClick(() => {
        if (!this.disabled) {
          // 触发Haptic振动反馈，增强操作确认感
          vibrator.vibrate({ duration: 10 });
        }
      })
  }
}

// 2. 商品卡片 - 分子组件
@Component
struct ProductCard {
  @Prop product: Product; // 商品数据模型

  build() {
    Column() {
      // 商品图片，带角标
      Stack() {
        AsyncImage(this.product.imageUrl) // 使用异步图片加载
          .width('100%')
          .aspectRatio(1)
          .objectFit(ImageFit.Cover)
          .borderRadius($r('app.float.border_radius_m'))
        
        // 新品或促销角标
        if (this.product.tag) {
          Text(this.product.tag)
            .fontSize($r('app.float.font_size_s'))
            .fontColor(Color.White)
            .padding({ horizontal: 6, vertical: 2 })
            .backgroundColor($r('app.color.brand_primary'))
            .borderRadius($r('app.float.border_radius_s'))
            .position({ x: 8, y: 8 })
        }
      }

      // 商品信息
      Column() {
        Text(this.product.name)
          .fontSize($r('app.float.font_size_m'))
          .fontColor($r('app.color.text_primary'))
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .margin({ top: 8 })
        
        Row() {
          Text(`￥${this.product.price}`)
            .fontSize($r('app.float.font_size_l'))
            .fontColor($r('app.color.brand_primary'))
            .fontWeight(FontWeight.Bold)
          
          if (this.product.originalPrice) {
            Text(`￥${this.product.originalPrice}`)
              .fontSize($r('app.float.font_size_s'))
              .fontColor($r('app.color.text_secondary'))
              .decoration({ type: TextDecorationType.LineThrough })
              .margin({ left: 4 })
          }
        }
        .margin({ top: 4 })
        .justifyContent(FlexAlign.Start)
      }
      .padding(8)
    }
    .backgroundColor(Color.White)
    .borderRadius($r('app.float.border_radius_l'))
    .shadow({ radius: 8, color: '#1A000000', offsetX: 0, offsetY: 2 }) // 添加柔和阴影
    .onClick(() => {
      router.pushUrl({ url: 'pages/ProductDetail', params: { id: this.product.id } });
    })
  }
}

三、核心页面UX设计演进

3.1 首页：从信息堆砌到智能引导

Demo阶段问题：首页布局混乱，功能入口平铺，缺乏个性化。
产品化解决方案：采用“智能货架”概念，利用HarmonyOS的数据管理能力实现动态化、个性化模块布局。

// 首页动态布局管理器
@Component
struct HomePage {
  @State moduleList: HomeModule[] = []; // 首页模块数据

  aboutToAppear() {
    // 根据用户画像、行为数据，从服务器获取个性化的模块配置
    this.fetchPersonalizedLayout();
  }

  build() {
    List({ space: 12 }) {
      // 使用LazyForEach动态渲染不同类型的模块，提升性能
      LazyForEach(this.moduleList, (module: HomeModule) => {
        ListItem() {
          // 根据模块类型，渲染不同的UI组件
          switch (module.type) {
            case 'banner':
              BannerModule({ data: module.data })
              break;
            case 'product_grid':
              ProductGridModule({ data: module.data })
              break;
            case 'category':
              CategoryModule({ data: module.data })
              break;
            case 'personal_recommend':
              PersonalRecommendModule({ data: module.data })
              break;
          }
        }
      }, (module: HomeModule) => module.id)
    }
    .padding({ top: 12, bottom: 12 })
    .backgroundColor($r('app.color.background_page'))
  }
}

效果对比：

Demo版本 产品化版本
静态布局，信息过载 动态智能布局，千人千面
操作路径不清晰 基于眼动研究的F型视觉动线
无个性化内容 AI驱动的“猜你喜欢”模块

3.2 商品详情页：从简单展示到沉浸式体验

核心优化点：

  1. 媒体增强：使用@ohos.multimedia.image Kit实现支持手势缩放的图片查看器、AR虚拟试妆短视频预览。
  2. 流畅交互：通过@Animator和手势事件实现加入购物车时，商品图片飞入底部导航栏的趣味动效。
  3. 信息分层：利用Tabs和Swiper将参数、详情、评价等内容分区，保持界面清晰。
// 沉浸式商品画廊组件
@Component
struct ProductGallery {
  @State currentIndex: number = 0;
  @Prop imageList: string[];
  private controller: SwiperController = new SwiperController();

  @Builder
  function ImageWithZoom(imageUrl: string) {
    // 支持双击和捏合缩放的手势交互
    PinchGesture({})
      .onActionStart(() => { /* 缩放逻辑 */ })
    TapGesture({ count: 2 })
      .onAction(() => { /* 双击放大逻辑 */ })

    AsyncImage(imageUrl)
      .objectFit(ImageFit.Contain)
  }

  build() {
    Stack() {
      // 主图轮播
      Swiper(this.controller) {
        ForEach(this.imageList, (imageUrl: string) => {
          ImageWithZoom(imageUrl)
        })
      }
      .index(this.currentIndex)
      .autoPlay(false)
      .indicator(true) // 显示指示点
      .loop(true)

      // 底部缩略图导航
      Scroll() {
        Row({ space: 8 }) {
          ForEach(this.imageList, (imageUrl: string, index: number) => {
            AsyncImage(imageUrl)
              .width(60)
              .height(60)
              .borderRadius(4)
              .border({ 
                width: this.currentIndex === index ? 2 : 0, 
                color: $r('app.color.brand_primary')
              })
              .onClick(() => {
                this.controller.showNext(); // 点击缩略图切换主图
                this.currentIndex = index;
              })
          })
        }
        .padding(8)
      }
      .height(80)
      .width('100%')
      .position({ x: 0, y: '90%' })
      .backgroundColor(Color.White)
    }
  }
}

四、品牌动效与微交互设计

我们利用ArkUI的动画能力，将品牌“愉悦感”融入每一个交互细节。

4.1 品牌核心动效：绽放

灵感来源于花朵绽放，应用于页面转场、操作成功反馈等场景。

// “绽放”动效组件
@Component
struct BloomAnimation {
  @State scaleValue: number = 0;
  @State opacityValue: number = 0;

  aboutToAppear() {
    // 组合动画：同时进行缩放和淡入
    animateTo({
      duration: 600,
      curve: Curve.EaseOut,
      onFinish: () => {
        // 动画结束后的回调
      }
    }, () => {
      this.scaleValue = 1;
      this.opacityValue = 1;
    })
  }

  build() {
    Column() {
      // 你的内容组件
    }
    .scale({ x: this.scaleValue, y: this.scaleValue })
    .opacity(this.opacityValue)
  }
}

4.2 关键微交互设计

场景 交互设计 技术实现
下拉刷新 品牌Logo变形为加载 spinner @ohos.router 与自定义动画
加入购物车 商品图片轻弹飞向底部图标 @ohos.animator 路径动画
切换主题 色彩像水波一样扩散切换 @ohos.graphics.display 色彩过渡
点赞/收藏 爱心图标有弹性地填充颜色 属性动画（animateTo）

五、多设备自适应与无缝流转

遵循HarmonyOS“一次开发，多端部署”理念，我们利用ArkUI的响应式布局能力和@ohos.app.ability.common Kit，确保美寇商城在手机、平板、智慧屏等设备上都能提供最佳体验。

5.1 响应式栅格系统

// 自适应栅格布局组件
@Component
struct AdaptiveGrid {
  @Prop data: Product[];
  @Consume gridCount: number; // 通过设备类型注入列数

  build() {
    Grid() {
      ForEach(this.data, (item: Product) => {
        GridItem() {
          ProductCard({ product: item })
        }
      })
    }
    .columnsTemplate(`repeat(${this.gridCount}, 1fr)`) // 动态列数
    .rowsGap(12)
    .columnsGap(12)
  }
}

// 在入口文件中根据设备类型提供不同的列数
@Entry
@Component
struct MainPage {
  @Provide gridCount: number = 2;

  aboutToAppear() {
    // 通过媒体查询或设备信息判断设备类型
    if (/* 是平板设备 */) {
      this.gridCount = 3;
    } else if (/* 是智慧屏 */) {
      this.gridCount = 4;
    }
  }

  build() {
    AdaptiveGrid()
  }
}

5.2 跨设备无缝流转体验

用户可以在手机上浏览商品，然后无缝流转到平板上观看更清晰的试妆教程视频，其核心是利用Want和Ability的跨设备启动能力。

// 在商品详情页，添加“在平板上继续观看”按钮
Button('在平板上继续观看')
  .onClick(() => {
    let want = {
      deviceId: '', // 为空表示系统自动选择
      bundleName: 'com.meikou.mall',
      abilityName: 'ProductVideoAbility',
      parameters: { // 传递当前上下文
        productId: currentProductId,
        videoTimestamp: player.currentTime
      }
    };
    // 启动跨设备Ability
    startAbility(want).then(() => {
      console.info('跨设备启动成功');
    });
  })

六、开发流程与质量保证

我们的开发流程严格遵循DevEco Studio的最佳实践，确保从设计到代码的精准落地。

通过

不通过

设计稿
Figma/Sketch

设计走查
与标注导出

转换为
ArkTS代码

组件开发
与样式匹配

真机/模拟器
多设备预览

视觉还原度验收

集成测试

发布

关键质量保证措施：

  1. 设计-开发协作：使用Pixel Perfect插件在DevEco Studio中直接比对设计稿与实现效果。
  2. 多设备预览：充分利用DevEco Studio的多设备预览和实时预览功能，快速验证不同尺寸设备的UI表现。
  3. 自动化测试：对核心交互路径编写UI测试用例，确保UI的稳定性和一致性。

总结：从Demo到产品的关键跃迁

将“美寇商城”从Demo演变为产品，其核心不仅是功能的堆砌，更是设计思维、工程规范与品牌灵魂的深度融合。

  1. 设计系统化：建立基于HarmonyOS资源管理的设计Token和原子化组件库，是保证大规模团队协作和长期可维护性的基石。
  2. 体验品牌化：每一个动效、每一次反馈、每一次流转，都应是品牌DNA的传达，而非单纯的功能实现。
  3. 架构可扩展：利用响应式布局和动态化配置，为未来的业务增长和多设备生态做好架构准备。
  4. 开发规范化：严格遵守HarmonyOS官方编码规范，充分利用ArkUI框架和DevEco Studio工具链的能力，是提升开发效率和产品质量的关键。

通过这条从Demo到产品的路径，“美寇商城”最终成为一个不仅功能完备，更在视觉、交互和情感层面与用户深度共鸣的HarmonyOS原生应用，在万物互联的鸿蒙生态中，为美妆购物体验树立了新的标杆。

如果您有任何疑问、对文章写的不满意、发现错误或者有更好的方法，欢迎在评论、私信或邮件中提出，非常感谢您的支持。🙏
嘻嘻嘻，关注我！！！黑马波哥
也可以关注我的抖音号: 黑马程序员burger(50696424331) 在直播间交流(18:00-20:00)

# harmonyos # ui # ux # 设计规范
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

HarmonyOS6半年磨一剑 - RcButton组件交互逻辑与事件处理机制

avatar HarmonyOS开发者社区
cover

HarmonyOS与Android开发对比：迁移挑战、实践策略与未来机遇

avatar HarmonyOS开发者社区

HarmonyOS 6.0+ APP智能种植监测系统开发实战：农业传感器联动与AI种植指导落地

本文基于HarmonyOS 6.0+开发智能种植监测系统，针对传统农业种植中精准管理缺失问题，提出分布式解决方案。系统采用AgricultureKit快速接入农业传感器，支持Modbus-RTU/LoRaWAN/NB-IoT多协议通信，结合端侧AI作物生长模型实现实时环境监测与种植指导。开发过程中重点优化了传感器数据采集、离线AI计算和多设备协同功能，并通过分片存储、数据压缩和动态采集频率实现低功

avatar HarmonyOS开发者社区