Kommentar: In diesem Artikel wird der gesamte Prozess der Entwicklung von Netease Weibo mit HTML5 vorgestellt
HTML5 wird von Internet -Entwicklungsteams im In- und Ausland zunehmend bevorzugt. In Foreign, Google entwickelt den Chrome Web Store begeistert, Microsoft hat eine irische Spring -Themenwebsite veröffentlicht, die die Entwicklung der HTML5 -Technologie unterstützt, und Nokia hat stark in den Kauf und den Aufbau von Nokia Map Business investiert. Inländische Internetgiganten interessieren sich auch für die neuen Webentwicklungsstandards, die aus dem Ozean geblasen wurden, und haben begonnen, die HTML5 -Produkte zu testen.Das iPhone -Plattform -Web -App -Produkt von Netase Weibo wurde im ersten Quartal 2012 erfolgreich auf den Markt gebracht. Jetzt werde ich die Erfahrungen und Lektionen aus dieser Projektentwicklung mit Ihnen teilen und hoffe, mit Ihnen in der HTML5 -Entwicklungsumgebung zusammenzuwachsen.
Personal
1. Entwicklerkonfiguration
Produktmanager: 1 Person;
Interaktionsdesigner: 1;
Visueller Designer: 1;
Front-End-Ingenieur: 1;
Backstage -Ingenieure: 2;
Tester: 1 Person.
2. Entwicklungszeit
Interaktionsdesigner: 22 Arbeitstage;
Visueller Designer: 14 Arbeitstage;
Front-End-Ingenieur: 50 Arbeitstage;
Backend Engineer: Aufgrund der Verwendung der ursprünglichen Backend-Daten müssen Sie nur mit dem Front-End-Ingenieur zusammenarbeiten, um die Daten aufzurufen
Unter ihnen verwenden Interaktion und Front-End die längste Zeit im gesamten Entwicklungszyklus.
Netease Weibo Web App -Entwicklungsprozess
1. Arbeiteranforderungen Planung: Unterscheidet sich vom Web- und lokalen Kunden
Verantwortliche Person: Produktmanager; Teilnehmer: Interaktionsdesigner
Die Netase Weibo -Web -App (alle beziehen sich auf Mobiltelefone in diesem Artikel) unterscheidet sich von Webprodukten und unterscheidet sich auch von lokalen Kunden.
1. Im Vergleich zum Web hat Netase Weibo Web App starke Vorteile wie Mobilität und medienreicher und benachteiligte Vorlagen wie kleiner Informationspräsentationsraum und tiefe Informationsarchitektur. Die Nutzungssituationen der beiden sind unterschiedlich. Weibo Web wird hauptsächlich temant unter reichlich Zeit und überlegenen Netzwerkbedingungen verwendet. Weibo -Web -Apps werden hauptsächlich unter trivialen Zeit- und Netzwerkbedingungen für ungleichmäßige Qualität verwendet.
Daher sollte die Netase -Weibo -Web -App die großen und vollständigen Funktionen vermeiden und die Funktionen extrahieren und auswählen müssen, die von Benutzern in der mobilen Umgebung aus dem Web am häufigsten verwendet werden, und die Funktionen der Mobilfunkanforderungen hinzufügen (wie die lokalisierte Servicefunktion wird in der Iterationsphase berücksichtigt).
2. Im Vergleich zu lokalen Kunden hat die Netase -Weibo -Web -App die Vorteile ohne Installation, einfaches Upgrade, niedrige Entwicklungskosten und anpassungsfähiges Layout. Es hat auch die Vorteile einer langsamen Reaktionsgeschwindigkeit, geringen Berechtigungen für das Abrufen von Mobiltelefon -nativen Steuerelementen und leicht schwache Stabilität.
Basierend auf den Vor- und Nachteilen der beiden muss die Netase Weibo Web App mit der hochwertigen Erfahrung lokaler Kunden einholen und versuchen, leicht und schnell zu gewährleisten.
Kurz gesagt, die Funktionen der Web -App können raffinierter sein als die von Web- und lokalen Kunden, wodurch die wichtigsten Anforderungen von Benutzern in mobilen Umgebungen erfüllt werden.
Netase Weibo -Web -App -Funktionsplanung, wie unten gezeigt:
2. Design -Architektur -Design: so flach und schmal wie möglich
Verantwortliche Person: Interaktionsdesigner; Teilnehmer: Produktmanager
Personen, die mobile Internetprodukte hergestellt haben, müssen wissen, warum die Informationsarchitektur so flach und eng wie möglich sein muss. Der Hauptgrund ist der kleine und teure Ausstellungsraum des Mobiltelefons. Die Informationsarchitektur des lokalen Kunden des Mobiltelefons muss flach und eng sein, und Web -Apps benötigen dies noch mehr, da auf der Seite des Browsers immer eine untere Symbolleiste des Browsers vorhanden sind und ein kleines Stück des bereits beengten Displays weggefressen sind. Wie in der Abbildung unten gezeigt:
Die Browser-Symbolleiste am Ende des Mobiltelefonbildschirms ist für Web-App-Produkte sehr nutzlos: Die Web-App selbst ist eine Closed-Loop-Anwendung und benötigt nicht die Browser-Symbolleiste. Auch wenn es sich nicht auf die große Informationsarchitektur auswirkt, wird es den wertvollen Ausstellungsraum untergraben und einen wichtigen Einfluss auf das Design des Navigationssystems haben (dieser Teil wurde kurz im vorherigen Artikel "Diskussion über die Navigationsdesign der iPhone -Web -App" analysiert).
WebJX -Artikel Einführung: Netase Weibo, Die tatsächliche Entwicklung von HTML5.
3. Interaktionsdesign: Einfach und effizient
Verantwortliche Person: Interaktionsdesigner; Teilnehmer: Produktmanager, visueller Designer, Front-End-Ingenieur, Back-End-Techniker
Interaktionsdesign -Konzept:
Das spezifische Interaktionsdesign -Konzept dieses Produkts stammt aus: Benutzernutzungsszenario -Umfrage, Wettbewerbsanalyse, Forschungsstatus der Web -App und die eigenen Anforderungen von Weibo Web App. Die schließlich zusammengefassten Interaktionsdesignkonzepte sind hauptsächlich:
1.. Verbesserte Leichtigkeit der Suche:
Stärkung der globalen Navigation, schneller Rückkehr zur Homepage, regelmäßige gemeinsame Operationen, zeitnahe Animationsdemonstrationen, einfaches und klares Webseitenlayout usw.
2. Verbesserung der Nutzungseffizienz
Reduzieren Sie die Informationsarchitekturstufe, geben Sie einen geeigneten Kurzschlussschlüsseleintrag, stellen Sie sichere Berührungsbereiche sicher, berücksichtigen Sie die Surfengewohnheiten von Benutzern, geben Sie den Kernfunktionen Priorität, beseitigen Sie unnötige visuelle Rauschen usw.
3.. Intelligentere und rücksichtsvollere
Es unterstützt den Offline -Gebrauch, die automatische Ausfüllung von Informationen bei der Bearbeitung nach unerwarteter Unterbrechung, vorsichtiger Verwendung von Warnboxen, Unterstützung bei der Implementierung von Suchvorschlägen, Symbollänsten für aktuelle Aufgabenanforderungen, aktives und effektives Feedback usw.
4. Verbesserung der Aufgabenkonzentration
Einsatzbetriebspfad, zeitnah versteckte Registerkarte Navigation, Beseitigung von Interferenzfaktoren, nicht verfügbare Schaltfläche Graustufenanzeige, Maximierung der Aufgabenseite, keine Funktionsminimierung usw.
5. Plattformkonsistenz:
Sehen Sie es sich jetzt an, klicken Sie darauf, listen Sie die IOS-Plattform an, drücken Sie die Bildschirmanimation während der Vorwärts- und Rückgabeoperationen, die modale Ansicht der iOS-Plattform, Warnboxen, einberufungsbedingte Bedienelemente, einfache und klare Sprunglogik usw.
Das interaktive Designkonzept in dieser Phase ist nicht mehr nur ein Konzept, sondern eher eine spezifische Entwurfsanleitung für das Web -App -Produkt. Die Design -Implementierungsmethode, die das schöne Designkonzept trägt, ist eine wichtige Implementierung in der Designforschungsphase.
Es gibt viele Designinhalte und Details. Hier werden wir nur ein Detail aufnehmen, das Sie mit Ihnen teilen können:
Verbesserte Leichtigkeit der Suche - Verbesserte globale Navigation
Im Vergleich zum ursprünglichen WAP -Weibo ist die feste Existenz der globalen Navigationsleiste eine große Veränderung. Lassen Sie uns kurz die Gründe dafür analysieren:
- Was ist die Nutzungsumgebung des Benutzers? - Mobile Situationen im Freien (z. B. in der U -Bahn oder in der Schlange) oder im Innen -Leerlauf (z. B. durch Surfen von Weibo vor dem Schlafengehen);
–Was ist der Zweck des Benutzers auf diese Seite? -Browse Weibo;
–Was die üblichen Aktionen, die Benutzer auf dieser Seite verwenden? - Ziehen Sie nach unten, um neue Informationen zu lesen, oben zu lesen, und klicken Sie auf andere Registerkarten, um Sprung durchzuführen.
- Was sind die Vorteile, wenn die globale Navigationsleiste oben festgelegt ist? - Für Benutzer bequem, nach oben zurückzukehren, für Benutzer bequem neue Informationen laden, für Benutzer die Registerkarte für Benutzer zu wechseln, und ein starkes Gefühl für globale Kontrolle hat.
- Was sind die Nachteile, wenn die globale Navigationsleiste oben festgelegt ist? -Swalabische Informationen zum Anzeigen von Informationen
……………
Während der Verwendung des Benutzers ist das Verhalten von Pinning, Erfrischung und Schalttabellen auch ein relativ häufiges Verhalten, und die Bequemlichkeit des Betriebs muss sichergestellt werden. Die feste globale Navigationsleiste kann diese Anforderung erfüllen: Klicken auf die Home -Taste kann überschritten und aktualisiert werden, wodurch die Benutzer die Registerkarte wechseln können. Gleichzeitig kann die feste globale Navigationsleiste den Benutzern ermöglichen, klar zu wissen, wo sie sich befinden und wohin sie gehen können, und geben den Benutzern ein starkes Gefühl der globalen Kontrolle.
4. Visuelles Design: Experiment mit frischem Stil
Verantwortliche Person: visueller Designer; Teilnehmer: Produktmanager, Interaktionsdesigner, Front-End-Ingenieur
Die Bestimmung des visuellen Stils der Netase -Weibo -Web -App wurde in mehreren Blickwinkeln besprochen:
1. Sollten wir den Farbton im Einklang mit dem lokalen Kunden von Netease Weibo übereinstimmen?
Produkte müssen auf verschiedenen Plattformen eine gewisse Konsistenz aufrechterhalten, und der Farbstil ist auch ein wichtiger Bestandteil der Bildungsprodukttemperament. Müssen wir also Skins verwenden, die dem lokalen Kunden von NetEase Weibo ähneln? Die Hauptfarbe des lokalen Kunden von Netease Weibo ist rot.
Die Analyse ist wie folgt:
–Die Vorteile der Verwendung dieses Rotes sind: stärkere Produktkonsistenz; Das von Rot gebildete Produkttemperament ist energischer.
-Der Nachteil der Verwendung dieses Rotes besteht darin, dass der rote Bereich im Vergleich zum Weibo-Gehalt leicht auffällig ist, und die immersive Lektüre ist schwieriger zu erreichen.
Mithilfe der Netase -Weibo -Web -App über den Safari -Browser unterscheidet sich der endgültige visuelle Effekt von der der lokalen Kunden, dass die Browser -Symbolleiste immer eine Reihe von Platz am Ende des Bildschirms belegt. Rot ist eine relativ laute Farbe, während die Symbolleiste des Browsers blau und grau ist, was relativ leise ist. Die große Kluft zwischen diesen beiden Farben macht die Brille extrem unangenehm.
Basierend auf der obigen Analyse ist es nicht geeignet, die rote Farbe des lokalen Kunden zu verwenden.
WebJX -Artikel Einführung: Netase Weibo, Die tatsächliche Entwicklung von HTML5.
2. Was hat der Einfluss des Laufens im Safari -Browser?
Die Netase -Weibo -Web -App wird aus dem Safari -Browser ausgeführt und angezeigt, der eine der Umgebungen für dieses Produkt ist. Die Webseite verleiht den Menschen ein leichtes und optimiertes Gefühl, während der lokale Kunde den Menschen ein schweres und stabiles Gefühl verleiht.
Daher ist ein leichter visueller Stil eine gute Wahl.
3.. Aktuelle Trends zum visuellen Stil
Der frische Stil, der von der UI und Google+ unter der Leitung von Metro -UI und Google+ zu einem bedeutenden Trend für den visuellen Stil entwickelt wurde. Nach einer Zeit exquisiter und komplexer visueller Erfahrung kehrte ich wieder in die Einfachheit zurück und der frische visuelle Stil begann populär.
Die visuellen Designer haben also mehrere visuelle Versuche ausprobiert, darunter rot, kühl schwarz und frisch hellgrau. Nach dem Vergleich von mehreren Parteien waren sich alle einig, dass die frische und hellgraue Farbe war. Frisch und hellgrau sind die Hauptfarbe, und das auf das Symbol angeklickte Zustand ist der rot, der üblicherweise von Netease verwendet wird, was die Konsistenz des visuellen Stils bis zu einem gewissen Grad aufrechterhält.
5. Front-End-Entwicklung: Die Tricks brechen
Verantwortliche Person: Front-End-Ingenieur; Teilnehmer: Produktmanager, Interaktionsdesigner, visueller Designer, Back-End-Techniker
Wenn Sie diesen Teil erreichen, sind Sie möglicherweise mehr besorgt darüber, wie der spezifische Code aussieht und wie das Implementierungsframework ist? Tut mir leid, die Produktgeheimnisse, die am Unternehmen beteiligt sind, und der spezifische Implementierungscode kann nicht für alle angezeigt werden. Verzeihen Sie mir!
Hier wählen wir die Fragen von 2 Internetnutzern, um kurz zu beantworten:
Frage 1: Können Sie über die Front-End-Architektur sprechen? Warum wird Sencha nicht verwendet?
Antwort: Da Sencha Touch 1.x/2.x, Jquery Mobile usw. nicht ideal für Anpassungen, Leistung und Ressourcenverbrauch ist, hat Netase Front-End ein eigenes Rahmen entwickelt. Wie Sie sagten, verwendet es SeaJs, um das Laden des Skripts zu bewältigen, und Iscroll simuliert das Scrollen. Es scheint, dass der Effekt immer noch gut ist. Das Front-End von Netase wird diesen Rahmen weiter verbessern.
Frage 2: Können Sie Bilder aufnehmen und Bilder hochladen?
iPhone Safari erteilt keine Erlaubnis zum Abrufen von Kameras und Galerien, sodass diese Anforderung noch nicht erfüllt ist. Übrigens, wenn Android Berechtigungen erteilt, wird es zu diesem Zeitpunkt definitiv diesen dringenden Bedarf erfüllen.
6. Follow-up-Arbeit
Die anschließende Arbeit beinhaltet hauptsächlich interaktive Inspektion, visuelle Inspektion, QA -Tests, Zusammenfassung und Feedback, um Probleme nach dem Start und Planung für die nächste Iteration zu beheben. Jeder versteht den Projektprozess, daher werde ich nicht viel sagen.
Daraus gezogene Lektionen
1. Gefühle über den Workflow
1. Werden Sie ein hervorragendes Erlebnisdesign als Leitfaden.
Dieses Projekt ist ein typisches Beispiel für designorientiertes Ansatz. Erstens gibt es Desigern genügend Zeit und Platz zum Spielen, während die Technologie kontertackt werden kann. Diese funktionierende Idee ist der Eckpfeiler des gesamten Produkts, um eine gute Benutzererfahrung zu sammeln. Die HTML5 -Technologie ist leistungsstark und hat zu viele Möglichkeiten. und Design soll diese technischen Möglichkeiten in Formen formen.
2. Produktmanager, Interaktion, Vision, Front-End-Kommunikation zeitnah und häufig
Während des gesamten Projekts halten Produktmanager, Interaktionsdesigner, visuelle Designer und Front-End-Ingenieure jede Woche ein Meeting ab. Später wurde bewiesen, dass diese häufige Kommunikation die Nacharbeit und eine verbesserte Entwicklungseffizienz erheblich reduzierte.
3. Laufen Sie schnell mit kleinen Schritten und konzentrieren Sie sich auf die Iteration.
Netase -Weibo -Produkte sind relativ komplex und der Entwicklungsfortschritt von HTML5 ist relativ langsam und die Arbeitskräfte sind begrenzt. Es ist unmöglich, alle funktionalen Details abzuschließen und gleichzeitig online zu gehen. Andernfalls dauert es einen Monat, um später zu debuggen, und verleiht der raschen Entwicklung des Produkts eine schwere Belastung. Daher wurde es zu einer unvermeidlichen Entscheidung, in der ersten Ausgabe nur die Kernfunktionen zu erfüllen.
2. Benutzererfahrung
1. Das Navigationssystem ist am oberen Rand des Bildschirms besser geeignet.
Die Symbolleiste des Browsers gab es immer, wodurch die Registerkartennavigationsleiste nicht mehr geeignet sind, um am unteren Bildschirmrand zu fixieren, und die Oberseite ist besser geeignet.
2. Die Bequemlichkeit ist wichtiger, und die am häufigsten verwendeten Funktionen sind geschickt eingestellt.
Aufgrund der Produktleistung und der Browserleistung sind die aktuelle Web -App -Fluency und die Sprunggeschwindigkeit immer noch nicht mit nativen Apps vergleichbar und die Sprungkosten sind etwas höher. Daher ist es notwendig, die am häufigsten verwendeten Funktionen näher an Benutzer zu bringen, um die durch Sprüngen verursachten Wartekosten zu senken.
3. Der visuelle Entwurf ist ein Gleichgewicht zwischen Ästhetik und Einfachheit. Die meisten visuellen Entwürfe müssen mit Code implementiert werden.
Fast alle Visionen werden über Code implementiert, und es ist am besten, nicht zu kompliziert für das visuelle Design zu sein. Es dauert auch Zeit für Front-End-Ingenieure, um visuelle Entwürfe zu verdauen.
3. Verständnis der technischen Implementierung
1. Die Berechtigungsbeschränkungen des Safari -Browsers, Web -App kann keine Kamera -Tools aufrufen und unterstützt die Image -Upload -Funktion nicht.
Dies ist Kopfschmerzen und eine hilflose Sache. Die Berechtigungen des iOS -Systems für die Web -App sind zu niedrig. Im Gegensatz dazu kann die Web -App des Android -Systems Kamera -Steuerelemente abrufen und auch die Funktion des Weibo -Image -Uploads unterstützen (aber die Android -Version wurde noch nicht entwickelt).
2. Cutscene können wie lokale Kunden keine glatten Effekte erzielen.
Die Gründe sind: Gute Zwischensequenzen werden die Leistung des Produkts untergraben; Die HTML5 -Technologie ist nicht so perfekt und reif. Es gibt immer noch einen mächtigen Browser.
Zusammenfassung
Zusätzlich zu den Erlaubnisproblemen des iOS -Systems liegt die hervorragende Leistung der Web -App nahe an der der nativen App. Die HTML5 -Technologie hat WAP -Webseiten ein neues Leben vergeben und störende Änderungen in WAP gebracht. In HTML5 -Projekten eignet sich die Funktionsplanung am besten zur Verfeinerung. Die Informationsarchitektur muss so flach und eng wie möglich sein. Interaktionsdesign muss nach Einfachheit und Effizienz streben. Visuelles Design berücksichtigt auch die spezielle Betriebsumgebung des Browsers. Das Front-End muss nicht nur allmählich Interaktionsdesign und visuelles Design verdauen, sondern auch mutig versuchen, neue Technologien und neue Probleme entgegenzuwirken. Eine häufige Kommunikation zwischen dem gesamten Team ist sehr notwendig, und es ist am besten, kleine Schritte zu unternehmen und schnelle Entwicklungsschritte auszuführen.
Mit begrenzten Arbeitskräften und Energie gibt es unvermeidlich Vorurteile. Jeder ist herzlich vielfältig! Ich freue mich darauf, dieses interessante Thema mit Ihnen zu diskutieren.