Indigo Studio介紹
Indigo Studio是一款交互原型設(shè)計(jì)工具，支持100多個(gè)真實(shí)場(chǎng)景，支持線(xiàn)框交互式用戶(hù)界面，Indigo Studio支持快速的原型交互式應(yīng)用程序、以及功能齊全的、生動(dòng)的UI原型。
INDIGO STUDIO是一款免費(fèi)的交互原型設(shè)計(jì)工具，通過(guò)Indigo Studio你可以用超過(guò)100個(gè)不同的場(chǎng)景、線(xiàn)框(內(nèi)置交互控件以及桌面、網(wǎng)站和移動(dòng)應(yīng)用的原型)創(chuàng)建腳本，全部不需要代碼。它能讓您快速探索及創(chuàng)造功能，包括動(dòng)畫(huà)界面原型。當(dāng)然了，除了頁(yè)面原型，時(shí)下熱門(mén)的Mobile Apps原型一樣可以用它創(chuàng)建。
Indigo Studio軟件功能
1、100多個(gè)真實(shí)場(chǎng)景
Indigo Studio電腦版可以幫助你從一開(kāi)始就專(zhuān)注于你的用戶(hù)。通過(guò)從100多種包含人物、地點(diǎn)和各種設(shè)備的綜合故事版中進(jìn)行選擇，你可以輕松地將設(shè)計(jì)直接轉(zhuǎn)化到現(xiàn)實(shí)生活場(chǎng)景中。
2、線(xiàn)框交互式用戶(hù)界面
大量?jī)?nèi)置的交互式控件、文本、圖像、形狀和圖表組成了高效，簡(jiǎn)潔的線(xiàn)框界面。Clutter-Free界面讓你更專(zhuān)注于自己的設(shè)計(jì)，因而你可以隨時(shí)找到你所需要的。
3、移動(dòng)觸摸體驗(yàn)設(shè)計(jì)
使用Viewport可以輕松地選擇不同目標(biāo)設(shè)備的設(shè)計(jì)方案，并且通過(guò)觸摸手勢(shì)支持和內(nèi)置的屏幕轉(zhuǎn)換功能，實(shí)現(xiàn)在任何支持HTML的設(shè)備上運(yùn)行以及與自己的原型交互。你甚至可以使用IOS平臺(tái)包為ipad和iPhone用戶(hù)設(shè)計(jì)專(zhuān)屬本地體驗(yàn)。
4、隨時(shí)隨地快速添加，流暢交互
Indigo Studio的優(yōu)勢(shì)在于它的交互功能。無(wú)論是設(shè)計(jì)網(wǎng)絡(luò)、桌面還是移動(dòng)應(yīng)用，你都能給屏幕快速添加自定義的交互功能，在少?gòu)?fù)制和粘貼的情況下實(shí)現(xiàn)仿真應(yīng)用程序體驗(yàn)。
5、逼真的視圖轉(zhuǎn)換
交互作用可以很容易地轉(zhuǎn)化為平滑的、逼真的視圖轉(zhuǎn)換—可以在簡(jiǎn)化的時(shí)間表上對(duì)它們進(jìn)行查看和調(diào)整，根據(jù)自己的需要把它們變得簡(jiǎn)單或者復(fù)雜。
6、隨時(shí)隨地分享
無(wú)論你是想進(jìn)行團(tuán)隊(duì)快速審查，與用戶(hù)一起評(píng)估原型，還是與項(xiàng)目小組分享，Indigo Studio都讓這一切變得輕而易舉。只需要點(diǎn)擊幾下，你就可以分享一個(gè)連續(xù)的、交互式的，可運(yùn)行在任何支持HTML5設(shè)備上的原型。你也可以將選中的屏幕導(dǎo)出為用于文檔的PDF或png文件，然后退出。
Indigo Studio軟件特點(diǎn)
與大多數(shù)的原型設(shè)計(jì)工具不同，Indigo Studio將交互設(shè)計(jì)視為其核心。其他工具只側(cè)重于提供靜態(tài)的UI實(shí)體模型設(shè)計(jì)和基本鏈接能力，如Axure等流行的原型設(shè)計(jì)軟件，讓原型設(shè)計(jì)師或UI開(kāi)發(fā)者花費(fèi)大量時(shí)間以不同的增加鏈接的方式實(shí)現(xiàn)交互設(shè)計(jì)。Indigo Studio卻可以對(duì)每一個(gè)元素每一個(gè)按鈕進(jìn)行交互設(shè)計(jì)，并能夠?yàn)榻换?dòng)作設(shè)計(jì)豐富的過(guò)渡動(dòng)畫(huà)效果。他還支持設(shè)計(jì)注釋和分享，大大的團(tuán)隊(duì)設(shè)計(jì)的工作效率。
Indigo Studio包括超過(guò)21個(gè)內(nèi)置的交互式控件，300個(gè)可搜索的圖標(biāo)，常用的基于曲線(xiàn)的形狀和基于矢量的模板。特別值得一提的是，Indigo Studio提供了300多個(gè)根據(jù)實(shí)際而設(shè)計(jì)的模板，讓UI原型設(shè)計(jì)可以馬上對(duì)號(hào)入座，而且提供的模板廣大設(shè)計(jì)師一定會(huì)愛(ài)不釋手，Infragistics作為一流的用戶(hù)界面控件開(kāi)發(fā)商，其設(shè)計(jì)模板絕對(duì)保證先進(jìn)、現(xiàn)代、美觀!其操作界面也是現(xiàn)在最流行的METRO風(fēng)格，絕對(duì)能幫助使用者激發(fā)出不少設(shè)計(jì)靈感。
Indigo Studio安裝方法
1、在華軍軟件園下載Indigo Studio軟件，并解壓安裝包，雙擊安裝程序“IndigoStudio5.02.msi”開(kāi)始進(jìn)行安裝。
2、進(jìn)入如下的界面，提示需要安裝Silverlight 能正常安裝與使用，您可以先進(jìn)行安裝。
3、安裝完成后運(yùn)行Indigo Studio即可直接使用。
Indigo Studio驗(yàn)證機(jī)制
State
使用State功能展示比較小的驗(yàn)證或屏幕從一個(gè)狀態(tài)切換另一種狀態(tài)。使用State可以很方便的保存各種狀態(tài)，同時(shí)也增加了重用性。
Demo
簡(jiǎn)便起見(jiàn)，這里選擇了一個(gè)比較簡(jiǎn)單的流程，你只需要輸入你的名字然后按下Login按鈕就可以了。如果名字字段為空，文本框上方就會(huì)出現(xiàn)紅色的提示文字。如果你輸入了文本，標(biāo)簽又會(huì)消失。你可以用Backspace模擬這個(gè)過(guò)程。
演示中有兩個(gè)屏幕： (a) Login Page 和(b) Main Page，在原型中也只使用"States"來(lái)表示兩個(gè)屏幕:
下面是Indigo Studio中呈現(xiàn)的關(guān)于State轉(zhuǎn)換的流程：
問(wèn)題：state 1.1.1 / 1.2中的按鈕為何會(huì)重定向到下一個(gè)頁(yè)面，而其他state的按鈕卻不會(huì)?
答：因?yàn)樵谶@兩個(gè)State下面，有一個(gè)同樣尺寸的登陸按鈕被放置在原始登陸按鈕相同的位置，這個(gè)新按鈕是指向下一個(gè)頁(yè)面的。也就是說(shuō)原來(lái)的登陸按鈕隱藏在新按鈕的下方。
同樣，當(dāng)文本字段被清空時(shí)，新按鈕就會(huì)被移除，而在下面的原始按鈕又會(huì)到上面。
注意：原始按鈕不指向任何頁(yè)面，它是在被點(diǎn)擊后顯示紅色提示文字的。
總結(jié)
接下來(lái)是很重要的一步，就是通過(guò)消除冗余來(lái)優(yōu)化State。如果一個(gè)state與另一個(gè)state是類(lèi)似的，那最好是進(jìn)行引用而不是進(jìn)行復(fù)制。
由于state是按照順序進(jìn)行的，所以應(yīng)該引用轉(zhuǎn)換開(kāi)始時(shí)的那個(gè)state。
比如有兩個(gè)state由綠色的方框進(jìn)行強(qiáng)調(diào)，但只有底部的綠色方框可以指向頂部的綠色方框。底部的綠色state不是最開(kāi)始的item，頂部那個(gè)才是，所以應(yīng)該引用頂部的state。而灰色方框的state則剛好相反，頂部那個(gè)應(yīng)該引用底部那個(gè)state。
棕色方框的State細(xì)化：
綠色方框的State細(xì)化：
下面就是由初始狀態(tài)圖再用Indigo Studio做出來(lái)的屏幕草圖：
Indigo Studio使用說(shuō)明
面向設(shè)計(jì)人員和開(kāi)發(fā)人員的一種設(shè)計(jì)系統(tǒng)
使用帶有Sketch UI套件的Indigo Design System中的組件和UX模式，創(chuàng)建一流的UI設(shè)計(jì)。使用預(yù)先構(gòu)建的模式快速啟動(dòng)您的過(guò)程，或創(chuàng)建自己的自定義UI庫(kù)。然后輕松共享為可視規(guī)格以生成Angular代碼。
與真實(shí)的用戶(hù)一起測(cè)試您的設(shè)計(jì)
盡早并經(jīng)常在編碼之前獲取反饋，從而避免代價(jià)高昂的迭代?？焖贋槟脑驮O(shè)置用戶(hù)測(cè)試，并查看用戶(hù)如何逐屏或視頻參與。還接收任務(wù)分析報(bào)告。測(cè)試人員可以在任何設(shè)備上參與。
獲取即用型Angular組件
您從設(shè)計(jì)系統(tǒng)在Sketch中制作的所有內(nèi)容都與我們的Angular組件相匹配。只需單擊一個(gè)按鈕，即可毫不妥協(xié)地從設(shè)計(jì)中生成高質(zhì)量的HTML，CSS和Angular代碼。
Indigo Studio更新日志
1. 優(yōu)化的腳步從未停止!
2. 更多小驚喜等你來(lái)發(fā)現(xiàn)~
華軍小編推薦：
本款軟件功能強(qiáng)大，操作簡(jiǎn)便，希望大家能夠喜歡，另外本站還有杜特門(mén)窗大師傅、vect2000矢量化軟件、我家擺擺看、三維管道設(shè)計(jì)軟件、GeoCorelDRAW等軟件，歡迎來(lái)華軍軟件園下載！
您的評(píng)論需要經(jīng)過(guò)審核才能顯示
有用
有用
有用