結對作業一

這個作業屬于哪個課程	2021春軟體工程實踐|W班 (福州大學)
這個作業要求在哪裡	結對作業一
結對學号	221801208、221801227
這個作業的目标	完成原型設計，并記錄PSP表格
其他參考文獻	Axure官方文檔
目錄 PSP表格 效能分析 原型位址 原型介紹 （1）設計思路 （2）原型展示 1.登入 2.論文檢索 3.收藏夾 4.熱詞分析 5.個人資訊 困難解決 1.工具使用問題 2.界面設定問題 3.側邊欄相關問題 4.輪播圖翻頁問題 5.圖表繪制問題 NABCD模型 原型工具 結對過程，隊友評價 結對過程 第一次結對感受

PSP2.1	Personal Software Process Stages	預估耗時（分鐘）	實際耗時（分鐘）
• Analysis	• 需求分析	120	135
• Learning to Use Tools	• 學習原型設計工具		180
• Discussion	• 結對讨論		150
• Design	• 界面原型設計	400	470
• Design Review	• 設計複審	100
• Report	• 報告	90
• Size Measurement	• 計算工作量	5
• Postmortem & Process Improvement Plan	• 事後總結, 并提出過程改進計劃	45	30
合計	1000	1190

    這次原型設計與預估時間出入較大的是“學習原型設計工具” 和“界面原型設計” 。雖然是第一次進行原型設計，但是及時地取其精華，去其糟粕，挖掘這個過程習得的知識與積累的經驗，意義比設計本身還要重大。以下列出了可取和有待改進的方面：

    1.需求分析的預留時間比較充裕。因為有過多次的程式設計經驗，多花精力分析考慮并不會浪費時間，相反，做到一半才發現行不通才最耗時。程式設計恰如行文，應深思熟慮，才能一氣呵成。為力求準确轉換使用者需求和程式設計語言，在這個節點上多花時間是可取的做法。

    2.學習原型設計工具占用時間不少。第一次用Axure設計，很多工具不熟練，一開始圖表也不知道要用元件庫，百度挺久才發現Axhub charts。今後在編碼之前可以像這樣做一個簡單的界面，有利于和使用者溝通。

    3.結對讨論的作用是配置設定任務，同時也為了追求需求了解的一緻性。兩個人對原型設計的觀點不盡相同，多花時間商讨，肯定能比較出誰的方法更佳或找到折衷的方案。

    4.界面原型設計耗時會比預想的略多，這也是時間把控最難的一步。我覺得光在PSP上空出一個單元給界面原型設計還不夠，另外還得列個原型設計的時間表，點出細化的步驟，例如界面架構要用多久來畫，每個功能要用多長時間填充。這樣時候才好看出來流程中的哪些步驟偏慢，在思考方向上誤入歧途，甚至做了無用功。回歸到本次界面原型設計的具體分析，實作功能界面需要不斷查找資料，在資料搜尋上花的功夫并不少于實際設計，譬如動畫、按鈕點選後的效果。一些在具體操作過程才會發現問題，隻有進一步讨論，這些難以避免，隻能在結對讨論的時候盡量多方面考慮。

    5.設計複審就是改動細節，背景、圖示和圖表的樣式，對前期工作進行完善。這一步有必要單獨抽出來，因為設計複審時間過長可以說明原型設計做不到位，或者前期工作不夠充分。

