ui界面圖設(shè)計(jì)教程

　　想要在UI設(shè)計(jì)領(lǐng)域擁有一技之長(zhǎng)，讓自己在職場(chǎng)中脫穎而出?小編為大家?guī)砹?a href="http://5wd995.cn/ui/2390.html" target="_blank">UI圖設(shè)計(jì)相關(guān)教程，基礎(chǔ)知識(shí)點(diǎn)全面，趕緊打開看看吧!
 

　　首先，Adobe Illustrator 作為矢量圖編輯軟件，用作UI設(shè)計(jì)領(lǐng)域，有更多的優(yōu)勢(shì)。最大的優(yōu)勢(shì)，或許就是在于矢量圖編輯的無(wú)損性，就是說在 AI 里，用矢量工具畫東西不會(huì)像用 PS 的畫筆那樣會(huì)污染同一圖層的其他部分，而且矢量編輯操作大部分是可逆的。這樣，用AI這樣的矢量圖編輯軟件做東西，后期修改、調(diào)整比像素圖編輯軟件要方便的多。
 

　　矢量對(duì)象的描邊、填充和可見性、可見度，以及矢量對(duì)象添加的效果，均會(huì)出現(xiàn)在外觀面板上。如果希望修改上述這些圖形要素，在外觀面板上點(diǎn)擊相應(yīng)的要素即可。就像上面修改圓角大小的辦法一樣。
 

　　外觀面板的描邊、填充、效果、透明度是有堆疊順序的，不同的堆疊順序得到的結(jié)果可能會(huì)不一樣。堆疊順序規(guī)則是：對(duì)于填充和描邊，在外觀面板里，位于上面的蓋住位于下面的;對(duì)于效果，是從上往下執(zhí)行;整個(gè)矢量對(duì)象的透明度永遠(yuǎn)位于最下方。
 

　　AI拿到圖形后，首先給這個(gè)圖形用圓角效果修飾。然后在最上方，給圖形加一個(gè) 2px 粗的描邊;在描邊下方放上一個(gè)從上到下的漸變、50% 可見度的填色層;在漸變填色層下再放一個(gè)灰色的填色層;然后為整個(gè)圖形添加一個(gè)投影效果;最后，設(shè)定矢量對(duì)象整體的可見度為默認(rèn)，即完全可見。除了可以將效果應(yīng)用于矢量對(duì)象外，還可以將UI設(shè)計(jì)效果應(yīng)用于整個(gè)圖層。
 

　　擴(kuò)展外觀命令
 

　　如果希望更進(jìn)一步細(xì)調(diào)外觀所得到的圖形，可以使用菜單欄里的擴(kuò)展外觀 命令，將矢量對(duì)象的外觀應(yīng)用，作用類似于一些3D軟件的應(yīng)用修改器。
 

　　AI的矢量對(duì)象效果雖然強(qiáng)大并且方便，不過相對(duì)于PS這樣的圖像處理軟件來說，還是缺少了一些效果，比如PS里的內(nèi)陰影圖形樣式在AI里就沒有類似的效果。AI提供了導(dǎo)入SVG濾鏡的功能，通過這個(gè)功能，可以導(dǎo)入一些別人寫好的 SVG 濾鏡，來彌補(bǔ)AI自帶濾鏡的不足。除了用別人寫好的濾鏡以外，還可以自己寫濾鏡。
 

　　當(dāng)擬物化風(fēng)格大行其道后，種種弊端開始顯現(xiàn)出來。比如，不是每個(gè)App都有對(duì)應(yīng)在現(xiàn)實(shí)世界中的隱喻。而且，擬物化風(fēng)格容易讓人把注意力從內(nèi)容本身轉(zhuǎn)移到界面上。還有，UI設(shè)計(jì)中過度的擬物化風(fēng)格圖標(biāo)的堆積容易給人以不一致感。 因此，爆發(fā)了擬物化和扁平化的沖突，最終扁平化獲勝，開始流行起來。
 

　　做好擬物化風(fēng)格的圖標(biāo)，主要依靠幾點(diǎn)：注重細(xì)節(jié);保證圖標(biāo)的辨識(shí)度;控制細(xì)節(jié)的數(shù)量;做擬物化風(fēng)格的圖標(biāo)，堆砌大量的細(xì)節(jié)不是一個(gè)明智的做法。因?yàn)?，除非?OS X App 那樣的圖標(biāo)，絕大多數(shù)系統(tǒng)應(yīng)用程序的圖標(biāo)分辨率都比較低的，例如 iPhone iOS 7 圖標(biāo)分辨率是 120×120，在這樣的分辨率下顯然不適合堆砌細(xì)節(jié)。并且，堆砌細(xì)節(jié)容易給人造成認(rèn)知上的困難，并很容易造成混亂、不一致感。再有，堆砌細(xì)節(jié)還很容易降低圖標(biāo)的辨識(shí)度。因此，雖然基于矢量的 Adobe Illustator 很適合用可無(wú)限縮放的矢量圖形堆砌細(xì)節(jié)，不過不建議這樣做。
 

