LEAPMOTION开发UI专题（1）

---

非常

抱歉的是，之前说的LEAP/UI框架设计可能仅仅有两篇 由于个人时间实在是不同意 这个问题假设展开去写的话 那么说写本书都是不为过的 且由于内容改动非常是杂乱 所以我第一篇文章用来介绍LEAP预置ＵＩ的结构第二篇用来讲How to design&build~

---

鉴于直接涉及交互问题 因此这篇文章的受众显得非常尴尬 可是相信 认真依照我之前博客学习的同学都能够理解当中的意思

关于leap这个东西 我在第一篇文章中就提到过 ——just a toy.

所以仅仅是用来开发的练手，根本别指望交互效果能够非常好

---

依据我的经验来讲 手势识别的交互UI依据交互方式大概分为三种

1。触发式操作

2。手势操作（下一期）

3，映射性操作（下一期）

所以 我从最主要的触发操作ui開始入手

---

预警：这篇文章very very long~~

入门：

从leap coreAsset当中找到

widght这个目录



那先找个demo执行一下吧

SENCES

下的执行一下咯~

好 我们就由这个開始 unity UI和leap交互的前导

首先 我们来熟悉 官方预设的四种UI样式 各自是：

dial\滚轮菜单

scrolltext\可滑动的字体

slider\滑动条

toggle button\button

---

---

当我们把这四种prefab拖入场景加以调整

再加上控制器 就算已经完整地展示了 全部的 官方预制形式

那么我们就来一个一个说吧

1.最简单的scrolltext\可滑动的字体

这个组件的主要控制过程在这里

scrollhandle

---

我们能够看到他的结构相当简单 boxcollider检測触发 文本上下边界 和显示框上下边界 当text的上边界高于显示框的时候会以一个速度贴合回来 而且由于使用localposition 这个组件的工作不会由于坐标的颠倒而出错

 protected virtual void ResetPivots()
    {
      m_pivot = transform.localPosition;
      if (m_target != null)
        m_targetPivot = transform.parent.InverseTransformPoint(m_target.transform.position);
    }

---

---

针对 TEXT组件的改动 我们能够直接在inspectors中改动文字等等操作 而直接生成一个相似阅读器之类的应用

在脚本中我们能够看到来龙去脉

首先是这个类LeapPhysicsBase：

相信有一定基础的小伙伴都知道 既然 设置了触发器 那么肯定会有 检測函数

 protected virtual void OnTriggerEnter(Collider collider)
    {
    //检測是否是手
      if (m_target == null && IsHand(collider) && State != LeapPhysicsState.Disabled)
      {

        State = LeapPhysicsState.Interacting;
        m_target = collider.gameObject;
        ResetPivots();
      }
    }

    protected virtual void OnTriggerExit(Collider collider)
    {

      if (collider.gameObject == m_target)
      {
        State = LeapPhysicsState.Reflecting;
        m_target = null;
      }
    }

以上两个函数清晰的写了触发执行的过程 那既然是检測不仅仅是要推断是否出发 还要对造成出发的对象进行推断 是否为手于是调用了以下这个函数

    private bool IsHand(Collider collider)
    {
      return collider.transform.parent && collider.transform.parent.parent &&       collider.transform.parent.parent.GetComponent<HandModel>();
    }

以上三个部分共同工作。就生成了最主要的触发事件

而整个组建的状态更改 控制 识别都放在一个FixedUpdate();里面

 protected virtual void FixedUpdate()
    {
      if (m_target == null && State == LeapPhysicsState.Interacting)
      {
        State = LeapPhysicsState.Reflecting;
      }

      switch (State)
      {
        case LeapPhysicsState.Interacting://交互
          ApplyInteractions();
          break;
        case LeapPhysicsState.Reflecting://反映
          ApplyPhysics();
          break;
        case LeapPhysicsState.Disabled://无
          break;
        default:
          break;
      }
      ApplyConstraints();
    }

代码清晰易懂 对组件的3种状态做了规整的编写 代码结构十分清晰

public enum LeapPhysicsState
  {
    Interacting, // Responsible for moving the widgets with the fingers
    Reflecting, // Responsible for reflecting widget information and simulating the physics
    Disabled // State in  which the widget is disabled
  }

