Githawk: 线框/设计简介

我不是平面设计师，但也许这些可以在这里引发讨论。 我试图展示一个概念可能进展缓慢。

我还要指出。 我不太喜欢书签是标签栏上的中心图标。 出于某种原因，我觉得它应该是个人资料或收件箱。 但我并没有真正专注于那个

🔥🔥🔥 @哈迪！

在此处包括以下图片，以便快速参考 GitHub 的一些当前设计。 在 GitHub 之外找到一些新的灵感来源会很酷。

@BrianLitwin我非常同意。 我认为 Github 配置文件非常适合网络，但无法在移动设备中很好地复制。 我们应该在外面寻找灵感，但尽量保持熟悉的界面。 我试图保持页面非常简单的开始。 我知道以后可以更好地构建它。

喜欢方向！ 我认为我们应该从我们的信息层次结构开始，然后再深入。 个人资料上可能存在很多东西！

• 阿凡达
• 用户名
• 显示名称
• 生物，位置，链接
• 组织
• 固定回购
• 回购
• 追随者，关注
• 星星
• 活动

然后是要采取的行动：

• 关注，取消关注
• 分享
• 阻止，报告

头脑风暴

头脑风暴一下，我们可以把它分成按优先级排序的桶：

1. 谁？
   一种。 个人身份
   
   
   
   1. 阿凡达
   
   
   2. 用户名、显示名
   
   
   3. 生物
   
   
   4. 地点、雇主、链接
   
   
   5. 星星
      
      湾。 网络身份
   
   
   6. 追随者
   
   
   7. 下列的
   
   
   8. 存储库
   
   
2. 他们在做什么？
   一种。 组织
3. 他们一直在做什么？
   一种。 固定回购
   湾。 活动

灵感

从 Dribbble 中提取一些吸引我的图片：

这是我昨天在回家的航班上制作的初始草图文件。 我们应该坚持我们现在在问题上使用的白色背景样式。

很棒的东西！ 对于那个居中的轮廓图片，圆形框架，我非常😍😍😍......整洁，优雅，平静。 EG 在 #2127 中 Huddie 的设计中或在上面的 Antony Marshal 中。

处理@rnystrom草图文件。 融合了我的一些原始想法。 @BrianLitwin我不打算重新发布我的旧设计，因为我很高兴这个设计取代了它。

这个周末我开始整理一个模板化的 Sketch 文档，以使线框图更容易。 在可共享组件中有颜色、文本和图标： app.zip

它并不完全完整，但标记为它可能对某些设计语言有所帮助。

抄送@cieslakdawid

@Huddie一些直接的想法：

• 我不喜欢居中的轮廓设计 b/c 它不能很好地适用于 iPad 没有大量未使用的空白。 我只关心喘息的空间，但我认为扩大规模时会过火。
• 按钮设计与应用程序的其余部分不一致：
  
  
  
  • 多个粗体/对比按钮：为什么“关注”和“最近”具有相同的权重？
  
  
  • “关注”应该是“取消关注”（与 GitHub.com 相同）
  
  
  • 我承认该应用程序也没有完全一致的按钮设计。 应该是我们在 Sketch 文件中添加的另一个模板，并使所有内容保持一致！ 回到梯度讨论（也许我们会像所有 GitHub 一样使用全梯度按钮......）
  
  
• 我们是否需要所有内容的表单标题？ 例如“生物”可能是不必要的
• 我想摆脱让用户在视图中处理，只是将其设为导航项标题

我们应该总结一下 GitHawk 上的 1.0 配置文件应该做什么。

查看某人的 GitHub 个人资料时，最常见的操作是什么？ 对我来说，我会查看他们在哪里工作，找到他们的网站/联系信息，或者看看他们有多“引人注目”（追随者，他们拥有的大项目）

一旦我们这样做了，我们就可以只关注那些只满足那些动作的特征，而忽略其他的。 否则，我们将添加许多不是优先级的复杂功能（例如贡献活动）。

@rnystrom

• iPad设计
  我认为在 iPhone 上居中的外观很好。 我明白你的意思是 iPad 看起来很开放。 我从未在 iPad 上尝试过 GitHawk，但布局总是一样吗？ 我建议在 iPad 上，名称和句柄（或我们替换它的任何内容）水平而不是垂直堆叠

