我的gitee相關倉庫地址： 點這里！

一、關于原型設計工具選擇的討論

選擇范圍及介紹：墨刀、Axure、Mockplus rp、Figma、Balsamiq

1、墨刀

使用領域

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

優勢

• 操作交互簡單、易上手、效率高
• 高保真度
• 易獲取，支持全平臺且有免費版
• 支持團隊協作

缺點

• 作為線上設計工具，需要上網運行，同時產品也須保存在云端，安全性與可靠性較差
• 缺少高級組件，對于要求保真度非常高的原型來說無法滿足
• 在復雜設計邏輯中的各項操作不夠靈活

2、Axure

使用領域

Axure RP的使用者主要包括商業分析師、信息架構師、產品經理、IT咨詢師、用戶體驗設計師、交互設計師、UI設計師等，另外，架構師、程序員也在使用Axure。
Axure RP Pro能快速幫助設計者設計出快捷而簡便的創建基于網站構架圖的帶注釋頁面示意圖、操作流程圖、以及交互設計，并可自動生成用于演示的網頁文件和規格文件，以提供演示與開發。

優勢

• 功能齊全、資源豐富、組件多樣、行業內通用的工業軟件
• 高保真度
• 能夠離線使用，具有較高安全性與可靠性
• 支持團隊協作

缺點

• 操作交互等不是很直觀、需要付出一定的學習成本
• 獲取上需付費獲取正版，具有一定使用成本
• 尋找需要素材較為繁瑣

3、Mockplus rp

使用領域

摹客（Mockplus）隸屬于成都摹客科技有限公司，專注于一站式的產品設計及協作。依托摹客“1+2+1”（1個平臺+2個工具+1個設計系統）的產品矩陣，為產品開發團隊提供全流程協作、原型設計、UI設計和設計規范管理支持。摹客可以自產出原型及高保真設計，也支持多款主流設計工具（Figma/Sketch/PS/XD/Axure等）的設計稿交付，團隊成員在產品、設計到開發的各個工作環節，使用不同設計工具，可通過摹客平臺協同工作

優勢

• 操作交互簡單、易上手、效率高，適合小團隊
• 矢量繪制
• 項目樹層次劃分清晰，結構明確
• 支持團隊協作

缺點

• 穩定性來說相對較差，在大型項目中可能會有一定風險
• 缺少高級組件，對于要求保真度非常高的原型來說無法滿足
• 對于免費版來說單個項目支持頁面較少

4、Figma

使用領域

Figma，是一款基于瀏覽器的在線設計協作平臺，集成了原型、UI、交付等功能，可以完成從線框圖、原型設計、UI 設計到協作、設計系統管理、開發人員交付等各種環節。

優勢

• 操作交互直觀簡單、易上手、效率高
• 高保真度
• 易獲取，支持全平臺且有免費版
• 支持團隊協作，擁有最優秀的多人協作功能
• 在國外市場中日益成為主流

缺點

• 作為線上設計工具，需要上網運行，同時產品也須保存在云端，安全性與可靠性較差
• 缺少高級組件，對于要求保真度非常高的原型來說無法滿足
• Figma作為國外網站需要特殊手段連接
• 漢化以及相關中文社區生態較為缺少

5、Balsamiq

使用領域

Balsamiq Mockups 在軟件產品原型圖設計領域，特別是 Web 原型圖設計領域尤其受歡迎。使用 Balsamiq Mockups 畫出的原型圖都是手繪風格的圖像，看上去美觀、清爽。它支持幾乎所有的 HTML 控件原型圖，還支持 iPhone 手機元素原型圖。

優勢

• 操作交互簡單、易上手、效率高
• 強調快速開發而不拘與細節
• 支持團隊協作

缺點

• 低保真的線框草圖
• 平級頁面層級，且缺少交互
• 對除web外頁面設計支持都較差
• 無免費版，獲取方式有一定成本

工具需求分析

故事背景：

四個僅具有課設項目背景的軟工大二學生組隊進行相關課程作業，需要在一周半內確定項目內容、完成需求分析，并快速完成相關原型設計，以便為后續代碼實現進行鋪墊。

問題抽象：

• 團隊成員相關合作與開發經驗較少，同時技術較為薄弱
• 任務時間為一周半，包含立項、分析、學習、設計四項內容
• 任務內容小組四名成員協作，每名成員負責至少四頁原型頁面設計，總計至少需要16頁的內容
• 任務目標包括完成作業考核以及培養相關從業素養

相關需求：

