たぶん、ねむたくなる

忘備録的におもったことだけ

iPhone6 plusが正式発表されたし@3x周りを調べてみた

iOS6以降で俯瞰して必要画像を見れるものを作りました

昨晩のApple Special EventでiPhone6やらApple Watchやらでましたね!
私は朝から@3xとかiPhone6 plusの独自UIやら独自ランドスケープビューでkillされまくってます。
あぁ…発売前から気が重い。。。

というわけで
UIデザイナー向けのツール”は一旦置いといて
気が重い内容を調べるべくUIデザイナーが知りたい内容をまとめました。
(iOS8はGM版もでていないため、あくまで2014.09/10時点の情報です)
みんなで鬱まろうw


とりあえず全iOS端末をまとめてみてみる

iPhone, iPod touch (アスペクト比 16:9)


        iPhone6 plus iPhone6 iPhone5(5s,5c), iPodtouch5
ディスプレイサイズ 5.5" 4.7" 4"
実ピクセル   1920x1080 1334x750 1136x640
スクリーン座標 736x414 667x375 ※2 568x320
ppi   401 326 326
@Nx @3x ※1 @2x @2x
正確なアスペクト比 16:9 16:8.9955 16:9.0141

※1
iPhone6 plusは@3xが割り当てられていますが、
実際には@2.46xぐらいなので@3xを縮小表示されていると思われる。
逆にきれいな@3xとなるppiは489ppi(163ppi*3x)となる。

※2
iPhone5のアイコン等のサイズはそのままで縦横が大きくなった感じ。

iPhone, iPod touch (アスペクト比 4:3)


        iPhone4(4S), iPodtouch4 iPhone3G(3GS), iPodtouch(1,2,3)
ディスプレイサイズ 3.5" 3.5"
実ピクセル   960x640 480x320
スクリーン座標 480x320 480x320
ppi   326 163
@Nx @2x 1 (@1x)



iPad (アスペクト比 4:3)


        iPad(3,4,Air) iPad(1,2)
ディスプレイサイズ 9.7" 9.7"
実ピクセル   2048x1536 1024x768
スクリーン座標 1024x768 1024x768
ppi   264 132
@Nx @2x 1 (@1x)



iPad mini (アスペクト比 4:3)


        iPad mini2 iPad mini1
ディスプレイサイズ 7.9" 7.9"
実ピクセル   2048x1536 1024x768
スクリーン座標 1024x768 1024x768
ppi   326 163
@Nx @2x 1 (@1x)



今回の発表で新たに必要になるであろう画像


  • アプリアイコン ※3
  • 画像素材 : @3x (基本的には全部)
  • Launch Image : 2208×1242, 1334x750(px)
  • iTunes Connect(申請用SS or 動画) : 2208×1242, 1334x750(px)

※3
アプリアイコンに関してちょっとどんなサイズ感なのかわからないので
心優しいエンジニアの方がimages.xcassetsとか見て教えてくれるはず…
いただきました!

f:id:tak073:20140911164719p:plain



で、ここでアレ?と思う人が出てくると思います。
“2208×1242(px)” ←このサイズってどっから出てきたの…??

@3x対応そのものは現状の“iPhone6 plus”対応になるので
1920x1080(px)じゃないの?とか私もそう思いました。
よくよく考えるとiPhone6 plusは上にも書いてあるとおり
@2.46xぐらいなんですよね。

スクリーン座標の736x414を正しい値として
それぞれを3倍(@3xなので)すると“2208×1242(px)”になります。


具体的にどういう工程でレンダリングされ表示されているかのフローは

        iPhone3G(@1x) iPhone5(@2x) iPhone6(@2x) iPhone6 Plus(@3x)
1: スクリーン座標 480x320 568x320 667x375 736x414
2: レンダリングピクセル 480x320 1136x640 1334x750 2208×1242
3: リサンプリング されない されない ダウンサンプリング(レンダリングピクセル/1.15)
4: 実際に表示されるピクセル(解像度) 480x320 1136x640 1334x750 1920x1080

これでスッキリ!

iPhone6 plusから漂う殺気の要因


  • 正確には@3xではない (ちゃんと作っても滲むんじゃね?)
  • プレゼンを見る限りデフォルトのメールappのポートレイトでUI違うんですけど…
  • iPhone 6 Plusのみのランドスケープとかなにそれ美味しいの?
  • 画面大きくなって片手での操作出来ないから“片手モード”つくってみたよ☆ (iPhone6も)

アス比 4:3時代の黄金比とか人間工学とか言うてたAppleはどこに言ったんだ…