Wie groß sind die Symbole auf der linken und rechten Seite der Navigationsleiste für iOS 7 auf dem iPhone 5?

Kann jemand sagen, wie groß die Symbole normalerweise auf der linken und rechten Seite der Navigationsleiste sind?

Sehen Sie dies (das Zahnrad und das Info-Symbol).

Ich habe aus den iOS Human Design Guidelines gelesen, dass es 44 x 44 pt ist? Da das Verwirrende daran ist, dass Apple pts anstelle von px verwendet, stellt sich die Frage, wie groß ich es in Photoshop machen soll? 44 pt = 44 px?

Um es noch verwirrender zu machen, nehme ich bei den Retina-Displays an, alles mit 2 zu multiplizieren?

Mein Gehirn wird gerade gekocht. Ich entwerfe das Modell für die Bildschirmgröße des iPhone 5.

Antworten (4)

Ich habe aus den iOS Human Design Guidelines gelesen, dass es 44 x 44 pt ist? Da das Verwirrende daran ist, dass Apple pts anstelle von px verwendet, stellt sich die Frage, wie groß ich es in Photoshop machen soll? 44 pt = 44 px?

Bei Nicht-Retina-Geräten gilt 1 iOS-Punkt = 1 Pixel.

Bei Retina-Geräten gilt: 1 iOS-Punkt = 2 Pixel.

Für Retina HD-Geräte (im Moment nur iPhone 6 Plus) gilt: 1 iOS-Punkt = 3 Pixel.

44×44pt bedeutet also, dass Sie Assets benötigen bei:

  • 44×44px (1×-Maßstab, Nicht-Retina, Original-iPhone usw.).
  • 88×88px (2×-Maßstab, Retina, iPhone 4, iPhone 6 usw.).
  • 132×132px (3× Skalierung, Retina HD, iPhone 6 Plus).

Aber 44pt ist eigentlich die Höhe der Navigationsleiste, also möchten Sie wahrscheinlich nicht, dass Ihre Symbole so groß sind. Eine gute Methode, um die richtige Größe zu finden: Machen Sie einen Screenshot von Navigationsleistensymbolen, die Ihrer Meinung nach die richtige Größe haben, und verwenden Sie diese als Grundlage.

Bei Verwendung von 44/88/132 sah mein Symbol in der Navigationsleiste viel zu groß aus. Ich habe zu 22/44/66 gewechselt und es sieht viel passender aus. stackoverflow.com/a/33732209/1438339

Apple verwendet pt anstelle von px, da es mehrere Displays gibt.

1pt wird auf @1x-Bildschirmen (iPhone 1, iPhone 3G, iPhone 3GS) als 1px dargestellt. Das nächste angezeigte Display war Retina (iPhone 4, 4S, 5, 5C, 5S, SE, 6, 6S, 7), das 1pt als 2px darstellt, also @2x-Bildschirm. Später mit iPhone 6+ erschienen sie mit Retina HD (6+, 6S+, 7+) Bildschirm und das ist @3x, also stellt es 1pt als 3px dar.

Die Antwort auf Ihre Frage ist also 22pt für das Bild der Navigationsleistenschaltfläche und die Bilder, die Sie bereitstellen müssen, sind 22px(@1x), 44px(@2x) 66px(@3x). Außerdem gibt es die Namenskonvention für die Bilder, also sollten Sie zum Beispiel für das Bild "info.png" sie "info.png", "info@2x.png" und "info@3x.png" nennen.

Ja, die Human Design-Richtlinien von iOS haben eine Größe von 44 x 44 pt, das stimmt. Aber es bedeutet nicht die Größe des Symbols, sondern sie erzählten von der Anzapffläche. Das bedeutet, dass Sie die Symbolgröße gemäß Ihrem Design verwenden können, aber wenn Sie dies diesmal aufschneiden, können Sie dieses Symbol um 44 Pixel zuschneiden, damit der Benutzer es einfach aufnehmen kann.

Ich verstehe. Danke vielmals! :)

Vielleicht kann das helfen. Es gibt viele Tuts darüber, wie man für IOS entwirft. - http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/