在不同的状态下 相应不同的执行过程 非常规整、 值得一提的是 leap官方的代码风格非常适合我们去细致钻研 当中不乏一些亮点 对于我们来说非常值得借鉴 对于没有形成良好代码风格的新手来说十分值得学习

 protected virtual void Awake()
    {
      if (GetComponent<Collider>() == null)
      {
        Debug.LogWarning("This Widget lacks a collider. Will not function as expected.");
      }//碰撞其检測与error/warning输出
    }

在这个基类的脚本中 我们基本了解了这个组件的执行机理以下就来看第二个脚本ScrollBase

这个脚本中有几个重要的常数

1。弹簧力（SnapSpringForce）；

2。阻力（drag）；

3，交互比例（InteractionScale）。

---

这几个參数决定着你出发这个组件并滑动之后 多久能停下来 惯性执行的时间 等等效果

当中甚至运用到了一些公式运算

m_dampingForce = Mathf.Sqrt(4.0f * SnapSpringForce);

（阻尼/力）

相似这样的运算 但最重要的还是定义了文本组件的上下界和显示框的上下界

我们能够清晰地看到 在这个组件的下方 文明本下界要长的多

---

从文本的属性来看 我们也能够清晰地看到纵横比也能够改动文字

而从脚本层面我们能够看到很多其它的这样的继承关系

这是基类中的

 protected virtual void ResetPivots()
    {
      m_pivot = transform.localPosition;
      if (m_target != null)
        m_targetPivot = transform.parent.InverseTransformPoint(m_target.transform.position);
    }

这是scrollbase中的

 protected override void ResetPivots() {
    base.ResetPivots();
    m_contentPivot = ContentTransform.localPosition;
  }

最后不得不佩服的是 为了实现 惯性这样的细微的操作感代码的复杂程度高了不少 以至于催生了非常多的计算方法

  //计算一维弹簧力
   protected float calculate1DSpringForce(float offsetVector) {
    float springForce = offsetVector * SnapSpringForce;
    float dampingForce = m_dampingForce * (m_velocity);
    return springForce - dampingForce;
  }

---

 protected float calculateOverrunMagnitude() {
 //计算超过量（文本边界超过显示边界的量）
    float overrunDistance = 0.0f;

    // Put all positions in object space.
    Vector3 localContentTop = transform.InverseTransformPoint(ContentTopBound.position);
    Vector3 localContentBottom = transform.InverseTransformPoint(ContentBottomBound.position);
    Vector3 localContainerTop = transform.InverseTransformPoint(ContainerTopBound.position);
    Vector3 localContainerBottom = transform.InverseTransformPoint(ContainerBottomBound.position);

    if (localContentTop.y < localContainerTop.y) {
      overrunDistance = localContainerTop.y - localContentTop.y;
    }
    else if (localContentBottom.y > localContainerBottom.y) {
      overrunDistance = localContainerBottom.y - localContentBottom.y;
    }

    return overrunDistance;
  }

至于一些 基类中的状态推断循环所採用的应用方法 我仅仅贴一个样例

ApplyInteractions();

基类中定义了它的抽象方法在状态循环中 当状态为

case LeapPhysicsState.Interacting:

时调用了ApplyInteractions(); 而在scrollbase类中 整个重载了这种方法

  protected override void ApplyInteractions() {

    Vector3 targetInteractorPositionChange = transform.parent.InverseTransformPoint(m_target.transform.position) - m_targetPivot;
    targetInteractorPositionChange *= InteractionScale;
    targetInteractorPositionChange.x = 0.0f;
    targetInteractorPositionChange.z = 0.0f;
    Vector3 contentCurrentPosition = ContentTransform.localPosition;
    Vector3 newContentPosition = m_contentPivot + targetInteractorPositionChange;
    Vector3 velocity = (newContentPosition - contentCurrentPosition) / Time.deltaTime;
    m_velocity = velocity.y;

    ContentTransform.localPosition = newContentPosition;
  }

在这样的结构下　　我们事实上假设仅仅是想实现一个交互　　那么还是非常easy的　　可是假设想加强操控感受　改善交互效果　能够说难度非常大　已经超出了新手的能力范围　　由于当中涉及到了太多的　ＵＩ交互设计技巧　　经验和逻辑。

---

OK~ NEXT

2.button

照旧 我们先看他的构成 非常清晰有没有

四种图像分别相应

打开状态

关闭状态

转移状态

通用元素

接下来我们抛开他的素材去看代码

这两个类的规模就要小非常多了 由于没有非常复杂的交互优化 整个组件非常清爽

