Panda開源軟件收集系統(tǒng)的設(shè)計(jì)
1.需求討論
我們反復(fù)對需求進(jìn)行討論和挖掘,對用戶的角色、場景都進(jìn)行了分析菌赖。
用戶角色: 開源治理的管理人員梅肤、公司領(lǐng)導(dǎo)司蔬、一般開發(fā)人員
2.場景:
開源治理的管理人員:
對本系統(tǒng)收集開源軟件的情況需要及時(shí)了解
根據(jù)開源軟件名稱和url可以在系統(tǒng)中查找到該軟件的相關(guān)情況
需要查看到開源軟件各種維度的統(tǒng)計(jì)信息
對與公司相關(guān)的開源軟件有特殊的關(guān)注
對名稱不清楚的情況可以通過各種篩選條件找出某個(gè)開源軟件
需要對開源軟件信息進(jìn)行保存
可以批量的更新開源軟件信息
可以單獨(dú)的維護(hù)某一條開源軟件信息
可新增某條開源軟件信息
公司領(lǐng)導(dǎo)
對公司相關(guān)的開源軟件有特殊關(guān)注
需要查看一些統(tǒng)計(jì)數(shù)據(jù)
一般開發(fā)人員
根據(jù)開源軟件名稱和url可以在系統(tǒng)中查找到該軟件的相關(guān)情況.
快速查看自己收藏的開源軟件
可對查詢到的某條軟件信息進(jìn)行補(bǔ)充等
可新增某條開源軟件信息
可以對使用過的軟件進(jìn)行評論
3.發(fā)散--收攏
開源治理的管理人員:
l對本系統(tǒng)收集開源軟件的情況需要及時(shí)了解
-----在首頁設(shè)計(jì)了對該系統(tǒng)實(shí)時(shí)收集軟件的統(tǒng)計(jì)信息
l根據(jù)開源軟件名稱和url可以在系統(tǒng)中查找到該軟件的相關(guān)情況
--在首頁最突出的位置展示搜索框,支持模糊匹配和suggest姨蝴。
l需要查看到開源軟件各種維度的統(tǒng)計(jì)信息
--在軟件詳情頁面俊啼,對該軟件的各種相關(guān)信息和統(tǒng)計(jì)信息進(jìn)行展示。查看信息的同時(shí)能隨時(shí)了解到該軟件與公司相關(guān)的情況左医,以及公司使用該軟件或?qū)υ撥浖呢暙I(xiàn)情況授帕。
l對與公司相關(guān)的開源軟件有特殊的關(guān)注
----在軟件詳情頁面也專門針對zte的統(tǒng)計(jì)
l對名稱不清楚的情況可以通過各種篩選條件找出某個(gè)開源軟件
--開源地圖功能
l需要對開源軟件信息進(jìn)行保存
--導(dǎo)出功能
l可以批量的更新開源軟件信息
--導(dǎo)入
l可以單獨(dú)的維護(hù)某一條開源軟件信息
--在軟件詳情頁面可以點(diǎn)擊我來補(bǔ)充按鈕對該條信息進(jìn)行維護(hù)
l可新增某條開源軟件的信息
--可以點(diǎn)擊新建按鈕新增某一條開源軟件信息
公司領(lǐng)導(dǎo)
對公司相關(guān)的開源軟件有特殊關(guān)注--在首頁有對公司參與的相關(guān)軟件的一個(gè)集中展示
需要查看一些統(tǒng)計(jì)數(shù)據(jù)--詳情頁面多維度的統(tǒng)計(jì)信息。
一般開發(fā)人員
l根據(jù)開源軟件名稱和url可以在系統(tǒng)中查找到該軟件的相關(guān)情況.
---首頁的搜索功能浮梢,并在suggest中對該軟件的相關(guān)信息進(jìn)行展示跛十,方便用戶在不熟悉該軟件名稱時(shí)進(jìn)行較準(zhǔn)確的選擇。
--在搜索不到用戶輸入的軟件時(shí)秕硝,會(huì)給用戶建議相近的軟件偶器。
--在每個(gè)頁面的頂部設(shè)計(jì)有搜索框,無論用戶在系統(tǒng)的哪個(gè)頁面都能夠最快的進(jìn)行搜索缝裤,無須先返回首頁屏轰。
l快速查看自己收藏的開源軟件
--在軟件詳情頁面可以對該條信息進(jìn)行收藏,收藏后可以點(diǎn)擊我關(guān)心的菜單憋飞,打開我收藏過的所有軟件霎苗。
l可對查詢到的某條軟件信息進(jìn)行補(bǔ)充等
--在軟件詳情頁面可以點(diǎn)擊我來補(bǔ)充按鈕對該條信息進(jìn)行維護(hù)
l可新增某條開源軟件信息
--可以點(diǎn)擊新建按鈕新增某一條開源軟件信息
l可以對使用過的軟件進(jìn)行評論
--在軟件詳情頁面下方可點(diǎn)擊評論,發(fā)表自己對該軟件的一些看法榛做。
4.UI設(shè)計(jì)
LOGO
通過討論我們?yōu)檫@個(gè)系統(tǒng)設(shè)計(jì)了一個(gè)名字為“Panda”唁盏,寓意我們是成都的參賽隊(duì)内狸,另外Panda喜歡爬樹,而我們的系統(tǒng)正好是一個(gè)爬數(shù)據(jù)的工具厘擂,正好不謀而合昆淡。
我們設(shè)計(jì)了一個(gè)宇宙星空的效果,logo是一雙Panda的眼睛刽严,能很簡潔的帶出我們的Panda形象昂灵,并且對我們強(qiáng)大的搜索功能有所寓意。
首頁
首頁是形象工程舞萄,對用戶會(huì)產(chǎn)生最大的視覺影響力眨补。
我們的首頁選擇了深邃的宇宙星空背景,不時(shí)還會(huì)有流星劃過的動(dòng)畫效果倒脓〕怕荩可愛的Panda身著宇航服在浩瀚星空搜尋,并為用戶指示了首頁最大的功能點(diǎn)——搜索崎弃。
其他頁面
由于我們時(shí)間非常有限甘晤,對其他頁面沒有太多的細(xì)節(jié)設(shè)計(jì)。力求盡量做到簡潔易用饲做,配合用戶需求的設(shè)計(jì)安皱。
前端CSS:
墻裂安利:OES Magic UI 組件庫
我們只對系統(tǒng)的布局進(jìn)行了css編寫,很多用到OES MagicUI組件的地方完全不用調(diào)整樣式艇炎,對于我們快速開發(fā)一個(gè)漂亮的系統(tǒng)酌伊,非常有利。
本次參加公司黑客松大賽的作品展示