Advertisement
  1. Web Design
  2. HTML & CSS
Webdesign

Entwerfen und kodieren Sie eine integrierte Facebook App: Theorie

by
Length:LongLanguages:
This post is part of a series called Design and Code an Integrated Facebook App.
Design and Code an Integrated Facebook App: HTML + CSS

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

In dieser Serie werde ich hinter die Benutzeroberfläche von Facebook schauen und Ihnen dabei zeigen, wie Sie Ihre eigene integrierte Facebook-Blog-App über einen RSS-Feed erstellen können. 

Liebe es oder hasse es Facebook ist zu einem integralen Bestandteil des Lebens der Menschen geworden.  Für viele ist es ein Werkzeug, das es uns ermöglicht, alte Freunde zu treffen, Fotos zu teilen oder unsere Nächte mit unseren Freunden zu planen.  Hinter der sozialen Interaktion steckt jedoch eine komplexe Struktur sorgfältiger UI-Planung, die optimiert und neu optimiert wurde. 

In den frühen Tagen von Facebook war ich nie ein Fan von seinem "langweiligen Look and Feel" und hatte immer das Gefühl, dass es für Design so viel mehr Potenzial hat. Aber erst als mein Wissen und meine Erfahrung als UI-Designer Fortschritte gemacht haben, merke ich, dass es Facebooks Einfachheit und Benutzerfreundlichkeit ist, die es ihm ermöglicht haben, so erfolgreich zu werden.  Sein Design ist sicherlich etwas, das man bewundern sollte. 


Einführung

In dieser Serie von Tutorials werde ich die Benutzeroberfläche von Facebook anhand einer Reihe von Fallstudien, Recherchen, Implementierungen und Analysen bewerten.  Sie werden also verstehen, wie einige seiner Designprinzipien Ihnen bei der Erstellung einer nativen Facebook-App helfen . Ich wollte etwas schaffen, das hoffentlich den Lesern von Webdesignuts + nützlich sein könnte und dachte: "Wäre es nicht großartig, wenn ich euch zeigen könnte, wie man aus Ihrem Webblog eine native Facebook-App macht?". Nun Leute, du hast Glück, denn das ist genau das, was ich in den nächsten 3 Artikeln vorhabe.  Also bleib bei mir, mach dir eine Tasse Tee und freu dich beim Gestalten! 


Eine kurze Geschichte über das UI Design von Facebook

Seit den Anfängen war Einfachheit das Herzstück von Facebook

Im Februar 2004 öffnete thefacebook.com seine Pforten für die Studenten von Harvard, bevor es am 26. September 2006 für die Öffentlichkeit geöffnet wurde.  Das Gesamtkonzept für den Standort bleibt seinem ursprünglichen Zustand ähnlich.  Es hat immer noch den blauen Header, den sauberen weißen Hintergrund, die blauen Registerkarten-Spaltenköpfe und die gleiche Schriftart, die es heute verwendet, Lucida Grande.  Natürlich hat sich seit den frühen Tagen viel verändert.  Mark Zuckenberg ist erwachsen und die Seite ist mit ihm gewachsen.  Es ist schwer, genau zu verstehen, was genau Zuckenbergs Denkprozess in den frühen Tagen von Facebook getan hat, aber es scheint wahrscheinlich, dass sein Hauptaugenmerk auf der Funktionalität auf der Benutzeroberfläche lag.  Zuckenberg gibt einen Einblick in seine frühen Design-Überlegungen: 

Seit seiner Inkarnation wurde Facebook mehr Geld als Sinn gegeben.  Damit kamen Verbesserungen im Facebook-Design; Nach und nach, Stück für Stück.  Facebook aktualisiert seine Benutzeroberfläche regelmäßig in Phasen und wird oft mit Kritik begrüßt, bevor sie schließlich von der Mehrheit geschätzt wird. 

Facebook app ui history

Facebook App Geschichte

