グ/リ/ッ/ド

2017/11/20

前回ちょっと触れましたが今回もデザイン過程のやつです。 地味ですが骨格みたいなものなので。
ちょっと長いです。基本ストアアプリはグリッドでレイアウトを組んでいくので否応なしにグリッドを
切ります。

 

ポイントとしては

  • 切ったパスの数値は割り切れる値で
  • 他解像度を考える使い分け
  • 比率のバランスを考える

 

切ったパスの数値は割り切れる値で

 f:id:SHUNGIKU:20160125151713j:plain
ex) 例えば左がメインで右がサイドメニューとした時

上の画面はグリッドを二つに分けた画像ですが、見るからに数値が・・・
WEBデザインあるあるにもありますが、アプリでも偶数で割り切れる数値にするのが ポイントです。
画面の解像度が偶数ということもあります。

 

他解像度を考える使い分け

f:id:SHUNGIKU:20160125152828j:plain

f:id:SHUNGIKU:20160125152842j:plain

パスをどれにするかはこの3つから設定。
今どき一つのサイズ(例えば1280x800だけとか)で作ることは無いと思います。 これは前回のエントリーにも書きました。ポイントは譲れる部分と譲れない部分 を考えながらデザインを作ると構成しやすいです。

そして、ここで紹介する組み合わせは例えばの話です。
それぞれ作成するデザインコンセプトに委ねる部分があるのでこのかたちでということではありませんので。ご注意を。

 

ex)2カラムパターンの時(左にメニュー画面、右がメインの時)

f:id:SHUNGIKU:20160125154337j:plain
例えば左サイドは固定にしておいて右のメインで収縮させるパターンなら固定の分右は遊ばせるので
この時比例値(スターマーク)の1*にする。
たぶん片方を固定で決めたら反対側は自動で1*になるはず。 (1*は残り全部という意味です。)

 

ex)3カラムパターンの時

f:id:SHUNGIKU:20160125154750j:plain
どういう組み合わせでもいいのですが、他解像度の対応からして3つともAutoないし決め打ちはない
思います。おそらく2つは固定or Autoで残り1つを遊ばせるとかたちが望ましいと思います。

 

 

f:id:SHUNGIKU:20160125155732j:plain

 

 

比率のバランスを考える

最初に説明した数値の話にかすりますがパスで切った時に同時に比率も考えるともれなく良いという
ことです。

全体的にマージンとかGridを切る比率がざついのが残念かなぁ(中略)

FB(2015/05/12 15:45)

一番おっきいGridの縦が309,309150とか変な比率になっているのは2,2,1にするとか(中略)

FB(2015/05/12 15:51)

 

分かりやすいイメージとしてはこんな感じです。配分を考えてレイアウトを組むのでエディトリアルっぽい
考え方かもしれません。

f:id:SHUNGIKU:20160125161641j:plain

グリッドで区切ってその中で微調整する。ただデザイン要素多めなのでこだわりすぎに注意です。

 

長い!

f:id:SHUNGIKU:20151225105440j:plain