# 1.3 用戶界面(UI)設計
## 概要:
本課時介紹 Bootstrap,以及 Bootswatch UI,通過 Gem,將 UI 文件安裝到 Rails 項目中。介紹項目 UI 設計思路及工具。
## 知識點:
1. Bootstrap 介紹
1. Bootswatch 工具及 Gem
1. mybalsamiq 工具
## 正文
### 1.3.1 Bootstrap
大家好,在編寫我們項目代碼之前,我先講一個大約十年前的事情。2005年創業初期,為客戶制作網站,有一次,一個客戶找到我們,說要開發一個賣花的網站,因為新品即將上市,所以有一些急。于是,我們給出了厚厚的幾頁所謂的“設計方案”。但是客戶幾分鐘就否定了,說:“我們的項目很簡單,只需要購買者看到新品就可以,可以預定,我們貨到付款”。于是,我們把多余的設計去掉后,之前那份設計方案只剩下三分之一了。但是客戶又很快否定了我們的方案,說:“我能先看看樣子么?”
于是,我們讓設計師設計好了幾個樣子,交給客戶,客戶又把我們否定了,而且顯得不耐煩。他抓取一張紙和一支鉛筆,在紙上畫出了他要的樣子。什么樣子呢?

在稍后商討細節后,我們很快完成了代碼功能。
這件事情給我的啟發是:
> 代碼之前,先看到樣子
在客戶畫出樣稿前,我們并不知道新品只有幾種,而且這個網站只放置新品。它所突出的是在線預定和貨到付款,即宣傳了新品,又使用了另一種貼近新品的設計風格。
回到我們的例子,我們還沒開始 Rails 項目之前,要先為它設計一個樣子出來。有些難度么?我們先講一個接下來要幫助我們的前端設計框架:Bootstrap。
> Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。[1] 它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規范,它即是由動態CSS語言Less寫成。Bootstrap一經推出后頗受歡迎,一直是GitHub上的熱門開源項目,包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都使用了該項目。百度百科
先給大家 Bootstrap 的 [官網](http://getbootstrap.com/),這里可以找到它的 [源代碼](https://github.com/twbs/bootstrap),這里有中文的學習資料 [Bootstrap 中文網](http://www.bootcss.com/)。
在讀 [Bootstrap 起步](http://v3.bootcss.com/getting-started) 之前,我先介紹下它的特點:
- 一致的設計風格,豐富的Web組件,下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、面包屑、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等
- 支持多個主流瀏覽器
- HTML5和CSS3開發
- 在jQuery的基礎上設計,兼容大部分jQuery插件
- 平臺自適應,即便在手機,pad 打開網站也沒問題
> 什么?ie6?請閱讀10年前的教程吧,如果還能找到的話。
在 [這里](http://v3.bootcss.com/getting-started/#examples),你可以很快看到 Bootstrap 的模樣了。接下來的章節里,我們將按照這個樣子,設計我們的 shop。
~~~
rails new shop
~~~
好的,我們給它添加個幾個 gem。
~~~
gem "therubyracer"
gem "less-rails"
gem "twitter-bootstrap-rails"
~~~
然后,運行
`bundle install`
之后,我們給出一個新的命令,scaffold:
`rails g scaffold product name price:decimal description:text`
scaffold 命令我們將在下一章詳細介紹,這里,我們創建了一個資源,Product。
然后,我們繼續運行以下幾個命令
~~~
# 更新 db 解構
rake db:migrate
# 安裝 bootstrap 文件
rails generate bootstrap:install
# 創建一個 layout
rails g bootstrap:layout
# 創建資源模板
rails g bootstrap:themed Products
~~~
是不是還有不熟悉的命令,我們后面的章節詳細介紹他們,現在,你可以運行
`rails s`
來啟動 Rails 項目了,訪問 `http://localhost:3000/products`,你會看到這個頁面,它就是 Bootstrap 風格的頁面了。

把它縮小看看

是的,即便你用手機來訪問它,也不會讓頁面亂掉。
我們用的是這個 gem,你可以詳細的看看它的文檔。
[https://github.com/seyhunak/twitter-bootstrap-rails](https://github.com/seyhunak/twitter-bootstrap-rails)
### 1.3.2 Bootswatch
> 是不是太千篇一律了呀?
的確,大多數項目開始的時候都是一個樣子,是件讓人氣餒的事情。我們來給它增加點不同。
這里再介紹一個可以幫助我們的項目,[Bootswatch](http://bootswatch.com/)
我們在剛才的 Gemfile 中,再添加兩個 gem:
~~~
gem 'twitter-bootswatch-rails'
gem 'twitter-bootswatch-rails-helpers'
~~~
在我們的項目中,運行下面的兩個新命令:
~~~
rails g bootswatch:install cerulean # 安裝該 theme 的基礎文件
rails g bootswatch:import cerulean # 導入一個線上的 theme 的變量文件
~~~
注:我們使用的 Gem 中,會存在 bug,或者,版本更新導致的 Gem 不匹配, 也會引起 Bug。 這時候,我們可以幫助作者改進它。當然,你要先十分確定,它是一個 Bug!
我們修改一下 `application.css` 中的引用:
~~~
*= require cerulean/loader
*= require cerulean/bootswatch
~~~
我們可以看到

當然,事情并未像上面寫的如此容易。我在為大家寫這段代碼的時候,就遇到了很多問題,還好,都一一解決了。你可以到 [這里](https://github.com/liwei78/rails-practice-code/tree/master/chapter_1) 看到我調試好的代碼。
在 [這里](https://github.com/liwei78/rails-practice-code/tree/master/chapter_1/shop-with-bootswatch),我為大家選擇了三套不同的 bootswatch theme,大家可以練習。
Bootswatch-rails 的代碼在這里:
[https://github.com/scottvrosenthal/twitter-bootswatch-rails](https://github.com/scottvrosenthal/twitter-bootswatch-rails)
> Rails 和 Ruby 一樣,是為有經驗的開發者準備的。
作為初學者,Rails 的確會為大家提出很多問題,有些問題會占用大量的時間,讓人失去耐心。雖然開發了很多年的 Rails 項目代碼,我也會經常遇到各種問題。所以,請大家耐心,讓我們一起弄清思路,慢慢解決。
#### 1.3.3 UI 設計
本節,讓我們輕松一下。
你有注意到 1.3.1 里的那張圖么?對了,它是用 [www.mybalsamiq.com](https://www.mybalsamiq.com/) 畫的。
讓我們繼續為即將開始的 shop 項目,畫幾張圖吧。
首先,我們想想,我們需要哪些頁面。
1. 首頁,列出我們推薦的商品(Product)
1. 列表頁,根據選擇的分類,列出該分類下的商品
1. 展示頁,查看每一個商品
好的,我們畫出心里構思好的頁面。
我們的首頁

我們的列表頁

我們的展示頁

我想講幾個我們設計上的細節。
- 首頁,我們展示的是屬性為置頂(top = true)的商品。
- 列表頁,我們有商品分頁。
- 展示頁,當前分類和導航中的分類是選中狀態。
當然,我們的原型設計不止這三張圖,在后面的代碼階段,我們將會根據需要,再設計其他的頁面。
下一節,我們將使用 `scaffold` 這個命令,來創建我們的第一個資源。我們下一節再見。
- 寫在前面
- 第一章 Ruby on Rails 概述
- Ruby on Rails 開發環境介紹
- Rails 文件簡介
- 用戶界面(UI)設計
- 第二章 Rails 中的資源
- 應用 scaffold 命令創建資源
- REST 架構
- 深入路由(routes)
- 第三章 Rails 中的視圖
- 布局和輔助方法
- 表單
- 視圖中的 AJAX 交互
- 模板引擎的使用
- 第四章 Rails 中的模型
- 模型的基礎操作
- 深入模型查詢
- 模型中的關聯關系
- 模型中的校驗
- 模型中的回調
- 第五章 Rails 中的控制器
- 控制器中的方法
- 控制器中的邏輯
- 第六章 Rails 的配置及部署
- Assets 管理
- 緩存及緩存服務
- 異步任務及郵件發送
- I18n
- 生產環境部署
- 常用 Gem
- 寫在后面