Welche Größe sollten TabBar-Bilder haben?

99

Ich habe Symbole für eine TabBar der Größe 100.

Ich habe die Richtlinien für die Benutzeroberfläche von Apple von 2013 überprüft und festgestellt, dass die Bildgröße 30x30/ sein sollte 60x60.

Da die Höhe des Registerkartenleisten-Controllers jedoch 50 beträgt, habe ich die Größe des Bildes beibehalten 50x50.

Wenn ich jetzt das Projekt starte, sehe ich das hässliche Design unten:

Geben Sie hier die Bildbeschreibung ein

Irgendeine Idee, welche Bildgröße ich verwenden sollte, damit das Design perfekt ist?

Hinweis: Ich schreibe auch keinen Text (z. B. Startseite, Suche usw.). Der Text der Registerkarte befindet sich im Bild selbst.

Fahim Parkar
quelle
1
"Ich habe Symbole für eine TabBar der Größe 100." Meinten Sie 50?
Blaszard

Antworten:

112

30x30 sind Punkte, dh 30px @ 1x, 60px @ 2x, nicht irgendwo dazwischen. Es ist auch keine gute Idee, den Titel der Registerkarte in das Bild einzubetten - Sie werden ziemlich schlechte Zugänglichkeits- und Lokalisierungsergebnisse wie diese haben.

Garrettmurray
quelle
3
Ich wusste das, aber wenn ich Formulierungen im Bild selbst haben möchte, was kann ich dann tun?
Fahim Parkar
Wenn Sie vorhaben, eine vollständig benutzerdefinierte UITabBar zu erstellen, sollten Sie wahrscheinlich genau das tun, anstatt Bilder für die Standard-UIKit-Version zu verwenden. Ansonsten glaube ich, dass Sie unten einen Totraum haben werden.
Garrettmurray
hmmm das passiert ... Ich werde den Designer bitten, Standardbilder für die Tab-Leiste zu erstellen, wie sie Apple unterstützen ... danke
Fahim Parkar
Danke, Kumpel. Dies war eine große und schnelle Hilfe.
Felipe
208

Gemäß den Apple Human Interface Guidelines :

@ 1x: ungefähr 25 x 25 (max: 48 x 32)

@ 2x: ungefähr 50 x 50 (max: 96 x 64)

@ 3x: ungefähr 75 x 75 (max: 144 x 96)

rsc
quelle
Ja, das stimmt laut Apfel. Überprüfen Sie den folgenden Link für weitere Informationen developer.apple.com/library/ios/documentation/UserExperience/…
Chamath Jeevan
cool, aber wie ist es möglich, ein Bild so klein zu machen, ohne es zu verwischen?
NiX
2
Wurde seitdem auf 23x23 (für Quadrate) oder 25x25 (für kreisförmige Bilder) aktualisiert ( developer.apple.com/ios/human-interface-guidelines/… )
Seop Yoon
Seop, Sie können einfach meine Antwort aktualisieren, um die neuesten Informationen wiederzugeben. Aber bemerkte, dass ich "ungefähr 25" sagte, also würde ich 23 als innerhalb dieser ungefähr Reichweite betrachten.
rsc
Meistens verwende ich quadratische Glyphen wie ein Home-Symbol, froh, dass @SeopYoon darauf hingewiesen hat. Ich werde 23x23 für die Größe der Registerkartensymbole verwenden.
Nachteile Bulaquena
44

Gemäß den neuesten Richtlinien für die Benutzeroberfläche von Apple:

Im Hochformat werden Registerkartensymbole über Tabulatortiteln angezeigt. Im Querformat werden die Symbole und Titel nebeneinander angezeigt. Je nach Gerät und Ausrichtung zeigt das System entweder eine normale oder eine kompakte Registerkartenleiste an. Ihre App sollte benutzerdefinierte Registerkartensymbole für beide Größen enthalten.

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Ich empfehle Ihnen, den obigen Link zu verwenden, um das vollständige Konzept zu verstehen. Da Apple das Dokument in regelmäßigen Abständen aktualisiert

Mihir Oza
quelle
2
Dies sollte mehr positiv bewertet werden, da es sich um ihre neue Richtlinie handelt.
Seop Yoon
Anweisungen zum Festlegen
Marián Černý
2

Gemäß meiner Praxis verwende ich das 40 x 40 für das Standard-Symbol für die iPad-Registerkartenleiste und 80 x 80 für die Netzhaut.

Aus der Apple-Referenz. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

Wenn Sie ein Balkensymbol erstellen möchten, das mit der iOS 7-Symbolfamilie verwandt ist, zeichnen Sie es mit einem sehr dünnen Strich. Insbesondere ein 2-Pixel-Strich (hohe Auflösung) eignet sich gut für detaillierte Symbole und ein 3-Pixel-Strich eignet sich gut für weniger detaillierte Symbole.

Erstellen Sie unabhängig vom visuellen Stil des Symbols eine Symbolleiste oder ein Navigationsleistensymbol in den folgenden Größen:

Ungefähr 44 x 44 Pixel Ungefähr 22 x 22 Pixel (Standardauflösung) Erstellen Sie unabhängig vom visuellen Stil des Symbols ein Registerkartensymbol in den folgenden Größen:

Ungefähr 50 x 50 Pixel (maximal 96 x 64 Pixel) Ungefähr 25 x 25 Pixel (maximal 48 x 32 Pixel) für Standardauflösung

firelyu
quelle
-3

Daumen hoch, bevor Sie Codes verwenden !!! Erstellen Sie ein Bild, das das gesamte Element der Registerkartenleiste für jedes Element vollständig abdeckt. Dies ist erforderlich, um das von Ihnen erstellte Bild als Elementschaltfläche in der Registerkartenleiste zu verwenden. Stellen Sie sicher, dass das Verhältnis von Höhe zu Breite auch für jedes Element der Registerkartenleiste gleich ist. Dann:

UITabBarController *tabBarController = (UITabBarController *)self;
UITabBar *tabBar = tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];

int x,y;

x = tabBar.frame.size.width/4 + 4; //when doing division, it may be rounded so that you need to add 1 to each item; 
y = tabBar.frame.size.height + 10; //the height return always shorter, this is compensated by added by 10; you can change the value if u like.

//because the whole tab bar item will be replaced by an image, u dont need title
tabBarItem1.title = @"";
tabBarItem2.title = @"";
tabBarItem3.title = @"";
tabBarItem4.title = @"";

[tabBarItem1 setFinishedSelectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-select.png"] scaledToSize:CGSizeMake(x, y)] withFinishedUnselectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-deselect.png"] scaledToSize:CGSizeMake(x, y)]];//do the same thing for the other 3 bar item
James
quelle