Indigo Studio電腦版是款針對設(shè)計行業(yè)所打造的交互原型設(shè)計工具。Indigo Studio正式版提供了直觀的用戶界面和向?qū)降脑O(shè)計功能，內(nèi)置了100多個真實的場景，包括地點、人物以及設(shè)備供設(shè)計者選擇。Indigo Studio中還內(nèi)置了豐富的操作視頻與示例文檔，可以讓新手用戶更快速的熟悉操作流程。相似軟件版本說明軟件地址小柯包裝設(shè)計師6.0 官方版查看catiav62019 正式版查看跨棒距計算工具1.0 官方版查看3dmax材質(zhì)庫官方版查看摹客Axure插件1.1.0.2 最新版查看

Indigo Studio介紹

　　Indigo Studio是一款交互原型設(shè)計工具，支持100多個真實場景，支持線框交互式用戶界面，Indigo Studio支持快速的原型交互式應(yīng)用程序、以及功能齊全的、生動的UI原型。

　　INDIGO STUDIO是一款免費的交互原型設(shè)計工具，通過Indigo Studio你可以用超過100個不同的場景、線框(內(nèi)置交互控件以及桌面、網(wǎng)站和移動應(yīng)用的原型)創(chuàng)建腳本，全部不需要代碼。它能讓您快速探索及創(chuàng)造功能，包括動畫界面原型。當然了，除了頁面原型，時下熱門的Mobile Apps原型一樣可以用它創(chuàng)建。

Indigo Studio軟件功能

　　1、100多個真實場景

　　Indigo Studio電腦版可以幫助你從一開始就專注于你的用戶。通過從100多種包含人物、地點和各種設(shè)備的綜合故事版中進行選擇，你可以輕松地將設(shè)計直接轉(zhuǎn)化到現(xiàn)實生活場景中。

　　2、線框交互式用戶界面

　　大量內(nèi)置的交互式控件、文本、圖像、形狀和圖表組成了高效，簡潔的線框界面。Clutter-Free界面讓你更專注于自己的設(shè)計，因而你可以隨時找到你所需要的。

　　3、移動觸摸體驗設(shè)計

　　使用Viewport可以輕松地選擇不同目標設(shè)備的設(shè)計方案，并且通過觸摸手勢支持和內(nèi)置的屏幕轉(zhuǎn)換功能，實現(xiàn)在任何支持HTML的設(shè)備上運行以及與自己的原型交互。你甚至可以使用IOS平臺包為ipad和iPhone用戶設(shè)計專屬本地體驗。

　　4、隨時隨地快速添加，流暢交互

　　Indigo Studio的優(yōu)勢在于它的交互功能。無論是設(shè)計網(wǎng)絡(luò)、桌面還是移動應(yīng)用，你都能給屏幕快速添加自定義的交互功能，在少復(fù)制和粘貼的情況下實現(xiàn)仿真應(yīng)用程序體驗。

　　5、逼真的視圖轉(zhuǎn)換

　　交互作用可以很容易地轉(zhuǎn)化為平滑的、逼真的視圖轉(zhuǎn)換—可以在簡化的時間表上對它們進行查看和調(diào)整，根據(jù)自己的需要把它們變得簡單或者復(fù)雜。

　　6、隨時隨地分享

　　無論你是想進行團隊快速審查，與用戶一起評估原型，還是與項目小組分享，Indigo Studio都讓這一切變得輕而易舉。只需要點擊幾下，你就可以分享一個連續(xù)的、交互式的，可運行在任何支持HTML5設(shè)備上的原型。你也可以將選中的屏幕導(dǎo)出為用于文檔的PDF或png文件，然后退出。

Indigo Studio軟件特點

　　與大多數(shù)的原型設(shè)計工具不同，Indigo Studio將交互設(shè)計視為其核心。其他工具只側(cè)重于提供靜態(tài)的UI實體模型設(shè)計和基本鏈接能力，如Axure等流行的原型設(shè)計軟件，讓原型設(shè)計師或UI開發(fā)者花費大量時間以不同的增加鏈接的方式實現(xiàn)交互設(shè)計。Indigo Studio卻可以對每一個元素每一個按鈕進行交互設(shè)計，并能夠為交互動作設(shè)計豐富的過渡動畫效果。他還支持設(shè)計注釋和分享，大大的團隊設(shè)計的工作效率。

　　Indigo Studio包括超過21個內(nèi)置的交互式控件，300個可搜索的圖標，常用的基于曲線的形狀和基于矢量的模板。特別值得一提的是，Indigo Studio提供了300多個根據(jù)實際而設(shè)計的模板，讓UI原型設(shè)計可以馬上對號入座，而且提供的模板廣大設(shè)計師一定會愛不釋手，Infragistics作為一流的用戶界面控件開發(fā)商，其設(shè)計模板絕對保證先進、現(xiàn)代、美觀!其操作界面也是現(xiàn)在最流行的METRO風格，絕對能幫助使用者激發(fā)出不少設(shè)計靈感。

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)的關(guān)于State轉(zhuǎn)換的流程：

　　問題：state 1.1.1 / 1.2中的按鈕為何會重定向到下一個頁面，而其他state的按鈕卻不會?

　　答：因為在這兩個State下面，有一個同樣尺寸的登陸按鈕被放置在原始登陸按鈕相同的位置，這個新按鈕是指向下一個頁面的。也就是說原來的登陸按鈕隱藏在新按鈕的下方。

　　同樣，當文本字段被清空時，新按鈕就會被移除，而在下面的原始按鈕又會到上面。

　　注意：原始按鈕不指向任何頁面，它是在被點擊后顯示紅色提示文字的。

　　總結(jié)

　　接下來是很重要的一步，就是通過消除冗余來優(yōu)化State。如果一個state與另一個state是類似的，那最好是進行引用而不是進行復(fù)制。

　　由于state是按照順序進行的，所以應(yīng)該引用轉(zhuǎn)換開始時的那個state。

　　比如有兩個state由綠色的方框進行強調(diào)，但只有底部的綠色方框可以指向頂部的綠色方框。底部的綠色state不是最開始的item，頂部那個才是，所以應(yīng)該引用頂部的state。而灰色方框的state則剛好相反，頂部那個應(yīng)該引用底部那個state。

　　棕色方框的State細化：

　　綠色方框的State細化：

　　下面就是由初始狀態(tài)圖再用Indigo Studio做出來的屏幕草圖：

Indigo Studio使用說明

　　面向設(shè)計人員和開發(fā)人員的一種設(shè)計系統(tǒng)

　　使用帶有Sketch UI套件的Indigo Design System中的組件和UX模式，創(chuàng)建一流的UI設(shè)計。使用預(yù)先構(gòu)建的模式快速啟動您的過程，或創(chuàng)建自己的自定義UI庫。然后輕松共享為可視規(guī)格以生成Angular代碼。

　　與真實的用戶一起測試您的設(shè)計

　　盡早并經(jīng)常在編碼之前獲取反饋，從而避免代價高昂的迭代?？焖贋槟脑驮O(shè)置用戶測試，并查看用戶如何逐屏或視頻參與。還接收任務(wù)分析報告。測試人員可以在任何設(shè)備上參與。

　　獲取即用型Angular組件

　　您從設(shè)計系統(tǒng)在Sketch中制作的所有內(nèi)容都與我們的Angular組件相匹配。只需單擊一個按鈕，即可毫不妥協(xié)地從設(shè)計中生成高質(zhì)量的HTML，CSS和Angular代碼。

Indigo Studio更新日志

　　1. 優(yōu)化的腳步從未停止!

　　2. 更多小驚喜等你來發(fā)現(xiàn)~