如何用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ù)