上周对UI界面的功能进行了介绍,这星期我设计了UI界面及按钮,下面我详细说明后台界面制作的过程。
1、后台管理界面设计过程
后台界面是管理人员自己进行操作的地方,所以界面不宜太复杂,应以实用为主。
我们这个app后台界面需要实现的功能是使扫描的图片与对应的视频进行关联,之后再打包上传到服务器中。功能如下图:
主要的设计过程:
- 首先考虑主色调,鉴于我们的app是一个与科技有关的主题,所以我选择蓝白色为主色调
- 在功能的基础上,我先对界面进行了排版,将上图的UnNamed图标放在左边,图片拖拽界面放在右边,我觉得这样更符合我们平时的习惯。
- 原图的删除映射是直接在UnNamed的右上角,这样的一个小图标不太好点,很容易点击到其他地方,所以我将删除映射与添加映射并排放到了图片拖拽页面的下方
- 打包上传的按钮之前是在右下角,为了充分利用空间,我将这个按钮放置在右上角
- 在脑海中有了个大致的布局之后,我先在ps的上方填充了一个蓝条作为导航条,但我总觉得很单调,所以在左边添加了阴影的效果,右边添加了蓝粉渐变,看起来不会太单调
- 为了与右边界面进行区别,在两个交界