UI設(shè)計作為近年來設(shè)計行業(yè)的新貴,它的薪資之高令很多設(shè)計師羨慕不已,很多平面設(shè)計師都轉(zhuǎn)行UI設(shè)計,作為時下熱門高薪職業(yè)之一,UI設(shè)計的發(fā)展前景顯而易見。UI設(shè)計應(yīng)用領(lǐng)域非常廣泛,近幾年互聯(lián)網(wǎng)從傳統(tǒng)的計算機網(wǎng)頁到最新AI領(lǐng)域的人機交互界面,無不體現(xiàn)出它的市場價值,想要成為一名UI設(shè)計高級界面設(shè)計師,需要掌握的東西還是挺多的。
日前,微信官方發(fā)布《關(guān)于規(guī)范公眾號內(nèi)虛擬支付行為的公告》。公告稱,基于 iOS 對開發(fā)者的管理規(guī)范,微信公眾號內(nèi)暫不支持 iOS 端虛擬支付業(yè)務(wù)。虛擬支付業(yè)務(wù)是指購買非實物商品,比如:VIP 會員、充值、錄制課程、錄制音頻視頻等虛擬產(chǎn)品。
從事任何行業(yè)任何崗位,扎實的基本功都是你勝任工作的基礎(chǔ)。對于設(shè)計師而言,熟練使用常用軟件工具是必備技能,因為在界面、圖標(biāo)、動效、交互、切圖、標(biāo)注等各個環(huán)節(jié),都會用到不同的軟件。接下來推薦7款高級UI設(shè)計師必備工具:
1、Photoshop:PS是一款強大的圖片處理軟件,因此它不只是修修照片、你用它還能完成UI設(shè)計。另外對于圖標(biāo)的設(shè)計,是用矢量繪圖軟件制作的,這樣放大才不會失真,沒有虛邊,所以你可能還要用到AI。但是據(jù)行業(yè)數(shù)據(jù)統(tǒng)計,UI設(shè)計行業(yè)中,常用的主要軟件為:PS和AI。UI設(shè)計用的最多的軟件就是PS的,在UI設(shè)計中主要的用途是用來繪制界面和圖標(biāo)。
2、Adobe illustrator:簡稱“AI”,是一種應(yīng)用于出版、多媒體和在線圖像的工業(yè)標(biāo)準(zhǔn)矢量插畫的軟件為一款非常好的矢量圖形處理工具。AI在UI設(shè)計中主要用來繪制圖標(biāo),界面等設(shè)計。與PS不同的是:AI繪制扁平化圖標(biāo)界面的時候要比PS快。由于繪制的圖形是矢量的,所以文件會非常小,也方便管理。
3、After Effects:AE適用于從事設(shè)計和視頻特技的機構(gòu),包括電視臺、動畫制作公司、個人后期制作工作室以及多媒體工作室。屬于層類型后期軟件。但是在UI行業(yè)來說就是做一些UI的交互動效。動效這塊是效率最高的軟件,不過不能用AE畫圖標(biāo)做界面。
4、Cinema 4D:屬于跨界三維軟件,起初在工業(yè)設(shè)計行業(yè)中使用廣泛,這兩年開始流行用建模軟件做三維電商設(shè)計海報等。這個軟件也屬于UI設(shè)計師的必學(xué)技能,能做很多的三維動畫設(shè)計,學(xué)會這個軟件,能讓你的設(shè)計表現(xiàn)力更豐富有創(chuàng)意。
5、Sketch:可以算是專門為UI設(shè)計開發(fā)的軟件,也是矢量軟件,但是只有Mac版本,Windows系統(tǒng)無法安裝使用,這個軟件有蘋果電腦的就可以學(xué)習(xí)一下,而且比較簡單,沒有MAC電腦的可以不用學(xué)。
6、Axure RP:Axure RP是一個專業(yè)的快速原型設(shè)計工具。讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計功能和界面的專家能夠快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。作為專業(yè)的原型設(shè)計工具,它能快速、高效的創(chuàng)建原型,同時支持多人協(xié)作設(shè)計和版本控制管理 。
7、InDesign:InDesign 軟件是一個定位于專業(yè)排版領(lǐng)域的設(shè)計軟件。是面向公司專業(yè)出版方案的新平臺,由Adobe公司于1999年9月1日發(fā)布。它是基于一個新的開放的面向?qū)ο篌w系,可實現(xiàn)高度的擴展性。并且它還建立了一個由第三方開發(fā)者和系統(tǒng)集成者??梢蕴峁┳远x雜志、廣告設(shè)計、目錄、零售商設(shè)計工作室和報紙出版方案的核心。可支持插件功能。
作為一個合格、優(yōu)秀的UI設(shè)計師,你還要具備三種能力:界面視覺設(shè)計能力、交互體驗設(shè)計能力、用戶需求研究能力。通常,我們看到都是界面視覺設(shè)計,比如app的界面。UI 界面中,排版設(shè)計同樣重要。如何將至關(guān)重要的信息,有效地傳遞給用戶,這是界面本身的職責(zé),而在絕大多數(shù)時候,這通常是靠文本來完成。有效的排版對于改善 UI 整體的用戶體驗十分重要。而優(yōu)化排版,本質(zhì)上也是在優(yōu)化 UI 和 UX。雖然在絕大多數(shù)時候,優(yōu)化排版是在提升排版布局的可讀性,提升訪問性,但是它最低的標(biāo)準(zhǔn)和最核心的要素,依然是要保證排版本身的「可用性」。降低用戶使用時的障礙和摩擦,減少認(rèn)知負(fù)荷。出色的排版設(shè)計能夠讓用戶注意到內(nèi)容,而不是排版本身上。
實用性較強的排版優(yōu)化技巧:
強化層次結(jié)構(gòu)來提升UI的清晰度:將必要的文本內(nèi)容集合起來,重新組織,有意識地梳理視覺層次結(jié)構(gòu),要讓用戶能夠清晰地感知到內(nèi)容。對于信息層級,通常會按照標(biāo)題、副標(biāo)題、正文、引用說明等常見的文本元素構(gòu)成。而清晰的文本層次結(jié)構(gòu),是依托于符合文本本身所屬層次的響應(yīng)的樣式,這樣才能確??勺x性。大標(biāo)題應(yīng)當(dāng)突出,正文應(yīng)當(dāng)清晰明了,副標(biāo)題起到的是對標(biāo)題的輔助說明作用,所以應(yīng)當(dāng)適當(dāng)縮小,這樣一來,文本元素之前的大小關(guān)系,位置關(guān)系都更加清晰了。
有意識地創(chuàng)造具有呼吸感的排版:字間距、行高、行長是在進行排版的時候,最常調(diào)整的屬性。缺少足夠的間距,可能會讓文本難以閱讀,但是間接過多,可能會讓用戶在閱讀的時候感到稀疏難受。
根據(jù)內(nèi)容來選取字體:在選取文本字體的時候,需要考慮到潛在讀者的體驗。不同的字體能夠給界面和體驗帶來截然不同的體驗,字體的選擇能夠影響用戶對于界面的第一印象。正確的字體選擇,能夠在信息和視覺兩個層面給用戶傳遞信息,錯誤的選擇會導(dǎo)致誤解和混亂的結(jié)果。
使用同一字體家族,如果你在不同字體的搭配上,并沒有足夠豐富的經(jīng)驗,那么使用同一字體族的字體來進行設(shè)計,總是最為安全的選擇。通常,一個字體族是為一個明確的目標(biāo)來設(shè)計的。它們有著更為統(tǒng)一的、富有凝聚力的外觀,在設(shè)計使用過程中,會更加便捷。使用字體族的另外一個好處在于,它可以更快適配不同文本元素在排版上的需求,你可以更快地通過調(diào)整字體大小、粗細(xì)、文字大小、色彩來制造相應(yīng)的對比,呈現(xiàn)不同的視覺效果。
盡可能使用左對齊來提高可讀性,在世界上絕大多數(shù)的國家和地區(qū),所使用的文字排版都是從左到右的,閱讀順序是自上而下的。這決定了左對齊是確??勺x性的重要基準(zhǔn)。左對齊給人的雙眼提供了一個掃讀時候的基準(zhǔn)位置,在大量、長時間閱讀的過程在,極大地減小了閱讀壓力——而居中對齊則明顯做不到這一點。
排版是數(shù)字時代每個設(shè)計師都需要學(xué)習(xí)和掌握的重要技能,無論你的設(shè)計項目是什么樣的,這些基本的規(guī)則總能給你的設(shè)計帶來更好的效果。不過這些排版技巧都還只是非?;A(chǔ)的部分,在實際的設(shè)計當(dāng)中,還會涉及到很多更加復(fù)雜的排版布局——但是這些基礎(chǔ),始終是最重要的事情。
一款 App 或 Web 產(chǎn)品,從用戶體驗的角度包含了戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。而作為 UI 設(shè)計師,如果連「表現(xiàn)層」的內(nèi)容都還一知半解就去盲目地學(xué)習(xí)其他領(lǐng)域,這是不提倡的。這里說的「表現(xiàn)層」是指視覺設(shè)計層面,在界面的視覺設(shè)計中同樣也包含了 5 個視覺要素:色彩、文字、圖標(biāo)、圖片、空間。一個出色的界面設(shè)計,必然是將這些要素做到了淋漓盡致。
色彩三屬性:人眼看到的任一彩色光都是三個屬性的綜合效果。
色相(H):即色彩的相貌、種類和名稱,比如紅、橙、黃、綠等顏色的種類就叫色相。
飽和度(S):即色彩的鮮艷程度,也稱純度。
明度(B):即色彩的明亮程度。
色彩寓意:同一色相的不同明度和不同飽和度,也會對人產(chǎn)生不同的心理感受。
白色(White):純潔、神圣、干凈、高雅、冷淡
紅色(Red):熱烈、喜慶、熱情、浪漫、危險
黃色(Yellow):光輝、明亮、尊貴、權(quán)力
灰色(Gray):平凡、隨意、蒼老、冷漠
橙色(Orange):溫暖、食物、友好、財富、警告
藍色(Blue):平靜、純潔、清涼、科技、沉穩(wěn)
綠色(Green):健康、自然、清新、希望、安全
青色(Cyan):朝氣、脫俗、真誠、清麗
紫色(Purple):神秘、高貴、優(yōu)雅、浪漫、妖艷
黑色(Black):深沉、莊重、嚴(yán)肅、邪惡、死亡
色彩搭配:色相對比:兩種及兩種以上色彩組合后,由于色相差別而形成的色彩對比效果稱為色相對比。色相對比的強弱程度,取決于色相之間在色環(huán)上的距離 (角度),距離 (角度) 越大對比越強,反之亦然。一般界面的色彩搭配主要包括三種顏色:主色調(diào)、輔助色、點綴色,搭配比例分別為 6:3:1。
同類色搭配:色環(huán)上相距 0° 的顏色為同類色,一般常用同一種色相的不同明度或不同飽和度的組合方式,例如藍與淺藍,紅與粉紅等。同類色搭配對比效果統(tǒng)一、清新、含蓄,但也容易產(chǎn)生單調(diào)、乏味的感受。
鄰近色搭配:色環(huán)上相距 30° 左右的顏色為鄰近色 ,例如紫與藍紫,藍紫與藍等。鄰近色搭配對比效果柔和、文靜、和諧,但也容易感覺單調(diào)、模糊,需調(diào)節(jié)明度來加強效果。
類似色搭配:色環(huán)上相距 60° 左右的顏色為類似色,例如橙與黃,黃橙與黃綠等。類似色搭配對比效果較豐富、活潑,同時又不失統(tǒng)一、和諧的感覺。
中差色搭配:色環(huán)上相距 90° 左右的顏色為中差色,例如紅與黃橙,藍綠與黃等。中差色搭配對比效果明快、活潑、飽滿、使人興奮,同時不失調(diào)和之感。
對比色搭配:色環(huán)上相距 120° 左右的顏色為對比色,例如紅與黃,紅紫與黃橙等。對比色搭配對比效果強烈、醒目、刺激、有力,但也容易造成視覺疲勞,一般需要采用多種調(diào)和手段來改善對比效果。
互補色搭配:色環(huán)上相距 180° 左右的顏色為互補色,例如紅與綠,黃與紫等?;パa色搭配表現(xiàn)出一種力量、氣勢與活力,具有非常強烈的視覺沖擊力。
多色搭配:是由多種色彩組合而成的一種搭配方式,一般以不超過 4 種顏色為宜,規(guī)定一種作為主導(dǎo)色,其余作為輔助色使用。多色搭配會讓畫面顯得更加豐富、多彩,充滿趣味性,但若控制不好,也容易讓畫面變花,失去平衡。搭配時須注意區(qū)分主次,按比例進行調(diào)和。
文字使用規(guī)則:不同平臺的界面設(shè)計中規(guī)范的字體會有不同,像移動端界面的設(shè)計就會有固定的字體樣式,網(wǎng)頁中會有常用的幾個字體。
圖標(biāo)功能:圖標(biāo)是 Web 和 App 設(shè)計中的點睛之筆,既能輔助文字信息的傳達,也能作為信息載體被高效地識別,并且圖標(biāo)也有一定的裝飾作用,可以提高界面設(shè)計的美觀度。
圖標(biāo)類型:關(guān)于圖標(biāo)的類型目前并沒有很權(quán)威的分類,我根據(jù)圖標(biāo)的用途將其分為兩大類:「功能型圖標(biāo)」和「展示型圖標(biāo)」。
功能型圖標(biāo):凡是 UI 界面中,用戶可以點擊的圖標(biāo)均可看成是功能型圖標(biāo),該類圖標(biāo)往往代表某一功能或某一鏈接的跳轉(zhuǎn)。這類圖標(biāo)的典型應(yīng)用場景就是 iOS 系統(tǒng)中的底部標(biāo)簽欄,以及 Material Design 中側(cè)滑菜單選項的左側(cè)。
展示型圖標(biāo):相比功能型圖標(biāo),展示型圖標(biāo)更加具有「設(shè)計感」,是獨特的、有內(nèi)涵的以及具備辨識度的。展示型圖標(biāo)主要是應(yīng)用程序的啟動圖標(biāo)。該類圖標(biāo)代表了一款產(chǎn)品的屬性、氣質(zhì)以及品牌形象等,也是用戶首先看到的內(nèi)容,設(shè)計時應(yīng)盡可能讓用戶記住并感到愉悅。該類圖標(biāo)在 iOS 系統(tǒng)中除了出現(xiàn)在 App Store 里,還出現(xiàn)在用戶下載后的桌面上,以及 Spotlight 的搜索結(jié)果和設(shè)置等地方。
圖標(biāo)風(fēng)格:圖標(biāo)的設(shè)計風(fēng)格有很多種,如:線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合圖標(biāo)、扁平圖標(biāo)、輕擬物圖標(biāo)、擬物圖標(biāo)、手繪型圖標(biāo)等。
1、線性圖標(biāo):是由直線、曲線、點等元素組合而成的圖標(biāo)樣式。該類圖標(biāo)輕巧簡練,具有一定的想象空間,且不會對界面產(chǎn)生太大的視覺干擾。
2、面性圖標(biāo):可以簡單理解為對線性圖標(biāo)的填充,但面性比線性更加穩(wěn)重和扎實,對色彩的傳達也清晰明顯。
3、線面結(jié)合圖標(biāo):典型代表是「MBE風(fēng)格」圖標(biāo),其設(shè)計特點是采用了粗描邊線和偏移的填充面相結(jié)合,靈動而鮮明。粗線條起到對畫面的絕對分割,突顯內(nèi)容、表現(xiàn)清晰
4、扁平圖標(biāo):去掉了透視、紋理、漸變等能做出 3D 效果的元素,讓信息本身作為核心被凸顯出來,并且在設(shè)計元素上強調(diào)抽象、極簡、符號化。
5、輕擬物圖標(biāo):沒有擬物圖標(biāo)那么寫實,也不像扁平圖標(biāo)那么“平”,而是利用淡淡的漸變和一些光影來達到兩者之間的平衡,識別性高又不失美感。
圖片在 Web 和 App 界面設(shè)計中是非常常見的,圖片的質(zhì)量和展現(xiàn)方式都會影響著用戶對產(chǎn)品的感官體驗。
圖片比例:不同比例的圖片所傳遞的主要信息各不相同,我們需要結(jié)合產(chǎn)品的特點,并根據(jù)不同的場景來選擇合適的圖片比例進行設(shè)計。16:10 的圖片比例最接近黃金比,而黃金分割具有嚴(yán)格的比例性、藝術(shù)性、和諧性,蘊藏著豐富的美學(xué)價值,被認(rèn)為是藝術(shù)設(shè)計中最理想的比例。
圖片排版:排版類型有很多種,根據(jù)不同的場景和所需傳遞的主體信息來選擇與之相符的展現(xiàn)方式,以下是常見的幾種排版類型。
1、滿版型:是以圖片作為主體或背景鋪滿整個畫面,常搭配文字信息或 icon 修飾,視覺傳達直觀而強烈,給人大方、舒展的感覺。
2、通欄型:是指圖片與整體頁面的寬度相同,而高度為其幾分之一甚至更小的一種圖片展現(xiàn)方式,最常見的就是輪播圖(Banner)。通欄型圖片寬闊大氣,可以有效地強調(diào)和展示重要的商品、活動等運營內(nèi)容。
3、并置型:將不同的圖片作大小相同而位置不同的重復(fù)排列,可以是左右或上下排列,能給原本復(fù)雜喧鬧的版面帶來秩序、安靜、調(diào)和與節(jié)奏感。
4、九宮格型:用四條線把畫面上下左右分割成九個小塊,可以把 1 個或者 2 個小塊作為一個單位填充圖像,這種構(gòu)圖給人嚴(yán)謹(jǐn)、規(guī)范、有序的感覺。
5、瀑布流型:圖片會在頁面上呈現(xiàn)參差不齊的多欄布局,降低了界面設(shè)計復(fù)雜度,節(jié)省了空間,使用戶專注于瀏覽,去掉了繁瑣的操作,體驗更好。
空間留白:對于一些特殊的頁面,例如引導(dǎo)頁、閃屏頁、促銷頁等,可以不用嚴(yán)格按照柵格系統(tǒng)進行設(shè)計,但需要注意空間留白的運用。
留白屬性:
層次感:留白可以使頁面的層次感得到極大的增強,留白越大,模塊、信息間的層次感越清晰。
焦點:元素越多,人的視覺注意力越容易分散;相反元素越少(即留白越大),注意力則會更有效地聚焦在重要的內(nèi)容上。
韻味:留白具有“此時無物勝有物”的感覺,猶如中國的水墨畫。留白運用于頁面設(shè)計中,韻味也會出現(xiàn)。
呼吸:留白的呼吸屬性可以想象成周圍的空氣,當(dāng)空氣中的顆粒物(元素)特別多時,人的呼吸也會覺得不通透;相反留白越多時,呼吸感越順暢。
留白表現(xiàn)形式
輕度留白:輕度留白是我們常見的頁面留白設(shè)計形式,在傳遞出雅致、高端、文藝等氣質(zhì)的同時,又能將信息表現(xiàn)得清晰直接,讓頁面更加簡潔和實用。輕度留白融合了重度留白的優(yōu)勢,但不受品牌屬性的影響,幾乎任何產(chǎn)品都可以用這種表現(xiàn)形式。
重度留白:重度留白是把主體縮小到極致,其傳遞出的雅致、空靈、高端氣質(zhì)是最強的,但與此同時,其他的屬性也近乎為零。“無印良品”品牌倡導(dǎo)簡約、質(zhì)樸的生活方式,原研哉賦予其UI設(shè)計理念就是“空”。所以,重度留白傳遞的不是產(chǎn)品,而是概念、氣質(zhì)和態(tài)度。
在任何領(lǐng)域,如果想要有所成就,都需要不斷的學(xué)習(xí),尤其是像UI設(shè)計這樣技術(shù)含量比較高的一些行業(yè),想要真正做出成績最少是系統(tǒng)學(xué)習(xí)專業(yè)知識技能,這樣快速高效的學(xué)習(xí)其實是在提高我們的學(xué)習(xí)效率,爭取把更多時間花在實踐操作和經(jīng)驗積累上。
填寫下面表單即可預(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