千呼萬喚??出來!Sketch 重大更新,新增原型連線和預覽工具~

長久以來,Sketch 在可交互方面毫無作為,一直為人所詬病。官方似乎更希望將這些功能留給第三方開發者做插件,自己安靜的做個小而美的繪圖軟體。

例如官網上推薦的具備交互屬性的第三方工具 Flinto、Farmer、Marvel 等等……

以及我最喜歡的團隊 invision 做的插件 Craft 。

雖然每個工具都有自己的優點和特性,但是,需要多個軟體配合的製作流程總是非常繁瑣,中間會有各種各樣的小問題。再者,在今天越來越多工具開始優化 UI 界面設計的支持,如 Affnity Design、GravityDesigner、Adobe XD、Invision Studio 等等。

尤其是 XD 和 Invision Studio 來勢洶洶。XD 有 Adobe 全家福系列的支持,並且有跨平台優勢,隨著更新功能日趨完善。Invision Studio 則有自己強大的團隊協作平台和 H5 預覽功能,而且也是跨平台產品,可以進入官方鏈接查看具體介紹。

[The world』s most powerful screen design tool | InVision Studio]

在這樣前有狼後有虎的境地里,Sketch 終於出手了,雖然只是最基礎的連線和演示,但這一小步預示著後面更完善的交互動畫設計功能肯定已經在路上了!下面就簡單介紹下 Sketch 的原型功能。

本次更新,上方工具欄的右側多出了 Link、Preview、Cloud 三個按鈕。

然後選中設計中點擊可以觸發跳轉的按鈕或圖片,再點擊 Link,然後選擇自己跳轉的目的頁面即可。

下面是鏈接完以後的效果,它醜陋的路徑線條沒有任何辯解的餘地……

如果畫了很多鏈接,又想修改界面的設計,那麼可以在右上角的 View 按鈕中選擇隱藏 Prototyping 內容。

在我們定義跳轉頁面時,右側的屬性欄也會對應增加一個 Prototyping 的區域,Taget 可以選擇其他 Page 中的頁面,Animation 則是選擇跳轉的動畫類型,這個很好理解自己試試就明白了。

把所有跳轉都做完以後,點擊工具欄上的 Preview ,就可以開啟預覽跳轉效果了。

需要注意的是,有時候我們做的頁面會超出一屏幕的高度,每一個 Artboard 中對於 Size 的設置要和你設計的設備相匹配,這樣預覽時才不會出錯。

最後,說說最後一個功能——Cloud。需要購買過序列號在官方註冊過的正式賬號才可以使用,點擊展開面板後,選擇 Upload 就可以將做好的設計和連線上傳到官方伺服器上。

上傳完成後,就會彈出網頁,對查看許可權進行設置。可以勾選下方的第二個選項讓所有人查看或添加好友的郵箱給他們發送預覽鏈接。不過,畢竟不是國內的伺服器,上傳打開的速度是比較感人的。

之後,你就可以自己在網頁中預覽,或者複製該頁面的鏈接給團隊成員或好友預覽,例如我分享的這個預覽。

[我上傳的原型預覽地址]

在預覽中,要打開有交互的界面,點擊右上方的播放按鈕,就可以在線上進行操作。每個頁面的右側還有評論欄,可以寫下對當前頁面的留言和討論。

好了!以上就是 Sketch 本次更新的原型功能介紹,如果有問題或者有什麼好的想法,可以給我留言。

不要忘記點贊了!!!

-------------------------------------------------------------------------------------

更多的問題可以關注我的公眾號:

超人的電話亭

或加入我們的QQ群:476240090


推薦閱讀:

手機遊戲通常是用什麼做原型的?
產品經理最需要的原型工具是 Axure 嗎?如果不是,有什麼不同的需求?展示產品原型時有哪些需求?
用「吃到」DEMO 向你介紹酷酷動效的製作辦法
網站原型設計工具有哪些?
通過axure做原型設計生成的html代碼可以讓開發直接用嗎?如果不能,為什麼呢?

TAG:Sketch | 原型工具 | UI設計師 |