Warum also möchtest du deine App wie Facebook gestalten?  Es liegt ganz bei Ihnen, wie Sie Ihre Facebook-App gestalten.  Einige von euch werden sich für native entscheiden und andere werden etwas völlig neues gestalten, das Facebook hoffentlich ergänzen wird.  Es gibt keinen richtigen oder falschen Weg, um deine App zu gestalten, aber hoffentlich, wenn du die Logik hinter dem Design von Facebook verstehst, wird es deinem Design die beste Chance auf Erfolg geben. 

Vertrautheit

Der größte Vorteil von nativem Design ist, dass es Ihren Benutzern vertraut ist.  Sie müssen kein neues UI-Konzept von Grund auf erlernen, da sie bereits mit Facebook vertraut sind. 

Sicherheit

Neben Vertrautheit sitzt Sicherheit.  Ihre Benutzer werden sich sicher in einer Umgebung, die sie bereits kennen, sicher fühlen, im Gegensatz zu einem fremden Design, das in Facebook sitzt.  Wenn Sie in Erwägung ziehen, Artikel über Ihre App zu verkaufen, kann dieses Sicherheitsgefühl Ihrer Nutzer möglicherweise zu höheren Conversion-Raten führen. 

Als Designer haben wir den natürlichen Wunsch, etwas Neues und Aufregendes zu kreieren. Daher mag es nicht so sein, dass Sie den Stilrichtlinien von Facebook folgen. Aber wie wäre es, wenn Sie sich selbst eine Herausforderung stellen und etwas im Stil von Facebook gestalten würden? hast du keinen direkten Stil?  Überhaupt gewundert, wie eine Tabelle im Stil von Facebook aussehen könnte?  Stellen Sie sich selbst eine Herausforderung und erschaffen Sie etwas, das noch nicht existiert.  Ich kann Ihnen versichern, dass diese Herausforderung ebenso viel Spaß machen kann wie ein völlig neues Konzept von Grund auf. 

facebook app the nebefits of designing native

Facebook App die Nefits des Designs nativ

 Viele große Organisationen haben einen Marken- oder Styleguide.  Facebook gestaltet seine Richtlinien in den Facebook Designprinzipien.  Obwohl sie vage sind und auf verschiedene Weise interpretiert werden können, hilft sie Ihnen zu verstehen, was Facebook durch das Design seiner Website zu erreichen versucht.  Wie Facebook sagt: 

Es gibt bestimmte Überzeugungen, die wir bei Facebook haben, bestimmte Qualitäten, die wir in unserer Arbeit anstreben.  Dadurch können wir darüber diskutieren, ob etwas "Ist Facebook" oder "Ist nicht Facebook" ist, was uns erlaubt zu bewerten, ob irgendetwas, was wir entwerfen, verbessert werden könnte. 

Das Leitbild von Facebook ist es, die Welt offener zu machen, was sich stark auf das Design auswirkt.  Das Facebook UI muss quer durch alle Kulturen auf allen Kontinenten der Welt in jeder Sprache funktionieren.  Dies bedeutet nicht, dass Sie Ihre App in jede Sprache auf dem Planeten übersetzen müssen, aber es sind einige Dinge, die Sie beim Erstellen Ihrer App beachten sollten. 


Dinge zu vermeiden

Stellen Sie sicher, dass Sie die Grafik-API-Dokumentation gelesen haben, und stellen Sie sicher, dass das, was Sie vorhaben, erreichbar ist.  Als ich zum ersten Mal mit dem Konzept zur Erstellung dieser Blog-App aufkam, dachte ich, es wäre eine gute Idee, die Vorschaubilder neben meinen Blog-Posts einzufügen.  Der (leider) Feedburner-RSS-Feed (von dem wir den Feed beziehen werden) enthält jedoch keine URL für Vorschaubilder.  Dies erzwingt nur die Tatsache, dass Sie Ihre App sorgfältig planen sollten.  Je mehr Sie planen, desto einfacher machen Sie es für sich.  Es gibt nichts Schlimmeres, als Ihre App in HTML / CSS entworfen und codiert zu haben, nur um herauszufinden, was Sie geplant haben, ist nicht verfügbar oder möglich. 

Ein weiterer Punkt ist, Leute mit falschen Facebook UI-Elementen wie dem Like-Button nicht in die Irre zu führen - Facebook wird dich dafür bestrafen, was dazu führen könnte, dass deine App gesperrt wird. 

