第一次結對編程作業

一、結對情況

結對情況表

結對成員：

王鎮隆 （博文鏈接）
陳珊珊 （博文鏈接）
吳珂雨 （博文鏈接）

  我們這組比較特殊，因為有三個人。我和珊珊受到了上一次個人編程的刺激，覺得如果不會又沒有人教的話，同樣一件事情，其實不困難，只是因為不知道如何去做，浪費的時間會是其他人的好幾倍。但是臨近DDL了，我們很難再找到沒組隊的兩個人，本來想着自己硬着頭皮做下去，突然在群里看到鎮隆還沒有組隊，於是就有了三個人的隊伍。這樣在能力互補的同時，也能夠從對方身上學習到不同的東西，但是為此也要付出一定的代價，就是要完成一定量的公共任務。

二、原型分析

寫在前面：
此次原型設計還停留在一個非常粗糙的狀態，后續還會根據具體需要進行改進。

原型模型設計工具

  本次原型模型設計采用的是Axure Rp 9，並且通過AI軟件繪制素材。本來想用PS或者AI進行原型模型設計，通過查找資料和詢問朋友得知Axure Rp是一款比較專業的原型模型設計工具，上手也比較容易，最終決定采用它。

---

以下采用NABCD模型進行分析

(1)N——Need（需求）

  把它單純地看作一次作業來來看的話：本次結隊的任務是開發一套“福建十三水”游戲的自動化出牌系統，而此次作業要求對該系統進行原型模型設計，包含登錄界面、當前對戰狀態、往期對戰結果、往期對戰結果詳細情況、排行榜等界面。
  而把它看成一個應用來看的話：
   (1)面向的群體：老少皆宜
   (2)群體需求：1.消遣時間、釋放壓力的一種方式
2.聚會及節假日的一種娛樂方式

(2)A——Approach（做法）

step1.對需求進行分析，分析出大致需要個九個頁面，並且分析了頁面與頁面之間的關系

• 頁面分別為：

  • 開始界面
  • 登入界面
  • 注冊界面
  • 選擇界面
  • 房間界面
  • 當前對戰狀態
  • 排行榜
  • 往期對戰結果
  • 往期對戰詳情

• 頁面間的關系：

  • 流程圖：
    

  • GIF圖：
    

step2.確定原型設計的風格、色系，接着打個初稿，確定每個頁面的框架和結構以及所需素材

step3.用AI軟件繪制界面背景、藝術字等素材

step4.利用Axure Rp軟件制作界面

界面分析：

• 開始界面
  
    “開始”界面中有一個“開始游戲”按鈕，按下即可鏈接到“登錄”界面，已有賬號的玩家可直接填寫用戶名和密碼登錄，無賬號的玩家可點擊“注冊”按鈕。

• 登入界面和注冊界面
  
  
    這兩個界面是花費我們最長時間的部分，因為在選定色系和元素時在這兩個界面上做了很多不同的嘗試，起初想做的是藏藍色系+黑色+金色或者墨綠色+棕色系，這兩者更具有游戲感，也特別具有卡牌對戰游戲的特點，但是考慮到大部分卡牌游戲都是這樣的風格，所以我們決定做清新簡潔一些的，為了切合游戲主題，我們使用了撲克元素的圖案，同時輔以豆沙色系和奶茶色系，中和了卡牌的紅色和黑色帶來的沖擊感，這樣就將色系和風格確定下來了。
    這兩個界面的背景利用AI軟件進行繪制，接着利用Axure中的基本元件，比如矩形、文本框、圖片等等做成一個窗口，從而形成登入界面和注冊界面。
    未注冊的用戶，一開始進入“開始游戲”界面，然后點擊“注冊”，進入注冊界面，填寫昵稱、用戶名、密碼即可注冊成功。已注冊賬號的用戶可以直接填寫用戶名和密碼進行登錄，登入后進入選擇界面。點擊右上角的“×”按鈕返回開始界面。

• 選擇界面
  
    此界面中有“創建房間”、“加入房間”、“金豆玩法”這個3個按鈕供玩家進行選擇，點擊“創建房間”或者“加入房間”按鈕即可進入“房間”界面，點擊“金豆玩法”，可鏈接到“當前對戰狀態”界面。

• 房間界面
  
    此界面是一個玩家選擇“創建房間”和“加入房間”按鈕后轉到的界面，玩家旁邊有一個“准備”按鈕，點擊即可開始打牌。

