UI設計必備基礎知識2

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

　　形狀和對象

 

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

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

　　如果你將計劃設計界面，那么你的做好準備，因為在大部分時間你就是個沒有感情的移動矩形機器人。(矩形是一個在界面設計中很流行的形狀(在橢圓之前)
 

　　UI設計的基本思想就是通過一些恰當的手段來改變矩形

 

　　盒子模型
 

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

 

　　Fill 填充
 

　　Border 邊框
 

　　Outer margin 外邊距
 

　　Inner margin 內邊距
 

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

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

　　定義屬性
 

　　大小
 

　　寬度和和高度(以點為單位)定義了對象的大小。在大多數情況下我們使用W和H來簡稱。因為是二維空間，寬度就是水平軸上的刻度，高就是垂直軸上的刻度。
 

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

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

 

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

 

　　位置
 

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

 

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

 

　　角度
 

　　角度定義了對象順時針旋轉的角度，一般默認0°，旋轉當然也是可以是負數。值得記住的是，比如-15°，他其實是360-15°(345°)

 

　　為了的到一個一直的效果，請不要手動的旋轉對象，而是從鍵盤輸入數值，因為這比手動旋轉精確的多。
 

　　邊界半徑
 

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

 

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

 

　　如何你決定用這種方式設計按鈕記得保存一致性哦!
 

　　希望以上內容對你學UI設計有一定的幫助和提升，因此，您現在已經了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關在該領域工作的更多相關文章。