Panda开源软件收集系统的设计
1.需求讨论
我们反复对需求进行讨论和挖掘,对用户的角色、场景都进行了分析。
用户角色: 开源治理的管理人员、公司领导、一般开发人员
2.场景:
开源治理的管理人员:
对本系统收集开源软件的情况需要及时了解
根据开源软件名称和url可以在系统中查找到该软件的相关情况
需要查看到开源软件各种维度的统计信息
对与公司相关的开源软件有特殊的关注
对名称不清楚的情况可以通过各种筛选条件找出某个开源软件
需要对开源软件信息进行保存
可以批量的更新开源软件信息
可以单独的维护某一条开源软件信息
可新增某条开源软件信息
公司领导
对公司相关的开源软件有特殊关注
需要查看一些统计数据
一般开发人员
根据开源软件名称和url可以在系统中查找到该软件的相关情况.
快速查看自己收藏的开源软件
可对查询到的某条软件信息进行补充等
可新增某条开源软件信息
可以对使用过的软件进行评论
3.发散--收拢
开源治理的管理人员:
l对本系统收集开源软件的情况需要及时了解
-----在首页设计了对该系统实时收集软件的统计信息
l根据开源软件名称和url可以在系统中查找到该软件的相关情况
--在首页最突出的位置展示搜索框,支持模糊匹配和suggest。
l需要查看到开源软件各种维度的统计信息
--在软件详情页面,对该软件的各种相关信息和统计信息进行展示。查看信息的同时能随时了解到该软件与公司相关的情况,以及公司使用该软件或对该软件的贡献情况。
l对与公司相关的开源软件有特殊的关注
----在软件详情页面也专门针对zte的统计
l对名称不清楚的情况可以通过各种筛选条件找出某个开源软件
--开源地图功能
l需要对开源软件信息进行保存
--导出功能
l可以批量的更新开源软件信息
--导入
l可以单独的维护某一条开源软件信息
--在软件详情页面可以点击我来补充按钮对该条信息进行维护
l可新增某条开源软件的信息
--可以点击新建按钮新增某一条开源软件信息
公司领导
对公司相关的开源软件有特殊关注--在首页有对公司参与的相关软件的一个集中展示
需要查看一些统计数据--详情页面多维度的统计信息。
一般开发人员
l根据开源软件名称和url可以在系统中查找到该软件的相关情况.
---首页的搜索功能,并在suggest中对该软件的相关信息进行展示,方便用户在不熟悉该软件名称时进行较准确的选择。
--在搜索不到用户输入的软件时,会给用户建议相近的软件。
--在每个页面的顶部设计有搜索框,无论用户在系统的哪个页面都能够最快的进行搜索,无须先返回首页。
l快速查看自己收藏的开源软件
--在软件详情页面可以对该条信息进行收藏,收藏后可以点击我关心的菜单,打开我收藏过的所有软件。
l可对查询到的某条软件信息进行补充等
--在软件详情页面可以点击我来补充按钮对该条信息进行维护
l可新增某条开源软件信息
--可以点击新建按钮新增某一条开源软件信息
l可以对使用过的软件进行评论
--在软件详情页面下方可点击评论,发表自己对该软件的一些看法。
4.UI设计
LOGO
通过讨论我们为这个系统设计了一个名字为“Panda”,寓意我们是成都的参赛队,另外Panda喜欢爬树,而我们的系统正好是一个爬数据的工具,正好不谋而合。
我们设计了一个宇宙星空的效果,logo是一双Panda的眼睛,能很简洁的带出我们的Panda形象,并且对我们强大的搜索功能有所寓意。
首页
首页是形象工程,对用户会产生最大的视觉影响力。
我们的首页选择了深邃的宇宙星空背景,不时还会有流星划过的动画效果。可爱的Panda身着宇航服在浩瀚星空搜寻,并为用户指示了首页最大的功能点——搜索。
其他页面
由于我们时间非常有限,对其他页面没有太多的细节设计。力求尽量做到简洁易用,配合用户需求的设计。
前端CSS:
墙裂安利:OES Magic UI 组件库
我们只对系统的布局进行了css编写,很多用到OES MagicUI组件的地方完全不用调整样式,对于我们快速开发一个漂亮的系统,非常有利。
本次参加公司黑客松大赛的作品展示