Eine detaillierte Einführung in die Neugestaltung der Weibo-Komponente auf der Website (Bilder und Text)

Eine detaillierte Einführung in die Neugestaltung der Weibo-Komponente auf der Website (Bilder und Text)
Dinge über die Weibo-Komponentenrevision 123WORDPRESS.COM
Vorne geschrieben
 Weibo-Komponenten sind Komponentenprodukte, die von der offenen Weibo-Plattform bereitgestellt werden, damit Drittanbieter-Zugriffsbenutzer ohne Entwicklungsaufwand auf die Website zugreifen können. Geben Sie Weibo-Inhalte auf Websites von Drittanbietern aus, wo Benutzer mit Weibo interagieren, Inhalte teilen und Informationen mit Weibo synchronisieren können, wodurch die Benutzeraktivität auf Websites von Drittanbietern erhöht wird. Die Überarbeitung umfasst 14 Weibo-Komponenten, darunter die Freundesauswahl, den Herausgeber, das Freigabefenster usw.
Designprozess <br />Im Gegensatz zu früheren Produktrevisionsprozessen wurde diese Revision durch UDC und Produktzusammenarbeit initiiert. Interaktionsdesigner übten ihre maximale subjektive Initiative aus, kontrollierten die Ausgabezeit des Designcenters, kommunizierten mit Markenvision, Seitenaufbau, Produkten und Entwicklungseffizienz und unternahmen kleine Schritte, um eine bessere Benutzererfahrung zu erzielen.
Entwurfsvorbereitung <br />Probleme finden (Benutzer beobachten, Feedback von Mobiltelefonen und zentral organisieren) (Benutzerziele: Entwickler und Benutzer) – analysieren (Szenarien kombinieren, das Wesentliche durch Phänomene erkennen und Datenanalyse mit Produkten kombinieren) – Probleme lösen (vom Allgemeinen zum Detail, Probleme in Kombination mit Benutzeranforderungen lösen) – weiterverfolgen
Optimierte Experience-Design-Prinzipien, die während des Designprozesses befolgt wurden
 Prinzip 1: Vermeiden Sie, dass Benutzer nachdenken
 Reduzieren Sie den Lärm, der den Benutzer bei der Erledigung eines bestimmten „Denkens“ oder einer „Aufgabe“ beeinträchtigt, reduzieren Sie Verzweigungen, reduzieren Sie Multiple-Choice-Fragen und minimieren Sie die Vorgänge für Benutzer so weit wie möglich; stellen Sie entsprechende Eingabeaufforderungen für deaktivierte wichtige Steuerelemente bereit.
