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