Githawk: Каркас / дизайн профиля

Я не графический дизайнер, но, возможно, это может вызвать обсуждение здесь. Я попытался показать возможное медленное развитие концепции.

тоже укажу. Мне не очень нравится, что закладки находятся в центре значка на панели вкладок. Мне почему-то кажется, что это должен быть профиль или почтовый ящик. Но я не особо зацикливался на этом

🔥🔥🔥 @Хадди !

Включая следующие изображения для быстрого ознакомления с некоторыми текущими проектами GitHub. Было бы здорово найти свежие источники вдохновения за пределами GitHub.

@BrianLitwin Я очень согласен. Я думаю, что профиль Github отлично подходит для Интернета, но его нельзя воспроизвести на мобильных устройствах. Мы должны искать вдохновение снаружи, но стараться поддерживать привычный интерфейс. Я старался, чтобы страница была довольно простой для начала. Я знаю, что это может быть построено лучше позже.

Как направления! Я думаю, мы должны начать с того, какой должна быть наша информационная иерархия , прежде чем углубляться. В профиле столько всего может быть!

• Аватар
• Имя пользователя
• Показать имя
• Биография, местоположение, ссылки
• Организации
• Закрепленные репозитории
• Репо
• Последователи следуют
• Звезды
• Деятельность

Затем следует предпринять следующие действия :

• Следить, отписаться
• Делиться
• Заблокировать, сообщить

Мозговой штурм

Немного поразмыслив, мы можем разбить это на сегменты, ранжированные по приоритету:

1. ВОЗ?
   а. Личная идентичность
   
   
   
   1. Аватар
   
   
   2. Имя пользователя, отображаемое имя
   
   
   3. Био
   
   
   4. Местонахождение, работодатель, ссылки
   
   
   5. Звезды
      
      б. Сетевая идентификация
   
   
   6. Последователи
   
   
   7. Следующий
   
   
   8. Репозитории
   
   
2. Что они делают?
   а. Организации
3. Что они делали?
   а. Закрепленные репозитории
   б. Деятельность

Вдохновение

Несколько изображений с Dribbble, которые меня привлекли:

Вот начальный набросок, который я набросал вчера по пути домой. Мы должны придерживаться стиля белого фона, который мы сейчас используем в задачах.

Потрясающие вещи! Я ужасно 😍😍😍 за эту фотографию в центре, круглую рамку.. лаконичную, элегантную, безмятежную. EG в дизайне Хадди в № 2127 или у Энтони Маршала выше.

Отработка файла скетча @rnystrom . Слияние с некоторыми из моих первоначальных мыслей. @BrianLitwin Я не собираюсь публиковать свой старый дизайн, так как я очень доволен тем, что этот занял свое место.

На этих выходных я начал собирать шаблонный документ Sketch, чтобы упростить создание каркаса. Имеет цвета, текст и значки в общих компонентах: app.zip

Это не полностью завершено, но помечено, так как это может помочь с некоторыми элементами языка дизайна.

копия @cieslakdawid

@Huddie некоторые немедленные мысли:

• Я не поклонник дизайна с центрированным профилем, потому что он не будет хорошо масштабироваться для iPad без массово неиспользуемого пробела. Я все о передышке, но я думаю, что это будет за бортом при увеличении.
• Дизайн кнопок не соответствует остальной части приложения:
  
  
  
  • Несколько жирных/контрастных кнопок: почему «Подписки» и «Недавние» имеют одинаковый вес?
  
  
  • «Подписка» должна быть «Отменить подписку» (так же, как GitHub.com)
  
  
  • Я признаю, что приложение также не имеет полностью последовательного дизайна кнопок. Должен быть еще один шаблон, который мы добавим в файл Sketch и сделаем все согласованно! Возвращаемся к обсуждению градиента (может быть, мы используем полноградиентные кнопки, как и весь GitHub...)
  
  
• Нужны ли нам названия форм для всего? например, "био", вероятно, необязательно
• Я хочу избавиться от дескриптора пользователя в представлении и просто сделать его заголовком элемента навигации

Мы должны свести к минимуму, что должна делать версия 1.0 профиля на GitHawk.

Какие действия чаще всего предпринимаются при просмотре чьего-либо профиля на GitHub? Что касается меня, я проверяю, где они работают, нахожу их веб-сайт/контактную информацию или смотрю, насколько они «известны» (последователи, крупные проекты, которыми они владеют).

