当前位置: 首页 > news >正文

Unity UI -- (1)概览

        UI(User Interface,用户接口),是让用户和计算机或计算机应用交互的接口系统。

         在实时3D项目中,UI通常是由文本、按钮、复选框、滑动条和单选框等组合出来的界面。这些元素使用特定规则或通知和用户进行交互。

UI设计是什么

UI设计是什么?

        UI设计是将图形UI(GUI)元素以有吸引力同时又很直观的方式进行布局的过程。UI应该要清晰、一致、易用和吸引人的。当我们使用了设计良好的UI时,体验会是无缝并且愉悦的。

        如果我们在使用UI的时候,并不会特别地去想UI元素本身,那这种UI设计通常来说是一种好的设计。

        下面的例子来自于《Last Day on Earth》。在游戏过程中,UI并不会将玩家注意力夺走。

UI设计不是什么?

        当我们将UI设计和用户体验设计(user experience)以及用户交互(user interaction)设计这两个词语放到一起考虑时,定义UI设计就会比较让人困惑了。

        看看下图,体会一下这几个概念的联系和区别。

        User experience设计(UX)

                问题:用户体验旅程(user journey)是什么?

                目标:确保从始至终产品能带来正向的体验。

        User interaction设计(IxD)

                问题:用户需要什么来达成他们的目标?

                目标:让用户以最高效的方式达成他们的目标。

                IxD设计是UX设计的一部分。

        User Interface设计(UI)

                问题:屏幕上的UI元素看起来应该是什么样?

                目标:让接口易于理解,易于使用,不对用户体验造成影响。

                UI设计是IxD的一部分,IxD设计是UX设计的一部分。

        Information architecture

                问题:信息应该如何被组织?

                目标 :内容组织方式为:用户能够在需要信息的时候,用户能知道在哪里去找到这些信息。

                对UI设计,IxD设计和UX设计有影响。

        Visual design

                问题:视觉上什么看起来最好?

                目标:让东西看起来有吸引力。

                对UI设计,IxD设计和UX设计有影响。

        这些规则之间的明确的不同之处并没有清晰的共识,但我们要知道这些概念在更高层次上是如何相互联系的。

牛刀小试:谁负责做什么?

        接下来,我们做一个简单的练习。下面有一张截图来自一个动作RPG的装备菜单UI。

        为了达到图中所展示的成品的效果,假设下面的每个方面都有一个专门的人进行相关工作,那么他们的职责是什么?

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::确保用户能够体验到装备物品是有趣和满足的。

        Interaction design:确保用户能够在两次或更少点击次数下装备或使用物品。

        User Interface:设计图标和接口布局,以便让所有东西看起来清晰。

        Information architecture:决定是否有需要将可以装备的物品和不可装备的物品区分开来。

        Visual design:为背景和字体选择最佳的颜色。

准备工作

        资源包:
https://connect-prd-cdn.unity.com/20230208/ab0d1fd9-8bf9-40ba-98c8-28f9813e33fc/creativecore-ui-2021.3LTS.ziphttps://connect-prd-cdn.unity.com/20230208/ab0d1fd9-8bf9-40ba-98c8-28f9813e33fc/creativecore-ui-2021.3LTS.zip        下载后,解压ZIP文件,然后通过Unity Hub打开本地工程,参考这里:     Project setup processes - Unity LearnThis is a guide through common processes you may need to set-up a Unity project to complete one of our tutorials.https://learn.unity.com/tutorial/project-setup-processes#60ed7a5aedbc2a002520b6ea

      打开工程后,在工程窗口中找到Assets > CreativeCore_UI > Scenes目录,打开场景TutorialScene_UI_Outdoor。这个场景中有一个路灯。

个性化背景

        运行场景,可以看到UI的背景是什么样子。标题和菜单会在背景之上出现。如果并不关心项目本身看起来的样子,你可以跳过这个步骤,保持现有的样子即可。

        但如果你想要个性化你的UI场景,可以花点时间调整一下相机位置,场景中的物体摆放等。这一步自由发挥即可,下面是几个例子。

该使用哪种UI系统?

        在新增UI元素前,我们需要知道在Unity中实际上有三种完全独立的系统用于开发UI。uGUI,IMGUI以及UI Toolkit。

        uGUI(Unity UI)是用于开发游戏内接口的稳定的UI系统。它是最常用的系统,基本上你能遇到的Unity项目都有它的影子。

        IMGUI(Immediate Mode GUI)是一个基于代码的系统,主要是给程序员来为Unity Editor本身创建调试工具和自定义Inspector的。对于面向用户的UI来说不太涉及。

        UI Toolkit是一个新系统,最终目的是想成为Unity里面主要的开发UI的系统,目标是包含uGUI和IMGUI的所有特性。但这个系统目前仍在开发中。

        关于每种系统的更多细节,可参考Unity官方文档:

Unity - Manual: Comparison of UI systems in Unityhttps://docs.unity3d.com/2020.1/Documentation/Manual/UI-system-compare.html        本专题使用uGUI。

http://www.lryc.cn/news/67948.html

相关文章:

  • 玩转 LLMs 之基础设施「利刃出鞘」
  • WPF MaterialDesign 初学项目实战(1)首页搭建
  • 【纳什博弈、ADMM】基于纳什博弈和交替方向乘子法的多微网主体能源共享研究(Matlab代码实现)
  • 每日学术速递5.8
  • ChatGPT时代:我们可能站到了自然语言编程的大门口
  • 关于不同处理器的函数调用规则
  • Rust Wasm Linux开发环境搭建
  • 【项目设计】 负载均衡在线OJ系统
  • 【服务器】无公网IP,异地远程连接威联通NAS
  • 在中国,年收入20W是什么水平?答案扎心了(文末附最新招聘)
  • navicat连接oracle报错 ORA-28547
  • 量化指标WR:弱的确是弱,但是老Q会魔改啊!
  • 生物信息学知识点
  • 14.贪心算法
  • 你知道营销人为什么要讲洞察吗?
  • Neovim-配置教程
  • Windows管理内存的3种方式——堆、虚拟内存、共享内存
  • PCM/FM解调原理与Matlab算法仿真
  • 我的『1024』创作纪念日
  • Python ---> 衍生的数据技术
  • 【27】linux进阶——rpm软件包的管理
  • HTTP第六讲——键入网址再按下回车,后面究竟发生了什么?
  • layui目录和项目引入
  • Ubuntu22.04 将EFI启动分区迁移到另一块硬盘
  • 只要学会这些AI工具,一个人就是一家营销咨询公司
  • [离散数学] 函数
  • 好家伙,又一份牛逼笔记面世了...
  • 基于nodejs+vue3 的高仿网易云音乐
  • MySQL数据库用户管理以及数据库用户授权
  • 全面分析生物技术的优缺点以及应用场景