得到知識服務app原型設計比較與實踐

• 2022 年 4 月 23 日
• 筆記

一、幾種原型設計工具的比較

1. 墨刀

• 優點：
  • 擁有PC端、手機端、網頁版，讓你隨時隨地可以進行產品原型設計；
  • 其定位是主要用於設計移動APP原型，其控制項的拖拉、大小的調整，都會自然去匹配相應的母版大小，非常人性化；
  • 提供了強大的共享創建功能，方便用戶的手機上預覽原型。
• 缺點：
  • 對交互效果、控制項組合、操作面板的選擇都不如Axure靈活；
  • 內置交互效果包括點擊、滑動、滾動等，做高保真原型的時候不夠用；
  • 效果切換因為是採用連線的方式，有時會讓用戶產生錯亂的感覺。

2. Axure

• 優點：
  • 功能齊全，交互多樣，通過動態面板、函數、中繼器等幾乎可以實現任何常見的交互效果，在製作PC端原型圖上非常有優勢；
  • Axure擁有強大的編輯功能，你可以將常用的交互和組件打包，自行製作素材庫。
• 缺點：
  • 雖然動態面板、中繼器等功能都很強大，但是不容易搞懂，入門難度較高；
  • Axure的素材也是讓人頭疼的問題，一般情況下，用戶會去第三方素材庫進行尋找，需要花費不少時間。

3. Mockplus
   • 優點：
     • Mockplus是一款簡潔快速的原型圖設計工具。適合軟體團隊、個人在軟體開發的設計階段使用。其低保真、無需學習、快速上手、功能夠用；
     • 並能夠很好地表達自己的設計。設計了組件、圖標、收藏、母版的 Tab，切換起來很方便。還篩選了一部分常用的組件固定在組件庫上面，實現高頻操作不用找；
     • 摺疊面板很棒，不用糾結展開和關閉的問題。
   • 缺點：
     • 保真低 ；
     • 不支援手勢交互。
       二、低保真（Io-fi）原型

　　低保真（lo-fi）原型設計是將高級設計概念轉換為有形的、可測試物的簡便快捷方法。它首要的也是最重要的作用是——檢查和測試產品功能，而不是產品的視覺外觀。

　　低保真原型的基本特徵：

* 視覺設計：僅呈現最終產品的一部分視覺屬性（例如元素的形狀，基本視覺層次等）。

* 內容：僅包含內容的關鍵元素。

* 交互性：原型可以由真人模擬。 在測試期間，熟悉頁面流程的設計師就相當於一個「電腦」，實時手動呈現設計頁面。此外，也可以給線框圖製作交互效果，這種稱為「交互線框圖」。

　 * 優點：

* 便宜。 低保真原型製作的明顯優勢在於其極低的成本。

* 快速。 可以在五到十分鐘內創建一個低保真紙原型。 讓產品團隊可以毫不費力地探索不同的想法。

* 協作。 這種原型設計刺激了小組協作。它的設計不需要什麼特殊技能，因此更多人可以參與到設計過程。 即使是非設計師也可以在創意過程中發揮積極作用。

* 清晰。 團隊成員和利益相關者對將來的項目有了更清晰的期望

　 * 缺點：

* 測試期間的不確定性。 使用低保真原型，對於測試者來說，容易不清楚到底什麼本來是有效的，什麼不是。另外，低保真原型需要用戶充分的想像力，也限制了用戶測試的效果。

* 有限的交互性。 使用這種類型的原型想要傳達複雜的動畫或轉場效果是不可能的。

高保真（Ho-fi）原型

　　高保真 (Hi-fi) 原型的呈現和功能，儘可能類似於發布的實際產品。 當團隊能深入了解產品的預期，需要與真實用戶一起測試，或獲得利益相關者的最終設計批準時，通常會創建高保真原型。

　　高保真原型的基本特徵：

* 視覺設計：逼真細緻的設計 – 所有介面元素、間距和圖形看起來就像一個真正的app或網站。

* 內容：設計人員使用真實或類似於真實內容。原型包括最終設計中顯示的大部分或全部內容。

* 交互性：原型在交互層面非常逼真。

　 * 優點：

* 可用性測試期間獲取有意義的回饋。對於用戶來說，高保真原型通常看起來像真正的產品。這意味著，在可用性測試會話中，測試參與者將更有可能自然地表現——就好像他們正在與真實產品交互一樣。

* 對特定 UI 元素或交互的測試。藉助高保真交互性，可以測試平面元素，或特定交互, 比如動畫過渡和微交互。

* 輕鬆獲得客戶和利益相關者的認同。這種類型的原型也適合向利益相關者演示。它使客戶和潛在投資者清楚地了解產品應該如何工作。一個優秀的高保真原型讓人們對你的設計感到興奮，但低保真的原型則不然。

　 * 缺點：

* 成本較高。 與低保真原型相比，創建高保真原型意味著更高的時間成本和財務成本。

三、利用墨刀原型設計工具進行原型設計

• 主題名稱：得到
• 功能：旨在為用戶提供「省時間的高效知識服務」
• 介面設計考慮因素：操作簡單，介面簡潔，功能直觀。
  　* 主要設計因素：
  介面組成：帳號登陸，微信登陸
  前置條件：登錄
  後置條件: 驗證帳號登陸系統
  操作步驟：輸入帳號後登錄
  
  

介面組成：發現頁
前置條件：登錄，選擇課程，聽書，電子書，錦囊，商城，免費專區。
後置條件: 進入自己想要的服務專區。
操作步驟：點擊所選服務即可進入。

介面組成：學習計劃
前置條件：點擊學習計劃。
後置條件: 進入學習計劃區域。
操作步驟：點擊所選服務即可進入。

介面組成：知識城邦
前置條件：點擊知識城邦。
後置條件: 進入知識城邦。
操作步驟：點擊所選服務即可進入。

介面組成：最近學習，隱藏學院，編輯
前置條件：點擊已購
後置條件: 進入已購。
操作步驟：點擊所選服務即可。

介面組成：我的賬戶，我的內容，學習成就。
前置條件：點擊已購。
後置條件: 進入已購。
操作步驟：點擊所選服務即可。

原型鏈接：//modao.cc/app/DXXVUx4jraqzlo5USSIasO#screen=sl2aloxp4wajby4