整理了一下里面對(duì)我們自己通過 LLM 生成代碼可能有用的提示詞和經(jīng)驗(yàn)。感興趣可以看看。

他們發(fā)現(xiàn)第一次生成的網(wǎng)頁(yè)通常質(zhì)量不太行，但是第二次增強(qiáng)提示之后 GPT-4V 生成網(wǎng)頁(yè)代碼質(zhì)量明顯變好，下面是對(duì)應(yīng)提示詞。

第一次代碼生成提示詞：

假設(shè)你是一位精通HTML和CSS的網(wǎng)頁(yè)開發(fā)專家。當(dāng)用戶提供一張網(wǎng)頁(yè)的截圖給你時(shí)，你的任務(wù)是創(chuàng)建一個(gè)HTML文件。這個(gè)文件需要用HTML和CSS編碼來精確還原截圖中的網(wǎng)站設(shè)計(jì)。重要的是，所有的CSS樣式代碼都要直接寫在HTML文件里，而不是鏈接到其他文件。

如果原網(wǎng)頁(yè)中有圖片，你可以用一個(gè)名為"rick.jpg"的圖片作為所有圖片的替代品。即便網(wǎng)頁(yè)中的某些圖片已經(jīng)被藍(lán)色的矩形占位符替代了，你同樣需要使用"rick.jpg"作為這些位置的圖片。記住，你的HTML文件中不應(yīng)包含任何外部文件的鏈接。

此外，這個(gè)任務(wù)不需要你使用JavaScript編寫動(dòng)態(tài)交互腳本。你的重點(diǎn)應(yīng)該放在復(fù)原網(wǎng)頁(yè)元素的大小、文本、位置、顏色以及整體布局上。最終，你需要提供完整的HTML文件內(nèi)容，其中包含了所有必要的CSS樣式代碼。

增強(qiáng)提示詞：

作為一名擅長(zhǎng)HTML和CSS的網(wǎng)頁(yè)開發(fā)高手，你面臨的挑戰(zhàn)是修改一個(gè)已有的HTML文件。這個(gè)文件是用來構(gòu)建一個(gè)網(wǎng)頁(yè)的，但它目前有一些缺失或錯(cuò)誤的部分，使得它與原網(wǎng)頁(yè)有所不同。我將向你展示我想要?jiǎng)?chuàng)建的網(wǎng)頁(yè)原型和目前HTML實(shí)現(xiàn)的網(wǎng)頁(yè)效果。同時(shí)，我也會(huì)提供你我想在網(wǎng)頁(yè)中包含的所有文本。

你的任務(wù)是仔細(xì)比較這兩個(gè)網(wǎng)頁(yè)，并根據(jù)提供的文本內(nèi)容，修改原始的HTML代碼。你需要確保新的實(shí)現(xiàn)在外觀上與參考網(wǎng)頁(yè)完全一致。在編碼時(shí)，要保證HTML代碼語(yǔ)法正確，能夠生成一個(gè)結(jié)構(gòu)完整的網(wǎng)頁(yè)。對(duì)于需要圖片的地方，你可以暫時(shí)用一個(gè)名為"rick.jpg"的圖片作為占位符。

在進(jìn)行代碼修訂時(shí)，請(qǐng)?zhí)貏e注意網(wǎng)頁(yè)元素的大小、文本內(nèi)容、位置布局和顏色等方面，確保最終的布局和原網(wǎng)頁(yè)高度相似。完成后，請(qǐng)直接提供新修訂的HTML文件內(nèi)容，無(wú)需附加任何解釋。

LLM 通過設(shè)計(jì)生成代碼未來重點(diǎn)和研究方向：

◆為多模態(tài)大語(yǔ)言模型開發(fā)更有效的提示技巧，尤其是在處理復(fù)雜網(wǎng)頁(yè)設(shè)計(jì)時(shí)，例如通過分步驟生成網(wǎng)頁(yè)的不同部分。

◆使用真實(shí)世界的網(wǎng)頁(yè)內(nèi)容來訓(xùn)練開放源代碼的多模態(tài)大語(yǔ)言模型。我們的初步實(shí)驗(yàn)表明，直接在真實(shí)的網(wǎng)頁(yè)上進(jìn)行訓(xùn)練存在挑戰(zhàn)，因?yàn)檫@些網(wǎng)頁(yè)往往內(nèi)容繁雜、數(shù)據(jù)雜亂。未來的研究可能會(huì)探索數(shù)據(jù)清洗和優(yōu)化的方法，以實(shí)現(xiàn)更穩(wěn)定有效的訓(xùn)練過程。

