交互原型設(shè)計工具(INDIGO STUDIO)

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

功能特色：

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

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

Indigo Studio驗證機(jī)制

State

使用State功能展示比較小的驗證或屏幕從一個狀態(tài)切換另一種狀態(tài)。使用State可以很方便的保存各種狀態(tài)，同時也增加了重用性。

Demo

簡便起見，這里選擇了一個比較簡單的流程，你只需要輸入你的名字然后按下Login按鈕就可以了。如果名字字段為空，文本框上方就會出現(xiàn)紅色的提示文字。如果你輸入了文本，標(biāo)簽又會消失。你可以用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下面，有一個同樣尺寸的登陸按鈕被放置在原始登陸按鈕相同的位置，這個新按鈕是指向下一個頁面的。也就是說原來的登陸按鈕隱藏在新按鈕的下方。

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

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

總結(jié)

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

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

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

棕色方框的State細(xì)化：

綠色方框的State細(xì)化：

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