第三次做業--原型設計

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

小總結

此次的博客做業一句話來講就是很考驗思惟能力和設計能力，對三種基本的原型工具作了一個瞭解，原來都只會用一點墨刀，如今還了解了其餘兩種原型工具，還知道了原型對於一個項目的初期來講也是很重要的一個部分。我想，一個好的項目首先要有一個好的思惟能力和設計。如今才知道，只有先設計好了再寫代碼這樣出錯的機率纔會下降。原來也覺得界面設計不復雜，本身經過此次的博客做業的過程才知道原型設計也是很燒腦殼的不比敲代碼耗費的腦力少。可見，一個團隊當中有一個好的原型設計師是多麼的重要。此次的三種原型工具裏面選擇了用墨刀來畫，雖然之前用過墨刀可是此次的做業裏面也用到了之前沒有用到的功能。可是，此次博客做業也有不少讓本身不滿意的地方，好比有的界面還能夠優化，或者有的界面邏輯還不夠嚴密，可是因爲時間關係，也盡力啦~，下次繼續完善。