HarmonyOS Design：鸿蒙生态全场景体验的架构师与赋能者

混沌初开，一生二、二生三、三生万物，华为希望通过 HarmonyOS 为用户打造一个和谐的数字世界 ——One Harmonious Universe。以下是华为的设计原则，供大家参考：要构建优秀的分布式体验，需要遵循如下设计原则：体验增值简单叠加更多的设备并不能带来更好的体验，反而可能造成体验下降。要谨慎地设计分布式体验，跨设备交互要能提供明显的体验提升，例如更好的感官体验、更好的交互效率等。下面的代码示例展示了如何在鸿蒙系统里实现设备间的文件快速共享，以此提高交互效率：typescript@Entry
@Component
struct FileSharingExample {
private fileShareService = new FileShareService()

shareFile() {

this.fileShareService.shareFile('example.txt')

}

build() {

Column({ space: 50 }) {
  Button('Share File')
    .onClick(() => {
      this.shareFile()
    })
}
.width('100%')

}
}

class FileShareService {
shareFile(filePath: string) {

// 模拟分布式文件共享逻辑
console.log(`Sharing file: ${filePath}`)

}
}
无缝流畅从一个设备流转到另一个设备的过程是流畅的，设备与设备的协同是无缝的，就像是在使用一个设备一样，例如用户通过智能推荐可以一步把界面内容流转到其他设备。以下代码展示了怎样实现界面内容在不同设备间的流转：typescript@Entry
@Component
struct ContentTransferExample {
private contentTransferService = new ContentTransferService()

transferContent() {

this.contentTransferService.transferContent()

}

build() {

Column({ space: 50 }) {
  Button('Transfer Content')
    .onClick(() => {
      this.transferContent()
    })
}
.width('100%')

}
}

class ContentTransferService {
transferContent() {

// 模拟内容流转逻辑
console.log('Transferring content to another device')

}
}
清晰明确跨设备交互是新的使用体验，用户可能没有预期，交互的指引要清晰明确，可以帮助用户快速了解和学习跨设备交互的使用，例如提供明确的图标或推荐。以下代码模拟了为跨设备交互提供明确的图标提示：typescript@Entry
@Component
struct InteractionGuideExample {
build() {

Column({ space: 50 }) {
  Image($r('app.media.guide_icon'))
    .width(100)
    .height(100)
    .onClick(() => {
      console.log('Showing cross - device interaction guide')
    })
}
.width('100%')

}
}
易于理解跨设备交互应该是易于理解和记忆的，方便用户长期持续地使用，即使用户没有用过某个分布式的功能，在根据操作指引使用之后应该能够很容易地理解操作流程，记住操作步骤。以下代码示例是一个简单的分布式音乐播放控制，操作逻辑简单易懂：typescript@Entry
@Component
struct MusicPlayExample {
private musicPlayer = new MusicPlayer()

playMusic() {

this.musicPlayer.playMusic('example.mp3')

}

pauseMusic() {

this.musicPlayer.pauseMusic()

}

build() {

Column({ space: 50 }) {
  Button('Play Music')
    .onClick(() => {
      this.playMusic()
    })
  Button('Pause Music')
    .onClick(() => {
      this.pauseMusic()
    })
}
.width('100%')

}
}

class MusicPlayer {
playMusic(musicPath: string) {

console.log(`Playing music: ${musicPath}`)

}

pauseMusic() {

console.log('Pausing music')

}
}
用户可控在跨设备交互时，用户要能够随时切换到其他设备或其他可用的跨设备交互模式，例如用户把视频流转到智慧屏设备后，也可以随时切换到其他可用的设备。以下代码展示了如何实现视频在不同设备间的自由切换：typescript@Entry
@Component
struct VideoSwitchExample {
private videoSwitchService = new VideoSwitchService()

switchVideoDevice() {

this.videoSwitchService.switchVideoDevice()

}

build() {

Column({ space: 50 }) {
  Button('Switch Video Device')
    .onClick(() => {
      this.switchVideoDevice()
    })
}
.width('100%')

}
}

class VideoSwitchService {
switchVideoDevice() {

// 模拟视频设备切换逻辑
console.log('Switching video to another device')

}
}
沉浸无干扰更多的设备为沉浸式体验提供了更多可能，考虑根据设备的属性在不同设备上分配信息，最大化提供沉浸无干扰的体验，例如在手机上浏览邮件列表，在智慧屏上查看选中的邮件详情。以下代码模拟了根据设备类型分配不同的邮件展示内容：typescript@Entry
@Component
struct MailDisplayExample {
build() {

if (deviceInfo.type === 'phone') {
  Column({ space: 50 }) {
    Text('Showing mail list on phone')
  }
  .width('100%')
} else if (deviceInfo.type === 'tv') {
  Column({ space: 50 }) {
    Text('Showing mail detail on TV')
  }
  .width('100%')
}

}
}

const deviceInfo = {
type: 'phone' // 可根据实际设备类型修改
}

本文由认元学横发布！转载请联系。