原型設計

這個做業屬於哪一個課程	<https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign/homework/8636>
這個做業要求在哪裏	<https://www.cnblogs.com/harry240/p/11524127.html>
這個做業的目標	瞭解原型工具，利用原型工具作出本身的原型

 

 

 

 

1.常見的原型工具

• 墨刀

               定義：墨刀是一款在線原型設計工具。藉助於墨刀，創業者、產品經理及UI/UX設計師可以快速構建移動應用產品原型，並向他人演示。

　　　　優勢：

　　　　　　　1.墨刀是一個輕量級的圖像設計軟件，支持網頁編輯和本地客戶端編輯兩種方式，墨刀支持手機查看設計原型功能，方便快捷，上手快；

　　　　　　　2.墨刀的系統控件都是基於APP，其控件的拖拉、大小的調整，都會天然的去匹配相應的母版大小，體驗感極強；

　　　　　　　3.墨刀中相應的設備佈局，減輕了花費的相應時間。

　　　　　　　4.墨刀開發的Sketch插件能夠將Sketch中的Artboard直接導入墨刀中，而後進行交互操做（頁面跳轉）的連接設置。

               缺點：

　　　　　　　1.在交互效果上、控件組合上，操做面板的選擇上墨刀都不如Axure 靈活;

　　　　　　　2.須要充費纔可以使用更強大的共享建立功能;

　　　　　　　3.迭代要求快的時候可用墨刀，但產品交互精度高的，墨刀就不能知足該需求了；

　　　　　　　4.拖動頁面調節高度時的較嚴重Bug。（向上拖動頁面，若覆蓋了部份內容，內容會重疊，這個時候撤銷操做，都不能使內容恢復，須要從新佈局）

 

• Axure RP

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

    　　　優勢：

　　　　1.老牌的原型圖工具，功能齊全，交互多樣，基本任何想要的效果均可以實現，尤爲在製做PC端原型圖上有優點；

　　　　 2.Axure的動態面板、中繼器等功能很是強大，尤爲是目前AXURE 8上能夠設計出更多更符合產品的動態效果；

　　　　 3. Axure自帶的svn對於團隊合做也很友好。

               4.Axure是一款專業的快速原型設計工具。容許設計師爲Web/App原型設計添加專業，詳細的界面細節，動畫以及頁面轉化特效。支持在線原型分享和評論。併爲用戶提供了豐富的界面部件庫，以知足其各方面的界面設計需求。

      　　缺點：

　　　　  1.雖然Axure的動態面板、中繼器等功能很是強大，但十分難懂，只能對專業的、長時間學習Axure的「老者」才能精通，通常來講初學者學習Axure很難利用到其中強大的動態面板和中繼器；

　　　　  2.Axure素材從Axure原型庫、素材庫中尋找第三方的素材庫須要花費更多的時間；

　　　　  3.Axure到目前爲止，並未發佈任何相關的設計規範系統製做工具，供用戶使用或選擇。

 

• Mockplus

               定義：Mockplus（摹客）是一款簡潔快速的原型圖設計工具。適合軟件團隊、我的在軟件開發的設計階段使用。其低保真、無需學習、快速上手、功可以用。並可以很好地表達本身的設計。

　　　　優勢：

 　　　　　　  1.Mockplus是更快更簡單的原型圖設計工具，Mockplus原型設計和功能比較齊全，並且應用場景廣；

　　　　　　　2.Mockplus除用於移動APP原型設計，還能夠製做PC、網頁的原型設計，它能夠幫助UI設計師在最短的時間內完成產品原型圖的設計；

　　　　　　　3.Mockplus還提供豐富的互交設計和頁面切換功能， 設計師簡單點擊或拖拽便可實現交互動畫的添加。支持8種設計分享和測試方式，輕鬆蒐集各類Web/iOS/Android原型設計反饋。

　　　　　　　4.Mockplus封裝了強大的組件庫、圖標庫（提供了超過3000個矢量圖標）以及組件樣式庫（方便設計師簡單，快捷地實現組件樣式的收藏，複用以及分享）， 以幫助設計師輕鬆實現各類類型原型界面設計。

               缺點：

　　　　　　　1.Mockplus沒有流程圖功能；

