如何使用JustInMind:(1)建立簡單原型?

Tags: 工具, 原型,

在軟體產品原型製作方面,一直以Axure為主要的工具。前兩天突然發現了這款JustInMind,經過簡單的試用,發現其在某些方面要較Axure方便一些,所以逐步整理一些經驗出來,分享給大家。

工具/原料

Macbook/Mac

JustInMind

建立原型檔案

開啟JustInMind

如何使用JustInMind:(1)建立簡單原型

選擇新建一個原型[Create a New Prototype]

如何使用JustInMind:(1)建立簡單原型

選擇想要建立的原型型別,這裡選擇為iPhone6建立。不同的原型型別,會有不同的繪製畫板。

下面是預設支援的原型型別:

1. Web

2. iPhone6

3. iPhone6 plus

4. iPad

5. Android

6. Android tablet

7. Custom

8. iPhone5

9. iPhone4

10. Google Glass

如何使用JustInMind:(1)建立簡單原型

選擇原型基於的模板。這裡我選擇使用“空”模板,方向為“豎 - Portrait”。點選“Finish”開始建立原型。

JustInMind對於iPhone6提供如下模板:

1. 空 - Empty

2. 圖片 - Images - 效果圖

3. 示例 - Example - 登入、設定、主從、郵件、滑動選單

4. 其他 - Another - 根據以往的原型檔案(.vp)

如何使用JustInMind:(1)建立簡單原型

如果你是第一次建立原型的話,會彈出引導視窗。為了便於熟悉整個軟體的操作,這裡我們選擇接受此引導。

如何使用JustInMind:(1)建立簡單原型

基礎介面說明

控制元件欄-Widgets,與Axure類似,這裡列出了軟體預設支援的各種控制元件。

如何使用JustInMind:(1)建立簡單原型

縮放控制

如何使用JustInMind:(1)建立簡單原型

頁面導航 - Screens。這裡列出所有原型檔案中的頁面,與Axure的導航類似。

如何使用JustInMind:(1)建立簡單原型

屬性欄 - Properties。當我們選中某個控制元件時,可以在這裡編輯控制元件的屬性。

如何使用JustInMind:(1)建立簡單原型

元件導航 - Outline。這裡列出所有當前頁面上的控制元件、層等。

如何使用JustInMind:(1)建立簡單原型

事件欄 - Events。在這裡可以編輯控制元件的觸發事件,類似Axure的事件管理。

如何使用JustInMind:(1)建立簡單原型

預覽 - Simulation。使用這個功能,可以在瀏覽器中檢視編輯完成的原型。

PS:預覽介面要比Axure的好看很多。

如何使用JustInMind:(1)建立簡單原型

注意事項

JustInMind是跨平臺的,支援Windows、Mac等

JustInMind最開始是以移動產品原型設計為亮點,所以如果你要為移動產品設計原型,不妨試試這個工具。

相關問題答案