在ButtonDemoGraphics脚本中

public void SetActive(bool status)
    {
        Renderer[] renderers = GetComponentsInChildren<Renderer>();
        Text[] texts = GetComponentsInChildren<Text>();
        Image[] GUIimages = GetComponentsInChildren<Image>();
        foreach (Renderer renderer in renderers)
        {
            renderer.enabled = status;
        }
        foreach(Text text in texts){
            text.enabled = status;
        }
        foreach(Image image in GUIimages){
            image.enabled = status;
        }

    }

设置激活的方法显得非常干练包括对材质，图片。文字的遍历

public void SetColor(Color color)
    {
        Renderer[] renderers = GetComponentsInChildren<Renderer>();
        Text[] texts = GetComponentsInChildren<Text>();
        Image[] GUIimages = GetComponentsInChildren<Image>();
        foreach (Renderer renderer in renderers)
        {
            renderer.material.color = color;
        }
        foreach (Text text in texts){
            text.color = color;
        }
        foreach(Image image in GUIimages){
            image.color = color;
        }
    }

包括对颜色更改也是

而在对此基类调用的时候ButtonDemoToggle类这样的代码结构异常的清晰明了（真的好棒！！啊）

 private void TurnsOnGraphics()
  {
    onGraphics.SetActive(true);
    offGraphics.SetActive(false);
    midGraphics.SetColor(MidGraphicsOnColor);
    botGraphics.SetColor(BotGraphicsOnColor);
  }

  private void TurnsOffGraphics()
  {
    onGraphics.SetActive(false);
    offGraphics.SetActive(true);
    midGraphics.SetColor(MidGraphicsOffColor);
    botGraphics.SetColor(BotGraphicsOffColor);
  }

假设你想使用这个button 做一个状态推断的话

  public override void ButtonTurnsOn()
  {
    TurnsOnGraphics();
  }

  public override void ButtonTurnsOff()
  {
    TurnsOffGraphics();
  }

写在这两个方法下 的话 就能达成你的目的啦

比方 我想button显示关闭的时候的时候程序暂停执行 那就

  public override void ButtonTurnsOff()
  {
    TurnsOffGraphics();
    Debug.Break();
  }

---

至于替换原本的ON/OFF的UI纹理 那就不用我教了 相信 能看到这里的都会操作 我们去怎样设计按键触发的过程

就有了一个清晰的方案

自己定义button样式替换元素 ->继承以重用脚本设计->自己定义触发操作->完毕

总结：

button为什么这里就总结了？

答：button的类继承关系非常复杂 可是 组件本身有着非常好的可改动性 重用性 因此 对于这样的良心 组件 我们也不用想着从 脚本角度去改动 替换button的外观 和样式 保留官方这样的成熟的继承风格 对于我们生成 的软件的稳定性至关重要；

public abstract class ButtonToggleBase : ButtonBase, BinaryInteractionHandler < bool > , IDataBoundWidget < ButtonToggleBase, bool>

任意感受一下这个继承

3.滑动条（slider）

先看图

---

我们能够看到 为了达成滑动条这个组件 所须要的 步骤 就多得多了

尽管在hierarchy里面全部展开以后非常吓人的样子可是事实上 仅仅有三类

1.top

2.line

3.dot

我们先从top開始看

事实上 他就是按键的马甲而已，SliderDemoGraphics负责控制这个按键的图像

top的结构从这个拆分能清晰的看清每一个部分

toplayer：圆点button中心

midlayer：填充材质（slidersecondary）

botlayer：选定高亮边框

所以在这个类当中 我们会看到button中出现过的套路

 public void SetActive(bool status)
  {
    Renderer[] renderers = GetComponentsInChildren<Renderer>();
    foreach (Renderer renderer in renderers)
    {
      renderer.enabled = status;
    }
  }

 public void SetColor(Color color)
  {
    Renderer[] renderers = GetComponentsInChildren<Renderer>();
    foreach (Renderer renderer in renderers)
    {
      renderer.material.color = color;
    }
  }

Top的构成非常easy 可是整个滑动条还是比較复杂的 就是由于这个类SliderDemo的继承SliderBase又继承于 LeapPhysicsSpring 这样的继承关系导致我们想从自上而下的改动功能变得不是那么easy

而我们仅仅能从底层向上寻找

