Freecodecamp: 改进用户帐户/用户信息页面

创建于 2015-12-31  ·  45评论  ·  资料来源: freeCodeCamp/freeCodeCamp

问题描述：

目前，用户帐户页面上有太多内容，需要滚动浏览所有项目、篝火和航点才能进入“管理您的帐户”部分。

建议的增强功能 1：

将用户图片变成下拉菜单，将当前内容拆分为3个子页面：

  • 管理您的帐户

    • 如果学生点击用户图标而不选择子页面，则默认转到页面

    • 这将显示 Github 活动、连续记录和帐户管理选项。

  • 项目

    • 如果学生点击“已完成项目的数量”（例如 [286] ），则默认转到页面

    • 显示已完成的项目。

  • 篝火晚会

    • 展示完成的篝火。

  • 航点

    • 显示完成的航点。

建议的增强 2：

与创建 3 个新页面不同，破坏性较小的增强可以是简单地在现有页面上实施选项卡式面板方法，选项卡是：

  • 帐户
  • 项目
  • 篝火晚会
  • 航点

建议的增强 3：

第三种方法可以是上述两种建议的组合，从而产生总共 1 个新页面。

  • 将账户管理内容分解为一个单独的页面，可通过单击用户图标访问
  • 通过单击“已完成项目的数量”（例如 [286] ），将项目/篝火/航点分解为一个单独的页面
picture pbnj

最有用的评论

伙计们，我认为您过于关注功能，而不太关注美学和用户体验。

我将卡片中的元素分开，以便于导航。 现在看起来你拿了一个空页面，然后把元素扔在上面。

我使用进度条来显示个人资料更新进度，并为用户提供他们需要做什么的提示，您还可以使用 LinkedIn 之类的列表来提供有关他们如何改进投资组合的提示。 不仅仅是给他们选择。


（您也可以制作一个列表，左侧有一个图标，右侧有用户缺少的内容）

我将按钮放在配置文件卡下并将它们排成一行以避免浪费空间。

picture stefanivic 于 2016-06-16
🎉4

所有45条评论

我挖了 2 和 3。很长一段时间我什至不知道底部有选项，所以我认为这将是一个很大的改进！

ltegman picture ltegman 于 2015-12-31

@ltegman这证明了我的观点。 我怀疑很多人知道它的存在，因为几乎没有人想过向下滚动这么远。

pbnj picture pbnj 于 2015-12-31

感谢您提供深思熟虑的反馈，@pmbenjamin。 以下是我的想法：

  • 我们不使用下拉菜单，所以 #1 已经过时了。
  • 几个月前，我们有意合并了旧的帐户管理和代码组合页面，并将个人资料图片和布朗尼分数指向同一个代码组合页面。 我这样做是为了简化页面和减少混乱（因为布朗尼分数和个人资料图片都没有明确告诉你他们会带你去哪里）。
  • 现在我们已将所有内容合并到“挑战”和“项目挑战”中，将只有两个表。 我们可以将它们构建为折叠的手风琴，以减少它们占用的垂直空间。
QuincyLarson picture QuincyLarson 于 2016-01-21

@QuincyLarson我完全同意你的想法。
这种类型的更改（例如 UI/UX）是否需要由核心团队成员（例如 Berkeley）进行？
或者我可以尝试一下吗？

pbnj picture pbnj 于 2016-01-22

@QuincyLarson折叠表对我来说是个好主意。 我认为默认情况下它们应该折叠在我们自己的页面上，这样我们就可以快速进入帐户设置而无需滚动太多。

我还建议从代码组合中删除非代码挑战。 这包括：

  • 加入 Free Code Camp 社区中的所有内容（5 项）
  • 为成功做好准备（4 件）
  • 任何以“Get Set”开头的东西（3 项）
alistermada picture alistermada 于 2016-01-26

@pmbenjamin不，它可供争夺。

BerkeleyTrue picture BerkeleyTrue 于 2016-01-26

引用可能的子问题：#6452

cod3rguy picture cod3rguy 于 2016-01-26

深思熟虑，我第二次使用@alistermad将这些元素从投资组合中删除。

按照这个和所有投资组合线程，看看我们是否可以一起提出更好的版本。

caravinci picture caravinci 于 2016-01-26

是的，请看#6452！ 我认为使用地图将是完美的。 我喜欢屏幕一侧的新地图。 我不熟悉 FCC 的源代码，所以我不知道重新调整地图的用途有多么容易。 它会想象它会干掉一些代码。

我认为这种方法将是 UX 的直观功能。 当我第一次访问另一个露营者的页面时，我认为地图会反映那个露营者的进度，而不是我的。

sealocal picture sealocal 于 2016-01-26

嘿，我一直在和@hallaathrad交谈，我们有一个想法为个人资料页面做一个新的设计。
所以我坐下来做了一个模拟。

