中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在進(jìn)行設(shè)計(jì)時(shí)，運(yùn)用一些小技巧，有時(shí)會(huì)起到事半功倍的效果。本文作者總結(jié)了一些日常工作中經(jīng)常會(huì)用到的figma小技巧，希望能給你帶來(lái)幫助。

今天分享的figma小技巧都是日常工作中經(jīng)常會(huì)用到的，簡(jiǎn)單又干的總結(jié)，希望我們的效率都能夠提升一大截。

01 圖標(biāo)繪制中的小技巧

我們拿「V」icon來(lái)舉個(gè)例子，先來(lái)看下常規(guī)繪制步驟：

1. 先畫(huà)一個(gè)矩形
2. 然后旋轉(zhuǎn)角度、再?gòu)?fù)制一個(gè)、水平旋轉(zhuǎn)一下
3. 對(duì)齊后給圓角

這個(gè)時(shí)候發(fā)現(xiàn)有點(diǎn)太大了，需要調(diào)整一下高度：

問(wèn)題很明顯，調(diào)整完高度(H)度之后，我們又得進(jìn)行對(duì)齊調(diào)整，如果還是感覺(jué)不夠精致，又得重復(fù)前面的步驟。

效率不高還特?zé)┤?，就這么一個(gè)簡(jiǎn)單的icon來(lái)回調(diào)整幾分鐘有木有。

如果你像我一樣做的是375@1倍圖，圖標(biāo)粗細(xì)用的是1.5像素，這種情況下來(lái)回對(duì)齊就真的考驗(yàn)?zāi)愕南袼匮哿恕?/p>

出現(xiàn)這個(gè)問(wèn)題其實(shí)就是在繪制之前我們沒(méi)有經(jīng)過(guò)思考，比如說(shuō)這個(gè)圖標(biāo)的適應(yīng)場(chǎng)景，以及是否會(huì)出現(xiàn)調(diào)整大小的情況。

接著子阿來(lái)看下橙心是如何避免這種情況的出現(xiàn)：

1. 先畫(huà)一個(gè)矩形
2. 復(fù)制一個(gè)往上旋轉(zhuǎn)
3. 整體往上旋轉(zhuǎn)，給圓角

還是上面那個(gè)問(wèn)題，需要對(duì)高度進(jìn)行調(diào)整：

兩個(gè)步驟進(jìn)行對(duì)比一下，前者是往上縮放，后者是向下縮放。

后面這個(gè)操作步驟在不手動(dòng)調(diào)整對(duì)齊的情況下，除了可以隨意調(diào)整高度還能隨意調(diào)整寬度，自由度會(huì)更高。

那已經(jīng)繪制完了，想要避免不手動(dòng)調(diào)整對(duì)齊如何操作假設(shè)現(xiàn)在高（H）出現(xiàn)了第一種繪制的問(wèn)題，我們可以對(duì)其進(jìn)行水平翻轉(zhuǎn)、垂直翻轉(zhuǎn)一下。這個(gè)時(shí)候你調(diào)整高是沒(méi)有問(wèn)題的，但是要想調(diào)整整個(gè)寬你就又得(水+垂)調(diào)回去問(wèn)題就像是窟窿，一旦出現(xiàn)就不得不找一個(gè)個(gè)辦法來(lái)補(bǔ)救，所以一開(kāi)始就要想好如何避免。

總結(jié)一下，在繪制icon之前我們需要考慮3個(gè)問(wèn)題：

1. 繪制步驟的順序
2. 使用場(chǎng)景
3. 是否需要進(jìn)行高度、寬度上的調(diào)整

效率是如何提升的，就在這些不經(jīng)意的小細(xì)節(jié)當(dāng)中。

02 對(duì)齊

還是375@1倍圖下，經(jīng)常會(huì)遇到0.5px，比如下面這種情況：

點(diǎn)底部對(duì)齊是搞不定的，你是否會(huì)想著我手動(dòng)去調(diào)整對(duì)齊，那就有點(diǎn)傻了。

這里只需要把「對(duì)齊像素」關(guān)了，使用快捷鍵：S+C+逗號(hào)，然后再點(diǎn)一下底部對(duì)齊，更速度。

比如這種情況，實(shí)際間距是1.5px，但是你看操作面板是顯示2px，數(shù)據(jù)對(duì)不上怎么辦？手動(dòng)去調(diào)整也是搞不定的。

這里同樣是把「對(duì)齊像素」關(guān)了，然后手動(dòng)輸入一個(gè)數(shù)值進(jìn)去，再去看下就是一致的了還有比如說(shuō)：0.5px的分割線(xiàn)。

一開(kāi)始沒(méi)太注意，直接繪制完就居中、底部對(duì)齊，如果不放大仔細(xì)去看，壓根發(fā)現(xiàn)不了其實(shí)是沒(méi)有對(duì)齊。

方法也是一樣「對(duì)齊像素」關(guān)了，然后再去底部對(duì)齊一下，你會(huì)發(fā)現(xiàn)它這次是貼著底部的。

前面提到的圖標(biāo)小技巧與這個(gè)方法搭配使用更nice。

效率是如何提升的，就是每一個(gè)細(xì)節(jié)都不容忽視。

03 圖標(biāo)歸類(lèi)命名規(guī)范

組件命名方式就像是圈層一樣，一圈套一圈，可能這里每個(gè)人的習(xí)慣會(huì)不一樣，所以命名方式也會(huì)有所不同。

這里簡(jiǎn)單的分享一下橙心的命名方式。

我們建規(guī)范的時(shí)候一般都會(huì)有一個(gè)習(xí)慣就是先歸好大類(lèi)，顏色、圖標(biāo)、組件等等，比如騰訊的這種方式。

讓人看起來(lái)就非常的實(shí)用、干凈、規(guī)范。

這里拿語(yǔ)雀APP的圖標(biāo)來(lái)做個(gè)命名使用場(chǎng)景定好大類(lèi)之后，再根據(jù)Tab來(lái)分小類(lèi)，比如語(yǔ)雀的Tab欄：小記、文檔、消息、我的。

到這一步的命名，如：小記/搜索、小記/消息再繼續(xù)往下可以分功能模塊以及子頁(yè)面，來(lái)延展一下，小記/搜索/刪除。

看完還發(fā)現(xiàn)自己不知道如何給組件命名，那就記住小標(biāo)題當(dāng)中的兩個(gè)字「歸來(lái)」。

思考一個(gè)問(wèn)題：要是你會(huì)如何去給組件進(jìn)行歸類(lèi)，然后能夠給自己提供方便？想明白這個(gè)問(wèn)題就去試一下吧。

不一定說(shuō)規(guī)范要做的多么的完整、多么的驚艷，能夠給你、給團(tuán)隊(duì)帶來(lái)效率才是一個(gè)好的規(guī)范。

當(dāng)然，橙心的這個(gè)方式不一定適合所有人、所有項(xiàng)目團(tuán)隊(duì)，但卻可以為我?guī)?lái)效率。

效率是如何提升的，做事要形成一個(gè)自己的方式方法。

以上就是今天的分享總結(jié)，如果你覺(jué)得那里有不明白或者你有更高的見(jiàn)解，歡迎一起交流討論。