Sliderdemo：

  protected override void sliderPressed()
  {
  //按下
    base.sliderPressed();
    PressedGraphics();
  }

  protected override void sliderReleased()
  {
  //释放
    base.sliderReleased();
    ReleasedGraphics();
  }

这两个函数描写叙述了按下后和释放后的指令 所以从这里来看 我们能够把一切我们想要的滑动条的button触发释放 来激活的事件 写在这两个方法里

最重要的检查触发被放在了高一级的类Sliderbase中的CheckTrigger()方法：

private void CheckTrigger()
    {
      if (State == LeapPhysicsState.Interacting) {
      //状态确定
        fireSliderChanged (GetSliderFraction ());
        if (m_dataBinder != null) {
          m_dataBinder.SetCurrentData (GetSliderFraction ());
        }
      }
    }

而最根本的监听来自于一个诡异的方法

private void onStateChanged(object sender, EventArg<LeapPhysicsState> arg) {
      if ( arg.CurrentValue == LeapPhysicsState.Interacting ) {
        sliderPressed();//按下
      }
      else if ( arg.CurrentValue == LeapPhysicsState.Reflecting ) {
        sliderReleased();//释放
      }
    }

EventArg是包括事件数据的类的基类，而onStateChanged()方法中前者是一个对象（事实上这里传递的是对象的引用，如button的click事件则sender就是button，相信有过c#/xaml/winfrom/编程经验得同学都见到过这个使用方法）。后面是包括事件数据的类的基类。

而在这个代码中sender就是leap中的一个对象 后面的基类将状态參数CurrentValue 表达出来

---

讲完了触发那么如今该进一步了

arg.CurrentValue同一时候将改动State的值 这个值相当于整个类中的状态參量 代表button是否被按下

而在这个脚本中 还要依据state的值来进行很多其它的操作

 public enum LeapPhysicsState
  {
    Interacting, //手指等  触发button
    Reflecting, //模拟物理特性 从触发被改变回到预置位置
    Disabled // 关闭（正常）状态
  }

.Enum 类型是全部枚举类型的抽象基类（它是一种与枚举类型的基础类型不同的独特类型）

这里用到enum来准确描写叙述状态 使得代码清晰易懂 易于维护

所以 当我们找到FixedUpdate中的UpdateGraphics()方法后

private void UpdateGraphics()
  {
    float handleFraction = GetHandleFraction();
    Vector3 topPosition = transform.localPosition;
    topPosition.x = 0f;
    topPosition.y = 0f;
    topPosition.z -= (1.0f - handleFraction) * 0.25f;
    topPosition.z = Mathf.Min(topPosition.z, -0.003f); // -0.003 为保证dots和top永不相交的中间层
    topLayer.transform.localPosition = topPosition;

    Vector3 botPosition = transform.localPosition;
    botPosition.x = 0f;
    topPosition.y = 0f;
    botPosition.z = -0.001f;
    botLayer.transform.localPosition = botPosition;

    midLayer.transform.localPosition = (topPosition + botPosition) / 2.0f;
//___________________________________________________________________
    if (activeBar)
    {
      UpdateActiveBar();//激活
    }
    //______________________________________________________________________
    if (numberOfDots > 0)
    {
      UpdateDots();//依据bot的位置推断
    }
  }

---

在此我们仅仅从Dot展开去讲 由于其它的过程基本上是 八九不离十

在

private void UpdateDots()
  {
    for (int i = 0; i < dots.Count; ++i)
    {//dot的数量  依据此位置dot的x坐标 和 top的x轴自身坐标对照推断 来逐个绘制 小于高亮  大于常亮
      if (dots[i].transform.localPosition.x < transform.localPosition.x)
      {
        Renderer[] renderers = dots[i].GetComponentsInChildren<Renderer>();
        foreach (Renderer renderer in renderers)
        {
          renderer.material.color = DotsOnColor;
          renderer.material.SetFloat("_Gain", 3.0f);//高亮
        }
      }
      else
      {
        Renderer[] renderers = dots[i].GetComponentsInChildren<Renderer>();
        foreach (Renderer renderer in renderers)
        {
          renderer.material.color = DotsOffColor;
          renderer.material.SetFloat("_Gain", 1.0f);//常亮
        }
      }
    }
  }

---

而我们在先前的inspector中也看到了DotsOnColor/DotsOffColor

