原文作者：Jeremy Keith
译者：UC 国际研发 Jothy
写在最前：欢迎你来到“UC国际技术”公众号，我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章，不限于原创与翻译。
在 Clearleft 做前端开发时，我们通常以组件库的形式提供生产代码。 这意味着我们的优先级是性能，可访问性，健壮性和其他 Web 开发方面的质量指标。
但我们却总是使用前端开发的原材料-HTML，CSS 和 JavaScript，来生成不适合生产环境的东西——我说的是原型制作。
现在市面上有很多无代码的原型制作工具，我们的设计师经常会用它们传达交互设计等细微之处。 但是，当真实用户测试原型时，我们发现它无法比拟 HTML，CSS 和 JavaScript 的灵活性，后者只需要把它加载到浏览器中就完事儿了。
我们做了很多设计冲刺项目，其第一要义是时间。 冲刺的倒数第二天产出的原型肯定不是符合生产质量的，但它足以通过测试。
有趣的是 - 在进行原型制作时 - 我们平时考虑的前端优先级可能最终将成为过眼云烟。现在最高优的就是速度，而如果这意味着牺牲语义或性能，那没关系，牺牲就牺牲。 如果我在构建一个原型的时候想着“现在，我该给这个组件设定什么 class？”，那么我知道我的思维方式错了。 这个问题可能对实际生产代码有效，但这对原型来说纯粹是浪费时间。
所以这两种工作体现的是非常不同的态度。 对于生产工作，质量是关键。而原型设计，快速制作是重点。
虽然在开发公共项目时，我会仔细考量第三方库和框架带来的性能影响，但在制作原型时我不会考虑它。 尽管给出你想要的所有 JavaScript 框架和 CSS 库吧（虽然我会觉得 CSS Grid 等浏览器技术降低了 Bootstrap 这样的 CSS 库的重要性，即使只是原型设计上）。
在生产项目和原型项目之间切换还挺有趣，有趣中带点迷惑，就像我必须在翻转大脑中的开关来改变音轨一样。
当原型效果很好、测试良好时，真正的陷阱是使用原型代码作为最终产品的基础代码。请别这么做！我曾经就犯过这个错误，结果总是很糟糕。相比从一个纯净的项目开始，我最终花了更多的时间来将原型代码对齐到生产级别。
正确做法是：制作原型来测试想法，设计，交互和接口......然后把代码丢弃。 原型的价值在于回答问题和测试假设。 当切换到生产模式时，不要坠入沉没成本谬论。
毋庸讳言，请无论如何也不要将原型代码发布到生产中！
但是…
貌似越来越多的在线网站都采用了原型设计理念。人们不考虑是否适合，就都使用重量级的 JavaScript 框架。而可访问性，也总被降级为事后的想法。大多网站都采用脆弱的架构——依赖于首次加载然后执行 JavaScript，接着呈现基本内容。 开发人员体验总是优先于用户体验。
Heydon 最近 highlight 了一篇文章，为有抱负的 Web 开发人员提供了这个技巧：
对于 HTML，目前没有太多可以学习的，你可以随时学习，但在开发你的第一个页面之前，你得先搞清楚内联元素（比如 span）和块级元素（比如 div）之间有什么区别。
这对正在构建原型的你来说，是个非常在理的建议... 但是，如果你正在构建一些公众消费的站点，请务必考虑到最终用户。
英文原文：
https://adactio.com/journal/14562
好文推荐：
Bootstrap 发布了个 v3.4 版本？是不是搞错了？
“UC国际技术”致力于与你共享高质量的技术文章
欢迎关注我们的公众号、将文章分享给你的好友
