第三次博客做業-原型設計

這個做業屬於哪一個課程	<課程的連接>
這個做業要求在哪裏	<做業要求的連接>
這個做業目標	明確什麼是需求分析，怎樣進行需求分析，以及學會根據需求畫出原型。

 

 

 

 

 

 

1、原型工具及對比分析

1.墨刀 

logo   

創做的基本界面

1. 它的操做簡單，經過簡單的拖拽和設置就能夠將想法、創意變成產品原型，這對於新手來講比較容易上手。
2. 實現交互比較容易。經過簡單拖拽就能夠實現頁面的跳轉。
3. 控件的拖拽、大小的調整，會自適應相應母版的大小，不用擔憂多移動一點這些細節問題。
4. 墨刀的系統控件基於App、系統平臺IOS和安卓，能夠選擇相應的設備佈局，很方便。
5. 相較於Mockplus，墨刀能夠直接從資源管理器拖拽圖片文件到設計區，很方便，Mockplus就比較麻煩，須要經過圖片導入對話框加圖片。
6. 總體比較，墨刀整個界面佈局給人直觀感覺很不錯。
7. 墨刀對於學生羣體來講，比較好的就是能夠免費建立3個項目組。

2. Axure RP

logo

創做的基本界面

1. 與其餘原型工具相比，Axure RP自帶組件庫並支持強大的第三方組件庫，提供了強大的交互支持。
2. Axure RP支持動態面板和複用模板，且能快速建立規格說明文檔。
3. 與其餘原型工具相比，Axure RP更趨於專業化，且在設計工具中算是老牌的原型工具，地位也不低。
4. Axure RP的過於專業化，使得它上手不易，與墨刀比起來，對新手太不友好，學生羣體的學習成本也比較高，因此它更適用於經驗較強、更專業的羣體。
5. 與墨刀相比，Axure RP只在前期提供30天的試用，試用期結束就要花錢購買，這對學生羣體不友好，因此通常學生羣體仍是選擇其餘原型工具更合適吧。

3.Mockplus

 logo

創做的基本界面

1. Mockplus與墨刀同樣，對新手來講容易上手，學習成本低，經過簡單的拖拽就能夠將想法變成原型。
2. Mockplus的組建資源也比較豐富，也一樣支持團隊協做。
3. Mockplus實現交互也比較容易，只需拖動鼠標，就能快速實現。
4. Mockplus中的形狀只能轉90度倍數角，這使得在設計時可能不能太知足用戶的需求，可是墨刀裏的能夠旋轉任意的角度，更靈活。
5. 對於連接設置，Mockplus沒有墨刀顯得直觀，由於在墨刀能夠拖拽到面板的目標頁，而Mockplus在下拉菜單裏設置。
6. 跟Axure RP比起來，適用人羣更普遍，新手專業人士均可以實現快速建立原型。
7. 跟Axure RP相比，對學生羣體比較友好，它的基礎版是免費的。

4.Proto.io

logo

創做的基本界面

1. 與其餘原型工具相比，Proto.io更專注化，具備豐富的移動端設計組件，專一於移動端原型開發。
2. Proto.io支持多屏互動和組件交互，UI元素豐富，用戶還能夠自定義。
3. Proto.io相較於上面的3個原型工具，不支持實時預覽，在交互動效較多時不流暢，因此性價比不高。
4. 與墨刀和Mockplus相比，成本過高，只能免費試用15天，以後就須要花錢購買，仍是不太適合學生羣體。

(吐槽一下：Proto.io在試用註冊時，註冊名須要是英文名，否則一直提示讓你輸入名，最開始試了3個字中文，四個字中文，都不對，最後英文名加姓才能夠。並且網頁加載的時候真的很慢！)

瞭解原型設計及對原型工具比較後的小結：

首先說說在瞭解了上面這些原型工具以後，對於原型設計的見解。「原型設計是軟件開發的初始階段，根據需求爲軟件建立原型的過程，原型一般用於演示、測試、溝通等。」這是百度對於原型設計的定義。原型設計實際上是很重要的，也頗有必要的一個環節。在我看來，軟件工程師的開發的過程與建築師的建築過程很類似，建築師在真正施工以前會有設計圖紙，而原型設計就是軟件工程師的建築圖紙。這使得在項目開發最初，能讓人真正感覺到產品，哪怕它不是最終的成果，可能還不完善，但這也是與用戶溝通的媒介。

在對比了上面四種原型設計的工具以後，在我看來，目前墨刀和Mockplus更適合學生黨，首先是由於比較容易上手，其次是有免費的可使用。但我的在對比了這幾個工具以後，更喜歡墨刀，墨刀的界面讓人感受很舒服，也比較容易學習，因此這次原型設計將會選擇使用墨刀。

2、需求分析

我所選擇的是「社團管理」的原型設計

首先在通讀了做業要求後，明確了主要是設計小程序端以及網頁端。小程序端主要面向本校學生，頁端則主要面向社團管理員、社聯，方便對社團相關信息進行管理。

爲了明確需求，對於小程序端以及網頁端我經過畫思惟導圖來釐清這個設計思路，以便對需求有更進一步的理解。

整體的需求分析：根據該軟件的用戶的實際狀況：學生、社團、社聯，因此將社團信息、活動信息等功能放在小程序端，社團管理等管理方面的功能放在網頁端。

小程序端思惟導圖

