概述
一個項目從立案到項目結(jié)束,項目的原型圖設(shè)計師必不可少的,作為一個iOS開發(fā)者而言,其實我更應(yīng)該關(guān)注一些程序方面的事情,而不是設(shè)計方面的問題,但是由于公司人員緊張,沒辦法只好把我這個小白拉上設(shè)計大業(yè)的刀鋒浪口,正所謂工欲善其事,必先利其器.所以要想要正好設(shè)計原圖,必先要有好的設(shè)計工具,如博客的文章開頭圖片所示,我這里推薦兩個設(shè)計工具墨刀和Ature RP.
墨刀
[圖片上傳失敗...(image-8f937d-1528437992826)]](http://upload-images.jianshu.io/upload_images/1396375-e0b9710e54e183d4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
老話說得好,墨刀不誤砍材工.墨刀這款原型設(shè)計工具,在我看來是一個輕量級的圖像設(shè)計軟件.支持網(wǎng)頁編輯和本地客戶端編輯兩種方式.墨刀最強大之處就在于它支持手機查看設(shè)計原型功能.下面我們一一來看各個功能.
首先進入首頁是這樣的,墨刀的網(wǎng)頁畫風非常簡約,也是我很喜歡的一個原因.在這里我們可以注冊登錄以及下載客戶端.
這里登錄注冊我就過多說了,比較簡單,我們不必使用企業(yè)級的,只要個人免費版的賬號就夠我們使用的了.接下來,我們登錄上我們的賬號進入我們的工作區(qū)(由于我的賬號使用好長時間,所以跟新申請的賬號有一些出入,但不影響后期的使用.)
首先進入創(chuàng)建應(yīng)用頁面之后,我們只需要創(chuàng)建一個空白的模板即可.
然后選擇我們的應(yīng)用平臺,這里我就直接選擇iOS,平臺類型后期是可以進行修改的.
然后我們在接下來的面板就可以對應(yīng)用的名稱圖標,設(shè)備類型進行設(shè)置了.隨意去一個名字,然后這樣我們的第一個應(yīng)用原型就創(chuàng)建好了.
然后進入我們的第一個應(yīng)用當中,我們就可以進行我們的創(chuàng)作了.工作區(qū)的頁面布局是如下所示的.
首先我們先看工作區(qū),這是我們應(yīng)用原型的面板,我們需要往上面添加各個元素,當然了,如果實際頁面高度超過手機的屏幕高度,那么程序就會成為滑動的了.
看完了工作區(qū)之后,我們看一下菜單欄,主要分為組件、母版、組合撒個模塊.組件模塊主要是存放各種元素各種組件的位置,我們可以直接使用鼠標把各種組件拖拽到工作區(qū).當然,每一個組件具體什么功能,這里就不過多的解釋了.
然后菜單欄的第二個模塊是母版模塊,有人會問,什么叫母版呢?通俗點講,母版就是把一些組件組合起來的模塊,我們可以直接拖拽使用,不用再次使用組件組合,縮短了創(chuàng)建時間.一般情況下,一些組件組合使用的次數(shù)較多,我們就可以創(chuàng)建母版來保存這個組合方便下次使用.這里提供了兩個母版,一個是輪播圖,一個是下拉菜單.當然了,我們也可以自己創(chuàng)建母版以及導(dǎo)入其他項目的母版了.
第三個是組合,類似于母版,但是更加的復(fù)雜,比如日歷、彈出框等等我們都可以從這里面找到.
對于組件,如果我們不想使用系統(tǒng)默認的樣式或者顏色,那么該怎么辦呢?這時候我們需要對組件的屬性進行設(shè)置,只要我們點擊一下組件就可以出現(xiàn)屬性列表,設(shè)置對應(yīng)的屬性即可.
一個應(yīng)用不可能只由一個頁面組成,那么如何創(chuàng)建頁面多個頁面呢?如圖所示即可創(chuàng)建頁面.
上面的一步我們是創(chuàng)建好了頁面,頁面的跳轉(zhuǎn)怎么實現(xiàn)呢?我們看到每一個組件都有一個小尾巴,我們只需要把這個小尾巴拖拽到右邊的頁面單元上即可.同時我們可以通過選項菜單進行跳轉(zhuǎn)動畫的設(shè)置.
那么當所有都搞完了,我們?nèi)绾尾榭次覀兊膽?yīng)用原型圖呢?只需要點擊運行就可以了,當然了我們也可以把應(yīng)用原型圖下載到手機上查看只要在預(yù)覽頁面點擊分享按鈕然后掃描二維碼即可.
用墨刀創(chuàng)建一個應(yīng)用原型圖是不是很簡單呢?接下來,我們看一下Axure RP的介紹和使用.
Axure RP
[圖片上傳失敗...(image-e1bf11-1528437992826)]](http://upload-images.jianshu.io/upload_images/1396375-9d487308e15ae5d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
相比于墨刀簡約風格優(yōu)勢而言,Axure RP的功能顯得更加的強大一些.但是Axure RP是收費的(當然,網(wǎng)上有不少破解版的.??)我們從上面的傳送門中下載完成之后,漢化的問題我就不過講解了 ,在官方的下載頁面都有提示,不管是Mac還是Windows系統(tǒng)的都有如何操作.由于Axure RP官方的組件庫比較少,使用起來并不是很方便,所以我就從網(wǎng)上找了一些組件庫,分享出來給大家.因為本人我用的Mac本,所以我就說說Mac如何添加擴展的組件庫.
首先,我們先把組件庫下載下載下來(組件庫傳送門),然后從程序列表打開"Axure RP的包內(nèi)容".
然后就是按照(Contents ->Resources ->DefaultSettings ->Libraries)順序把組件庫放到對應(yīng)的文件夾即可.
然后,我們就開始創(chuàng)建我們的第一個應(yīng)用原型,開啟Axure RP,然后如圖新建即可(快捷鍵:command +N).
首先我們看一下Axure RP的操作頁面,和墨刀一樣的操作,Axure RP也是使用拖拽的方式往界面上添加組件.這里就不過多的說明了.
然后我們拖一個手機頁面,可以直接在組件庫位置直接搜索自己想要的組件名稱.然后拖拽即可,如圖所示.
然后我們直接點擊右上方的預(yù)覽一下,就打開了網(wǎng)頁就是我們當前應(yīng)用原型.
</br>
Axure RP的優(yōu)勢之處
但是Axure RP的優(yōu)勢又在何處呢?我主要說說相對于墨刀而言,Axure RP優(yōu)勢之處.
- 首先是強大的組件庫,我們都看到了,Axure RP的組件庫比較豐富(當然了,是我們自己添加的.??)
- 相對于墨刀的組件只能添加跳轉(zhuǎn)而言,Axure RP能添加的事件就更多了,而且還可以支持條件事件(自我發(fā)現(xiàn)研究的)這樣做起來的效果就比墨刀要生動的多了.示例如下所示.
比如,我們添加一個文字標簽,然后當它單擊的時候,我就讓它改變文字,具體的操作如圖所示.
但是Axure RP的還有條件設(shè)置,就是類似于代碼中的if語句.比如我們就接著上面的設(shè)置.我們假設(shè)當文本標簽文字是"你好"的時候,點擊標簽改變文字為"Hello World",當文本標簽文字是"Hello World"的時候,點擊標簽改變文字為"你好".
我們首先設(shè)置一下當文本標簽文字是"你好"的時候,點擊標簽改變文字為"Hello World".還是打開"鼠標單擊時"的控制面板.操作步驟如圖所示.
然后,我們點擊"確定"之后就可以完成條件的設(shè)置了.接下來我們要設(shè)置當文本標簽文字是"Hello World"的時候,點擊標簽改變文字為"你好".
首先我們要建立一個新的case.
然后我們先把條件設(shè)置為當前的文本標簽的文字為"Hello World".點擊確定即可.
然后我們在當前的條件情況之下設(shè)置我們的文本信息為"你好".設(shè)置好點擊"確定"即可.
這樣"鼠標單擊時"就有兩個用例了.如圖所示.
這樣,我們就設(shè)置好了,效果圖如下所示.
當然了,Axure RP交互類型可不單單只有單擊,雙擊等等,我們點擊"更多事件>>"可以查看所有的交互類型.這是墨刀所沒有的.
</br>
簡單介紹Axure RP 兩個有意思的控件
這兩個有意思的控件,一個是中繼器,中繼器就是做列表的時候使用的;一個是動態(tài)面板,動態(tài)面板是做控件中頁面跳轉(zhuǎn)中使用的.這兩個組件我們可以直接"Default"這個組件庫直接找到.
中繼器,我們比如徐濤添加一個列表在我們的應(yīng)用原型中.我們就可以使用到中繼器.
首先,我們先拖拽一個中繼器到頁面上去.
那么列表那么多數(shù)據(jù),我們該如何設(shè)置呢?我們看到右邊中繼器的屬性中說到的"每一項加載",文本設(shè)置為數(shù)據(jù)源表格的數(shù)據(jù).
如果我們讓顯示的數(shù)據(jù)改變,只要修改表格即可.
有個情況我們是需要考慮到了,一個列表中的每一個單元格可能要顯示的不止一個數(shù)據(jù),這時候改怎么辦呢?這時候我們就需要定制我們的中繼器了.現(xiàn)在表格如下所以一個是名字,一個是性別.我們都要顯示到應(yīng)用原型去.
現(xiàn)在我們點擊頁面中的中繼器,打開中繼器面板.
如圖添加兩個中繼器的文本標簽.
文本標簽添加好了之后,我們就需要設(shè)置他們的數(shù)據(jù)了,我們打開"每項加載時"的控制面板.把原來的設(shè)置刪除.然后設(shè)置文本,這里我們需要使用到函數(shù).讓它動態(tài)的加載每一項.
打開"fx"函數(shù)設(shè)置頁面.然后打開函數(shù)頁面.
第一項我們讓它加載的是名字.所以選擇的是"Item.Name"
然后點擊之后,我們把原來的"文字標簽"刪除掉.剩下的就如圖所示了.
點擊確定即可.
然后我們設(shè)置第二個文本標簽依然同上,不過是要設(shè)置的變量值為"Item.sex".
這樣我們就設(shè)置完成了.效果圖如下所示.
上面說到的是中繼器,下面我們說一下另外一個有意思的控件,那就是動態(tài)面板,首先我們先添加一個動態(tài)面板到頁面上去.
然后雙擊打開動態(tài)面板控制頁面.在這里,我們可以添加動態(tài)面板的頁面.這里我就添加一個新的動態(tài)面板.
我們說過,動態(tài)面板是用于控件頁面的切換.我們該如何實現(xiàn)這一個效果呢.我們?yōu)榱搜陲椥Ч?把第一個頁面設(shè)置為紅色,第二個設(shè)置為黑色.當我們點擊的時候,我們就讓他們兩個頁面做切換.
雙擊冬天面板的控制頁面上的"State1(名字可改變)"選項,然后進入動態(tài)面板,拖一個矩形上去,然后我們設(shè)置它的背景色為紅色.
然后,我們?nèi)绶ㄅ谥?State2"頁面,把頁面設(shè)置為黑色.
這時候我們就需要設(shè)置用例了.
然后我們添加當前的"case1"下設(shè)置條件和屬性如圖所示.
然后,我們就需要添加一個新的用例,然后如圖設(shè)置條件和屬性.
這樣整體我們就設(shè)置完成了.主面板中用例是這樣的.
接下來,我們看一下效果圖.
結(jié)束
其實呢,墨刀和Axure RP還有很多的使用技巧,這里就需要大家自行挖掘了,一個是簡約簡單,一個是功能強大且完善,客官看好哪一個請自行拿走.好了,今天就說到這了,大家如果有什么疑問可以在評論區(qū)提出.墨刀和Axure RP讓設(shè)計App原型圖就是如此簡單!
