《黑白團團隊》第三次作業：團隊項目的原型設計

項目	内容
作業課程位址	任課教師首頁連結
作業要求	團隊項目
填寫團隊名稱	黑白團團隊
填寫具體目标	認真負責，完成項目

任務1、原型設計工具簡介

常用的原型設計工具有：移動應用原型與線框工具-墨刀、老牌原型設計工具 -Axure RP，Axure、網頁和移動端的設計sketch、一款簡潔高效的原型圖設計工具

mockplus、緻力于高保真原型制作工具Justinmind、一款免費的帶有手繪塗鴉風格的原型設計軟體balsamiq mockups

• Axure RP

  即Axure Rapid Prototyping是最常用的快速原型設計工具之一,幫助負責定義需求和規格、設計功能和界面的使用者快速建立線框圖、流程圖、原型和規格說明文檔,可用

  于應用軟體和Web網站設計,支援多人協作設計和版本控制管理。

  Axure RP優點: 1、擅長原型設計的複雜互動行為:2、擁有良好的教育訓練和文檔支援;3、擁有多種元素樣式,可增加獨立元素互動性;4、内置的插件庫可以定制特殊的動作

  和行為。雖然Axure的應用幾乎已成慣例,但它也有自己的缺點:1、陡峭的學習曲線,對于初學者來說不算容易;2、在導出HTML之前無法對原型進行預覽;3、原型的web

  展示并不 支援所有的浏覽器,比如,對于谷歌浏覽器就必須要使用插件才能觀看; 4、對其它裝置的支援較差。

• Balsamiq Mockups

  Balsamiq Mockups是一款快速原型的設計軟體,既能快速設計草圖,又能較好地進入到平時團隊工作的流程和工具。

  Balsamiq Mockups的優勢也極為明顯：基于Adobe Air,提供的原型圖基于XML格式,能夠流暢的在不同浏覽器,不同作業系統平台下完美運作,可以線上使用,亦可以離線

  使用,能夠很順利地将其安裝在Windows Balsamiq Mockups還具有極其豐富的表現形式,設計效果非常美觀。它支援幾乎所有的HTML控件原型圖,比如按鈕(基本按鈕、

  單選按鈕等)、文本框、下拉菜單、樹形菜單、進度條、多頁籤、月曆控件、顔色控件、表格、Windows窗體等。除此以外,它還支援Phone手機元素原型圖,極大地

  友善了開發iPhone應用程式的軟體工程師。

• 墨刀

  墨刀，一款線上的移動應用原型與線框圖工具。借助于墨刀，創業者、産品經理及UI/UX設計師能夠快速建構移動應用産品原型，并向他人示範。目前墨刀支援建立移

  動端（iPhone、iPad、Android）、web端的項目。

  目前墨刀分為網頁版和用戶端，網頁版可以直接使用，用戶端在網頁版的功能的基礎上增加了諸如可以随時提取頁面中某一顔色然後應用于對應控件等小功能。

  墨刀的特色是：有豐富的元件資料庫，除了圖示之外，還有元件（搜尋框、頂端欄、對話框等等），可以很友善的直接拖曳到工作區，不用一個個自己畫。有基本的

  互動功能（母版），例如輪播圖、下拉菜單、左右滑動等，可以快速的建立互動效果。可以直接産出每個頁面之間的關系，即工作流程，一次可以看到整體的設計構

  架。在每個頁面可以新增備注，在預覽畫面會呈現出來，以利溝通。有提供Sketch Plugin，可以彙入Sketch美美的圖。

• Mockplus

  Mockplus是一款簡潔高效的免費原型工具。它為使用者提供豐富的元件和圖示資源，通過拖曳即可實作界面設計。支援一鍵導入項目頁面和模闆，快速搭建基礎頁面。

  軟體還支援自定義元件庫，資料填充，Sketch導入，拖曳設定互動等特色功能實作快速設計。近期，該工具還推出了團隊協作功能，團隊成員之間可以檢視、編輯、

  評論項目，幫助使用者更好地完成協作設計。優點：學習曲線短，快速上手，互動簡單（隻需拖曳），功能多樣，元件資源豐富，支援8種預覽方式和多種檔案導出類

  型，支援團隊協作。

