Unity程序与UI界面设计

September 27th, 2018 | Tiber

胡罗舶使用了Unity开发工具并选择用UGUI来设计和制作界面。Unity是个很强大工具,能把项目导出发布到众多平台上运行,无论你是做游戏还是做手机应用APP,它都可以很好的满足你的要求。手机APP的应用中更多的是界面的交互和操作,那么做好UI界面的设计和实现良好的界面操作尤为重要。

一、良好的沟通是开发的前提

设计师与程序员之间的关系emmmmmm。。。

                     Program and designer

胡罗舶的设计师们会将应用的UI设计完成,并会在Unity中对UI进行还原,制作出我们需要的界面,这个过程不需要程序员来做,但是总会有一些问题,比如界面不够优化,制作的预制体不是程序需要的,层级结构。。。。这个这样做实现的效果不够好。。。分分钟走在想掐死对方的边缘,哈哈。。。

程序的是尽量精简和可持续扩展利用的实现功能有的时候不会兼顾产品设计上的要求,而设计想做一个大而全的产品想要美观漂亮且功能全面。如果是程序员自己给自己UI还原,开发速度很快,考虑会更细致。在我们开发前期需要明确指定完善的开发文档,并且让程序员参与产品功能分析和设计。这样设计师就会考虑到一些际实际的条件,更有实现的可能性。程序员的参与度高,对需求的理解也更到位,会提出很多建设性的建议,和避免一些因为理解不当造成做出的功能不符合要求。

对于不同类型的程序员需要不同的方式来沟通,有程序员和设计师在产品开发过程中有非常多的建议和想法,需要我们投入更多的耐心探讨问题,但是一旦我们达成一致,我们的开发和合作会非常好。我个人比较喜欢和这样的沟通,所以很庆幸能加入胡罗舶与这样一群充满活力和想法的小伙伴儿一起工作。还有程序员会很严格的按照产品文档开发,但是不会去思考产品本身会不会有问题,这样就需要我们把文档写的非常详细,如果有考虑不周全的地方,那他们做的工作就需要返工了。

遇到设计和程序都不想按照彼此的想法来做的情况,胡罗舶团队的成员们会经常一起沟通,开会总结好的地方和不好的地方,然后找到提升的方法,目的就是为了大家在遇到问题的时候首先能一起了解问题,都能站在产品的角度去解决问题,这需要我们彼此更多的多去包容,明确团队的最终目标是什么。我们会抛开自己的位置,一起站在一个用户的角度去分析问题最好的就是用户反馈大家很快就会发现好的解决办法。

一、界面适配和自动布局

胡罗舶的设计师和程序员为了将APP设计的漂亮并且适用于各种设备的屏幕分辨率,特别是要考虑到iPhoneX等一些手机的刘海屏和安全区域(下面会有详细分析),做了很多适配的工作。

首先我们要知道多分辨率适配最基本的要求:必须充满屏幕,不能有黑边、空白、空隙,超出范围等等,而且在多分辨率下的位置和尺寸保持一致,不能变形。

页面内部的UI组件一样不能变形,保原有的队形,特别是Scroll View中的内容,更要结合Content的自动布局来做适配,大小按比例缩放。父对象的位置和适配会影响子对象,特别是当父对象是空对象的时候,有时候找半天问题最后才发现是父对象有问题。所以一定要仔细细致。

  我们一般是使用锚点、Unity自带的自适应结合自动布局的方式来解决,下面是几点要注意的问题,还有适配相关的基本知识:

1、在当初制作界面的时尽可能减少不必要的父对象和空对象,如果界面结构复杂会影响到子对象的描点和自适应,如果你以后要做修改和扩展,就会出现改动一个地方,整个页面都会受影响,最坏的结果就是你不得不重新做自适应。

2、一个场景一般只要一个Canvas,设计师需要跟懂UI的程序员要沟通界面的层次结构,确定好需要共用的资源,比如loading、提示等,可以节省资源优化项目。

