アプリのUIデザインはズルいデザインテクニックを活用しよう！

@ITのHTML5 + UX : HTML5とUXの総合情報フォーラムというカテゴリで、少ない手間と知識でそれなりに見せる、ズルいデザインテクニックという記事があります。

クラフトビールの情報（特にクラフトビールが買えるお店のやつ）をiPhoneで気軽にチェックしたいという自分の欲求を満たすためにアプリ作っているのですが、UIデザインをそれっぽく仕上げたいので上記記事を参考にして、このような↓感じのUIを作ってみました。

グラデーション設定での工夫点

SassやCompassを使って、ズルいデザインテクニック (1/2)という記事の中でズルいグラデーションという内容が取り上げられています。

一部引用すると

ベタ塗り一歩手前くらいの、微妙な明度差のグラデーションで本物っぽい質感を出そう

一見、1色でベタ塗りにしたように見えるけど、よく見ると微妙に上下で色の明るさが異なるグラデーションを、「ズルいグラデーション」と呼んでいます。

という事が書かれています。

上記記事の途中にも書かれてるのですが、グラデーションって、これまでの自分の中でのイメージとして、大胆に色を変化させるものしか考えたことが無かったので、微妙に色が変わるようなグラデーションっていうのは新鮮な考え方でした

Ti.UI.TableViewでの実装ポイント

ズルいグラデーションを参考にTi.UI.TableViewでの実装ポイントについて以下にあげておきます

• Ti.UI.TableViewの背景色は単色の塗りを設定するが、その際に真っ白（#ffffff)ではなく、少しグレーがかった色(#ededed)を指定
• TableViewRowの背景色はbackgroundGradientプロパティを活用してグラデーションをかけるが、グラデーションの終わりの色を暗くするが、Ti.UI.TableViewの背景色からあまり離れないような色目を設定
• TableViewRowに直接ImageView やLabelを配置せず、下記スクリーンショットのようにContainerとなるTi.UI.Viewを生成。そこにImageView やLabelを配置
• ContainerとなるTi.UI.Viewの背景色はbackgroundGradientプロパティを使い、枠線の幅と色を設定。枠線はTi.UI.TableViewの背景色よりも少し濃い目の色を設定するとそれっぽくなる

backgroundGradientプロパティの詳細の説明は、Titanium Mobie TableView Tips微妙な明度差のグラデーションを活用にまとめていますので、よろしければそちらご覧ください！（単にTitanium Mobie TableView Tipsの宣伝したかっただけなんだけどね(^^)

ソースコードサンプル

そのアプリのソースコードの一部を以下にまとめておきました

app.coffee

maintable = require("maintable")
tableView = new maintable()
mainTable = tableView.getTable()

mainWindow = Ti.UI.createWindow
  title: "クラフトビール東京"
  barColor:"#DD9F00"
  
entries = [
  title: "押上のハート＆ハートで『ビアゼミ』を開催。2013/04/07(日)"
  link: "http://craftbeer-tokyo.info/announcement/heart-beer-seminer-2013-04-07/"
  author: "kawano"
  publishedDate: "Mon, 01 Apr 2013 03:39:24 -0700"
  content: "押上のハート＆ハートで、ビールセミナーが開催されます。 解説は、クラフトリカーズの吉田茂氏と、両国 ポパイの城戸氏ですから、深い話が聞けることが確実。 吉田氏は、以前、ヤッホーブルーイングさんに勤めていらっしゃいました。…"
,
  title: "ジャパン ブルワーズカップ＆フェスティバル 2013の前売り券（入場料＋ビール３杯）を10名様にプレゼント！"
  link: "http://craftbeer-tokyo.info/event/jbcf-2013-ticket-present/"
  author: "kawano"
  publishedDate: "Wed, 27 Mar 2013 20:02:07 -0700"
  content: "ジャパン ブルワーズカップ＆フェスティバル 2013は、日本・ドイツ・ベルギー・アメリカのビールメーカーが20社以上、横浜に集結し、70種類以上のクラフトビールが１杯500円から楽しめるイベントです。ビール職人によるビア…"
]

result = []
result.push(tableView.createRow(entry)) for entry in entries
mainTable.setData result

mainWindow.open()

mainTable.coffee

class mainTable
  constructor: () ->
    @table = Ti.UI.createTableView
      backgroundColor:'#ededed'
      separatorColor: '#ccc'
      zIndex:2
      width:320
      left:0
      top:0
    
    
    @table.addEventListener('click',(e) =>

    )
    
  getTable: ()->
    return @table
    
  createRow: (entry) ->
    row = Ti.UI.createTableViewRow
      backgroundGradient:
        type: 'linear'
        startPoint:
          x:'0%'
          y:'0%'
        endPoint:
          x:'0%'
          y:'100%'
        colors: [
          color: '#eeeeee'
          position: 0.0
        ,      
          color: '#dddddd'
          position: 0.7
        ,      
          color: '#dcdcdc'
          position: 1.0
        ]
      width:320
      height:150



    imagePath = @_retrevieImagePath(entry.content)
    
    pictImage = Ti.UI.createImageView
      image:imagePath
      width:80
      height:80
      left:5
      top:5

    pictImageContainer = Ti.UI.createImageView
      width:90
      height:90
      left:5
      top:5
      borderColor: "#ccc"
      borderWidth: 1
      backgroundGradient:
        type: 'linear'
        startPoint:
          x:'0%'
          y:'0%'
        endPoint:
          x:'0%'
          y:'100%'
        colors: [
          color: '#fff'
          position: 0.0
        ,      
          color: '#fefefe'
          position: 0.7
        ,      
          color: '#eee'
          position: 1.0
        ]

    
    pictImage.addEventListener('load',(e) ->
      blob = e.source.toBlob()
      blob.imageAsCropped
        width:100
        height:100
        x:10
        y:50
    )
    pictImageContainer.add pictImage
    


    textLabel = Ti.UI.createLabel
      width:180
      height:20
      top:5
      left:110
      color:'#DD9F00'
      
      font:
        fontSize:16
        fontWeight:'bold'
      text:entry.title

      
    bodySummary = Ti.UI.createLabel
      width:180
      height:50
      left:110
      top:35
      color:"#444"
      
      borderRadius:3
      font:
        fontSize:12
      text:entry.content.replace(/<\/?[^>]+>/gi, "")

    container = Ti.UI.createImageView
      width:300
      height:100
      left:10
      top:5
      borderWidth:1
      borderColor:"#ccc"
      backgroundGradient:
        type: 'linear'
        startPoint:
          x:'0%'
          y:'0%'
        endPoint:
          x:'0%'
          y:'100%'
        colors: [
          color: '#fff'
          position: 0.0
        ,      
          color: '#fefefe'
          position: 0.7
        ,      
          color: '#eee'
          position: 1.0
        ]
      
      # styleId: "container"

    messageBoxContainer = Ti.UI.createImageView
      width:300
      height:40
      left:10
      top:105
      borderColor:"#ccc"
      backgroundGradient:
        type: 'linear'
        startPoint:
          x:'0%'
          y:'0%'
        endPoint:
          x:'0%'
          y:'100%'
        colors: [
          color: '#fff'
          position: 0.0
        ,      
          color: '#fefefe'
          position: 0.3
        ,      
          color: '#eee'
          position: 1.0
        ]
      

      
      
    container.add pictImageContainer
    container.add textLabel
    container.add bodySummary

    row.add container
    row.add messageBoxContainer
    
    row.data = entry
    row.className = 'entry'

    return row
    
      
module.exports = mainTable