tomo.mobi

Representation design of material


iOSの画面デザインを作る時にやっている事

iphoneはストーリーボードでレイアウトを作成するとき、比率かえずにレイアウト配置してしまうと
解像度が変わった時に意図したレイアウトにならなくなりますよね。
なので、レイアウトをする時はどの解像度でみてもあまり変わらないように割合でレイアウトを考えていると思います。

なので、私はカンプを作成する時に、320px基準に考え8ptのグリッド線をひいて作成しています。
iphoneの画面をデザインするとき、横(短い方)を1として、デザインする横幅の基準を決めれば、
横幅基準で割合にてレイアウトすると解像度が変わっても縦の見える範囲が変わるのみでレイアウトが崩れる事はありません。

@3で作成するのだったら、画面に24*24のグリッドをひいてレイアウトしています。

なぜ、1マス24pxかというと、Xcodeでレイアウトする時に@1にした時に1マス8ptとして考えられ、
320pxを基準で考えている場合、8/320=0.25と、割り易い数字なので割合で比率を計算し易くなります。

しかし、8はあくまでも基準です。
細かいレイアウトは8の倍数と言うわけにはいかないからです。
グリッドを意識してレイアウトするとストーリーボードに落とし込む時に落とし込み易いと言う程度です。

ちなみに、設定の中にある、photoshopの良くご存知のこの機能です・・・
グリッド線

最初はみづらいなーと思う。(私も思った)
グリッド線の色で画面が染まる・・・・。
スクリーンショット 2015-07-05 6.11.46

グリッド線は[command]+[@]でon/off出来るので、[command]+[h]とあわせて、
ショートカットを覚えておくと良いです。