在适配的时候最好先做好这些设置:

(1)调整CanvasRender Mode属性为Screen Space - Camera。

(2)将映射内容的Camera拖入Render Camera中。

(3)Plane Distance表示UICamera的在Z轴距离。

这三个也可以不设置,因为我们没有使用,具体的看你的需要。

(4)Canvas Scaler中要将UI Scale Mode属性设置为Scale With Screen Size,这样Canvas会根据屏幕比例缩放。

(5)Reference Resolution:UI宽和高一半的大小。

(6)Screen Match Mode属性选中Match Width Or Height表示采用宽度或高度 。

(7)Match调整为010表示完全宽度适配,1表示完全高度适配,其他值表示介于两者之间采用比例适配

                          unity canvas

有人会遇到锚点设置不了的问题,那是因为你没打开设置哦,按照下图打开就可以了:

                                                                 unity pivot 

对于所有ui都可以根据具体的需要,设置它们的锚点PivotAnchorPresets

                                                              Pivot and AnchorPresets 

下面是一个界面的适配:这个界面就是要充满屏幕的,所以选择了最右下角的那个stretch。你可以根据实际需求选择靠左、右、上、下以及stretch类型。

                                                              unity stretch 

 

3、页面设计不仅要避免页面超出画布canvas的范围,而且Content自动布局的内容也不要超出范围,不要以为在分辨率下看不到就可以了,当我们需要考虑刘海屏的安全区域,那么你的UI布局可能就要重新设计,这无疑是设计最不愿意看到的。此时此刻我感受到了设计师幽怨的眼神。。。

                   send a bug to you

Content做自动布局可能需要的组建有layout elementvertical layout group(垂直控制器)、horizontal layout group(垂直控制器)、grid layout group Content size fitter等。

这些组件中的各种属性,还是请大佬们自行去搜索吧,相关的资料文档非常多的,要保持自主学习的心。不断学习,获得最新的知识和技能,保持创新和活力是我们胡罗舶的宗旨。

下面就是一个content中的自动布局和它的自适应:

                                                             unity layout 

为了能够更好的理解和体验,最好自己亲自动手制作一下。

最后,在使用ContentSizeFitter时,要注意帧的变化,有时候内容变了,但是这一帧识别到的还是改变之前的大小,这时候容易发生显示问题,所以不管有没有出现问题,最好都要刷新一下ContentSizeFitter组件,使用SetLayoutVertical()或者SetLayoutHorizontal()的方法,让显示保证万无一失。

一、iPhoneX安全区域

随着iPhoneX还有一些刘海屏手机的发布,为了不影响手机系统的正常使用和APP的使用一定要考虑那个让人头疼的刘海屏,我们的软件和游戏都需要根据它们的分辨率做相应的适配,使用安全区域是最好最有效的方法。

iPhoneX的主屏尺寸是5.8英寸,主屏分辨率是2436 x 1125,而我们要做是将我们的CanvasPlane的尺寸显示在安全区域内,下面连接里就是一个如何适配iPhoneX的简单方法:

想要看安全区域代码的朋友请自己去下载:https://bitbucket.org/p12tic/iossafeareasplugin/downloads/

  如果安全区域的位置是空白或透明,不妨可以改变相机的SkyboxSolid Color 纯色,与UI设计的背景相同,或者设为纯黑色等相搭配的颜色,这样安全区域的部分与APP应用的融合就显得自然了。当然也可以通过UI设计来自适应iPhone,避免在危险区域内做一些滑动或点击等功能。

iPhone又发布新的手机了,关于适配又要开启新的测试和调试了。。。

在这里先给每个关注和热爱胡罗舶的小伙伴儿们new一个新的iPhone XS Max:

                  IPhoneXSMax() newiphone= new iPhone XS Max();

                    newiphone.host=you;

                 newiphone.text=Love you, everyone who loves Coolhobo;

                                           Crazy code