• 當前對戰狀態
  
    “當前對戰情況”界面指的是用戶本人在打牌過程中看到的界面，此界面可以是二人局、三人局，也可以是四人局，以下圖片顯示的是四人局的情況，每個人有13張牌，分別表示前墩、中墩、后墩。此界面利用的Axure和AI軟件，利用AI軟件繪制，將撲克元素的圖案，結合一定的顏色搭配，形成一張背景圖。接着利用Axure軟件的基本元件（矩形、文本框等），加上顏色的搭配，所結合而成的界面。

• 排行榜
  
    “排行榜”界面顯示的是和本玩家打過牌的所有玩家（包括本玩家）的得分及排名情況，點擊左上角的“×”號，即可返回“當前對戰狀態”的界面。

• 往期對戰結果
  
    “往期對戰結果”界面顯示的是用戶個人在不同戰局的積分和金豆情況，同時能夠看到用戶ID和昵稱以及當前時間。此界面結合Axure軟件和AI軟件，其中戰局ID的地方利用的是Axure軟件的基本元件中的，“按鈕”元件，鏈接到“往期對戰結果詳情”界面。

• 往期對戰詳情
  
    “往期對戰結果詳情”界面顯示的是某一戰局各個玩家手上的牌及得分情況。在右上角的地方有一個“×”號，點擊即可返回到“當前對戰狀態”的界面。

B——Benefits（好處）

• 界面采用了簡潔的設計和清新舒服的色系，中和了卡牌的紅色、黑色和白色帶來沖擊感和視覺疲勞感，整潔美觀、有層次感的界面給用戶帶來更好的視覺體驗。
• 操作簡單，能夠給用戶提供一種消遣時間、釋放壓力的方式，同時在春節等節假日以及聚會的情況下也能夠提供一種娛樂方式。

C——Competitors（競爭）

• 優勢：界面簡潔、清晰，相對於游戲感強烈的界面，能夠減少視覺上的疲勞感，並且功能能夠滿足需求。
• 劣勢：缺乏游戲感。

D——Delivery（推廣）

目前還停留在設計階段，設計較為粗糙，沒有進行推廣，后續如果要進行推廣的話，會針對不同年齡段的人群進行推廣，並且會進行分時段推廣，預測春節等節假日使用人數會更多。

三、描述結對的過程，提供非擺拍的兩人在討論、細化和使用專用原型模型工具時的結對照片。

結對照片：

結對過程：

  三個人能組隊真是緣分，兩個代碼能力弱的女生加上一個審美比較弱的男生，能力互補，互相學習，大家都非常的積極，組隊當晚鎮隆就組織我們在活動室開了第一次會。
  首先討論了UI和代碼之間的聯系，查詢網上資料和詢問學姐，有了初步的了解。
  然后分析了原型的需求。
  接着討論了原型的風格和色系。
  最后進行了分工的確定。
  之后每天都有進行討論和交流，珂雨和珊珊提供素材需求，鎮隆會把找好的素材進行分類和命名后發送，制作完后會發給鎮隆，鎮隆提出修改意見，珂雨和珊珊進行修改，如此反復直到大家都覺得OK。

分工：

王鎮隆：提供活動室組織討論、制作要求、素材、數據並對原型和博客提出修改意見。
陳珊珊：框架制作、界面交互設置、寫博客（主要負責提供界面視頻錄制、圖片，其余部分和珂雨一人一半）。
吳珂雨：框架和結構設計、AI繪制、界面規整化和美化、寫博客（主要負責博客結構的安排，界面視頻轉GIF，其余部分和珊珊一人一半）。

四、PSP表格

PSP2.1	Personal Software Process Stages	預估耗時(分鍾)	實際耗時(分鍾)
Planning	計划	45	50
· Estimate	· 估計這個任務需要多少時間	45	50
Development	開發	730	900
· Analysis	· 需求分析 (包括學習新技術)	80	95
· Design Spec	· 生成設計文檔	120	130
· Design Review	· 設計復審	50	75
· Coding Standard	· 代碼規范 (為目前的開發制定或選擇合適的規范)	-	-
· Design	· 具體設計	480	600
· Coding	· 具體編碼	-	-
· Code Review	· 代碼復審	-	-
· Test	· 測試(自我測試，修改代碼，提交修改)	-	-
Reporting	報告	135	145
· Test Report	· 測試報告	45	60
· Size Measurement	· 計算工作量	45	35
· Postmortem & Process Improvement Plan	· 事后總結, 並提出改進計划	45	50
	· 合計	910	1095

五、設計說明

此次原型模型設計是針對“福建十三水”這一游戲的自動化出牌系統制作界面。