原型位址（需用除IE以外的浏覽器打開）

    1.需求一是支援使用者輸入單個論文題目或批量導入論文清單。我們小組單獨設計一個界面“論文檢索”，包含了搜尋框與檢索結果，并分隔成上下兩欄，使得搜尋結果排列更清楚。批量導入限制為excel類型檔案，這樣讀取的時候格式比較固定。

    2.需求二是通過論文清單，爬取論文的摘要、關鍵詞、原文連結。其實就是把搜尋到的内容克隆到本地，拷貝到本地。論文資訊支援增删改查，是以本地肯定要有一個副本，這在收藏夾界面可以看到。

    3.需求三是對論文清單進行增删改操作。删除隻需要點選相應按鈕，增加即通過上面提到的收藏，修改會再打開一個界面供使用者修改，相應操作會對資料庫産生修改。

    4.需求四是可對論文清單進行查詢，并爬取論文清單中不存在的論文。查詢的實作得基于字元串的比對，如果沒有找到想要的論文，應提示使用者到論文檢索界面搜尋。

    5.需求五是形成直覺的論文檢視方式，點選關鍵詞可展現相關的論文。我們組采用了關鍵詞雲圖，表現起來比較美觀有藝術感。目前作為展示，關鍵詞雲圖是借助生成器産生的。在後續實作的時候，要将關鍵詞與論文比對，需要在資料庫中維護一個關鍵詞字段，作為查詢字段。

    6.需求六是對多年間、不同頂會的熱詞呈現熱度走勢對比。按照需求所描述的走勢對比，選擇了折線圖，分三張圖對三個會議進行展示。為了充實内容，還添加了餅狀圖來展示top10熱詞各自的熱度比例。

    7.為維護使用者隐私，設定了登入和注冊。

    初始界面是登入界面，使用者如果忘記密碼可以通過“忘記密碼”功能找回。若還未注冊，可以選擇“點我注冊”。

    注冊需要使用者填入自己的郵箱，郵箱的作用是讓使用者找回密碼或接收一些系統資訊。

    找回密碼是通過往使用者郵箱發送驗證碼進行身份驗證，驗證成功後允許使用者重置密碼。

    論文檢索部分負責爬取網絡上的論文，并支援批量搜尋。搜尋結果顯示在“檢索結果”框。每篇文章的右上角都有一個收藏符号，點選收藏後文章的資訊就添加到收藏夾内，可以在收藏夾查找到。

    這是批量搜尋傳輸檔案的界面，選擇好本地檔案後，excel的檔案名以及每一行的搜尋内容都會展示在該界面。确定後開始批量檢索。

    收藏夾是展示使用者收藏到本地的論文。頭部放置一個搜尋框，附有單選按鈕，使用者可選擇搜尋内容為論文編号、題目、關鍵字中的一個，并且關鍵字支援模糊比對。搜尋框下面是本地搜尋結果，包含論文摘要、關鍵詞、原文連結。使用者可以修改和删除對應篇目論文。

    點選修改按鈕，會彈出以下修改表單，論文名稱、編号、網址、摘要都可以修改。

    收藏主界面上有個添加按鈕，打開後彈出添加論文表單，使用者可以手動添加一篇論文的各項資訊。關鍵字這一欄，使用者點選添加後，框内文字會變成關鍵詞氣泡，使用者可以清楚看到已經添加的關鍵字。

    熱詞分析包括熱詞圖譜、熱度走勢和熱度對比。

    标簽雲每隔2s切換一張圖譜，分别展示三大頂會的top關鍵詞。當然，使用者也可以自行點選切換。

動态效果：

    三大頂會在2016~2020年中選取三個熱詞分析熱度走勢（折線圖）。可以通過頁面頂部的按鈕切換三個會議。

    通過爬取到的論文的統計資料，展示top10熱詞各自的熱度比例（餅狀圖）。

    通過點選頁面右上角的小圖示，打開個人資訊。使用者可以對自己的資訊進行修改并儲存。也可以點修改密碼，完成類似“忘記密碼”的操作流程後，修改自己的密碼。

    如何快速入門Axure Rp？

    起初是看官方文檔，但針對性不強，是以就先找了個視訊教程完成基礎入門的内容。後來為了完成界面設計，學習了許多網站的排版，還有B站上優秀的UI設計，集衆家之長彌補了審美上的不足。

    收獲：如果是短期開發或開發速度要求比較快，需要結合實際需求，查找合适的資料，高效完成學習，為開發節省時間。

    如何設計界面，如何将各個功能合理導航顯示出來？

    一開始，我們的想法是一個功能獨占一個界面，在頁頭導航欄設定跳轉連結。但在實作後覺得頁頭導航不夠直覺，側邊欄相對來說更加醒目，于是采用了側邊欄導航。

    收獲：在敲定一個方案之前，不妨列出多個方案，站在使用者的角度多個角度對比，盡可能使使用者體驗達到最優。

    側邊欄選項在滑鼠經過以及點選選中後如何産生樣式的變化？

    每個選項加上滑鼠懸浮和選中樣式。

    如何在點選選中一個選項後将前一個選中的取消？

    保持隻有其中一個選項選中，首先想到的辦法是：在每個選項的單機事件裡面都再加上将其它選項的取消選中事件；但在查詢資料後，發現可以将幾個選項選中組合屬性，這樣一個組合中就隻能有一個被選中的選項。

    二級清單彈出收起時如何遮住下層清單？

    二級清單彈出收回：使用動态面闆，先将面闆隐藏，點選後控制其彈出收回。其中遇到的問題是如何使其彈出時不遮住下方選項；查教程後，在設定動态面闆顯示的功能選項裡有個一推拉下方元件的功能，可以在面闆出現收起時将下方的元件推開進而不影響顯示。

    點選清單選項怎麼顯示相應功能界面？

    點選清單選項顯示相應功能界面，最開始是想寫多個界面，每個界面都有一個側邊欄，這樣不僅顯示功能解決，前面的側邊欄狀态頁都可以解決。但這十分不符合實際需求并且浪費資源。之後也是使用動态面闆，每個狀态都代表一種功能，點選側邊欄後跳轉相應狀态即可。

    關于以上四個問題的收獲：這些比較個性化的問題，很難在視訊或官方文檔直接查找到答案，百度也是找了挺久。過後發現其實實作花費的時間不算特别差，查資料倒是占用了不少時間。其中原因主要是兩點：原型設計實踐太少，工具和實作方法都不太熟練；學會搜尋也是一項技能，但是沒有找到關鍵詞上，或者找的教程起不了作用，這也是需要多實踐，才會形成的一種對有效資訊的敏感性。

    輪播圖如何自動播放的同時并允許手動翻頁？

    輪播圖有兩個跳轉方式:1.自動播放，2.點選按鈕翻頁。但是點選按鈕後，自動播放會失效。解決辦法時在點選按鈕的功能中再加一個輪播自動播放的功能。

    是否有比較簡單的圖表繪制方法？

    最開始不知道圖表用什麼畫，百度找到了很多回答，描述的方法很粗糙，其中最多的是徒手繪制，這很費時間也不美觀。後來找到圖表元件庫，隻需要輸入資料即可繪圖。

    收獲：很難實作的一些前端效果也類似原型設計，可以先找工具，沒必要重新實作一遍，提高開發效率。

