title: 用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 --- **摘要** 設計 APP UI 的方式很多，可以手繪也可以直接在軟體上設計，但如果想要把設計結果直接呈現給他人看的時候，手繪的無法讓人直接體驗操作流程，「Fluid UI」這款網頁工具可以讓你輕鬆設計 iOS / Win8 / Android 的 App 介面，只要在網頁上把要呈現畫面的元件拉到到虛擬螢幕上擺放即可，此外還可以替元件加入點擊動作，讓設計好的 UI 除了看之外還能體驗操作流程，可以看看這個範例。 **Category** - [Chrome](https://www.soft4fun.net/category/software/internet/chrome-browsing) - [網路相關](https://www.soft4fun.net/category/software/internet) **Tag** - [Android-UI設計](https://www.soft4fun.net/tag/android-ui%e8%a8%ad%e8%a8%88) - [App介面設計](https://www.soft4fun.net/tag/app%e4%bb%8b%e9%9d%a2%e8%a8%ad%e8%a8%88) - [Fluid-ui](https://www.soft4fun.net/tag/fluid-ui) - [iOS-UI設計](https://www.soft4fun.net/tag/ios-ui%e8%a8%ad%e8%a8%88) - [UI設計工具](https://www.soft4fun.net/tag/ui%e8%a8%ad%e8%a8%88%e5%b7%a5%e5%85%b7) - [Windows-8UI設計](https://www.soft4fun.net/tag/windows-8ui%e8%a8%ad%e8%a8%88) **圖片清單** - ![fluid](https://www.soft4fun.net/wp-content/uploads/2012/12/fluid.jpg "fluid") - ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui") - ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-00](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-00.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-00") - ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-01](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-01.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-01") - ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-05](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-05.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-05") - ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-06](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-06.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-06") - ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-02](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-02.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-02") - ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-03](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-03.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-03") - ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-04](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-04.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-04") --- 設計 APP UI 的方式很多，可以手繪也可以直接在軟體上設計，但如果想要把設計結果直接呈現給他人看的時候，手繪的無法讓人直接體驗操作流程，「Fluid UI」這款 [**UI 設計工具**](http://www.soft4fun.net/browsing/chrome-browsing/design-ios-win8-android-app-ui-with-fluid-ui.htm)可以讓你輕鬆設計 iOS / Win8 / Android 的 App 介面，只要在網頁上把要呈現畫面的元件拉到到虛擬螢幕上擺放即可，此外還可以替元件加入點擊動作，讓設計好的 UI 除了看之外還能體驗操作流程，可以看看這個[範例](https://www.fluidui.com/editor/live/preview/p_Xpv8EVRXyle0AKpQDBgrJN0wIfNTOStc.1355200234238)。 #### 使用介紹 首先先到 Chrome 應用程式商店[下載 Fluid UI](http://4fun.tw/rav) ， 安裝之後執行它。為了可以儲存設計好的 UI，建議先簡單建立一個新帳號。 ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui") 建立帳號之後，在主畫面上任意位置點兩下滑鼠左鍵就會出現一張空白的設計紙，每張設計紙代表 App 的一個畫面。 ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-00](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-00.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-00") 在設計紙上點一下滑鼠左鍵就可以編輯頁面內容。網頁左邊的元件庫裡面有各種元件，在需要的元件上按住滑鼠左鍵拖曳到畫面上擺放。 > ※ 若要切換不同作業系統的 UI 可在畫面左上角的下拉選單選取。 ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-01](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-01.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-01") 如果元件本身附帶有文字的話，在文字上點一下就可以進行文字編輯。另外，有些元件可以自行增減欄數，下圖的「+」、「-」按鈕就是控制項。 ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-05](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-05.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-05") 所有頁面都設計好了之後，接著就要將每個按鈕指定對應的動作，也就是切換頁面的部份。點擊要連結的項目後，再點選連結圖示。 ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-06](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-06.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-06") 把箭頭拉向目標頁面，並在目標頁面上點一下滑鼠左鍵完成設定。 ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-02](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-02.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-02") 以此方式設定其他按鈕連結，設定完成後按 Play 鈕進行預覽操作。 ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-03](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-03.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-03") 此時預覽畫面右邊的 App 畫面已經是可操作的狀態，可以用滑鼠點擊剛才設定好的按鈕連結，看看是不是符合你的想法和設計，或者有什麼地方需要補足的。如果要分享給其他人可以直接複製 Link 欄位上的網址，如同我們的[範例](https://www.fluidui.com/editor/live/preview/p_Xpv8EVRXyle0AKpQDBgrJN0wIfNTOStc.1355200234238)一樣。 ![用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-04](http://pic.soft4fun.net/imgs/-Fluid-UI--iPhone-App-_A812/fluid-ui-04.jpg "用 Fluid UI 輕鬆設計 iOS / Win8 / Android App 介面 fluid-ui-04")