Freecodecamp: 使“了解FCC的工作原理”挑战更易于导航(UX)

创建于 2016-08-03  ·  15评论  ·  资料来源: freeCodeCamp/freeCodeCamp

挑战名称

了解免费代码训练营的工作方式

问题说明

浏览12张幻灯片的幻灯片有点繁琐,因为您必须不断按“转到我的下一步”(与按箭头键在幻灯片之间导航相反)。 图像尺寸也不与屏幕高度相关,因此,如果窗口很小,则每次都必须向下滚动以阅读幻灯片之间的文本/切换。

屏幕截图

screen shot 2016-08-02 at 4 49 39 pm
screen shot 2016-08-02 at 4 49 28 pm
screen shot 2016-08-02 at 4 46 15 pm

help wanted UI

最有用的评论

我还认为,这一挑战可以通过一些UX改进来解决。 首先,我认为所有这些挑战都应该可以通过箭头键进行导航。 滚动问题也很烦人。 图像可能会变小。

抄送/ @ FreeCodeCamp / issue-moderators

所有15条评论

我还认为,这一挑战可以通过一些UX改进来解决。 首先,我认为所有这些挑战都应该可以通过箭头键进行导航。 滚动问题也很烦人。 图像可能会变小。

抄送/ @ FreeCodeCamp / issue-moderators

@atjonathan @oalhait是的-我们计划大幅减少这些内容的长度。 如果我们为图像及其文本使用固定的高度,则可以消除许多高度差异。

我认为最直接的改进就是使用向左箭头和向右箭头应对下一个挑战。

我将讨论左/右箭头问题! 但是有一个问题:在哪里可以找到特定挑战的html / css / js?

@oalhait您好,感谢您对UX的帮助。

现在的挑战是在React基础架构上,大多数视图/控制器都在/common/app ,挑战是/seed目录中的json文件。

视图均为JSX,样式为LESS

务必查看贡献准则,祝您修复愉快!

并访问“贡献者聊天室” 。 寻求帮助。

@oalhait -BTW-问题的问题描述中的链接指向localhost;)

@raisedadead感谢您的提示,我现在就开始了!
@iamrudra HAHAHA哎呀,正在我的本地实例上查看

arrow
需要的建议-

  • 挑战结束时该怎么办..转到下一个挑战
  • 当我们希望用户在继续下一个挑战之前打开链接时该怎么做
  • 显示步骤编号的文本该怎么做...即..(4/12)
    @QuincyLarson @atjonathan

@sachinmour哦,当我说我在键盘上指的是箭头键时,请不要添加其他UI元素。

我认为最好不要确保下一步按钮和上一步按钮始终在同一位置(通过限制图像/文本的高度),这样您可以重复单击它们,而不是添加其他按钮。

但是我们确实想添加一些热键。 热键位于main.js中

至于您的问题,如果遇到遇到必须继续打开链接的步骤,该怎么办,单击箭头键根本无法前进,而是使“在新选项卡中打开链接”按钮以某种方式移动引起注意并通知用户在单击之前无法前进。

@QuincyLarson知道了。

10056
@昆西·拉森

挑战解决了吗?

这还行不通吗? 需要帮助吗?

此问题的开头help wanted @ktajpuri

我们已经在beta上过渡到了较小的导航集,我想我们可以关闭此@QuincyLarson吗?

@raisedadead是的-在这一点上,我认为不值得改进。 我们仅使用其中一些幻灯片挑战,它们很短-我认为最长的挑战是4张幻灯片。

此页面是否有帮助?
0 / 5 - 0 等级