本文讲述了在一个软件工程课程中，团队使用AxureRP进行Web端和App端对象存储平台原型设计的过程，包括设计思路、界面布局、交互设计和遇到的困难如经验不足、设计分歧等。成员分工明确，详述了解决方案和工作比例。
原型设计作业目录
| 这个作业属于哪个课程 | 2301-计算机学院-软件工程社区 |
|---|---|
| 这个作业要求在哪里 | 团队作业——原型设计 |
| 团队名称 | 熬夜会秃头 |
| 这个作业的目标 | 采用Axure Rp实现原型模型 |
原型设计
原型模型设计工具：Axure Rp
第一，Axure制作的原型几乎能够媲美前端开发的效果，不止是视觉设计上的更包括交互层面,其他的原型工具都没有它这么强大的交互设计能力
第二，Axure发展的比较早，有非常多的教程、视频、原型、元件库可以参考学习.
第三，Axure中的动态面板、中继器、函数、交互事件等，能够实现复杂的效果，足以满足预先的需求。
界面原型设计
原型设计链接:
Web端：
登录页：
注册页：
主界面:
bucket列表：
权限管理：
文件备份：
基本设置：
App端：
启动页：
登录页：
注册页：
bucket管理：
新建文件：
我的：
bucket 详情:
权限管理:
原型设计过程
1、设计思路
色彩采用蓝色、白色为主体，灰色为辅助，及各类相近色为衬托。首先将蓝白色调结合在一起，会让透彻、干净的轻盈感随之而来，能给人一种浩瀚无垠的包容之感。紧接着将多个组件的边框去掉，换成阴影来突出模块与模块之间的关系。在不影响引导用户正常使用对象存储平台的前提下，整体的字体以及各个组件的样式都较为大方，追求简洁包容的设计风格。
2、整体架构
Web界面设计
网页端包括登录注册页、概览页、Bucket列表页、权限管理页、文件备份页、基本设置页六大部分。
（1）登录注册页：用户在该页面进行登录或者注册，其中可选择两种不同的登录方式。
（2）概览页：用户可以在该页面查看包括存储用量、历史记录等多种存储平台使用信息。
（3）Bucket列表页：用户在该页面可以查看所有Bucket的详细信息，并对各个Bucket可进行删除或下载操作。
（4）权限管理页：用户在该页面可对所有Bucket进行权限管理。
（5）文件备份页面：用户在该页面可以对Bucket进行手动备份或恢复，并可以设置自动备份开关。
（6）基本设置页：用户在该页面可以查看默认下载路径、账号信息等基本信息，并可以对上述路径和信息进行修改。
App端界面设计
移动端包括登录注册页、Bucket管理页、用户主页三大部分。
（1）登录注册页：用户在该页面进行登录或者注册，其中可选择两种不同的登录方式。
（2）Bucket管理页：用户在该页面可以查看Bucket信息，进行图片处理、权限管理等操作。
（3）用户主页：用户可以查看并快速使用常用功能，查看以及修改存储路径、账号信息等。
交互设计
除上述界面设计中提及的交互功能以外，对象存储平台应具有以下交互功能。
（1）Web端：用户可以导航栏对功能页面进行切换，在置顶栏可以对Bucket进行快速搜索、创建；可以通过按钮交互，快速下载移动端应用程序。
（2）App端：用户可以通过屏幕底部的导航栏对界面进行快速切换；可以通过交互按钮快速使用创建Bucket、文件上传、拍照上传功能。
3、实现过程
Web端
（1）登录注册页参照各大主流平台排版，将登录注册模块置于页面中央靠右处；概览页分为左中右三部分，左侧为导航栏，中部主体为可视化的存储用量使用情况，右方为可视化的Bucket列表以及Bucket管理；其他页面均为两部分构成，左侧与概览页保持一致均为导航栏，主体部分除基本设置页以外均使用表格形式呈现。
（2）可交互按钮使用图形按钮或者使用特殊颜色字体作为区分。
（3）涉及查看Bucket列表的部分均设置前后和快速翻页按钮。
App端
（1）登录页将登录注册模块置于页面中央处；其他页面均分为两部分，底部为导航栏，主体内容置于导航栏之上，符合用户习惯与人体工学。通过点击导航栏中的新建文件按钮，将弹出相关菜单；在用户主页可以进行快速访问常用功能。
（2）交互按钮均采用图形按钮。
遇到的困难及解决方法
1、经验不足
拥有ui设计基础的人为0，对于组内设计ui的同学来说，无论是设计软件的使用亦或是进行系统的设计都需要从零开始学习，再搭配上十分紧张的工期，如何在短时间内速成并且设计出一个好看的ui是一种挑战。UI人员先学习如何进行制作，另外有两位同学去收集一下有关对象存储的一些UI资料，再一起开会交流确定初稿，在初稿的基础上改进不足。
2、设计分歧
在最初进行ui设计时，在排版的问题上出现了意见的分歧：因为要分别做PC端和移动端两个ui，而电脑屏幕相比于手机屏幕要大上很多，因此在使用同一种设计元素的情况下，PC端的ui界面会更空旷而移动端的则是会过于紧凑。要想解决这个问题，就需要在两个方面进行取舍：一是移动端和PC端采用不同的设计元素，二是让两者都取折中的办法，尽量避免出现极端情况。最后，为了让两个ui风格相贴近，最终选择了第二种方法。
3、多次修改
在初稿修改的时候有多次分歧，页面修改完不美观，或者功能缺漏。需要设计人员不断地去修改尝试，比如一个蓝色的配色要修改颜色的饱和度，找到适应页面风格的最佳色度。还有排版问题，双端都进行了多次修改。修改完成后发到交流群大家一起讨论。
此次作业组员工作及其工作比例
| 学号-姓名 | 工作内容 | 贡献度 |
|---|---|---|
| 102101228-陈少桐 | 答辩、工作整理审核 | 10% |
| 222100405-陈知菲 | UI资料查找 | 10% |
| 102101510-梁菲汎 | 博客撰写 | 9% |
| 102101218-李恒欣 | PPT资料查找 | 9% |
| 102101219-邱思源 | 设计思路记录 | 9% |
| 102101220-宋芳鑫 | 设计难点记录 | 9% |
| 102101221-张一凡 | UI设计 | 13% |
| 102101233-林承桢 | UI设计 | 13% |
| 102101239-黄才栋 | UI资料查找 | 9% |
| 102101243-谢怀广 | PPT制作 | 9% |
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