　　　　　　　2.Mockpus不支持PDF的導出，對於須要直接導出PDF的用戶會有些不便；

 

2.需求分析

• 項目簡介：

項目名稱	StepEnter博客園班級博客客戶端
面向用戶羣體	使用博客園班級博客的教師 使用博客園班級博客的助教 使用博客園班級博客的學生
基本功能	在移動客戶端上實現博客園班級博客的基本功能 將移動客戶端的界面進行優化 將其功能進行修改和完善 （基本功能詳見下列用戶需求分析...）

 

 

 

 

 

 

 

 

 

 

 

 

 

 

• 用戶需求分析：

　　　　前提：隨着5G時代的到來，咱們利用國產手機巨頭華爲做爲移動客戶端模板進行原型設計！

總體需求	1.界面美觀簡潔，排版整潔 2.信息提醒功能完善 3.知足如下教師、助教、學生需求 4.在手機上能方便使用班級博客
使用博客園班級博客的教師	1. 建立班級的功能，將班級成員統一放在一個班級裏，方便管理 2. 爲了方便教師查看同窗們的博客完成狀況，須要給教師一個查看本班學生的博客權限 3. 可以在博客班級中發佈做業和教學內容 4.對學生做業進行管理的功能 5.對學生成績進行管理的功能（查看、修改學生成績、學生成績排名等操做）
使用博客園班級博客的助教	1.查看同窗們的博客完成狀況的功能 2.對學生博客做業進行批改的功能 3.對學生成績進行管理功能（評分、修改、公示） 4.交流功能（學生做業評論與交流） 5.對班級成員進行管理的功能
使用博客園班級博客的學生	1.完成博客做業功能 2.做業提醒功能 3.評論功能（使用班級博客進行學習交流）
用戶量	粗略統計博客園班級博客中的活躍用戶約3000人。（暫未估計還未使用班級博客的潛在用戶）

 

 

 

 

 

 3.博客中包含原型設計的可查看地址

 

 小程序：https://free.modao.cc/app/hjwh0v3joq8ocotce0ydb1emik0xvqaibdc67fxmhau6qzrpeb9vla6ecdi

 網頁端：https://free.modao.cc/app/4ngxepw1wsx6ue9sde677dgqfrk108hlnrmmnzs45kkzrmjo8yqqk8lrf6r

 

4.原型設計：包含完整小程序和網頁端等

• 小程序：

           名稱：StepEnter博客園班級博客客戶端

該小程序共有22個子頁面，使得老師、助教、學生的需求可以跟好的知足，截圖以下：

     

 

回到墨刀我的項目頁面，點擊查看詳情，查看小程序項目詳情：截圖以下：

 

 出現以下界面，獲得小程序項目詳情。不管是小程序的頁面名稱，裏面內容都盡收眼底，可以很快的瀏覽作的小程序，截圖以下：

 

 

 

• 網頁端

           名稱：StepEnter博客園網頁端

該小程序共有22個子頁面，使得老師、助教、學生的需求可以跟好的知足，截圖以下：

 

 回到墨刀我的項目頁面，點擊查看詳情，查看小程序項目詳情：截圖以下：

  出現以下界面，獲得網頁項目詳情。不管是網頁的頁面名稱，裏面內容都盡收眼底，可以很快的瀏覽作的網頁，截圖以下：

 

 5.感悟

不知道此次設計原型是由於時間不夠仍是怎樣，感受此次做業完成的很匆忙，像小程序端的原型設計就是很匆忙完成的。

剛開始接觸原型工具時，在網上查找資料想明白原型工具是什麼，原型又是什麼！網上的資料不少，原型工具也不少，原本最開始不知道用什麼原型工具，而後也就比較了Chainco、InVision、Flinto Lite、Mockplus、Proto.io 六、UXPin、Flinto for Mac、Axure RP、Justinmind、Framer JS（詳看：https://zhuanlan.zhihu.com/p/23086263）這幾個原型工具的優缺點，而後最後才決定用墨刀這項功能強大上手快的原型工具。

仍是那句話，全部的工具都要你動手作了才能知道這項工具到底適不適合你用，不要只是看視頻看文字看講解，全部的控件都要本身親自動手操做才能快速明白它的用法和強大的功能。但願在接下來的我的項目中可以多動手去作，少看多作，明白其中功能！！加油！！