墨刀是一款在線原型設計與協同工具,借助墨刀,產品經理、設計師、開發、銷售、運營及創業者等用戶群體,能夠搭建為產品原型,演示項目效果。墨刀同時也是協作平台,項目成員可以協作編輯、審閱,不管是產品想法展示,還是向客戶收集產品反饋,向投資人進行Demo展示,或是在團隊內部協作溝通、項目管理。
當你想制作原型設計圖,在網上搜索原型設計工具的時候,在知乎、CSDN等平台上總是能看到墨刀的身影,下面我就通過一個實際的例子來感受一下墨刀的使用體驗。
在進入墨刀后,首先進行用戶注冊,注冊完成后就能使用,墨刀提供web版本的工具,可以減少用戶下載安裝應用的麻煩,新用戶享有免費體驗7天,點擊新建按鈕就能新建原型項目
可以看到墨刀為我們提供了許多當前市面上常見app的原型模板,我們只需要直接選擇創建就可以使用了,極大的減少了用戶在原型設計上所花費的時間。
不過我這個項目不需要下面的這些模板,於是我選擇了iPhone12的模板進行創建。進入項目界面后,首先能看到的主界面如下圖:
左邊欄是一個應用中的各個頁面,一個應用不可能僅僅只有一個主頁頁面,向我們平時使用的軟件,如學習通、B站等,都是由多個頁面所組成,在這些頁面之間建立起相對應的聯系,一個軟件完成的操作邏輯才能說是被完整的搭建了出來。
中間部分就是頁面所對應的界面了,用戶利用右邊的組件工具欄,將組件脫出到界面中,組成一個完整的界面。
右邊就是一個大的項目設置,可以更改項目的默認布局、模板和網格。
下面就通過我們小組的合作項目:文曲星——基於動態數據可視化的高校智能學習輔助系統的原型設計來深入體驗一下墨刀的各種功能。
首先是一個登錄功能,這是每一款應用都必須要有的功能,只有通過對個體用戶進行信息上的采集,才能更好的進行個性化的服務,一個登錄功能應該包含有登錄界面、注冊界面、找回密碼界面。
登錄界面應該包含用戶名與密碼的輸入框、執行登錄操作的按鈕、注冊賬戶和找回密碼界面的跳轉鏈接組成。
注冊界面應該由用戶名、手機號、密碼、確認密碼、手機驗證碼這五個部分的輸入框以及執行注冊操作的按鈕組成。
找回密碼應該由手機驗證碼、新密碼、新密碼確認輸入框和確認修改密碼組成。
實際效果如下圖所示:
完成界面的布局后,就應該建立這三個界面的跳轉關系了,墨刀提供了可視化的界面跳轉指向工具,只需要點擊選中控件,將空間左邊的小閃電標志拖向想要跳轉到的頁面即可完成,這種可視化的操作使得不懂代碼的人也能很好的使用這個工具,降低了使用門檻,但是如果一個頁面存在太多的跳轉關系,所相連的線交織在一起時,就會顯得非常的混亂,這是圖形化操作所帶來的不可避免的缺點。
在完成跳轉的鏈接后,通過運行測試發現,界面之間的跳轉非常的生硬,這時候就需要動畫的加入使得跳轉變得流暢好用,按照下面的步驟就能為跳轉頁面添加動效了
1.選中剛剛添加好跳轉功能的控件
2.點擊右邊欄的事件選項卡
3.點擊添加事件
4.選擇合適的動效,這里我選擇了右移入
這樣,我們就完成了頁面間跳轉的動畫,一個軟件最初的模樣已經出現在我們眼前了。
緊接着,就是軟件的首頁設計了,首先是在頁面的底部加入常見的導航欄,將四個位置分別更改為:首頁、消息、筆記、我的,並更改相應的圖標,給予用戶更直觀的使用體驗,同時,因為墨刀不支持頁面嵌套,所以無法實現底部導航欄不動而中間內容改變的效果,只能實現生硬的轉換效果,具體制作步驟同上。
在此處我並不打算添加動效,避免底部導航欄跟隨運動導致穿幫。
最終效果:
總結:
墨刀是一款對於新手非常友好的原型設計工具,提供了海量的常見模板,同時支持web端進行設計,並將文件同步至其雲盤中,保證多設備的同步,自動的對齊功能非常智能,對於頁面跳轉,可視化的拖線操作也非常的友好,並提供了簡單的動畫添加功能。
但是這款軟件也並非沒有缺點,其原型設計出來的結果過於的簡單,難以完成復雜的操作,同時對於當前市面上各類app常用的底部導航欄的跳轉支持不佳,導致各個畫面的切換相當的生硬。
下面是本工程的體驗鏈接,歡迎各位拜訪提出意見。
https://modao.cc/app/dd4ef90528f8ce93bea738e47cf24135b8ff356d?simulator_type=device&sticky