• 操作便捷直觀、學習成本較低
• 形式較為統一、便于管理
• 最好能四人及時協作提升設計效率
• 支持功能能夠滿足課設任務要求
• 效果美觀
• 適用于主流市場
• 易獲取

得出需求下考慮的各維度：上手難度、工作內容風格、協作便捷性、頁面上限、保真度、使用領域及群體、獲取相關。

各工具領域適用及優缺點：

結論

綜合來看，Mockplus rp較為適合作為本次作業原型設計工具。

二、相關原型設計說明

原型主題與名稱

”簡評“：一款沈航社區的消費體驗交流平臺軟件

原型故事與使用場景

場景一：什么比較好？

小磊今天放學想在南區吃蘭州牛肉拉面，校內有兩家牛肉拉面這讓他十分困擾，他不知道去的那一家到底味道怎么樣，因為外賣平臺上的評價真的不太有參考性。
于是小磊打開了 沈航社區消費體驗交流平臺 ，在里面分別找到了兩家的牛肉面相關評價。在一番瀏覽后，小磊發現南區的牛肉拉面是真的難吃。
最終，小磊決定試一試去北區的蘭州牛肉拉面并收獲了滿意的一餐。

場景二：你怎么能這樣？

來自山東的小磊非常喜歡吃炒菜蓋飯，在學校內找尋多日，他發現南區蘭州牛肉拉面商家竟然有賣現炒的蓋飯，這讓他非常激動。到達食堂后，小磊立即點了一份魚香肉絲蓋飯。
但讓人悲傷的是，這份魚香肉絲蓋飯并不符合小磊的口味，因為它居然是咸辣口味！小磊讓同行的舍友也嘗了嘗，得出了飯菜難吃、沒有甜味的一致結論。
仍懷有一定善意的小磊決定向商家反應問題，卻得到了廚師傲慢的回應。雖然生氣，但小磊并不想和商家過多爭執。于是，小磊隨便吃了點填飽肚子便離開了。
回到宿舍后，小磊希望他的同學以及無辜的校友能夠免于受苦，便打開了 沈航社區消費體驗交流平臺 ，找到了南區牛肉拉面的蓋飯這個項目，對其進行了基于自身消費體驗的評價與打分。
社區內的同學們看到這條評價，紛紛決定避雷。

場景三：請給我個機會！

最近南區的牛肉拉面商家發現，他家的光顧的同學逐漸變少了，這讓商家困惑不已。于是商家決定聽聽顧客的反饋，然后做做改良。
聽說 沈航社區消費體驗交流平臺 上有不少同學們的體驗點評，商家便注冊了一個賬號去查看他家的評價。打開他家的消費項目后，他發現他家炒菜蓋飯有很多體驗糟糕的點評分享 。
其中，一名叫“夯磚三石”的用戶詳細的描述了他的一次糟糕體驗，其中包括飯菜口味糟糕、商家態度傲慢、價格偏貴等種種問題。該條評價得到了許多用戶的回復補充，有著大量的圍觀 、較多的認可 以及零星的反對
商家后悔莫及，決定立即對客戶們指出的問題做出整改。在平臺上表明了自己商家的身份后，向平臺用戶承認了自身問題，并說明了整改辦法。整改實行后，顧客人數有所回暖，也有了新的小問題。
但在商家與平臺用戶的一次次反饋與交流后，南區蘭州牛肉拉面變得越來越好，生意日益火爆。

場景四：我們的校園生活蒸蒸日上！

一些日子過去了，小磊發現南區牛肉拉面的蓋飯有所改善，他意識到是自己的評價起作用了。因此，他開始習慣于將校園內的消費體驗分享到 沈航社區消費體驗交流平臺 。
點評做的多了，平臺上認識小磊的人也變多了，大家紛紛認可小磊的點評，并愿意嘗試他給予好評的消費。同時，更多人也加入到了點評的行列中，每天都會有校園好評榜、亟待改進榜、體驗爭議榜等相關消費評價內容的更新。
不僅如此，還有許多用戶開始在 沈航社區消費體驗交流平臺 上開更帖子，分享自己的消費習慣與心得。商家通過這些**榜單與帖子，對自己的客戶了解的也更加透徹了，推出了許多學生需要的消費項目。
沈航社區的消費體驗因 沈航社區消費體驗交流平臺 的存在而變得更好了！

原型頁面關系

功能考慮

• 商品評價功能
• 商品與店鋪搜索功能
• 論壇交流功能
• 熱榜查看功能
• 社區社交功能

界面設計考量

