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

上周对UI界面的功能进行了介绍，这星期我设计了UI界面及按钮，下面我详细说明后台界面制作的过程。

1、后台管理界面设计过程
后台界面是管理人员自己进行操作的地方，所以界面不宜太复杂，应以实用为主。
我们这个app后台界面需要实现的功能是使扫描的图片与对应的视频进行关联，之后再打包上传到服务器中。功能如下图：

主要的设计过程：

1. 首先考虑主色调，鉴于我们的app是一个与科技有关的主题，所以我选择蓝白色为主色调
2. 在功能的基础上，我先对界面进行了排版，将上图的UnNamed图标放在左边，图片拖拽界面放在右边，我觉得这样更符合我们平时的习惯。
3. 原图的删除映射是直接在UnNamed的右上角，这样的一个小图标不太好点，很容易点击到其他地方，所以我将删除映射与添加映射并排放到了图片拖拽页面的下方
4. 打包上传的按钮之前是在右下角，为了充分利用空间，我将这个按钮放置在右上角
5. 在脑海中有了个大致的布局之后，我先在ps的上方填充了一个蓝条作为导航条，但我总觉得很单调，所以在左边添加了阴影的效果，右边添加了蓝粉渐变，看起来不会太单调
6. 为了与右边界面进行区别，在两个交界处添加了阴影
7. 左边的UnNamed条我使用纯色填充背景，以细线进行分割，偏右部分使用小三角进行装饰，在点击该按钮时颜色变浅，且右边显示蓝条，表示当前正在这个界面
8. 右边界面是两个带文字的框，在文字栏我添加了浅灰色背景，开始的时候只用纯色背景，但是后来觉得有点单调，所以在背景上添加了很多阴影、内发光等效果，在背景的外部也加了线条装饰
9. 解决了文字栏之后，图片框也是如此，开始的时候只是简单的描线，后来觉得太单调了，也添加了背景
10. 添加/删除映射的按钮，使用主色调的蓝色，搭配投影等效果
11. 打包上传按钮，为了使人们清楚的明白这个按钮的作用，我在文字旁边添加了一个小图标，让打包上传的作用更直观

我说的看起来简单，但实际上渐变、阴影、大小、颜色等等这些东西想要调出一个和谐的整体不是一件很容易的事，渐变深一点、阴影多大、大小多大、不同按钮选择什么样的颜色等，都需要多尝试、多想才能达到较为满意的效果。文末是我最终的效果图，希望大家不喜勿喷，尊重他人的劳动成果。

2、设计心得

• 善于使用“同色系”的颜色，在UI设计的时候，颜色一般都不会超过3种，这个时候如何巧妙的使用同色系的颜色就很必要了，它会让整个界面看起来即整洁又有层次感。像我的这张图，标题栏、高亮名称、按钮这三个部分的蓝色都有细微的区别，看起来不会太死板。
• 善于使用“图层样式”，这个功能对于在制作界面UI的时候尤为重要，它可以使你在制作图标等按钮的时候即不会过于单调也不过过于花哨。特别是我的标题栏，光是图层样式就有好几层。而且导入图片的两个大框虽然看似简单，却也是叠加了许多阴影与效果。
• 要耐得住“寂寞”，制作UI是个细心活，而且可能你做很久效果就不是特别明显，这时候就一定要沉得住气，耐心的修改、调整，做得慢没关系，相信自己一定会做出精美的图片！

效果图：