Wie im Freigabefenster gezeigt, wird der Text im Hintergrund direkt voreingestellt und standardmäßig nach dem Prinzip ausgewählt, Rich-Text-Informationen und hoher Qualität auf der aktuellen Seite Vorrang zu geben, um die Anzahl der Vorgänge und Multiple-Choice-Fragen für Benutzer so weit wie möglich zu reduzieren. Wenn die Eingabe leer ist oder die Wortbegrenzung überschreitet, wird die Schaltfläche „Teilen“ deaktiviert und ein erzwungener Klick zeigt die entsprechende Eingabeaufforderung an.
Um gleichzeitig zu viele redundante Vorgänge für Benutzer zu vermeiden, können Sie personalisierte Standardeinstellungen bereitstellen und personalisierte Standardauswahlen für wiederkehrende Benutzer festlegen, damit diese das Formular schneller ausfüllen können. Dies liegt daran, dass Optionen häufig „klebrig“ sind, was bedeutet, dass sie die vorherige Auswahl des Benutzers beibehalten. Unterm Strich gilt: Wenn es die Eingabe des Benutzers wert ist, ist es auch für das Programm wertvoll, es sich zu merken. Wenn Benutzer zwischen WeChat-Gruppen und Weibo wechseln, behält der Hintergrund die vorherige Eingabe des Benutzers bei und merkt sich diese.
Prinzip 2: Hierarchie deutlich machen und visuellen Lärm reduzieren <br />Die hierarchische Beziehung muss auf Logik und Informationsstruktur basieren und auch visuell widergespiegelt werden. Wenn Sie jedoch zu viele Drahtgittermodelle und dicke Hintergründe verwenden, wirkt das Bild blendend, was kontraproduktiv ist. Tatsächlich kann eine einfache Einrückung die hierarchische Beziehung darstellen.
Der Unterschied von zwei Pixeln: Wir können sehen, dass zwischen dem Rich-Text-Bereich und dem Eingabefeld ein Abstand von zwei Pixeln besteht. Da der Rich-Text viele Elemente enthält, ist er schließlich ein Ganzes. Nur zwei Pixel können die hierarchischen Module unterscheiden, ohne weitere visuelle Elemente hinzuzufügen und die Seite zu kompliziert zu machen.
Die Struktur des Kommentarfelds <br />Das Kommentarfeld hatte bisher eine flache Struktur, d. h. Kommentare und Antworten befanden sich auf derselben Ebene. Zu dieser Zeit sahen wir häufig Chat-Verläufe, die denen einer Gruppe von Personen ähnelten, und für Benutzer, die surften, war es schwierig zu verstehen, wer über welches Thema sprach. Nach der Sortierung haben wir die Kommentare in zwei Ebenen unterteilt. Die erste Ebene sind die Kommentare zum Inhalt der Seite; die zweite Ebene sind die Antworten auf die Kommentare. Wie in der folgenden Abbildung dargestellt, wird die Antwort auf den Kommentar standardmäßig nicht angezeigt. Nach dem Erweitern gibt es einen 50-Pixel-Einzug, um eine klare hierarchische Beziehung auszudrücken.
Einstellungsebene <br />Auf externen Sites werden Komponenten von Drittanbietern verwendet und die Verwendungsszenarien und -umgebungen sind normalerweise schwierig einzeln abzuschätzen. Der gemeinsame Nenner besteht jedoch darin, dass auf externen Websites sehr viel Platz zur Verfügung steht. Daher haben wir uns dafür entschieden, Hilfe- und Anleitungsinformationen auf offenen Plattformen bereitzustellen. Wenn Entwickler unsere Produkte verwenden möchten, müssen sie zunächst verstehen, was unsere Produkte sind und welchen Nutzen sie Entwicklern bieten können. Wenn Sie über eine solche Grundlage und ein gewecktes Interesse verfügen, möchten Sie bestimmt wissen, wie Sie diese nutzen können. Deshalb unterteilen wir die gesamte Seite in drei Teile: Beschreibung, Vorteile und Einstellungen. Allerdings erregen Worte immer das Interesse der Leute. Warum also nicht ein paar einfache und klare Bilder verwenden, um es anschaulich zu veranschaulichen?
Prinzip drei: Gewohnheiten sind gute Helfer <br />Gewohnheiten sorgen für ein reibungsloseres Benutzererlebnis auf der Website, ohne dass zu hohe Lernkosten für das Gewöhnen an neue Interaktionen anfallen. Weibo verfügt über eine solche Interaktion. Wenn die Eingabe leer ist oder die Anzahl der Wörter überschritten wird, muss die Aktionsschaltfläche angeklickt werden und der Hintergrund des Eingabefelds blinkt, um den Benutzer darauf hinzuweisen, dass die Eingabe falsch ist. Da es sich bei beiden um Weibo-Produkte handelt, können ähnliche Interaktionen vollständig wiederverwendet werden. Da Benutzer bereits ein gewisses Verständnis für den Interaktionsmodus der Website haben, ist die entsprechende Übertragung der Kontrollinteraktionen eine gute Möglichkeit, Aufwand zu sparen und gleichzeitig die Konsistenz der Interaktion sicherzustellen. Daher haben wir die blinkende Fehlermeldung dorthin verlagert, wo die Mikrogruppe nicht ausgewählt ist, damit die Benutzer leicht verstehen, was als Nächstes zu tun ist.
Prinzip 4: Sofortige Verifizierung
 Verwenden Sie keine Dialogfelder, um normalen Inhalt zu melden. Da es sich bei dem Dialogfeld um einen anderen Raum handelt, benötigen Sie einen guten Grund, um dorthin zu gehen. Gleichzeitig müssen Fehler bei der Eingabe des Kontos oder Passworts sofort angezeigt werden, um zu vermeiden, dass Fehler erst nach dem Ausfüllen des Formulars entdeckt werden und unnötige Arbeitsschritte erforderlich werden.
Beim Anmelden im Freigabefenster für die mobile Version ist die Eingabe leer.
Teilen Sie private Nachrichten, filtern Sie Freunde und erhalten Sie rechtzeitig Hinweise
Bubble-Prompt bei Überlauf im Freigabefenster
Prinzip 5: Stellen Sie geeignete Eingabefelder bereit (Textfelder, Optionsfelder, Kontrollkästchen, Dropdown-Menüs, Listenfelder).
Stellen Sie sicher, dass die Länge des Eingabefelds aussagekräftige Hinweise bietet, die den Benutzern das effektive Beantworten der Frage erleichtern. Wenn Sie keinen Hinweis geben können, versuchen Sie, die Länge des Eingabefelds konsistent zu halten und gleichzeitig genügend Platz für die Antwort bereitzustellen.
Die Höhe des Eingabefelds in Weibo-Komponenten (Weibo-Publisher, Weibo-Kommentarfeld, Freigabefenster und andere Komponenten) kann beim Entwurf als für die gesamte Komponente konsistent betrachtet werden.
Das Dropdown-Steuerelement zum Auswählen einer Mikrogruppe wählt basierend auf der maximalen Zeichenanzahl im Mikrogruppennamen eine geeignete Größe (15 chinesische Zeichen) aus. Da zu diesem Zeitpunkt ausreichend Platz vorhanden ist, wird die maximale Länge ausgewählt, um die Anzahl der durch abgeschnittene Zeichen verursachten versteckten Tipps zu verringern.
Prinzip 6: Bieten Sie je nach Fehler unterschiedliche Optionen an. <br />Zuerst müssen wir aus der Designperspektive einige häufige falsche Entscheidungen vermeiden und dann mögliche Fehler auf jeder Ebene aktiv beheben, um sicherzustellen, dass ein höherer Anteil der Benutzer eine positive Erfahrung macht.
Tipps zum Teilen in privaten Nachrichten
Prinzip 7: Nicht alle Links sind gleich. Links müssen nach den Bedürfnissen der Benutzer unterschieden werden. Schwache und starke Links sollten im Frontend angezeigt werden.
Prinzip 8: Verwenden Sie Farben, um Aufmerksamkeit zu erregen, und verwenden Sie Symbole mit einheitlichem Stil. <br />Farben können die Aufmerksamkeit von Menschen auf bestimmte Elemente lenken, insbesondere wenn die Farbe eines bestimmten Elements einen Kontrast zu anderen Farben bildet. Wir markieren wichtige Aktionsschaltflächen mit auffälligeren Farben.
Benutzer bevorzugen grafische Darstellungen gegenüber Text.
Verwenden Sie einheitliche Symbole.
Das Ähnlichkeitsprinzip: Es bedeutet, dass Objekte mit ähnlichen Eigenschaften (wie Größe, Farbe, Form, Ausrichtung usw.) vom Beobachter aus der Perspektive der Wahrnehmung und Erkenntnis zusammengefasst werden.
Das Prinzip der Nähe: Beobachter, die Objekte sehen, die (räumlich oder zeitlich) nahe beieinander liegen, nehmen sie als Ganzes wahr und glauben, dass sie ähnliche Bedeutungen haben.
Prinzip 9: Seien Sie konsequent und berücksichtigen Sie Standards, aber Konsequenz bedeutet nicht Starrheit
 Bei vielen Projekten, insbesondere bei großen Projekten, wird Wert auf Standards gelegt. Damit lässt sich Verwirrung vermeiden, die durch unterschiedliche Interaktionen und Stile aufgrund inkonsistenter Design-Stile verschiedener Designer entsteht. Gleichzeitig spielen Standards auch bei der Versionsübergabe und dem Einstieg neuer Leute eine sehr wichtige Rolle. Die Spezifikationen sind aufschlussreich, aber wir müssen uns nicht an die Einschränkungen der Spezifikationen halten und die Benutzerszenarien ignorieren. Wir müssen die Konsistenz der Site wahren, aber das bedeutet nicht, dass sie starr sein muss. Berücksichtigen Sie vor dem Entwurf die Standards und fragen Sie bei Änderungen nach einer besseren Begründung. Wie in der folgenden Abbildung gezeigt, werden die Bedientasten der Komponente ausgegraut, wenn sie die Fokusbedingungen nicht erfüllen, und es wird eine erzwungene Klickaufforderung angezeigt, z. B. zum Teilen. Bei der Gestaltung des Kommentarfelds haben wir jedoch berücksichtigt, dass der Kommentarinhalt vollständig von den Benutzern stammt und einen gewissen Eingabeaufwand verursacht. Wir möchten die Nutzer zum Kommentieren anregen. Zu diesem Zeitpunkt sollte die Bedientaste aktiviert werden, um die Bedienung durch den Benutzer anzuregen.
