web網(wǎng)頁界面如何給前端標注、切圖？
時間：2024-02-16 02:55:01 | 來源：網(wǎng)站運營
時間：2024-02-16 02:55:01 來源：網(wǎng)站運營
web網(wǎng)頁界面如何給前端標注、切圖？：網(wǎng)頁界面的標注和切圖在早些時期確實是很困擾設(shè)計師的事情。
先說說標注，以前標注是在ps中做各種距離的標尺線在賦予數(shù)字說明，直接使用ps標注插件或者像素大廚等第三方工具，這種標注方式現(xiàn)在也有很多在使用，這種方式優(yōu)點在于前端同學(xué)可以直接在平面上體現(xiàn)各個空間的標注尺寸，缺點在于輸出后界面比較亂，需要輸出效果圖及標注兩種，不易于優(yōu)化修改?，F(xiàn)在很多第三方或者一些插件能直接識別輸出html文件過保存網(wǎng)站中，前端選擇某個空間會直接顯示具體數(shù)據(jù)(還能直接給出代碼哦)，我自己用的measure直接導(dǎo)出html文件，還有在線的zeplin，前提是用sketch。ps的同學(xué)也有藍湖這種第三方協(xié)作平臺。
再是切圖，主要注意切圖片在實際使用中需要的大小，有些需要和留白一起切；圖片的物理大小不易過大；icon類的圖標看情況在重復(fù)性高、基數(shù)大、扁平化的情況下建議使用字體包。
移動端和pc的差異標注基本都沒有，如果需要設(shè)計不同分辨率的情況看公司需要幾套設(shè)計稿(一般一套就行)但標注同樣標注，有需要注明的地方文字說明則可以。切圖的話移動端2倍圖和3倍圖，pc端看項目是否要在mac上的需求，畢竟圖片大也影響使用速度啊。
好了說了這么多，其實各個公司也會有不同的環(huán)境和準則，如果公司已經(jīng)使用習(xí)慣一套方案可以先按照之前的習(xí)慣來，在慢慢把自己的想法和工具推廣出去，畢竟好的、效率高的東西大家都喜歡。
在線咨詢