第三次作業--原型設計

A君第三次原型設計作業：第三次作業

 

這個作業屬於哪個課程	<https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign/>
這個作業要求在哪里	https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign/homework/8636
這個作業的目標	了解原型制作工具，學會制作原型

###Part 1 常見的原型工具及其比較 ####墨刀

（1）有關介紹：墨刀是一款在線原型設計與協同工具，借助墨刀，產品經理、設計師、開發、銷售、運營及創業者等用戶群體，能夠搭建為產品原型，演示項目效果。墨刀同時也是協作平台，項目成員可以協作編輯、審閱，不管是產品想法展示，還是向客戶收集產品反饋，向投資人進行Demo展示，或是在團隊內部協作溝通、項目管理。

（2）在磨刀官網下載好后就可以直接微信掃碼登錄，登錄過后的界面：

（3）可以點擊新建項目來看看里面的具體操作：

（4）然后自己取一個項目名選擇喜歡的圖標以及顏色：

（5）接下來我們可以選擇自己來設計一個原型：

（6）可以選擇想要設計的類型以及型號，這里我選擇了手機的iPhone X：

（7）點擊創建后再點擊編輯項目就可以看到下面的界面：

（8）相關功能介紹：

• 頁面結構

可以在頁面列表下面添加新頁面、子頁面、創建副本、移動當前頁到其他項目、刪除等操作。頁面下方有一個頁面回收站，14天內刪除的頁面可以在回收站中找回:

• 創建頁面內容

磨刀有兩個組件區域，一個是高頻組件區，一個是右側組件區：
右側組件區：

高頻組件區：

• 添加頁面交互

為了演示效果首先從素材庫中置入一張圖片，點擊圖片上面的一個圓形鏈接按鈕，鏈接到相應的頁面就可以實現頁面交互了。

在添加鏈接的時候，還可以根據需求，設置不同的出發手勢，定時器以及動效。

• 素材庫內置動態組件

還可以自己制作動態組件，這里就要去了解狀態的使用方法了。子啊這里A君就不多多贅述了。

• 項目預覽，分享

點擊運行就可以進入原型演示模式：

點擊分享就可以獲取一個二維碼和分享鏈接：

磨刀小總結：

關於磨刀的一些基本的功能就講到這里啦，磨刀還有很多強大的功能，操作相較於來說還算是比較簡便，只需要將組件拖入中間的編輯部分然后進行一些對齊和加入一些效果。給我的感覺和微信小程序的頁面很像，原來使用磨刀的時候就有一種萌萌噠的感覺。但是要把磨刀用好還是需要下一番功夫的，特別是涉及到狀態的部分很容易弄混。本次涉及的是手機端的嘗試，當然網頁端的也是異曲同工。接下來進入到另外一個原型制作軟件Axture RP。

Axture RP

（1）有關介紹：Axure RP是一款專業的快速原型設計工具。Axure RP是美國Axure Software Solution公司旗艦產品，是一個專業的快速原型設計工具，讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。作為專業的原型設計工具，它能快速、高效的創建原型，同時支持多人協作設計和版本控制管理。

（2）和磨刀在創建頁面的時候，步驟基本相同：

（3）新建項目后，可以看到如下圖所示的界面：

（4）可以直接將元件庫內的原件拖入到畫布上進行設計：

（5）相關功能介紹：

• 設置原件不同狀態的交互樣式

點擊原件屬性中各個交互樣式名稱，即可設置原件在不同狀態時呈現的樣式。這些樣式在交互被觸發時，就會顯示出來

• 設置自適應視圖

自適應視圖是指編輯多種分辨率原型設備中查看時，系統會根據自身分辨率相適應的原型進行匹配，並顯示出來。自適應視圖在項目->自適應視圖中進行配置

• 查看原型

點擊預覽按鈕就會直接打開瀏覽器看到原型的設計效果：

Axture RP 小總結：

相較於磨刀，Axture RP給我的感覺就是很商業風，但是功能相較於來說比較復雜，但是呈現的效果很不錯，拿來設計網頁確實是個不錯的工具。下面來介紹最后一個原型工具Mockplus。

Mockplus

（1）有關介紹：Mockplus（摹客）是一款簡潔快速的原型圖設計工具。適合軟件團隊、個人在軟件開發的設計階段使用。其低保真、無需學習、快速上手、功能夠用。並能夠很好地表達自己的設計。