　　UI設(shè)計(jì)中展示界面是單獨(dú)的一個(gè)AI文件，里面以外部文件鏈接的形式，嵌入了幾個(gè)圖標(biāo)。AI嵌入外部文件很簡(jiǎn)單，只要把外部文件直接拖拽進(jìn)去就可以了。外部文件發(fā)生改動(dòng)，更新后，AI會(huì)自動(dòng)更新，非常方便。并且外部文件拖拽進(jìn)去后，可以像在AI里創(chuàng)建的矢量圖形一樣加上效果。
 

　　加入陰影效果，使得這套圖標(biāo)看起來更符合人們的視覺經(jīng)驗(yàn)，并能更好地將圖標(biāo)層與背景層區(qū)分開來，每個(gè)圖標(biāo)都是一個(gè)單獨(dú)的文件。
 

　　灰白色的底層很簡(jiǎn)單，沒有描邊，只有一個(gè)填色層，方向是從上到下，模擬光源自頂向下照射。在外觀面板里，只保留兩個(gè)描邊和藍(lán)色填色層的可見性。這樣，可以清楚地看到這個(gè)矢量圖形主體元素。
 

　　兩個(gè)描邊的作用，是用來表現(xiàn)銀色邊框。兩個(gè)邊框均為沿圖形內(nèi)側(cè)對(duì)齊，上面的是2px寬度，下面的是3px寬度，用不同的灰度來表現(xiàn)邊框的立體感。邊框的材質(zhì)假定是一種稍微粗糙一些的金屬，有一個(gè)自頂向下照射的光源和環(huán)境光。在上一個(gè)教程里，介紹了金屬材質(zhì)的光學(xué)特性。金屬材質(zhì)在單一光源照射下，會(huì)有一個(gè)特別亮的高光區(qū)，并且高光區(qū)在邊緣處亮度會(huì)很快地衰減。因此，在這里同理，為模擬這樣的金屬材質(zhì)，描邊的漸 變應(yīng)該做類似這樣的設(shè)置。
 

　　AI默認(rèn)是以消鋸齒的方式填充顏色。在執(zhí)行消鋸齒操作時(shí)，圖形邊緣的像素會(huì)被設(shè)置為半透明。所以在邊框處的藍(lán)色細(xì)線 ，實(shí)際上是邊框邊緣的半透明像素疊加到 藍(lán)色基座的半透明像素上，因此看上去是暗藍(lán)色。所以，UI圖設(shè)計(jì)中首先要給圖形加上一個(gè)位移路徑效果，避免邊緣出現(xiàn)藍(lán)色的細(xì)線。
 

　　內(nèi)發(fā)光效果：給圓形底座的邊緣加上陰影效果，增加真實(shí)感：兩個(gè)投影效果為底座附近的表面增添凹凸感。上面的投影顏色是黑色，下面的投影顏色為白色，模擬一個(gè)下凹效果。
 

　　這三個(gè)填色層由于在藍(lán)色的填色層下，所以填色層本身實(shí)際上是不能被看到的。三個(gè)填色層可以使用任意的顏色，只是可見度要設(shè)置為 100%，即完全可見。加入這三個(gè)填色層的目的，是為了給圖形加上細(xì)微的光影效果。
 

　　強(qiáng)化層次結(jié)構(gòu)來提升UI設(shè)計(jì)的清晰度：將必要的文本內(nèi)容集合起來，重新組織，有意識(shí)地梳理視覺層次結(jié)構(gòu)，要讓用戶能夠清晰地感知到內(nèi)容。對(duì)于信息層級(jí)，通常會(huì)按照標(biāo)題、副標(biāo)題、正文、引用說明等常見的文本元素構(gòu)成。而清晰的文本層次結(jié)構(gòu)，是依托于符合文本本身所屬層次的響應(yīng)的樣式，這樣才能確?？勺x性。通過修改字號(hào)大小的加倍和減半來快速理清相互關(guān)系。
 

