Commentaire: Cet article présente l'ensemble du processus du développement de NetEase Weibo avec HTML5
HTML5 est de plus en plus favorisé par les équipes de développement Internet au pays et à l'étranger. Foreign, Google développe avec enthousiasme la boutique en ligne Chrome, Microsoft a publié un site Web de thème Irish Spring qui prend en charge le développement de la technologie HTML5, et Nokia a investi massivement dans l'achat et la création de Nokia Map Business. Les géants nationaux de l'Internet sont également intéressés par les nouvelles normes de développement Web explosées de l'autre côté de l'océan et ont commencé à tester les produits HTML5.Le produit d'application Web de la plate-forme iPhone de NetEase Weibo a été lancé avec succès au premier trimestre de 2012. Maintenant, je partagerai avec vous les expériences et les leçons apprises de ce développement de projet, et j'espère que vous grandirai avec vous dans l'environnement de développement HTML5.
Dotant
1. Configuration du développeur
Chef de produit: 1 personne;
Concepteur d'interaction: 1;
Designer visuel: 1;
Ingénieur frontal: 1;
Ingénieurs dans les coulisses: 2;
Testeur: 1 personne.
2. Temps de développement
Concepteur d'interaction: 22 jours ouvrables;
Designer visuel: 14 jours ouvrables;
Ingénieur frontal: 50 jours ouvrables;
Ingénieur backend: En raison de l'utilisation des données backend d'origine, vous n'avez qu'à coopérer avec l'ingénieur frontal pour appeler les données
Parmi eux, l'interaction et le front-end utilisent le plus de temps de tout le cycle de développement.
Processus de développement des applications Web NetEase Weibo
1. Planification des exigences fonctionnelles: différente du Web et des clients locaux
Personne en charge: chef de produit; Participant: concepteur d'interaction
L'application Web NetEase Weibo (toutes référence aux téléphones portables de cet article) est différente des produits Web et est également différente des clients locaux.
1. Comparé au Web, l'application Web NetEase Weibo présente de forts avantages tels que la mobilité et les médias, et présente des inconvénients tels que l'espace de présentation de petites informations et l'architecture d'information profonde. Les situations d'utilisation des deux sont différentes. Le Web Weibo est principalement utilisé de manière immersive dans un temps abondant et des conditions de réseau supérieures; Les applications Web Weibo sont principalement utilisées dans des conditions de temps trivial et de réseau de qualité inégale.
Par conséquent, l'application Web NetEase Weibo devrait éviter les fonctions grandes et complètes et doit extraire et sélectionner les fonctions les plus couramment utilisées par les utilisateurs de l'environnement mobile sur le Web, et ajouter des fonctions de besoins uniques du côté mobile (telles que la fonction de service localisée sera prise en compte dans l'étape d'itération).
2. Comparé aux clients locaux, l'application Web NetEase Weibo présente les avantages d'aucune installation, de mise à niveau simple, de coût de développement faible et de mise en page adaptable. Il présente également les avantages d'une vitesse de réponse lente, de faibles autorisations pour récupérer les commandes natives du téléphone mobile et une stabilité légèrement faible.
Sur la base des avantages et des inconvénients des deux, l'application Web NetEase Weibo doit rattraper l'expérience de haute qualité des clients locaux et essayer de s'assurer léger et rapide.
En un mot, les fonctions de l'application Web peuvent être plus raffinées que celles des clients Web et locaux, répondant aux besoins les plus essentiels des utilisateurs dans les environnements mobiles.
Planification des fonctions de l'application Web NetEase Weibo, comme indiqué ci-dessous:
2. Conception d'architecture de l'information: aussi peu profonde et étroite que possible
Personne en charge: concepteur d'interaction; Participant: chef de produit
Les personnes qui ont fabriqué des produits Internet mobiles doivent savoir pourquoi l'architecture de l'information doit être aussi superficielle et étroite que possible. La principale raison est l'espace d'affichage petit et coûteux du téléphone portable. L'architecture de l'information du client local du téléphone mobile doit être superficielle et étroite, et les applications Web en ont encore plus besoin, car il y a toujours une barre d'outils inférieure du navigateur dans la page du navigateur, provoquant un petit morceau de l'espace d'affichage déjà exigu. Comme indiqué dans la figure ci-dessous:
La barre d'outils du navigateur en bas de l'écran du téléphone mobile est très inutile pour les produits d'application Web: l'application Web elle-même est une application en boucle fermée et ne nécessite pas la barre d'outils du navigateur. Même si cela n'affecte pas la grande architecture de l'information, il érodera le précieux espace d'affichage et aura un impact important sur la conception du système de navigation (cette partie a été brièvement analysée dans l'article précédent "Discussion sur la conception de la navigation de l'application Web iPhone".).
Introduction de l'article WebJX: NetEase Weibo, le développement réel de HTML5.
3. Conception d'interaction: simple et efficace
Personne en charge: concepteur d'interaction; Participants: chef de produit, concepteur visuel, ingénieur frontal, technicien back-end
Concept de conception d'interaction:
Le concept de conception d'interaction spécifique de ce produit provient de: sondage sur le scénario d'utilisation des utilisateurs, l'analyse des concurrents, l'état de recherche sur les applications Web et les propres exigences de Weibo Web App. Les concepts de conception d'interaction finalement résumés sont principalement:
1. facilité de recherche améliorée:
Renforcement de la navigation globale, retour rapide à la page d'accueil, opérations communes régulières, démonstrations d'animation opportune, mise en page simple et claire de la page Web, etc.
2. Améliorer l'efficacité de l'utilisation
Réduisez le niveau d'architecture de l'information, donnez une entrée appropriée à la clé de raccourci, assurez-vous des zones tactiles sûres, envisagez des habitudes de navigation des utilisateurs, donnez la priorité aux fonctions de base, éliminez le bruit visuel inutile, etc.
3. Plus intelligent et prévenant
Il prend en charge l'utilisation hors ligne, le remplissage automatique des informations dans l'édition après une interruption inattendue, l'utilisation prudente des boîtes d'avertissement, l'assistance dans la mise en œuvre des suggestions de recherche, les barres d'outils organisées pour les besoins en tâche actuels, les commentaires actifs et efficaces, etc.
4. Améliorer la concentration de la tâche
Chemin de fonctionnement à une seule tâche, navigation d'onglet cachée en temps opportun, éliminer les facteurs d'interférence, affichage de niveaux de gris de bouton non disponible, maximisation de la page de tâche, aucune minimisation de fonction, etc.
5. Cohérence de la plate-forme:
Regardez-le maintenant, cliquez dessus, répertoriez la vue de la plate-forme iOS, animation d'écran push pendant les opérations avant et retour, vue modale de la plate-forme iOS, cases d'avertissement, commandes natives d'appel, logique de saut simple et claire, etc.
Le concept de conception interactive à ce stade n'est plus seulement un concept, mais plus un guidage de conception spécifique pour le produit d'application Web. La méthode de mise en œuvre de conception qui porte le magnifique concept de conception est une mise en œuvre importante au stade de la recherche de conception.
Il existe de nombreux contenus et détails de conception, nous ne prendrons ici qu'un seul détail à partager avec vous:
Facilité de recherche améliorée - navigation globale améliorée
Par rapport au WAP Weibo d'origine, l'existence fixe de la barre de navigation mondiale est un grand changement. Analyons brièvement les raisons de cela:
- Quel est l'environnement d'utilisation de l'utilisateur? - Des situations mobiles extérieures (comme dans le métro ou en ligne), ou un état d'inactivité intérieur (comme parcourir Weibo avant d'aller se coucher);
- Quel est le but de l'utilisateur à venir sur cette page? -Browse Weibo;
- Quelles sont les actions courantes que les utilisateurs utilisent sur cette page? - Tirez vers le bas pour lire, en haut et charger de nouvelles informations, cliquez sur d'autres onglets pour effectuer le saut;
- Quels sont les avantages si la barre de navigation mondiale est fixée en haut? - pratique pour les utilisateurs pour revenir en haut, pratique pour les utilisateurs pour charger de nouvelles informations, pratique pour les utilisateurs pour changer les onglets et a un fort sentiment de contrôle global;
- Quels sont les inconvénients si la barre de navigation mondiale est fixée en haut? -Aswal aux précieux espaces d'affichage d'informations
…………
Pendant l'utilisation de l'utilisateur, le comportement des onglets d'épinglage, de rafraîchissement et de commutation est également un comportement relativement fréquent, et la commodité de l'opération doit être assurée. La barre de navigation globale fixe peut répondre à cette exigence: cliquer sur la touche d'accueil peut être dépassée et actualisée, ce qui peut faciliter les utilisateurs pour changer d'onglets. Dans le même temps, la barre de navigation globale fixe peut permettre aux utilisateurs de savoir clairement où ils se trouvent et où ils peuvent aller, donnant aux utilisateurs un fort sentiment de contrôle mondial.
4. Design visuel: expérience de style frais
Personne en charge: concepteur visuel; Participants: chef de produit, concepteur d'interaction, ingénieur frontal
La détermination du style visuel de l'application Web NetEase Weibo a été discutée sous plusieurs angles:
1. Faut-il garder le ton de couleur cohérent avec le client local de NetEase Weibo?
Les produits doivent maintenir une certaine cohérence sur différentes plates-formes, et le style de couleur est également une partie importante de la formation du tempérament des produits. Avons-nous donc besoin d'utiliser des skins similaires au client local de NetEase Weibo? La couleur principale du client local de NetEase Weibo est rouge.
L'analyse est la suivante:
–Les avantages de l'utilisation de ce rouge sont: la cohérence des produits plus forte; Le tempérament du produit formé par le rouge est plus énergique.
- L'inconvénient de l'utilisation de ce rouge est que la zone rouge est légèrement accrocheuse par rapport à la teneur en Weibo, et la lecture immersive est plus difficile à réaliser;
En utilisant l'application Web NetEase Weibo via le navigateur Safari, l'effet visuel final est différent de celui des clients locaux, que la barre d'outils du navigateur occupe toujours une ligne d'espace au bas de l'écran. Le rouge est une couleur relativement bruyante, tandis que la barre d'outils du navigateur est bleue et gris, ce qui est relativement silencieux. L'énorme écart entre ces deux couleurs rend les verres extrêmement inconfortables.
Sur la base de l'analyse ci-dessus, il ne convient pas d'utiliser la couleur rouge du client local.
Introduction de l'article WebJX: NetEase Weibo, le développement réel de HTML5.
2. Quel est l'impact de la course dans le navigateur Safari?
L'application Web NetEase Weibo est exécutée et affichée à partir du navigateur Safari, qui est l'un des environnements de ce produit. La page Web donne aux gens un sentiment léger et rationalisé, tandis que le client local donne aux gens une sensation lourde et stable.
Par conséquent, le style visuel léger est un bon choix.
3. Tendances de style visuel actuel
Le style frais dirigé par Metro UI et Google+ est devenu une tendance significative de développement de style visuel. Après une période d'expérience visuelle exquise et complexe, je suis revenu à la simplicité et le style visuel frais a commencé à être populaire.
Ainsi, les concepteurs visuels ont essayé plusieurs tentatives visuelles, notamment le rouge, le noir frais et le gris clair frais. Après avoir comparé plusieurs parties, tout le monde a convenu que la couleur fraîche et gris clair était. Le gris frais et le gris clair est la couleur principale, et l'état de clic icône est le rouge couramment utilisé par NetEase, qui maintient la cohérence du style visuel dans une certaine mesure.
5. Développement frontal: briser les astuces
Personne en charge: ingénieur frontal; Participants: chef de produit, concepteur d'interaction, concepteur visuel, technicien back-end
Lorsque vous atteignez cette partie, vous pouvez être plus préoccupé par le code spécifique et à quoi ressemble le cadre d'implémentation? Désolé, les secrets du produit impliqués dans l'entreprise et le code d'implémentation spécifique ne peuvent pas être affichés à tout le monde. Pardonne-moi!
Ici, nous sélectionnons 2 questions des internautes pour répondre brièvement:
Question 1: Pouvez-vous parler de l'architecture frontale? Pourquoi Sencha n'est-il pas utilisé?
Réponse: Parce que Sencha Touch 1.x / 2.x, JQuery Mobile, etc. ne sont pas idéales pour la personnalisation, les performances et la consommation de ressources, NetEase frontal a développé son propre cadre. Comme vous l'avez dit, il utilise SEAJS pour gérer le chargement du script et Iscroll simule le défilement. Il semble que l'effet soit toujours bon. NetEase front-end continuera d'améliorer ce cadre.
Question 2: Pouvez-vous prendre des photos et télécharger des photos?
iPhone Safari ne permet pas de récupérer des caméras et des galeries, donc cette exigence n'est pas encore satisfaite. Soit dit en passant, si Android donne des autorisations, elle répondra certainement à ce besoin urgent à ce moment-là.
6. Travail de suivi
Les travaux ultérieurs implique principalement une inspection interactive, une inspection visuelle, des tests d'AQ, un résumé et des commentaires pour résoudre les problèmes après son lancement et la planification de la prochaine itération. Tout le monde comprend le processus du projet, donc je ne dirai pas grand-chose.
Leçons tirées de cela
1. Sentiments sur le flux de travail
1. Devenez une excellente conception d'expérience comme guide.
Ce projet est un exemple typique d'approche axée sur la conception. Tout d'abord, il donne aux concepteurs suffisamment de temps et d'espace pour jouer, tandis que la technologie peut être contre-attaquée. Cette idée de travail est la pierre angulaire de l'ensemble du produit pour obtenir une bonne expérience utilisateur. La technologie HTML5 est puissante et a trop de possibilités; Et la conception consiste à façonner ces possibilités techniques en moules.
2. Gestionnaire de produits, interaction, vision, communication frontale en temps opportun et fréquent
Tout au long du projet, les chefs de produit, les concepteurs d'interaction, les concepteurs visuels et les ingénieurs frontaux tiennent une réunion chaque semaine. Il a ensuite été prouvé que cette communication fréquente a considérablement réduit le taux de reprise et amélioré l'efficacité de développement.
3. Exécutez rapidement avec de petites étapes et concentrez-vous sur l'itération.
Les produits NetEase Weibo sont relativement complexes et les progrès du développement de HTML5 sont relativement lents et la main-d'œuvre est limitée. Il est impossible de compléter tous les détails fonctionnels et d'aller en ligne en même temps. Sinon, il faudra un mois pour déboguer plus tard, ajoutant un lourd fardeau au développement rapide du produit. Par conséquent, il est devenu un choix inévitable de ne faire que les fonctions les plus fondamentales du premier numéro.
2. Expérience utilisateur
1. Le système de navigation convient plus en haut de l'écran.
La barre d'outils du navigateur a toujours existé, ce qui rend la barre de navigation à tabules qui ne convient plus à être corrigé en bas de l'écran, et le haut est plus approprié.
2. La commodité est plus importante et les fonctions les plus couramment utilisées sont intelligemment définies.
En raison des performances du produit et des performances du navigateur, la maîtrise de l'application Web actuelle et la vitesse de saut ne sont toujours pas comparables aux applications natives, et le coût de saut est légèrement plus élevé. Par conséquent, il est nécessaire de rapprocher les fonctions les plus couramment utilisées des utilisateurs pour réduire le coût d'attente causé par les sauts.
3. Le projet visuel est un équilibre entre l'esthétique et la simplicité. La plupart des brouillons visuels doivent être implémentés à l'aide du code.
Presque toute la vision est implémentée via le code, et il est préférable de ne pas être trop compliqué pour la conception visuelle. Il faut également du temps aux ingénieurs frontaux pour digérer les brouillons visuels.
3. Compréhension de la mise en œuvre technique
1. Les restrictions d'autorisation du navigateur Safari, l'application Web ne peuvent pas appeler les outils de caméra et ne prend pas en charge la fonction de téléchargement d'image.
C'est un mal de tête et une chose sans défense. Les autorisations accordées au système iOS à l'application Web sont trop faibles. En revanche, l'application Web du système Android peut récupérer les contrôles de la caméra et également prendre en charge la fonction de téléchargement d'image Weibo (mais la version Android n'a pas encore été développée).
2. Les cinématiques ne peuvent pas obtenir d'effets en douceur comme les clients locaux.
Les raisons sont: les bonnes cinématiques éroderont les performances du produit; La technologie HTML5 n'est pas si parfaite et mature; Il y a encore un manque de navigateur puissant.
résumé
En plus des problèmes d'autorisation du système iOS, l'excellente performance de l'application Web est proche de celle de l'application native. La technologie HTML5 a donné aux pages Web WAP une nouvelle vie et a apporté des changements perturbateurs au WAP. Dans les projets HTML5, la planification fonctionnelle est la meilleure pour affiner; L'architecture de l'information doit être aussi superficielle et étroite que possible; La conception des interactions doit viser la simplicité et l'efficacité; Visual Design prend également en compte l'environnement de fonctionnement spécial du navigateur; Le frontal doit non seulement digérer progressivement la conception d'interaction et la conception visuelle, mais aussi avec hardiment de contre-attaque dans les nouvelles technologies et les nouveaux problèmes. Une communication fréquente entre l'ensemble de l'équipe est très nécessaire, et il est préférable de prendre de petites étapes et de faire des étapes de développement rapide.
Avec une main-d'œuvre et une énergie limitées, il y a inévitablement des biais. Tout le monde est le bienvenu pour faire des histoires! Au plaisir de discuter de ce sujet intéressant avec vous.