Как только мы это сделаем, мы можем сосредоточиться только на тех функциях, которые удовлетворяют только этим действиям, и игнорировать остальные на потом. В противном случае мы собираемся добавить много сложных функций, которые не являются приоритетными (например, деятельность по вкладу).

@rnystrom

• iPad дизайн
  Я думаю, что на iPhone центрированный вид хорош. Я понимаю, что вы имеете в виду, что iPad может показаться очень открытым. Я никогда не пробовал GitHawk на iPad, но всегда ли макеты одинаковы? Я бы предположил, что на iPad имя и дескриптор (или то, чем мы его заменим) располагались горизонтально, а не вертикально.

• Консистенция кнопок
  Я действительно пытался дать грубый набросок, я уверен, что есть много несоответствий ATM, но я подправлю его, если мы пойдем по этому пути.

• Названия форм
  Разделы над кнопкой «Подписаться» не имеют заголовков. Я не думаю, что это выглядит здорово, если в некоторых разделах ниже есть, а в некоторых нет, пытаясь сохранить последовательность. Я мог бы переместить биографию выше линии, но я чувствую, что она лучше подходит ниже.

• Удаление ручки в поле зрения
  Конечно, я могу убрать его из поля зрения. Я могу заменить его местоположением/электронной почтой

• Наиболее распространенные действия
  Я согласен, что есть, вероятно, некоторые общие. Я думаю, прикрепил репозитории + орг. показать свои замечательные работы. Активность позволяет вам увидеть, чем они в настоящее время занимаются. Я думаю, что подписка / отмена подписки необходимы наряду с именем + дескриптором и биографией, и я думаю, что быстрые ссылки на репо / подписку и подписчиков уместны, а не отображать их на самом деле в главном представлении.

• Веб-сайт и контакты
  Я чувствую, что их можно найти в контроллере действий или что-то в этом роде. Я старался, чтобы основное представление было заполнено вещами, которые есть у каждого пользователя GitHub. (Организации и Био являются исключениями). Хотя мы всегда можем добавить их.

Мы могли бы удалить активность вклада, но она оказалась на странице профиля для github mobile и github web. Мне лично это нравится, но я вижу, что это не обязательно V1.

Дайте мне знать, что вы думаете.

Я бы предпочел, чтобы макет был последовательным и отзывчивым, чем создавать макеты для конкретных устройств. Слишком сложно управлять и тестировать. Все устройства банкоматов расположены одинаково, за исключением свертывания и расширения разделенного представления.

_{Отправлено с помощью GitHawk}

Итак, переместите имя и (скоро будет добавлено) местоположение + адрес электронной почты в горизонтальное положение?

Обновлено.

Я почти пропустил такой замечательный материал здесь <3

@rnystrom Планируете ли вы еще поработать над эскизом каркаса до выходных?
Я недооценил свою неделю, и я немного отстаю от графика с starter pack , но в эту пятницу я вернулся к жизни (xCode + Sketch ;) ) и хочу закончить через 2/3 дня. Чтобы избежать дублирования, я просто опубликую состояние работы перед началом в пятницу.

Я думаю, что одно из соображений заключается в том, что если в будущем у нас будут вкладки для репозиториев и помеченных репозиториев, как в дизайне Шерлука, текущий пользовательский интерфейс «Репозитории/Подписчики/Подписчики» потребует значительного изменения дизайна, как сейчас:

Не пытаясь слишком заглядывать вперед, но чем более заметен пользовательский интерфейс в нашей версии 1.0, тем сложнее будет отделить его позже.

Также хотелось бы отметить, что если вкладки «Репозитории» и «Помеченные репозитории» не предназначены для того, чтобы выглядеть иначе, чем Search Repos ViewController, который мы используем в настоящее время, мы можем повторно использовать SearchRepoResult + SearchRepoResultSectionController, что упрощает создание этих вкладок. Посмотрите этот контроллер представления , который можно использовать как для Repos, так и для Starred.

Я не вижу веской причины тратить время на создание ссылок на веб-представление GitHub, когда у нас уже есть так много архитектуры для их изначального отображения.

Я думаю, что кнопки Repo/Followers/Following должны привести вас к новому представлению, а не к вкладкам. И новый вид обязательно должен быть нативным.