左侧（侧边栏）和FCC活动板将被固定，只有其中的挑战部分会滚动。 正如@QuincyLarson所说，我们也可以将它们变成折叠的手风琴以获得更好的用户体验。 此外，每个按钮都会有悬停效果，使它们全彩色。
欢迎任何关于我们如何改进它的反馈。

stefanivic picture stefanivic 于 2016-02-09

：+1：

pbnj picture pbnj 于 2016-02-09

@nightwalkerkg我真的很喜欢那个侧边栏。 正如@hallaathrad已经

SaintPeter picture SaintPeter 于 2016-02-09

嗯，移动设备不是问题，因为我是设计编码的人，几乎和现在一样（一件事在彼此之上），除了视觉和功能的改进。

虽然我实际上很想将个人资料作为侧边栏。
哈哈哈侧边栏过载。 我们正在慢慢为 FCC 移动应用程序奠定基础。

caravinci picture caravinci 于 2016-02-09

@SaintPeter我们可以将侧边栏变成导航抽屉。
http://www.roblukedesign.com/trunk/trunk.html

stefanivic picture stefanivic 于 2016-02-09

嗯，虽然我非常喜欢这个想法，但我担心当我们已经有了用于地图和聊天的功能时，添加该功能会令人困惑和不一致。

然而，将这两个迁移到类似的东西会很好，尽管在项目的这个点上是不可行的。 也许在中长期。

caravinci picture caravinci 于 2016-02-09

@hallaathrad我的意思是为了移动视图。 一般不会。

stefanivic picture stefanivic 于 2016-02-09

嗯，我在听。 这绝对是可行的，不一定是通过添加另一个模块，而是自己编写代码（我以前只用几行 jquery 做过类似的事情）。

好的，作为增强进行讨论。 暂时，让我们专注于响应式通用设计

caravinci picture caravinci 于 2016-02-09

现在 FCC 上的挑战太多了，完成数百个挑战的人的个人资料页面非常长。
我们需要像个人资料页面上的地图一样实施模糊搜索，以更快地应对我们想要重新审视的挑战。

xRahul picture xRahul 于 2016-04-17
👍1

想尝试一下并提交您的方法吗？ @xRahul

caravinci picture caravinci 于 2016-04-17

@hallaathrad当然！ 让我们看看我能想出什么..

xRahul picture xRahul 于 2016-04-17

@xRahul ，有没有带着这个来过？ 我认为这是一个很棒的主意。

ghost picture ghost 于 2016-06-13

@atjonathan还没有......在开始修改网站的 UI 之前，我一直在学习一些前端。 不过很快就要开始了！

xRahul picture xRahul 于 2016-06-15
👍1

我认为我们应该坚持单列布局。 我们应该专注于更有效地利用投资组合顶部的空间，而不是添加侧边栏。 我认为我们的入职和帐户配置目标应该是最重要的。

我也认为在代码组合页面上搜索是不必要的。 人们可以滚动或使用 control+f。 只要我们有一个清晰的层次结构并且最重要的东西在最上面——他们现在就是这样，那么拥有一个非常长的代码组合就可以了。

QuincyLarson picture QuincyLarson 于 2016-06-15

@QuincyLarson ，我将把它与从 github 添加 bios 一起处理。 他们会很好地合作 :smiley:

ghost picture ghost 于 2016-06-15

@QuincyLarson我提议的重新设计：

_请丢弃字体问题：我没有费心去匹配它们或使用正确的字体问题：stuck_out_tongue_closed_eyes： _

ghost picture ghost 于 2016-06-15
👍1

@atjonathan这看起来很可靠。 我们也可以将一些入职培训移到这里。 以下挑战可能是顶部的按钮旁边有复选标记或旁边有 +1 点图标：

https://www.freecodecamp.com/challenges/configure-your-code-portfolio
https://www.freecodecamp.com/challenges/join-a-campsite-in-your-city
https://www.freecodecamp.com/challenges/learn-what-to-do-if-you-get-stuck
https://www.freecodecamp.com/challenges/read-coding-news-on-our-medium-publication
https://www.freecodecamp.com/challenges/join-our-forum
https://www.freecodecamp.com/challenges/watch-coding-videos-on-our-youtube-channel
https://www.freecodecamp.com/challenges/join-our-linkedin-alumni-network
https://www.freecodecamp.com/challenges/commit-to-a-goal-and-a-nonprofit

然后我可以合并前两个入门挑战（https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works 和 https://www.freecodecamp.com/challenges/create-a -github-account-and-join-our-chat-rooms) 成为我们可以放在 /welcome 的一项挑战

这将使我们能够完全消除“入门”和“为成功做好准备”部分。

您认为我们如何才能最好地在代码组合中可视化这些元素？ 也许你可以制作一个模拟或功能原型？

QuincyLarson picture QuincyLarson 于 2016-06-15
👍1

@QuincyLarson听起来很棒，让我在 Photoshop 中尝试一下...

ghost picture ghost 于 2016-06-15
👍1

@QuincyLarson ，我想像这样：

ghost picture ghost 于 2016-06-16

@atjonathan这看起来很可靠。 不过，我不认为个人资料完成应该是一个幽灵按钮。 以下是 LinkedIn 的做法：

QuincyLarson picture QuincyLarson 于 2016-06-16

请记住，有些人的名字会很长，而且用户名最长可达 15 个字符。

QuincyLarson picture QuincyLarson 于 2016-06-16

伙计们，我认为您过于关注功能，而不太关注美学和用户体验。

我将卡片中的元素分开，以便于导航。 现在看起来你拿了一个空页面，然后把元素扔在上面。

我使用进度条来显示个人资料更新进度，并为用户提供他们需要做什么的提示，您还可以使用 LinkedIn 之类的列表来提供有关他们如何改进投资组合的提示。 不仅仅是给他们选择。


（您也可以制作一个列表，左侧有一个图标，右侧有用户缺少的内容）

我将按钮放在配置文件卡下并将它们排成一行以避免浪费空间。

stefanivic picture stefanivic 于 2016-06-16
🎉4

@stefanivic ，我挖这个： gem:。 @QuincyLarson你的大脑怎么想？

ghost picture ghost 于 2016-06-16

没有人问我，但我同意@stefanivic。 在此产品和任何产品的决策过程中，UX 应该是重中之重。 也许他想再次参与到这一轮评论中？

（希望这个问题不会再次失效）。

caravinci picture caravinci 于 2016-06-16
😕1 😄1

@hallaathrad ，如果@QuincyLarson很高兴，我可以立即开始实施这个 #8943

ghost picture ghost 于 2016-06-16

：+1：@stefanivic

Bouncey picture Bouncey 于 2016-06-16

@atjonathan您绝对可以继续并开始实施#8943 - 我们在这里讨论的只是页面上元素的配置。

@stefanivic你的模拟看起来不错。 一些注意事项：

  • 值得指出的是，GitHub 的 bios 最多只能是 161 个字符。
  • 您遗漏了一个位置字段。
  • 感谢您提供这些 LinkedIn 卡片。

@stefanivic你是否足够擅长 Bootstrap 和 Jade 来自己实现这个视图？ 这样我们就可以看到您在所有不同视口尺寸下的视觉效果。

QuincyLarson picture QuincyLarson 于 2016-06-17

@QuincyLarson是的，我一直都在使用。 我会继续，唯一的问题是我现在有考试，所以可能需要两三天。 :P

stefanivic picture stefanivic 于 2016-06-17

@stefanivic好的 - 太棒了！ 祝你考试顺利。 感谢您尽快为我们提供有效的响应视图。

QuincyLarson picture QuincyLarson 于 2016-06-17

好的，大家久等了。 我没有太多时间来设置 FCC 并在真实的东西上做，所以我在 CodePen 上做了，这样你就可以看到它如何处理响应式视图。
http://codepen.io/nightwalkerkg/full/XKjVXz/

@QuincyLarson 对此有何更新？

stefanivic picture stefanivic 于 2016-06-21
❤1

@QuincyLarson您对此有何看法？

ghost picture ghost 于 2016-06-28

@stefanivic ，让我们为此提出一个拉取请求 :smiley:
你想成功吗？

ghost picture ghost 于 2016-07-14

这里已经安静了一段时间了！ 我刚刚查看了实时版本。 按钮已移至顶部。 尽管如此， @stefanvic的版本仍然存在重大差异。 老实说，我非常喜欢现场网站上的内容。 对我来说唯一的缺点是它确实占用了很多空间。 我们会坚持使用现有版本还是使用新版本？ 是否仍应查看此问题中建议的其他改进？

systimotic picture systimotic 于 2016-10-22

如果我们同意，我很高兴实施这个新设计。 我个人仍然认为@stefanivic的提议是对当前设计的改进。

ghost picture ghost 于 2016-10-22

我真的很喜欢这个提案的紧凑程度。 我也更喜欢现在的按钮。 为了保持一致性，最好使用当前的按钮样式。 我认为使文本更大可以真正提高可读性。 这里的文字比 FreeCodeCamp 上的大多数地方都要小。 Quincy 之前曾评论过增加 FCC 的字体大小。

systimotic picture systimotic 于 2016-10-23

@systimotic是的 - Bootstrap 4.0 将默认字体大小提高到 17px，我认为这是一个很好的大小。 我们将在它稳定后实现这一点。

QuincyLarson picture QuincyLarson 于 2016-10-23
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

cmal picture cmal  ·  3评论
Tzahile picture Tzahile  ·  3评论
kokushozero picture kokushozero  ·  3评论
trashtalka3000 picture trashtalka3000  ·  3评论
jurijuri picture jurijuri  ·  3评论