在線APP制作工具

楊林

現(xiàn)在，手機使用率越來越高，手機上安裝的APP也種類繁多，但如果提出自己制作APP，卻會讓很多人望而卻步。我們都知道要制作一款APP，一般都需要一個代碼一個代碼地敲出來，非常麻煩，技術大牛也不敢輕言一人就能輕松搞定APP。但隨著個性化編程工具的日益發(fā)展，各種在線制作APP工具層出不窮，很多阻礙我們的技術問題都可以迎刃而解了。這里筆者推薦給大家一款在線APP制作工具——墨刀，只要具備邏輯思維能力，就能讓你即使是零編程基礎也能做出一款屬于自己的APP。接下來介紹一下它的主要功能。

認識工作區(qū)

工作區(qū)主要由5部分組成（如圖1），分別是頂部工具欄：工具欄上的按鈕可以協(xié)助完成頁面布局、畫布調整等操作；控件區(qū)：包含基礎組件庫、平臺組件庫、圖標庫、母版，無論是內置還是自定義組件都可以在控件區(qū)查找；列表區(qū)：包含頁面列表及元素列表，可以在此區(qū)域創(chuàng)建產品的頁面結構、選中頁面元素；面板區(qū)：面板區(qū)包含三個面板，即狀態(tài)設置面板、控件屬性設置面板、交互鏈接設置面板；頁面設計器：主要的設計區(qū)域，預覽模式下設計器內的所有組件布局均可以顯示出來。

進入工作區(qū)，從控件區(qū)拖拽組件至屏幕中央頁面設計器內，通過拖拽組件上方的鏈接到屏幕右側頁面列表，完成鏈接創(chuàng)建。點擊右上角運行按鈕，可以立即查看原型交互效果。

當我們注冊/登錄墨刀后，首先到達的是項目管理頁，創(chuàng)建的項目都會展示在這個頁面。點擊右側的按鈕創(chuàng)建項目，可以選擇空白項目，也可以直接套用模板。選擇空白項目，有iPhone、iPad、Android、Web四種平臺，選擇后進入項目屬性設置頁，可設置不同的設備型號。點擊創(chuàng)建，就進入到了工作區(qū)。接下來，我們需要創(chuàng)建頁面結構，創(chuàng)建頁面結構的區(qū)域位于頁面編輯器的右側，可以用它快速添加新頁面，也可以添加多級子頁面。直接創(chuàng)建頁面最高可達4級。選中特定頁面后，可以看到添加新頁面、復制、項目間頁面轉移、刪除按鈕。在頁面列表左下方，有頁面回收站入口，誤刪除的頁面可以在回收站中找回。

基礎組件庫

墨刀的組件庫包括基礎組件庫和平臺組件庫（如上頁圖2）。基礎組件庫提供文本、矩形、直線之類的基礎組件元素，利用基礎組件可以創(chuàng)造出變幻無窮的原型。平臺組件庫本質上是利用基礎組件庫做的組合。平臺組件庫內置或者自定義的組件能夠幫助用戶高效地制作原型。圖標、標簽、圖片等組件，可以打開相應素材庫，隨時替換圖標或圖片內容；文本、標題、矩形、輸入框等組件，可以雙擊編輯文字；批注組件可作為原型或頁面的備注，放置在設計器外；除輸入組件外，其他組件均為靜態(tài)組件。

圖標素材庫

控件區(qū)第三個標簽代表圖標素材庫，目前包含4種風格圖標（如圖3），可以直接拖入畫布對應位置使用。適宜的圖標形式可以幫助用戶快速學習產品功能。圖標庫左上角可以選擇圖標風格，亦可通過搜索關鍵詞快速篩選圖標。在“最近”中，可以查看到最近使用過的圖標，方便成體系的再次使用。標簽組件與圖標素材庫有關，拖入標簽后，可以在圖標庫中替換圖標。

圖片庫