任務2、mockplus原型設計工具團隊學習總結

• Mockplus除用于移動APP原型設計，還可以制作PC、網頁的原型設計，它可以幫助UI設計師在最短的時間内完成産品原型圖的設計。

• 首先到摹客官網下載下傳你合适的版本；進行版本安裝。啟動摹客，點選“建立項目”給的原型建立一個項目；在“建立項目”頁根據你的項目的要求選擇你合适的模闆和尺

  寸；建立完成後，就進入工作區，左側是站點地圖群組件區；提供了各種常用的元件庫，直接使用即可，再也不用自己去設計，或者找各類元件了；右側是元件的屬性，動作，連結等設定。拖一個元件到工作區，點選“示範”頂部播放圖示，即可浏覽效果。

任務3、團隊項目github倉庫位址連結

Github

任務4、團隊項目原型設計成果

• 未登陸首頁

  

  

• 登入注冊

  

• 登入後首頁

  

• 設定頁面

  

• 添加評論

  

• 按照标簽或搜尋關鍵字檢視相應評論

  

• 某位導遊的所有評論

  

• 使用者所有評論

  

任務5、團隊項目的原型設計過程、原型設計心得總結

• 原型設計的基本方法：産品定位，定義形式及互動模式；定義功能和資料；确定層級和頁面；繪制原型草圖；建構使用者行為路線；通過場景驗證檢查設計：找到原型

  或邏輯的漏洞，調整并優化；路徑分岔點、必要場景、邊緣情景場景、特殊場景 。

• 産品原型是整個産品面市之前的一個架構設計,原形開發的設計階段,簡單的來說是将頁面的子產品、元素、人機互動的形式，利用線框描述的方法，将産品脫離皮膚狀

  态下更加具體跟生動的進行表達。使用者界面原型必須在先啟階段的初期或在精化階段一開始建立。整個系統（含它的“實際”使用者界面）的分析、設計和實施必須在原型

  建立後進行。建立使用者界面原型的主要目的是在實際設計與開發開始之前揭示和測試系統的功能與可用性。這樣，可以在将太多時間與資源投入開發活動之前，確定

  所建構的系統是正确的。為了成功進行該初期測試，開發原型的開支必須遠遠低于開發實際系統的開支，同時這個原型應具備足夠的功能，可以進行有意義的使用測

  試。

• 原型的定義：用線條、圖形描繪出的産品架構，也稱線框圖。互動設計的結果輸出，可能是一張紙上的幾張圖；原型代表着互動設計的結果，當最終實作的時候，交

  互流程會和原型保持一緻；可以了解為草稿或者叫做參照物原型是一種讓使用者提前體驗産品、交流設計構想、展示複雜系統的方式。就本質而言，原型是一種溝通工

  具。

• 原型設計的定義：線框圖描繪的是頁面功能結構，它不是設計稿，也不代表最終布局，線框圖所展示的布局，最主要的作用是描述功能與内容的邏輯關系。原型圖是

  最終系統的代表模型或者模拟，比線框圖更加真實、細緻。其次，了解原型設計的作用，主要有兩點：溝通： 因為是原型是需求和功能的具象化表達，是以原型可以

  輔助産品經理與上司、互動、UI和技術的溝通産品思路。雖然需求文檔也是可以滿足溝通需求的，通過用例将互動寫到設計描述文檔中，但是原型可以更詳細地解釋

  互動。測試：因為原型相較于UI稿來說修改更友善，是以原型能提高産品經理的功能設計沒通過評審時返工的工作效率。沒有哪一家網際網路公司可以不經過測試，就

  直接上産品和服務。原型在識别問題、減少風險、節省成本等方面有着不可替代的價值。

• 做原型設計時非常重要的一點就是要有好的設計思維和習慣：全局意識、廣闊視野、模仿組合、嚴謹耐心、關注細節、複用轉化。

轉載于:https://www.cnblogs.com/hbtt/p/10794745.html