• 按钮一致性
  我真的想给出一个粗略的草图，我敢肯定 ATM 有很多不一致的地方，但如果我们沿着这条路走，我会修改它。

• 表格标题
  “关注”按钮上方的部分没有标题。 如果下面的某些部分有而有些没有，我认为它看起来不太好，试图保持一致。 我可以将简历移到线上，但我觉得它更适合下面。

• 在视图中移除手柄
  当然我可以把它移出视线。 我可以用位置/电子邮件替换它

• 最常见的动作
  我同意可能有一些常见的。 我认为固定 repos + org. 展示他们的杰出作品。 该活动允许您查看他们目前在做什么。 我认为关注/取消关注以及名称+句柄和个人简介是必不可少的，我认为快速链接到回购/关注和关注者是合适的，而不是让它们实际显示在主视图中。

• 网站和联系方式
  我觉得这些可以在动作控制器或其他东西中找到。 我试图用每个 GitHub 用户拥有的东西来填充主视图。 （组织和生物是例外）。 不过，我们总是可以添加它们。

我们可以删除贡献活动，但它恰好位于 github mobile 和 github web 的个人资料页面上。 我个人喜欢它，但我可以看到它不是必需的 V1。

让我知道你的想法。

我宁愿保持布局的一致性和响应性，也不愿制作特定于设备的布局。 管理和测试太难了。 Atm 设备的布局都相同，除非拆分视图折叠和展开。

_{与GitHawk一起发送}

好的，所以将名称和（即将添加）位置+电子邮件转移到水平位置？

更新。

我差点错过了这里的好东西<3

@rnystrom你有计划在周末之前更多地画线框草图吗？
我低估了我的一周，我的starter pack有点偏离了日程安排，但是这个星期五我又回来了（xCode + Sketch ;) ）并希望在 2/3 天内完成。 为避免重复，我将在周五开始之前发布工作状态。

我认为一个考虑因素是，如果我们要为 Repos 和 Starred Repos 设置标签，就像在 Sherlouk 的设计中一样，当前的“Repos/Followers/Following”UI 将需要像现在这样进行重大的重新设计：

不要试图过多地向前看，但 UI 在我们的 1.0 中越突出，以后解耦就越棘手。

还要注意，除非 Repos 和 Starred Repos 选项卡看起来与我们当前使用的 Search Repos ViewController 不同，否则我们可以重用 SearchRepoResult + SearchRepoResultSectionController，这使得这些选项卡非常容易构建。 请参阅此视图控制器，它可用于 Repos 和 Starred。

当我们已经拥有如此多的架构可以在本地显示它们时，我认为没有充分的理由花时间构建指向 GitHub Web 视图的链接。

我认为 Repo/Followers/Following 按钮应该带您进入一个新视图，而不是将它们作为选项卡。 新视图肯定应该是原生的。

只是说这一切看起来都很漂亮，比我的信封画要好得多😂

@Sherlouk你开始了。 必须从某个地方开始。 谢谢

_{与GitHawk一起发送}

@cieslakdawid不是真的，在接下来的两周内非常猛烈地抨击然后出城。

_{与GitHawk一起发送}

有没有想过完成这个设计，以便@BrianLitwin可以调整他的个人资料分支？ @rnystrom对上面最后一个设计渲染的改进有什么建议吗？

@Huddie lemme 从 #317 制作了@Sherlouk的原始设计的 Sketch 原型，以便我们可以将其放入讨论中。 我会在接下来的几天里这样做。

当然听起来不错。 👌🏻

_{与GitHawk一起发送}

仍然不是 Sketch pro，所以我现在能做的最好的就是截图：

@BrianLitwin对我来说看起来不错

_{与GitHawk一起发送}

@BrianLitwin我真的很喜欢它！

也许跟随/取消关注是一个导航栏项目或出现在动作控制器中？

_{与GitHawk一起发送}

看起来很有趣的信封😂看起来很棒！

认为我曾计划在导航栏中有一个 ... 菜单，用于执行关注/取消关注和分享等操作

这一切真的很酷。 感谢您标记这张票@brianlitwin

一点也不着急，但目标是同时为用户（可能包括专门用于帖子和评论的提要）和存储库提供脉冲活动

目前有人在做这个吗？

可能会尝试让一个简单的 MVP 继续运行 - 认为一旦奠定了基础，我们就可以开始在此基础上构建更多选项卡和信息！

@Sherlouk我在#2125 和#2113 中采用了软通行证-我认为这些prs 中的客户端/graphql 内容是有效的。 如果我发布那部分（几百行），你们都可以查看 pr 并在其上构建吗？

我将看一下 UserProfile 分支，看看它目前的样子。 我认为上面的设计很好，它只是试图首先获得一个最小版本，这样我们就可以像一个巨大的 MR 那样迭代，一切都在！

@Sherlouk好的 lemme 清理 UserProfile 分支，我认为它不是最新的。 我今天会这样做

@Sherlouk更新：那个分支并不像我回忆的那样尴尬。 我会考虑废弃“用户配置文件”文件夹中除“配置文件模型”文件夹之外的所有内容 - 模型非常接近存储库/存储库客户端中的模式。 但我会丢弃任何视图/视图控制器/部分标题。 对于初学者，我认为我们应该使用 SwiftList ViewControllers。

我在 ViewController 前端的唯一强烈感觉是包含两个选项卡非常简单/直接：星标存储库和用户存储库，因为我们已经拥有来自 SearchRepositories 管道的出色部分控制器和单元格。 只需将它们取出并放入即可。

嘿伙计们👋，我是一名设计师，想帮忙。

@Sherlouk和@BrianLitwin是10 月 2 日发布的设计您目前正在做什么？
我可以提供任何设计支持来帮助你吗？

现在我想我可以做一个粗略的设计；

• 回购选项卡
• 星星标签
• 分享/关注抽屉？
• 扩展的固定回购

让我知道我能提供什么帮助！

@kocheck不会受到此线程上的任何设计的限制； 据我所知，没有共识。 如果您有其他想法，请随时分享。

收到！ 我想在这个周末好好尝试一下，谢谢！

期待设计！ 听起来很酷

_{与GitHawk一起发送}

嘿，伙计们👋 今天早上有时间跳进设计文件。 你觉得这个方向怎么样？ 有任何意见或反馈吗？

## 设计概述 1
最接近最后发布的设计。

更新

• ViewController 选项卡向下移动以提供更多层次结构。
• 包括一个具有（大约）生物最大字符数的版本。
• 将关注和分享操作移动到通过导航栏中的菜单图标触发的操作表中

| 简介 | 龙生物 | iPhone SE |
| :---: | :---: | :---: |
| | | |

设计概述 2

这个设计更进一步。 如果你想让我继续前进，让我知道😄

更新

• ViewController 选项卡向下移动以提供更多层次结构。
• 包括（大约）生物的最大字符数。
  
  
  
  • 将生物移动到表格视图内。
  
  
• 快速通过 Profile Stats
  
  
  
  • 回购
  
  
  • 追随者
  
  
  • 下列的
  
  
• 添加关注/取消关注按钮
• 将关注和分享操作移动到通过关注按钮旁边的菜单图标触发的操作表中

| 取消关注 | 关注 | iPhone SE |
| :---: | :---: | :---: |
| | | |

仍在设计/下一步

• 我想探索一个版本，其中固定的 Repos 包含在一个框中。 就像@Huddie创建的这条评论一样。 我比较喜欢这样。
• 用户的脉冲活动*
• 存储库*的脉冲活动
• 扩展状态。 对于表格视图中的项目
• 回购（标签）
• 星星（标签）
• 行动单

未知数

• 我假设 Githawk 通过自动布局工具支持 iPhone SE，从上面的对话👆谈论 iPad 支持。

• 我也在这里和那里做一些设计假设，如果你发现任何非常可怕的东西，请告诉我。

• *对于脉搏活动，我有一个愚蠢的问题。 Githawk 会像 Github 一样显示这些项目，还是更自定义？

随意继续探索@kocheck ，但我真的❤️设计2。

特别是我很高兴您能够将 repo/followers/following 放在显眼的位置。 Ryan 提到，当他扫描个人资料时，这些信息是高优先级的。

我喜欢标题部分下的选项卡。 别人怎么看？

完全同意向下移动标签栏看起来好多了+1

对于第二个设计：

• 关注/取消关注我觉得是 1 次或 2 次的动作。 它似乎占据了顶视图的很大一部分，并且一旦单击，对于大多数人来说可能永远不会改变。
• 回购似乎出现了两次（标签和顶部）
• 我个人认为简历与姓名、位置等有关，当其他人在顶部时，不应该在下部。

我大部分都喜欢。 我认为设计 1 简短的简历是一个很好的起点，设计 2 可以使我们的第二个版本更加充实

_{与GitHawk一起发送}

@kocheck哟，看起来太好了！ 喜欢把酒吧往下移，很干净！

@Huddie @BrianLitwin与我自己一起扮演魔鬼的拥护者，也许以下/等计数_不应该_如此突出（如选项 1），因为 GitHub 是关于工作而不是关于谁是谁。 但我认为在结识新朋友时，它是一个有用的衡量标准，比如“社会资本”。

我也非常喜欢将“关注”移动到操作表中的想法。 删除社交方面，将重点放在“这个人是谁，他们做什么工作”与社交网络上。

我知道我在这里有点自欺欺人，但是当我看到设计 1 并将其与 2 进行比较时，我觉得 2 太多了 Twitter/Instagram 而_work_少了。

想法？

作为@rnystrom，我也倾向于 1 的专业方面与 2 的社会重点。

我更喜欢第一种选择😄。 它指出了更多关于这个人是谁以及在做什么的“重要”信息，而不是社交网络（第二个看起来像 Insta）。
此外，我建议将简历留在外面，为寻呼机信息腾出更多空间。
另外，我会在名称/用户名和位置/公司/网站之间切换位置。 对我来说，在个人资料照片的右侧看到名称/用户名更直观。 （就像上面@BrianLitwin建议的版本）😊

_{与GitHawk一起发送}

感谢您的反馈！ 我将处理一些反映上述反馈的组合。

@jdisho我已将名称/用户名与位置/公司/网站等切换，以帮助使用更长的名称。 我可以做一些研究并交换领域。 看看我能不能在那个地方让一个边缘案例看起来不错😄

_{与GitHawk一起发送}

快速更新

仍在移动东西，我想我会分享我遇到的更糟糕的边缘情况。 拥有最多 39 个字符名称的用户，以及 iPhone SE 上的最大生物副本。 😆

@kocheck太酷了，您正在处理所有这些边缘情况！

_{与GitHawk一起发送}

当您滚动足够远时，整个屏幕是否可以滚动以使选项卡成为固定标题？ 这意味着整个生物将在所有选项卡上可见，并且如果需要，整个屏幕都可以充满回购。

@j-f1 这就是我的想法。 👍

我可能会再次将名称/用户名与位置、公司和联系信息交换。 利用屏幕高度。

假期出差，昨天在车上有个主意。 今天早上真的很快把它嘲笑了。 将个人资料移到右侧，您会有什么感觉？

• 随着用户添加或删除更多信息，信息可以向下流动。
• 在 iPad 上，放大个人资料图像会导致问题吗？ 帮助填补右边的空白。

@kocheck我认为这看起来 _fantastic_。 喜欢右边的图标。 使整个界面非常清晰。

_{与GitHawk一起发送}

这太棒了！ 前一周重新访问 kochecks 问题，我认为他询问了有关脉冲活动的问题，分享 github 是如何做到的，或者看起来更加自定义，不确定是否曾经回答过团队倾向于哪种方式并且对我自己感到好奇......

Kocheck，您是否将活动设想为固定在下方，或者作为第四个选项卡，甚至作为溢出选项？ 与你们意识到的追随者最终不是关键观点不同，至少对我而言，活动是个人资料中最重要的观点。

@ijm8710我仍然需要查看 GitHub 文档，但如果我们可以显示该数据，我希望将其放在概览选项卡的顶部。 👍

如果我们对此作为解决方案感到满意，那么最好的运输方式是什么，或将其提交给你们？ 一个 Zeplin 项目，还是我应该使用更新的草图文件向设计存储库发出拉取请求？

_{与GitHawk一起发送}

光滑🤩！！！ @cookcheck

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

@kocheck PR 来设计回购将是👌

_{与GitHawk一起发送}

此线程上的所有图像都没有出现。 任何人都拥有它们并且可以将它们作为 GitHub 附件上传吗？

我相信设计已合并到主草图文件中@TigPT

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

@TigPT如果您需要/想要不同的文件类型，请告诉我，我可以为您导出。

我相信设计已合并到主草图文件中@TigPT

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

现在正在加载图像，看起来这是我这边的网络问题，我错误地认为它们处于脱机状态。

感谢您指出设计回购。

新设计即将到来？ 兴奋的！