Ermitteln Sie den korrekten RGBA-Wert für die Farbtonfarbe des Balkens für das Design-Bild eines Kunden?

8

Oft bekomme ich Mock-Up-Bilder, die definieren, wie eine iPhone-App aussehen soll. Diese können von so vielen verschiedenen Methoden kommen, wie es Projekte gibt, manchmal Balsamik oder sogar von Hand gezeichnet, manchmal Photoshop. Eine Sache, die üblich ist, ist eine Bar Tönungsfarbe angegeben in der Regel zu einigen Corporate Branding oder allgemeine App-Design entsprechen.

Wenn ich eines dieser Designbilder in einer App öffne und das Farbtropfwerkzeug verwende, um den RGB-Wert für eine Farbe zu erhalten, gibt es viele Möglichkeiten, von den dunkelsten Regionen am unteren Rand der enthaltenen Schaltflächen bis zum hellsten Regionen an der Spitze der Leiste. Ich kann keinen Platz finden, um die Farbe zu testen, wo das programmierte Ergebnis mit den Modellen übereinstimmt. Es ist immer falsch, wenn ich auf zwei Bilder schiele, die versuchen, einen oder mehrere Farbwerte zu optimieren, damit sie gut zusammenpassen.

>

Wie sieht ein Client aus, wie eine Navigationsleiste aussieht *? Wie ermitteln Sie die richtige UIColor für das Attribut tintColor eines Balkens?

* Ignorieren von Modellen, die Regenbogeneffekte, falsch angewendete Farbverläufe und andere Höhenflüge enthalten. Passende Farbe und Helligkeit entlang der Mittellinie wäre gut genug. Das ist zumindest eine vertretbare Position - "Was Sie nur fragen, ist nicht, wie iOS funktioniert!"

    
Adam Eberbach 12.04.2011, 00:57
quelle

4 Antworten

5

Richten Sie eine App mit einer UINavigationBar / UIToolbar und drei Schiebereglern ein, um tintColor festzulegen. Bewege die Schieberegler, bis sie richtig aussieht.

Wenn du das Bild auch irgendwie in die App bringst (UIPasteboard oder in eine Ressource steckst), kannst du -[CALayer renderInContext:] und etwas CoreGraphics Magie (kCGBlendModeDifference und etwas, um die Unterschiede zu multiplizieren; ich vergesse, was ich benutzt habe) sogar vergleichen die zwei Bilder.

  

Hinweis zum Simulator: Sie müssen zunächst Cmd-C ausführen, um das Einfügen aus der Mac-Pappe in die Simulator-Pappe zu übernehmen.

Was ich gefunden habe, war, dass Sie den Standard-Farbverlauf sowohl auf dem iPhone als auch auf dem iPad nur mit einem tintColor = nil reproduzieren können (der iPad-Standard hat auch keinen "Glanz"). Sie können einigermaßen schließen, aber dann ist die Farbe der Schaltfläche Fertig falsch.

Normalerweise sample ich in der Mitte der Mock-up-Navigationsleiste.

    
tc. 12.04.2011, 02:46
quelle
3

Ausgezeichnete Frage, auf die ich keine direkte Antwort habe, aber eine Lösung habe.

Wenn ich Designs entwerfe, sieht die Navigationsleiste normalerweise nicht so aus wie die Navigationsleiste des iPhones mit einem Farbton. Der Gradient ist normalerweise auch anders. So wie ich das sehe, gibt es zwei Möglichkeiten:

  1. Holen Sie sich die App ähnlich wie das Design
  2. Holen Sie sich die App genau wie das Design

Die meiste Zeit bekomme ich es fast wie das Design, was normalerweise bedeutet, dass man die im Mockup verwendete Farbe sticht und sie als Tönungsfarbe verwendet (oder vielleicht eine etwas leichtere Version davon).

Wenn ich es wirklich genau richtig machen möchte, muss ich die Standard-Nav-Bar-Zeichnung durch ein Bild ersetzen.

Erstellen Sie einfach eine Kategorie für UINavigationBar und überschreiben Sie drawRect. Dies funktioniert überraschend gut und die meisten Standard-Schaltflächen sind die Farbe, die Sie brauchen, und fügen Sie ohne zusätzliche Arbeit direkt ein.

Auf jeden Fall ist es meiner Erfahrung nach eine Menge Arbeit, die normalerweise übersehen wird, dass Ihre App genau so aussieht wie die Arbeit des Designers. Aber wenn es richtig gemacht wird, ist es es total wert.

Im folgenden Beispiel musste ich zwei verschiedene Nav-Bar-Looks für zwei verschiedene Bereiche der App unterstützen. Daher verwendete ich die tag-Eigenschaft der Ansicht, um zu prüfen, welche Version verwendet werden sollte.

%Vor%     
Ron Srebro 12.04.2011 01:31
quelle
3

In Antwort von tc. finden Sie eine kostenlose App im AppStore, die ich genau dafür gefunden habe "BarTint"

Ссылка

    
kwahn 18.02.2013 21:08
quelle
2

Ich setze den Style immer auf "Black Opaque" (wenn ich mit dem Interface Builder arbeite) und teste dann die dunkelste Farbe im Design (normalerweise Bereiche am unteren Rand) und stelle diese Farbe als Farbton ein. Das gibt mir etwas sehr ähnliches, ABER erlaubt mir natürlich nicht, die Licht- (Reflexions-) Seite zu kontrollieren. Wenn der Kunde den genauen Verlauf wirklich will, benutze ich ein Bild (leider) ...

    
Valentin Radu 12.04.2011 01:57
quelle

Tags und Links