◆超越傳統(tǒng)的截圖輸入方式，例如，嘗試使用前端設(shè)計(jì)師的Figma框架或手繪草圖作為測(cè)試輸入。這種方法的擴(kuò)展還需要我們仔細(xì)地重新設(shè)計(jì)評(píng)估體系。

◆將研究范圍從靜態(tài)網(wǎng)頁(yè)擴(kuò)展到動(dòng)態(tài)網(wǎng)頁(yè)。這意味著評(píng)估過程需要考慮網(wǎng)頁(yè)的交互功能，而不僅僅是視覺效果的相似性。

載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

有時(shí)候，我們需要通過JavaScript在網(wǎng)站上播放通知聲音。本文將介紹如何實(shí)現(xiàn)這一功能。

使用Audio構(gòu)造函數(shù)在網(wǎng)站上播放通知聲音

我們可以通過使用Audio構(gòu)造函數(shù)創(chuàng)建一個(gè)音頻播放器對(duì)象來在網(wǎng)站上使用JavaScript播放通知聲音。

例如，如果我們有以下按鈕：

<button>Play</button>

然后，我們可以通過編寫以下代碼來使用Audio構(gòu)造函數(shù)，在點(diǎn)擊按鈕時(shí)播放音頻剪輯：

const playAudio = (url) => {

const audio = new Audio(url);

audio.play();

}

const button = document.querySelector('#play-button');

button.addEventListener('click', () => {

const audioUrl = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';

playAudio(audioUrl);

console.log(`Now playing audio from ${audioUrl}`);

});

這段代碼定義了一個(gè)名為`playAudio`的函數(shù)，它接受一個(gè)URL參數(shù)，用于指定要播放的音頻文件的路徑。當(dāng)調(diào)用`playAudio`函數(shù)時(shí)，它會(huì)創(chuàng)建一個(gè)新的`Audio`對(duì)象并播放指定的音頻文件。

接下來，使用`querySelector`方法獲取網(wǎng)頁(yè)中的一個(gè)ID為`play-button`的元素，并將其存儲(chǔ)在`button`變量中。然后，使用`addEventListener`方法為`button`元素添加一個(gè)`click`事件監(jiān)聽器。當(dāng)按鈕被點(diǎn)擊時(shí)，觸發(fā)回調(diào)函數(shù)。在回調(diào)函數(shù)中，我們定義了一個(gè)名為`audioUrl`的常量，它存儲(chǔ)了所需的音頻文件的URL。然后，我們調(diào)用`playAudio`函數(shù)并將`audioUrl`作為參數(shù)傳遞給它，以便播放指定的音頻文件。最后，我們將一條消息記錄到控制臺(tái)，指示正在播放哪個(gè)音頻文件。

結(jié)束

我們可以使用JavaScript通過使用Audio構(gòu)造函數(shù)創(chuàng)建一個(gè)音頻播放器對(duì)象來在網(wǎng)站上播放通知聲音。

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。

常提示看似是個(gè)不起眼的工作，但是這極大考驗(yàn)產(chǎn)品和交互設(shè)計(jì)師的功底。清晰的思考路徑和明確的決策依據(jù)至關(guān)重要，今天就來梳理一下產(chǎn)品異常提示需要注意的關(guān)鍵點(diǎn)。

01 從原因角度分析梳理

要根據(jù)不同的原因，“包裝”后展示給用戶的操作界面。原因可以簡(jiǎn)要分為以下3種：

（1）前端沒有辦法把請(qǐng)求傳遞給后端；

（2）后端返回超時(shí)；

（3）后端返回的數(shù)據(jù)出現(xiàn)異常；

基于以上三種類別再進(jìn)行細(xì)分：

1. 如果能明確知道是手機(jī)網(wǎng)絡(luò)問題，可清晰明確地引導(dǎo)用戶進(jìn)行操作提示，如“網(wǎng)絡(luò)斷開，請(qǐng)檢查網(wǎng)絡(luò)”;
2. 如果是其他非用戶本身導(dǎo)致的問題，需要再次分析是否能通過刷新頁(yè)面進(jìn)行解決。如果可以通過“刷新”來解決，需提供給用戶“刷新重試”按鈕，避免用戶因?yàn)檎也坏浇鉀Q方法，快速流失。當(dāng)然也需要提供給返回或關(guān)閉的按鈕，讓用戶有路可退。
3. 有很多問題無(wú)須直接反饋給用戶，也無(wú)需根據(jù)每種情況進(jìn)行針對(duì)性地提示，這時(shí)可以統(tǒng)一用“頁(yè)面開小差or頁(yè)面丟失”+錯(cuò)誤碼（下圖熒光色）的形式展示給用戶，錯(cuò)誤碼的作用是輔助相關(guān)人員（運(yùn)維）進(jìn)行問題的迅速定位和排查。