墨刀支持上傳.png及.gif格式且容量小于1M的圖片，具體上傳方法如下：直接拖入或粘貼圖片至工作區(qū)，在當前頁插入圖片，批量拖入設計稿至右側頁面列表區(qū)，創(chuàng)建相應數(shù)量的新的圖片頁面，拖入圖片組件，在設置面板的圖片設置處，將當前組件替換為圖片，點擊面板上傳區(qū)域，選擇圖片上傳，將圖片拖入上傳區(qū)域，直接完成圖片替換，點擊上傳，打開素材庫，直接選擇已有圖片（如圖4）即可完成設置。

頁面設計器

頁面設計器（如圖5）主要指工作區(qū)中間的部分，是原型設計時組件的主要繪制區(qū)，預覽時設計器內的所有組件及界面設計都會顯示出來。設計器上有一些功能按鈕，可以幫助我們設置頁面樣式，實現(xiàn)交互效果。

墨刀創(chuàng)建頁面內容非常簡單：從左側控件區(qū)拖拽控件到頁面設計區(qū)，然后在屬性設置面板和頂部工具欄中編輯其細節(jié)就可以了。頂部工具欄，可對控件進行對齊、置頂、置底、組合、橫豎屏、網格線等操作。外觀設置面板，點擊對應參數(shù)，可設置其位置、顏色、圓角、透明度等屬性。頁面設計好以后，要建立頁面間的交互，只需點擊組件，將組件旁邊的圓形鏈接按鈕拖動（鏈接）到相應的頁面就可以啦！在添加鏈接時，還可根據(jù)需求，在交互鏈接設置面板中設置不同的觸發(fā)手勢、定時器及動效。交互鏈接設置面板可“顯示”或“隱藏”，要顯示、隱藏只需點擊閃電按鈕即可。選中組件后，可以在屬性設置面板中設置彈入、縮放、旋轉等幾十種動效。更為深入的還有使用母版及狀態(tài)來制作交互效果。

分享、導出

原型制作過程中，不但可以隨時檢查原型在PC或移動設備上的真實運行效果，還可以將原型分享給朋友，讓大家第一時間看到設計成果；想要項目預覽，可點擊工作區(qū)右上角的運行按鈕，即可預覽項目。在運行頁面右上角有分享按鈕，點開后掃描二維碼，就可以查看了。在這里，還可以設置項目的訪問密碼、設置邊框類型以及其他播放細節(jié)。點擊預覽頁面頂部的評論，即可切換到評論，對頁面進行打點評論，實時共享大家的反饋信息。

主工具欄右側有導出按鈕（如圖6），可以將當前原型文件導出為不同格式的離線文檔。HTML壓縮包為演示文件，下載后雙擊解壓，使用Chrome內核瀏覽器運行index.html文件，即可離線演示。單張或全部PNG圖片，可以導出除頁面狀態(tài)及母版頁面外的所有設計器內的頁面圖，用于原型展示。安卓APK安裝包，掃碼或直接安裝離線包，安裝到相應的安卓設備上，就可離線演示。

小應用實例

在手機APP中有一個很常見的需求，即頁面中軟鍵盤打開時，我們常希望點擊屏幕其他任何位置，就能把軟鍵盤給隱藏掉，如登錄、注冊之類的常見頁面。在實際開發(fā)中，很多人采用通過其他控件點擊事件，在onclick方法中調用軟鍵盤的隱藏方法。在頁面復雜的時候，要實現(xiàn)的onclick方法會很多，有時還會出現(xiàn)邏輯處理沖突的情況，這樣會顯得非常不友好。而通過墨刀設計好APP風格后，在基礎組件庫中，選擇內置組件，依次拖拽按鈕、矩形、文字功能按鍵，實現(xiàn)這些按鍵的組合，再設置文字，設置下拉框（如圖7），就可以很輕松地實現(xiàn)我們想要的隱藏軟鍵盤的功能。

墨刀是一款設計軟件的工具，可能功能沒有那么完整，但已經基本夠用。目前墨刀分為網頁版和客戶端，網頁版可以直接使用，客戶端在網頁版的功能的基礎上增加了諸如可以隨時提取頁面中某一顏色然后應用于對應控件等小功能。經過簡單的拖拽設置就可以把你需要的功能實現(xiàn)。相信大家已對這款APP制作工具產生了興趣。那就快去用它做一款屬于自己的APP吧！