用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面

設計 APP UI 的方式很多，可以手繪也可以直接在軟體上設計，但如果想要把設計結果直接呈現給他人看的時候，手繪的無法讓人直接體驗操作流程，「Fluid UI」這款 UI 設計工具可以讓你輕鬆設計 iOS / Win8 / Android 的 App 介面，只要在網頁上把要呈現畫面的元件拉到到虛擬螢幕上擺放即可，此外還可以替元件加入點擊動作，讓設計好的 UI 除了看之外還能體驗操作流程，可以看看這個範例。

使用介紹

首先先到 Chrome 應用程式商店下載 Fluid UI ， 安裝之後執行它。為了可以儲存設計好的 UI，建議先簡單建立一個新帳號。

建立帳號之後，在主畫面上任意位置點兩下滑鼠左鍵就會出現一張空白的設計紙，每張設計紙代表 App 的一個畫面。

在設計紙上點一下滑鼠左鍵就可以編輯頁面內容。網頁左邊的元件庫裡面有各種元件，在需要的元件上按住滑鼠左鍵拖曳到畫面上擺放。

※ 若要切換不同作業系統的 UI 可在畫面左上角的下拉選單選取。

如果元件本身附帶有文字的話，在文字上點一下就可以進行文字編輯。另外，有些元件可以自行增減欄數，下圖的「+」、「-」按鈕就是控制項。

所有頁面都設計好了之後，接著就要將每個按鈕指定對應的動作，也就是切換頁面的部份。點擊要連結的項目後，再點選連結圖示。

把箭頭拉向目標頁面，並在目標頁面上點一下滑鼠左鍵完成設定。

以此方式設定其他按鈕連結，設定完成後按 Play 鈕進行預覽操作。

此時預覽畫面右邊的 App 畫面已經是可操作的狀態，可以用滑鼠點擊剛才設定好的按鈕連結，看看是不是符合你的想法和設計，或者有什麼地方需要補足的。如果要分享給其他人可以直接複製 Link 欄位上的網址，如同我們的範例一樣。