02 從頁(yè)面獲取的形式

用戶做操作后的反饋狀態(tài)主要為3種狀態(tài)：

（1）操作后，跳轉(zhuǎn)到新頁(yè)面，主要是搜索/展示類行為的結(jié)果反饋頁(yè)面——適合頁(yè)面相對(duì)獨(dú)立，且信息內(nèi)容較多的頁(yè)面。舉例：點(diǎn)擊頂部/底部TAB欄，搜索結(jié)果頁(yè)等；

（2）操作后，仍停留在該頁(yè)面，但是會(huì)以抽屜式的側(cè)邊欄的形式進(jìn)行展現(xiàn)——適合與當(dāng)前的主界面有一定的關(guān)聯(lián)性，但所展示的信息不是太多，操作和交互較為簡(jiǎn)單。舉例：視頻下載時(shí)的選集，火車票的日期選擇等；

（3）操作后，仍停留在該頁(yè)面，但是會(huì)基于用戶的行為進(jìn)行反饋提示——適合操作后僅對(duì)狀態(tài)進(jìn)行的改動(dòng)，并不需要獲取更多信息的情況，如關(guān)注成功，加入購(gòu)物車成功，優(yōu)惠券領(lǐng)取成功等提示。

可以通過2種方式進(jìn)行展現(xiàn)：

1. 采用全局提示的方法，多采用輕量級(jí)的toast對(duì)用戶的行為進(jìn)行反饋；
2. 采用多態(tài)按鈕，根據(jù)按鈕自身的狀態(tài)變化進(jìn)行直觀展示，也是很好的方法；

3種狀態(tài)對(duì)應(yīng)的異常提示樣式

頁(yè)面的異常提示，取決于數(shù)據(jù)獲取的方式，采用全局提示或局部區(qū)域進(jìn)行提示，不同頁(yè)面反饋的形式，彼此之間也有所差別。

03 從用戶的操作成本和敏感點(diǎn)選擇合適的提示方式

不同類別的產(chǎn)品，用戶在體驗(yàn)的過程中會(huì)有不同的關(guān)注點(diǎn)和敏感點(diǎn)，根據(jù)操作成本和敏感點(diǎn)的高低進(jìn)行針對(duì)性地分析。

（1）當(dāng)用戶在當(dāng)前頁(yè)面的操作成本較高且進(jìn)行提交時(shí)，如果出現(xiàn)異常情況，切記不要引導(dǎo)用戶刷新頁(yè)面或跳轉(zhuǎn)到404頁(yè)面，這都會(huì)造成當(dāng)前頁(yè)面填寫的信息丟失。因此，建議停留在該頁(yè)面，以彈窗的形式告知用戶當(dāng)前狀態(tài)，并將選擇權(quán)交給用戶。

（2）當(dāng)用戶的行為涉及到敏感點(diǎn)時(shí)，如金錢交易。這時(shí)也是需要給用戶清晰明確的結(jié)果，如果此刻結(jié)果并未產(chǎn)生，也要告知用戶在哪個(gè)頁(yè)面可以查到對(duì)應(yīng)結(jié)果，或進(jìn)行客服咨詢等。這樣不僅可以緩解用戶的焦躁，也是讓用戶對(duì)產(chǎn)品產(chǎn)生信任感的關(guān)節(jié)環(huán)節(jié)喲~~

小結(jié)

以上是我對(duì)異常提示的總結(jié)歸納，希望對(duì)你有用，也歡迎大家與我在評(píng)論區(qū)與我討論。這些細(xì)節(jié)往往是產(chǎn)品經(jīng)理容易忽略的，或在設(shè)計(jì)時(shí)并沒有考慮到產(chǎn)品本身的特點(diǎn)，只是進(jìn)行的盲目照搬，但是細(xì)節(jié)也往往是影響用戶體驗(yàn)的關(guān)鍵因素。

本文由@黑心老巫婆 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議