Stellen Sie sicher, dass Sie innerhalb von 760px für Apps entwerfen, oder wenn Sie Ihre App auf eine Seite stellen möchten, die nicht größer als 520px ist. 


Der Wireframe

facebook app ui wireframe

Wie bei jeder guten Website ist es wichtig zu planen.  Lange vorbei sind die Zeiten, in denen es akzeptabel ist, direkt in einen Code-Editor zu springen und Ihre Site zu codieren.  Heutzutage können Sie sich viel Mühe und Zeit ersparen, indem Sie ein Drahtgitter skizzieren.  Diese eingeschränkte grafische Darstellung Ihrer App kann Ihnen dabei helfen, Navigation, Pfade und aktuelle Informationen zu planen, die für Ihre Benutzer am vorteilhaftesten sind.  Sie haben die Möglichkeit, Ihre Entscheidungen zu analysieren und zu bewerten, ohne vom Design beeinflusst zu sein.  Zum Glück für uns gibt es heute eine ganze Reihe von Software und Ressourcen, die uns helfen, Drahtgitter in wenigen Minuten zu knacken. 

Wenn wir uns das Drahtgitter unserer Facebook App ansehen, können Sie sehen, wie wir es geplant haben: 

  • Die Routen und Pfade werden von Nutzern in unserer App einmal genutzt. 
  • Ungefähre Abmessungen, um sicherzustellen, dass wir im richtigen Maßstab arbeiten und dass unsere App in Facebook passt. 
  • Ungefähre Schriftgrößen - Dies kann hilfreich sein, wenn wir später unser CSS planen.  Normalerweise würde ich dies nicht tun, wenn ich ein Drahtgitter für eine Site erstelle, aber in diesem Fall, wenn wir wollen, dass unsere Styles wirklich einfach sind, kann es oft als gute Anleitung für grundlegende Styles dienen, wie unsere Heading Tags h1, h2 etc . 
  • Die logischsten Orte für unsere Inhalte.  Beachten Sie, dass die Blogposts alle auf der linken Seite platziert wurden.  Dies ist, um den Nutzer direkt in unsere Inhalte zu zeichnen, sobald sie unsere App erreichen. 

Navigation

facebook ui navigation

Bis vor kurzem hat mir die App-Navigation von Facebook nie wirklich gefallen. Ich habe immer gespürt, dass unsere Apps versteckt sind und dass es keine klare Richtung und Organisation gibt.  Zum Glück wurden die Dinge in letzter Zeit verbessert und sie haben die Navigation auf der Startseite optimiert.  Dies ist für uns App-Entwickler ein großer Vorteil, da sie den Zugriff auf unsere Apps einfacher und mehr auf der Startseite ermöglichen. 

Facebook sagen: 

Wir machen es Ihren Nutzern einfacher, auf die am häufigsten verwendeten Anwendungen zuzugreifen.  Plattformanwendungen haben jetzt gleiche Chancen für Immobilien auf der Homepage.  Sie können die Positionen belegen, die derzeit im Anwendungs-Dashboard, im Spiele-Dashboard und in den Fotos gespeichert sind, je nachdem, mit welchen Anwendungen der Benutzer am häufigsten interagiert. 


Farben

facebook app colors

Das erste, was Sie bemerkt haben, ist, dass Facebook Blau als eine seiner primären Grundfarben verwendet.  Es ist eine sinnvolle Wahl von Facebook.  Überhaupt gewundert, warum so viele Web site (Twitter, Facebook, LinkedIn, Paypal usw.)  Blau als ihre Primärfarbe benutzen? Es ist, weil Blau als die Farbe angesehen wird, die am allgemeinsten annehmbar ist.  In vielen verschiedenen Kulturen ist Blau mit religiösen Überzeugungen verbunden, bringt Frieden oder soll die bösen Geister fernhalten.  Blau ist eine Farbe, mit der die meisten von uns unterbewusst vertraut geworden sind; es ist die Farbe des Himmels und des Meeres.  Allgemein verbinden wir dies mit Ruhe.  Facebook scheint das Gleichgewicht mit seinem blauen Header und dem sauberen weißen Hintergrund zu halten, da zu viel Blau Gefühle von Kälte, Traurigkeit und Depression hervorrufen kann. 

