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

　　較好章：形狀和對(duì)象

　　圖像是怎么創(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ù)氖侄蝸砀淖兙匦?/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è)計(jì)和代碼中定義的數(shù)字接口對(duì)象的較基本方法。我們所做的大多數(shù)設(shè)計(jì)都是根據(jù)盒子模型來設(shè)計(jì)的，所以很有必要了解它。

　　Fill填充

　　Border邊框

　　Outer margin外邊距

　　Inner margin內(nèi)邊距

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

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

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

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

　　定義屬性

　　大小

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

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

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

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

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

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

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

　　邊界半徑

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

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

　　第二章：填充與邊框

　　填充

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

　　當(dāng)你創(chuàng)建一個(gè)新的矩形，他會(huì)默認(rèn)自帶一個(gè)填充，大多數(shù)情況下他是灰色的，所以你要記得自己改變顏色，有時(shí)候他還會(huì)有個(gè)邊界。為啥是灰色呢，因?yàn)榛疑銐蛑行?，你添加新的形狀也不?huì)搞壞你之前做的界面，而且你可以很容易看見他。

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

　　提示

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

　　如果一個(gè)對(duì)象沒有填充，也沒有邊框或者效果，那么他就在界面中不可見，因?yàn)樗枰欢x一些特征方才可見。但是你任然可以選擇它、移動(dòng)他、修改它。它也任然在你的圖層列表中存在。

　　填充的類型

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

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

　　堆積填充

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

　　漸變填充

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

　　邊框

　　邊框（描邊）是繼填充后。對(duì)象能具有的第二個(gè)樣式

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

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

　　描邊樣式

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

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

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

　　第三章：對(duì)象的投影與陰影

　　投影

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

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

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

　　你可以通過向同一個(gè)對(duì)象添加多個(gè)投影來獲得有趣的效果。看下圖就有三個(gè)藍(lán)色的投影，他們給個(gè)都向下移動(dòng)3px

　　Neumorphism（新你太美）

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

　　自然的外觀，柔和的投影

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

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

　　內(nèi)陰影

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

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

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

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

　　模糊

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

　　高斯模糊是較常見的模糊方式，你可以使用它來過度背景，或者是有選擇性的對(duì)一些背景進(jìn)行模糊處理，來達(dá)到億點(diǎn)點(diǎn)真實(shí)的景深效果。