Verbessern Sie das visuelle Markenerlebnis
 Bei dieser umfassenden optischen Überarbeitung wurden Meinungen und Anforderungen aus unterschiedlichen Blickwinkeln, unter anderem von Produkten und Benutzern, berücksichtigt. Der Vorschlag verlief jedoch nicht so reibungslos wie erwartet. Während des Projekts haben wir auch viele Flugzeugentwürfe gemacht. Beispielsweise haben wir aufgrund der anfänglichen Abweichung bei der visuellen Positionierung der Mikrokomponenten beim Blick auf die an Weibo angeschlossenen externen Komponenten einfach versucht, einen einheitlichen Weg einzuschlagen. Das Versäumnis, den Status Quo zu durchbrechen und hart zu arbeiten, führte dazu, dass viele Zwischenpläne im Sande verliefen. Mittelfristig griff das Markenteam @王史撞Strong ein, lernte aus Erfahrungen und Erkenntnissen und organisierte die visuelle Positionierung und den Stil der Mikrokomponenten neu.
Stilwörter: Weibo; jung; Plattform;
Standardfarben: rot, orange
Markenspezifikationen:
Hilfsgrafiken :
Sekundärgrafiken sind ein integraler Bestandteil eines Markenidentitätssystems. Das einfache Dreieck ist dem Steuerkreuz des Logos entnommen. Durch die zufällige Kombination wird die Kompatibilität und Skalierbarkeit von Zusatzgrafiken maximiert. Geben Sie dem Anwendungsdesign maximale Freiheit. Das sogenannte Wiedererkennen ist besser als das Erinnern. Das Wiedererkennen von Dingen ist stärker als das Erinnern von Dingen.
Beispiele für Hilfsgrafikanwendungen:
Eleganterer Code Die vorherigen Komponenten wurden entsprechend der Codeform in Iframe und JS-SDK unterteilt. Da das Produkt ständig iteriert und aktualisiert wird, können Websites von Drittanbietern keine Produktaktualisierungen durch Aufrufen von js-sdk-Code erhalten, was bei der Produktoptimierung viele Wartungsprobleme mit sich bringt. Gleichzeitig ist das Codefeld von js-sdk im Hinblick auf die Leistung im Allgemeinen länger. Dies liegt daran, dass die Iframe-Komponente den Code in ein Paket kapselt, das von Dritten direkt aufgerufen werden kann. Während der Code von js-sdk vollständig auf einer Ebene liegt, wirkt sich zu langer Code entsprechend auf das Website-Erlebnis aus. Vor diesem Hintergrund ist WBML entstanden. Was ist WBML?
 WBML (Weibo Markup Language) ist eine einfache Auszeichnungssprache, die von Sina Weibo JSSDK entwickelt wurde. Sie ermöglicht es Benutzern, Weibo-Komponenten (Weibo-Widgets) mithilfe von WBML in Webseiten einzubetten. Sie können auch weiterhin Iframe- oder JS-Aufrufmethoden verwenden, die weiterhin unterstützt werden.
Einfach ausgedrückt handelt es sich um eine Zeile JS-Code, die eine Codezeile zitiert (d. h. den Iframe darin einschließt).
Warum WBML verwenden?
Bequeme und einfache Methode zur Codebereitstellung: Eine Codezeile kann die Methode zur semantischen Parameteranpassung von Komponenten-Tags aufrufen, was bequemer zu verwenden ist.
Beispiel für eine bessere Ladegeschwindigkeit als Iframe Am Beispiel der am häufigsten verwendeten Schaltfläche „Teilen“ lautet die aktuelle Aufrufmethode:
  1. <script charset="utf-8" type="text/javascript">// <![CDATA[ (function(){
  2. var _w = 72, _h = 16;
  3. var param = {
  4. url:Standort.href,
  5. Typ: '3',
  6. count:'1', /**Gibt an, ob die Anzahl der Aktien angezeigt werden soll, es wird 1 angezeigt (optional)*/
  7. appkey:'', /**Der Appkey der Anwendung, für die Sie sich beworben haben, mit Angabe der Freigabequelle (optional)*/
  8. Titel:'', /**Gemeinsamer Textinhalt (optional, standardmäßig der Titel der Seite)*/
  9. pic:'', /**Pfad zum Teilen des Bildes (optional)*/
  10. ralateUid:'', /**Verknüpfe die UID des Benutzers, teile das Microblog mit dem @Benutzer (optional)*/
  11. Sprache: 'zh_cn', /**Sprache festlegen, zh_cn|zh_tw (optional)*/
  12. rnd: neues Datum().Wert von()
  13. }
  14. vartemp = [];
  15. für(var p in param){
  16. temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
  17. }
  18. Dokument.schreiben('<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>')
  19. })()
  20. // ]]></Skript>
Nach der Verwendung von WBML kann eine Codezeile aufgerufen werden:
  1. <wb:Teilen-Schaltfläche></wb:Teilen-Schaltfläche>
Ändern Sie die Parameter und übergeben Sie sie als Tags
  1. <wb:share-button language="zh_tw"></wb:share-button>
Abschließend möchte ich @Eason-Shao für seine Anleitung danken, @阿bingben @王史撞Strong @刘明 für ihre meisterhaften Designs, @青春的猴小野 @ice木木 für ihre fantastischen Webseiten und die Produktentwickler auf göttlichem Niveau.
Quelle: Weibo UDC

<<:  Implementierung des MySQL Shell import_table-Datenimports

>>:  CSS steuert den Abstand zwischen Wörtern durch die Eigenschaft „letter-spacing“

Artikel empfehlen

Implementierung einer einfachen Web-Uhr mit JavaScript

Verwenden Sie JavaScript, um eine Webseitenuhr zu...

uniapp Beispielcode zur Implementierung der globalen Freigabe von WeChat-Miniprogrammen

Inhaltsverzeichnis Erstellen einer global freigeg...

Verwenden Sie CSS3, um den Code für dynamische Spezialeffekte beim Hovern von Schaltflächen zu implementieren

Wir haben vorgestellt, wie man mit den CSS3-Spalt...

So ändern Sie die Kodierung der MySQL-Datenbank in utf8mb4

Die utf8mb4-Kodierung ist eine Obermenge der utf8...

Einführung in Kubernetes (k8s)

Ich wollte schon immer Kubernetes lernen, weil es...

So implementieren Sie die Docker-Volume-Montage

Die Erstellung des einfachsten „Hello World“-Ausg...

MySQL-Abfrageanweisung nach Zeit gruppiert

MySQL-Abfrage nach Jahr, Monat, Woche, Tagesgrupp...

So sichern Sie MySQL-Kontoinformationen elegant

Vorwort: Ich bin kürzlich auf das Problem der Ins...

Tomcat-Quellcodeanalyse und -Verarbeitung

Inhaltsverzeichnis Vorwort 1. Endpunkt 2. Verbind...

Linux-Installation Apache-Server-Konfigurationsprozess

Bereiten Sie die Taschen vor Installieren Überprü...

Binäre Installation von MySQL 5.7.23 unter CentOS7

Die Installationsinformationen im Internet sind u...

Beispiel für eine Formatierungsmethode für Datum und Uhrzeit in js

js Datums-/Zeitformat Konvertieren Sie Datum und ...

Native JS realisiert den besonderen Effekt der Verbreitung von Liebe durch Mausbewegungen

In diesem Artikel wird ein JS-Spezialeffekt vorge...

Tutorial zum Upgrade von Centos7 auf Centos8 (mit Bildern und Text)

Wenn Sie ein Upgrade in einer formalen Umgebung d...

CSS3 realisiert den grafischen Fallanimationseffekt

Sehen Sie zuerst den Effekt Implementierungscode ...