Hogyan kell tervezni iPhone 6 Plusra?

Azt kezdtem el megnézni, hogy egy iPhone 6 Plus layout tervezésének hogyan kell nekiállni? Az alapvető probléma onnan indult, hogy Sketchben felraktam az iPhone 4s-5s-6-6p artboardokat egymás mellé és ezt látom:

A 6 Plus az egyetlen nyilvánvaló kivétel, hiszen bitang nagy a többihez képest. De miért is ne lenne az, ha egyszer a szoftver 1242×2208 tényleges pixellel számol (3x), amiből az eszköz megjelenít végül 1080×1920 képpontot? A valóságban egyébként a következőképpen néz ki a méretbeli különbség:

Jól látszik, hogy a fizikai méretek között nincs ekkora különbség. Persze, mivel nem lehet összemérni őket, hiszen a 6-os 2x-ben, a 6 Plus 3x-ben gondolkodik. Jó ötlet lehet ezek után 2x-ben felrakni az artboardokat, hogy akkor hasonló arányokat lássunk.

Ez már alkalmas arra, hogy tervezzünk rá egy képernyőt, viszont ha erre rátesszük a valós méretet, látszik, hogy a valós méret (amit a kezünkben tartunk), nem az, ami a Sketchben 2x 6 Plusnál látható:

Ennek az okát nem fogom tudni levezetni, de szívesen látnék ezzel kapcsolatos pontosítást. Eleve onnan kezdődik, hogy a poszt fenti ábráján levő fizikai milliméter adatok nem pontosak (és nem is tudom, mik a pontos számok, ennél jobbat nem találtam). iPhone 6 esetén (58 mm)2 + (104 mm)2 = 14180, ellenben a derékszögű háromszög átfogója (120 mm)2 = 14400. Egyébként a fizikai pixelek aránya szépen kijön 16:9-re (0,5625), ugyanakkor a fenti milliméter adatok nem (0,5577). Photoshopban 58x104mm 326 PPI-vel 744×1335 pixelre jön ki a 750×1334-gyel szemben – pixel aspect ratio?

Feketével jelöltem be, hogy mekkora lesz a valóságos mérete – egy icipicit nagyobb. (Számításaim szerint 6,6%-kal.) Mit jelent ez a gyakorlati dizájnernek? Azt, hogy nyugodtan tervezzünk 2x-ben 6 Plusra, de legyünk tisztában azzal, hogy a fizikai, ténylegesen megjelenített méret a kézben picit nagyobb lesz. Ez azt jelenti, hogy egy ugyanakkora méretű felirat készüléken lemérve 6,6%-kal hosszabb és magasabb.

Próbaképpen Xcode Simulatorben is megnéztem azt, hogy az Apple mit alkalmaz design stratégiához, vagyis ők a tervezéskor milyen szabályokat követnek. Szerettem volna megtudni, az Apple hogy dizájnol 6 Plusra, milyen méreteket, arányokat tart, hogyan áll neki a kérdésnek.

Szeretném jelezni, hogy átnéztem az Apple iOS Human Interface Guidelines dokumentációját és ezzel kapcsolatosan konkrétan semmi információt nem találtam. Pedig ez szerintem egy teljesen tipikus hétköznapi kérdés bármelyik designer részéről. (Vagy mit néztem be, nem tudja valaki?)

A szimulátorban sajnos a 3x felbontás értelmezhetetlenül nagy, viszont nincs lehetőség 2x-re csökkenteni, a beépített kontrollok csak 75, vagy 50%-ra képesek. 3x-ről 2x-re menni pontosan 2/3-ra, vagyis 66,67%-ra kellene csökkenteni a méretet, ezért mit volt mit tenni, Photoshophoz nyúltam. A következő ábrán 1 másodperces késleltetéssel mutatom be, hogy az iPhone 4s / 5s / 6 és 6 Plus, manapság targetált iOS telefonméretek hogyan néznek ki pontosan egymásra téve:

Nagyon jól megfigyelhető, hogy az ikonok és szövegek maradnak ugyanolyan méretűek iPhone 6 Pluson is, csak az elhelyezkedésük változik a képernyőn, illetve ebben a példában a kis bélyegképek nőnek. Megnéztem egyébként rendesen és tökéletesen kiadják a méretek egymást.

Mindebből az következik, hogy nyugodtan tervezhetünk 2x-en (828×1472) ugyanakkora méretben, mint iPhone 4-5-6-ra, csak arra az artboardra kell szétdobálni az elemeket, végül pedig 3x-ben exportálni az asseteket.