• 整體設計風格：簡潔、干凈，有層次感。以撲克牌的四種花色作為主體元素，輔之以奶茶色系和豆沙色系，看起來非常清新、舒適。
• 背景：均利用AI軟件繪制，使用了兩種不同的背景，用簡單的線條、色塊和撲克牌花色結合，輔之以陰影的效果，使之看起來更加立體。
• 排行榜、往期對戰結果、往期對戰結果詳情等界面：采用半透明的矩形、漸變色便簽以及純色的矩形等元素，輔之以陰影的效果，使之看起來主次分明。
• 開始、登入、注冊等界面：使用簡單的矩形+邊框和一些看起來比較復雜的元素，二者繁簡結合看起來簡單而不失精美。
• 當前對戰界面：撲克采用簡化撲克，使界面看起來不那么復雜，更加舒適。
• 藝術字：部分來自網絡，部分使用AI軟件繪制，采用紅黑結合，和主題色融合，簡潔而不顯單調。

六、遇到的困難及解決方法

（1）需求分析：

困難描述：

  對班級博客發布的作業要求和技術助教發布的作業要求理解存在沖突，要求當中多了一些一時沒辦法看懂的要求，比如說接口，AI目標，UI目標等等，導致分不清楚這次原型設計除了設計原型模型以外，是否還要提交相應的代碼，以及怎么利用接口把UI和代碼連接等等問題。

解決嘗試：

  首先詢問技術助教，他告訴我們這次作業只要求設計原型模型，代碼是下一次作業的任務，如何連接二者也是下一次任務應該考慮的問題。
  接着詢問了上一屆的學姐，學姐跟我們解釋了第一次結對作業和第二次結對作業之間的差距及聯系。
  最后我們開會討論，討論結果為就算第一次不用提交代碼，但是要盡量符合編程任務里面的需求，可以避免一些不必要的麻煩，同時還進行了問題的查詢，初步了解了原型模型和代碼之間的聯系。

是否解決：

 是，解決了。

有何收獲：

  有不清楚的地方就要多詢問、多交流、多討論以及多查找資料，來彌補自己知識上的空缺和理解上的不足。
  對原型模型和代碼的聯系有了初步的了解。

---

（2）風格和色系的確定

困難描述：

  卡牌游戲的風格非常難把握，我們在兩種深色系和比較普遍的風格中糾結了非常久，素材方面的話如果要畫人物或者場景，會耗費大量時間，畫風也非常不好控制。

解決嘗試：

  首先在查詢微博以及各種素材庫，收集了一些設計配色，尋找靈感。
  接着是考慮主題，因為是卡牌游戲，所以考慮用撲克牌上的元素，但是卡牌元素的顏色看久了會非常疲勞。
  最后決定以溫和的顏色來綜合卡牌顏色，確定了簡單、清新的設計風格。

是否解決：

  是，解決了。

有何收獲：

  有時候一條路走不通，可以嘗試另外一種，選擇合適的、擅長的，效果也不會太差。

---

（3）框架和結構的確定

困難描述：

  這個困難不是非常大，唯一碰到的困難就是排行榜界面、歷史對戰情況等界面由於設計得很簡單，做出來以后的感覺略顯簡陋和沒有質感。

解決嘗試：

  首先去自己平時玩的游戲中尋找靈感，最后決定采用陰影、漸變、透明度等效果來增加層次感，這樣界面就會有質感一些。

是否解決：

  是，解決了。

有何收獲：

  多多利用自己已經擁有的資源，多觀察，追求質感而不是追求速度。

---

（4）各種工具的使用

困難描述：

  看到各種復雜的工具的時候糾結用什么比較好，同時也不清楚具體用法。

解決嘗試：

  首先是詢問朋友和查找資料，最終確定用Axure。
  在確定風格和色系后，開始去慕課網觀看教程學習，一步一步上手后再制作。

是否解決：

  是，解決了。

有何收獲：

  學到就是賺到，技多不壓身。

---

七、心得

王鎮隆：
  聽到這次結隊作業的時候一臉蒙蔽，要求一直在改的樣子，越來越難，不知道怎么弄，因為沒做過不了解，ui和背后代碼之間的聯系，只會做很簡單的python和java的gui，然后到處問同學，可能我問的也不怎么清楚，然后同學也不是很清楚，然后說的我也一知半解的，晚上的時候和隊友集合討論了一下，加上有一個學姐路過說了一下，后面菜相通，這次做的原型，只算一個模型而已。。。終於搞懂了，這次作業，主要就交給 隊友負責，我就直接開始寫后面的核心代碼了，果然，太菜了，我還要學好多東西啊

八、記錄自己的學習進度條（每周追加）

第N周	新增代碼(行)	累計代碼(行)	本周學習耗時(小時)	累計學習耗時(小時)	重要成長
1	100	100	10	10	學習代碼查重的相關知識
2	650	750	29	39	成功將代碼查重解決，雖然還沒最終批量化處理
3	150	900	20	59	接觸python的gui