web関連

2014/06/18

iPhoneアプリの画面設計で勘違いしていた件について

img-cover

こんにちは、デザイナーのさっちゃんです。

皆さんアプリデザインの画面設計(プログラマさんに渡すデザイン設計)ってどんな感じにやってるんでしょうか?

ちょうど本日、今までずっと勘違いして作っていた箇所が判明したので、懺悔の意味を込めてブログにしたためておこうと思います。※なお、今回のお話はiPhoneの場合ですのでご了承下さい。m(_ _)m

画面設計ってどんな?

アプリを作るにあたって私はだいたい以下の流れでやっています。

(1)アプリのデザインを起こす

img-design

(2)部品画像の書き出し

img-export

(3)プログラマさんにいい感じに配置してもらうための画面設計作成

(なんかもっといい感じのやり方あったらこっそり教えて下さい!m(_ _)m)

動的箇所と固定で指定方法を変えていた→間違い

まずはこちらをご覧下さい。

img-setting

ページ内に配置するものが固定の場合、画面の左上を起点(X:0、Y:0)として画像のサイズ(px)、XとYの座標を書いていました。

次にこちらをご覧下さい。

img-mistake

一覧やリストなどの動的に生成する画面の場合「画面の左上を起点にXY指定すると全部重なってしまうのでは?」と思い、各部品ごとにどれくらい隙間があるか、という指定方法にしていました。
これで動的に生成されても(きっと)大丈夫(なはず)!

ところが…

「これ、10とか15とかの数字を元にXとYをこちらで計算してるんですよね」

(゚д゚)?

「リストとかは1個ずつがひとつのビューなので、左上を0,0とかにして、固定ページと同じようにXY指定してもらって大丈夫ですよ」

(((( ;゚д゚))))アワワワワ

どうやら今まで無駄に計算してもらっていた模様…。

まとめ

というわけで、iPhoneで画面設計する場合は全部XとYで指定しよう!
隙間指定するのは地味に面倒だったので、最終的にwin-winになりました。

[before]

これが…

img-mistake



[after]

こう!

img-after

なお、今回似たような画像ばかりになってしまったので、お口直しにネコちゃんを貼っておきます。

img-neko

ではまた!(^O^)/