如何成為ui高級界面設(shè)計師

　　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)整字體大小、粗細、文字大小、色彩來制造相應(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° 左右的顏色為互補色，例如紅與綠，黃與紫等。互補色搭配表現(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)驗積累上。