個人第三次作業——原型設計


這個作業屬於哪個課程https://edu.cnblogs.com/campus/xnsy/Autumn2019SoftwareEngineeringFoundation
這個作業要求在哪里 https://www.cnblogs.com/harry240/p/11524127.html
這個作業的目標 (1)對比原型設計工具(2)需求分析(3)原型設計

Part 1 對比原型設計工具

因為之前對原型設計一點了解都沒有,所以我選擇通過對這三款軟件的第一印象以及后面的深入了解的方式來對比這三款原型設計工具的不同之處

一.墨刀MOCKING BOT

首先我們通過百度搜索到mocking bot的有關信息,進入下載界面后可以看到這款應用軟件的相關信息。第一直覺:界面簡潔、信息傳遞明確。小到軟件的圖標,大到網頁的介紹我都能感受出來一股簡潔的風氣.軟件設計、交互和演示、標注與討論、海量的素材以及雲端編輯等多樣性功能映入眼簾,給我第一感覺,是一款不錯的原型設計軟件。 下面是官網的一些圖片
Mockplus2.png
墨刀3.png

二.Axure RP

Axure RP我沒有搜索到像墨刀那樣比較官方權威的網站,於是我先通過百度詞條的方式簡單初步了解了一下這款軟件。Axure RP*是一款專業的快速原型設計工具,其中Axure代表美國Axure公司,RP則代表Rapid。這款軟件是一個專業快速原型設計工具,讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。 然后我下載了這個軟件,簡單的看了一下界面,進行了一些簡要的操作,感覺還是很好用的。下面是一些圖片。

Axure rp1.png
Axure rp2.png

三.Mockplus

Mockplus這款軟件的官網是最讓我震驚以及心動的一個。不僅是因為我發現百度、中國電信、中國移動、高德地圖甚至Microsoft的團隊都有在用這個軟件進行原型設計的時候,我就感覺這個軟件絕對有獨到之處。然后我通過百度詞條查找了一下有關Mockplus的相關信息。"Mockplus是一款間接快速的原型設計工具。適合軟件團隊、個人在軟件開發的設計階段使用。其低保真、無需學習、快速上手、功能夠用。並能夠很好的表達自己的設計。"並且Mockplus始終貫徹着"至簡即至繁"這一原則,從設計上,采取了隱藏、堆疊、組合等方式,把原本復雜的功能,精心安排。易於上手,且隨着逐漸的使用,功能層層遞進,會越來越感受到這款軟件的魅力所在。 下面是官網的一些圖片。

Mockplus1.png
Mockplus3.png

四.綜合對比分析

1.墨刀的功能偏向於操作與交互的簡單實現,更加適合新手上手。而且墨刀具有自動標注及切圖功能,能夠實現每個元素寬高、間距、字體顏色等信息的一鍵制備功能。同樣墨刀的素材庫可以共享,高頻素材可以直接使用。

2.Axure rp的特點主要集中在鼠標及鍵盤交互功能、演示文稿、新增部件樣式控制、更細化的部件屬性以及更多交互的條件。總的來說更適合進階的使用者,雖然上手起來可能不如其他兩個軟件容易,但一旦上手后是更有利於制造更加精美更加高端的產品。

3.Mockplus則和墨刀很相似,適合新手上手而且素材全面廣泛。但Mockplus也有屬於自己的創新點所在,不僅是在審閱協作、創建原型圖、批注圖釘的協同工作,而且無縫真機預覽的功能還有可直接實現設計和移動設備之間的通訊,直接預覽,不需要任何第三方設備。在設計過程中,設計者拿出手機就可以隨時和Mockplus對接,將原型傳遞到移動設備,觀察原型在移動設備中的真實狀態等等,這一系列都是Mockplus的創新之處

綜合以上三點,我選擇了上手比較快的以及素材豐富,自動化程度稍微高一些的墨刀作為此次作業的原型設計工具。

Part 2 需求分析

前言:原型設計的步驟

為了能更好的進行需求分析,我覺得有必要先了解一下原型設計的步驟,進而在步驟中更好的進行優化與設計。

步驟一:了解需求,了解我們所做的產品是給誰做的,誰來開發,然后選擇合適的表達方式與工具。

步驟二:梳理頁面、頁面元素及頁面流程。可以通過思維導圖梳理該產品或者功能,頁面及頁面內的元素,大致歸納出有幾個頁面,頁面內有幾個區域,區域內有什么元素,采用什么布局方式等;

