在網(wǎng)站開發(fā)過程中前端開發(fā)人員的一項關(guān)鍵技能是能夠?qū)⒃O(shè)計轉(zhuǎn)化為代碼。這些設(shè)計通常以靜態(tài)模型的形式呈現(xiàn)，將瀏覽網(wǎng)站的“理想”體驗可視化。在現(xiàn)實世界中，內(nèi)容通常與設(shè)計中呈現(xiàn)的整潔、完美契合的內(nèi)容大不相同。除此之外，在現(xiàn)代網(wǎng)絡(luò)上，用戶可以選擇越來越多的方式來訪問我們構(gòu)建的網(wǎng)站。

在本文中，我們將介紹對文本和媒體組件進(jìn)行看似簡單的設(shè)計并決定如何最好地將其轉(zhuǎn)換為代碼的過程，同時牢記用戶和內(nèi)容作者的需求。我們不會深入研究如何對其進(jìn)行編碼 - 而是將決定我們的開發(fā)決策的因素。我們將在每一步考慮我們需要提出的問題（包括我們自己和其他利益相關(guān)者）。

我們不能再只針對“最佳”內(nèi)容或瀏覽條件進(jìn)行設(shè)計和開發(fā)。相反，我們必須擁抱網(wǎng)絡(luò)固有的靈活性和不可預(yù)測性，并構(gòu)建彈性組件。靜態(tài)模型無法滿足所有場景，因此許多設(shè)計決策在構(gòu)建時由開發(fā)人員決定。不管你喜不喜歡，如果你是一名 UI 開發(fā)人員，你就是一名設(shè)計師——即使你不認(rèn)為自己是一名設(shè)計師！

我們從一個簡單的文本和媒體組件設(shè)計開始——這在產(chǎn)品登陸頁面上很常見。它由左側(cè)的圖像或視頻和右側(cè)的列組成，其中包含一個標(biāo)題、一段文本和一個號召性用語鏈接。此設(shè)計適用于（虛構(gòu)的）初創(chuàng)公司，可幫助想要學(xué)習(xí)新技能的人找到導(dǎo)師。