想做網站設計的工作，除了ps還需要學什么?
時間：2023-12-12 20:30:02 | 來源：網站運營
時間：2023-12-12 20:30:02 來源：網站運營
想做網站設計的工作，除了ps還需要學什么?：正所謂“工欲善其事，必先利其器”。選擇一款好的工具可以極大地提升工作效率。作為互聯(lián)網行業(yè)的設計師，我們清晰感知設計與藝術最大的不同就是：設計的終極目標是為了解決問題，而設計工具更是直接影響我們思考問題和解決問題的能力。
為了更好的提高互聯(lián)網設計師的工作效率，新一代UI設計神器：Codefun 誕生了！下面就為大家詳細介紹這款設計工具。
codefun了解一下喲！
CodeFun 是一款UI 設計稿智能生成源代碼的工具，我們可以上傳 Sketch、PSD等形式的設計稿，通過智能化技術一鍵生成可維護的前端代碼，包含視圖代碼、數(shù)據(jù)字段綁定、組件代碼、部分業(yè)務邏輯代碼。
在對設計稿輕約束的前提下實現(xiàn)高度還原，釋放前端生產力，助力前端與設計師高效協(xié)作，讓前端工程師關注更具挑戰(zhàn)性的事情。在日常工作中，諸如像扣像素、調布局這些繁瑣、枯燥的體力活都將得到極大的削減，原來 8 小時的工作量只需要 10 來分鐘即可完成。
白嫖的，很香，免費的！去年6月剛出來！CodeFun官網，免費使用，免費使用：https://code.fun/流程：CodeFun的官網[7]上下載其sketch插件，在sketch中打開插件的面板選擇上傳此設計稿，然后就可以去官網我們的項目里查看。
1.是否還原設計稿：很驚喜，CodeFun 這個還原的比上面兩者都要好，和設計稿看起來幾乎100%。
2. 布局識別的準確性：完美的識別出了我們期待的布局，
但是這里要提一下的是，CodeFun 不僅識別除了均分的flex布局，而且相比 imgcook 沒有定寬，而是使用了flex-grow:1效果如圖：
看代碼可以看到，部分公共的樣式都被翻譯到了
equal-division-item這個class里面，幾個box都共享上了，唯獨
flex-grow:1被單獨弄成了
group_16 17 18，造成了一些冗余的css代碼，這么復雜的識別都做到了，這里是不是個bug呢？
3. 代碼可維護性css 代碼生成 597 + 81 = 678 行（主代碼+公共代碼），比
Picasso的
1289行和
imgcook的
1870行分別減少了47%和
64%。
雖然類名還是有些不語義化，但是已經是去除了寫死的寬高，同類型進行了合并抽取出了公共代碼。
4. List自動識別，分組CodeFun 能自動識別出下面三個結構相似的訂單模塊，并進行分組，將三個塊外面包了一個wrapper，符合我們開發(fā)人員日常寫代碼的習慣
5. 列表循環(huán)識別因為已經識別出了下面三個結構相似的模塊，于是vue代碼會自動以
v-for列表循環(huán)的方式展現(xiàn)。
如果想要抽離數(shù)據(jù)，可以通過上方的數(shù)據(jù)綁定自定義字段名（一般我們會綁定為后端傳過來的字段名）。
6. 總結雖然說對于類名上，還是需要自己進行修改（不過對于一些維護不需要這么頻繁的頁面，也可以不進行修改類名），但是對于以上我列出的 5 點都已經完美地進行解析了。CodeFun也是通過AI模型來進行智能化訓練，但訓練的效果比imgcook更加強大。
最后想體驗的話可以進入官網：https://code.fun/再說一遍，這個工具是完全免費的，白嫖的資源不香嗎？
在線咨詢
