Githawk: Filaire / profil de conception

Je ne suis pas graphiste, mais peut-être que ceux-ci peuvent déclencher la discussion ici. J'ai essayé de montrer une lente progression possible d'un concept.

Je ferai également remarquer. Je n'aime pas vraiment que les signets soient l'icône centrale de la barre d'onglets. Pour une raison quelconque, je pense que cela devrait être le profil ou la boîte de réception. Mais je n'étais pas vraiment concentré là-dessus

🔥🔥🔥 @Huddie !

Inclure les images suivantes ici pour une référence rapide par rapport à certaines des conceptions actuelles de GitHub. Ce serait cool de trouver de nouvelles sources d'inspiration au-delà de GitHub.

@BrianLitwin Je suis tout à fait d'accord. Je pense que le profil Github est idéal pour le Web mais ne peut pas être bien reproduit sur mobile. Nous devrions chercher l'inspiration à l'extérieur mais essayer de maintenir une interface familière. J'ai essayé de garder la page assez simple pour commencer. Je sais que cela peut être mieux construit plus tard.

Comme les directions! Je pense que nous devrions commencer par ce que devrait être notre hiérarchie de l'information avant d'aller trop loin. Il y a tellement de choses qui pourraient exister sur le profil !

• Avatar
• Nom d'utilisateur
• Afficher un nom
• Bio, localisation, liens
• Organisations
• Dépôts épinglés
• Dépôts
• Les suiveurs suivent
• Étoiles
• Activité

Ensuite il y a des actions à faire :

• Suivre, ne plus suivre
• Partager
• Bloquer, signaler

idée de génie

En faisant un peu de remue-méninges, nous pouvons diviser cela en seaux classés par priorité :

1. OMS?
   une. Identité personnelle
   
   
   
   1. Avatar
   
   
   2. Nom d'utilisateur, nom d'affichage
   
   
   3. Bio
   
   
   4. Localisation, employeur, liens
   
   
   5. Étoiles
      
      b. Identité réseau
   
   
   6. Suiveurs
   
   
   7. Suivant
   
   
   8. Référentiels
   
   
2. Que font-ils?
   une. Organisations
3. Qu'ont-ils fait ?
   une. Dépôts épinglés
   b. Activité

Inspiration

Tirant quelques images de Dribbble qui m'ont attiré:

Voici un fichier de croquis de démarrage que j'ai préparé sur le vol de retour hier. Nous devons nous en tenir au style d'arrière-plan blanc que nous utilisons actuellement pour les problèmes.

Des trucs géniaux ! Je suis terriblement 😍😍😍 pour cette photo à profil centré, cadre circulaire... épurée, élégante, placide. EG dans la conception de Huddie dans # 2127 ou dans Antony Marshal ci-dessus.

Travailler sur le fichier de croquis @rnystrom . Fusionnant certaines de mes pensées originales. @BrianLitwin Je ne vais pas republier mon ancien design car je suis plutôt content que celui-ci prenne sa place.

Ce week-end, j'ai commencé à créer un modèle de document Sketch pour faciliter le wireframing. Comporte des couleurs, du texte et des icônes dans des composants partageables : app.zip

Ce n'est pas totalement complet, mais signalant car cela pourrait aider avec une partie du langage de conception.

cc @cieslakdawid

@Huddie quelques réflexions immédiates :

• Je ne suis pas fan de la conception à profil centré, car elle ne s'adaptera pas bien à l'iPad sans espaces massivement inutilisés. Je suis tout au sujet de la marge de manœuvre, mais je pense que ce sera exagéré lorsqu'il sera mis à l'échelle.
• La conception des boutons n'est pas cohérente avec le reste de l'application :
  
  
  
  • Plusieurs boutons gras/contrastés : pourquoi "Suivants" et "récents" ont-ils le même poids ?
  
  
  • "Following" devrait être "Unfollow" (identique à GitHub.com)
  
  
  • J'admettrai que l'application n'a pas non plus une conception de bouton totalement cohérente. Devrait être un autre modèle que nous ajoutons dans le fichier Sketch et rendre tout cohérent ! Retour à la discussion sur les gradients (peut-être que nous allons utiliser des boutons à gradient complet comme tout GitHub ...)
  
  
• Avons-nous besoin de titres de formulaire pour tout ? par exemple "bio" probablement inutile
• Je veux me débarrasser de la poignée de l'utilisateur dans la vue et en faire simplement le titre de l'élément de navigation

Nous devrions résumer ce que le profil 1.0 sur GitHawk devrait faire.

