基本菜单UI的实现
ui基本概念及流程
UI基本概念及流程=======一、UI基本概念--------UI，即User Interface（用户界面）的简称，是用户与电子设备之间互动的视觉和行为界面。
UI设计旨在提高用户对电子设备的易用性和友好性，通过直观、简洁、易于操作的界面和交互方式，使用户能够高效地完成各种任务。
二、UI设计流程--------1. 需求分析：了解用户需求和产品定位，明确设计目标。
2. 原型设计：根据需求分析结果，制作界面原型，包括布局、色彩、字体等元素。
3. 用户测试：邀请目标用户进行测试，收集反馈，对原型进行优化。
4. 细节设计：完善界面细节，包括按钮、图标、字体等元素的设计。
5. 交互设计：设计用户与界面之间的交互方式，包括动画效果、交互动画等。
6. 方案评审：提交设计方案，进行内部评审和修改。
7. 方案实施：将设计方案转化为实际的产品界面。
8. 上线测试：上线产品并进行测试，收集用户反馈，持续优化设计。
9. 维护更新：根据用户反馈和产品需求，对界面进行维护和更新。
三、UI工具和技术---------1. 设计软件：如Sketch、Adobe XD、Figma等，用于制作界面原型和设计稿。
2. 编程语言：如HTML、CSS、JavaScript等，用于实现界面设计和交互效果。
3. UI组件库：如Bootstrap、Material-UI等，提供可复用的UI组件，提高开发效率。
4. UI动效设计工具：如After Effects、Animate等，用于设计交互动画和动效。
四、UI设计原则--------1. 简洁明了：界面应简洁、易于理解，避免过多的视觉元素和信息。
2. 易于操作：界面应易于操作，避免复杂的操作步骤和手势。
3. 一致性：界面的风格、色彩、字体等元素应保持一致性，提高用户体验。
4. 直观性：界面应直观易懂，使用户能够快速找到所需功能和操作方式。
5. 个性化：界面可根据用户需求和产品定位进行个性化设计，提高用户体验和品牌形象。
UI渲染及显示原理
UI渲染及显示原理UI（用户界面）渲染是指将UI元素（如文本、图像、按钮等）显示在屏幕上的过程。
在计算机图形学中，UI渲染的目标是将数据转化为可视化的内容，并在屏幕上进行显示。
UI显示原理基于图形渲染原理，其中包括两个主要的步骤：几何计算和光栅化。
几何计算是将UI元素的数据转换为图形学中的几何图形。
例如，将一个矩形按钮渲染在屏幕上，首先需要计算出按钮的位置、大小和形状。
这些计算通常是基于坐标系的转换和变换来完成的，可以使用数学公式和矩阵运算来实现。
几何计算还包括确定元素之间的关系，例如按钮是否与其他元素重叠或相互交叉。
光栅化是将几何图形转换为屏幕上的像素点的过程。
在计算机显示中，屏幕是由一个个像素点构成的，每个像素点都有自己的颜色值。
光栅化将几何图形映射到屏幕上的像素点，并将其填充为相应的颜色。
这个过程涉及到像素的采样、插值和颜色计算等操作。
几何计算和光栅化是紧密相连的过程，它们协同工作以实现UI的渲染和显示。
在实际的UI渲染中，还需要考虑许多其他因素，如光照、阴影、透明度等。
此外，还需要考虑到图形硬件和软件的支持，以及优化算法和技术来提高渲染性能。
在现代的UI渲染中，许多框架和库已经提供了高效的渲染引擎。
例如，使用OpenGL或DirectX等图形API可以实现高性能的图形渲染。
这些渲染引擎通常会利用硬件加速和优化算法来提高渲染性能，并提供方便的接口和功能来简化开发过程。
总结起来，UI渲染是将UI元素转化为可视化内容并在屏幕上显示的过程。
它涉及到几何计算和光栅化等步骤，需要考虑各种因素和技术来提高渲染性能。
随着计算机图形学和硬件技术的不断进步，UI渲染的效果和性能也在不断提升。
element-ui 组织架构ui模板
Element-UI 组织架构UI 模板===================Element-UI 是一个基于Vue.js 的组件库，提供了丰富的UI 组件和模板，可以帮助开发者快速构建美观、易用的Web 应用程序。
本文将介绍Element-UI 组织架构UI 模板的设计和功能实现，主要包括顶部导航、左侧菜单、主要内容、页脚、用户中心、通知中心、任务中心和其他页面等方面。
1. 顶部导航-------顶部导航是组织架构UI 模板的重要组成部分，它提供了整个网站的导航条，方便用户快速跳转到不同的页面。
在Element-UI 中，可以通过以下方式实现顶部导航：* 宽度：导航条的宽度可以根据具体需求进行调整，一般占据整个屏幕宽度。
* 按钮配色：导航条中的按钮颜色可以根据品牌色进行调整，一般使用深色背景和亮色文字的搭配。
* 交互反馈：当用户点击导航条中的按钮时，应该出现相应的鼠标悬停效果和点击效果，以增强用户体验。
2. 左侧菜单-------左侧菜单是组织架构UI 模板的另一个重要组成部分，它提供了当前页面下的级联菜单，方便用户快速找到所需内容。
在Element-UI 中，可以通过以下方式实现左侧菜单：* 宽度：菜单栏的宽度可以根据具体需求进行调整，一般占据整个屏幕宽度的三分之一左右。
* 菜单项配色：菜单项的颜色和字体可以根据品牌色进行调整，一般使用浅色背景和深色文字的搭配。
* 交互反馈：当用户展开或收起菜单项时，应该出现相应的动画效果和声音提示，以增强用户体验。
3. 主要内容-------主要内容是组织架构UI 模板的核心部分，它根据不同的页面展示不同的内容，包括但不限于首页、详情页、列表页、搜索页、添加页和设置页等。
在Element-UI 中，可以通过以下方式实现主要内容：* 尺寸：主要内容区域的尺寸可以根据具体需求进行调整，一般占据整个屏幕宽度的一半左右。
* 布局：主要内容的布局可以根据具体需求进行调整，一般采用上下结构或左右结构的布局方式。
ui界面设计方案
ui界面设计方案UI界面设计方案是指根据产品需求和用户调研，对用户界面进行设计的方案。
下面是一个700字的UI界面设计方案示例：一、设计背景随着智能手机的普及和互联网的发展，用户对于产品的界面设计要求越来越高。
在这样的背景下，我们需要设计一款简洁、美观、易用的界面，以提升用户体验，增加用户粘性。
二、设计目标1. 界面简洁明了：通过布局、配色、字体等设计元素使界面看起来简洁明了，减少用户的认知负荷。
2. 界面美观大方：通过色彩搭配、图标设计等，使界面看起来美观大方，符合用户的审美需求。
3. 功能清晰醒目：通过界面元素的排列和命名，使用户能够一目了然地找到需要的功能，提高用户使用的效率。
4. 操作简单便捷：通过良好的交互设计，使用户操作起来简单便捷，减少用户的操作步骤，提升用户体验。
三、设计原则1. 一致性原则：在不同界面之间保持一致的设计风格，使用户能够快速适应不同的界面。
2. 可视化原则：通过图标、颜色、动画等可视化元素，增加界面的可读性和可理解性。
3. 简约原则：通过去掉冗余的信息，突出核心功能，让界面更加简洁明了。
4. 反馈原则：对用户的操作进行及时的反馈，以提高用户的操作准确性和满意度。
四、界面设计1. 色彩搭配：选择一套适合产品风格的主题色，并合理搭配辅助色，使界面色彩整体和谐统一。
2. 图标设计：选择简洁明了的图标，通过图标的形状和颜色来表达功能的含义，增加用户的认知负荷。
3. 布局设计：根据不同功能的重要程度，合理安排界面元素的位置和大小，使用户能够快速找到所需功能。
4. 字体设计：选择易读性好的字体，合理调整字体的大小和间距，提高用户的阅读体验。
五、交互设计1. 导航设计：通过导航栏、底部标签栏等设计元素，提供直观易用的导航方式，帮助用户快速找到所需功能。
2. 输入设计：通过合理的输入提示、输入框的设计，引导用户输入正确的信息，减少用户的错误操作。
3. 反馈设计：对用户的操作进行及时的反馈，例如按钮的点击效果、加载进度的显示等，提高用户的操作准确性和满意度。
基于Qt的电视机UI实现技术
基于Qt技术的可移植UI设计——基于Qt的电视机UI实现技术1 UI软件架构基于Qt来实现一套电视机用户界面（User Interface）,首先需要选择一个软件框架，用于管理UI页面。
在Qt中，Main Window 为创建应用程序的UI提供了一个框架。
QMainWindow类及其相关类共同完成Main Window中的页面管理。
本项目选择了Qt的Main Window 框架作为实现电视机UI的软件架构。
下面介绍一下Qt的Main Window 框架在实际项目中的应用。
1.1 Qt的Main Window 框架Qt的Main Window 框架，以QMainWindow类作为程序主窗口。
QMainWindow 类拥有自己的布局，如图1-1-1所示：图1-1-1 主窗口布局根据电视机UI的特点，用户只能通过遥控器及本机按键来操作UI，因此只需要一个中心区域显示交互内容就足够了。
对于QMainWindow布局中的Menu Bar、Toolbars、Dock Widgets、Status Bar这几个部分是我们所不需要的。
我们只需要关注Central Widget即可。
QMainWindow的Central Widget可以是多种类型：●Qt提供的标准窗口部件，比如QWidget、QTextEdit等；●用户自定义的窗口部件；●布局管理器组织起来的多个widgets；●分裂器—QSplitter。
QSplitter作为一个容器可以容纳多个窗口部件，此时中央部件是一个包容多个窗口部件的容器；●多文档区部件—QMdiArea。
如果应用程序使用MDI,则Central Widget将被一个QMdiArea部件占据。
每个MDI窗口都是这个QMdiArea部件的一个子部件。
应用程序选择哪种类型作为Central Widget，需要由具体需求决定。
电视机UI通常具有主菜单、一级子菜单、二级子菜单、快捷菜单、信息提示菜单等多个菜单显示页面。
移动端实现树级菜单的方法
移动端实现树级菜单的方法全文共四篇示例，供读者参考第一篇示例：在移动端开发中，实现树级菜单是一项常见且重要的任务。
在移动设备上，由于屏幕空间有限，设计和实现树级菜单需要考虑到用户体验和界面布局的限制。
本文将介绍一些常见的方法和技巧来实现移动端的树级菜单。
一、使用折叠菜单折叠菜单是一种常见的树级菜单设计模式，适用于移动设备上的界面。
在折叠菜单中，每个父级菜单项下面可以展开或折叠多个子级菜单项，用户可以点击父级菜单项来展开或折叠子级菜单项。
这种设计模式节省了屏幕空间，并且用户可以方便地浏览和操作树状结构的数据。
在实现折叠菜单时，可以使用HTML、CSS和JavaScript来构建。
可以使用HTML的ul和li标签来表示菜单的层级结构，使用CSS样式来控制菜单的外观和布局，使用JavaScript来添加交互效果和实现菜单的展开和折叠功能。
通过合理的布局和样式设计，可以在移动设备上呈现出清晰、易用的树级菜单。
二、利用滑动菜单在实现滑动菜单时，可以利用现有的移动端UI框架或库来快速实现。
一些流行的移动端UI框架，如jQuery Mobile、Ionic等，提供了丰富的界面组件和交互效果，可以帮助开发人员快速构建滑动菜单。
通过合理的布局和交互设计，可以让滑动菜单在移动设备上呈现出流畅、直观的用户体验。
三、响应式设计在设计移动端树级菜单时，需要考虑到不同设备屏幕大小和分辨率的差异。
为了适应不同尺寸的移动设备，可以使用响应式设计的技术来实现自适应的界面布局。
通过使用CSS媒体查询和弹性布局等技术，可以让树级菜单在不同尺寸的屏幕上自动调整布局和样式，确保用户在任何设备上都能够方便地访问和操作菜单。
在移动端实现树级菜单时，需要综合考虑用户体验、界面设计和技术实现等多方面因素。
通过选择合适的设计模式、利用现有的UI框架和工具、采用响应式设计等方法，可以实现一个优秀的移动端树级菜单，为用户提供更好的导航和操作体验。
希望本文介绍的方法和技巧能够帮助开发人员更好地实现移动端树级菜单。
UI设计技术手册
UI设计技术手册UI（User Interface）设计是一门关于人机交互界面的设计学科，它旨在提供用户友好、易用和美观的界面。
本手册将介绍UI设计的基本原则、流程和技巧，帮助读者深入了解UI设计，并在实践中运用这些技术。
一、UI设计基本原则1. 目标导向：UI设计应以用户需求和目标为中心，提供符合用户期望和实现目标的界面。
考虑用户的使用场景、习惯和心理需求。
2. 简约性：界面应简洁、清晰，减少冗余信息和干扰元素。
遵循“少即是多”的设计原则，使用户能够快速理解和操作界面。
3. 一致性：界面元素应保持一致，包括布局、颜色、字体等方面。
一致性可以提高用户的学习成本和使用效率。
4. 易学性：界面应易于学习和记忆，新手能够快速上手。
合理设计交互操作和引导，提供明确的指导和反馈。
5. 可访问性：界面应考虑到不同用户的需求和能力，如颜色盲人、残障人士等。
使用合适的对比度、字体大小和无障碍功能来确保可访问性。
二、UI设计流程UI设计流程大致包括需求分析、原型设计、视觉设计和评估四个主要阶段。
1. 需求分析：了解用户需求和业务目标，确定设计的基本方向。
收集用户反馈和市场调研数据，制定设计规范和用户画像。
2. 原型设计：根据需求分析，创建界面的低保真或高保真原型。
通过原型演示和用户测试，检验交互逻辑和用户体验。
3. 视觉设计：基于原型进行界面的美化和细化设计。
考虑色彩搭配、字体和图标的选择，保证界面的美观和一致性。
4. 评估：通过专业评审和用户测试，评估设计的有效性和可用性。
根据反馈和改进建议进行优化和迭代。
三、UI设计技巧1. 色彩运用：选择合适的色彩方案来传达品牌形象和用户情感。
运用色彩心理学理论，使界面充满活力和吸引力。
2. 字体设计：选择易读清晰的字体，合理运用字体的粗细和排布。
注意字号和行距的搭配，确保文字的可读性和美观性。
3. 图标设计：图标是界面中重要的视觉元素，应具备简洁、易懂、易辨识的特点。
运用扁平化设计风格，减少细节和阴影，使图标更具现代感。
Unity开发笔记-Editor扩展用GraphView实现逻辑表达式（1）UI基础逻辑实现
Unity开发笔记-Editor扩展⽤GraphView实现逻辑表达式（1）UI基础逻辑实现写在前⾯Unity的官⽅⽂档对graphview的api只有粗略描述，想要通过API来理解GraphView如何搭建，是⾮常低效和让⼈抓狂的。
也许是因为是实验API的关系，但个⼈感觉Unity的其他API也需要⼤量借助其他⾮官⽅资料和开源项⽬才能理解。
我直接参考了如下博客：下⾯进⼊正题：0 实现GraphView⼦类构造函数中，将EditorWindow作为参数传⼊以便后⾯使⽤另外我们需要添加⼀些功能函数SetupZoom实现滚轮缩放AddManipulator函数可以添加GraphView的操作功能。
1.ContentDragger 按住Alt键可以拖动窗⼝范围，参考Animator的window功能2.RectangleSelector 多框选功能，⼀次选中多个Node，玩过rts的都知道3.SelectionDragger 选中Node移动功能，否则不能通过⿏标拖动改变node的位置`public class YaoJZGraphView : GraphView{public YaoJZGraphView(EditorWindow editorWindow){_editorWindow = editorWindow;//按照⽗级的宽⾼全屏填充this.StretchToParentSize();//滚轮缩放SetupZoom(ContentZoomer.DefaultMinScale, ContentZoomer.DefaultMaxScale);//graphview窗⼝内容的拖动this.AddManipulator(new ContentDragger());//选中Node移动功能this.AddManipulator(new SelectionDragger());//多个node框选功能this.AddManipulator(new RectangleSelector());}}`1 实现EditorWindow⼦类，将GraphView添加到rootVisualElement中我们需要⼀个EditorWindow⼦类来显⽰window，这⼀步和其他EditorWindow的的扩展没有任何差别。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
基本菜单UI的实现Unity3D_2D游戏实例从零讲起（3）——基本菜单UI 的实现游戏除了基本的画面渲染，操作对象等等，还需要各种UI 菜单来辅助玩家，或是引导，或是做游戏设置。
比如，登录菜单，图片的显示，人物血条等等。
游戏——辐射4的UI界面为什么要有单独的UI制作系统呢？UI是任何一款游戏都不能或缺的部分，而且占了非常大的一个比重，他相比游戏对象（尤其是3D游戏），更多的是文字与图片，就是为了让玩家更方便的进行游戏。
这些文字与图片的显示多半不像3D模型那样需要复杂的渲染过程，而且经常需要显示在视窗的最上层（也就是里摄像机最近的地方），所以引擎有必要来提供一套好的UI解决方案。
在Unity5.0版本发布之前，由于原生GUI的各种问题(虽然4.6版本新的UI系统就已经发布但是bug比较多，不完善)，大家基本推崇的UI工具是NGUI，是一款很好用的UI制作插件。
但是在5.0版本之后，新的UGUI系统已经在多个方面由于NGUI，所以完全可以考虑使用UGUI，当然NGUI还是值得一用的UI插件，目前的话大家自行取舍。
下面是从蛮牛社区找到的一个关于二者的对比。
（可滑轮+ctrl放大观看，或者右键在新窗口中打开图片）然而下面我首先要说的UI制作方式却不同于以上二者，可以说是最笨的办法，也是我当时做游戏最开始的办法，为什么说这个笨的办法？因为这里我想做一个对比，而且想从基本的UI实现原理给大家一个思路。
一种笨却又简单的UI实现方式：Ray这个例子大家可以试试，但是不建议之后也使用，要知道我们其实也可以使用原生的按钮，然而我和各位都应该知道，这个太丑了，没有游戏会用这样的按钮。
在游戏的开始菜单操作里面，我们无非是点击鼠标，然后被点击的按钮响应，然后执行某个操作。
在平时我们浏览网页，使用软件的时候，你的鼠标或手指触碰的地方会触发一个消息事件。
在这之前，程序的定时器不断刷新来捕获回调事件，程序需要判断你鼠标所在的位置，进而判断你是否点击到了按钮。
那么用Ray实现其实是类似的道理，你在摄像机的这个位置发射一个Ray（射线），这个射线就像激光一样向前照射，一旦它碰到任何刚体（在运动中和受力作用后，形状和大小不变，而且内部各点的相对位置不变的物体，就是一个理想的物理碰撞模型），就会反射回来。
然后，你判断他是否碰撞到了你想让其碰撞的物体，并处理。
听到这里，你肯定就理解了，那UI无非就是把所有的按钮做成一张张图片放在摄像机最前面，然后在鼠标点击的位置向前发射一个Ray，判断碰撞的是不是你要的按钮，是的话就做处理。
尽管这种办法，很蠢，对于复杂的UI界面也很难实现，但是原理与方式却是非常简单的，你只需要把图片做的好看一点，写几句代码就可以的。
下图是我实现的一个例子的效果：1.首先制作好所有的图片素材2.将图片都导入到新建的MainGUI文件夹中3.将图片一个个拖到场景编辑窗口上，按照设计的位置摆放好.这里要注意几点:①如果图片显示不正常就需要在文件浏览器里面点击图片——Inspector属性界面——点击Texture Type——先点击Editor GUI and Legacy GUI——然后点击下面的Apply——之后再点击sprite(2Dand UI)——再点击Apply就可以的如果觉得看起来显示不清就可以设置图片的最大尺寸，点击该窗口的Max SIze选择1024或更高（一般1024就足够了）②由于Ray的方式是发射射线，所以位于前面的物体会将后面的物体挡住，所以要设置好优先级OrderInLayer，比如退出确认界面就应该优先级高。
在右边实体的属性列表设置，注意：设置z值并没有用当然也可以通过设置坐标来改变显示的顺序，摄像机方向（一般是垂直与X0Y面），改变Z值即可。
4.由于Ray只有在碰到带碰撞盒组件的物体才会产生碰撞消息，所以这里要对图片添加碰撞盒组件。
在场景中点击图片——在Inspector栏点击Add Component——Physics 2D——Box Colider 2D。
这是2D碰撞盒的一种，还有圆形的，多边形的，可以在碰撞盒所在的范围进行碰撞检测并模仿真实的碰撞效果。
（这里顺便解释一下什么是刚体RIgidBody：刚体本身是一个理想化的受力模型，受力不改变形状与大小。
在游戏中，一个刚体组件就表示这个物体会受到力的作用，比如重力，阻力等，这些可以有玩家去自由调控）5.编码，有以下几点注意：①GameObject exitGame=null;//代表退出游戏按钮由于要获取到Ray碰到的实体，所以这里先定义一个实体成员变量用以存储场景中的按钮实体。
②我们可以给场景中的实体命名，并用exitGame=GameObject.Find ("退出界面");的方式来获取该实体。
③这是判断是否点击按钮并做处理的代码，写在update里面[csharp] view plain copyif (Input.GetMouseButtonDown(0)) { //如果点击了鼠标左键Rayray=Camera.main.ScreenPointToRay(Input.mousePo sition);//定义射线对象RaycastHithit; //实例化击中类对象if(Physics.Raycast(ray,outhit)){name=;//通过hit到的物体来获取该物体的名字Debug.Log(name);switch(name){//关于，退出等按钮case"返回": //如果击中返回这个实体，就执行下面的操作about.transform.position=newVector3(0,11,-2);break;}}}④因为这个点击的功能是一直存在的，所以把他拖到一个常驻在场景里的实体（最好是一个主按钮，或者新建一个空的名为clickscript的空实体。
）关于Ray方式想说的：大家看到Ray方式第一反应应该是第一人称射击游戏，没错~fps等三维游戏的瞄准与射击基本上就是这个思路，向准星的方向发射一条射线，然后沿着射线发射子弹。
这里使用这种方式却是不是很恰当，但是却很直观。
在最开始接触Unity的时候，特别是什么也不懂的时候，可以用这个方式做一些简单UI。
然而，一旦UI变得复杂，我们想实现更多的效果，这就显得有点力不从心了。
比如，一般按钮都有点击，按下，离开多个状态，不同状态不同效果，你说怎么实现？如果实现比较酷炫的界面移动（比如PPT里的各种动画），难道你要写个算法来让其做空间位移么？如果想让UI能够按一定比例跟随角色呢？不同分辨率的设备怎么自适应呢？而且，这里使用还有诸多限制与问题，比如必须是刚体，Ray的使用效率怎么样，需要设置坐标优先级等等，所以，这确实不是一个好的方式。
下面，就介绍新5.0以后比较流行的UI制作方式——UGUI同样也是制作这个界面，但是我们换一种方式，而且效果更好，更方便。
（之后如果出现图片显示不正常的情况可以参考上面的第三部的相关注意事项①）1.制作好素材，将图片都导入到新建的MainGUI文件夹中，点击菜单栏的File ——New Scence新建一个scence场景。
2.点击菜单栏的GameObject标签——UI——Image建立之后我们就能看到在左边的场景实体列表（Hierarchy）新生成了三个实体Canvas：画布，相当于一个呈现界面UI素材的容器。
Canvas下的子实体Image：每个UI控件都是由美工设计的图片构成，这个就Image是放自己设计的图片的实体EventSystem：监听UI相关的事件实体，用来支持点击触碰等。
这时我们可以看到一个白框，这个白框就是我们游戏看到的范围。
3.先制作背景①将实现制作好的背景素材拖到Image实体的Image(Script)的Source Image属性上，这时我们看到图片已经放到了屏幕上(新建的Canvas可能比较大，看不到全局的情况滑轮缩小视窗)但是会发现显示不正常，这时候点击下面的按钮SetNative Size，并修改一下位移值PosXPosY都为0。
②我们希望我们的背景一直是充满屏幕的而不是随着分辨率的变化而变化，所以我们要做一些工作，这在原来的GUI 系统是一个比较麻烦的事情，需要自己写脚本来满足自适应。
但是UGUI系统已经很好的解决了这个问题，现在新的版本新建的Canvas都有一个属性栏叫做CanvasScaler，点击UI Scale Mode选择Scale With Screen Size。
然后填上你需要机型的分辨率，一般都是1920*1080，注意，如果你的图片素材尺寸较小，可以选择小一点的分辨率，只要满足16:9就可以的。
另外，部分Unity系统的版本可能不支持CanvasScaler （Unity 5.0的b9），可以在Canvas实体Inspector窗口点击Add Component——Layout——Reference Resolution，然后进行同样的操作。
③点击一下开始游戏，在Game窗口设置分辨率（上一篇Unity博客有介绍）改变窗口大小，发现图片始终充满屏幕。
④我们发现，在Image的Inspector窗口做上有一个锚点的设置，这样可以比较方便的让我们的图片中心定位在某些位置。
同时调节X,Y坐标就可以放在任意位置。
4.制作按钮①我们在Canvas的实体窗口位置右键创建UI——Button，然后我们可以在Inspector窗口看到同样的界面，我们仍然可以像刚才一样把按钮素材拖到Image的SourceImage上面——点击SetNative Size，如果觉得图片的尺寸不合适可以在上面的Scale设置图片的缩放比例。
②我们可以运行一下程序看一下效果，按钮有点击的效果，鼠标放在上面的效果。
这个功能归功于下面的Transition功能，当前我们看到默认的是ColorTink，也就是按钮的点击效果都是靠颜色与Alpha透明度来调节的（差点写AlphaGo 了~~）可以在游戏运行的时候修改颜色看看效果。
Transition还有两个选项，SpriteSwap：根据制作人自己设计的素材来设置点击，释放的图片效果。
Animation：这个是利用Unity的动画系统来制作按钮的动画效果。
今天写的有点多，关于监听事件的内容之后再慢慢更新吧。