每周UI挑战赛即将开始

“每周设计一个用户界面组件，每天实现一个功能。”

和许多开发者一样，我喜欢在空闲时间编写代码，做一些个人项目；同样和许多开发者一样，我的个人项目往往会不了了之，最终在它们的 Github 代码库中积灰。

为了更好地与开发者和设计社区互动，并在业余项目中取得切实有效的进展，我决定发起一个每周 UI 挑战；虽然这个挑战最初是为了我自己的学习和实践而设计的，但它将会在一个公共代码库中共享，我也会每天分享我的设计成果和当天的开发心得。如果你对此感兴趣，欢迎关注！

目标

我为这次挑战设定了几个目标：

1. 继续提升我的 React 技能
2. 提升我的设计能力，尤其是在用户界面/用户体验设计方面。
3. 参与一个进展缓慢、节奏合理的项目

即使我能在任何设计/UI挑战赛（例如Daily UI）中拿到第一名和第二名，我不仅想要掌控自己的节奏，还希望每天只专注于设计的一个部分。我的想法是，这样能让我真正专注于按照原子设计原则构建组件功能，并且（希望）能防止我精疲力竭或失去兴趣。

它如何运作？

以下是我制定的挑战赛方案：

• 设计将使用 Adob​​e XD 或 Sketch 完成。
• 组件将基于 React 技术栈开发：React、styled components、Webpack、Storybook和Jest。
• 每天都会有独特的目标或目标集；第一天（周日）通常是设计阶段，其余日子则着重于实施设计中的单个或多个部分。

如果你想和我一起参与这项挑战，请记住，你可以设计自己的组件，并使用你喜欢的任何技术栈/技术进行开发！我将在 dev.to 上使用#weeklyui标签发布每周挑战和我自己的文章，并在 Twitter 上使用#WeeklyUI 标签发布。

第一周抢先看

第一周的挑战内容是：电商商品上架！我有点作弊，已经把设计稿做好了；设计完成后，我才想到把它做成一个公开挑战。每日任务安排如下：

1. （4月8日，星期日）设计组件
2. 显示产品名称、价格和图片
3. 加入购物车按钮，收藏按钮
4. 显示促销价格，售罄状态
5. 颜色变体缩略图按钮
6. 100% a11y 评分
7. 调整、重构、修复

要跟随我的代码库或使用我正在使用的相同技术栈，请在 Github 上fork Weekly UI 代码库。

设计愉快！🎉

图片来源：@leonelfdez on Unsplash