N（Need，需求）

• 擷取待爬取論文清單及論文資訊爬取
  • 支援輸入單個論文題目與批量導入論文清單
  • 通過論文清單，爬取論文的摘要、關鍵詞、原文連結
• 對已爬取的論文清單進行操作
  • 支援對論文的增删改
  • 可對論文清單進行查詢，支援根據論文題目、論文編号或關鍵詞進行查詢
  • 若使用者爬取到的内容中沒有符合查詢條件的論文，則到網絡上爬取論文，并傳回論文的摘要、關鍵詞、原文連結
• 分析已爬取到的論文，提取top10個熱詞
  • 形成關鍵詞圖譜的檢視方式，點選關鍵詞可展現相關的論文
  • 可對多年間、不同頂會的熱詞呈現熱度走勢對比，以動圖的形式展示
• 具有注冊、登入、找回密碼、檢視個人資訊的功能
• 界面盡量美觀、動态

A（Approach，做法）

• python爬蟲實作對論文的爬取
• 前端部分用vue架構與echarts實作
• 将論文資訊存儲在資料庫中，便于維護資料的持久性,易于增删改查
• 分析資料庫中的論文關鍵詞，以圖表的形式展現top10熱詞
• 使用免費的雲伺服器，降低成本
• 借助大學城的人脈，讓大學生試用，進而得到推廣

B（Benefit，好處）

• 爬取到的論文來自各大網站，使用者無需耗費大量時間在網上檢索，隻需一鍵式搜尋
• 雲圖幫助使用者快速找到熱詞對應文章
• 關鍵詞走勢帶領使用者把握熱門研究方向
• 收藏、删除、修改操作簡單，一目了然
• 論文排版清楚，關鍵詞明确，使用者體驗較好
• 收藏隻包含網頁連結，本地空間資源占用小

C（Competitors，競争）

• 相較于收費網站，我們的網站是長期免費使用的
• 我們的網站可以爬取多個論文網站的論文，其他網站上找不到的論文，在我們的網站都可以找到
• 資料可視化，直覺地展示當下熱詞，而大多數論文網站隻有論文
• 使用者在本地收藏夾即可增删論文，形成使用者個性化的收藏空間，幫助使用者管理零散的論文，這是知網等網站不具備的功能
• 我們的網站具有很強的針對性，是對計算機專業的同學非常友好的論文檢索平台，可以過濾掉很多無效資訊
• 操作簡單，使用友善

D（Delivery，推廣）

• 可以在學院群内先做宣傳，找到初始使用者
• 在微信公衆号上發推文
• 聯系其他學校的同學，在各個學校的官Q上推廣

• Axure Rp
• Axhub Charts圖表元件庫

    第一次結對由于現實條件的限制，都是在qq線上溝通的。對于界面樣式，功能都讨論了很久才着手設計。互相之間能直接快速地指出對方在構思上的不足，進而提出切實可行的方案，使得設計過程高效進行。結對分工很大程度提高了速度，兩個人能在不同的子產品并行設計，比如布局上的安排，一個人考慮難免不周全，另一個人能夠幫助補全缺漏。

    在技術和對需求了解上，可以互相尋求幫助。

ch：第一次嘗試到《建構之法》中提到的結對程式設計這一概念。一開始以為隻是兩個人把各自的任務配置設定好就能很好地完成這次作業。并且由于曾經一直對結對程式設計的效率存疑，因為曾有過做小型的項目時多個人做統一方面工作分工時在合代碼時出現較大問題。但現在發現是當時沒有足夠的溝通和細緻的分工。還有就是進行原型的分析和設計，在原型分析和設計時，由于是第一次使用axure rp軟體，得先進行軟體學習，在開始開發的時候遇到比較多的小問題，通過自己查閱資料和檢視老師推薦的教程之後解決，自己也通過這次結對了解的UI原型設計的難度，遇到的最大問題就在審美上面了，日後會提高這方面的能力，不斷完善自己。

hj：雖說是第一次結對，但是我們沒有太多意見上的分歧。一個人在一周内完成設計并完成部落格撰寫是比較困難的，ch在這次結對中給予了很多技術幫助以及問題解決的有效方法，比起獨立設計效果要好不少。我在這個過程中學到了不少東西，不光是Axure的使用，需求的分析吧，還有如何面對技術難題，如何與隊友溝通，如何将想法轉化為設計呈現給使用者。總體來說收獲頗豐。