分析分析一些常見UI

? ? ? ? 良好的UI設(shè)計(jì)會(huì)清晰地和用戶溝通。用戶知道他們能和屏幕上哪些東西交互，哪些不能。如果他們進(jìn)行了交互，他們也要清楚地知道交互是否成功。換句話說，UI要提供給用戶很多反饋。

? ? ? ? 我們可以來看看在Unity里或者在計(jì)算機(jī)上的任何應(yīng)用程序：

• ? ? ? ? 將鼠標(biāo)懸停在一個(gè)按鈕上，會(huì)發(fā)生什么？

• ? ? ? ? 選擇一個(gè)按鈕會(huì)發(fā)生什么？

• ? ? ? ? 當(dāng)一個(gè)物體被選中，你是怎么知道它被選中的？

? ? ? ? 下面是一些實(shí)例:

? ? ? ? 當(dāng)鼠標(biāo)懸停在Google Docs里的Edit按鈕時(shí)，按鈕底色會(huì)加深，讓其更加顯目。當(dāng)然在某些應(yīng)用中，改變的是文字的顏色而不是背景色。一般來說，如果按鈕是淺色的，則通常在懸停時(shí)會(huì)讓它的顏色變深色以便對(duì)比突出。?

? ? ? ? 如果按鈕本身是深色的，則通常會(huì)讓其變成淺色。

? ? ? ? ?當(dāng)我們點(diǎn)擊或選中了一個(gè)按鈕，它會(huì)再次變色，通常會(huì)是一個(gè)更加醒目的顏色。

? ? ? ? ?我們可以嘗試觀察一下電腦上的其他應(yīng)用程序的UI的相關(guān)變化。

編輯按鈕的顏色轉(zhuǎn)換

? ? ? ? Unity允許我們控制按鈕的顏色反饋，以便更好地和用戶溝通。

? ? ? ? 1. 保持Settings Button游戲物體處于選中狀態(tài)，在Button組件中定位到Transition屬性。這個(gè)屬性默認(rèn)值應(yīng)該是Color Tint。

? ? ? ? ? ? 當(dāng)使用Color Tint時(shí)，當(dāng)用戶和按鈕交互時(shí)，按鈕的顏色可以發(fā)生變化。我們也可以使用Sprite Swap在進(jìn)行交互時(shí)改變按鈕所使用的的圖片，或者使用Animation選項(xiàng)播放自定義的按鈕動(dòng)畫。

? ? ? ? ? ? 下圖展示了Color Tint方式的默認(rèn)顏色配置：

? ? ? ? ? ? ? ? Normal Color：純白。表示按鈕在普通狀態(tài)下的顏色。

? ? ? ? ? ? ? ? Highlighted Color：?對(duì)比Normal Color，只有一點(diǎn)點(diǎn)灰（具體數(shù)值可以點(diǎn)擊顏色條查看）。當(dāng)用戶懸停在按鈕上時(shí)的顏色。

? ? ? ? ? ? ? ? Pressed Color：更加醒目的灰色。用戶按住按鈕時(shí)的顏色（比如鼠標(biāo)按下不放）。

? ? ? ? ? ? ? ? Selected Color：和Highlighted Color一樣的顏色。當(dāng)用戶點(diǎn)擊了按鈕后的顏色，如果用戶再次點(diǎn)擊了其它按鈕或屏幕的空白處，則按鈕會(huì)恢復(fù)到Normal Color。本案例中這個(gè)顏色沒有什么作用，因?yàn)楹竺嫖覀儗?shí)現(xiàn)的功能是當(dāng)設(shè)置按鈕被點(diǎn)擊后，按鈕會(huì)隱藏。

? ? ? ? ? ? ? ? Disabled Color：深灰色。當(dāng)按鈕被禁用時(shí)的顏色。本案例中不涉及這種顏色的使用。

? ? ? ? ? ? ? ? Color Multiplier：增加按鈕上顏色色調(diào)的效果。如果我們有一個(gè)深色按鈕或半透明按鈕，這個(gè)屬性會(huì)比較有幫助。

? ? ? ? 2. 運(yùn)行場(chǎng)景，和設(shè)置按鈕進(jìn)行交互看看效果。

? ? ? ? ? ? 在Play模式中，可以嘗試去改改這些顏色，看看效果。

增加On Click事件的action

? ? ? ? 接下來我們讓應(yīng)用能響應(yīng)用戶的點(diǎn)擊。本案例中，用戶可以通過點(diǎn)擊設(shè)置按鈕進(jìn)入設(shè)置菜單界面。

? ? ? ? 當(dāng)用戶點(diǎn)擊了設(shè)置按鈕時(shí)，設(shè)置菜單會(huì)出現(xiàn)。

? ? ? ? 當(dāng)用戶點(diǎn)擊了設(shè)置菜單里的退出按鈕時(shí)，會(huì)返回標(biāo)題界面。

? ? ? ? 首先我們來完成點(diǎn)擊設(shè)置按鈕，進(jìn)入設(shè)置菜單的功能。

