結對項目之需求分析與原型設計

王淩傑（031402631） 李烈争（031402614）

可用PDF觀看，更為直覺清晰。

• PDF

需求分析（NABCD）

• N（Need，需求）:

  現有的導師選擇系統是單向的，而且資訊的彙總是一層一層向上彙總最後進行人工整合，然後進行某種神奇不知道名字的算法進行配置設定，這樣的做法費時費力，而且容易出錯。在這種情況下，學生對導師的認識有限，選擇的過程不透明、不是雙向的，對導師不公平、選中之後通知不及時、選中後要導師or學生的聯系方式不友善、而且現行的做法是老師發一個導師聯系方式或者學生的聯系方式的excel表格，這樣的方式檢視不友善，而且容易洩露個人資訊（我的資訊就是不想被某人看到之類的）針對這些問題，我們産品就是為了解決這樣的問題。

• A（Approach，做法）:

  畢業導師選擇的過程一輩子隻有一次，而且面對跨平台相容的問題，操作便捷性，web是最好的選擇。對此我們打算做一個網站，其中有學生、老師、管理者三種登入人員，不同的人員有不同的權限，看到的資訊也是不同的，我們的做法是是将學生、老師的個人資訊，選擇要求等導入一個資料庫中，不同的人，顯示不同的資訊，導師選擇、配置設定成功後，可以顯示選中的老師，學生等。具體的實作方式，看下面原型設計的過程。

• B（Benefit，好處）:

  流程更加透明，學生老師的互相了解更多，雙向選擇，選中之後可以第一時間知道自己被誰選中/選了誰，獲得導師和學生的電話。

• C（Competitors，競争）:

  優點：同好處；劣勢：其他組的人都很強啊，設計的東西也很好，壓力好大；其他組的原型設計都是彩色的，我們的是素描的，會不會直接夭折？

• D（Delivery，推廣）:

  推廣的對象當然是老師和教務處啦，學生沒有決定權。範圍這麼小，明确，直接發郵件，上門推廣就好了。

原型模型設計工具

• Mockplus 原型設計工具 選擇的理由是操作簡單，學習成本低（其他也有下載下傳體驗過，比較之後）。
• Adobe Photoshop (圖檔的裁剪，合并，圖檔排版（以下圖檔排版都是使用photoshop的聯系表II功能）mockplus免費版不可導出圖檔，有時候截圖不能完整)
• XMind 思維導圖工具
• Onenote 文檔共同編輯
• 手機 計時工具

下面是原型模型工具的界面圖：

模型設計過程

模型結構及相應功能子產品讨論

這裡我們使用的是XMind思維導圖來做，這樣做的好處就是對大概要做什麼有一個大概的了解，模型設計的時候可以從大到小，不拘泥于細節。紙質版的草稿就不上了，圖醜字亂（醜），下面使我們這次讨論完成後的思維導圖：

對于上圖的一些細節問題，我們打算放在下面詳細介紹。從上圖看，我們将整個網站的功能子產品分成了四大塊，登入界面、學生界面、管理者界面。我們原型設計時選擇的時素描類型，對于用彩色的來說，可能不是那麼的直覺，但省去各種配色的問題，節約了時間。這是我們選擇素描的初衷。做完後算了一下，總工有28個界面，這麼多的界面每個都詳細的介紹，篇幅不夠，是以，選擇一下典型的界面進行講解，其他的整合成一張圖。

1.登入界面

登入界面比較簡單，有三個單選框按鈕，選擇不同的登入類型，進入不同的界面。

2.學生界面

剛進入學生界面，首先看到的就是導師清單，側邊導航欄采用的是下拉清單（手風琴），節約空間，共有個人資訊、導師選擇、志願管理、結果四大塊。可能你要問了，為什麼一進來首先看到的四導師清單？因為我們認為，我們的目的是選擇導師，填寫個人資訊之類的東西都是為選擇導師服務，是以将這個界面提到最重要的位置，在下面導師界面重也有同樣的考慮。

• 導師個人資訊

點選導師清單中的一個item則會跳轉到導師的個人資訊，導師的個人資訊除了導師的基礎資訊之外，還給出了導師的詳細介紹連結（學院網站内的資訊，該網站可由導師編輯）。同時下方還給出了導師公布的留言用以Q&A。學生可以看到導師公布的Q&A也可點選下方的留言鍵，對導師留言或提問 。如果學生覺得該導師為自己心儀的導師，則可點選選擇，使該導師成為候選導師進入志願管理清單。

• 個人資訊界面&編輯個人資訊界面

  

  學生個人資訊中的聯系方式，郵箱，個人簡介是可編輯的，其他不可編輯。如果能從教務處直接導入就更好了。
