（个人）AR电子书系统创新实训第三周（1）

在第一周的时候谈到我们的课题是制作一款xx大学计算机协会成立的AR电子书系统，但由于种种原因，我们决定更改宣传册主题为宣传山东省济宁市，所以app界面的画风会有所不同。
经过了前几周的学习，我对unity 3d的界面设计有了一定的了解，接下来这周我将正式开始app的界面设计。

1、UI界面策划
UI界面起到连接整个app的作用，所以符合人机交互的原理对于一个app的界面设计尤为重要，我对此进行了初步的构思。

1. 当我们打开app时，首先进入摄像头界面，先扫描不同的宣传册对应的二维码，先进行宣传册相关内容的提取；
2. 在提取宣传册界面之后，app进入对应宣传册的主界面，在我们这次实验中就是济宁宣传册的主界面；
3. 在这个界面中，包括三个按钮：宣传片、扫描、操作说明；
4. 点击宣传片按钮，app将进入宣传片的播放界面，在屏幕的上方有退出键，可以随时点击退出；
5. 点击扫描按钮，app将进入我们应用的核心部分，及扫描不同的图片进行不同的AR交互操作，在屏幕的上方有退出键，可以随时点击退出；
6. 点击操作说明按钮，app将进入应用的使用说明界面，在弹窗上方有退出键，可以点击退出弹窗界面进入开始界面。

我对于整个app的界面策划就是这样，后期可能会有所出入但大体是这样的流程。下面我详细的说明unity制作app界面的整个流程。

2、界面分辨率的设定
由于我们是手机界面，所以我直接将unity中的carve的分辨率改为1920*1080像素（该型号为魅族note3的手机分辨率），具体修改方式如下图：

3、背景图
因为app是与宣传册相配套，所以界面的整体风格与宣传册的风格基本保持一致，但由于手机界面大小有限，不能像宣传册一般有太多的装饰，但又要显示独特的韵味，因而在宣传册的基础上稍加改动，主色调为暗黄色、搭配古朴的云纹、简单的文字排版，便有了如下背景图：

处理背景图的方法与我上一篇博客demo的背景图几乎一致，通过GameObject->UI->Image新建Image，将背景图拖入SourceImage。值得注意的是，为了保持背景图的自适应性，在“Rect Transform”中需要将锚点设置为正中心，如下图：

4、按钮实现
由于按钮的背景UI设计在后文再详细论述，下面使用的是简单的填充背景，对于字体调整了颜色，按钮的详细设计见上一篇博客。将这些按钮分别命名为“宣传片”“扫一扫”“使用说明”，效果图如下：

5、制作设置和返回HUD
除了开始界面，其他的界面都需要设置和返回按钮用来控制app操作，HUD的详细设计见上一篇博客，具体界面如下：

6、弹窗实现
上文说到点击“设置”按钮将会打开这个功能就是通过弹窗来实现的。要制作弹窗，首先需要对sprite进行处理，具体步骤如下：

• 导入素材，在“Inspector”面板中点击“Sprite editor”，将sprite的边界设置一定的数值，点击“apply”，如下图：
  
• 通过GameObject->UI->Image新建Image，重命名为“SetPopup”将处理好的sprite拖入SourceImage。
• 在Image中的“Inspector”面板的Image中“Image Type”设置为“Slide”，如下图：
  

7、控件整理
现在的文件布局有点凌乱，所以我对其进行了分类整理。我将背景图、菜单栏等按钮放在一个empty Object中，并命名为“MainMenu”；将设置、返回按钮放在另一个empty Object中，并命名为“HUD”，具体分类见下图：

对这两个空物体分别建立Carve Group并按照demo中的设置方法进行alpha通道的设置。下图为HUD中的Carve Group的设置参数：

对于界面布局与按钮的处理就是这样，下一篇我将介绍相关的代码与控件链接问题。

注：上文使用的素材都是暂时的，与设计宣传册的小伙伴、组员沟通之后，我会在后文详细说明UI界面控件的设计。