如何用AI生成設(shè)計稿？實戰(zhàn)案例演示來了?。ㄏ拢?/h1>
2023-12-27 09:54:55
一、實際業(yè)務(wù)中組件庫的難題
1. 組件使用要"天時、地利、人和"
組件雖好，卻不一定適合你的團(tuán)隊，在使用組件、搭建組件庫時，會遇到各種問題，下面列舉實際業(yè)務(wù)中可能遇到的部分問題：
①一開始，建立大而全的組件庫：
建立組件庫的目的是為了讓同事調(diào)用，從而去保持產(chǎn)品設(shè)計的一致性和性能的優(yōu)化。
談到組件庫，大部分人都覺得要設(shè)置一個大而全的組件庫，不然稱不上組件庫，但是在實際工作的數(shù)據(jù)中，長期調(diào)用的組件只占到 20%，有些組件調(diào)用甚至是個位數(shù)，一開始把精力放在完善組件庫上，投入產(chǎn)出比不高。
第二個容易遇到的問題，團(tuán)隊成員從不用組件到開始用組件，會存在學(xué)習(xí)成本提升的問題，如果一開始就面對海量的組件，會有畏難心理，在短暫的時間內(nèi)，他需要花更多的時間去了解組件的挑選和使用，過難會入門即勸退，倒不如剛開始只把業(yè)務(wù)高頻使用的模塊給組件化，如按鈕、TAB
等，后續(xù)隨著團(tuán)隊成員的對組件熟悉的增加，再同步補(bǔ)充組件庫樣式，F(xiàn)igma 有組件庫調(diào)用的數(shù)據(jù)，哪些用的多，哪些用的少，都能了解到。
②人員更替，跨團(tuán)隊協(xié)作：
團(tuán)隊的人員更替在所難免，當(dāng)團(tuán)隊成員更替時，新成員可能需要花費(fèi)大量時間來理解和學(xué)習(xí)現(xiàn)有的組件庫結(jié)構(gòu)。對應(yīng)的解決措施是做好組件庫的新人手冊，一勞永逸。
此外，搭建組件庫需要耗費(fèi)大量時間，而且這通常是在項目需求之外的工作。組件庫的建立需要進(jìn)行設(shè)計、開發(fā)、測試和文檔編寫等工作，這些工作可能與項目的緊迫性需求相沖突，因此需要額外的時間和資源來完成。
為了成功地建立組件庫，團(tuán)隊可能需要領(lǐng)導(dǎo)的支持和認(rèn)可，包括資源投入、時間安排和人員配備等方面的支持，這可能需要進(jìn)行有效的溝通和推動。
③了解一些簡單技術(shù)：
設(shè)計團(tuán)隊需要了解 Figma 的基本原理和組件的使用方式，同時要對開發(fā)框架中對應(yīng)的組件形式有一定的了解，以便于能夠?qū)?Figma 中的組件轉(zhuǎn)化為可用的前端組件，也可以多跟開發(fā)人員溝通，了解他們需要怎樣的組件形式，關(guān)系好，沒有什么是不能解決的。
這些難點(diǎn)，可能在看這篇文章的時候覺得問題不大，能克服，但是到實際項目中，卻有可能成為阻塞點(diǎn)。
組件搭建和使用建議：
從常用的組件開始，小成本實驗：可以從常用的彈窗、按鈕、任務(wù)欄等進(jìn)行嘗試。組件設(shè)計的目的就是節(jié)省大家的時間，提高效率，如果一開始就設(shè)計得大而全，且缺少實際的使用場景，那么就不會有同事去調(diào)用它。
同時要做好上手介紹，大家都是有惰性的，如果沒有組件使用的習(xí)慣，那么只會按照自己原來的方式去構(gòu)建文檔，因為這樣不會有新的學(xué)習(xí)成本。
盡量用英文命名，為后續(xù) AI 生成頁面提供便利，ChatGPT 對英文的命名更敏感，產(chǎn)出時不易出錯。
2. 現(xiàn)階段 AI To Code /Design To Code 難
我們使用組件和搭建組件庫，一方面是為了同事間相互調(diào)用，減少重復(fù)發(fā)明輪子，另一方面，也是為了當(dāng) AI 生成頁面來臨之時，我們有獨(dú)特的、不可替代的業(yè)務(wù)組件，去進(jìn)行頁面生成。在這一段落，將討論 AI 轉(zhuǎn)頁面、設(shè)計轉(zhuǎn)界面的問題。
嵌套層級難處理：
AI 產(chǎn)生的代碼當(dāng)前僅適用于簡單的布局和組件，而對于復(fù)雜的嵌套關(guān)系和動態(tài)邏輯處理則顯得力不從心。
在 Figma 中，組件的嵌套層級可能與前端實現(xiàn)中的 DOM 結(jié)構(gòu)不完全匹配，需要設(shè)計和開發(fā)團(tuán)隊共同協(xié)商如何將這些差異解決，以確保組件能夠在設(shè)計和實現(xiàn)中保持一致。
與實際開發(fā)場景不同，AI 產(chǎn)出的一般會是并列關(guān)系，實際開發(fā)中一般是嵌套關(guān)系，舉例：有些設(shè)計師也很少分組，一個頁面就是一個分組，這樣對于設(shè)計稿轉(zhuǎn)代碼會帶來困難，會使得 AI 不理解你的頁面層級。
同時，其實可以將設(shè)計稿的層級，以文字的形式輸出給 chatGPT，輔助它輸出正確的嵌套層級，這也是一個不錯的方法。
補(bǔ)充：當(dāng)前的部分視覺方案也是基于視覺識別，覺得你這里分割過大，看起來像是 2 個模塊，那就是兩個模塊。通過交集、并集、父子集來判斷。
二、組件庫和 AI 結(jié)合的優(yōu)勢和局限性
1. 優(yōu)勢
減少重復(fù)勞動：結(jié)合前端組件庫和 AI 生成代碼的能力，可以大大加速頁面開發(fā)過程，減少重復(fù)勞動，提高生產(chǎn)力。
統(tǒng)一設(shè)計風(fēng)格：通過使用設(shè)計組件和 AI 生成代碼，可以確保頁面設(shè)計的一致性。
高可維護(hù)性：使用組件庫和 AI 生成的代碼可以提高代碼的可維護(hù)性，因為它們遵循一致的結(jié)構(gòu)和設(shè)計原則。
2. 局限性
語義理解局限：當(dāng)前 AI 在理解人工語義方面仍存在局限性，可能無法準(zhǔn)確理解所有的語義和業(yè)務(wù)需求，導(dǎo)致生成的代碼不符合預(yù)期。
定制化困難：對于某些定制化、特殊化的設(shè)計需求，AI 生成的代碼可能無法滿足，需要手動調(diào)整和編寫代碼，比如運(yùn)營活動就比較難實現(xiàn)。
設(shè)計復(fù)雜性：在處理復(fù)雜的設(shè)計組件和布局時，AI 生成的代碼可能無法完全滿足設(shè)計師的需求，需要人工干預(yù)。
綜合而言，結(jié)合前端組件和 AI 生成代碼的能力可以極大地提升頁面設(shè)計的效率和一致性，但在實際應(yīng)用中需要克服語義理解、定制化支持、人工干預(yù)以及性能，以實現(xiàn)更加智能和高效的頁面設(shè)計過程。
糊涂的工蜂
想了解更多網(wǎng)站技術(shù)的內(nèi)容，請訪問：網(wǎng)站技術(shù)
免責(zé)聲明：部分文章信息來源于網(wǎng)絡(luò)以及網(wǎng)友投稿，本網(wǎng)站只負(fù)責(zé)對文章進(jìn)行整理、排版、編輯，是出于傳遞更多信息之目的，并不意味著贊同其觀點(diǎn)或證實其內(nèi)容的真實性，不承擔(dān)任何法律責(zé)任。
一、實際業(yè)務(wù)中組件庫的難題
1. 組件使用要"天時、地利、人和"
組件雖好，卻不一定適合你的團(tuán)隊，在使用組件、搭建組件庫時，會遇到各種問題，下面列舉實際業(yè)務(wù)中可能遇到的部分問題：
①一開始，建立大而全的組件庫：
建立組件庫的目的是為了讓同事調(diào)用，從而去保持產(chǎn)品設(shè)計的一致性和性能的優(yōu)化。
談到組件庫，大部分人都覺得要設(shè)置一個大而全的組件庫，不然稱不上組件庫，但是在實際工作的數(shù)據(jù)中，長期調(diào)用的組件只占到 20%，有些組件調(diào)用甚至是個位數(shù)，一開始把精力放在完善組件庫上，投入產(chǎn)出比不高。
第二個容易遇到的問題，團(tuán)隊成員從不用組件到開始用組件，會存在學(xué)習(xí)成本提升的問題，如果一開始就面對海量的組件，會有畏難心理，在短暫的時間內(nèi)，他需要花更多的時間去了解組件的挑選和使用，過難會入門即勸退，倒不如剛開始只把業(yè)務(wù)高頻使用的模塊給組件化，如按鈕、TAB 等，后續(xù)隨著團(tuán)隊成員的對組件熟悉的增加，再同步補(bǔ)充組件庫樣式，F(xiàn)igma 有組件庫調(diào)用的數(shù)據(jù)，哪些用的多，哪些用的少，都能了解到。
②人員更替，跨團(tuán)隊協(xié)作：
團(tuán)隊的人員更替在所難免，當(dāng)團(tuán)隊成員更替時，新成員可能需要花費(fèi)大量時間來理解和學(xué)習(xí)現(xiàn)有的組件庫結(jié)構(gòu)。對應(yīng)的解決措施是做好組件庫的新人手冊，一勞永逸。
此外，搭建組件庫需要耗費(fèi)大量時間，而且這通常是在項目需求之外的工作。組件庫的建立需要進(jìn)行設(shè)計、開發(fā)、測試和文檔編寫等工作，這些工作可能與項目的緊迫性需求相沖突，因此需要額外的時間和資源來完成。
為了成功地建立組件庫，團(tuán)隊可能需要領(lǐng)導(dǎo)的支持和認(rèn)可，包括資源投入、時間安排和人員配備等方面的支持，這可能需要進(jìn)行有效的溝通和推動。
③了解一些簡單技術(shù)：
設(shè)計團(tuán)隊需要了解 Figma 的基本原理和組件的使用方式，同時要對開發(fā)框架中對應(yīng)的組件形式有一定的了解，以便于能夠?qū)?Figma 中的組件轉(zhuǎn)化為可用的前端組件，也可以多跟開發(fā)人員溝通，了解他們需要怎樣的組件形式，關(guān)系好，沒有什么是不能解決的。
這些難點(diǎn)，可能在看這篇文章的時候覺得問題不大，能克服，但是到實際項目中，卻有可能成為阻塞點(diǎn)。
組件搭建和使用建議：
從常用的組件開始，小成本實驗：可以從常用的彈窗、按鈕、任務(wù)欄等進(jìn)行嘗試。組件設(shè)計的目的就是節(jié)省大家的時間，提高效率，如果一開始就設(shè)計得大而全，且缺少實際的使用場景，那么就不會有同事去調(diào)用它。
同時要做好上手介紹，大家都是有惰性的，如果沒有組件使用的習(xí)慣，那么只會按照自己原來的方式去構(gòu)建文檔，因為這樣不會有新的學(xué)習(xí)成本。
盡量用英文命名，為后續(xù) AI 生成頁面提供便利，ChatGPT 對英文的命名更敏感，產(chǎn)出時不易出錯。
2. 現(xiàn)階段 AI To Code /Design To Code 難
我們使用組件和搭建組件庫，一方面是為了同事間相互調(diào)用，減少重復(fù)發(fā)明輪子，另一方面，也是為了當(dāng) AI 生成頁面來臨之時，我們有獨(dú)特的、不可替代的業(yè)務(wù)組件，去進(jìn)行頁面生成。在這一段落，將討論 AI 轉(zhuǎn)頁面、設(shè)計轉(zhuǎn)界面的問題。
嵌套層級難處理：
AI 產(chǎn)生的代碼當(dāng)前僅適用于簡單的布局和組件，而對于復(fù)雜的嵌套關(guān)系和動態(tài)邏輯處理則顯得力不從心。
在 Figma 中，組件的嵌套層級可能與前端實現(xiàn)中的 DOM 結(jié)構(gòu)不完全匹配，需要設(shè)計和開發(fā)團(tuán)隊共同協(xié)商如何將這些差異解決，以確保組件能夠在設(shè)計和實現(xiàn)中保持一致。
與實際開發(fā)場景不同，AI 產(chǎn)出的一般會是并列關(guān)系，實際開發(fā)中一般是嵌套關(guān)系，舉例：有些設(shè)計師也很少分組，一個頁面就是一個分組，這樣對于設(shè)計稿轉(zhuǎn)代碼會帶來困難，會使得 AI 不理解你的頁面層級。
同時，其實可以將設(shè)計稿的層級，以文字的形式輸出給 chatGPT，輔助它輸出正確的嵌套層級，這也是一個不錯的方法。
補(bǔ)充：當(dāng)前的部分視覺方案也是基于視覺識別，覺得你這里分割過大，看起來像是 2 個模塊，那就是兩個模塊。通過交集、并集、父子集來判斷。
二、組件庫和 AI 結(jié)合的優(yōu)勢和局限性
1. 優(yōu)勢
減少重復(fù)勞動：結(jié)合前端組件庫和 AI 生成代碼的能力，可以大大加速頁面開發(fā)過程，減少重復(fù)勞動，提高生產(chǎn)力。
統(tǒng)一設(shè)計風(fēng)格：通過使用設(shè)計組件和 AI 生成代碼，可以確保頁面設(shè)計的一致性。
高可維護(hù)性：使用組件庫和 AI 生成的代碼可以提高代碼的可維護(hù)性，因為它們遵循一致的結(jié)構(gòu)和設(shè)計原則。
2. 局限性
語義理解局限：當(dāng)前 AI 在理解人工語義方面仍存在局限性，可能無法準(zhǔn)確理解所有的語義和業(yè)務(wù)需求，導(dǎo)致生成的代碼不符合預(yù)期。
定制化困難：對于某些定制化、特殊化的設(shè)計需求，AI 生成的代碼可能無法滿足，需要手動調(diào)整和編寫代碼，比如運(yùn)營活動就比較難實現(xiàn)。
設(shè)計復(fù)雜性：在處理復(fù)雜的設(shè)計組件和布局時，AI 生成的代碼可能無法完全滿足設(shè)計師的需求，需要人工干預(yù)。
綜合而言，結(jié)合前端組件和 AI 生成代碼的能力可以極大地提升頁面設(shè)計的效率和一致性，但在實際應(yīng)用中需要克服語義理解、定制化支持、人工干預(yù)以及性能，以實現(xiàn)更加智能和高效的頁面設(shè)計過程。
糊涂的工蜂
想了解更多網(wǎng)站技術(shù)的內(nèi)容，請訪問：網(wǎng)站技術(shù)
