分析分析一些常见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即可。
挑战:导航回标题界面
挑战一下,实现从设置菜单点击退出按钮后返回标题界面的功能。返回标题界面后,需要重新显示标题和设置按钮。