墨刀和Axure RP：設計App原型圖就是如此簡單

概述

一個項目從立案到項目結束,項目的原型圖設計師必不可少的,作為一個iOS開發者而言,其實我更應該關注一些程序方面的事情,而不是設計方面的問題,但是由于公司人員緊張,沒辦法只好把我這個小白拉上設計大業的刀鋒浪口,正所謂工欲善其事,必先利其器.所以要想要正好設計原圖,必先要有好的設計工具,如博客的文章開頭圖片所示,我這里推薦兩個設計工具 墨刀和Ature RP .

墨刀

老話說得好,墨刀不誤砍材工.墨刀這款原型設計工具,在我看來是一個輕量級的圖像設計軟件.支持網頁編輯和本地客戶端編輯兩種方式.墨刀最強大之處就在于它支持手機查看設計原型功能.下面我們一一來看各個功能.

首先進入首頁是這樣的,墨刀的網頁畫風非常簡約,也是我很喜歡的一個原因.在這里我們可以注冊登錄以及下載客戶端.

這里登錄注冊我就過多說了,比較簡單,我們不必使用企業級的,只要個人免費版的賬號就夠我們使用的了.接下來,我們登錄上我們的賬號進入我們的工作區(由于我的賬號使用好長時間,所以跟新申請的賬號有一些出入,但不影響后期的使用.)

首先進入創建應用頁面之后,我們只需要創建一個空白的模板即可.

然后選擇我們的應用平臺,這里我就直接選擇iOS,平臺類型后期是可以進行修改的.

然后我們在接下來的面板就可以對應用的名稱圖標,設備類型進行設置了.隨意去一個名字,然后這樣我們的第一個應用原型就創建好了.

然后進入我們的第一個應用當中,我們就可以進行我們的創作了.工作區的頁面布局是如下所示的.

首先我們先看工作區,這是我們應用原型的面板,我們需要往上面添加各個元素,當然了,如果實際頁面高度超過手機的屏幕高度,那么程序就會成為滑動的了.

看完了工作區之后,我們看一下菜單欄,主要分為組件、母版、組合撒個模塊.組件模塊主要是存放各種元素各種組件的位置,我們可以直接使用鼠標把各種組件拖拽到工作區.當然,每一個組件具體什么功能,這里就不過多的解釋了.

然后菜單欄的第二個模塊是母版模塊,有人會問,什么叫母版呢?通俗點講,母版就是把一些組件組合起來的模塊,我們可以直接拖拽使用,不用再次使用組件組合,縮短了創建時間.一般情況下,一些組件組合使用的次數較多,我們就可以創建母版來保存這個組合方便下次使用.這里提供了兩個母版,一個是輪播圖,一個是下拉菜單.當然了,我們也可以自己創建母版以及導入其他項目的母版了.

第三個是組合,類似于母版,但是更加的復雜,比如日歷、彈出框等等我們都可以從這里面找到.

對于組件,如果我們不想使用系統默認的樣式或者顏色,那么該怎么辦呢?這時候我們需要對組件的屬性進行設置,只要我們點擊一下組件就可以出現屬性列表,設置對應的屬性即可.

一個應用不可能只由一個頁面組成,那么如何創建頁面多個頁面呢?如圖所示即可創建頁面.

上面的一步我們是創建好了頁面,頁面的跳轉怎么實現呢?我們看到每一個組件都有一個小尾巴,我們只需要把這個小尾巴拖拽到右邊的頁面單元上即可.同時我們可以通過選項菜單進行跳轉動畫的設置.

那么當所有都搞完了,我們如何查看我們的應用原型圖呢?只需要點擊運行就可以了,當然了我們也可以把應用原型圖下載到手機上查看只要在預覽頁面點擊分享按鈕然后掃描二維碼即可.

用墨刀創建一個應用原型圖是不是很簡單呢?接下來,我們看一下Axure RP的介紹和使用.

Axure RP

相比于墨刀簡約風格優勢而言,Axure RP的功能顯得更加的強大一些.但是Axure RP是收費的(當然,網上有不少破解版的.:smile:)我們從上面的傳送門中下載完成之后,漢化的問題我就不過講解了 ,在官方的下載頁面都有提示,不管是Mac還是Windows系統的都有如何操作.由于Axure RP官方的組件庫比較少,使用起來并不是很方便,所以我就從網上找了一些組件庫,分享出來給大家.因為本人我用的Mac本,所以我就說說Mac如何添加擴展的組件庫.

首先,我們先把組件庫下載下載下來( 組件庫傳送門 ),然后從程序列表打開quot;Axure RP的包內容quot;.

然后就是按照(Contents -gt;Resources -gt;DefaultSettings -gt;Libraries)順序把組件庫放到對應的文件夾即可.

然后,我們就開始創建我們的第一個應用原型,開啟Axure RP,然后如圖新建即可(快捷鍵:command N).

首先我們看一下Axure RP的操作頁面,和墨刀一樣的操作,Axure RP也是使用拖拽的方式往界面上添加組件.這里就不過多的說明了.

然后我們拖一個手機頁面,可以直接在組件庫位置直接搜索自己想要的組件名稱.然后拖拽即可,如圖所示.

然后我們直接點擊右上方的預覽一下,就打開了網頁就是我們當前應用原型.