（2）在下載好Mockplus之后，完成注冊，就會出現如下界面：

（3）選擇相應的設備和類型創建好項目后，就會看到如下界面：

（4）左側可以搜索自己想要的組件：

（5）Mockplus的鏈接功能和磨刀的大致是相同的，這里就不多贅述了。

Mockplus 小總結：

Mockplus給我的感覺就是簡單，功能大致和前面的兩個差別不大，在組件部分的內容比較多。

對比三種原型工具

墨刀

墨刀可以說是很合適拿來做手機端軟件的設計，特別是APP的設計，從整體風格來說，墨刀的風格比較可愛，我想大多數的女孩子應該比較喜歡。墨刀的控件也是基於APP以及安卓等，相較於其他的原型設計軟件來說，比較簡單，畫面感很好，交互的內容也很豐富，還可以在雲端進行保存，可以說是很便捷了。

Axture RP

不得不說，用Axture RP來制作原型的工序是比較復雜的，並且手機預覽很不方便，多數是用於做網頁比較好，功能比較多，上手也比較慢。但是高保正確實是它的一個亮點。

Mockplus

功能簡便，也是比較合適用於網頁設計，Mockplus的設計更加人性化，用戶的體驗較好。

總結：

首先墨刀和Axture RP進行比較，墨刀便於上手，界面相較於來說比較美觀，對於墨刀來說設計的效率比Axture RP，作為原型的初學者，使用墨刀會比較合適，但是Axture RP會更加鍛煉技術，包括一些頁面邏輯和設計思維，因為墨刀的交互通過連線來實現，有的時候會給設計者帶來混亂的感覺（親身體驗），Axture RP的交互更加自由，便於設計人員的理解。

Axture RP和Mockplus進行比較，Mockplus相較於Axture RP來說功能簡便了很多，不如說是Axture RP的精簡版，Axture RP可以高仿真度模擬。如果要制作高仿真度的原型，Axture RP不得不說更加合適。而Mockplus屬於低保真，上手快，功能基本能滿足設計者的要求。Mockplus的設計對於開發者來說更加人性化，操作起來很方便。

墨刀和Mockplus進行比較，墨刀的交互功能不是很強，相較於Mockplus，Mockplus的交互更加好，在交互效果，控件組合上不如Mockplus靈活。

對原型設計的看法：

1.首先要進行原型設計就要對整個產品的需求進行准確的分析，這樣才會有一個基本的思路。
2.我認為原型設計對於一個網站或者說對於一個軟件來說都是很有必要的東西，首先，原型設計能夠建立起對於整個項目的外觀，功能的概念，便於開發人員和用戶理解整個項目。
3.有了這樣一個實體，也便於開發人員之間的商討以及對項目的改進，以免再開發中途發現有的地方不合適再來進行修改對整個項目的損失不可估量，也就是，原型的設計可以降低項目開發的風險。
4.補充了想像的空白，便於和客戶溝通。

Part 2 需求分析

選題：

項目需求如下：
面向普通學生和社團管理員，集合了各個社團的信息，特色功能是活動的瀏覽和報名，以及活動的發布、審核與通知，同時還具有加入社團、發送站內信等功能。

項目背景和解決的痛點：
學生剛入西南石油大學時缺乏了解社團的長期的、便利的渠道；社團公眾號文章分散各處；群里發的活動報名問卷容易被水過去，而且每次要填的信息都差不多。

社團管理員在管理社員時沒有一個很好的工具，來發布活動、統計報名人員、通知活動變更等。

社聯在管理所有社團時，在審核活動申請、審核場地申請、星級評定、材料收取等方面也存在一些困難。因此，我們希望能打造一款軟件連接學生、社團和社聯，根據用戶不同的使用需求，我們計划給將社團展示、活動報名等功能放在手機小程序端，在社團管理的大部分功能放在網頁端。

項目面向的用戶：
小程序： 主要面向西南石油大學學生，其中的社團管理功能，則面向社長等社團管理員。
網頁端： 主要面向社長等社團管理員，還能面向社聯。

總體需求分析

• 社聯：審核活動申請、審核場地申請、星級評定、材料收取。
• 社團：發布活動、統計報名人員、活動變更、活動申請、活動通知。
• 學生：活動報名、活動瀏覽、活動報名、加入社團、發送站內信息。

