《隊長說得隊》第三次做業：團隊項目的原型設計

項目	內容
這個做業屬於哪一個課程	>>2016級計算機科學與工程學院軟件工程（西北師範大學）
這個做業的要求在哪裏	>>實驗七 團隊做業3：團隊項目原型設計與開發
團隊名稱	隊長說得隊
做業學習目標	（1）掌握軟件原型開發技術； （2）學習使用軟件原型開發工具。

---

• 原型設計工具簡介

  • 墨刀MockingBot：免費的移動應用原型與線框圖工具

    墨刀MockingBot是一款免費的移動應用原型設計工具，這款產品能夠快速構建移動應用原型與線框圖，雲端保存，實時手機預覽，支持iOS和安卓，多種手勢及頁面切換特效支持。還有多種主題選擇，是產品經理與交互設計師的貼身小幫手。墨刀MockingBot是一個在線移動應用原型工具，旨在幫助產品經理及UI/UX設計師快速構建移動應用產品原型，並及時與團隊內其餘成員分享和討論。做爲一款專一移動應用的原型工具，除了雲端保存，實時手機預覽，MockingBot還有多種手勢，頁面切換特效及主題可供選擇。

  • 老牌原型設計工具 -Axure RP，Axure

    Axure RP是美國Axure Software Solution公司的旗艦產品，是一個快速的原型工具，主要是針對負責定義需求、定義規格、設計功能、設計界面的專家。Axure RP做爲老牌的產品設計工具，容許程序設計者爲程序或者網站製做動態的線框圖、流程圖、以及其餘所需的圖表。它能夠輔助產品經理快速設計完整的產品原型，並結合批註、說明以及流程圖、框架圖等元素將產品完整地表述給各方面設計人員，如UI、UE等等，並在討論中不斷完善。規範的圖標文檔可讓咱們在交流、記錄、設計上更容易被接受，使用Axure RP 創建更簡單、更專業的數據表、圖。

  • 網頁和移動端的設計sketch

    Sketch 是一款適矢量繪圖應用。矢量繪圖也是目前進行網頁，圖標以及界面設計的最好方式。但除了矢量編輯的功能以外，還添加了一些基本的位圖工具，好比模糊和色彩校訂。Sketch 是爲圖標設計和界面設計而生的。它是一個有着出色 UI 的一站式應用，全部咱們須要的工具都觸手可及。在 Sketch 中，畫布將是無限大小的，每一個圖層都支持多種填充模式；還有很好的文字渲染和文本式樣。必要的話，咱們也能夠用無限精準的分辨率無關模式來查看畫布，或者打開像素模式來查看每個像素導出後的樣子。可是 Sketch 並非一個位圖編輯應用，若是你想修正一張照片或者用筆刷來畫畫，那麼這不是你要找的應用。

  • 一款簡潔高效的原型圖設計工具mockplus

    Mockplus是一款簡潔快速的原型圖設計工具。國內官網爲www.mockplus.cn。Mockplus特別適合軟件團隊、我的在軟件開發的設計階段使用，使用人羣爲程序員、UI設計人員、產品經理、項目經理等。有別於Axure等重量級、高保真、須要學習培訓的原型設計工具，Mockplus的特點在於低保真、無需學習、快速上手、功可以用。沒有任何設計經驗的人，也能夠當即使用，並可以很好地表達本身的設計。Mockplus的產品設計理念在於「關注設計，而非工具」。Mockplus從設計上，採起了隱藏、堆疊、組合等方式，把本來複雜的功能，精心安排。上手很容易，但隨着你的使用，功能層層遞進，你會發現更多適合本身的有用的功能。新手不會迷惑，熟手能夠夠用。

  • 致力於高保真原型製做工具Justinmind

    JustinMind是由西班牙JustinMind公司出品的原型製做工具，能夠輸出Html頁面。它是一個很是強大的線框動態應用程序或軟件應用，專門爲移動端訂製的原型圖設計工具，無需編碼，簡單拖拽使用而已。使用JustinMind，你能夠在幾分鐘內利用其普遍的組件和交互繪製高保真原型。它提供了一些基本的形狀，如矩形和文本，還有特定的組件，如菜單，表單或數據列表。JustinMind提供了多種觸屏的交互效果，例如滑動、縮放、旋轉，甚至捕捉設備方向等等。在須要產生效果的部件中選擇對應的手勢便可。能夠建立本身的組件庫。JustinMind爲iPhone ，iPad，黑莓，Android提供了多樣的組件。你能夠建立自定義組件庫，方法是將排列好的單個組件放在一塊兒，並將它們集體框選拖動到組件庫。在JustinMind中，你能夠經過拖拽等方式來實現跳轉、定向等交互效果，無需像Axure同樣每一步都只能經過點擊來完成。而且顯示更爲直觀，如進度條。

  • 一款免費的帶有手繪塗鴉風格的原型設計軟件balsamiq mockups

    Balsamiq Mockups是產品設計師繪製線框圖或產品原型界面的利器。在產品設計的需求階段，低保真的線框圖或者草圖設計介於產品流程設計與高保真DEMO設計之間，在Balsamiq Mockups出現以前，流程圖可使用Visio，高保真DEMO可使用Axure，但咱們並無好用的草圖設計工具；在產品設計管理中，咱們一般在產品的業務流程和數據流轉已經至關明確時纔開始進一步考慮產品的結構層和框架層，雖然此時紙、筆、白板都是很是簡單方便的交流工具，可是他們的最大劣勢就是——很難將有價值的原型保存下來。Balsamiq Mockups的出現完美的解決了這個問題。

