2013年9月27日 星期五

好用的 mockup、wireframe 工具:Balsamiq Mockups

對於一個美術白癡來說,要設計一個網站的外觀,實在有點困難。有時候要把心中構想先畫出來給人看,都覺得力不從心,所以只好直接寫一個網頁出來,調 CSS 調老半天,只為了把心中的畫面呈現給人「看看再說」。上面所說的作法,做出來的東西比較類似於 prototype,也就是已經包含了部分 CSS/JavaScript 的完整網頁,也許缺的只是真正會 work 的功能還有各種比較細節的調整而已。但萬一這樣做出來的東西不合人家(也許是主管、客戶,甚至是自己)的胃口,那花的這些時間就算沒有全部白費,也浪費掉不少了。

或許有人會說,「我寫 prototype 超快我超強!」但你再強你有人家設計師用 photoshop 隨便畫畫強嗎?雖然人家畫出來的就是一張圖,不會動也不能點,但是省時省力,又能把想表現的重點突顯出來,用來作為前期的討論跟比較相當適合!可能講成這樣還是有人鐵齒...那試想一個狀況:客戶看了你的 prototype 之後,跟你講了一堆元件說要換位置,下面這個按鈕移到上面去(立刻修改HTML),這個選單要大一點(趕快調整 font-size, width, height,啊破版了再改一下另外那個...),這些東西的間距要小一點,整個寬度要一樣(調 margin 調老半天).....總而言之,對於外觀的要求,在圖片上討論常常比在程式碼中討論來得容易,所以也才有所謂的 wireframe 與 mockup 的出現。

這邊不深究 wireframe 與 mockup 兩者的差別,下面通通用 mockup 來表示。Mockup 是一種用來呈現成品大致外觀的工具,他不能拿來使用,但是可以讓人容易想像成品的呈現方式 (人類果然是視覺的動物...)。以前看過一些人是用 photoshop 之類的影像處理軟體在畫 mockup,之後才去作切版套版...但對於一個美術白癡而言實在太困難了,小弟實在是 photoshop 苦手orz。好在有人推薦了這套工具:Balsamiq Mockups,他是一個很好用的畫 mockup 工具,內建數十種常用元件,可以用來設計網站、視窗程式或是手機介面。下面就直接來介紹一下。

下載跟安裝都很簡單,不多說了,Google 一下或是點上面的連結就可以下載....我是在 Mac 上安裝的,但他也有 Windows 跟 Linux 版,甚至還有 Google Drive 的 plugin (!)

這是開啟後的畫面,可以看到左下角指出我只有 7 天的試用期,購買的話則是美金 $79,其實對我來說有點貴XD 但如果是工作所需的話,其實這個價倒不會有什麼問題...

只要花幾分鐘,從上面拉一些元件下來,打幾個字(不打也沒關係,他都有預設的文字),就可以快速「畫」出一個網站...我實在很喜歡這個 browser window,讓我畫出來的東西突然加了20分....XD
覺得中間的框框實在不太好看...所以就塞了點假文章進去。(我用了一個英文的假文產生器,如果想寫中文的可以參考看看和多的中文假文產生器) 嗯....看起來還算有模有樣呢~
裡面的元件實在太多了,每次都要用選的很麻煩,如果知道大概名字的話,可以透過左上角的 Quick Add 直接搜尋加入
元件中文字的設定也很簡單,常常都是簡單打個字他就會幫你做出想要的東西了,前提當然是元件要用對...每個元件預設都有範例可以依循,所以不用擔心不會打,基本的用法都已經在範例中了!
每個元件也都有相關的一些外觀設定可以用,可以隨意玩玩
例如這個圖片元件(Image),預設是一個 placeholder 的角色,但也可以讓你放入真正的圖片在你的 mockup 中
還可以剪裁圖片成你要的樣子
放在畫面中大概就長這樣.........XD
另外 Balsamiq Mockups 也提供 iPhone 的框框,最有趣的是還有 iPhone 4 跟 iPhone 5 可以選XDDDD,當然也有不同方向提供你作設計。
既然有手機元件可以玩,那就自以為很潮的來作個手機版網頁...把旁邊的主要元素複製一份移到手機框框裡面,調整大小之後,就完成了基本的元素!其實就像 RWD 一樣,都是一樣的元素,只是套用了不同 CSS 一樣...然後接著在右上角加個會跳出選單的小 icon,噢,Balsamiq Mockups 提供的 icon 還滿多的,還不賴!
於是乎....就完成了一個看起來好像有模有樣的「網站雛形」。如果要拿來做文件,或是提供給一般人看,其實這樣就可以假裝很威了,哈哈!這些東西做起來花不到 20 分鐘呢~其中還包含慢慢瀏覽有哪些元件可以用的時間。如果用 photoshop 來畫,以我的能力可能要花一整個早上吧....@@
再來是關於中文的問題,以前的版本會無法顯示中文,所以上面的 demo 才會全部都用英文來當範例,結果沒想到,現在的版本已經把中文的問題解決了XD 所以不需要「Use System Font」才能使用中文囉!雖然這字體實在不像英文版這麼可愛....但至少能用啦XD
最後,總不能畫完東西只給自己看吧XD Balsamiq Mockups 提供 export 的功能,可以輸出成 PNG 圖檔或是 PDF 檔,當然也可以放進系統剪貼簿或是直接列印出來。
這樣的工具也許有些人(可能是專業設計師或 photoshop 強者)認為沒什麼,但每樣工具都有他不同的目標。Balsamiq Mockups 並沒有辦法用來作各種不同的繪圖,但是他專注於繪製 mockup 這件事上,所以可以讓這件事變得很簡單,門檻很低,特別是對小弟這種美術白癡來說相當受用!不管是網站設計公司、SOHO或是要設計教材之類的用途,都相當實用。推薦~ :P