Schauen Sie oben und Sie können einige der anderen Farben sehen, die Facebook auf seiner Website verwendet. 


Schriftarten / Typografie

facebook typography fonts

Facebook behält immer noch die gleiche Primärschrift, die es am Eröffnungstag verwendet hat, die Sans-Serif-Schrift Lucida Grande.  Danach folgt eine Reihe von Fallback-Fonts.  Wenn wir uns das CSS von Facebook anschauen, können wir die vollständige Schriftfamilie direkt sehen als: 

Die von Charles Bigelow und Kris Holmes entworfene Schrift wird von einigen als minimalistisch, formal und qualitativ betrachtet.  Alle Qualitäten, die es zur perfekten Schriftart für das weltweit größte soziale Netzwerk machen. 

Facebooks Absatztext ist 11px mit einer Zeilenhöhe von 16px.  Dies ergibt ein gutes Verhältnis von etwa 1,5, so dass es leicht abgelesen und gleichmäßig verteilt werden kann.  Zeilenhöhe ist extrem wichtig für Text, wenn Sie an sauberen, minimalen Designs arbeiten.  Wenn Sie die Zeilenhöhe falsch auf Ihrem Text bekommen, könnte dies leicht ein gutes Design zu einem OK machen.  Es sind diese Schriftattribute, die wir für unsere Blog-App verwendet haben. 


Benutzer Eingabefelder

facebook ui input fields

Indem wir die Benutzereingaben von Facebook aufschlüsseln, können wir herausfinden, welche für die Art der App am geeignetsten sind.  Facebook hat im Allgemeinen fünf Arten von Benutzereingabefeldern.  Diese sind: 

  • Status-Update 
  • Anmelden 
  • Bemerkungen 
  • Suche 
  • Anmeldung 

Wenn Ihr Benutzer einige Details mit Ihrer App registriert haben muss, z. B. eine E-Mail-Adresse für einen Wettbewerb, dann ist die naheliegendste Wahl, den Anmeldetyp für Ihre Nutzer zu verwenden, um ihre Daten einzugeben.  Dies ist eine gute Wahl für diese Art von Sache, da diese großen Felder den Benutzer einbeziehen und bei der Conversion helfen.  Wenn deine App eine Suche beinhaltet, warum versuchst du das Rad neu zu erfinden?  Warum nicht die Facebook-Stilsuche verwenden?  Ihre Benutzer können sich bereits auf die native Suche beziehen und sofort erkennen, dass sie ihnen helfen werden, das zu finden, wonach sie suchen.  Es ist diese Art von Detail, wenn Sie Ihre App entwerfen, die es zur ultimativen Benutzerfreundlichkeit macht und es schließlich die beste Chance auf Erfolg gibt! 

Eine andere Möglichkeit wäre, das zu tun, was wir mit unserer Facebook-Blog-App gemacht haben, und eine kleine Änderung zu erstellen, die nicht in Facebook ist.  Beachten Sie im obigen Diagramm, wie die Kommentare und Login-Eingaben beide eine Auffüllung von 3px haben, nun, wir haben das genommen und den Randstrich von der Statusaktualisierungseingabe verwendet.  Diese Art von Kombination wird immer noch innerhalb des Designs sitzen und trotzdem ein Gefühl von Ursprünglichkeit vermitteln, wenn wir das Facebook-Style-Sheet erweitern, während wir uns weiterhin an die Regeln halten. 


Denke sauber

Facebooks Ehrgeiz in ihrem Design ist es, als eine leere Leinwand zu fungieren, von der ihre Benutzer leben können.  Dies ist sinnvoll, da das Design nicht darauf einwirken sollte, was Nutzer in Ihrer App erreichen möchten.  Facebook glaubt, dass: 

Ein minimaler, gut beleuchteter Raum fördert Partizipation und ehrliche, transparente Kommunikation. 

