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

-

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

使用介紹

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

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

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

用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-00

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

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

用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-01

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

用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-05

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

用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-06

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

用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-02

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

用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-03

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

用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-04

相關文章
Werboy
Werboy
3C科技部落客,硬是要學共同創辦人,台灣部落客社群(TBC)共同發起人。熱愛發掘、體驗及分享各類科技產品。 Email:werboy@soft4fun.net

留下一個評論

請輸入你的評論!
請在這裡輸入你的名字

網站搜尋
看更多新聞
我們的頻道
- 廣告 -
分享給朋友