---

• mockplus原型設計工具團隊學習總結

  mockplus是一款快速設計項目原型的工具。mockplus界面比較簡潔，主要這些區域：
  1.頂部：頂部有主工具欄，其中包含了主菜單和最經常使用的快捷按鈕；
  2.中間：是創做時的工做區。
  3.在工做區底部，能夠查看到項目尺寸信息，設置工做區縮放，還能夠作軟件偏好設置；
  4.左上側：是項目樹面板，其中包含了項目和所屬的各個頁面或分組；
  5.左下側：是組件面板，其中包含了組件、圖標、個人組件庫以及母版，能夠經過選項卡作切換；
  6.右上側：是屬性面板，其中能夠設置組件屬性、交互和頁連接，能夠經過選項卡作切換；
  7.右下側：是組件大綱面板，其中包含了某個頁面中組件的層次關係。
  
  本次主要採用mockplus進行原型設計，因爲是第一次使用這個工具，對一些操做不是很熟悉，在設計過程當中只用了一些簡單的組件和一節交互，後續會不斷深刻學習。可是在導出項目時須要購買軟件，這一點感受很不友好。看到有些同窗選擇用墨刀進行設計，但因爲時間關係，就沒有從新設計，但後續若是有時間會選擇學習一下墨刀。

---

• 團隊項目github倉庫地址連接

  【點擊查看】

• 團隊項目原型設計成果

  • 登陸界面以及登陸成功後主頁
    

  • 管理員管理
    

  • 學生管理及添加學生
    
  • 樓宇管理
    
  • 宿舍管理
    
  • 查寢記錄
    

  • 調換宿舍
    

---

• 團隊項目的原型設計過程、原型設計心得總結

  • 設計過程

    首先每位成員經過官網上的教程對mockplus工具進行簡單的學習，而後咱們討論了咱們的項目應該展示的一些重要的功能，參考網上一些相似系統的界面後本系統的整體界面繪製定了大體草圖。接着根據每一個人的具體狀況進行分工。在各自設計的工程中遇到的問題你們都會積極的上網去查詢解決或者提出來你們一塊兒解決，從討論中不斷學習新的知識。最後將每一個人設計的部分進行整合，並共同對最後的設計進行進一步的美化。在整個設計中，每一個成員都積極參加到項目設計中，你們共同努力不斷進步。

  • 心得總結

    在本次項目設計中，你們互相配合，最終完成了本次原型設計。從本次原型設計中能夠感覺到人多力量大，每一個都想法都很新穎，在討論中不斷學習和借鑑其餘人的想法，不只完成了本次項目，還開闊你們的視野，有些事一我的作遠不如你們一塊兒作好。在討論和合做中也是一個團隊不斷磨合的過程，只有每一個成員參與到團隊項目中才能讓更容易融入這個小集體。固然經過此次設計也讓咱們瞭解和學習了原型開發的一些工具，也算是掌握了一項新技能吧。接下來咱們會根據老師的指導再接再礪，認真作好每一次做業。