Panda开源信息收集网站设计冲刺

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可以对使用过的软件进行评论

--在软件详情页面下方可点击评论，发表自己对该软件的一些看法。

Panda开源信息收集网站设计冲刺 Panda开源信息收集网站设计冲刺 Panda开源信息收集网站设计冲刺

4.UI设计

LOGO

通过讨论我们为这个系统设计了一个名字为“Panda”，寓意我们是成都的参赛队，另外Panda喜欢爬树，而我们的系统正好是一个爬数据的工具，正好不谋而合。

我们设计了一个宇宙星空的效果，logo是一双Panda的眼睛，能很简洁的带出我们的Panda形象，并且对我们强大的搜索功能有所寓意。

首页

首页是形象工程，对用户会产生最大的视觉影响力。

我们的首页选择了深邃的宇宙星空背景，不时还会有流星划过的动画效果。可爱的Panda身着宇航服在浩瀚星空搜寻，并为用户指示了首页最大的功能点——搜索。

其他页面

由于我们时间非常有限，对其他页面没有太多的细节设计。力求尽量做到简洁易用，配合用户需求的设计。

前端CSS：

墙裂安利：OES Magic UI 组件库

我们只对系统的布局进行了css编写，很多用到OES MagicUI组件的地方完全不用调整样式，对于我们快速开发一个漂亮的系统，非常有利。

本次参加公司黑客松大赛的作品展示