Als Designer ist es manchmal schwer, einen Schritt zurück zu machen.  Wir sind so daran gewöhnt, unsere Designs mit Farbverläufen, Schlagschatten und Kantenradien zu überlagern, dass wir manchmal vergessen, dass die einfachsten Designs am effektivsten sein können.  In der Lage zu sein, dies zu tun, kann oft eine ziemlich schwierige Aufgabe sein, aber es ist etwas, was jeder UI-Designer beherrschen und in der Lage sein sollte.  Peter Soyer hat einen interessanten Artikel über Minimal Design geschrieben.  Wenn Sie einige Ideen oder Anregungen für diese Art von Sache benötigen, sollten Sie auf jeden Fall diese Post 60 saubere und minimale Websites zur Inspiration

Oder Sie können natürlich immer auf Facebook schauen und sehen, welche Elemente Sie aus ihren aktuellen sauberen Stilen ziehen können. 

Facebook App Think Clean

Konsequent denken 

Etwas, das Sie vorher vielleicht nicht bemerkt haben, wenn Sie Facebook besuchen, ist, wie sehr Facebook Muster in seinem UI-Design verwendet.  Dies soll Benutzer dazu bringen, sich mit ihrem Layout vertraut zu machen.  Facebook erklärt, wie das geht

Indem wir uns Mustern zuwenden, können wir erkennen, dass unsere Verwendbarkeit stark verbessert wird, wenn ähnliche Teile auf ähnliche Weise ausgedrückt werden.  Unsere Interaktionen sprechen mit einer Stimme zu den Benutzern und schaffen Vertrauen.  Reduzieren, wiederverwenden, nicht neu gestalten. 

In unserer Blog-App können Sie sehen, dass wir die Ideale von Facebook übernommen haben, indem Sie Teile wie die Tab-Header in der Seitenleiste wiederverwenden.  Dies macht es für unsere Benutzer leicht und ermöglicht es ihnen, schnell den Inhalt zu scannen, um zu finden, wonach sie suchen. 

facebook app Design principles think consistent

Denk Mensch

Im Vordergrund von Facebook steht die soziale Interaktion.  Benutzer tippen nicht mehr nur in Computer; Sie interagieren und verbinden sich mit den Menschen, die sie kennen.  Sie kommen auf Facebook, weil sie von ihren Freunden umgeben sein wollen.  Technologie und Design sollten im Hintergrund bleiben und nicht davon ablenken.  Es ist oft eine gute Idee, Ihre App menschlicher und interaktiver zu gestalten.  Zum Glück für uns bietet Facebook die Facebook-Grafik-API, die es uns ermöglicht, unsere App interaktiver zu gestalten und sich mit ihrer leistungsstarken sozialen Grafik zu verbinden. 

Wir werden in den kommenden Tutorials mehr über die Graph-API als Teil dieser Serie sprechen.  Facebook bietet auch einfachere Möglichkeiten für diese Art von Interaktionen, die durch die Verwendung eines ihrer sozialen Plugins wie die Schaltfläche "Gefällt mir", die Schaltfläche "Senden", Kommentare und vieles mehr integriert werden können. 


Anpassbar / Aktualisierbar machen

Ich bin mir sicher, dass Sie alle bemerkt haben, dass Facebook sein Aussehen und seine Funktionen ziemlich häufig aktualisiert.  Dies ist nicht nur etwas, das Benutzer nervt, sondern auch die Hölle von uns Designern und Entwicklern ärgern kann.  Das liegt daran, dass es die ganze harte Arbeit ruinieren kann, die wir geleistet haben.  Warum nicht auf das Schlimmste vorbereiten, damit Facebook, wenn es ein unerwartetes Update macht, bereit ist, es aufzunehmen.  Aus eigener Erfahrung liegt der Schlüssel darin, Elemente wiederverwendbar und einfach gestylt zu machen. 

Natürlich wissen wir nie, wann und wie Facebook updaten wird - es kann kommen und dich in den Arsch beißen, wenn du es am wenigsten erwartest.  In der Tat so sehr, dass, als ich halb durch das Schreiben des Tutorials begleitend diese Serie war, Facebook ging und ihre Anwendung Leinwand Seite aktualisiert, so dass ich einige meiner Design neu zu lesen.  Danke Facebook! 