步驟三:繪制原型初稿,按照頁面結構、信息結構、業務流程開始繪制原型,確定每個頁面的布局和元素的位置,快速的繪制原型初稿。這個階段主要是把產品的流程走通

步驟四:深度校驗原型設計實現並添加標注。深度思考功能的必要性和優先級,盡可能把冗雜的元素刪除或精簡,盡可能突出每個頁面的重要元素,重點標識出異常邊界和文案提示,區分全局說明和局部說明,盡可能將標注寫的精簡、明確、全面。

一.從教師的角度分析

從需求分類來看,教師方面需要更加方便的對班級成員、教學內容及學生成績進行管理。 從這句話可以分析出,教師端需要實現班級成員管理、教學內容管理以及學生成績管理這三個功能。可以在教師的二級頁面處線先顯示學生的全體信息,包括學號、成績以及個人信息等,然后可以在此處進行添加、刪除和更改等功能從而實現成績管理的功能。有關教學內容,粗略的制作的話可以總體的概括教學的大綱內容,盡量簡潔明了。細致一點的話可以精確到每個學生的不同教學進度,以滿足"因材施教"的教學理念。

二.從助教的角度分析

從需求分類來看,助教方面需要更方便地對班級成員進行管理、與學生交流、對學生進行評價。同樣,根據這句話可以看出助教端和教師端的功能其實是有共同點的,就比如對班級成員進行管理這一功能的實現。而與之不同的就是,助教端需要實現與學生進行交流以及對學生進行評價的功能,可以借助墨刀里面的交互界面來完成這一功能。

三.從學生的角度分析

從需求分類來看,學生方面需要更方便的相互交流,完成作業分析完教師與助教的功能實現之后,再來看學生端的實現就很簡單了。僅僅需要實現"交流"的功能,那么墨刀中已經很方便的給我們提供了這一項功能,借助交互式界面的模塊,很輕松的就能實現這一功能。

四.整體分析

整體的需求角度來分析的話,需要考慮的內容就比較多了。不僅要設計到方便的使用班級博客、離線狀態下的瀏覽內容、更加簡潔美觀的適應性界面、完善的信息提醒功能以及更加體系化的班級博客內容和完善的分類以便於用戶找到自己需要的內容。首先,在整體原型設計實現的過程中,我覺得應該分次一步步的實現小分類的功能,然后在此基礎上進行一定的優化進而達到化整為零,部分之和大於整體的效果。再實現了三個小端口的功能后,通過標題級別分類的方式,讓整過頁面顯得更加層次化、體系化從而便於用戶查找到自己需要的內容。然后進行一些適配型的調試,使得整個頁面更加適用於其他端口的使用。

Part 3 原型設計的可查看地址

學生端的鏈接:https://free.modao.cc/app/c180adc340f89f25a8f850050d0ffc6f42fe4125
助教端的鏈接:https://free.modao.cc/app/a2eb05aa589b986897157b15469fbf2ad6d18fcb
教師端的鏈接:https://free.modao.cc/app/9676971c3ffd60d550d84a256fd75b20ad14ba9b

Part 4 原型設計

1.學生端的實現

沿用墨刀中的一些基本模版再加以改動,學生端的界面很容易就可以制作出來,因為素材較多,所以繪制一個較為豐富的界面不是什么大問題。但就是界面間的切換是個難點,通過上網搜尋相關資料等方式解決了界面切換的問題。下面是學生斷的最終實現界面圖片

學生端1.png
學生端2.png

2.助教端的實現

以學生端為基礎進行一些界面跳轉的改變,將基本個人博客的跳轉轉為學生信息界面

助教端1.png
助教端2.png

3.教師端的實現

在上面兩個的基礎上,進行一些界面的簡單優化,然后將跳轉頁面轉化一下,更改為學生信息包含學生姓名以及學號等。
教師1.png
教師2.png

Part 5 總結

1.第一次使用原型設計工具,對很多操作方法不熟悉,例如如何將兩個頁面建立鏈接,如何插入自己想要的圖標圖案,如何設置精美的界面等。還需要多多使用並且多加練習,才能較好的掌握幾類基礎的原型設計工具。

2.原型設計的步驟不夠熟悉,從最開始的入手分析到最后的模型實現中的每一個步驟都需要在各方面加強練習,不光是深化步驟的理解,還要更好的優化界面設計的一系列功能操作。

3.學無止境,不懂就要多查閱資料,多在論壇上尋求幫助,要以一種渴望知識的態度去完成作業


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM