Wie man schöne und stilvolle Apps wie Timely macht

68

Ein Zitat von Google in Bezug auf Design und einige Beispiele für Apps:

Nach dem , was Google sagte in http://developer.android.com/ innerhalb Design Abschnitt sollte ein Entwickler drei Ziele berücksichtigen:

  • Verzauber mich
  • Vereinfache mein Leben
  • Mach mich großartig

Welches BTW wir (Entwickler) wissen.

Wenn Sie sich viele erfolgreiche Apps im Play Store ansehen, können Sie feststellen, dass sie gemäß den Google-Designrichtlinien entworfen wurden und praktisch dieselben Komponenten, Themen und Stile verwenden , die Google in seinen eigenen Apps verwendet hat.

Viele Leute mögen diese Art von Designs und auch diese Android-Standards in Bezug auf Themen und Komponenten, aber wenn Sie sich einige Apps im Playstore oder Apps eines Hardwareherstellers wie Samsung ansehen , die ihre speziellen Apps erstellt haben (wie die Galaxy Note 10.1- App zum Notieren) ) oder Asus Wetter App oder im Playstore die Timely App, die in Bezug auf Funktionalität und natürlich Design fantastisch ist, konnte man sehen, dass sie verschiedene Arten von Design und Komponenten verwenden.


Nun lassen sich tiefer in dem, was Google sagt :

Eine typische Android-App verwendet Aktionsleisten, und viele Apps enthalten eine Navigationsleiste.

Wie diese:

Die Aktionsleiste: Geben Sie hier die Bildbeschreibung ein

Die Navigationsschublade:

Geben Sie hier die Bildbeschreibung ein

Und andere Standardkomponenten auf Android.

Aber wie können einige Entwickler Apps so schön und funktional perfekt machen (fast!) Wie die Timely-App und nicht viele der von Google definierten Android-typischen Komponenten verwenden?


Werfen wir einen Blick auf Timely App an:

Dies ist der Bildschirm, auf dem der Benutzer die Alarme sehen kann, auf denen er einen einstellen oder einfach auf die Uhr schauen kann:

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

Jetzt kommen mir folgende Fragen in den Sinn:

  • Wie kann ich meine App so gestalten?
  • Wie kann ich solche Hintergrundanimationen erstellen und in meinen Apps verwenden?
  • Haben ihre Entwickler Unity und Eclipse zusammen verwendet, damit es als Android-App funktioniert?
  • Wenn sie Unity verwendet haben, warum läuft die App dann sehr reibungslos?
  • Wie haben sie es in der Aktionsleiste eingefärbt und die Deckkraft für das Objekt definiert?
  • Welche Art von Animationsklasse kann das tun, was sie in der App getan haben? (wie die Animation, die die Uhrzeit ändert)
  • Wenn sie Unity verwendet haben, warum ist ihre App dann 10 MB groß?

Es gibt viele andere Apps wie diese (nicht 100% so ähnlich), die ihr eigenes spezielles Design haben.

Soweit ich weiß, gibt es nicht viele Websites, die benutzerdefinierte Komponenten für Android wie http://androidviews.net/ anbieten. Es scheint also, dass wir gezwungen sind, unsere eigenen Komponenten zu erstellen, was zeitaufwändig ist und in dieser Zeit (2013) nicht Es ist nicht perfekt, während es für iOS Tonnen von kundenspezifischen Komponenten gibt, die von anderen Unternehmen hergestellt werden.

Ich habe mir auch die Timely-App-Website und deren FAQ angesehen Bereich gibt es einen Ort, an dem sie sagten, dass sie enthüllen werden, was und wie sie die Themen, Farben und Komponenten gemacht haben, aber da es keinen Zeitplan für ihre Ankündigung gibt und ich nicht. Ich möchte nicht im Dunkeln bleiben und bin hierher gekommen, um Sie nach Experten zu fragen.

Dies ist das Zitat von ihrer Website :

Ich bin Entwickler und kann einfach nicht herausfinden, wie Sie diese Animationen und Farbeffekte erstellt haben.

Wir planen für die Zukunft einen Engineering-Blog. Bleib dran!

Wenn ihr wisst, wie man Apps wie diese erstellt, oder wenn ihr einen Teil der Animationen, Komponenten, Tricks und Hacks kennt, die sie verwendet haben, dann habt ihr gerade meinen Tag gemacht.

Nima Sakhtemani
quelle
2
Es gibt einen Artikel darüber, wie sie die Animation von Zahlen gemacht haben.
Egor Neliuba
6
Ich würde vermuten, dass sie nur eine GLSurfaceView für den Hintergrund verwendet und die Aktionsleiste so überarbeitet haben, dass sie durchscheinend ist ( developer.android.com/training/basics/actionbar/overlaying.html ). Die Zahlen können nur benutzerdefinierte Ansichten sein, in denen sie ihre eigenen Bezier-Animationen für die Zahlen geschrieben haben, aber sie können auch GLSurfaceViews sein. Die Art und Weise, wie sie es geschaffen haben, sieht nicht nach einem Rätsel aus. Die Schönheit liegt im Design und in der Politur. Schauen Sie sich einige OpenGL ES-Starter-Tutorials an ... Es gibt einen großen ersten Schritt, um die Grundlagen von OpenGL zu erlernen, aber sobald Sie es haben, eröffnen sich Ihnen viele Möglichkeiten.
Tenfour04
Geht es bei dieser Frage NUR darum, wie Ihre App zeitgemäß aussehen soll , oder fragen Sie etwas mehr? Sie stellen viele Fragen zu den verwendeten Technologien, erforschen sie jedoch nicht wirklich. Haben Sie sich andere Orte als die Timely-Website angesehen?
Phil
Möchten Sie, dass wir die Quelle von Timely veröffentlichen?
Mayank_droid
2
Ich bin auch interessiert zu wissen ..
Shridutt Kothari

Antworten:

62

Sie machten eine Präsentation, in der sie erklärten, wie sie die Ansichtsfarben berechnen, welche Probleme sie damit hatten und einige andere nützliche Tipps. Das Video für die Präsentation ist auf ihrem YouTube-Kanal verfügbar

Das Morphing von Zahlen ist ziemlich einfach und wird in diesem Artikel erklärt. Die vollständige View-Klasse finden Sie im Artikel hier .


Von Android Developer Site Check Es ist einfach cool, Ihnen beim Erstellen schöner, leistungsstarker und erfolgreicher Apps zu helfen .

Android Design , ein Online-Styleguide, der die Prinzipien, Bausteine ​​und Muster für herausragende Leistungen in Android-Benutzeroberflächen beschreibt. Es scheint zu funktionieren;

Ich hoffe, dies beantwortet mindestens eine Ihrer Fragen.

jankovd
quelle
6
Beachten Sie, dass der größte Teil des Videos englisch ist, obwohl es nicht so beginnt.
Phil
1
Danke für das tolle Video. Ich hatte so etwas erwartet.
Nima Sakhtemani
Ich suche dasselbe für die Textansicht. Gibt es eine TextansichtMorphingView?!
LOG_TAG
1
Das wäre sehr schwierig und ich weiß nicht, ob jemand so etwas geschaffen hat. Um dies zu tun, müssten Sie die Kontrollpunkte für alle Zeichen im Text im laufenden Betrieb berechnen, was meiner Meinung nach für eine zufällige Schriftart schwierig wäre. Und machen Sie das noch einmal für den neuen Text und finden Sie heraus, wie Sie vom alten zum neuen Text wechseln können.
Jankovd
1
Es ist eine gute verfügbar, überprüfen Sie diese mit dem Namen TimelyTextView in GitHub. ( Github.com/adnan-SM/TimelyTextView )
Droidman