設計 APP UI 的方式很多,可以手繪也可以直接在軟體上設計,但如果想要把設計結果直接呈現給他人看的時候,手繪的無法讓人直接體驗操作流程,「Fluid UI」這款 UI 設計工具可以讓你輕鬆設計 iOS / Win8 / Android 的 App 介面,只要在網頁上把要呈現畫面的元件拉到到虛擬螢幕上擺放即可,此外還可以替元件加入點擊動作,讓設計好的 UI 除了看之外還能體驗操作流程,可以看看這個範例。
使用介紹
首先先到 Chrome 應用程式商店下載 Fluid UI , 安裝之後執行它。為了可以儲存設計好的 UI,建議先簡單建立一個新帳號。
建立帳號之後,在主畫面上任意位置點兩下滑鼠左鍵就會出現一張空白的設計紙,每張設計紙代表 App 的一個畫面。
在設計紙上點一下滑鼠左鍵就可以編輯頁面內容。網頁左邊的元件庫裡面有各種元件,在需要的元件上按住滑鼠左鍵拖曳到畫面上擺放。
※ 若要切換不同作業系統的 UI 可在畫面左上角的下拉選單選取。
如果元件本身附帶有文字的話,在文字上點一下就可以進行文字編輯。另外,有些元件可以自行增減欄數,下圖的「+」、「-」按鈕就是控制項。
所有頁面都設計好了之後,接著就要將每個按鈕指定對應的動作,也就是切換頁面的部份。點擊要連結的項目後,再點選連結圖示。
把箭頭拉向目標頁面,並在目標頁面上點一下滑鼠左鍵完成設定。
以此方式設定其他按鈕連結,設定完成後按 Play 鈕進行預覽操作。
此時預覽畫面右邊的 App 畫面已經是可操作的狀態,可以用滑鼠點擊剛才設定好的按鈕連結,看看是不是符合你的想法和設計,或者有什麼地方需要補足的。如果要分享給其他人可以直接複製 Link 欄位上的網址,如同我們的範例一樣。