Просто скажу, что все это выглядит красиво и намного лучше, чем мой рисунок на конверте 😂

@Sherlouk Ты начал. С чего-то надо начинать. Спасибо

_{Отправлено с помощью GitHawk}

@cieslakdawid не очень, довольно сильно ударил следующие две недели, а затем уехал из города.

_{Отправлено с помощью GitHawk}

Есть мысли по завершению этого дизайна, чтобы @BrianLitwin мог настроить ветку своего профиля? @rnystrom Любые предложения по улучшению последнего рендеринга дизайна выше?

@Huddie позвольте мне сделать прототип Sketch оригинального дизайна @Sherlouk из # 317, чтобы мы могли обсудить это. Я сделаю это в ближайшие дни.

Конечно звучит хорошо. 👌🏻

_{Отправлено с помощью GitHawk}

Все еще не профессионал в Sketch, поэтому лучшее, что я могу сделать, это скриншот:

@BrianLitwin выглядит хорошо для меня

_{Отправлено с помощью GitHawk}

@BrianLitwin Я действительно врубаюсь!!

Может быть, подписка/отмена подписки является элементом панели навигации или отображается в контроллере действий?

_{Отправлено с помощью GitHawk}

Интересный конверт 😂 Отлично смотрится!

Думаю, я планировал иметь ... меню на панели навигации, которое делает такие вещи, как подписка / отмена подписки и обмен

Это все действительно круто. Спасибо, что отметили этот билет @brianlitwin

Никакой спешки, но цель состоит в том, чтобы иметь импульсную активность как для пользователя (включая, возможно, ленту, посвященную только сообщениям и комментариям), так и для репозитория.

Кто-нибудь работает над этим в данный момент?

Можем попробовать создать голый костяк MVP — подумайте, как только основа будет заложена, мы можем начать строить поверх нее с большим количеством вкладок и информации!

@Sherlouk Я использовал мягкие проходы в # 2125 и # 2113 - я думаю, что материал клиента / graphql из этих prs действителен. Если я опубликую эту часть (пару сотен строк), можете ли вы проверить pr и построить поверх нее?

Я взгляну на ветку UserProfile и посмотрю, как она сейчас выглядит. Я думаю, что приведенный выше дизайн хорош, он просто пытается сначала получить минимальную версию, чтобы мы могли итерировать, в отличие от массивного MR со всем!

@Sherlouk хорошо, тогда дай мне почистить ветку UserProfile, я не думаю, что она актуальна. я сделаю это сегодня

Обновление @Sherlouk : эта ветвь не такая смущающая, как я помнил. Я бы подумал об отказе от всего в папке «Профиль пользователя», кроме папки «Модели профиля» - модели довольно точно следуют шаблону в клиенте репозиториев / репозиториев. Но я бы выбросил все представления/контроллеры представлений/заголовки разделов. Для начала, я думаю, мы должны использовать SwiftList ViewControllers.

Единственное сильное чувство, которое у меня было на фронте ViewController, было то, что было очень легко/прямо включить две вкладки: Помеченные репозитории и Пользовательские репозитории, потому что у нас уже есть отличные контроллеры разделов и ячейки из конвейера SearchRepositories. Просто возьмите их и бросьте.

Привет, ребята 👋, я дизайнер и хочу помочь.

@Sherlouk и @BrianLitwin — дизайны, опубликованные 2 октября . Над чем вы сейчас работаете?
Могу ли я предоставить какую-либо поддержку дизайна, чтобы помочь вам?

Прямо сейчас я думаю, что могу работать над грубым дизайном для;

• Вкладка "Репозиторий"
• Вкладка "Звезды"
• Поделиться / Следить за ящиком?
• Расширенные сосновые репозитории

Дайте мне знать, как я могу помочь!

@kocheck не чувствует себя ограниченным ни одним из дизайнов в этой теме; насколько я знаю, единого мнения нет. Если у вас есть другие идеи, не стесняйтесь ими делиться.

Заметано! Я хотел попробовать и хорошенько взломать его на этих выходных, спасибо!

Ждём дизайн! Звучит круто

_{Отправлено с помощью GitHawk}

Привет, ребята 👋 Сегодня утром нашел время, чтобы погрузиться в файл дизайна. Как вы относитесь к этому направлению? Есть комментарии или отзывы?

## Обзор дизайна 1
Ближайшие к последним размещенным конструкции.

Обновления

• Вкладка ViewController перемещена вниз, чтобы обеспечить немного больше иерархии.
• Включена версия с (примерно) максимальным количеством символов для биографии.
• Действия «Подписаться» и «Поделиться» перемещены в лист действий, запускаемый с помощью значка «Меню» на панели навигации.

| Краткая биография | Длинная биография | iPhone SE |
| :---: | :---: | :---: |
| | | |

Обзор конструкции 2

Этот дизайн выходит чуть дальше. Если вы хотите, чтобы я продолжал идти и полетел за борт, дайте мне знать 😄

Обновления

• Вкладка ViewController перемещена вниз, чтобы обеспечить немного больше иерархии.
• Включено (приблизительно) максимальное количество символов для биографии.
  
  
  
  • Биография перемещена внутрь табличного представления.
  
  
• Сделал быстрый проход в статистике профиля
  
  
  
  • Репо
  
  
  • Последователи
  
  
  • Следующий
  
  
• Добавлена ​​кнопка «Подписаться/отписаться»
• Действия «Подписаться» и «Поделиться» перемещены в лист действий, запускаемый с помощью значка меню рядом с кнопкой «Подписаться».

| Отписаться | Следуйте | iPhone SE |
| :---: | :---: | :---: |
| | | |

Все еще разрабатывается / Следующие шаги

• Я хотел бы изучить версию, в которой закрепленные репозитории содержатся в коробке. Как в этом комментарии , который создал @Huddie . Мне это нравится.
• пульс активности для пользователя *
• импульсная активность для репозитория *
• Расширенные состояния. для элементов в виде таблицы
• Репозитории (вкладка)
• Звезды (вкладка)
• Лист действий

неизвестные

• Я делаю предположение, что Githawk поддерживает iPhone SE с инструментом автоматической компоновки, исходя из приведенного выше разговора 👆, говорящего о поддержке iPad.

• Я также делаю несколько предположений о дизайне здесь и там, дайте мне знать, если вы заметите что-то ужасно ужасное.

• * за импульсную активность, у меня глупый вопрос. Будет ли Githawk отображать эти элементы так же, как Github, или это будет более индивидуально?

Не стесняйтесь продолжать изучать @kocheck, но я действительно ❤️ Дизайн 2.

В частности, я рад, что вы смогли разместить репозиторий/фолловеров/фолловеров на видном месте. Райан упомянул, что эта информация имеет высокий приоритет при сканировании профилей.

Мне нравятся вкладки в разделе «Заголовок». Что думают другие?

Полностью согласен, что перемещение вниз по панели вкладок выглядит намного лучше +1

Для второго дизайна:

• Follow/Unfollow Я чувствую, что это действие 1, может быть, 2 раза. Кажется, что он занимает большую часть вида сверху и, вероятно, никогда не изменится для большинства людей после нажатия.
• Репозитории появляются дважды (вкладка и в верхней части)
• Я лично считаю, что биография связана с именем, местоположением и т. д. и не должна находиться в нижней части, когда остальные находятся в верхней части.

Оба мне нравятся по большей части. Я думаю, что краткая биография дизайна 1 — хорошее место для начала, а дизайн 2 может быть более полной нашей второй версией.

_{Отправлено с помощью GitHawk}

@kocheck йо, это выглядит НАСТОЛЬКО ХОРОШО! Люблю перемещать планку вниз, очень чисто!

@Huddie @BrianLitwin , играющий адвоката дьявола вместе со мной, возможно, следующее/и т. д. не должно быть столь заметным (как вариант 1), поскольку GitHub предназначен для выполнения работы, а не для того, кто есть кто. Но я думаю, что это полезная метрика для «социального капитала» при знакомстве с новыми людьми.

Мне также очень нравится идея переместить подписку на лист действий. Удалите социальные аспекты и сосредоточьтесь на том, «кто этот человек и какую работу он выполняет», а не на социальных сетях.

Я знаю, что здесь я немного накручиваю себя, но как только я увидел дизайн 1 и сравнил его с 2, я почувствовал, что 2 — это слишком много Твиттера/Инстаграма и меньше _работы_.

Мысли?

Я также склоняюсь к профессиональному аспекту 1 против социального акцента 2 как @rnystrom.