• 簡潔性與直觀性，通過圖標直觀反應功能、圓角風格追求簡潔
• 統一性，各頁面沿襲主流的上下狀態欄風格，上欄負責搜索返回等、下欄負責各主頁面切換,同時統一色調風格
• 論壇頁借鑒貼吧風格，鼓勵意見不一的討論、突出瀏覽量，淡化“點贊數”“點踩數”以抑制黨同伐異，鼓勵獨立和諧的討論氛圍

設計頁面預覽與說明

1、主頁

界面預覽

界面功能

• 跳轉搜索
• 按喜好瀏覽推送商家與商品
• 切換其他頁面

界面組成

• 底部頁面切換欄（主頁鍵、論壇鍵、申請鍵、消息鍵、個人鍵）
• 上部搜索欄
• 推送單元
• 排序功能區

前置條件

• 打開APP
• 點擊主頁鍵

后置條件

• 跳轉搜索頁
• 跳轉商家或商品頁
• 跳轉論壇頁
• 跳轉申請頁
• 跳轉消息頁
• 跳轉個人頁

操作步驟

• 使用上方搜索欄可進行搜索，并轉入搜索頁
• 使用上方分類、篩選、排序下拉欄按喜好瀏覽
• 上下滑動瀏覽推送商家與商品
• 點擊推送單元中的商家進入商家頁、或點擊商品進入評價頁
• 點擊下方狀態欄按鍵跳轉至對應頁面

2、論壇頁

界面預覽

界面功能

• 跳轉搜索
• 瀏覽熱榜概要
• 論壇帖子瀏覽
• 切換其他界面

界面組成

• 底部頁面切換欄（主頁鍵、論壇鍵、發帖鍵、消息鍵、個人鍵）
• 上部搜索欄
• 中上部熱榜概要
• 中上部論壇分區
• 中下方貼子推送

前置條件

• 在底部狀態欄的界面點擊論壇頁

后置條件

• 跳轉搜索頁
• 跳轉熱榜頁
• 跳轉看貼頁
• 跳轉主頁
• 跳轉消息頁
• 跳轉個人頁

操作步驟

• 使用上方搜索欄可進行搜索，并轉入搜索頁
• 上下滑動瀏覽推送貼子，可選擇”熱門“或”最新“推送
• 點擊熱榜可進入熱榜詳情頁
• 點擊不同分區可瀏覽不同分區的貼子
• 點擊下方狀態欄按鍵跳轉至對應頁面

3、熱榜頁

界面預覽

界面功能

• 切換不同榜單瀏覽信息
• 進入對應商家或商品頁

界面組成

• 上部返回按鈕
• 中上方榜單切換
• 熱榜單元

前置條件

• 論壇頁點擊熱榜概要

后置條件

• 跳轉對應商家或商品頁
• 返回論壇頁

操作步驟

• 點擊榜單選項切換不同榜單
• 上下滑動瀏覽榜單信息
• 點擊熱榜單元進入對應商家或商品頁
• 左上方返回按鈕返回論壇頁

4、看貼頁

界面預覽

界面功能

• 返回論壇頁
• 查看貼子中的用戶
• 瀏覽貼子信息與回復，顯示樓中樓信息
• 貼子中的”贊同“”圍觀“”反對“等用戶交互
• 收藏貼子、設置與舉報等
• 發表評論回復貼子

界面組成

• 底部發送欄（含收藏按鈕）
• 上部狀態欄（退出按鈕、分區顯示、轉發按鈕、設置與舉報按鈕）
• 樓主初始發帖區域（樓主信息、關注按鈕、貼子內容、交互模塊）
• 下方回復區（瀏覽回復模式選擇、回復單元）

前置條件

• 論壇頁點擊貼子

后置條件

• 返回論壇頁
• 跳轉其他用戶個人頁
• 顯示更多回復頁

操作步驟

• 上方選擇返回、轉發或設置與舉報等
• 樓主初始發貼區點擊”贊同“”圍觀“”反對“”關注“等與樓主交互
• 上下滑動瀏覽回貼消息
• 點擊用戶頭像進入其個人頁
• 點擊中部選擇瀏覽回貼的方式
• 下方回貼單元進行交互
• 底部進行回貼或收藏

界面切換流程

• 進入主頁后，點擊底部狀態欄切換至論壇頁，也可進入搜索頁或商家頁；
• 進入熱榜頁后，可選擇進入熱榜頁或看貼頁，或通過狀態欄切換至其他頁；
• 進入看貼頁后，可返回至論壇頁，或進入其他用戶個人頁。
• 進入熱榜頁后，可返回至論壇頁，或進入商品頁。