　　有意識(shí)地創(chuàng)造具有呼吸感的排版：字間距、行高、行長(zhǎng)是在進(jìn)行排版的時(shí)候，最常調(diào)整的屬性。缺少足夠的間距，可能會(huì)讓文本難以閱讀，但是間接過多，可能會(huì)讓用戶在閱讀的時(shí)候感到稀疏難受。排版是數(shù)字時(shí)代每個(gè)設(shè)計(jì)師都需要學(xué)習(xí)和掌握的重要技能，無(wú)論你的設(shè)計(jì)項(xiàng)目是什么樣的，這些基本的規(guī)則總能給你的設(shè)計(jì)帶來更好的效果。不過這些排版技巧都還只是非常基礎(chǔ)的部分，在實(shí)際的設(shè)計(jì)當(dāng)中，還會(huì)涉及到很多更加復(fù)雜的排版布局。
 

　　此外，UI設(shè)計(jì)界面可分為PC網(wǎng)頁(yè)界面和APP界面。

　　PC 網(wǎng)頁(yè)界面
 

　　網(wǎng)頁(yè)界面：UI設(shè)計(jì)不單單指的是光光去做移動(dòng)端設(shè)計(jì)，有時(shí)還要負(fù)責(zé)公司的WUI網(wǎng)頁(yè)設(shè)計(jì)以及他網(wǎng)站里面的介紹頁(yè)等。
 

　　廣告宣傳圖
 

　　banner廣告設(shè)計(jì)：是我們以后眾多工作中之一，也是UI設(shè)計(jì)師的基本功。
 

　　H5活動(dòng)頁(yè)：根據(jù)公司運(yùn)營(yíng)、營(yíng)銷活動(dòng)的需求設(shè)計(jì)出在網(wǎng)頁(yè)中展示的活動(dòng)專場(chǎng)頁(yè)面。
 

　　網(wǎng)頁(yè)標(biāo)注切圖：那網(wǎng)頁(yè)切圖沒有像移動(dòng)端切圖那么繁多，主要切的是前端用代碼寫不出來的東西，例如logo，banner、以及負(fù)責(zé)的按鈕等。
 

　　手機(jī)APP：
 

　　APP界面：界面設(shè)計(jì)是UI的一大主要工作任務(wù)，涉及到各級(jí)頁(yè)面，少則十來頁(yè)，多則過百。
 

　　界面圖標(biāo)：界面所需的 APP 啟動(dòng)圖標(biāo)和一些其他icon，以及應(yīng)用內(nèi)的一般工具圖標(biāo)。
 

　　UI動(dòng)效設(shè)計(jì)：動(dòng)效可以額外的增加界面活力在用戶預(yù)期之外增加的驚喜，可以是帥氣的，可以是賣萌，總之讓用戶感知到產(chǎn)品的生命力。
 

　　交互設(shè)計(jì)：原型圖是我們前期要去繪制的一個(gè)低保真圖，畫出大概的框架頁(yè)面，以及各個(gè)界面層級(jí)跳轉(zhuǎn)之間的交互邏輯，包含按鈕擺放，可點(diǎn)區(qū)域等。
 

　　標(biāo)注切圖：程序員能否將我們的UI設(shè)計(jì)稿完美呈現(xiàn)出來，這里的標(biāo)注就顯得格外重要，其中我們?cè)诠ぷ髦羞€需要和開發(fā)人員溝通，了解不同圖片格式的作用與區(qū)別，并根據(jù)所需導(dǎo)出相對(duì)應(yīng)圖片。
 

　　引導(dǎo)頁(yè)：不是APP設(shè)計(jì)中的必備存在，它是具有時(shí)效性、話題性、趣味性、介紹功能性的存在，會(huì)隨時(shí)間和版本更新而不斷更新迭代，這也是UI設(shè)計(jì)師輸出的一個(gè)產(chǎn)物。
 

　　界面適配：在眾多的手機(jī)分辨中我們?nèi)绾瓮ㄟ^一個(gè)設(shè)計(jì)稿在其他主流屏幕上面完美顯示。
 

　　設(shè)計(jì)規(guī)范：設(shè)計(jì)到開發(fā)中要遵守的相關(guān)規(guī)范設(shè)計(jì)文檔，針對(duì)最主要色彩、字體、控件、元素等使用的規(guī)范，簡(jiǎn)潔明了，容易被執(zhí)行，方便團(tuán)隊(duì)協(xié)作以及后期崗位交接便捷。
 

　　UI工作產(chǎn)出：和平面有所不同的是UI設(shè)計(jì)產(chǎn)出的東西更多，比如界面效果圖、切圖標(biāo)注、LOGO、動(dòng)效demo、原型圖、H5和日常一些平面物料等。