在其它部分的调用中 和Dots的绘制如出一辙 基本都是结合状态參量来进行推断 比如

 public void SetWidgetValue(float value) {
      if ( State == LeapPhysicsState.Interacting || State == LeapPhysicsState.Disabled ) { return; } // 使得状态在交互过程中稳定
      SetPositionFromFraction (value);
    }

那么最后来看这个LeapPhysicsBase类中state的终极目的：

    protected virtual void FixedUpdate()
    {
      if (m_target == null && State == LeapPhysicsState.Interacting)
      {
        State = LeapPhysicsState.Reflecting;
      }

      switch (State)
      {
        case LeapPhysicsState.Interacting://交互状态
          ApplyInteractions();
          break;
        case LeapPhysicsState.Reflecting://从交互状态返回正常状态
          ApplyPhysics();
          break;
        case LeapPhysicsState.Disabled://关闭（正常）状态
          break;
        default:
          break;
      }
      ApplyConstraints();
    }

这是一个大写的清晰明了 之前对State枚举类型在这里一下就亮了

用Switch来确定状态执行相应状态的方法集

至此 总分总式的把Solider说完了 已经 洋洋洒洒的说了1w字了 那么 我就继续吧

滚轮/表盘（Dial）

照例先看图：

---

从trigger的网格来看就非常的复杂 所以要是自己想设计一个这样的手势操作的UI组件 能够说难度非常大

而且 坦白说 这个组件假设不经过自己定义或者改动非常的华而不实 由于 他的选项实在是太多了 多到你手退出操作区域的时候 都会产生误操作

那么我们就先从可见外观结构说起

---

1.picker//选择器

2.maskpanel//荫罩面

3.backpanel //背景面

更进一步：

从这開始就開始有意思了起来

首先 这是两个collider 小的这个被设置为滚轮上的字在这个区域被显示为高亮（HighLight）

HilightTextVolume这个类中 清晰的表明了这一点 通过 触发器trigger的三个函数 巧妙的控制了字体的高亮显示

   //进入
   void OnTriggerEnter(Collider other) {
        Text text = other.GetComponentInChildren<Text>();
      if (text == null) { return; }
        text.color = Color.white;
    }
  //保持
    void OnTriggerStay(Collider other){
        Text text = other.GetComponentInChildren<Text>();
      if (text == null) { return; }
        text.color = Color.white;
        CurrentHilightValue = text.text;
    }
    //离开
    void OnTriggerExit(Collider other) {
      Text text = other.GetComponentInChildren<Text> ();
      if (text == null) { return; }
      text.color = textColor;
    }

这给我们提供了一个设计技巧 对于UI设计提升期的童鞋来说 是个相当实用的模式

进入->保持->离开

|________________|

而之后的用于隐藏的collider原理差点儿一致在DatePickerHideVolume类中：

    void OnTriggerEnter(Collider other) {
    Text text = other.GetComponentInChildren<Text> ();
    if (text == null) { return; }
    text.enabled = false;//设置隐藏
    }

    void OnTriggerExit(Collider other) {
    Text text = other.GetComponentInChildren<Text> ();
    if (text == null) { return; }
    text.enabled = true;//设置显示
    }

那个大的collider 被放在转盘的圆心位置 所以转盘总有一半是被隐藏的 这样就保证了前视的时候后面的文字不会对前面的造成干扰

都是利用触发器来实现 可是还有个

比較有趣

的问题 再来看图

我们发现 从下到上 文字的透明度越高这是怎么做到的呢？

首先 定义了一条曲线

public AnimationCurve FadeCurve;

---

在曲线之后通过曲线来计算 透明值

    float opacityMod = FadeCurve.Evaluate(referenceDotDirection);//计算不透明度模
    float goalOpacity = m_originalLabelOpacity * opacityMod;//目标透明度

      foreach(Text textComponent in m_textLabels) {
      //遍历设定
      Color textColor = textComponent.color;
      textColor.a = goalOpacity;//对文字颜色的Alpha通道进行改动
      textComponent.color = textColor;
    }

---

讲完了这个外在 再来讲内在的控制部分

准备好受虐吧 这部分我也不太懂了 所以我尽量说我的理解 有错误请指出

先是生成label

public List< string > DialLabels;

---

依据字符串List的数量来生成label 这个数量我们当然能够确定 所以 我们想使用这个控件 的话