社聯需求分析

1.社聯所在為網頁端。
2.功能需求分析：
社團管理員端

• 登錄界面：登錄社聯管理員賬號，輸入賬號和密碼，找回密碼操作。

• 首頁：登錄完成后進入社聯首頁，展示社聯相關的信息，比如一些社聯的介紹，社聯相關榮譽的展示等。

• 審核界面：社聯管理員審核社團的活動和場地申請，在頁面上方，可以查詢活動申請。頁面下方為審核頁面，在審核頁面內還要顯示所有未審核的社團活動以及審核通過的活動以及被打回的活動，在審核頁面的下方有兩個按鈕，一個為通過按鈕一個為不通過按鈕，按下不通過按鈕會彈出一個輸入框，輸入不通過的理由。

• 收取材料界面：收取社團的材料，直接匯總在社團材料庫內，可以進行社團材料的查看。

• 星級評選界面：進行星級社團評選，每個社聯人員都可以進行投票，票數最多者可以獲得星級社團的稱號。星級社團的界面包括社團名，社團logo，社團簡介，成員組成，星級認定。

思維導圖如下：

社團需求分析

1.社團所在為網頁端和小程序端。
2.功能需求分析：
社長端：
網頁端：

• 登錄界面：登錄社長賬號，輸入賬號和密碼，可以進行修改密碼操作以及找回密碼操作。
• 社長個人界面。
• 查看和查找社團發布的活動界面：社長可以看到本社團的活動情況（包括報名人數統計等）以及可以查找所有社團發布的活動。
• 簽到情況頁面：在完成活動后會進行簽到統計活動，在該頁面會顯示參加該活動所有社員的簽到情況。

網頁端思維導圖：

小程序端：

• 登陸界面：登錄賬號，修改密碼，認證，找回密碼操作。
• 個人空間界面。
• 在個人空間里可以進行社團建立：創建社團。
• 社員信息界面：可以查看該社團的社員申請信息以及已加入社員信息你。
• 發布活動界面：在發布活動界面，要填相應的活動內容以及活動地點等信息，最后發表活動。
• 發布活動變更通知界面：重新填寫活動信息，進行活動變更消息發布。

程序端思維導圖：

學生（社員）需求分析

1.學生（社員）所在為小程序端。
2.功能需求分析：

• 登錄界面：登錄學生（社員）賬號，輸入賬號和密碼，可以進行修改密碼操作以及找回密碼操作，學生認證。
• 個人空間界面：里面包含我的活動庫（包含已參加活動和未參加活動）、消息通知（活動更改通知）、我的社團、聊天消息記錄（發送站內信息）、簽到提醒、問題反饋、我的收藏、我的好友、信譽額統計。
• 首頁活動界面：在活動界面里面包含活動瀏覽、活動報名、活動搜索（輸入活動名），加入社團。
• 我的社團界面：包括我管理的社團以及我加入的社團。
• 加入社團界面：在加入社團界面填寫相關的個人信息，申請加入社團。

學生（社員）端思維導圖：

手機端演示圖：

網頁端演示圖：

原型設計的可查看地址

小程序端鏈接:https://free.modao.cc/app/103xke8subnlk126xx66708y0cmzamy

網頁端端鏈接:https://free.modao.cc/app/NDIJjHeq7xfjXJPQcS8bZy5UycnwIfj

小總結

這次的博客作業一句話來說就是很考驗思維能力和設計能力，對三種基本的原型工具做了一個了解，原來都只會用一點墨刀，現在還了解了其他兩種原型工具，還知道了原型對於一個項目的初期來說也是很重要的一個部分。我想，一個好的項目首先要有一個好的思維能力和設計。現在才知道，只有先設計好了再寫代碼這樣出錯的概率才會降低。原來也以為界面設計不復雜，自己通過這次的博客作業的過程才知道原型設計也是很燒腦袋的不比敲代碼耗費的腦力少。可見，一個團隊當中有一個好的原型設計師是多么的重要。這次的三種原型工具里面選擇了用墨刀來畫，雖然以前用過墨刀但是這次的作業里面也用到了以前沒有用到的功能。但是，這次博客作業也有很多讓自己不滿意的地方，比如有的界面還可以優化，或者有的界面邏輯還不夠嚴密，但是由於時間關系，也盡力啦~，下次繼續完善。