Axure RP的優勢之處

但是Axure RP的優勢又在何處呢?我主要說說相對于墨刀而言,Axure RP優勢之處.

• 首先是強大的組件庫,我們都看到了,Axure RP的組件庫比較豐富(當然了,是我們自己添加的.:joy:)

• 相對于墨刀的組件只能添加跳轉而言,Axure RP能添加的事件就更多了,而且還可以支持條件事件(自我發現研究的)這樣做起來的效果就比墨刀要生動的多了.示例如下所示.

比如,我們添加一個文字標簽,然后當它單擊的時候,我就讓它改變文字,具體的操作如圖所示.

但是Axure RP的還有條件設置,就是類似于代碼中的if語句.比如我們就接著上面的設置.我們假設當文本標簽文字是quot;你好quot;的時候,點擊標簽改變文字為quot;Hello Worldquot;,當文本標簽文字是quot;Hello Worldquot;的時候,點擊標簽改變文字為quot;你好quot;.

我們首先設置一下當文本標簽文字是quot;你好quot;的時候,點擊標簽改變文字為quot;Hello Worldquot;.還是打開quot;鼠標單擊時quot;的控制面板.操作步驟如圖所示.

然后,我們點擊quot;確定quot;之后就可以完成條件的設置了.接下來我們要設置當文本標簽文字是quot;Hello Worldquot;的時候,點擊標簽改變文字為quot;你好quot;.

首先我們要建立一個新的case.

然后我們先把條件設置為當前的文本標簽的文字為quot;Hello Worldquot;.點擊確定即可.

然后我們在當前的條件情況之下設置我們的文本信息為quot;你好quot;.設置好點擊quot;確定quot;即可.

這樣quot;鼠標單擊時quot;就有兩個用例了.如圖所示.

這樣,我們就設置好了,效果圖如下所示.

當然了,Axure RP交互類型可不單單只有單擊,雙擊等等,我們點擊quot;更多事件gt;gt;quot;可以查看所有的交互類型.這是墨刀所沒有的.

簡單介紹Axure RP 兩個有意思的控件

這兩個有意思的控件,一個是中繼器,中繼器就是做列表的時候使用的;一個是動態面板,動態面板是做控件中頁面跳轉中使用的.這兩個組件我們可以直接quot;Defaultquot;這個組件庫直接找到.

中繼器,我們比如徐濤添加一個列表在我們的應用原型中.我們就可以使用到中繼器.

首先,我們先拖拽一個中繼器到頁面上去.

那么列表那么多數據,我們該如何設置呢?我們看到右邊中繼器的屬性中說到的quot;每一項加載quot;,文本設置為數據源表格的數據.

如果我們讓顯示的數據改變,只要修改表格即可.

有個情況我們是需要考慮到了,一個列表中的每一個單元格可能要顯示的不止一個數據,這時候改怎么辦呢?這時候我們就需要定制我們的中繼器了.現在表格如下所以一個是名字,一個是性別.我們都要顯示到應用原型去.

現在我們點擊頁面中的中繼器,打開中繼器面板.

如圖添加兩個中繼器的文本標簽.

文本標簽添加好了之后,我們就需要設置他們的數據了,我們打開quot;每項加載時quot;的控制面板.把原來的設置刪除.然后設置文本,這里我們需要使用到函數.讓它動態的加載每一項.

打開quot;fxquot;函數設置頁面.然后打開函數頁面.

第一項我們讓它加載的是名字.所以選擇的是quot;Item.Namequot;

然后點擊之后,我們把原來的quot;文字標簽quot;刪除掉.剩下的就如圖所示了.

點擊確定即可.

然后我們設置第二個文本標簽依然同上,不過是要設置的變量值為quot;Item.sexquot;.

這樣我們就設置完成了.效果圖如下所示.

上面說到的是中繼器,下面我們說一下另外一個有意思的控件,那就是動態面板,首先我們先添加一個動態面板到頁面上去.

然后雙擊打開動態面板控制頁面.在這里,我們可以添加動態面板的頁面.這里我就添加一個新的動態面板.

我們說過,動態面板是用于控件頁面的切換.我們該如何實現這一個效果呢.我們為了掩飾效果,把第一個頁面設置為紅色,第二個設置為黑色.當我們點擊的時候,我們就讓他們兩個頁面做切換.

雙擊冬天面板的控制頁面上的quot;State1(名字可改變)quot;選項,然后進入動態面板,拖一個矩形上去,然后我們設置它的背景色為紅色.

然后,我們如法炮制quot;State2quot;頁面,把頁面設置為黑色.

這時候我們就需要設置用例了.

然后我們添加當前的quot;case1quot;下設置條件和屬性如圖所示.

然后,我們就需要添加一個新的用例,然后如圖設置條件和屬性.

這樣整體我們就設置完成了.主面板中用例是這樣的.

接下來,我們看一下效果圖.

結束

其實呢,墨刀和Axure RP還有很多的使用技巧,這里就需要大家自行挖掘了,一個是簡約簡單,一個是功能強大且完善,客官看好哪一個請自行拿走.好了,今天就說到這了,大家如果有什么疑問可以在評論區提出.墨刀和Axure RP讓設計App原型圖就是如此簡單!