功能

功能本身是一个比较完整的方案，能解决用户的某种需求。

交互

交互是在某种功能下，设计如何使用这种功能。

举例

音量控制是一个功能，但通过什么样的交互去实现音量控制以及查看是交互部分需要考虑的，对于功能本身来说，只要提供一个设置音量，一个获得当前音量的功能即可。

比如，最基本的技术方案是这样。

微交互与功能的区别 - 图1

但是这样基本是不能用的一个产品，实际上我们需要更多的关于音量的设计，然后这些设计都是基于上面的基层Api.

  1. /**
  2. * @description 音量控件
  3. */
  4. class VolumeProduct {
  6.   constructor(options){
  7.     const{maxVolume,stepVolume} = options
  8.     const sysMaxVolume = 12
  9.       this.maxVolume = +maxVolume>0?+maxVolume:sysMaxVolume;
  10.     this.minVolume = 0
  11.     this.currentVolume =  0
  12.     this.storeSilentVolume = 0
  13.     this.isSilent = false 
  14.     this.stepVolume = stepVolume || 1
  15.     this.safeVolume = 8
  16.     this.openVolumePanel = false 
  17.   }
  19.   toggleVolumePanel(){
  20.        this.openVolumePanel =!this.openVolumePanel
  21.   }
  24.   setBiggerVolume(){
  25.     if((this.currentVolume+this.stepVolume)<=this.maxVolume){
  26.      this.currentVolume += this.stepVolume
  27.     }else {
  28.       system.warn('已经达到最大音量！')
  29.         return 
  30.     }
  31.     this.getVolume()
  33.   }
  35.    setSmallerVolume(){
  36.     if((this.currentVolume-this.stepVolume)>=0){
  37.       this.setVolume()
  38.      this.currentVolume -= this.stepVolume
  39.     }else {
  40.       system.warn('已经达到最小音量！')
  41.         return 
  42.     }
  43.     this.getVolume()
  45.   }
  47.   setSilent(){
  48.       this.storeSilentVolume = this.currentVolume
  49.     this.isSilent = true 
  50.     this.currentVolume = 0
  51.     this.getVolume()
  53.   }
  54.   resume(){
  55.        this.currentVolume = this.storeSilentVolume
  56.         this.isSilent = false 
  57.         this.getVolume()
  59.   }
  60.   setVolume(volume){
  61.       this.currentVolume = volume
  62.     this.getVolume()
  63.   }
  64.   getVolume(){
  65.     system.tip('当前音量是：'+ this.currentVolume)
  66.     if(this.volume>=this.safeVolume){
  67.          system.tip('已经超过安全音量，当前音量是：'+ this.currentVolume)
  68.     }else{
  69.      system.tip('当前音量是：'+ this.currentVolume)
  70.     }
  71.       return this.currentVolume
  72.   }
  74. }

分析

虽然只有设置音量和获取当前音量两个基本的api，但我们可以从交互角度设计出如此多的交互细则以及音量的定义，这些都为我们更好的控制和查看音量做了很好的实现。