当然 应该使得这个list.count的数量趋近合理 这样不仅使得控件简洁明了 还是得交互变得更easy 准确性更高

 private void generateAndLayoutLabels() {
      float currentLayoutXAngle = LabelAngleRangeStart;

      for( int i=1; i<=DialLabels.Count; i++ ) {
        Transform labelPrefab = Instantiate(LabelPrefab, DialCenter.transform.position, transform.rotation) as Transform;

        //生成

        labelPrefab.Rotate(currentLayoutXAngle, 0f, 0f);
        LabelAngles.Add (-currentLayoutXAngle);
        labelPrefab.parent = DialCenter;
        labelPrefab.localScale = new Vector3(1f, 1f, 1f);
        Text labelText = labelPrefab.GetComponentInChildren<Text>();
        labelText.text = DialLabels[i - 1];
        DialLabelAngles.Add(DialLabels[i - 1], -currentLayoutXAngle);
        labelText.transform.localPosition = new Vector3(0f, 0f, -DialRadius);
        currentLayoutXAngle = ((Mathf.Abs(LabelAngleRangeStart) + Mathf.Abs(LabelAngleRangeEnd))/(DialLabels.Count)) * -i;

        //调整
      }

      LabelPrefab.gameObject.SetActive(false); // Turn off the original prefab that was copied.
    }

開始句柄

更改句柄

结束句柄

 //模拟交互的句柄
    public event EventHandler<EventArg<int>> ChangeHandler;
    public event EventHandler<EventArg<int>> StartHandler;
    public event EventHandler<EventArg<int>> EndHandler;

当然触发检測是不可缺少的

        void OnTriggerEnter (Collider other)
        {
          if (target_ == null && IsHand (other)) {
          //像之前一样确定触发体是手
            target_ = other.gameObject;//旋转角
            pivot_ = transform.InverseTransformPoint (target_.transform.position) - transform.localPosition;//旋转轴心
            if (GetComponent<Rigidbody>().isKinematic == false)
              transform.GetComponent<Rigidbody>().angularVelocity = Vector3.zero;
            interacting_ = true;
            if (dialGraphics)
              dialGraphics.HilightDial ();
          }
        }

        void OnTriggerExit (Collider other)
        {
          if (other.gameObject == target_) {
            EndInteraction ();//结束交互
          }
        }

从触发检測部分计算出的目标角度和旋转轴心 然后我们找到应用的方法

    protected virtual void ApplyRotations ()
    {
    //旋转至目标角度
      Vector3 curr_direction = transform.InverseTransformPoint (target_.transform.position) - transform.localPosition;
      //轴心
      transform.localRotation = Quaternion.FromToRotation (pivot_, curr_direction) * transform.localRotation;
    }

而这一切都在基类的FixedUpdate()中执行

    void FixedUpdate ()
    {
      if (target_ == null && interacting_) {
        // 当交互时手已经被销毁

        EndInteraction ();//结束交互
      }
      if (target_ != null) {
        ApplyRotations ();//应用旋转
      }
      ApplyConstraints ();//应用约束以保证交互结束后 返回相应位置
    }

---

至此 一些零碎的约束我已经无力再写下去了 就来归纳一下组件共有的一些特性：

1.触发检測用于检測手和组件的交互 同一时候一般返回 ：

触发初始信息

触发过程信息

触发结束信息

2.约束条件：

一般含有交互产生的改变量

交互后依据规则的对改变量的推断

对推断结果的执行

3.精巧状态：

一般含有系统用于初始化的初始量

对于不产生交互状态下的静态量

一般为产生触发后约束条件的结果

---

至此

我们讲完了全部四个预置控件的结构与应用方法

为我们在unity3D引擎中设计 VR/AR环境下的交互逻辑铺平了道路；

可是非常明显的是 在VR环境中设计交互操作明显有一定的方法论 触发设计。特效设计，逻辑设计每一个部分单独拿出来都能够写一本书 而且在讲求经验的情况下 这和曾经的UI设计相去甚远 平面UI的难度由于操控体系的健全而变得较为easy 但在三维环境下 不管是对手的模拟 还是对现实环境的模拟 都使得UI设计变得没有统一规则

你能够虚拟出一个平面实现来类触屏操作而套用平面UI的设计方法

更能够通过虚拟物体来体现虚拟现实技术的优势 这就使得设计变得无限可能

这两种方式并没有优劣之分 各个应用环境之下 恰当的採用 效果才是最佳的。

---

最后 由于这系列文章过长 因此下次更新可能会在较长之后了（都是眼泪）。

Bye~ See you next month~