2013年4月7日 星期日

在 Windows 上安裝 Redmine 2.3.0 的筆記

Redmine 是一套很有名的專案管理系統,建構於 Ruby on Rails 之上。網路上搜尋「Redmine」都可以找到很多相關資料,這邊就不贅述功能。

由於 Ruby/Rails 在 MacOSX 跟 Linux 相對比較友善,所以要找 Redmine on Windows 的安裝教學實在不太好找,中文資料更是寥寥可數。加上 Rails 進步迅速,很多 07~09 年的資料其實很可能都已經過時,所以乾脆自己研究完寫一篇XD

不過由於現在實在沒什麼空寫網誌,所以簡單的把方法跟過程記錄一下....

這邊主要是根據 http://www.redmine.org/projects/redmine/wiki/RedmineInstall 上面的說明,而 Redmine 安裝相依於特定的 rails 與 ruby 版本,可以參考前面這個連結裡面的表格。而我這邊以 Ruby 1.9.3 + Rails 3.2.13 + Redmine 2.3.0 為目標。

以下為安裝步驟:(注意!安裝過程中的路徑最好都不要有中文,如果出現奇怪的問題,請先嘗試把目錄或檔案放到沒有中文路徑的位置。目前我已經碰到某些 gem file 放在中文路徑會沒辦法安裝)

  1. 下載 Ruby installer 與 Development Kit (這邊我都選 32-bit 版本)
    http://rubyinstaller.org/downloads
  2. 下載 Redmine (點第一段的 RubyForge 連結)
    http://www.redmine.org/projects/redmine/wiki/Download
  3. 安裝 Ruby
    雙擊 ruby installer 並一直 Next,注意中途應選擇「Add Ruby executables to your PATH」
  4. 安裝 Development Kit
    將 Development Kit 解壓縮到 C:\Ruby193\DevKit,並打開命令提示字元執行以下指令
    ruby C:\Ruby193\DevKit\dk.rb init
    ruby C:\Ruby193\DevKit\dk.rb install
    
  5. 解壓縮 Redmine 至特定目錄,在此以「$REDMINE」表示
  6. 進入 $REDMINE\config\ 目錄中,複製 database.yml.example 至 database.yml
  7. 根據自己的環境,設定 database.yml。
    在此我打算使用 SQLite3 作為 production (雖然官方不建議),所以只需要很簡單的3行
    production:
      adapter: sqlite3
      database: db/redmine.sqlite3
    
  8. 安裝相依 gems
    cd $REDMINE
    gem install bundler
    bundle install --without development test rmagick # rmagick 還需要額外安裝其他東西,乾脆就先不用了
    
  9. 設定 Redmine
    set RAILS_ENV=production
    rake generate_secret_token
    rake db:migrate
    rake redmine:load_default_data
    ruby script/rails server webrick -e production
    
  10. 到這裡,Redmine server 應該已經 run 起來了,連上 http://localhost:3000/ 看看吧!
通常應該這樣就結束了,但是發現某些文章提到用 mongrel,他似乎也是個 ruby 寫的 web server 吧....查了一下資料發現,有個更新的東西叫做 thin,根據 thin 的說法,它用了 mongrel parser....然後效能比 mongrel 好.....哎呀反正我也不太懂,反正試試看就對了XD
安裝 thin 很簡單:
gem install thin
執行則是
thin start
結果竟然跑不起來?找了一些資料才發現,原來要加上 Gemflie.local 才行....反正結論是,應該這樣安裝
  1. 先編輯 $REDMINE\Gemfile.local
    gem 'thin'
    
  2. 執行以下指令
    bundle install
    thin start
    
最後來個番外篇...如果想把相關檔案全都抓下來,拿到一台沒有網路的電腦安裝,應該怎麼做呢?可以透過 bundle 幫我們做這件事!
在 $REDMINE 下,執行 bundle package,就可以在 $REDMINE\vender\cache\ 裡面找到目前配置下所需的所有 gems,但有趣的是,bundler 自己不在裡面.....XD 要找到 bundler 的 gem 的話,可以去 C:\Ruby193\lib\ruby\gems\1.9.1\cache\ 裡面撈...找到 bundle 與 bundler 這兩個 gem,直接複製即可。(別問我,我不曉得這兩個分別是幹嘛的....)
另外,我們還得偷帶走 $REDMINE\Gemfile.lock 這個檔案,這樣 bundle 才能在沒有網路連線的情況下,了解 gems 之間的相依性。既然都拿 Gemfile.lock 了,那剛剛安裝 thin 用的 Gemfile.local 也順便帶走吧!所以,想要離線安裝,先準備好以下這些檔案
  • Ruby Installer
  • Development Kit
  • Redmine
  • 挖出來的 gems (包含 bundler, bundle, 以及 bundle package 產生的那些)
  • Gemfile.local 與 Gemfile.lock
然後根據以下步驟安裝
  1. 進行上面一般安裝步驟的第 3~7 步
  2. 安裝 gems (假設我把檔案放在 C:\Ruby193\gems.local)
    cd C:\Ruby193\gems.local
    gem install -l *
    
  3. 把 Gemfile.local 與 Gemfile.lock 丟回 $REDMINE
  4. 執行以下指令
    cd $REDMINE
    bundle install --without development test rmagick --local
    
  5. 進行一般安裝步驟第 9 步
  6. 完成!
希望上面的筆記也可以對其他人有幫助.....

好啦我知道這篇文章排版很糟糕...但我實在沒空調整了orz 再抱怨一次 Blogger 的寫文章介面實在不太好用 :(