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