Ich bin kein Grafikdesigner, aber vielleicht können diese die Diskussion hier entfachen. Ich habe versucht, ein mögliches langsames Fortschreiten eines Konzepts aufzuzeigen.
Ich werde auch darauf hinweisen. Ich mag es nicht wirklich, dass Lesezeichen das mittlere Symbol in der Tableiste sind. Aus irgendeinem Grund denke ich, dass es Profil oder Posteingang sein sollte. Aber darauf habe ich mich nicht wirklich konzentriert
🔥🔥🔥 @Huddie !
Fügen Sie hier die folgenden Bilder als schnelle Referenz für einige der aktuellen Designs von GitHub ein. Es wäre cool, einige neue Inspirationsquellen jenseits von GitHub zu finden.
@BrianLitwin Ich stimme sehr zu. Ich denke, das Github-Profil ist großartig für das Web, kann aber nicht gut auf Mobilgeräten repliziert werden. Wir sollten nach Inspiration im Außen suchen, aber versuchen, eine vertraute Oberfläche beizubehalten. Ich habe versucht, die Seite ziemlich einfach zu starten. Ich weiß, dass es später besser ausgebaut werden kann.
Wie die Richtungen! Ich denke, wir sollten damit beginnen, wie unsere Informationshierarchie aussehen sollte, bevor wir zu tief gehen. Es gibt so viele Dinge, die auf dem Profil existieren könnten!
Dann sind Maßnahmen zu ergreifen:
Wenn wir ein bisschen Brainstorming machen, können wir dies in nach Priorität geordnete Eimer aufteilen:
Holen Sie sich ein paar Bilder von Dribbble, die mich angezogen haben:
Hier ist eine Starter-Sketch-Datei , die ich gestern auf dem Heimflug gezaubert habe. Wir sollten uns an den weißen Hintergrundstil halten, den wir jetzt für Issues verwenden.
Großartiges Zeug! Ich bin schrecklich 😍😍😍 für dieses Bild mit dem zentrierten Profil, den runden Rahmen … aufgeräumt, elegant, ruhig. ZB in Huddies Design in #2127 oder in Antony Marshal oben.
Arbeiten an der @rnystrom -Skizzendatei. Einige meiner ursprünglichen Gedanken einfließen lassen. @BrianLitwin Ich werde mein altes Design nicht erneut veröffentlichen, da ich ziemlich zufrieden damit bin, dass dieses seinen Platz einnimmt.
Dieses Wochenende habe ich damit begonnen, ein Sketch-Dokument mit Vorlagen zusammenzustellen, um das Wireframing zu vereinfachen. Enthält Farben, Text und Symbole in gemeinsam nutzbaren Komponenten: app.zip
Es ist nicht ganz vollständig, aber es wird markiert, da es bei einigen Designsprachen hilfreich sein könnte.
cc @cieslakdawid
@Huddie einige unmittelbare Gedanken:
Wir sollten zusammenfassen, was das Profil 1.0 auf GitHawk tun sollte.
Welche Aktionen werden am häufigsten ausgeführt, wenn das GitHub-Profil einer Person angezeigt wird? Für mich überprüfe ich, wo sie arbeiten, finde ihre Website/Kontaktinformationen oder sehe, wie „bemerkenswert“ sie sind (Follower, große Projekte, die sie besitzen).
Sobald wir dies getan haben, können wir uns nur auf die Merkmale konzentrieren, die nur diese Aktionen erfüllen, und die anderen für später ignorieren. Ansonsten werden wir eine Menge komplizierter Funktionen hinzufügen, die keine Priorität haben (z. B. Beitragsaktivität).
@rnystrom
iPad-Design
Ich denke, auf dem iPhone ist der zentrierte Look schön. Ich verstehe, was Sie meinen, dass das iPad sehr offen erscheinen könnte. Ich habe GitHawk noch nie auf dem iPad ausprobiert, aber sind die Layouts immer gleich? Ich würde vorschlagen, dass auf dem iPad der Name und der Griff (oder was auch immer wir ersetzen) eher horizontal als vertikal gestapelt werden
Knopfkonsistenz
Ich habe wirklich versucht, eine grobe Skizze zu geben, ich bin mir sicher, dass es viele Inkonsistenzen gibt, aber ich werde es ausbessern, wenn wir diesen Weg gehen.
Titel bilden
Abschnitte über der Schaltfläche „Folge ich“ haben keine Titel. Ich denke nicht, dass es gut aussieht, wenn einige Abschnitte unten haben und andere nicht, um konsistent zu bleiben. Ich könnte die Biografie über die Linie verschieben, aber ich habe das Gefühl, dass sie unten besser passt.
Abziehgriff im Blick
Natürlich kann ich es aus dem Blickfeld entfernen. Ich kann es durch Standort/E-Mail ersetzen
Die häufigsten Aktionen
Ich stimme zu, dass es wahrscheinlich einige gemeinsame gibt. Ich denke, gepinnte Repos + org. zeigen ihre bemerkenswerte Arbeit. Die Aktivität ermöglicht es Ihnen, zu sehen, was sie gerade vorhaben. Ich denke, zu folgen/nicht mehr zu folgen, ist zusammen mit Name + Handle und Biografie unerlässlich, und ich denke, dass schnelle Links zu Repo/Following und Followern angemessen sind, anstatt sie tatsächlich in der Hauptansicht anzuzeigen.
Webseite und Kontakt
Ich glaube, diese könnten in einem Action Controller oder so etwas zu finden sein. Ich habe versucht, die Hauptansicht mit Dingen gefüllt zu halten, die jeder GitHub-Benutzer hat. (Organisationen und Bio sind Ausnahmen). Wir könnten sie aber immer hinzufügen.
Wir könnten die Beitragsaktivität entfernen, aber sie befindet sich zufällig auf der Profilseite für github mobile und github web. Ich persönlich mag es, aber ich sehe, dass es nicht notwendig ist, V1.
Lass mich wissen was du denkst.
Ich würde das Layout lieber konsistent und reaktionsschnell halten, als gerätespezifische Layouts zu erstellen. Zu schwer zu verwalten und zu testen. ATM-Geräte sind alle gleich angeordnet, mit Ausnahme des Zusammenbruchs und der Erweiterung der geteilten Ansicht.
Gesendet mit GitHawk
Okay, also verschieben Sie den Namen und (bald hinzugefügt) Ort + E-Mail auf horizontal?
Aktualisiert.
Fast hätte ich so ein tolles Zeug hier verpasst <3
@rnystrom Hast du vor, vor dem Wochenende mehr an der Skizze für Wireframes zu arbeiten?
Ich habe meine Woche unterschätzt und bin mit den starter pack
etwas aus dem Plan gerannt, aber diesen Freitag bin ich wieder im Leben (xCode + Sketch ;) ) und möchte in 2/3 Tagen fertig sein. Um Doppelarbeit zu vermeiden, poste ich einfach den Stand der Arbeit, bevor ich am Freitag beginne.
Ich denke, eine Überlegung ist, dass, wenn wir Tabs für Repos und Starred Repos haben werden, wie in Sherlouks Design, die aktuelle Benutzeroberfläche "Repos/Followers/Following" eine erhebliche Neugestaltung erfordern würde, wie sie jetzt ist:
Ich versuche nicht, zu sehr nach vorne zu schauen, aber je prominenter die Benutzeroberfläche in unserer Version 1.0 ist, desto schwieriger wird es später, sie zu entkoppeln.
Ich möchte auch darauf hinweisen, dass wir SearchRepoResult + SearchRepoResultSectionController wiederverwenden können, es sei denn, die Registerkarten „Repos“ und „Starred Repos“ sollen anders aussehen als der Search Repos ViewController, den wir derzeit verwenden, wodurch diese Registerkarten sehr einfach zu erstellen sind. Sehen Sie sich diesen View-Controller an, der sowohl für Repos als auch für Starred verwendet werden kann.
Ich sehe keinen guten Grund, Zeit damit zu verbringen, Links zu einer GitHub-Webansicht zu erstellen, wenn wir bereits so viel von der Architektur haben, um sie nativ anzuzeigen.
Ich denke, die Schaltflächen Repo/Followers/Following sollten Sie zu einer neuen Ansicht führen, anstatt sie als Registerkarten zu haben. Und die neue Ansicht sollte auf jeden Fall nativ sein.
Ich sage nur, dass das alles wunderschön aussieht und viel besser ist als meine Umschlagzeichnung 😂
@Sherlouk Du hast es angefangen. Irgendwo muss man anfangen. Danke
Gesendet mit GitHawk
@cieslakdawid nicht wirklich, ziemlich zugeschlagen in den nächsten zwei Wochen, dann raus aus der Stadt.
Gesendet mit GitHawk
Hast du schon mal daran gedacht, dieses Design fertigzustellen, damit @BrianLitwin seinen Profilzweig optimieren kann? @rnystrom Irgendwelche Verbesserungsvorschläge zum letzten Design-Rendering oben?
@Huddie lemme mache einen Sketch-Prototypen von @Sherlouks ursprünglichem Design aus Nr. 317, damit wir das in die Diskussion einbringen können. Das mache ich in den nächsten Tagen.
Sicher hört sich gut an. 👌🏻
Gesendet mit GitHawk
Immer noch kein Sketch-Profi, also kann ich vorerst nur einen Screenshot machen:
@BrianLitwin sieht gut aus für mich
Gesendet mit GitHawk
@BrianLitwin Ich grabe es wirklich!!
Vielleicht ist Follow/Unfol ein Element in der Navigationsleiste oder wird in einem Aktionscontroller angezeigt?
Gesendet mit GitHawk
Interessant aussehender Umschlag 😂 Sieht toll aus!
Ich glaube, ich hatte geplant, ein ...-Menü in der Navigationsleiste zu haben, das Dinge wie Folgen/Entfolgen und Teilen macht
Das ist alles wirklich cool. Danke, dass Sie dieses Ticket mit @brianlitwin markiert haben
Überhaupt keine Eile, aber das Ziel wäre es, sowohl für den Benutzer (einschließlich vielleicht eines Feeds, der nur Beiträgen und Kommentaren gewidmet ist) als auch für das Repository Pulsaktivität zu haben
Arbeitet im Moment jemand daran?
Ich könnte versuchen, ein einfaches MVP zum Laufen zu bringen - denken Sie, sobald die Grundlage gelegt ist, können wir mit mehr Registerkarten und Informationen darauf aufbauen!
@Sherlouk Ich habe in # 2125 und # 2113 weiche Pässe genommen - ich denke, das Client / Graphql-Zeug von diesen Prs ist gültig. Wenn ich diesen Teil poste (ein paar hundert Zeilen), könnt ihr euch die PR ansehen und darauf aufbauen?
Ich werde mir den UserProfile-Zweig ansehen und sehen, wie er derzeit aussieht. Ich denke, das Design oben ist gut, es wird nur versucht, zuerst eine minimale Version zu bekommen, damit wir im Gegensatz zu einem massiven MR mit allem drin iterieren können!
@Sherlouk okay, lass mich den UserProfile-Zweig aufräumen, ich glaube nicht, dass er auf dem neuesten Stand ist. Das mache ich heute
@Sherlouk Update: Dieser Zweig ist nicht so peinlich, wie ich mich erinnerte. Ich würde erwägen, alles im Ordner "Benutzerprofil" außer dem Ordner "Profilmodelle" zu verschrotten - die Modelle folgen ziemlich genau dem Muster in Repositories/Repositories Client. Aber ich würde alle Ansichten/View-Controller/Abschnittsüberschriften wegwerfen. Für den Anfang denke ich, dass wir die SwiftList ViewControllers verwenden sollten.
Das einzige starke Gefühl, das ich auf der ViewController-Front hatte, war, dass es sehr einfach/unkompliziert war, die beiden Registerkarten einzuschließen: Starred Repositories und User Repositories, da wir bereits großartige Abschnittscontroller und Zellen aus der SearchRepositories-Pipeline haben. Einfach holen und vorbeibringen.
Hey Leute 👋 , ich bin Designer und wollte helfen.
@Sherlouk und @BrianLitwin sind die Designs, die am 2. Oktober gepostet wurden. Woran arbeitest du gerade?
Kann ich Ihnen Designunterstützung bieten, um Ihnen zu helfen?
Lassen Sie mich wissen, wie ich helfen kann!
@kocheck fühlt sich durch keines der Designs in diesem Thread eingeschränkt; Es gibt keinen Konsens, den ich kenne. Wenn Sie andere Ideen haben, können Sie diese gerne teilen.
Verstanden! Ich wollte versuchen, es dieses Wochenende gut zu knacken, danke!
Freue mich auf die Gestaltung! Hört sich cool an
Gesendet mit GitHawk
Hey, Leute 👋 Habe heute Morgen etwas Zeit gefunden, um in die Designdatei zu springen. Wie denkst du über diese Richtung? Irgendwelche Kommentare oder Rückmeldungen?
## Designübersicht 1
Am nächsten an den zuletzt geposteten Designs.
| Kurzbiographie | Langer Lebenslauf | iPhone SE |
| :---: | :---: | :---: |
| | | |
Dieses Design tritt nur ein wenig weiter hervor. Wenn du willst, dass ich weitermache und über Bord gehe, lass es mich wissen 😄
| Nicht mehr folgen | Folgen Sie | iPhone SE |
| :---: | :---: | :---: |
| | | |
*
*
Ich mache hier auch ein paar Designannahmen und lass es mich wissen, wenn du etwas drastisch Schreckliches entdeckst.
*
für die Pulsaktivität habe ich eine blöde Frage. Würde Githawk diese Elemente genau wie Github anzeigen oder wäre dies kundenspezifischer?
Fühlen Sie sich frei, @kocheck weiter zu erkunden, aber ich wirklich ❤️ Design 2.
Besonders freut es mich, dass Sie Repo/Follower/Following an prominenter Stelle platzieren konnten. Ryan erwähnte, dass diese Informationen hohe Priorität haben, wenn er Profile scannt.
Ich mag die Registerkarten unter dem Header-Bereich. Was denken andere?
Stimmen Sie voll und ganz zu, dass das Verschieben der Registerkartenleiste viel besser aussieht +1
Für zweites Design:
Beides gefällt mir am meisten. Ich denke, Design 1, kurze Biografie, ist ein guter Anfang und Design 2 könnte unsere zweite Version ausfüllen
Gesendet mit GitHawk
@kocheck yo das sieht SO GUT aus! Ich liebe es, die Bar nach unten zu bewegen, sehr sauber!
@Huddie @BrianLitwin spielt Devil's Advocate mit mir selbst, vielleicht sollte das Folgende/usw. nicht so prominent sein (wie Option 1), da es bei GitHub darum geht, Arbeit zu erledigen und weniger darum, wer wer ist. Aber ich denke, es ist eine nützliche Metrik für so etwas wie „soziales Kapital“, wenn man neue Leute kennenlernt.
Ich mag auch die Idee, das Folgen in das Aktionsblatt zu verschieben. Entfernen Sie die sozialen Aspekte und konzentrieren Sie sich auf „wer ist diese Person und welche Arbeit macht sie“ im Gegensatz zu sozialen Netzwerken.
Ich weiß, dass ich mich hier ein bisschen aufwühle, aber als ich Design 1 gesehen und mit 2 verglichen habe, hatte ich das Gefühl, dass 2 zu viel Twitter/Instagram und weniger _Arbeit_ ist.
Gedanken?
Ich tendiere auch zum beruflichen Aspekt von 1 gegenüber der sozialen Betonung von 2 als @rnystrom.
Ich bin eher für die 1. Möglichkeit 😄. Es zeigt eher „wichtige“ Informationen darüber, wer diese Person ist und was sie tut, als soziale Netzwerke (das zweite sieht aus wie Insta).
Außerdem würde ich vorschlagen, die Biografie wegzulassen und mehr Platz für die Pager-Informationen zu schaffen.
Außerdem hätte ich die Orte zwischen Name/Benutzername und Ort/Firma/Website getauscht. Für mich ist es intuitiver, den Namen/Benutzernamen auf der rechten Seite des Profilfotos zu sehen. (wie die Version, die @BrianLitwin oben vorgeschlagen hat) 😊
Gesendet mit GitHawk
Danke für das tolle Feedback! Ich werde an einigen Kompositionen arbeiten, die das obige Feedback widerspiegeln.
@jdisho Ich hatte den Namen/Benutzernamen mit Standort/Firma/Website usw. ausgetauscht, um bei längeren Namen zu helfen. Ich kann etwas recherchieren und die Felder tauschen. Sehen Sie, ob ich einen Grenzfall an dieser Stelle gut aussehen lassen kann 😄
Gesendet mit GitHawk
Ich bewege immer noch Sachen herum, dachte, ich würde den schlimmsten Randfall teilen, auf den ich stoße. Ein Benutzer mit maximal 39 Zeichennamen und maximaler Bio-Kopie auf einem iPhone SE. 😆
@kocheck so cool, dass du dich durch all diese Randfälle drehst!
Gesendet mit GitHawk
Könnte der gesamte Bildschirm scrollen, sodass die Registerkarten zu einer festen Kopfzeile werden, wenn Sie weit genug scrollen? Das würde bedeuten, dass die gesamte Biografie auf allen Registerkarten sichtbar wäre und dass der gesamte Bildschirm bei Bedarf mit Repos gefüllt werden kann.
@ j-f1 Das denke ich. 👍
Ich könnte den Namen/Benutzernamen wieder mit dem Standort, der Firma und den Kontaktinformationen austauschen. Nutzen Sie die Bildschirmhöhe.
Reisen in die Ferien und hatte gestern im Auto eine Idee. Habe es heute Morgen ganz schnell verspottet. Wie denkst du über das Verschieben des Profils nach rechts?
@kocheck Ich finde das sieht _fantastisch_ aus. Ich liebe das Symbol auf der rechten Seite. Macht die gesamte Benutzeroberfläche sehr gut lesbar.
Gesendet mit GitHawk
Das ist fantastisch! Als ich neulich die Frage von kochecks noch einmal besuchte, fragte er mich, glaube ich, nach dem Teilen von Pulsaktivitäten, wie Github es macht, oder nach dem Aussehen, das kundenspezifischer erscheint, nicht sicher, ob das jemals beantwortet wurde, in welche Richtung das Team neigte und neugierig war ...
Kocheck, könnten Sie sich vorstellen, dass Aktivitäten entweder unten angeheftet oder als vierte Registerkarte oder sogar als Überlaufoption angezeigt werden? Im Gegensatz zu Followern, von denen Sie festgestellt haben, dass sie letztendlich keine zentrale Ansicht sind, ist Aktivität zumindest für mich die wichtigste Ansicht auf einem Profil.
@ijm8710 Ich muss noch die GitHub-Dokumentation durchsehen, aber wenn wir diese Daten anzeigen können, würde ich sie gerne oben auf der Registerkarte „Übersicht“ ablegen. 👍
Wenn wir mit dieser Lösung zufrieden sind, wie können wir sie am besten versenden oder Ihnen übermitteln? Ein Zeplin-Projekt oder sollte ich mit der aktualisierten Skizzendatei eine Pull-Anfrage an das Design-Repository senden?
Gesendet mit GitHawk
Slick 🤩!!! @kocheck
@kocheck api.github.com/users/:user/events
@kocheck PR zum Design-Repo wäre 👌
Gesendet mit GitHawk
Keines der Bilder in diesem Thread ist oben. Hat sie jemand und kann sie als GitHub-Anhang hochladen?
Designs wurden in die Master-Skizzendatei zusammengeführt, glaube ich @TigPT
@TigPT Lassen Sie mich wissen, wenn Sie einen anderen Dateityp benötigen/wollen, und ich kann das für Sie exportieren.
Designs wurden in die Master-Skizzendatei zusammengeführt, glaube ich @TigPT
Und Bilder werden jetzt geladen, es sieht so aus, als ob es ein Netzwerkproblem auf meiner Seite war und ich fälschlicherweise angenommen habe, dass sie offline sind.
Vielen Dank für den Hinweis auf Design Repo.
Kommen neue Designs? Erregt!
Hilfreichster Kommentar
Immer noch kein Sketch-Profi, also kann ich vorerst nur einen Screenshot machen: