UI界面設(shè)計基礎(chǔ)知識！

　　較好章：形狀和對象

　　圖像是怎么創(chuàng)建的？

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

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

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

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

　　UI design is about moving rectangles around.And the skill is all in knowing HOW to move them,WHERE and most importantly WHY.

　　盒子模型

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

　　Fill填充

　　Border邊框

　　Outer margin外邊距

　　Inner margin內(nèi)邊距

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

　　邊框：就是包裹我們對象的輪廓（描邊）。在下個章節(jié)我們會深入的探討這個東西

　　外邊距：就是對象之外的區(qū)域，他使我們的對象周圍擁有足夠的安全空間

　　內(nèi)邊距：區(qū)域越大，我們物體的安全區(qū)域就遠大

　　定義屬性

　　大小

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

　　簡而言之，點和像素是不一樣的。分辨率和像素密度是另一篇文章的主題，所以為了簡短起見：點是像素的向量表示，它依賴于分辨率。在現(xiàn)代，像素密度非常高的顯示器上，1個點可以是4個像素或多。這樣做的原因是要有足夠大的元素，但也要給它們足夠的清晰度和度。

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

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

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

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

　　為了的到一個一直的效果，請不要手動的旋轉(zhuǎn)對象，而是從鍵盤輸入數(shù)值，因為這比手動旋轉(zhuǎn)的多。

　　邊界半徑

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

　　邊界半徑只是一個數(shù)值，就像寬度和高度一樣，它也是用點表示，數(shù)值越大，形狀的圓角就越圓。你可以單獨對一個地方使用，也可以多個地方使用。一般來說2到6p也比0p來的友好。如何你決定用這種方式設(shè)計按鈕記得保存一致性哦！

　　第二章：填充與邊框

　　填充

　　正如我們前面所表述的，大多數(shù)UI設(shè)計都是關(guān)于移動矩形。那么讓我們從一個矩形開始吧！

　　當你創(chuàng)建一個新的矩形，他會默認自帶一個填充，大多數(shù)情況下他是灰色的，所以你要記得自己改變顏色，有時候他還會有個邊界。為啥是灰色呢，因為灰色足夠中性，你添加新的形狀也不會搞壞你之前做的界面，而且你可以很容易看見他。

　　簡單的填充是對象背景的另一個名字，它可以是純色、漸變、或者是照片，他們還可以有不同程度的透明度。

　　提示

　　大多數(shù)現(xiàn)代設(shè)計工具都允許使用鍵盤上的數(shù)字來控制透明度。只需選擇對象后按1、2等等就會改變透明度。0是在之百和之0間進行切換。

　　如果一個對象沒有填充，也沒有邊框或者效果，那么他就在界面中不可見，因為他需要被定義一些特征方才可見。但是你任然可以選擇它、移動他、修改它。它也任然在你的圖層列表中存在。

　　填充的類型

　　填充有三種可選性，單一顏色、漸變或者圖像背景。當然你也可以選擇不要填充。

　　以前，圖案被認為是另一種填充，但是事實上它只一個元素的不斷平鋪，所以他屬于圖像類別。

　　堆積填充

　　你可以向?qū)ο筇砑佣鄠€填充類型。顯然，要想這個效果起作用，那么某個填充必須具有透明屬性。否則你只能看見頂部的圖層。

　　漸變填充

　　你可以使用這個原則來實現(xiàn)非常有趣的多重疊加漸變效果。就像上圖一樣，創(chuàng)建四個漸變，然后讓他們每個對應(yīng)的角落都透明掉。

　　邊框

　　邊框（描邊）是繼填充后。對象能具有的第二個樣式

　　邊框就是描邊，也是圍繞對象一周的一條線。他可以在對象內(nèi)（內(nèi)描邊）也可以在對象外（外描邊），甚至可以在入門之間（居中描邊）。但是請記住，只有內(nèi)描邊才視覺上使對象變大。

　　在上圖中，我們的矩形大小60*60，描邊是10，中間圖形的描邊使矩形每邊多了5，而較后一個使其每邊多了10。

　　描邊樣式

　　描邊可以有不同的粗細，也可以是虛線，也可以使用顏色填充和漸變填充。

　　大多數(shù)設(shè)計工具還允許修改結(jié)尾和拐角的樣式。兩端可以是平的圓的尖銳的等等樣式。

　　如果你的界面一般都是圓形，那么你的描邊開始結(jié)尾拐角盡量設(shè)置為圓形，這樣會具統(tǒng)一性。如果沒有請保持默認！

　　第三章：對象的投影與陰影

　　投影

　　外部投影是UI設(shè)計中是較常見的效果，他就是典型的需要依賴于中心（X、Y)的偏移來完成偏移距離、模糊度、不透明度。在上圖中，我們可以看見陰影在y軸向下位移了20PX，然后我們給左邊的進行模糊，或者像右邊這樣不模糊。

　　像Sketch等這樣的工具都具有一個叫散布或者是擴散（Spread）的屬性,這個東西使得陰影看起像是個很小的東西在投射陰影。

　　在投影中較重要的是X、Y和模糊的數(shù)值。后者必須是大于0的數(shù)值，而X、Y也可以是負值，這樣他幾乎可以籠罩到每個方向。

　　你可以通過向同一個對象添加多個投影來獲得有趣的效果?？聪聢D就有三個藍色的投影，他們給個都向下移動3px

　　Neumorphism（新你太美）

　　說到投影，我們不得不說說這個較近火的P爆的新你太美效果。他就是靠投影的模糊和X、Y值的疊加使用來作為核心原則實現(xiàn)。

　　自然的外觀，柔和的投影

　　那些看起自然的投影是決定了你設(shè)計好壞的重要影響因素?？雌饋碜匀坏姆椒ň褪潜苊馐褂眉兒谏队昂椭苯邮褂帽倔w的主色。純黑色使得對比度過大，看起來又臟又不自然。

　　解決這個投影的較好方法就是從默認（黑色）改為主色調(diào)的深色，然后在降低其透明度。上面的案列我們可以使用暗紫色來將其透明度降低達到其完美的效果。

　　內(nèi)陰影

　　內(nèi)陰影在UI設(shè)計中是比較少見的，它具有投影一樣的參數(shù)，但是它是出現(xiàn)在對象內(nèi)部的。所以他不是很受大家喜歡。還有就是我們的大多數(shù)界面都是由一系列的對象層疊起來的，在這種情況下，一個外部投影就很有意義了，因為它提供了深度，而內(nèi)部陰影表明該對象上面有個洞。左邊的例子我們可以看到是一個典型的有深度的堆棧層，在大對數(shù)情況下都能看見。添加一個內(nèi)陰影在任何層就可以導(dǎo)致這個層破了個洞的幻覺。這就打破了我們的堆棧層的視覺架構(gòu)。

　　種風(fēng)格的用例就是表單輸入（輸入框、復(fù)選框、單選按鈕）和Neumorphism風(fēng)格的創(chuàng)建。在某些情況下它可以使對象看起來逼真，但是只能適度的使用。

　　你可以通過在物體上使用內(nèi)陰影來達到這種效果，而且你還可以反轉(zhuǎn)X、Y的方向。

　　對于新你太美這個風(fēng)格，他的可選與不可選是由內(nèi)陰影或者是投影來決定的，所以這讓他在選定狀態(tài)與標準狀態(tài)下的可感知差異太小，以至于即使是非視力受損的人也會完全忽略他。這就導(dǎo)致這種風(fēng)格的可達性缺陷。

　　模糊

　　大多數(shù)的設(shè)計工具都擁有一個叫高斯模糊的效果，它會使效果均勻的分散到每個方向，影響他的主要是半徑的值，半徑越大，模糊效果就越明顯。

　　高斯模糊是較常見的模糊方式，你可以使用它來過度背景，或者是有選擇性的對一些背景進行模糊處理，來達到億點點真實的景深效果。