• 導師資訊、志願管理&結果

  

  在學生界面點選導師清單進入到導師資訊界面，一些導師的基本資訊，下面有選擇、留言功能，如果這個老師是你想要的，點選選擇就好了，有什麼想問老師的就點選留言。留言功能子產品下面詳細介紹。在志願管理界面中有你選中的導師表，上下移動來差別 1~5五個志願，同時可以删除志願，再次挑選導師。以時間到時的志願為最終志願。

  

3.教師界面

• 學生清單&學生資訊界面

  

  

  這裡的未選學生清單其實是個學生選擇該老師的一個清單，點選學生清單中的某一條，進入學生資訊界面，老師檢視資訊後可以選擇選擇或傳回（拒絕）。選中的學生進入已選學生清單，導師可在已選學生清單中進行取消選擇操作。導師選擇時間結束後的最終已選學生清單編入資料庫，在管理者界面進行算法配置設定。
• （編輯）個人資訊界面

  

  一些老師的個人資訊，部分可編輯，如編輯選擇學生人數，如圖。

  老師的個人資訊下，會有其公開的留言用作Q&A，友善學生了解老師，也節省老師回複重複問題的麻煩

• 留言管理&留言回複

  

  前面有說到學生可以給老師留言，一個老師收到很多的留言，點開進行回複。

  選中下方的是否公布，則老師的回複以及學生的留言會以Q&A的形式在老師個人資訊的下方顯示出來。

4.管理者界面

• 管理者界面&最終結果

  

在管理者界面中，先看到的是一個大的清單，這是一個動态的資料庫，每個同學選完後可以添加一條某某同學選擇某老師的資料，當管理者點選通過算法進行配置設定是會彈出确認輸入管理者密碼的彈窗，上面可以工号，學好，名字等進行篩選。

• 導入教師（學生）清單

  

  這裡的資料直接從教務處導入，因為如果不是這樣子的話，大量的添加工作和現在使用的方法差别不大。

1. 互發郵件功能

   需求分析中講了現在配置設定方式中存在的資訊洩露問題。這裡我們希望用互發郵件的形式順帶的解決這個問題。為什麼是順帶呢？互相選中之後，系統發郵件通知老師和學生選擇結果，順帶的将老師的聯系方式發個選擇他的同學，學生聯系方式發給老師，這個老師的所有學生的聯系方式發給選同一個導師的同學（除他自己的）。這樣可以解決導師的電話隻有他的學生知道，學生的電話隻有導師和同一導師的同學知道。避免大範圍的暴露聯系方式。

2. 資訊

   消息清單和回報是每個界面中都有的，故将他們獨立出來介紹。功能如圖。

   

   PSP效能分析

   在此次的任務中，沒有具體代碼的實作，故代碼規範、代碼複審、具體編碼等涉及編碼的部分都沒有列出，沒有足夠的資料，無法進行效能分析，放一張效能分析圖也沒意思。故挂羊頭，賣狗肉，此次的效能分析也局限于本次原型設計過程。

PSP	計劃用時（min）	實際用時（min）
分析需求	20	40
設計	生成設計文檔	80	90
設計複審		10
原型設計	360	430
部落格整理	150	210
事後總結	30
提出改進
總計	670	810

用圖示更加直覺的表示：

從圖中可以看出，實際用時比預估的時間多了好幾個小時，時間超的比較多的事部落格的整理和原型設計。主要原因是原型工具的使用不熟練，邊設計邊學，咦~還有這種功能，哦~還可以這樣，為什麼不能那樣！是以剛開始比較慢，頁面中很多相同的東西是可以複用的，剛開始沒注意。花費了一些時間。部落格逾時主要是因為為了更好的表達、排版（圖檔合并）、新增了一些表格花費了一些時間。

最後上結對程式設計圖，非擺拍，不做作。

總結：

優點

1. 在這次結對程式設計中，兩個人一邊讨論，一邊做，想的更全面；
2. 讨論過程中，有分歧，讨論選擇最佳的一種，如果一個人做，也許做完之後看别人的才發現，哦，原來有更好的方法。比如我們在讨論是做留言還是聊天的時候産生分歧，讨論後選擇留言的原因是這樣可以省去很多您好，在嗎？之類的很多廢話，提高效率；
3. 能及時發現問題，馬上改正；一個人操作，一個人看着，你會發現沒對齊，字型樣式、大小不一樣等小問題，可以及時解決，節約時間；
4. 兩個人共同參與設計，兩人都熟悉整個流程，結構。今後不管是後端還是前端，都對項目；一個比較全面的了解。編碼時的溝通，效率方面也會提升不少。

5. 互相監督，其他的幹擾減少。

   不足

6. 1+1>2? 因為是兩個人合作，個人沒有單獨做過，沒有資料來說明效率上就1+1>2。當然品質上一般是肯定的。
7. 原型工具的使用不熟練。

PS：最後想說的是隊友很給力，合作很愉快。這也是一次好的開始。

2016/9/18 12:13