分析分析一些常见UI

良好的UI设计会清晰地和用户沟通。用户知道他们能和屏幕上哪些东西交互，哪些不能。如果他们进行了交互，他们也要清楚地知道交互是否成功。换句话说，UI要提供给用户很多反馈。

我们可以来看看在Unity里或者在计算机上的任何应用程序：

(资料图片仅供参考)

将鼠标悬停在一个按钮上，会发生什么？

选择一个按钮会发生什么？

当一个物体被选中，你是怎么知道它被选中的？

下面是一些实例:

当鼠标悬停在Google Docs里的Edit按钮时，按钮底色会加深，让其更加显目。当然在某些应用中，改变的是文字的颜色而不是背景色。一般来说，如果按钮是浅色的，则通常在悬停时会让它的颜色变深色以便对比突出。 

如果按钮本身是深色的，则通常会让其变成浅色。

当我们点击或选中了一个按钮，它会再次变色，通常会是一个更加醒目的颜色。

我们可以尝试观察一下电脑上的其他应用程序的UI的相关变化。

编辑按钮的颜色转换

Unity允许我们控制按钮的颜色反馈，以便更好地和用户沟通。

1. 保持Settings Button游戏物体处于选中状态，在Button组件中定位到Transition属性。这个属性默认值应该是Color Tint。

当使用Color Tint时，当用户和按钮交互时，按钮的颜色可以发生变化。我们也可以使用Sprite Swap在进行交互时改变按钮所使用的的图片，或者使用Animation选项播放自定义的按钮动画。

下图展示了Color Tint方式的默认颜色配置：

Normal Color：纯白。表示按钮在普通状态下的颜色。

Highlighted Color： 对比Normal Color，只有一点点灰（具体数值可以点击颜色条查看）。当用户悬停在按钮上时的颜色。

Pressed Color：更加醒目的灰色。用户按住按钮时的颜色（比如鼠标按下不放）。

Selected Color：和Highlighted Color一样的颜色。当用户点击了按钮后的颜色，如果用户再次点击了其它按钮或屏幕的空白处，则按钮会恢复到Normal Color。本案例中这个颜色没有什么作用，因为后面我们实现的功能是当设置按钮被点击后，按钮会隐藏。

Disabled Color：深灰色。当按钮被禁用时的颜色。本案例中不涉及这种颜色的使用。

Color Multiplier：增加按钮上颜色色调的效果。如果我们有一个深色按钮或半透明按钮，这个属性会比较有帮助。

2. 运行场景，和设置按钮进行交互看看效果。

在Play模式中，可以尝试去改改这些颜色，看看效果。

增加On Click事件的action

接下来我们让应用能响应用户的点击。本案例中，用户可以通过点击设置按钮进入设置菜单界面。

当用户点击了设置按钮时，设置菜单会出现。

当用户点击了设置菜单里的退出按钮时，会返回标题界面。

首先我们来完成点击设置按钮，进入设置菜单的功能。

1. 在Hierarchy中，激活Title Text和Settings Button游戏物体，关闭Settings Menu游戏物体（可以右键点击此物体选择Toggle Active state，也可以选中游戏物体后在Inspector中的勾选或去勾选最上面的复选框）。

现在设置菜单会被隐藏掉。

2. 选择Settings Button，在Button组件中定位到On Click()部分。 

在On Click框中，我们会看到“List is Empty"。这意味着当按钮被选择时（点击），不会发生任何事情。

On Click是一个UnityEvent。UnityEvents可以在特定事件发生时，触发任意数量的动作。在本案例中，“Event”是指按钮的点击。

3. 选择“+”按钮，添加一个新的动作。

默认情况下，action是空的。

在设置按钮被点击时让设置菜单出现

为一个UnityEvent选择一个功能有两步：

1. 选择我们要执行功能的物体。

2. 从这个物体中选择一个我们想要执行的功能。

默认情况下，Object字段没有赋值，显示的是None(Object)。由于我们想要的是设置菜单出现，因此我们要将它赋值到这里。

1. 在Hierarchy中，点击并拖拽Settins Menu游戏物体到前面说的空Object字段。

我们会看到No Funtion下拉菜单现在会可用。No Funtion意味着还没有从这个物体中选任何功能。我们现在要选择我们希望在按钮点击事件发生时，要使用Settings Menu的哪个功能（也叫函数，方法，动作）。

2. 在No Funtion处的下拉菜单中选择GameObject > SetActive(bool)。当我们在这个菜单中进行查看时，实际是浏览了在这个物体上关联的脚本中的可用的功能方法。

选择了GameObject > SetActive(bool)之后，意思是当按钮被点击时，执行GameObject脚本里的SetAvctive函数。

现在我们会注意到，在Settings Menu物体右边会出现一个小的复选框。

由于我们所选择的SetAcive(boiol)函数，需要一个布尔值作为输入参数，因此这里的复选框就表示了这个布尔值。由于我们想要设置菜单变为Active，因此这个布尔值应该为true。

3. 将这个复选框勾选上，表示我们会传递true到SetAcive()函数，让设置菜单变为Active。

运行场景看看，当我们点击设置按钮时，设置菜单会出现，但设置菜单可能会覆盖在标题上面（取决于你自己所定义的设置菜单位置和大小）。我们想要的效果是进入设置菜单后标题和设置按钮就不显示了。

让标题和设置按钮消失

当我们点击设置按钮时，我们同时希望标题和设置按钮也消失。这可以通过和上一小节中的类似的方法实现。添加两个On Click的功能函数，分别选择Settings Button和Title Text物体，并且这次将SetActive的参数设置为false即可。

挑战：导航回标题界面

挑战一下，实现从设置菜单点击退出按钮后返回标题界面的功能。返回标题界面后，需要重新显示标题和设置按钮。