想要在UI設(shè)計領(lǐng)域擁有一技之長,讓自己在職場中脫穎而出?小編為大家?guī)砹?a href="http://m.5wd995.cn/ui/2390.html" target="_blank">UI圖設(shè)計相關(guān)教程,基礎(chǔ)知識點全面,趕緊打開看看吧!
首先,Adobe Illustrator 作為矢量圖編輯軟件,用作UI設(shè)計領(lǐng)域,有更多的優(yōu)勢。最大的優(yōu)勢,或許就是在于矢量圖編輯的無損性,就是說在 AI 里,用矢量工具畫東西不會像用 PS 的畫筆那樣會污染同一圖層的其他部分,而且矢量編輯操作大部分是可逆的。這樣,用AI這樣的矢量圖編輯軟件做東西,后期修改、調(diào)整比像素圖編輯軟件要方便的多。
矢量對象的描邊、填充和可見性、可見度,以及矢量對象添加的效果,均會出現(xiàn)在外觀面板上。如果希望修改上述這些圖形要素,在外觀面板上點擊相應(yīng)的要素即可。就像上面修改圓角大小的辦法一樣。
外觀面板的描邊、填充、效果、透明度是有堆疊順序的,不同的堆疊順序得到的結(jié)果可能會不一樣。堆疊順序規(guī)則是:對于填充和描邊,在外觀面板里,位于上面的蓋住位于下面的;對于效果,是從上往下執(zhí)行;整個矢量對象的透明度永遠(yuǎn)位于最下方。
AI拿到圖形后,首先給這個圖形用圓角效果修飾。然后在最上方,給圖形加一個 2px 粗的描邊;在描邊下方放上一個從上到下的漸變、50% 可見度的填色層;在漸變填色層下再放一個灰色的填色層;然后為整個圖形添加一個投影效果;最后,設(shè)定矢量對象整體的可見度為默認(rèn),即完全可見。除了可以將效果應(yīng)用于矢量對象外,還可以將UI設(shè)計效果應(yīng)用于整個圖層。
擴展外觀命令
如果希望更進一步細(xì)調(diào)外觀所得到的圖形,可以使用菜單欄里的擴展外觀 命令,將矢量對象的外觀應(yīng)用,作用類似于一些3D軟件的應(yīng)用修改器。
AI的矢量對象效果雖然強大并且方便,不過相對于PS這樣的圖像處理軟件來說,還是缺少了一些效果,比如PS里的內(nèi)陰影圖形樣式在AI里就沒有類似的效果。AI提供了導(dǎo)入SVG濾鏡的功能,通過這個功能,可以導(dǎo)入一些別人寫好的 SVG 濾鏡,來彌補AI自帶濾鏡的不足。除了用別人寫好的濾鏡以外,還可以自己寫濾鏡。
當(dāng)擬物化風(fēng)格大行其道后,種種弊端開始顯現(xiàn)出來。比如,不是每個App都有對應(yīng)在現(xiàn)實世界中的隱喻。而且,擬物化風(fēng)格容易讓人把注意力從內(nèi)容本身轉(zhuǎn)移到界面上。還有,UI設(shè)計中過度的擬物化風(fēng)格圖標(biāo)的堆積容易給人以不一致感。 因此,爆發(fā)了擬物化和扁平化的沖突,最終扁平化獲勝,開始流行起來。
做好擬物化風(fēng)格的圖標(biāo),主要依靠幾點:注重細(xì)節(jié);保證圖標(biāo)的辨識度;控制細(xì)節(jié)的數(shù)量;做擬物化風(fēng)格的圖標(biāo),堆砌大量的細(xì)節(jié)不是一個明智的做法。因為,除非做 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)的辨識度。因此,雖然基于矢量的 Adobe Illustator 很適合用可無限縮放的矢量圖形堆砌細(xì)節(jié),不過不建議這樣做。
UI設(shè)計中展示界面是單獨的一個AI文件,里面以外部文件鏈接的形式,嵌入了幾個圖標(biāo)。AI嵌入外部文件很簡單,只要把外部文件直接拖拽進去就可以了。外部文件發(fā)生改動,更新后,AI會自動更新,非常方便。并且外部文件拖拽進去后,可以像在AI里創(chuàng)建的矢量圖形一樣加上效果。
加入陰影效果,使得這套圖標(biāo)看起來更符合人們的視覺經(jīng)驗,并能更好地將圖標(biāo)層與背景層區(qū)分開來,每個圖標(biāo)都是一個單獨的文件。
灰白色的底層很簡單,沒有描邊,只有一個填色層,方向是從上到下,模擬光源自頂向下照射。在外觀面板里,只保留兩個描邊和藍(lán)色填色層的可見性。這樣,可以清楚地看到這個矢量圖形主體元素。
兩個描邊的作用,是用來表現(xiàn)銀色邊框。兩個邊框均為沿圖形內(nèi)側(cè)對齊,上面的是2px寬度,下面的是3px寬度,用不同的灰度來表現(xiàn)邊框的立體感。邊框的材質(zhì)假定是一種稍微粗糙一些的金屬,有一個自頂向下照射的光源和環(huán)境光。在上一個教程里,介紹了金屬材質(zhì)的光學(xué)特性。金屬材質(zhì)在單一光源照射下,會有一個特別亮的高光區(qū),并且高光區(qū)在邊緣處亮度會很快地衰減。因此,在這里同理,為模擬這樣的金屬材質(zhì),描邊的漸 變應(yīng)該做類似這樣的設(shè)置。
AI默認(rèn)是以消鋸齒的方式填充顏色。在執(zhí)行消鋸齒操作時,圖形邊緣的像素會被設(shè)置為半透明。所以在邊框處的藍(lán)色細(xì)線 ,實際上是邊框邊緣的半透明像素疊加到 藍(lán)色基座的半透明像素上,因此看上去是暗藍(lán)色。所以,UI圖設(shè)計中首先要給圖形加上一個位移路徑效果,避免邊緣出現(xiàn)藍(lán)色的細(xì)線。
內(nèi)發(fā)光效果:給圓形底座的邊緣加上陰影效果,增加真實感:兩個投影效果為底座附近的表面增添凹凸感。上面的投影顏色是黑色,下面的投影顏色為白色,模擬一個下凹效果。
這三個填色層由于在藍(lán)色的填色層下,所以填色層本身實際上是不能被看到的。三個填色層可以使用任意的顏色,只是可見度要設(shè)置為 100%,即完全可見。加入這三個填色層的目的,是為了給圖形加上細(xì)微的光影效果。
強化層次結(jié)構(gòu)來提升UI設(shè)計的清晰度:將必要的文本內(nèi)容集合起來,重新組織,有意識地梳理視覺層次結(jié)構(gòu),要讓用戶能夠清晰地感知到內(nèi)容。對于信息層級,通常會按照標(biāo)題、副標(biāo)題、正文、引用說明等常見的文本元素構(gòu)成。而清晰的文本層次結(jié)構(gòu),是依托于符合文本本身所屬層次的響應(yīng)的樣式,這樣才能確??勺x性。通過修改字號大小的加倍和減半來快速理清相互關(guān)系。
有意識地創(chuàng)造具有呼吸感的排版:字間距、行高、行長是在進行排版的時候,最常調(diào)整的屬性。缺少足夠的間距,可能會讓文本難以閱讀,但是間接過多,可能會讓用戶在閱讀的時候感到稀疏難受。排版是數(shù)字時代每個設(shè)計師都需要學(xué)習(xí)和掌握的重要技能,無論你的設(shè)計項目是什么樣的,這些基本的規(guī)則總能給你的設(shè)計帶來更好的效果。不過這些排版技巧都還只是非常基礎(chǔ)的部分,在實際的設(shè)計當(dāng)中,還會涉及到很多更加復(fù)雜的排版布局。
此外,UI設(shè)計界面可分為PC網(wǎng)頁界面和APP界面。
PC 網(wǎng)頁界面
網(wǎng)頁界面:UI設(shè)計不單單指的是光光去做移動端設(shè)計,有時還要負(fù)責(zé)公司的WUI網(wǎng)頁設(shè)計以及他網(wǎng)站里面的介紹頁等。
廣告宣傳圖
banner廣告設(shè)計:是我們以后眾多工作中之一,也是UI設(shè)計師的基本功。
H5活動頁:根據(jù)公司運營、營銷活動的需求設(shè)計出在網(wǎng)頁中展示的活動專場頁面。
網(wǎng)頁標(biāo)注切圖:那網(wǎng)頁切圖沒有像移動端切圖那么繁多,主要切的是前端用代碼寫不出來的東西,例如logo,banner、以及負(fù)責(zé)的按鈕等。
手機APP:
APP界面:界面設(shè)計是UI的一大主要工作任務(wù),涉及到各級頁面,少則十來頁,多則過百。
界面圖標(biāo):界面所需的 APP 啟動圖標(biāo)和一些其他icon,以及應(yīng)用內(nèi)的一般工具圖標(biāo)。
UI動效設(shè)計:動效可以額外的增加界面活力在用戶預(yù)期之外增加的驚喜,可以是帥氣的,可以是賣萌,總之讓用戶感知到產(chǎn)品的生命力。
交互設(shè)計:原型圖是我們前期要去繪制的一個低保真圖,畫出大概的框架頁面,以及各個界面層級跳轉(zhuǎn)之間的交互邏輯,包含按鈕擺放,可點區(qū)域等。
標(biāo)注切圖:程序員能否將我們的UI設(shè)計稿完美呈現(xiàn)出來,這里的標(biāo)注就顯得格外重要,其中我們在工作中還需要和開發(fā)人員溝通,了解不同圖片格式的作用與區(qū)別,并根據(jù)所需導(dǎo)出相對應(yīng)圖片。
引導(dǎo)頁:不是APP設(shè)計中的必備存在,它是具有時效性、話題性、趣味性、介紹功能性的存在,會隨時間和版本更新而不斷更新迭代,這也是UI設(shè)計師輸出的一個產(chǎn)物。
界面適配:在眾多的手機分辨中我們?nèi)绾瓮ㄟ^一個設(shè)計稿在其他主流屏幕上面完美顯示。
設(shè)計規(guī)范:設(shè)計到開發(fā)中要遵守的相關(guān)規(guī)范設(shè)計文檔,針對最主要色彩、字體、控件、元素等使用的規(guī)范,簡潔明了,容易被執(zhí)行,方便團隊協(xié)作以及后期崗位交接便捷。
UI工作產(chǎn)出:和平面有所不同的是UI設(shè)計產(chǎn)出的東西更多,比如界面效果圖、切圖標(biāo)注、LOGO、動效demo、原型圖、H5和日常一些平面物料等。
填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc