1.3 用户界面(UI)设计

概要:

本课时介绍 Bootstrap,以及 Bootswatch UI,通过 Gem,将 UI 文件安装到 Rails 项目中。介绍项目 UI 设计思路及工具。

知识点:

  1. Bootstrap 介绍
  2. Bootswatch 工具及 Gem
  3. mybalsamiq 工具

更新说明

在新书编写之际,对当前内容作了一次升级。原代码编写于2015年,在此之后有不少版本的变动和 bug 的修复,导致当时的一些代码无法正确运行。

本节中,修复了一些大家反馈的问题,如果你在调试时遇到问题,可以使用 bundle update rails 升级到 4.2.7.1,并且 bundle update sass-rails 升级到4.0.5 版本,经过我的调试,这是没有异常的。

正文

1.3.1 Bootstrap

大家好,在编写我们项目代码之前,我先讲一个大约十年前的事情。2005年创业初期,为客户制作网站,有一次,一个客户找到我们,说要开发一个卖花的网站,因为新品即将上市,所以有一些急。于是,我们给出了厚厚的几页所谓的“设计方案”。但是客户几分钟就否定了,说:“我们的项目很简单,只需要购买者看到新品就可以,可以预定,我们货到付款”。于是,我们把多余的设计去掉后,之前那份设计方案只剩下三分之一了。但是客户又很快否定了我们的方案,说:“我能先看看样子么?”

于是,我们让设计师设计好了几个样子,交给客户,客户又把我们否定了,而且显得不耐烦。他抓取一张纸和一支铅笔,在纸上画出了他要的样子。什么样子呢?

用户界面(UI)设计 - 图1

在稍后商讨细节后,我们很快完成了代码功能。

这件事情给我的启发是:

代码之前,先看到样子

在客户画出样稿前,我们并不知道新品只有几种,而且这个网站只放置新品。它所突出的是在线预定和货到付款,即宣传了新品,又使用了另一种贴近新品的设计风格。

回到我们的例子,我们还没开始 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 的 官网,这里可以找到它的 源代码,这里有中文的学习资料 Bootstrap 中文网

在读 Bootstrap 起步 之前,我先介绍下它的特点:

  • 一致的设计风格,丰富的Web组件,下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等
  • 支持多个主流浏览器
  • HTML5和CSS3开发
  • 在jQuery的基础上设计,兼容大部分jQuery插件
  • 平台自适应,即便在手机,pad 打开网站也没问题

什么?ie6?请阅读10年前的教程吧,如果还能找到的话。

这里,你可以很快看到 Bootstrap 的模样了。接下来的章节里,我们将按照这个样子,设计我们的 shop。

  1. rails new shop

好的,我们给它添加个几个 gem。

  1. gem "therubyracer"
  2. gem "less-rails"
  3. gem "twitter-bootstrap-rails"

然后,运行

bundle install

之后,我们给出一个新的命令,scaffold:

rails g scaffold product name price:decimal description:text

scaffold 命令我们将在下一章详细介绍,这里,我们创建了一个资源,Product。

然后,我们继续运行以下几个命令

  1. # 更新 db 解构
  2. rake db:migrate
  3. # 安装 bootstrap 文件
  4. rails generate bootstrap:install
  5. # 创建一个 layout
  6. rails g bootstrap:layout
  7. # 创建资源模板
  8. rails g bootstrap:themed Products

是不是还有不熟悉的命令,我们后面的章节详细介绍他们,现在,你可以运行

rails s

来启动 Rails 项目了,访问 http://localhost:3000/products,你会看到这个页面,它就是 Bootstrap 风格的页面了。

用户界面(UI)设计 - 图2

把它缩小看看

用户界面(UI)设计 - 图3

是的,即便你用手机来访问它,也不会让页面乱掉。

我们用的是这个 gem,你可以详细的看看它的文档。

https://github.com/seyhunak/twitter-bootstrap-rails

1.3.2 Bootswatch

是不是太千篇一律了呀?

的确,大多数项目开始的时候都是一个样子,是件让人气馁的事情。我们来给它增加点不同。

这里再介绍一个可以帮助我们的项目,Bootswatch

我们在刚才的 Gemfile 中,再添加两个 gem:

  1. gem 'twitter-bootswatch-rails'
  2. gem 'twitter-bootswatch-rails-helpers'

在我们的项目中,运行下面的两个新命令:

  1. rails g bootswatch:install cerulean # 安装该 theme 的基础文件
  2. rails g bootswatch:import cerulean # 导入一个线上的 theme 的变量文件

注:我们使用的 Gem 中,会存在 bug,或者,版本更新导致的 Gem 不匹配, 也会引起 Bug。 这时候,我们可以帮助作者改进它。当然,你要先十分确定,它是一个 Bug!

我们修改一下 application.css 中的引用:

  1. *= require cerulean/loader
  2. *= require cerulean/bootswatch

我们可以看到

用户界面(UI)设计 - 图4

当然,事情并未像上面写的如此容易。我在为大家写这段代码的时候,就遇到了很多问题,还好,都一一解决了。你可以到 这里 看到我调试好的代码。

这里,我为大家选择了三套不同的 bootswatch theme,大家可以练习。

Bootswatch-rails 的代码在这里:

https://github.com/scottvrosenthal/twitter-bootswatch-rails

Rails 和 Ruby 一样,是为有经验的开发者准备的。

作为初学者,Rails 的确会为大家提出很多问题,有些问题会占用大量的时间,让人失去耐心。虽然开发了很多年的 Rails 项目代码,我也会经常遇到各种问题。所以,请大家耐心,让我们一起
弄清思路,慢慢解决。

1.3.3 UI 设计

本节,让我们轻松一下。

你有注意到 1.3.1 里的那张图么?对了,它是用 www.mybalsamiq.com 画的。

让我们继续为即将开始的 shop 项目,画几张图吧。

首先,我们想想,我们需要哪些页面。

  1. 首页,列出我们推荐的商品(Product)
  2. 列表页,根据选择的分类,列出该分类下的商品
  3. 展示页,查看每一个商品

好的,我们画出心里构思好的页面。

我们的首页

用户界面(UI)设计 - 图5

我们的列表页

用户界面(UI)设计 - 图6

我们的展示页

用户界面(UI)设计 - 图7

我想讲几个我们设计上的细节。

  • 首页,我们展示的是属性为置顶(top = true)的商品。
  • 列表页,我们有商品分页。
  • 展示页,当前分类和导航中的分类是选中状态。

当然,我们的原型设计不止这三张图,在后面的代码阶段,我们将会根据需要,再设计其他的页面。

下一节,我们将使用 scaffold 这个命令,来创建我们的第一个资源。我们下一节再见。