在[中山大學-資管系-行動應用服務體驗設計]的分享內容

1. App 快速雛形發展介紹 (Part 1)
利用Fluid UI進行快速畫面架構
陳信宏
eosinchen@gmail.com

2. Agenda
Fluid UI 的特點
Fluid UI 初體驗
Fluid UI 於 Web 及手機上的演練
Fluid UI 的分享方式

3. Fluid UI 的特點
 在設計階段，即可直接建構畫面草稿圖
 採用Web操作方式，只要靈感一來，只要有電腦即可
繼續設計(未來用平板也是可以的)
 用於設計的電腦，不用預裝任何軟體
 可分別建立Android、iOS、Windows Phone的畫面
 可和同事共同分享內容(基本的協同工作)
 可於手機上安裝 Fluid Player，即可預覽畫面

4. Fluid UI 初體驗
 http://www.fluidui.com/

5. Fluid UI 初體驗
 按下主畫面中的”TRY IT”開始使用
按下 Sign In 來註
冊或登入
未登入時，也是
可以試玩

6. Fluid UI 初體驗
 註冊與登入後
選擇已經建立的
專案，或是新增
一個專案

7. Fluid UI 初體驗
 開始設計
畫面工作區，把
左方的元件移到
這兒
在此選不同 OS，
來選擇不同的元
件樣式

8. Fluid UI 初體驗
 利用 Android 模板來做初步的練習
先練習一個畫面
高雄公車一指通
的主畫面

9. Fluid UI 初體驗
 建立第二個畫面
利用按鈕元件 +
Link 功能，建立
第二個畫面

10. Fluid UI 初體驗
 第二個畫面建立完成
其他畫面也是依
此方法建立

11. Fluid UI 於 Web 及手機演練
 利用 Play 開始演練
按下此，開始
Play

12. Fluid UI 於 Web 及手機演練
 利用 Play 開始演練
手機掃描此 QR Code
就可以在手機上演練
PS:要先裝 Fluid Player (下頁)

13. Fluid UI 於 Web 及手機演練
 Fluid Play 安裝方式
登入後，點選這一項
“Grab the app”

14. Fluid UI 於 Web 及手機演練
 Fluid Play 安裝方式
拿起手機，拍這個 QR Code
然後選擇安裝

15. Fluid UI 的設定與分享
 Fluid UI 的分享
回到專案管理畫面
選擇右下角的設定

16. Fluid UI 的設定與分享
 Fluid UI 的分享
按下分享按鈕

17. Fluid UI 的設定與分享
 Fluid UI 的分享
很多分享的方式
用 mail 或 社群都可以

18. 討論與練習