? ? ? ? UI（User Interface，用戶接口），是讓用戶和計(jì)算機(jī)或計(jì)算機(jī)應(yīng)用交互的接口系統(tǒng)。

? ? ? ? ?在實(shí)時(shí)3D項(xiàng)目中，UI通常是由文本、按鈕、復(fù)選框、滑動(dòng)條和單選框等組合出來(lái)的界面。這些元素使用特定規(guī)則或通知和用戶進(jìn)行交互。

UI設(shè)計(jì)是什么

UI設(shè)計(jì)是什么？

? ? ? ? UI設(shè)計(jì)是將圖形UI（GUI）元素以有吸引力同時(shí)又很直觀的方式進(jìn)行布局的過(guò)程。UI應(yīng)該要清晰、一致、易用和吸引人的。當(dāng)我們使用了設(shè)計(jì)良好的UI時(shí)，體驗(yàn)會(huì)是無(wú)縫并且愉悅的。

? ? ? ? 如果我們?cè)谑褂肬I的時(shí)候，并不會(huì)特別地去想U(xiǎn)I元素本身，那這種UI設(shè)計(jì)通常來(lái)說(shuō)是一種好的設(shè)計(jì)。

? ? ? ? 下面的例子來(lái)自于《Last Day on Earth》。在游戲過(guò)程中，UI并不會(huì)將玩家注意力奪走。

UI設(shè)計(jì)不是什么？

? ? ? ? 當(dāng)我們將UI設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)（user experience）以及用戶交互（user interaction）設(shè)計(jì)這兩個(gè)詞語(yǔ)放到一起考慮時(shí)，定義UI設(shè)計(jì)就會(huì)比較讓人困惑了。

? ? ? ? 看看下圖，體會(huì)一下這幾個(gè)概念的聯(lián)系和區(qū)別。

? ? ? ? User experience設(shè)計(jì)（UX）

? ? ? ? ? ? ? ? 問(wèn)題：用戶體驗(yàn)旅程（user journey）是什么？

? ? ? ? ? ? ? ? 目標(biāo)：確保從始至終產(chǎn)品能帶來(lái)正向的體驗(yàn)。

? ? ? ? User interaction設(shè)計(jì)（IxD）

? ? ? ? ? ? ? ? 問(wèn)題：用戶需要什么來(lái)達(dá)成他們的目標(biāo)？

? ? ? ? ? ? ? ? 目標(biāo)：讓用戶以最高效的方式達(dá)成他們的目標(biāo)。

? ? ? ? ? ? ? ? IxD設(shè)計(jì)是UX設(shè)計(jì)的一部分。

? ? ? ? User Interface設(shè)計(jì)（UI）

? ? ? ? ? ? ? ? 問(wèn)題：屏幕上的UI元素看起來(lái)應(yīng)該是什么樣？

? ? ? ? ? ? ? ? 目標(biāo)：讓接口易于理解，易于使用，不對(duì)用戶體驗(yàn)造成影響。

? ? ? ? ? ? ? ? UI設(shè)計(jì)是IxD的一部分，IxD設(shè)計(jì)是UX設(shè)計(jì)的一部分。

? ? ? ? Information architecture

? ? ? ? ? ? ? ? 問(wèn)題：信息應(yīng)該如何被組織？

? ? ? ? ? ? ? ? 目標(biāo) ：內(nèi)容組織方式為：用戶能夠在需要信息的時(shí)候，用戶能知道在哪里去找到這些信息。

? ? ? ? ? ? ? ? 對(duì)UI設(shè)計(jì)，IxD設(shè)計(jì)和UX設(shè)計(jì)有影響。

? ? ? ? Visual design

? ? ? ? ? ? ? ? 問(wèn)題：視覺(jué)上什么看起來(lái)最好？

? ? ? ? ? ? ? ? 目標(biāo)：讓東西看起來(lái)有吸引力。

????????????????對(duì)UI設(shè)計(jì)，IxD設(shè)計(jì)和UX設(shè)計(jì)有影響。

? ? ? ? 這些規(guī)則之間的明確的不同之處并沒(méi)有清晰的共識(shí)，但我們要知道這些概念在更高層次上是如何相互聯(lián)系的。

