原文作者：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國際技術”致力於與你共享高質量的技術文章
歡迎關注我們的公眾號、將文章分享給你的好友
