本期和大家分享一下UI界面設計基礎知識，從形狀和對象、填充與邊框還有對象的投影與陰影這三個方向講起，一起來看看吧~

第一章：形狀和對象

 

圖像是怎么創建的？

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

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

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

 

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

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

 

盒子模型

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

• Fill 填充
• Border 邊框
• Outer margin 外邊距
• Inner margin  內邊距

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

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

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

內邊距：區域越大，我們物體的安全區域就遠大

 

定義屬性

大小

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

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

 

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

 

位置

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

 

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

 

角度

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

 

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

 

邊界半徑

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

 

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

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

 

第二章：填充與邊框

 

填充

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

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

 

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

 

提示

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

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

 

填充的類型

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

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

堆積填充

你可以向對象添加多個填充類型。顯然，要想這個效果起作用，那么某個填充必須具有透明屬性。否則你只能看見頂部的圖層。

 

漸變填充

 

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

 

邊框

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

 

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

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

 

描邊樣式

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

 

 

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

 

 

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

 

 

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

 

投影

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

 

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

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

 

 

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

 

 

Neumorphism（新你太美）

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

 

 

自然的外觀，柔和的投影

那些看起自然的投影是決定了你設計好壞的重要影響因素之一。看起來自然的方法就是避免使用純黑色投影和直接使用本體的主色。純黑色使得對比度過大，看起來又臟又不自然。

 

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

 

內陰影

內陰影在UI設計中是比較少見的，它具有投影一樣的參數，但是它是出現在對象內部的。所以他不是很受大家喜歡。還有就是我們的大多數界面都是由一系列的對象層疊起來的，在這種情況下，一個外部投影就很有意義了，因為它提供了深度，而內部陰影表明該對象上面有個洞。

 

左邊的例子我們可以看到是一個典型的有深度的堆棧層，在大對數情況下都能看見。添加一個內陰影在任何層就可以導致這個層破了個洞的幻覺。這就打破了我們的堆棧層的視覺架構。

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

 

 

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

 

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

 

模糊

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

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

 

高斯模糊作為陰影

這種類型的模糊還可以幫助我們制作一些非標準的投影，我們只需要把一個橢圓放在需要投影的對象下面，就可以單獨的來制作一個投影了，也可以結合標準投影來使用，這樣你可以獲得更佳的效果。 

 

背景模糊

當水果公司開始在他們的操作系統中使用背景模糊來達到毛玻璃效果的時候，背景模糊就變的流行起來。具有這種效果的物體會把他下面一層的東西模糊掉。

 

在這個例子中，一個只有90%透明度的含有背景模糊的正方形被放在右邊，正如你所見，放在正方形下面的圓模糊的看不清了。

運動模糊

運動模糊模擬物體沿著某個方向運動時由于速度過快產生的殘影，他和高斯模糊的工作原理一樣，只是多了方向的控制。 

 

變焦模糊

當物體由內向外模糊時，就會發生羽化模糊效果，這種效果常被用于攝影，對于UI設計來說，不一定是一個很好的選擇。 

 

在這種特殊的模糊類型中，你可以設置模糊的起源點，通過這些點可以做出很多有趣的效果。 

 

 

以上就是本期關于UI界面設計基礎知識的內容啦！希望對各位小伙伴有所幫助~

轉載聲明：本文來源于網絡，不作任何商業用途