牛刀小試：誰(shuí)負(fù)責(zé)做什么？

? ? ? ? 接下來(lái)，我們做一個(gè)簡(jiǎn)單的練習(xí)。下面有一張截圖來(lái)自一個(gè)動(dòng)作RPG的裝備菜單UI。

? ? ? ? 為了達(dá)到圖中所展示的成品的效果，假設(shè)下面的每個(gè)方面都有一個(gè)專門的人進(jìn)行相關(guān)工作，那么他們的職責(zé)是什么？

What might have been the responsibility of someone working in each of the following disciplines in order to arrive at the final product shown above?

• User experience design
  

• Interaction design
  

• User interface design
  

• Information architecture
  

• Visual design

? ? ? ? 以下信息僅供參考：

? ? ? ? User experience:：確保用戶能夠體驗(yàn)到裝備物品是有趣和滿足的。

? ? ? ? Interaction design：確保用戶能夠在兩次或更少點(diǎn)擊次數(shù)下裝備或使用物品。

? ? ? ? User Interface：設(shè)計(jì)圖標(biāo)和接口布局，以便讓所有東西看起來(lái)清晰。

? ? ? ? Information architecture：決定是否有需要將可以裝備的物品和不可裝備的物品區(qū)分開來(lái)。

? ? ? ? Visual design：為背景和字體選擇最佳的顏色。

準(zhǔn)備工作

? ? ? ? 資源包：
????????https://connect-prd-cdn.unity.com/20230208/ab0d1fd9-8bf9-40ba-98c8-28f9813e33fc/creativecore-ui-2021.3LTS.zip

???????下載后，解壓ZIP文件，然后通過(guò)Unity Hub打開本地工程，參考這里：? ? ??????

????????https://learn.unity.com/tutorial/project-setup-processes#60ed7a5aedbc2a002520b6ea

? ? ? 打開工程后，在工程窗口中找到Assets > CreativeCore_UI > Scenes目錄，打開場(chǎng)景TutorialScene_UI_Outdoor。這個(gè)場(chǎng)景中有一個(gè)路燈。

個(gè)性化背景

? ? ? ? 運(yùn)行場(chǎng)景，可以看到UI的背景是什么樣子。標(biāo)題和菜單會(huì)在背景之上出現(xiàn)。如果并不關(guān)心項(xiàng)目本身看起來(lái)的樣子，你可以跳過(guò)這個(gè)步驟，保持現(xiàn)有的樣子即可。

? ? ? ? 但如果你想要個(gè)性化你的UI場(chǎng)景，可以花點(diǎn)時(shí)間調(diào)整一下相機(jī)位置，場(chǎng)景中的物體擺放等。這一步自由發(fā)揮即可，下面是幾個(gè)例子。

該使用哪種UI系統(tǒng)？

? ? ? ? 在新增UI元素前，我們需要知道在Unity中實(shí)際上有三種完全獨(dú)立的系統(tǒng)用于開發(fā)UI。uGUI，IMGUI以及UI Toolkit。

? ? ? ? uGUI（Unity UI）是用于開發(fā)游戲內(nèi)接口的穩(wěn)定的UI系統(tǒng)。它是最常用的系統(tǒng)，基本上你能遇到的Unity項(xiàng)目都有它的影子。

? ? ? ? IMGUI（Immediate Mode GUI）是一個(gè)基于代碼的系統(tǒng)，主要是給程序員來(lái)為Unity Editor本身創(chuàng)建調(diào)試工具和自定義Inspector的。對(duì)于面向用戶的UI來(lái)說(shuō)不太涉及。

? ? ? ? UI Toolkit是一個(gè)新系統(tǒng)，最終目的是想成為Unity里面主要的開發(fā)UI的系統(tǒng)，目標(biāo)是包含uGUI和IMGUI的所有特性。但這個(gè)系統(tǒng)目前仍在開發(fā)中。

? ? ? ? 關(guān)于每種系統(tǒng)的更多細(xì)節(jié)，可參考Unity官方文檔：

????????Unity - Manual: Comparison of UI systems in Unity

????????https://docs.unity3d.com/2020.1/Documentation/Manual/UI-system-compare.html? ? ? ??

????????本專題使用uGUI。