Quelles sont les actions les plus courantes que l'on effectue lors de la consultation du profil GitHub de quelqu'un ? Pour moi, je vérifie où ils travaillent, trouve leur site Web/coordonnées, ou vois à quel point ils sont "notables" (abonnés, grands projets qu'ils possèdent)

Une fois que nous avons fait cela, nous pouvons nous concentrer uniquement sur les fonctionnalités qui ne satisfont que ces actions et ignorer les autres pour plus tard. Sinon, nous allons ajouter beaucoup de fonctionnalités compliquées qui ne sont pas prioritaires (par exemple, l'activité de contribution).

@rnystrom

• Conception d'iPad
  Je pense que sur iPhone, le look centré est agréable. Je vois ce que tu veux dire par l'iPad qui peut sembler très ouvert. Je n'ai jamais essayé GitHawk sur iPad mais les mises en page sont-elles toujours les mêmes ? Je suggérerais que sur iPad, le nom et la poignée (ou tout ce que nous remplaçons) deviennent horizontalement plutôt que verticalement empilés

• Cohérence des boutons
  J'essayais vraiment de donner un schéma approximatif, je suis sûr qu'il y a plein d'incohérences ATM mais je vais le retoucher si nous suivons ce chemin.

• Titres des formulaires
  Les sections au-dessus du bouton "Suivant" n'ont pas de titre. Je ne pense pas que cela semble génial si certaines sections ci-dessous ont et d'autres non, en essayant de rester cohérent. Je pourrais déplacer la biographie au-dessus de la ligne, mais je pense qu'elle s'intègre mieux en dessous.

• Retrait de la poignée en vue
  Bien sûr, je peux le déplacer hors de vue. Je peux le remplacer par emplacement/email

• Actions les plus courantes
  Je suis d'accord qu'il y en a probablement des communes. Je pense repos épinglé + org. montrer leur travail remarquable. L'activité vous permet de voir ce qu'ils font actuellement. Je pense que suivre/ne plus suivre est essentiel avec le nom + le pseudo et la bio et je pense que des liens rapides vers le dépôt/suivi et les abonnés sont appropriés plutôt que de les afficher réellement dans la vue principale.

• Site Web et contacts
  Je pense que ceux-ci pourraient être trouvés dans un contrôleur d'action ou quelque chose. J'ai essayé de garder la vue principale peuplée d'éléments que chaque utilisateur de GitHub possède. (Les organisations et Bio sont des exceptions). Nous pourrions toujours les ajouter cependant.

Nous pourrions supprimer l'activité de contribution, mais il se trouve qu'elle se trouve sur la page de profil de github mobile et github web. Personnellement, je l'aime mais je peux voir que ce n'est pas nécessaire V1.

Dites moi ce que vous en pensez.

Je préfère garder une mise en page cohérente et réactive plutôt que de créer des mises en page spécifiques à l'appareil. Trop difficile à gérer et à tester. Les appareils ATM sont tous disposés de la même manière, à l'exception de l'effondrement et de l'expansion de la vue fractionnée.

_{Envoyé avec GitHawk}

D'accord, alors déplacez le nom et (bientôt ajouté) l'emplacement + l'e-mail à l'horizontale ?

Mise à jour.

J'ai failli rater un si bon truc ici <3

@rnystrom Avez-vous prévu de travailler davantage sur le croquis des wireframes avant le week-end ?
J'ai sous-estimé ma semaine et je suis un peu en décalage avec le starter pack , mais ce vendredi je suis de retour dans la vie (xCode + Sketch ;) ) et je veux finir dans 2/3 jours. Pour éviter les doublons, je posterai juste l'état des travaux avant de commencer vendredi.

Je pense qu'une considération est que si nous allons avoir des onglets sur la route pour Repos et Starred Repos, comme dans la conception de Sherlouk, l'interface utilisateur actuelle "Repos/Followers/Following" nécessiterait une refonte importante telle qu'elle est maintenant :

N'essayez pas de trop anticiper, mais plus l'interface utilisateur est importante dans notre 1.0, plus il sera difficile de la découpler plus tard.

Je voudrais également noter qu'à moins que les onglets Repos et Starred Repos soient censés être différents du Search Repos ViewController que nous utilisons actuellement, nous pouvons réutiliser SearchRepoResult + SearchRepoResultSectionController, ce qui rend ces onglets très faciles à créer. Voir ce contrôleur de vue , qui peut être utilisé à la fois pour Repos et Starred.

Je ne vois pas de bonne raison de passer du temps à créer des liens vers une vue Web GitHub alors que nous avons déjà une grande partie de l'architecture pour les afficher nativement déjà en place.

Je pense que les boutons Repo/Followers/Following devraient vous amener à une nouvelle vue plutôt que de les avoir sous forme d'onglets. Et la nouvelle vue devrait être native à coup sûr.

Je dis juste que tout cela est beau et bien meilleur que mon dessin d'enveloppe 😂

@Sherlouk Vous l'avez commencé. Faut commencer quelque part. Merci

_{Envoyé avec GitHawk}

@cieslakdawid pas vraiment, plutôt claqué les deux semaines suivantes puis en sortant de la ville.

_{Envoyé avec GitHawk}

Avez-vous pensé à terminer cette conception afin que @BrianLitwin puisse modifier sa branche de profil ? @rnystrom Des suggestions d'amélioration sur le dernier rendu de conception ci-dessus ?

@Huddie, laissez-moi faire un prototype de croquis du design original de @Sherlouk à partir du # 317 afin que nous puissions le mettre dans la discussion. Je ferai ça dans les prochains jours.

Ça sonne bien. 👌🏻

_{Envoyé avec GitHawk}

Je ne suis toujours pas un pro de Sketch, donc le mieux que je puisse faire est une capture d'écran pour le moment :

@BrianLitwin me semble bien

_{Envoyé avec GitHawk}

@BrianLitwin Je l'aime vraiment !!

Peut-être que suivre/ne plus suivre est un élément de la barre de navigation ou apparaît dans un contrôleur d'action ?

_{Envoyé avec GitHawk}

Enveloppe intéressante 😂 Superbe !

Je pense que j'avais prévu d'avoir un ... menu dans la barre de navigation qui fait des choses comme suivre/ne plus suivre et partager

Tout cela est vraiment cool. Merci d'avoir tagué ce billet @brianlitwin

Pas de précipitation du tout, mais l'objectif serait également d'avoir une activité d'impulsion pour l'utilisateur (y compris peut-être un flux consacré uniquement aux publications et aux commentaires) et au référentiel

Est-ce que quelqu'un travaille dessus en ce moment ?

Peut-être essayer de mettre en place un MVP dépouillé - pensez qu'une fois les fondations posées, nous pouvons commencer à construire dessus avec plus d'onglets et d'informations !

@Sherlouk J'ai pris des passes en douceur dans # 2125 et # 2113 - je pense que les trucs client/graphql de ces prs sont valides. Si je poste cette partie (quelques centaines de lignes), pouvez-vous tous consulter le pr et construire dessus ?

Je vais jeter un œil à la branche UserProfile et voir à quoi elle ressemble actuellement. Je pense que la conception ci-dessus est bonne, il essaye juste d'obtenir une version minimale en premier afin que nous puissions itérer par opposition à un MR massif avec tout dedans !

@Sherlouk d' accord, laissez-moi nettoyer la branche UserProfile alors, je ne pense pas qu'elle soit à jour. je vais faire ça aujourd'hui

Mise à jour de @Sherlouk : Cette branche n'est pas aussi embarrassante que dans mon souvenir. J'envisagerais de tout supprimer dans le dossier "Profil utilisateur" en plus du dossier "Modèles de profil" - les modèles suivent assez étroitement le modèle dans Repositories/Repositories Client. Mais je jetterais toutes les vues/contrôleurs de vue/en-têtes de section. Pour commencer, je pense que nous devrions utiliser les SwiftList ViewControllers.

Le seul sentiment fort que j'ai eu sur le front de ViewController était qu'il était très facile/simple d'inclure les deux onglets : les référentiels favoris et les référentiels d'utilisateurs, car nous avons déjà d'excellents contrôleurs de section et des cellules du pipeline SearchRepositories. Il suffit de les récupérer et de les déposer.

Salut les gens 👋, je suis designer et je voulais aider.

@Sherlouk et @BrianLitwin sont les conceptions publiées le 2 octobre Sur quoi travaillez-vous actuellement ?
Puis-je fournir un support de conception pour vous aider ?

En ce moment, je pense que je peux travailler sur une conception approximative pour;

• Onglet Dépôts
• Onglet étoiles
• Partager / Suivre Tiroir ?
• Dépôts épinglés étendus

Faites-moi savoir comment je peux vous aider !

@kocheck ne se sent contraint par aucun des dessins de ce fil; il n'y a pas de consensus à ma connaissance. Si vous avez d'autres idées, n'hésitez pas à les partager.

Bien reçu! Je voulais essayer de m'y mettre ce week-end merci !

J'attends la conception avec impatience ! Cela paraît bien

_{Envoyé avec GitHawk}

Hé, les gens 👋 J'ai trouvé le temps de sauter dans le fichier de conception ce matin. Que pensez-vous de cette direction ? Des commentaires ou des retours ?

## Présentation de la conception 1
Le plus proche des derniers designs postés.

Mises à jour

• L'onglet ViewController est déplacé vers le bas pour fournir un peu plus de hiérarchie.
• Inclus une version avec (aprox) nombre maximum de caractères pour la bio.
• Déplacement des actions Suivre et Partager dans une feuille d'action déclenchée via l'icône Menu dans la barre de navigation

| Courte biographie | longue biographie | iPhone SE |
| :---: | :---: | :---: |
| | | |

Aperçu de la conception 2

Cette conception va juste un peu plus loin. Si vous voulez que je continue et que je passe par-dessus bord, faites-le moi savoir 😄

Mises à jour

• L'onglet ViewController est déplacé vers le bas pour fournir un peu plus de hiérarchie.
• Nombre maximum de caractères inclus (environ) pour la bio.
  
  
  
  • Bio déplacée pour être à l'intérieur de la vue du tableau.
  
  
• A fait un passage rapide à Profile Stats
  
  
  
  • Dépôts
  
  
  • Suiveurs
  
  
  • Suivant
  
  
• Ajout du bouton Suivre/Ne plus suivre
• Déplacement des actions de suivi et de partage dans une feuille d'action déclenchée via l'icône de menu à côté du bouton de suivi

| Ne plus suivre | Suivre | iPhone SE |
| :---: | :---: | :---: |
| | | |

Toujours en cours de conception / Prochaines étapes

• J'aimerais explorer une version où les dépôts épinglés sont contenus dans une boîte. Comme dans ce commentaire créé par @Huddie . J'aime plutôt ça.
• activité cardiaque pour l'utilisateur *
• activité d'impulsion pour le référentiel *
• États étendus. pour les éléments de la vue tableau
• Dépôts (onglet)
• Étoiles (onglet)
• Feuille d'action

Inconnues

• Je suppose que Githawk prend en charge l'iPhone SE avec l'outil de mise en page automatique, à partir de la conversation ci-dessus 👆parlant de la prise en charge de l'iPad.

• Je fais également quelques hypothèses de conception ici et là, faites-moi savoir si vous remarquez quelque chose de radicalement horrible.

• * pour l'activité du pouls, j'ai une question stupide. Githawk afficherait-il ces éléments comme Github ou serait-ce plus personnalisé ?

N'hésitez pas à continuer à explorer @kocheck mais j'ai vraiment ❤️ Design 2.

En particulier, je suis heureux que vous ayez pu mettre le repo/followers/following à un endroit bien en vue. Ryan a mentionné que ces informations sont hautement prioritaires lorsqu'il scanne les profils.

J'aime les onglets sous la section En-tête. Qu'en pensent les autres ?

Tout à fait d'accord, descendre dans la barre d'onglets est beaucoup mieux +1

Pour la deuxième conception :

• Suivre / Ne plus suivre je pense que c'est une action 1 peut-être 2 fois. Il semble occuper une grande partie de la vue de dessus et ne changera probablement jamais pour la plupart des gens une fois cliqué.
• Les dépôts semblent apparaître deux fois (onglet et dans la partie supérieure)
• Personnellement, je pense que la biographie est attachée au nom, à l'emplacement, etc. et ne devrait pas être dans la section inférieure lorsque les autres sont dans la section supérieure.

J'aime les deux pour la plupart. Je pense que la courte bio de la conception 1 est un bon point de départ et la conception 2 peut être plus étoffée dans notre deuxième version

_{Envoyé avec GitHawk}

@kocheck yo ça a l'air TROP BIEN ! J'adore déplacer le bar vers le bas, très propre!

@Huddie @BrianLitwin jouant l'avocat du diable avec moi-même, peut-être que le compte suivant/etc ne devrait pas être aussi important (comme l'option 1) puisque GitHub consiste à faire du travail et moins à savoir qui est qui. Mais je pense que c'est une mesure utile pour le "capital social" lorsque vous rencontrez de nouvelles personnes.

J'aime aussi beaucoup l'idée de déplacer le suivi dans la feuille d'action. Supprimez les aspects sociaux et concentrez-vous sur "qui est cette personne et quel travail fait-elle" par rapport aux réseaux sociaux.

Je sais que je suis un peu en train de me tourner en rond ici, mais une fois que j'ai vu le design 1 et que je l'ai comparé avec le 2, j'ai eu l'impression que le 2 était trop Twitter/Instagram et moins _work_.

Les pensées?

Je penche également vers l'aspect professionnel du 1 contre l'accent social du 2 en tant que @rnystrom.

Je suis plutôt pour la 1ère option 😄. Il pointe des informations plus "importantes" concernant qui est cette personne et ce qu'elle fait, plutôt que les réseaux sociaux (le 2e ressemble à Insta).
De plus, je suggérerais de laisser de côté la bio et de faire plus d'espace pour les informations du téléavertisseur.
De plus, j'aurais changé de place entre nom/nom d'utilisateur et lieu/entreprise/site Web. Pour moi, c'est plus intuitif de voir le nom/nom d'utilisateur dans la partie droite de la photo de profil. (comme la version suggérée par @BrianLitwin ci-dessus) 😊

_{Envoyé avec GitHawk}

Merci pour les excellents commentaires ! Je vais travailler sur quelques compositions reflétant les commentaires ci-dessus.

@jdisho J'avais changé le nom/nom d'utilisateur avec emplacement/entreprise/site Web, etc. pour aider avec des noms plus longs. Je peux faire des recherches et échanger les champs. Voyez si je peux faire en sorte qu'un boîtier de bord soit beau à cet endroit 😄

_{Envoyé avec GitHawk}

Mise à jour rapide

Toujours en train de déplacer des trucs, j'ai pensé que je partagerais le pire cas de bord que je rencontre. Un utilisateur avec un nom de personnage maximum de 39 et la copie bio maximale sur un iPhone SE. 😆

@kocheck tellement cool que vous tournez à travers tous ces cas de bord !

_{Envoyé avec GitHawk}

L'écran entier peut-il défiler de sorte que les onglets deviennent un en-tête fixe lorsque vous faites défiler suffisamment loin ? Cela signifierait que toute la biographie serait visible sur tous les onglets et que tout l'écran pourrait être rempli de dépôts si nécessaire.

@j-f1 C'est ce que je pense. 👍

Je pourrais à nouveau échanger le nom/nom d'utilisateur avec l'emplacement, la société et les informations de contact. Profitez de la hauteur de l'écran.

Je voyage pour les vacances et j'ai eu une idée dans la voiture hier. Maquette très rapide ce matin. Que pensez-vous du déplacement du profil vers la droite ?

• L'information peut couler, au fur et à mesure que l'utilisateur en ajoute ou en supprime.
• Sur iPad, cela poserait-il des problèmes pour agrandir l'image de profil ? Aidez à remplir cet espace vide sur la droite.

@kocheck Je pense que ça a l'air _fantastique_. J'adore l'icône à droite. Rend toute l'interface très lisible.

_{Envoyé avec GitHawk}

C'est génial! Revisitant la question de kochecks l'autre semaine, je pense qu'il a posé des questions sur le partage d'activité d'impulsion comment github le fait ou apparaissant plus personnalisé, je ne sais pas si cela a déjà été répondu dans quelle direction l'équipe se penchait et moi-même curieux ...

Kocheck, envisageriez-vous que l'activité soit épinglée ci-dessous, ou comme un quatrième onglet, ou même comme une option de débordement ? Contrairement aux abonnés dont vous avez réalisé qu'il ne s'agissait finalement pas d'un point de vue central, du moins pour moi, l'activité est le point de vue le plus important sur un profil.

@ ijm8710 J'ai encore besoin de parcourir les documents GitHub, mais si nous pouvons afficher ces données, j'aimerais les déposer en haut de l'onglet Vue d'ensemble. 👍

Si nous sommes satisfaits de cette solution, quelle serait la meilleure façon de l'expédier ou de la soumettre à vous ? Un projet Zeplin, ou dois-je faire une requête Pull vers le dépôt de conception avec le fichier de croquis mis à jour ?

_{Envoyé avec GitHawk}

Sympa 🤩!!! @cookcheck

@kocheck api.github.com/users/:user/events

@kocheck PR pour concevoir le dépôt serait 👌

_{Envoyé avec GitHawk}

Aucune des images sur ce fil n'est en place. Quelqu'un les a-t-il et peut-il les télécharger en tant que pièce jointe GitHub ?

Les conceptions ont été fusionnées dans le fichier de croquis principal, je crois @TigPT

https://github.com/GitHawkApp/Design-Resources

@TigPT Faites-moi savoir si vous avez besoin/voulez un type de fichier différent et je peux l'exporter pour vous.

Les conceptions ont été fusionnées dans le fichier de croquis principal, je crois @TigPT

https://github.com/GitHawkApp/Design-Resources

Et les images sont en train de se charger, on dirait que c'était un problème de réseau de mon côté et j'ai supposé à tort qu'elles étaient hors ligne.

Merci d'avoir signalé Design repo.

De nouveaux modèles à venir ? Excité!