UI設(shè)計(jì)必備基礎(chǔ)知識(shí)2

　　上次有人提建議要看看基礎(chǔ)一點(diǎn)的東西，今天AAA教育郭老師給大家?guī)砹?a href="http://m.lb577.com/ui/2652.html" target="_blank">必備基礎(chǔ)知識(shí)，這次我們將介紹兩種最常用的效果—形狀和對象，非常實(shí)用。
 

　　形狀和對象

 

　　圖像是怎么創(chuàng)建的?無論你是做低保真線框圖還是做個(gè)漂亮的界面你都需要使用形狀工具和一些圖像。那么你可以使用Figma、AdobeXD等等其他軟件來熟悉形狀工具的用法。
 

　　所以當(dāng)前的UI設(shè)計(jì)工具都是通過操縱一些矢量的形狀來進(jìn)行工作。這意味著你所看到的一切都是由定義形狀的數(shù)值來完成的，不管他是放大還是拉伸他就也只是變化了一個(gè)數(shù)值而已不會(huì)有任何的質(zhì)量損失。
 

　　如果你將計(jì)劃設(shè)計(jì)界面，那么你的做好準(zhǔn)備，因?yàn)樵诖蟛糠謺r(shí)間你就是個(gè)沒有感情的移動(dòng)矩形機(jī)器人。(矩形是一個(gè)在界面設(shè)計(jì)中很流行的形狀(在橢圓之前)
 

　　UI設(shè)計(jì)的基本思想就是通過一些恰當(dāng)?shù)氖侄蝸砀淖兙匦?br />
 

　　盒子模型
 

　　盒模型是在設(shè)計(jì)和代碼中定義的數(shù)字接口對象的最基本方法。我們所做的大多數(shù)設(shè)計(jì)都是根據(jù)盒子模型來設(shè)計(jì)的，所以很有必要了解它。

 

　　Fill 填充
 

　　Border 邊框
 

　　Outer margin 外邊距
 

　　Inner margin 內(nèi)邊距
 

　　填充：顧名思義就是元素的背景(他可以是純色、漸變、圖像，或者是前者的混合)
 

　　邊框：就是包裹我們對象的輪廓(描邊)。
 

　　定義屬性
 

　　大小
 

　　寬度和和高度(以點(diǎn)為單位)定義了對象的大小。在大多數(shù)情況下我們使用W和H來簡稱。因?yàn)槭嵌S空間，寬度就是水平軸上的刻度，高就是垂直軸上的刻度。
 

　　簡而言之，點(diǎn)和像素是不一樣的。分辨率和像素密度是另一篇文章的主題，所以為了簡短起見：點(diǎn)是像素的向量表示，它依賴于分辨率。
 

　　在現(xiàn)代，像素密度非常高的顯示器上，1個(gè)點(diǎn)可以是4個(gè)像素或更多。這樣做的原因是要有足夠大的元素，但也要給它們足夠的清晰度和精確度。

 

　　寬度和高度是一個(gè)可以容納最小矩形(包括對象本身是一個(gè)不規(guī)則的形狀)的容器。

 

　　位置
 

　　對象的位置是X、Y軸上的一組數(shù)值，這個(gè)由包含它的畫板來定義。X表示水平軸上的位置，Y表示垂直軸上的位置。

 

　　對于矩形和一些規(guī)則的圖形來說這就很容易了，但是對于一些不規(guī)則的圖形來說，那么他的位置就是包含的矩形的位置。

 

　　角度
 

　　角度定義了對象順時(shí)針旋轉(zhuǎn)的角度，一般默認(rèn)0°，旋轉(zhuǎn)當(dāng)然也是可以是負(fù)數(shù)。值得記住的是，比如-15°，他其實(shí)是360-15°(345°)

 

　　為了的到一個(gè)一直的效果，請不要手動(dòng)的旋轉(zhuǎn)對象，而是從鍵盤輸入數(shù)值，因?yàn)檫@比手動(dòng)旋轉(zhuǎn)精確的多。
 

　　邊界半徑
 

　　研究表明，圓形比尖銳的形狀更友好。為了定義圓度的等級(jí)，我們使用了一個(gè)詞叫邊界半徑(即圓角度數(shù))來定義它的屬性。

 

　　邊界半徑只是一個(gè)數(shù)值，就像寬度和高度一樣，它也是用點(diǎn)表示，數(shù)值越大，形狀的圓角就越圓。你可以單獨(dú)對一個(gè)地方使用，也可以多個(gè)地方使用。一般來說2到6p也比0p來的更友好。

 

　　如何你決定用這種方式設(shè)計(jì)按鈕記得保存一致性哦!
 

　　希望以上內(nèi)容對你學(xué)UI設(shè)計(jì)有一定的幫助和提升，因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。