您現在的位置是:電腦技術吧?>? 基礎知識 ??>??交互設計,交互設計怎么做??>??正文詳情

交互設計,交互設計怎么做

篤夢菡2019-11-15 11:21:02 人圍觀
簡介為什么做了交互設計還要做動效今天,我花時間看了看銀色的插件。這是第一個內置到sketch中的交互式插件。通過它,可以在不依賴其他軟件的情況下完成草圖交互方案的設計和顯示。

今天抽空看了下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的特性。

  首先Silver官方給自己的定位是:直接在Sketch中構建輕量級的移動交互原型。

沒錯,我們通過官方的視頻發現,不同于其它工具,它確實是一個基于Sketch的插件,是的,Everything within Sketch。

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

  當然少不了手機預覽咯

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

  下面介紹官方提供的特性:  1. 頭部和底部  通過快捷鍵即可將層轉化為固定的頭部或者底部,比如我們經常要使用的tabbar或者title bar。

Sketch中的透明層可以當作按鈕來使用,通過這些按鈕可以實現頁面跳轉的功能。

  2. 可以編輯的輸入區域  可以把文本層轉化為可以編輯的輸入區域。

這些輸入區域可以定義不同的鍵盤類型。

看起來很酷的樣子。

  3. 將層指向Artboard  可以將某些層轉化為可點擊區域,從而指定他們轉向某個Artboard。

這就是實現頁面跳轉的功能。

  4. 嵌入Web Views  可以指定某個形狀圖層為展示Web Views的區域。

在Sketch中調整他們的尺寸和位置即可讓這個圖層在預覽時顯示真正的網頁。

(靜電:我喜歡這個功能)  5. 內建的轉場效果  大家都知道在xcode中有Push,Pop,Modal和Dismiss這的轉場效果,那么使用Silver你同樣可以逼真的做到。

Modal模式下顯示的Artboard同樣可以做返回處理。

  6. 集成核心的OS功能  通過實現攝像頭,瀏覽相冊,書寫email和短信,打電話或者運行外部網站這些功能,讓你的原型看起來像真的一樣。

(靜電:amazing)

  7. 實時預覽  話說這個是這類軟件的標配了吧?不過Silver需要一個他自己的獨立app來實現這個預覽功能。

通過數據線或者Wifi即可預覽。

  極大改善你的工作方式:  Silver號稱是第一個內建在Sketch中的交互工具。

使用這種內建的方式可以讓你避免在軟件中進行切換操作,簡單快速的制作出交互原型。

同時,我們可以看出Silver大概可能是基于Framer.js的,這個相信大家不會陌生。

通過為Framer開發的Silver模組,你可以在兩者之間傳遞交互動作。

  要看演示視頻?

  點擊 http://silverflows.com網站,查看官方視頻吧。

不過建議準備好自己的小梯子哦。

  寫在最后  Silver目前還在開發過程中,大家可以在其官方網站注冊,等待開發完成,你將收到Silver團隊的郵件。

Silver是首款內置在Sketch中的交互設計軟件,其表現如何,還有待大家的試用。

不過Sketch通過這種插件方式彌補了自己不能做交互稿的缺陷,這想必能滿足不少用戶的期望吧?Silver團隊說,有了Silver,你的設計稿就是你的交互原型,讓我們拭目以待吧。

版權聲明:本文由 篤夢菡 整理編輯。

原標題:交互設計做什么,ui交互設計怎么做