Я больше за 1 вариант 😄. Он указывает на более «важную» информацию о том, кто этот человек и чем он занимается, а не на социальные сети (второй выглядит как Insta).
Кроме того, я бы предложил оставить биографию и выделить больше места для информации о пейджере.
Кроме того, я бы поменял местами имя/имя пользователя и местоположение/компанию/веб-сайт. Для меня более интуитивно понятно видеть имя/имя пользователя в правой части фотографии профиля. (как версия, предложенная @BrianLitwin выше) 😊

_{Отправлено с помощью GitHawk}

Спасибо за отличный отзыв! Я буду работать над некоторыми композициями, отражающими отзывы выше.

@jdisho Я поменял имя/имя пользователя на местоположение/компанию/веб-сайт и т. д., чтобы помочь с более длинными именами. Я могу провести небольшое исследование и поменять местами поля. Посмотрим, смогу ли я сделать так, чтобы крайний случай выглядел хорошо в этом месте 😄

_{Отправлено с помощью GitHawk}

Быстрое обновление

Все еще перемещая вещи, подумал, что поделюсь худшим граничным случаем, с которым я сталкиваюсь. Пользователь с максимальным именем из 39 символов и максимальной копией биографии на iPhone SE. 😆

@kocheck такой классный, что ты прокручиваешь все эти крайние случаи!

_{Отправлено с помощью GitHawk}

Может ли весь экран прокручиваться так, чтобы вкладки становились фиксированным заголовком, когда вы прокручиваете достаточно далеко? Это означало бы, что вся биография будет видна на всех вкладках и что при необходимости весь экран может быть заполнен репозиториями.

@ j-f1 Вот о чем я думаю. 👍

Я мог бы снова поменять имя/имя пользователя на местоположение, компанию и контактную информацию. Воспользуйтесь преимуществом высоты экрана.

Еду на праздники, и вчера в машине пришла идея. Смоделировал это очень быстро сегодня утром. Как вы относитесь к перемещению профиля вправо?

• Информация может течь вниз, поскольку пользователь добавляет или удаляет больше.
• На iPad возникнут ли проблемы с увеличением изображения профиля? Помогите заполнить это пустое место справа.

@kocheck Я думаю, что это выглядит _фантастически_. Понравился значок справа. Делает весь интерфейс очень разборчивым.

_{Отправлено с помощью GitHawk}

Это круто! Возвращаясь к вопросу kochecks на прошлой неделе, я думаю, что он спросил об активности пульса, поделившись тем, как это делает github, или выглядит более нестандартно, не уверен, что на это когда-либо был дан ответ, в какую сторону склоняется команда, и мне самому любопытно...

Кочек, вы бы предположили, что активность будет закреплена либо внизу, либо в виде четвертой вкладки, либо даже в качестве опции переполнения? В отличие от подписчиков, которые, как вы, ребята, поняли, в конечном счете, не были основным видом, по крайней мере для меня, активность — самый важный просмотр профиля.

@ ijm8710 Мне все еще нужно просмотреть документы GitHub, но если мы сможем отобразить эти данные, я бы хотел разместить их в верхней части вкладки «Обзор». 👍

Если мы считаем это хорошим решением, как лучше отправить или отправить его вам? Проект Zeplin, или мне следует сделать запрос на включение в репозиторий дизайна с обновленным файлом эскиза?

_{Отправлено с помощью GitHawk}

Шикарно 🤩!!! @cookcheck

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

@kocheck PR для дизайна репо был бы 👌

_{Отправлено с помощью GitHawk}

Ни одна из картинок в этой ветке не поднялась. Кто-нибудь имеет их и может загрузить их как вложение GitHub?

Дизайны были объединены в файл основного эскиза, я думаю, @TigPT

https://github.com/GitHawkApp/Дизайн-ресурсы

@TigPT Дайте мне знать, если вам нужен другой тип файла, и я могу экспортировать его для вас.

Дизайны были объединены в файл основного эскиза, я думаю, @TigPT

https://github.com/GitHawkApp/Дизайн-ресурсы

И изображения теперь загружаются, похоже, это была проблема с сетью на моей стороне, и я ошибочно предположил, что они не в сети.

Спасибо, что указали на репозиторий Design.

Появляются новые дизайны? Возбужденный!