誰說Sketch不能做交互設計?Silver功能搶先看! - 優設網 - UISDC

誰說Sketch不能做交互設計?Silver功能搶先看!

2016/02/26 12368評論區

sketch-interaction-silver-1

@JingDesign?:今天抽空看了下Silver這款插件,這是首款內置于Sketch的交互插件,通過它,你可以不用再依賴其它軟件,就可以在Sketch中完成交互方案的設計和展示工作,聽起來還是很酷的。現在Silver還沒有面世,先看看這篇介紹Silver特性的文章吧。

最近交互工具可真是風生水起不斷涌現,從原生的Xcode,還有這幾個號稱不用寫代碼的的Hype3,Pixate,再到Principle,還有Flinto,還有這個正在開發過程中的Silver。不知道大家是不是已經挑花眼了呢?

不管你是哪個工具的粉,我們都要搞清楚一點,這些軟件都在或者想要實現這些內容:

1. 不用寫代碼即可實現各種交互效果

2. 打造屬于自己的一套交互語言。前者就是靜電上邊提到的hype3,pixate,principle,flinto等等,或者除了傳統的xcode是蘋果公司的原生應用之外,還有Creo。Creo除了能實現前邊提到的軟件的基本功能外,還創造了一套自己的語言,讓自己更有擴展性。

Creo和今天要著重介紹的Silver的一個顯著特點,也就是靜電看到他們之后的第一印象,就是:這是一個簡化版的Xcode。他們通過與xcode類似的工作流和組件構架形式來工作。也就是說,在Xcode里你可以看到各種VC(View Controller),那么在這兩個軟件中,你同樣可以看到。

比如你可以在他們的界面中看到Image View,Web View等等的組件。在配合類似Xcode的Storyboard的工作流,讓設計師的交互方案得以實現。下面來看看還在開發過程中的Silver的特性。

8yz20160226

首先Silver官方給自己的定位是:直接在Sketch中構建輕量級的移動交互原型。沒錯,我們通過官方的視頻發現,不同于其它工具,它確實是一個基于Sketch的插件,是的,Everything within Sketch。

7yz20160226

我們也可以看到類似的連線效果,直接在sketch中連線確實很少見。

6yz20160226

當然少不了手機預覽咯

5yz20160226

由于Silver還沒有公開提供下載,但我們通過視頻能得到不少信息,首先他是基于sketch自身的,不必使用第三方工具;然后,是可以預覽的。

下面介紹官方提供的特性:

1. 頭部和底部

通過快捷鍵即可將層轉化為固定的頭部或者底部,比如我們經常要使用的tabbar或者title bar。Sketch中的透明層可以當作按鈕來使用,通過這些按鈕可以實現頁面跳轉的功能。

2. 可以編輯的輸入區域

可以把文本層轉化為可以編輯的輸入區域。這些輸入區域可以定義不同的鍵盤類型??雌鵠春蕓岬難?。

3. 將層指向Artboard

可以將某些層轉化為可點擊區域,從而指定他們轉向某個Artboard。這就是實現頁面跳轉的功能。

4yz20160226

4. 嵌入Web Views

可以指定某個形狀圖層為展示Web Views的區域。在Sketch中調整他們的尺寸和位置即可讓這個圖層在預覽時顯示真正的網頁。(靜電:我喜歡這個功能)

5. 內建的轉場效果

大家都知道在xcode中有Push,Pop,Modal和Dismiss這的轉場效果,那么使用Silver你同樣可以逼真的做到。Modal模式下顯示的Artboard同樣可以做返回處理。

6. 集成核心的OS功能

通過實現攝像頭,瀏覽相冊,書寫email和短信,打電話或者運行外部網站這些功能,讓你的原型看起來像真的一樣。(靜電:amazing…)

3yz20160226

7. 實時預覽

話說這個是這類軟件的標配了吧?不過Silver需要一個他自己的獨立app來實現這個預覽功能。 通過數據線或者Wifi即可預覽。

2yz20160226

極大改善你的工作方式:

Silver號稱是第一個內建在Sketch中的交互工具。使用這種內建的方式可以讓你避免在軟件中進行切換操作,簡單快速的制作出交互原型。同時,我們可以看出Silver大概可能是基于Framer.js的,這個相信大家不會陌生。通過為Framer開發的Silver模組,你可以在兩者之間傳遞交互動作。

1yz20160226

要看演示視頻?

點擊?//silverflows.com網站,查看官方視頻吧。不過建議準備好自己的小梯子哦。

寫在最后

Silver目前還在開發過程中,大家可以在其官方網站注冊,等待開發完成,你將收到Silver團隊的郵件。Silver是首款內置在Sketch中的交互設計軟件,其表現如何,還有待大家的試用。不過Sketch通過這種插件方式彌補了自己不能做交互稿的”缺陷“,這想必能滿足不少用戶的期望吧?Silver團隊說,有了Silver,你的設計稿就是你的交互原型,讓我們拭目以待吧。

歡迎關注靜電的微信公眾號:

jdqr16226

Sketch教程合集持續更新中:

  1. 《SKETCH設計教室!從零開始學APP設計利器SKETCH(一)》
  2. 《SKETCH設計教室!從零開始學APP設計利器SKETCH(二)》
  3. 《SKETCH設計教室!帶你了解超好用的SKETCH插件》
  4. 《想要一稿過不加班?SKETCH絕配神器MIRROR搶先體驗》
  5. 《超實用!SKETCH大師最常用的3個實戰小技巧》
  6. 《前端神器!為網頁設計而生的15個優質SKETCH插件》
  7. 《SKETCH新手指南!10個幫你UI設計提速的SKETCH使用技巧》
  8. 《超能陸戰隊!手把手教你用SKETCH繪制萌萌噠的大白》

uisdc-hao

【優設網 原創文章 投稿郵箱:[email protected]

================關于優設網================
“優設網阿贾克斯对热刺“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航://hao.uisdc.com/book/。
設計微博:擁有粉絲量104萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航://hao.www.utsvcz.com.cn

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/sketch-interaction-silver

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計達人 設計師干貨 web前端開發 配色 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里