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

在这周的下半部分时间里，我设计了AR 电子书app的两个界面，一个是开始界面，一个是扫描界面。下面我将详细叙述设计的“开心”过程。

1、需求分析
这两个界面需要实现的功能较少，开始界面需要设计两个按钮的形状，扫描界面需要设计一个扫描框和一个按钮。然而，界面控件越少就越不容易设计的出彩。设计的界面既不能看起来太空，也不能看起来太low，抱着这样的想法我开始了我的设计过程。

2、制作过程
与设计后台的过程一样，我先确定了界面的主色调。为了与后台形成一整套体系，我主色调依然使用带有科幻感的蓝色。

(1)开始界面
开始界面中最主要的就是两个按钮的设计

• 我的第一版设计是以白色为背景，app的名称使用蓝色，按钮我选择“蓝色直线”，添加了阴影等效果，我准备在unity中再给它添加响应颜色变化，效果图如下：
  

• 但我觉得这一版的按钮不是特别好看，所以我尝试了以下几种按钮，在按钮上我都加了不同的图层样式，效果图如下：
  
  

• 尝试了不同的圆角矩形的半径，我选择了较为适合的一种。但我觉得按钮并列放置显得有点“重心不稳”，所以我将按钮并排放置。效果图如下：

• 按钮的形状基本确定了之后，我又觉得背景有点空旷，模糊背景又太花哨，纯蓝色背景又太单调，都不是很合适，所以最后我选择添加渐变背景，但我没有使用大渐变，而是选择了颜色相近的两种蓝色的渐变，背景就丰富起来了。

• 因为背景有些变化，所以我对按钮的颜色做了相应的调整，改为浅蓝色，与背景相搭配。

• 开始界面的上半部分开始的时候只有“AR E-Book”这几个字，有些简单，所以我添加了一些其他的文字来丰富内容。

开始界面基本上就完成了，效果图见文章底部。

(2)扫描页
扫描页主要是一个扫描框和一个按钮。

• 为了保持风格的一致，我沿用开始界面的背景和按钮形状。

• 扫描框我采用的是白色断续的框（白色断续框的制作方法：在ps中可以先建立一个白色的圆角矩形，不填充，再复制该图层，不描边，旋转45°，将该图层放在之前的图层上即可）。

• 在该框的下面， 我添加了一行说明文字“将相机对准宣传册二维码进行扫描”。

• 同样的，为了让单独的扫描框不那么单调，我在扫描框上添加了一只“偷窥”的小猫，给这个界面添加了一点俏皮的气息。

扫描也就完成了，效果图见文章底部。

3、切割图标
界面制作完成之后需要对界面按钮进行分割，值得注意的是切割图标时应把其无关的图层进行隐藏，再使用“剪裁工具”对按钮进行剪裁，之后再另存为.png格式（一定要对图片进行剪裁之后保存！我之前就没有剪裁，直接将其他图层隐藏了之后保存，这样的图片导入到unity时会填满整个界面！导致点击整个界面都会触发该按钮!）

4、导入unity
图片导入unity中之后的处理方法见我之前的文章《（个人）AR电子书系统创新实训第二周（1）》

5、心得感悟

• UI界面元素虽然很少，但是排列组合的方式有许多，大家应该多尝试不同的组合方式，可能会有意想不到的效果。
• 为了看起来逼格高，应该是用最少的控件完成所有的功能，所有按钮都尽可能的简单，这一点大家可以在日后慢慢体会。

开始界面与扫描页的效果图如下，希望大家不喜勿喷，尊重他人的劳动成果。