スマフォアプリ作成42:フラットデザイン化 | Hello, Stupid World!

Hello, Stupid World!

いろいろとメモ代わりに書いていきます。

前回、列数を動的に変更できるようにしたことに伴ってデザインも変えてみました。
今まではグラデーションや影を使ったり、それぞれの項目を丸くしてみたりしてましたが
画面内の項目が増えるにつれ、見づらくなりました。

そこで、iOS7やGoogleなどにも使われて注目されているフラットデザインを取り入れました。
フラットデザインはシンプルなデザインであり、グラデーションや影、丸いデザインなどを
使わないようにしたデザインです。

人にもハードにも優しいデザインです。その分、面白みにかけますが。

こんな感じです。


デザイン変更_1

デザイン変更_3

デザイン変更_2

大分、雰囲気が変わっていますよね。
このデザインだと項目増えた場合に見やすいです。

デザイン変更_4


では、修正内容の説明ですが、細かい色の変更等は省略します。

[scheduler.css]

.blk { ・・・①
 border: 1px solid #D3D3D3;
 background-color: #FFFFFF;
 padding: 1px;
  ~ 
 vertical-align: top;
 word-wrap: break-word;
}

[解説]
フラットデザインに伴ってborder-radiusや、gradient、box-shadowの使用をやめました。
また、paddingの値を小さくし1マス内に文字をできるだけかけるようにしています。
vertical-alignにより全てのマスを上揃えにし、word-wrapによりマスから文字が出ない
ようにしています。

content.cssも同様の修正をしています。


jsも画面関係のメソッドを数箇所修正しています。

[scheduler.js]

//日付を画面表示形式にフォーマット
view.dateToDisplay = function(day){ ・・・①
 var dayStr = "";
 if( model.app.getColumn() <= "4" || day.getDate() === 1){
  dayStr += (day.getMonth() + 1);
  dayStr += "/";
 }
 dayStr += day.getDate();
 dayStr += " " + view.dayList[day.getDay()];
 return dayStr;
};

//日付項目を作成
view.createDay = function(dayNum){ ・・・②
 if (model.app.getColumn() === "1") {
  element.innerHTML = view.dateToDisplay(day) + "  " + view.addTask(day) + view.addCount(day);
 } else {
  element.innerHTML = view.dateToDisplay(day) + "<br/>" + view.addTask(day) + view.addCount(day);
 }
 dayPos.appendChild(element);
};

//祝日をセット
view.setHoliday = function(){ ・・・③

  ~
  //一日は色を変える
  var class_str = "holiday blk";
  if (key.slice(-2) === "01") {
   class_str += " monthFirst"
  }
  ById(key).setAttribute("class", class_str);
  }
 }
};


//指定日付項目にクラスを追加
view.addClass = function(element, day){ ・・・④
 var class_str;
 if (model.day.getHolidayName(day) != "") {
  class_str += " holiday";
 } else {
  class_str += " day";
 }
 class_str += " blk";
 //一日は色を変える
 if (day.getDate() === 1) {
  class_str += " monthFirst";
 }
 element.setAttribute("class", class_str);
};

[解説]
①列数が4つ以下の場合か1日の場合のみ月を表示させます。
列数が1以外の場合は日付とタスクタイトルを別行にして表示させます。
③祝日の1日の場合に背景色を水色に変更させる為にクラスを追加しています。
祝日以外に1日の場合に背景色を水色に変更させる為にクラスを追加しています。


列数などにより画面の表示形式を微妙に変更し、少しでもマス内の情報に
無駄がないようにしています。


サンプル
http://trapz.web.fc2.com/blog/20130618/scheduler.html