轉載注明出處:http://www.dn9ww09s.icu/basics/12479.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 三星s4卡刷教程,三星s4刷什么系統最好

    三星s4卡刷教程,三星s4刷什么系統最好 相關圖片三星手機s4怎么刷機三星S4是一款非常老的機型。現在大多數用戶將它用作存儲備用機器。該機配備了exynos 5410雙核處理器,運行Android 4.2.2 touchwiz系統三星手機如何刷機...

  • 邊框透明,動態透明邊框

    邊框透明,動態透明邊框 相關圖片手機p圖邊框透明當CSS多邊框背景級別3仍然是草稿時,CSS工作組就是否支持多邊框進行了大量的討論,就像討論多背景圖片一樣。不幸的是,當時認為多個邊界并不有用,即使需要,也可...

  • win8怎么清理c盤,c盤滿了怎么清理win8

    win8怎么清理c盤,c盤滿了怎么清理win8 相關圖片c盤滿了怎么清理win10現在win10系統的份額逐漸接近win7,這意味著越來越多的用戶開始選擇win10。同樣,win8的用戶在厭倦使用win8后,也希望升級到win10。他們想知道win7如何深度清理c盤...

  • opacity屬性,resize屬性

    opacity屬性,resize屬性 相關圖片html透明度屬性RGBA和opacity語法:R:紅色值。正整數|百分比G:綠色值。正整數百分比B:藍色值。正整數百分比A:透明度。值0~1,將CSS代碼復制到剪貼板/*IE6transform屬性...

  • garageband怎么用不了,garage band怎么用

    garageband怎么用不了,garage band怎么用 相關圖片garageband錄音怎么用Garageband是蘋果的數字音樂創作軟件,也可以在iPhone上使用,主要面向業余愛好者。它包括1000首預先錄制好的旋律樣本和50首合成樂器樣本,可以使用garageband電腦版用...

  • 移動硬盤沒有盤符顯示,電腦不顯示移動硬盤怎么辦

    移動硬盤沒有盤符顯示,電腦不顯示移動硬盤怎么辦 相關圖片電腦讀取不了移動硬盤許多人使用移動硬盤來存儲和傳輸數據。移動硬盤的即插即用非常方便。但也有部分用戶遇到了移動硬盤不顯示的情況。我們該怎么辦?一。當移動硬盤不顯示時...

  • 循環利用標識1,循環利用標志

    循環利用標識1,循環利用標志 相關圖片循環利用標志內1在制作網站時,我們經常需要處理客戶的企業身份。如果你的網站有另一種顏色背景,你需要顛倒客戶提供的商標的白色。當客戶只提供背景為白色的JPG圖像文件時,您...

  • win7正版永久激活密鑰,win7旗艦版最新密鑰

    win7正版永久激活密鑰,win7旗艦版最新密鑰 相關圖片win7旗艦版永久激活Windows 7旗艦的激活碼可以用于windows7旗艦的激活,用戶可以正常使用windows7旗艦的全部功能。與其他激活方法相比,使用Windows 7旗艦w7旗艦版激活碼...

  • flash動畫格式,flash動畫文件格式

    flash動畫格式,flash動畫文件格式 相關圖片Flash動畫實例教程swf格式的flash動畫體積小,傳輸方便,深受網民歡迎。然而,令人遺憾的是,許多在線論壇只允許圖片,而不允許flash動畫。如果你手上有一些美妙的閃光,并渴望flas...

  • 蘋果六藍牙怎么無法連接,iphone11藍牙連接不上

    蘋果六藍牙怎么無法連接,iphone11藍牙連接不上 相關圖片蘋果之間藍牙連接不上蘋果手機有時需要連接到藍牙設備,如藍牙耳機,以便更方便地聽音樂、看視頻和打電話。但有些用戶很少使用這個功能,不知道如何連接蘋果藍牙?一。在IOS設...

熱評文章

  • origin客戶端安裝慢,origin平臺下載游戲速度慢

    origin客戶端安裝慢,origin平臺下載游戲速度慢 相關圖片origin平臺下載速度慢Origin是EA在2011年搭建并推出的一個全方位的游戲社交平臺。它集成了數字游戲購買、物理版本激活、下載、數據云存儲、社交網絡等功能,正在逐步增加更多功能。...

  • css background屬性,css中background

    css background屬性,css中background 相關圖片html中background背景大小的值類型:1或2個值。這些值可以是像素Px、百分比%或自動,也可以是特定值cover和contain。可以為背景大小設置兩個值,一個是必需的,另一個是可css display屬性...

  • win7旗艦版優化設置,win7系統最流暢優化

    win7旗艦版優化設置,win7系統最流暢優化 相關圖片win7設置優化大全很多人在安裝了win7系統之后就開始使用它了。事實上,如果你對win7做了一些設置,你的系統在win7安裝后會更流暢,更省電,更好的使用,你可以清理垃圾和無效的win...

  • 苯磺酸氨氯地平片價格,湖南天雁股吧

    苯磺酸氨氯地平片價格,湖南天雁股吧 相關圖片ST信威在手機撥號界面輸入具體指令,查詢相應的手機信息。有些用戶不知道**Chen 06的用途,所以本文將與您分享**chen06找到的信息是什么?每個手機都有一個世界000760斯太爾股吧...

  • 居中顯示,div居中顯示

    居中顯示,div居中顯示 相關圖片設置表格居中代碼如下:div style=width:1000px;margin:0auto;div style=background color:red;text ali頁碼居中怎么設置...

  • bios硬盤啟動順序,bios設置硬盤啟動

    bios硬盤啟動順序,bios設置硬盤啟動 相關圖片bios設置ssd第一啟動盤許多計算機用戶不知道,當計算機啟動時,他們會從硬盤中尋找啟動文件來啟動系統。如果硬盤不是第一個引導項目,或者有兩個硬盤,系統將無法啟動。有時,有...

  • 交互設計作品集輔導,交互設計作品

    交互設計作品集輔導,交互設計作品 相關圖片北京交互設計作品集培訓斯佩爾(中國設計總監):我想我首先需要了解的是,為什么我們需要一個投資組合來尋找互動設計或其他設計工作。從我采訪各個設計師的經驗來看,作品集...

  • 高通驍龍625怎么樣,驍龍625處理器怎么樣

    高通驍龍625怎么樣,驍龍625處理器怎么樣 相關圖片驍龍660一些入門級手機使用小龍450,這個CPU呢?小龍450是小龍發布的中低端移動SOC,但事實上,沒有一款中端機型會選擇小龍450。450多臺小龍用于小龍450采用驍龍660怎么樣...

  • superamoled屏幕好嗎,ltps和amoled哪個好

    superamoled屏幕好嗎,ltps和amoled哪個好 相關圖片super amoled 手機市場上的一些安卓手機提到,他們在宣傳手機屏幕時使用了超級AMOLED屏幕。超級AMOLED和之前的AMOLED屏幕之間哪一個最好?兩者有什么區別?AMOLED(super amoled屏幕...

  • css搜索框居中,搜索框css

    css搜索框居中,搜索框css 相關圖片css搜索框樣式代碼最終渲染:首先設置一個帶有背景色的公共div框,然后使用上一篇文章中從post獲得的三角形圖標,將div框設置為相對定位模式,將三角形圖標設置為絕對定位,并將位...

關注微信

变脸官网查询