Analyse der Informationsarchitektur von Facebook
|
<br />Original: http://uicom.net/blog/?p=762 Das Design der Informationsarchitektur von Facebook ist die vernünftigste Informationsarchitektur, die ich je im Internet gesehen habe. Für jede Trainingseinheit muss ich grundsätzlich etwa 20 Minuten aufwenden, um sie zu analysieren, einschließlich alter, neuer und plagiierter Trainingseinheiten. Ich hatte immer vor, diesen Analyseprozess niederzuschreiben, aber obwohl er mündlich mit Bildern und Audiodaten veranschaulicht werden kann, ist er schriftlich tatsächlich schwierig auszudrücken. Ich werde es heute versuchen und hoffe, dass ich 30 % von dem wiedergeben kann, was der Trainer gesagt hat. (Schreiben Sie nur, was aktuell auf der Benutzeroberfläche angezeigt wird, ohne die Spaltenaufteilung und Skalierbarkeitsprobleme zu analysieren.) Schauen wir uns zunächst die Informationsarchitektur der alten Facebook-Oberfläche an: (Bei einer Auflösung von 1024 kann die Bildbreite nicht vollständig angezeigt werden. Es wird daher empfohlen, das Bild separat zu öffnen.)  klicken zum Vergrößern Der Entwicklungs- und Veränderungsprozess der großen Architektur: 1. Zu Beginn war die gesamte Informationsarchitektur von Facebook hauptsächlich in drei Teile unterteilt: „Systemkernnavigationsbereich“ (wie im blauen Teil im Bild oben gezeigt. Einschließlich des LOGO und zwei vollständiger Navigationen), „Anwendungsnavigationsbereich“ (wie im gelben Teil im Bild oben gezeigt. Einschließlich einer globalen Anwendung (Suche) und einer Liste aller Anwendungen) und „Inhaltsanzeigebereich“ (wie im orangefarbenen Teil im Bild oben gezeigt. Hauptsächlich in drei Teile unterteilt: lokale Navigation, Hauptinhalt und Zusatzinhalt, mit viel Hauptinhalt). Aufgrund der normalen Existenz und des umfangreichen Inhalts des „Systemkernnavigationsbereichs“ und des „Anwendungsnavigationsbereichs“ beeinträchtigen sie bei Verwendung häufig die Aufmerksamkeit der Benutzer auf den Hauptinhalt. Daher verwendet Facebook absichtlich eine Fehlausrichtung, um den „Inhaltsanzeigebereich“ im visuellen Design hervorzuheben (wie im orangefarbenen Teil im Bild oben gezeigt. Ich habe einige Designer sagen hören: „Die visuellen Elemente von Facebook sind furchtbar, es ist dumm, diese Position zu verzerren“, aber in Wirklichkeit verstehen sie die Absicht des Designers überhaupt nicht, was dumm ist!) 2. Später fügte Facebook „Kollaborative Übersetzung“ hinzu, eine globale Funktion. Gemäß allgemeinen Designideen kann der Speicherort dieser „Übersetzung“ sein: an der Position „Alle Navigation 3 (Einstellungen)“ oder als normales Element in „Alle Navigation 2 (Anwendungen)“. Aber Facebook hat das nicht getan. Um seinen großartigen UGC-Charme besser zur Geltung zu bringen, haben die Facebook-Designer den Anteil der „Übersetzung“ in der Navigation stark erhöht. Diese Anwendung wurde in der oberen rechten Ecke des „Inhaltsanzeigebereichs“ „unpassend“ hervorgehoben, und der „Gesamte Navigation 3 (Einstellungen)“ wurde eine Navigation zur Sprachumschaltung hinzugefügt (später stellte sich wahrscheinlich heraus, dass die „Sprachumschaltung“ selten verwendet wurde, sodass sie auf die rechte Seite der Copyright-Informationen unten verschoben wurde). 3. Später führte Facebook die IM-Funktion ein. Für Facebook ist dies eine normale Anwendung und muss normal in der Informationsarchitektur vorhanden sein. Daher kombinierten sie „Instant Messaging“ mit „Nachrichtenbenachrichtigung“, um das „Statusleisten“-Modell zu erstellen. (Ich vermute, dass die Designer von Facebook zu diesem Zeitpunkt bereits die Idee eines „Betriebssystems“ hatten) Dies ist ein sehr künstlerisches Design und es ist sehr gut gelungen. Und IM selbst ist so konzipiert, dass es sehr leicht und einfach zu verwenden ist. Zuvor hatte ich vermutet, dass sie IM möglicherweise an der Position „Posteingang“ des „Systemkernnavigationsbereichs“ platzieren würden, aber ich lag falsch, sie haben eine bessere Designmethode gefunden. 4. Heutzutage sind der „Systemkernnavigationsbereich“ (im blauen Teil der obigen Abbildung dargestellt) und der „Anwendungsnavigationsbereich“ (im gelben Teil der obigen Abbildung dargestellt) normale Inhalte und nehmen einen großen Teil der Benutzeroberfläche ein. Der Inhaltsanzeigebereich (im orangefarbenen Teil der obigen Abbildung dargestellt) selbst erfordert auch einige Inhalte der „verwandten Navigation“, „freundlichen Navigation“ und „Titel“. Daher gibt es auf jeder Seite nur sehr wenige Bereiche, in denen tatsächlich „Inhalte“ angezeigt werden. Als Website ist das kein großes Problem. Als „Anwendungsplattform“ gibt es jedoch zweifellos viele Hindernisse: Die Anzeige von Schnittstelleninhalten ist stark eingeschränkt und die Sicht der Benutzer wird bei der „normalen Navigation“ immer verschwendet. Überlegen Sie einmal: Wird Ihr Betriebssystem abstürzen, wenn 1/3 des Platzes auf der Benutzeroberfläche Ihres Betriebssystems über einen längeren Zeitraum vom Systemmenü belegt ist? Meine wichtigsten Anmerkungen zum alten Design : 1. Die Logik ist klar und die Struktur streng. Gute Skalierbarkeit. Allerdings mangelt es an Innovationen bei der Präsentation der Inhalte. 2. Der Kern der gesamten Facebook-Website ist „Mein“, der zentrale Navigationsbereich des obersten Systems (siehe erstes Bild, der blaue Teil). Außerdem gibt es oben „Gesamte Navigation 3 (Einstellungen)“. Der gesamte obere Bereich stellt den Kern der Website dar, der weder von Benutzern noch von Dritten verändert werden kann und zugleich der offizielle reservierte „Bereich“ von Facebook ist. Es gibt jedoch ein Detail, um das sie auf Zehenspitzen herumgeschlichen sind und das sie nicht wirklich losgelassen haben, und das ist das provisorische „Zuhause“. Tatsächlich klicken die meisten Benutzer jetzt auf das Logo, um zur Startseite zurückzukehren. Facebook hat den „Home“-Link aus der Hauptnavigation entfernt, traut sich aber nicht, ihn vollständig zu entfernen. Daher hat es vor dem Bereich „Alle Navigation 3 (Einstellungen)“ einen „Home“-Link hinzugefügt und diesen Link auch vom Logo-Link unterschieden und die Daten getestet (einschließlich des neuesten Informationsarchitekturdesigns, das auch Links unterscheidet und Daten testet. Interessierte können sehen, dass die Linkadressen des Logo-Links und des Home-Links unterschiedlich sind). 3. Die Hauptnavigation von Facebook ist eigentlich der „Anwendungsnavigationsbereich“. Dies betrifft die Anzeige des Hauptinhaltsbereichs. Der „Systemkernnavigationsbereich“ und der „Anwendungsnavigationsbereich“ umgeben den Inhaltsanzeigebereich. Die Struktur und Logik sind klar und leicht verständlich. 4. Im Hauptinhaltsbereich gibt es ein Design, das schon immer umstritten war: Beispielsweise hat Facebook auf der Seite „Bilder“ zwei Links hinzugefügt: „Meine Bilder“ und „Meine Bilder anzeigen“. Diese beiden Links wurden in eine „freundliche Navigation“ umgewandelt. Nachdem der Benutzer darauf geklickt hat, wird er auf eine neue Oberfläche umgeleitet. Die neue Oberfläche kann nicht zur aktuellen Anwendung „Bilder“ zurückkehren. Basierend auf den Nutzungsgewohnheiten inländischer Benutzer (ich glaube nicht, dass es in diesem Bereich Unterschiede zwischen den Nutzungsgewohnheiten inländischer und ausländischer Benutzer gibt) sollten diese beiden Links jedoch als "verwandte Navigation" oder sogar "lokale Navigation" behandelt werden. Dies ist auch eine der wenigen „guten Änderungen“, die UCH beim Kopieren von Facebook vorgenommen hat. Vorherige Seite 1 2 Nächste Seite Gesamten Artikel lesen |
<<: Mit CSS3 wird ein Kegelschnitt-Gradienteneffekt erzielt
>>: Der Unterschied zwischen MySQL Outer Join und Inner Join Abfrage
Artikel empfehlen
Designtheorie: Hierarchie im Design
<br />Originaltext: http://andymao.com/andy/...
Einführungstutorial zu React Hooks
Zustandshaken Beispiele: importiere { useState } ...
Einführung in MySQL-Anweisungskommentare
MySQL unterstützt drei Arten von Kommentaren: 1. ...
Detaillierte Analyse und Verwendung des Befehls tcpdump unter Linux
Einführung Einfach ausgedrückt ist tcpdump ein Pa...
jQuery implementiert verschachtelte Tab-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
JavaScript implementiert eine einzelne verknüpfte Listenprozessanalyse
Vorwort: Zum Speichern mehrerer Elemente sind Arr...
Detaillierte Erläuterung der MySQL-Multitabellen-Joinabfrage
Inhaltsverzeichnis Abfrage zum Verbinden mehrerer...
Vergleich der Verwendung von Formularelementattributen schreibgeschützt und deaktiviert
1) Geltungsbereich: schreibgeschützt: Eingabe [Typ...
Der neueste Linux-Installationsprozess von Tomcat8
Herunterladen https://tomcat.apache.org/download-...
Wie die MySQL Select-Anweisung ausgeführt wird
Wie wird die MySQL-Select-Anweisung ausgeführt? I...
Analyse und Lösungen für Probleme bei der Verwendung von Label-Tags
Ich habe kürzlich bei einer bestimmten Aufgabe das...
Detaillierte Erläuterung des Docker-Datenmanagements (Datenvolumes und Datenvolume-Container)
Beim Einsatz von Docker in einer Produktionsumgeb...
Detaillierte Erklärung einiger Einstellungen für Tabellenanpassung und Überlauf
1. Zwei Eigenschaften des Tabellen-Resets: ①borde...
Detaillierte Erläuterung des Problems, dass die Synchronisierung des Warehouse-Cache nach dem Ändern der Yum-Quelle in CentOS8 fehlschlägt
Ursache des Problems: Zunächst kann die Standard-...
Verwenden Sie reines CSS, um einen Scroll-Schatteneffekt zu erzielen
Um es gleich auf den Punkt zu bringen: Bei manche...