結對作業一，原型設計。

結對作業一

這個作業屬于哪個課程	2021春軟體工程實踐|W班(福州大學)
這個作業要求在哪裡	作業要求
結對學号	221801413、221801427
這個作業的目标	閱讀《建構之法》第3章和第8章的内容，學習NABCD模型； 根據所學，兩人結對合作，閱讀客戶描述的現實困擾，進行原型設計。
其他參考文獻	CSDN、簡書、知乎、墨刀官網教程

目錄

• • PSP表格和效能分析
    • PSP表格
    • 效能分析
  • 原型位址
  • 原型介紹
    • 網頁結構
    • 1.首頁
    • 2.背景
    • 3.頂會介紹
    • 4.使用者登入
    • 5.分析與統計
  • 困難解決
    • 困難一：動态效果
    • 困難二：熱詞動圖
    • 困難三：部分題目要求描述模糊
    • 困難四：資料來源
  • NABCD模型
  • 原型工具的使用
  • 結對過程，隊友評價
    • 結對過程
    • 結對感受
    • 對隊友的評價

PSP2.1（Pair Programming）	Personal Software Process Stages	預估耗時（分鐘）	實際耗時（分鐘）
Planning	計劃	10
Estimate	估計這個任務需要多少時間
Development	開發	840	872
Analysis	需求分析(包括結對讨論）	90	74
Learning Tools	學習原型設計工具	60	132
Design	總體設計	30
Prototyping	原型制作	600	606
Test	測試（自我測試，修改頁面，送出修改）
Reporting	報告	45	66
Size Measurement	計算工作量	15
Postmortem & Process Improvement Plan	事後總結, 并提出過程改進計劃		33
Total	合計	895	945

總體分析

通過閱讀學長的博文，再結合對這次作業要求的分析，進行了時間預估，總體和預想的沒差太多：

• 原型制作，共10個小時，安排了分三天完成，預計分别做2、4、4個小時，實際有彈性調整，分别做了2、5、3個小時，當日任務完成就休息，确實也如期完成了。
• 需求分析與總體設計，預估時是以單人為标準，然而衆人拾柴火焰高，集兩人的智慧去思考怎麼設計頁面、滿足需求、使産品更具有競争力是比想象中要快的，是一個新奇的體驗；同時，UI設計上，結合了常通路的幾個較有設計感的網站的優點作為美術參考，這也節約了用時。
• 總而言之，潛藏于每個環節中的“溝通”這一動作，相較于個人作業要花費更多的時間成本，但以此換來的是整體效率上的提升，原型制作一氣呵成，且兩個人互相盯着，一有問題就馬上指出，幫忙修改，是以最後測試也沒什麼大問題，比預想的更快完成了，是以認為這個交換是值得的。

哪些子任務存在效率低下的情況？

原因是？

• 線上原型設計網站比想象中的要更難以使用些，其本質是自帶素材庫的可視化網頁設計工具，一打開就有滿螢幕的按鈕可以點，有Android Studio和VS的即視感了。而它不見得有前述兩者好用，光是“學會如何使用兩人協作功能，并開始設計”就花費了将近40分鐘。再者，工具都是有缺點的，在：習慣它的各種“坑”；選擇、尋找素材；找不到理想的時隻好自己去學着制作，這些事情上，也花費了大量的時間。
• 因為是結對程式設計，相比于個人程式設計，PSP表格的時間資料來源有了參考了，通過翻看qq聊天記錄與通話時間計算了每個子任務的用時，是以在計算工作量花費了較多時間。

改進方法？

• 技術不足、菜是原罪。其實通過翻看學長的部落格，就能提前知道軟工實踐課每個階段要用到什麼新的工具、技術，完全可以在學有餘力的時候提前了解、學習，至少先注冊個賬号、下載下傳個軟體點進去也好啊，這樣每次作業就能多一些餘裕。
• 每一天的各類工作完成後對用時即時進行記錄，不要老留着到最後去回顧計算的壞習慣。通過翻閱《建構之法》也發現，以天、小時為機關地進行任務安排與時間管理（以及效能分析？）對于團隊項目開發十分重要，這也是靈活中的關鍵一環。是以，要上手學習更多的管理方法論了（如制作燃盡圖等）。

其他不足

因為221801427同學有完美主義傾向（強迫症），細到每個字型大小，控件XY軸，頁眉頁腳位置都要安排得明明白白，但又沒有利用好原型設計網站的“母版”功能，是以導緻不斷地去手動調整，浪費了一些時間。---221801427

原型位址戳這裡

注：文中提到的“熱詞（關鍵詞）、熱門領域、熱門研究方向”含義均近似。

産品提供了一個開放且美觀的搜尋頁面，不用登入即可自由進行論文搜尋，使用者可以通過點選頁籤來切換搜尋選項。同時，考慮到像“小剛”這樣的同學初次搜尋CV領域論文時的盲目性，設計了關鍵詞标簽相關的功能：

• 按關鍵詞搜尋論文，頁面頂部的搜尋框支援模糊搜尋，可通過空格或逗号分隔不同關鍵詞，文章的标題、摘要、内容、關鍵詞或研究領域均可以被指向。

  搜尋框的下方提供了“添加使用者感興趣的标簽（領域或關鍵詞）”的功能，也可對其進行修改、删除的管理（頁面暫未設計）；

  頁面中部則提供了圖文并茂、雙語兼具的關鍵詞推薦，近期熱門文章推薦卡片，作為新使用者進行搜尋的參考，且它們都能夠根據使用者個性化定義的标簽偏好進行實時重新整理；

  點選推薦的關鍵詞卡片，搜尋框便會自動為使用者鍵入并提供搜尋結果；而點選近期熱門文章卡片，即可直接進入具體文章詳情界面；

  頁面底部為計算機視覺三大頂會CVPR、ICCV、ECCV的logo，點選可前往對應的簡介頁面。

  

• 按作者名搜尋所著/參與的論文，同樣的，提供了自動分析使用者個性化定義的标簽偏好，來進行所對應領域論文作者推薦的功能，告别搜尋的盲目性。

  

• 按論文編号/标題更精确地搜尋單篇論文。當檢測到使用者輸入的是論文編号時，提供直接指向具體對應論文的選項；當檢測到使用者輸入的是論文标題時，展示可能的比對結果，也可點選進入；若無對應論文則進入搜尋結果頁面并告知無搜尋結果。

  

産品提供了友善且快速的背景頁面，支援使用者自己去爬取想要的論文，導入倉庫，以便搜尋與檢視。但考慮到可能有人對論文倉庫進行随意、惡意修改，是以設計為登入後才可使用背景功能。

• 爬取界面

無或者無理想搜尋結果時，使用者可在搜尋結果頁面點選進入爬取論文界面。可以輸入單個論文标題進行爬取并顯示成功/失敗；也可以上傳固定格式的EXCEL/txt等檔案，經過系統自動分析，批量擷取待爬取論文，标題清單展示在左側，可以進行清空、單個修改或删除（錯誤輸入等），點選批量爬取後自動到網站爬取論文的摘要、關鍵詞、原文連結，并顯示成功/失敗；點選完成按鈕進入論文倉庫頁面檢視爬取結果。

• 論文倉庫

  對已有的（已爬取）的論文進行管理（資料庫存儲），可修改與删除錯誤的導入，想要添加更多論文則點選前往爬取界面。為友善剛爬取完論文的使用者檢視，表格預設按最新爬取時間排序，也可以設定按熱度或者釋出時間二次排序。

  

• CVPR、ECCV、ICCV簡介頁面

  展示關于三大頂會的簡介，點選"檢視熱門領域"按鈕可以跳轉檢視該頂會十大熱門領域，給初識CV與三大頂會的使用者提供了一個快捷了解資訊的管道。底部logo可跳轉至其他頂會介紹，圖例僅展示CVPR界面。

  

産品提供了注冊，密碼登入或短信驗證碼、微信掃碼快捷登入以及找回密碼的功能。

• 密碼登入

  

• 使用者注冊

  

産品提供了展示搜尋結果和對CV三大頂會論文熱詞進行分析、統計并可視化展示的功能。

• 熱詞分析

  分析相關領域每年釋出的論文數，通過動态呈現的折線圖給使用者直覺地展現三大頂會中十大熱門領域熱度近年走勢對比。點選上方頁籤可切換頂會，滑鼠移入某條熱詞折線上可高亮顯示。

• 關鍵詞餅圖

  使用餅圖，展現top10熱詞各自論文數在top10熱詞論文總數中的所占百分比，以此作搜尋與了解了解CV領域研究現狀的參考。

  

• 詞雲圖

  使用詞雲圖來展現熱門領域。

  

• 論文清單（搜尋結果頁面）

  采用與百度近似的左内容右邊欄的頁面設計。将查詢結果以清單的形式顯示，可按熱度或釋出時間排序，每條包含論文标題、作者、摘要和關鍵詞，使用者可以通過點選相應區域檢視文章詳情，下方則有收藏、點贊、引用快捷鍵；如果在背景資料庫中找不到比對項，産品則提供其他學術論文網站的檢索結果以及連結，同時，頁面最下方也設定了點選前往爬取界面的按鈕；右邊欄的上方傳入在搜尋框鍵入過的關鍵詞，可通過添加和删除來改變搜尋結果，直覺又快捷；右邊欄下方則展示近期十大熱詞以及熱詞雲圖（點選前往大圖頁面）。

  

• 論文詳情

  使用者可以檢視文章的詳細内容，包括浏覽量。可以對文章進行點贊、收藏、引用與下載下傳一系列操作，若無下載下傳資源則可通路旁邊的原文連結。右邊欄與搜尋結果頁面近似。

  

解決方法：如下拉菜單，一開始是打算使用模闆中現成的下拉菜單，但是後來發現這些模闆要麼有無法更改文本的問題，要麼與網頁整體設計不搭配等等的問題。之後，我們查詢了相關教程，學會了設定元件不同狀态，通過狀态之間的切換來實作菜單的顯示與折疊。頁面頁籤的切換也是同樣的道理。

解決方法：我們使用了詞雲圖、餅圖以及折線圖來展現相關領域熱度變化，而這些圖是利用Highcharts網站中已有的模型，我們改寫其中的資料以及代碼使其适應本身的要求，然後使用墨刀的網頁元件将代碼嵌入相應的原型界面中。但其中詞雲圖由于自己寫的實在太醜，隻好去專業網站WordArt制作，但由于擷取資源要付費，隻能使用截圖替代。

解決方法：“主動爬取論文”這個功能頁面自己是從來沒見過的，沒有參考，需要發揮自己的想象力，素材庫裡的模闆不理想就要自己設計。

解決方法：一開始對論文爬取抱有疑問，這不是都有版權的嗎？平常去知網等平台随便點一個進去看都麻煩的很。因為了解到後續作業涉及到的資料來源主要針對三大頂會，是以後來去CVPR的一個很簡單粗暴的論文開源網站浏覽了下，發現全是标題、關鍵詞、摘要等純文字、pdf、arXiv資源裸放，恍然大悟。而對于其他可能不提供原文資源、需要付費擷取的論文，則發展出了原型介紹中不展示原文内容、爬取原文連結、通路原文連結等一系列設計，來解決這一問題。

N (Need，需求)

潛在使用者：

A：初出茅廬的小剛同學

• 對CV領域感到酷炫！抱有十足興趣。
• 但對文獻的檢索技巧掌握不足。
• 對CV領域也是完全初識，認不得幾個單詞。是一名懵懂少年。
• 我是誰？我在哪？我該搜尋什麼能出來我想要的？
• 再這樣下去拖下去興趣就要變成三分鐘熱度啦。。。
• 總而言之是個小白。

B：網絡老手的小強同學

• 見識與閱讀面較廣，識得不少專業術語。
• 但也僅限看的懂啥意思，想加深了解CV。
• 常年上網沖浪的經驗給他帶來了天然的資訊檢索技巧。
• 但碎片化的資訊閱讀讓他成為了一名急躁青年。
• 進入專業文獻查詢網站，各種界面資訊應接不暇，光是搜尋框下面就好幾個複選框要點，内心開始崩潰：我隻是想了解下CV與三大頂會呀！
• 總而言之是個有求知欲的好同學，但沒有耐心。

C：做過科研的小果同學

• 相比小剛與小強，專業知識肯定是具備了。
• 掌握了文獻的檢索方法，是以更注重體驗。
• 了解到近三天某個頂會召開了！想去即時了解下前沿熱門領域。
• 進入三大頂會官網，網頁十分卡頓，令人煩躁，且UI也不是很友好。
• 耐心逐漸用盡。。。網絡上的部落格也隻是推送部分文章，不一定是自己想看的。
• 總而言之，使用者體驗的問題。

D：熱于分享的段老師

• 教計算機的一名老師，專業知識自不用說，熱于給同學們分享前沿科技。
• 可能正在上導論課，突然想向同學們介紹下CV熱門領域，三大頂會。
• 當場一個個百度不太合适吧，上課效率何在？
• 可能晚上在備課，想在PPT裡插入推薦同學們了解的最新會議論文。
• 但是老師好像都很忙啊。。。可能沒有時間搜尋素材、資料了。
• 總而言之，便捷性的問題。

需求：

1.新手友好的論文檢索功能，人性化、個性化的關鍵詞查詢功能，操作簡單；提供各種關鍵詞、熱門文章、作者以供搜尋的參考。

2.提供爬取論文服務以及基本的增删改，存儲原文連結、标題、作者、摘要、關鍵詞、論文編号等資訊。在網站内閱覽，告别通路國外卡頓網站的糟糕體驗。

3.論文範疇為CV領域與三大頂會，更有針對性，查詢起來沒有幹擾項，很快速便捷。且展示了熱詞可視化圖譜、集中了三大頂會介紹等以供了解，不用去一個個查了。

4.使用者權限方面，遊客不得對論文倉庫做出任何操作，隻供查詢，注冊使用者可自由通路爬取功能。

A (Approach，做法)

1.産品将基于Web平台開發，因其兼具可跨平台通路、無需額外安裝、便于浏覽大量文字以及下載下傳資源等優點。

2.我們團隊掌握了java網絡程式設計以及資料庫相關技術，能完成核心要求功能如論文的爬取、管理、查詢并提供資源連結、分析熱詞并可視化呈現等要求。背景先通過爬蟲擷取論文清單和相關資源如pdf、源碼的下載下傳連結，并存入資料庫中（具體的爬取頁面實作思路已在原型介紹中描述）；查詢時與使用者輸入的關鍵詞、編号等進行比對，傳回結果；而關鍵詞圖譜（标簽雲等）的初步思路為通過傳入json資料至js代碼中實作。

3.我們團隊以前有開發個人部落格網站的經驗，可以對頁面進行與時俱進的美化，以及優化網頁整體操作邏輯等，以此來提升使用者的體驗。

4.團隊位于大學城，有一定地理和人脈優勢，大學生人群友善通過校園進行推廣、免費開放使用、吸引大量使用者，對産品進行測試并疊代優化。

B (Benefit，好處)

1.Web平台快速檢索，節省時間與網絡成本。

2.UI美觀簡潔，使用者體驗較好。

3.檢索範圍有針對性，無幹擾，也可主動爬取，對于想了解CV領域的使用者們很友善。

4.給出熱詞圖譜，資料展示更直覺。

C (Competitors，競争)

1.對标Papers、EndNote等文獻管理軟體，本産品有基于Web平台開發，可跨平台通路、無需額外安裝的優勢；且經調查了解，例如EndNote并沒有給論文打标簽、關鍵詞來進行管理的功能，本産品則可在論文倉庫進行編輯，并通過可添加标簽查詢，這也是我們的優勢。劣勢是我們未設計社群子產品功能，例如Mendeley就具有強大的社群功能，它甚至可以分享論文的pdf注釋與标記。

2.對标知網、百度學術等文獻查詢網站，我們的優勢是提供了熱詞的可視化呈現與便捷的标簽偏好查詢、管理，能夠幫助學術初心者的同學們快速上手、熟練的科研人員便捷查詢。同時，我們也可以設計更美觀的ui，帶來更好的使用者體驗。劣勢是我們的庫僅針對主要包括CV三大頂會會議論文在内的計算機視覺領域，且是以也沒有跨庫（期刊、輯刊、專利等）查詢的選項。

3.總結：搜尋範圍有限，功能不豐富。

D (Delivery，推廣；Data，資料）

1.首先在學院中進行推廣，主要面向向對計算機視覺領域有興趣的同學和從事這方面專業老師，并收集他們的回報意見以及使用資料。

2.獲得一定的回報意見後，進行産品功能改進，嘗試通過學校平台向計算機與軟體相關專業的學院、研究所推廣，擴大使用者基數。

3.針對QQ、微信等社交平台進行網頁的宣傳，進一步擴充使用者。

• 墨刀-線上原型設計與遠端協作平台
• 資料可視化圖表庫HighCharts
• WordArt線上詞雲生成器

1. QQ通話、聊天交流

   整個學習與開發過程兩人通過qq電話與聊天形式直接交流想法，資料與成果，較為高效。

   

2. 版本控制

   通過墨刀的版本記錄功能進行版本控制。

   

3. 交流設計

   簡單、有經驗參考的頁面設計思路直接通過語言與文字傳達，無參考時則手繪設計交流。

   

4. 協同開發

   試用了墨刀企業版的協作功能，其儲存功能無沖突問題，延遲也不高，很友善很快樂。

   

5. 任務安排

   以下展示結對作業checklist，每日的完成順序為從下至上。

   

221801413:這是我第一次結對完成一次作業。與單人完成的項目不同，這次原型設計是經過兩個人不斷讨論完成的，比如網頁的整體頁面結構以及具體頁面的相關細節實作等。兩個人不同想法之間的融合可以讓網頁細節更加完善。當然，對于同一問題的不同看法，我們也會通過了積極地溝通來達成共識，這不僅提升了我們表達自身觀點的能力，也增強了個人的溝通能力。并且，在原型設計與實作的過程中，通過制定計劃，約定時間，分工合作的方式，極大的提升了開發效率。（特别是對于我這種拖延症患者）。

221801427:我的結對的感受大部分都在效能分析中叙述了，那些部分這裡就不啰嗦啦！總之是個快樂的“做中學”的過程。後知後覺的原型設計上的不足之處就是我們沒做使用者個人界面，因為從一開始就覺得搜尋、爬取、熱詞頁面才是側重點。還有就是寫部落格時，感覺NACBD模型與原型介紹有不少上下重複啰嗦之處，明明在原型介紹裡寫了，而在NACBD裡卻不得不又寫了，也不知道寫的好不好。

221801413:在作業釋出第二天就找了我結對，非常感謝我的隊友。在這次網頁原型設計過程中，我覺得LG同學在設計細節處把握的非常好，比如頁面與元件之間的顔色的統一和諧、合理設定字型大小提升閱讀體驗等等。并且他在最初就制定了每天的任務，讓分工更加明确。當遇到難題時，我們會一起尋找解決方法；而遇到分歧時，我們能積極并及時溝通，以求達成一緻的解決方案。總的來說，我覺得這次結對體驗很不錯，也對下次的結對程式設計有了期待。

221801427:個人認為我主要做了指揮（領航員？）的工作吧，隊友很有耐心，勤快積極，分擔的工作不少，都很好的完成了。雖然由于作業剛釋出後我在準備考駕照的原因，延後了幾天才開始動工，但我們也沒有趕deadline，說明配合較默契、效率不低。總之沒什麼不對勁的地方吧！期待結對程式設計作業2！