紙質原型

  • 瞭解標準使用者介面實踐
  • 創建應用的紙質原型
  • 使用原型獲取用戶反饋

成型

現在你已經對 最小可行產量有了想法,是時候考慮你的專案會是什麼樣子並勾勒出一些想法了。

原型 是某物的早期模型。

應用程式開發人員通常會在開始編碼之前製作其應用程式的紙質原型。 

紙質原型是應用使用者介面外觀的手繪表示形式。它通常包括應用中每個螢幕的繪圖,描繪了不同的狀態。

APP螢幕紙質樣機

為什麼選擇原型?

觀看此視頻,瞭解其他 Technovation Girls 團隊如何創建紙質和數位原型!

最佳實踐:在向學生介紹紙張和紙板原型時,強調從簡單、低成本的模型開始測試想法的重要性。例如,「紙張和紙板原型就像設計的草稿。它們可以幫助您在製作最終版本之前了解您的想法的外觀和工作原理。這些簡單的模型可讓您快速做出更改並找出最有效的方法。

紙本原型可用於獲取潛在使用者(即家人、其他導師、朋友、社群成員等)的回饋。此回饋可以是最終提交資料中包含的回饋的一部分。

以下影片將展示使用隨附硬體的原型項目範例(左側)以及使用紙質原型進行測試的過程(右側)。

向學生提出的指導性問題: 

為什麼在製作最終產品之前用紙張或紙板創建一個簡單的原型很有用?

製作紙本或紙板模型如何幫助您改進設計?

您可以從測試紙質原型中學到哪些您在其他情況下不會知道的東西? 

導師提示由 AmeriCorps 提供支援。

程式化的 A,海軍藍的 AmeriCorps 標誌

原型元素

在開始您的紙質原型時,請記住這些事情。將滑鼠懸停在每張卡片上以瞭解更多資訊。

使用者

使用者

將使用者置於設計的最前沿!該應用程式應該簡單易用。

設備類型

設備類型

您的應用程式在 iPhone 和 Android 上的外觀如何?
手機還是平板電腦?

一致性

一致性

使螢幕佈局相同,以便使用者知道螢幕之間會發生什麼。

用戶介面

製作原型的關鍵在於使用者如何與您的應用程式交互。其術語是用戶介面UI。它包括允許使用者使用您的應用程式的所有元素,如按鈕、文本框和滑塊。

設計數位產品的另一個術語是 用戶體驗UX。 下面將對每一個進行說明。

用戶介面

使用者如何與您的應用互動。它包括允許使用者使用您的應用程式的所有元素,如按鈕、文本框和滑塊。

UI 設計的重點是使您的應用程式在視覺上具有吸引力、直觀性和易用性。

用戶體驗

使用者如何體驗您的應用。它包括使用者介面,但更多的是關於用戶的情緒、態度和行為。

UX設計是關於使用者的需求和目標,並增強他們的整體體驗。

用戶介面功能

以下是行動應用程式使用者介面的一些關鍵部分

導航

導航是使用者在應用程式中找到他們正在尋找的內容的方式。以下是導航選項的幾個範例。

容器

通過這些元件,您可以將內容組合在一起。它在佈置螢幕的某些部分以及隱藏和顯示部分時會有所説明。

輸入

輸入元件允許使用者將資訊輸入到應用程式中。以下是一些示例。

資訊

這些元件允許應用與使用者共享資訊。

使用標準元素

您可能希望您的應用程式看起來與眾不同,以便從競爭對手中脫穎而出。但是,使用標準元素實際上可以説明您的用戶瞭解如何更快地使用您的應用程式。

例如,大多數使用者都熟悉下拉功能表。您可以設計一種新型功能表,但可能會讓使用者感到困惑。堅持使用熟悉的元件,讓您的用戶輕鬆使用它。

停止並嘗試

  1. 立即從應用商店下載新應用。 
  2. 如果您需要靈感,請嘗試 AllTrails(iOSAndroid)或 Blinkist(iOSAndroid
  3. 它使用上述哪些元件? 
  4. 嘗試使用該應用程式約5分鐘。 
  5. 你花了多長時間才弄清楚如何使用它?

觀看這個簡短的視頻,由Google的 Melissa Powel 和Mariam Shaikh主講,瞭解素描和紙質原型製作

活動 1:紙質原型

預計時間:60 分鐘

勾勒出應用的螢幕

從第 4 單元的 MVP 工作表中設計功能。 請記住考慮:
  • 使用者將如何從一個螢幕導航到另一個螢幕?
  • 他們將如何輸入應用程式所需的資訊?
  • 資訊將如何顯示?
  • 它將如何以美觀的方式進行佈局?
  • 考慮配色方案、字體、徽標
注意:您可以複製工作表並根據需要進行編輯。
打開工作表

獲取反饋

現在,您已經有了一些物理的東西來表示您的解決方案,是時候獲得一些用戶反饋了!

潛在使用者需要嘗試一下,並給你一些 誠實 的反饋。

您想從用戶測試中學到什麼? 

一種方法:

  • 給使用者一組要用你的應用程式做的任務,看看他們是否可以在沒有你的干預的情況下完成。 
  • 一個團隊成員可以充當 「計算機」。 
    • 根據使用者交互更改螢幕或螢幕的一部分
  • 另一個團隊成員是 筆記記錄員
    • 寫下用戶的行為以及他們的評論和反應。
  • 經許可,您還可以錄製測試會話。 
原型示例

請記住,您的測試人員隨時為您提供説明! 不要評判或干預他們的交互(除了“計算機”根據動作回應/更新原型)。

只要帶著感激的心情接受他們的反饋。

這是用戶測試自行車維修店應用的一個很好的例子。

活動 2:獲取反饋

預計時間:30 分鐘

使用 2-3 個用戶測試您的紙質原型

  1. 向使用者展示原型。
  2. 要求使用者使用原型執行任務。
  3. 讓他們嘗試在沒有幫助的情況下完成任務。
  4. 團隊成員可以充當「計算機」並對他們的行為做出反應。
  5. 另一名(或兩名)團隊成員記錄用戶的行為、他們的評論和反應。

反射

我們建議您保存紙質原型。在構建專案時,您需要回溯到它。您還應該為您的原型拍照。

手機和紙上的原型
你有沒有發現任何對於最小可行產品來說不是必需的特徵?
你有沒有從用戶那裡收到任何有用的反饋?
根據反饋,您是否需要更改應用中的任何內容?

關鍵術語的審查

  • 原型 – 產品的早期模型
  • Paper Prototype – 手繪的表示,展示您的應用程式的外觀
  • 用戶介面 (UI) – 使用者如何與行動應用程式進行物理互動
  • 用戶體驗 (UX) – 使用者在使用行動應用程式之前、期間和之後對它的感覺

其他資源

雖然紙張是原型製作的首選方法,尤其是作為第一步,但您也可以使用數位工具來製作應用程式原型。

許多工具都是有代價的,但通常有一個免費版本,您可以使用有限的功能或專案。這裡有一些可能性。