小程序端需求分析

1.用戶：明確主要用戶是西南石油大學學生。

2.場景：用戶在什麼狀況下會用到？學生須要瞭解社團信息的狀況下須要登入此係統。因此學生首先要註冊登陸進來，接着才能瞭解各個社團的信息，瀏覽發佈的活動，申請想要參加的活動，申請想要加入的社團，接收信息與通知。

3.問題：學生在使用此係統時，會面臨的問題。好比在註冊登陸以後可能忘記密碼；須要瞭解社團的詳細信息；須要對發佈的活動詳細瞭解；須要有途徑申請活動、申請社團；能夠接收信息與通知。

4.解決問題：由3中的問題就衍生出瞭解決這些問題的方案，也就是衍生出的一些功能。好比在學生註冊登陸以後忘記密碼，就須要有找回密碼的功能；要了解有哪些活動開展，就須要有活動列表，在活動列表處點擊某活動就能瞭解詳細的活動信息，且在瞭解活動信息以後就能夠有申請參加活動的報名方式；社團一樣如此，學生在瞭解社團的詳細信息以後，就能夠對感興趣的社團進行申請加入的操做；對於學生髮出的申請，通過管理員審覈以後，會回覆相關的通知，此時學生就須要可以接收信息和通知。

 

網頁端的思惟導圖

網頁端需求分析

1.用戶：明確主要用戶是社長管理員及社聯管理員。

2.場景：用戶在什麼狀況下會用到？社長在須要對活動進行管理的狀況下登入此係統。因此社長首先要註冊登陸進來，接着才能瞭解對各項活動進行管理，通知各項活動。社聯管理員在須要對活動、社團進行審覈時須要登進此係統，接着才能審覈活動，收取材料、評定社團的星級。

3.問題：社長管理員和社聯管理員在使用此係統時，會面臨的問題。好比在註冊登陸以後可能忘記密碼；須要管理社團的活動；須要通知各項活動；須要有途徑查看活動進行審覈；須要接受材料以及可以評定社團的星級。

4.解決問題：由3中的問題就衍生出瞭解決這些問題的方案，也就是衍生出的一些功能。好比在註冊登陸以後忘記密碼，就須要有找回密碼的功能；要管理活動，就須要能看到有哪些活動，並有管理的一系列操做功能；要審覈活動，就須要瞭解活動的內容等，並進行審覈經過或打回的操做；在評定星級以後，如有社團對所評結果有異議，能夠獲取申請從新評定。

3、原型設計

此處對本次原型設計的大體流程做部分截圖

在明確了需求以後，設計原型時也是根據需求來設計。

1.首先要新建項目組，接着新建項目

2. 能夠根據須要選擇畫原型的設備，以及該設備的版本

3. 根據實際狀況設置合適的啓動圖標及啓動封面

 4.根據須要選擇建立多少頁面

此處的頁面能夠根據實際須要添加子頁面，建立副本以及對頁面進行移動

 

 

 5.經過各類組件、圖標、文本、圖片等設計原型

 

 

 我設計的兩個原型

1.小程序端

i.這是根據需求設計的頁面的目錄

 ii.部分頁面的截圖：

 這些活動能夠下滑查看相關信息

 

2.網頁端

i.這是根據需求設計的頁面的目錄

ii.部分頁面截圖

 

 

兩個原型的查看地址 

1.小程序端

連接：https://free.modao.cc/app/f19409a830743742e83f95364ab95fabc603d57f

二維碼

 2.網頁端

連接：https://free.modao.cc/app/8ece752ff6c1926eb63201f14c678bc01a56d474

 4、總結感悟

本次博客做業在最開始看做業要求的時候，覺得沒有代碼就會很容易就完成了，也不會花不少時間。結果然的只是想象而已。首先對於原型設計，以前只是據說過，沒有真正上手畫過，在對比了原型設計的一些工具以後，對這些工具備了更新的認識，且各自有各自的獨特之處。對於需求分析，以前也寫過相關的需求文檔，只不過那時候並無真正認識如何進行需求分析，並且以前假期作項目寫需求計劃書的時候都是在作完了項目纔開始寫，如今想一想有點本末倒置。在原型設計時，因爲以前沒有畫過原型，就先想着在網上看一些基礎教程，可是最終發現其實要真的上手去熟悉這些組件，在畫中去學習比看教程要有用得多。對這次做業過程當中遇到的問題，作了以下總結，但願本身可以不斷改進。

i. 在進行需求分析時，若是隻是靠通讀要求來找需求其實很容易忽略一些需求，也不容易釐清需求，很容易讓本身陷入混亂的狀態。因此在進行需求分析的時候能夠藉助於畫思惟導圖、表格等形式來釐清需求，這樣會更直觀，更有規律。

ii.在進行原型設計的時候，要先根據需求分析肯定要設計幾個主要的頁面以及相關的子頁面。在畫小程序端的時候，不知道免費版還有頁面限制，只能畫20個頁面，超過的就要付費，就致使又不得不刪除以前畫的一些頁面，這樣既浪費了時間，又增長了新的工做量。因此在使用新工具時，要對此作更加全面的瞭解啊。並且看似畫原型容易，但佈局以及拖拽組件都須要花心思，花時間。

iii.本次博客做業也是熬了夜的-….-，因此博客做業和我的做業同時存在的時候，要更加合理分配時間！