? ? ? ? 1. 在Hierarchy中，激活Title Text和Settings Button游戲物體，關(guān)閉Settings Menu游戲物體（可以右鍵點(diǎn)擊此物體選擇Toggle Active state，也可以選中游戲物體后在Inspector中的勾選或去勾選最上面的復(fù)選框）。

? ? ? ? ? ? 現(xiàn)在設(shè)置菜單會(huì)被隱藏掉。

? ? ? ? 2. 選擇Settings Button，在Button組件中定位到On Click()部分。?

? ? ? ? ? ? 在On Click框中，我們會(huì)看到“List is Empty"。這意味著當(dāng)按鈕被選擇時(shí)（點(diǎn)擊），不會(huì)發(fā)生任何事情。

? ? ? ? ? ? On Click是一個(gè)UnityEvent。UnityEvents可以在特定事件發(fā)生時(shí)，觸發(fā)任意數(shù)量的動(dòng)作。在本案例中，“Event”是指按鈕的點(diǎn)擊。

? ? ? ? 3. 選擇“+”按鈕，添加一個(gè)新的動(dòng)作。

? ? ? ? ? ? 默認(rèn)情況下，action是空的。

在設(shè)置按鈕被點(diǎn)擊時(shí)讓設(shè)置菜單出現(xiàn)

? ? ? ? 為一個(gè)UnityEvent選擇一個(gè)功能有兩步：

? ? ? ? ????????1. 選擇我們要執(zhí)行功能的物體。

? ? ? ? ????????2. 從這個(gè)物體中選擇一個(gè)我們想要執(zhí)行的功能。

? ? ? ? 默認(rèn)情況下，Object字段沒有賦值，顯示的是None(Object)。由于我們想要的是設(shè)置菜單出現(xiàn)，因此我們要將它賦值到這里。

? ? ? ? 1. 在Hierarchy中，點(diǎn)擊并拖拽Settins Menu游戲物體到前面說的空Object字段。

? ? ? ? ? ? 我們會(huì)看到No Funtion下拉菜單現(xiàn)在會(huì)可用。No Funtion意味著還沒有從這個(gè)物體中選任何功能。我們現(xiàn)在要選擇我們希望在按鈕點(diǎn)擊事件發(fā)生時(shí)，要使用Settings Menu的哪個(gè)功能（也叫函數(shù)，方法，動(dòng)作）。

? ? ? ? 2. 在No Funtion處的下拉菜單中選擇GameObject > SetActive(bool)。當(dāng)我們?cè)谶@個(gè)菜單中進(jìn)行查看時(shí)，實(shí)際是瀏覽了在這個(gè)物體上關(guān)聯(lián)的腳本中的可用的功能方法。

? ? ? ? ? ? 選擇了GameObject > SetActive(bool)之后，意思是當(dāng)按鈕被點(diǎn)擊時(shí)，執(zhí)行GameObject腳本里的SetAvctive函數(shù)。

? ? ? ? ? ? 現(xiàn)在我們會(huì)注意到，在Settings Menu物體右邊會(huì)出現(xiàn)一個(gè)小的復(fù)選框。

? ? ? ? ? ? 由于我們所選擇的SetAcive(boiol)函數(shù)，需要一個(gè)布爾值作為輸入?yún)?shù)，因此這里的復(fù)選框就表示了這個(gè)布爾值。由于我們想要設(shè)置菜單變?yōu)锳ctive，因此這個(gè)布爾值應(yīng)該為true。

? ? ? ? 3. 將這個(gè)復(fù)選框勾選上，表示我們會(huì)傳遞true到SetAcive()函數(shù)，讓設(shè)置菜單變?yōu)锳ctive。

? ? ? ? ?運(yùn)行場(chǎng)景看看，當(dāng)我們點(diǎn)擊設(shè)置按鈕時(shí)，設(shè)置菜單會(huì)出現(xiàn)，但設(shè)置菜單可能會(huì)覆蓋在標(biāo)題上面（取決于你自己所定義的設(shè)置菜單位置和大?。?。我們想要的效果是進(jìn)入設(shè)置菜單后標(biāo)題和設(shè)置按鈕就不顯示了。

讓標(biāo)題和設(shè)置按鈕消失

? ? ? ? 當(dāng)我們點(diǎn)擊設(shè)置按鈕時(shí)，我們同時(shí)希望標(biāo)題和設(shè)置按鈕也消失。這可以通過和上一小節(jié)中的類似的方法實(shí)現(xiàn)。添加兩個(gè)On Click的功能函數(shù)，分別選擇Settings Button和Title Text物體，并且這次將SetActive的參數(shù)設(shè)置為false即可。

挑戰(zhàn)：導(dǎo)航回標(biāo)題界面

? ? ? ? 挑戰(zhàn)一下，實(shí)現(xiàn)從設(shè)置菜單點(diǎn)擊退出按鈕后返回標(biāo)題界面的功能。返回標(biāo)題界面后，需要重新顯示標(biāo)題和設(shè)置按鈕。