Alles in Aktion setzen!

Facebook App tutorial

Wenn Sie sich die .PSD dieses Tutorials ansehen, können Sie sich einen Überblick verschaffen und sehen, wie einige der Punkte, die wir heute angesprochen haben, sich auf unser Design beziehen.  Unser Design ist ähnlich wie Facebook gestaltet und gleichzeitig einzigartig in unserer App.  Wir haben die Designprinzipien von Facebook ausgeliehen und befolgt, sodass unsere App auf Facebook ein einheitliches Erscheinungsbild aufweist.  Einige Artikel, die wir für unsere App übernommen haben, sind: 

  • Die Filtersuchleiste: Inspiriert von der nativen Suchleiste von Facebook. 
  • Absatztext: Wie Facebook formatiert.  Einer der wichtigsten Faktoren, um es nativ aussehen zu lassen. 
  • Tabs auf der Seite: Obwohl sie nicht genau mit den nativen Tabs von Facebook übereinstimmen, rufen sie dennoch das Gefühl hervor, dass Facebook die ursprünglichen Seitentabs hat. 
  • Tab-Header: Unsere Tab-Header sind wie Facebook formatiert. 
  • Benutzername und Profilbild: Um den Fokus von Facebook weiterhin auf menschliche Interaktion zu legen, haben wir diese hinzugefügt, um unsere Blog-App persönlicher zu gestalten. 
  • Einfaches Styling: Wir nutzen den Leerraum auf der Seite effektiv, um unseren Textraum zum Atmen zu bringen und die Ideale von Facebook zu unterstützen, eine leere Leinwand zu schaffen, um Partizipation und ehrliche, transparente Kommunikation zu fördern. 

Mein persönliches Studium

Anfang 2011 habe ich drei Fokusgruppen mit regelmäßigen Facebook-Nutzern gehalten, um sich über ihre Nutzungsgewohnheiten bei Facebook zu informieren.  Einige der Ergebnisse haben mich überrascht, obwohl sie für die Anwendung relevant waren, an der ich beteiligt war.  Es ist wichtig zu verstehen, dass Facebook eine extrem große Nutzerbasis hat und Sie sich nicht stark auf die Informationen verlassen sollten, die ich gesammelt habe eigene Recherche nach eigenen Kriterien und demografisch. 

Die Nutzer, die wir interviewt haben, gaben an, dass sie jeden Tag mindestens 30 Minuten bis eine Stunde auf Facebook verbringen.  Es überraschte mich, dass die Mehrheit der Leute wollte, dass unsere App auf Facebook nativ aussieht und dass jeder Nutzer sich sicherer fühlen würde, wenn er Artikel über Paypal von einer App kauft, als mit Kreditkarte zu zahlen.  Das könnte etwas bedeuten, wenn Sie etwas über Ihre App verkaufen möchten. 


Fazit 

Facebooks UI-Stil und die dahinter stehende Psychologie sollten unbedingt bewundert werden.  Es gehört zu den erfolgreichsten Websites aller Zeiten und liegt zum Teil daran, dass sie die richtigen Entscheidungen treffen, wenn es um ihr Design geht.  Denken Sie darüber nach, wäre Facebook so erfolgreich, wenn die Primärfarbe der Leinwand schwarz wäre?  Es ist schwer zu beurteilen, wie viel von ihrem Erfolg auf ihre UI-Entscheidungen zurückzuführen ist, aber ich denke auf jeden Fall, dass sie etwas Anerkennung für ihren Erfolg verdient. 

Indem ich Ideen von den einfachen, aber effektiven Designprinzipien von Facebook übernehmen und aufnehmen und sie in Ihre eigene App integrieren, bin ich zuversichtlich, dass Ihre App die bestmögliche Chance hat, ein Erfolg zu werden. 

Im nächsten Teil des Tutorials werden wir uns ansehen, wie wir unsere Blog-App .PSD in HTML / CSS einbinden können.  Also bis dahin, fröhliches Gestalten guckt! 


Weitere Links, Lesen und Ressourcen 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.