如何成為ui高級界面設計師

　　UI設計作為近年來設計行業(yè)的新貴，它的薪資之高令很多設計師羨慕不已，很多平面設計師都轉行UI設計，作為時下熱門高薪職業(yè)之一，UI設計的發(fā)展前景顯而易見。UI設計應用領域非常廣泛，近幾年互聯網從傳統(tǒng)的計算機網頁到最新AI領域的人機交互界面，無不體現出它的市場價值，想要成為一名UI設計高級界面設計師，需要掌握的東西還是挺多的。
 

　　日前，微信官方發(fā)布《關于規(guī)范公眾號內虛擬支付行為的公告》。公告稱，基于 iOS 對開發(fā)者的管理規(guī)范，微信公眾號內暫不支持 iOS 端虛擬支付業(yè)務。虛擬支付業(yè)務是指購買非實物商品，比如：VIP 會員、充值、錄制課程、錄制音頻視頻等虛擬產品。
 

　　從事任何行業(yè)任何崗位，扎實的基本功都是你勝任工作的基礎。對于設計師而言，熟練使用常用軟件工具是必備技能，因為在界面、圖標、動效、交互、切圖、標注等各個環(huán)節(jié)，都會用到不同的軟件。接下來推薦7款高級UI設計師必備工具：
 

　　1、Photoshop：PS是一款強大的圖片處理軟件，因此它不只是修修照片、你用它還能完成UI設計。另外對于圖標的設計，是用矢量繪圖軟件制作的，這樣放大才不會失真，沒有虛邊，所以你可能還要用到AI。但是據行業(yè)數據統(tǒng)計，UI設計行業(yè)中，常用的主要軟件為：PS和AI。UI設計用的最多的軟件就是PS的，在UI設計中主要的用途是用來繪制界面和圖標。
 

　　2、Adobe illustrator：簡稱“AI”，是一種應用于出版、多媒體和在線圖像的工業(yè)標準矢量插畫的軟件為一款非常好的矢量圖形處理工具。AI在UI設計中主要用來繪制圖標，界面等設計。與PS不同的是：AI繪制扁平化圖標界面的時候要比PS快。由于繪制的圖形是矢量的，所以文件會非常小，也方便管理。
 

　　3、After Effects：AE適用于從事設計和視頻特技的機構，包括電視臺、動畫制作公司、個人后期制作工作室以及多媒體工作室。屬于層類型后期軟件。但是在UI行業(yè)來說就是做一些UI的交互動效。動效這塊是效率最高的軟件，不過不能用AE畫圖標做界面。
 

　　4、Cinema 4D：屬于跨界三維軟件，起初在工業(yè)設計行業(yè)中使用廣泛，這兩年開始流行用建模軟件做三維電商設計海報等。這個軟件也屬于UI設計師的必學技能，能做很多的三維動畫設計，學會這個軟件，能讓你的設計表現力更豐富有創(chuàng)意。
 

　　5、Sketch：可以算是專門為UI設計開發(fā)的軟件，也是矢量軟件，但是只有Mac版本，Windows系統(tǒng)無法安裝使用，這個軟件有蘋果電腦的就可以學習一下，而且比較簡單，沒有MAC電腦的可以不用學。
 

　　6、Axure RP：Axure RP是一個專業(yè)的快速原型設計工具。讓負責定義需求和規(guī)格、設計功能和界面的專家能夠快速創(chuàng)建應用軟件或Web網站的線框圖、流程圖、原型和規(guī)格說明文檔。作為專業(yè)的原型設計工具，它能快速、高效的創(chuàng)建原型，同時支持多人協(xié)作設計和版本控制管理 。
 

　　7、InDesign：InDesign 軟件是一個定位于專業(yè)排版領域的設計軟件。是面向公司專業(yè)出版方案的新平臺，由Adobe公司于1999年9月1日發(fā)布。它是基于一個新的開放的面向對象體系，可實現高度的擴展性。并且它還建立了一個由第三方開發(fā)者和系統(tǒng)集成者?？梢蕴峁┳远x雜志、廣告設計、目錄、零售商設計工作室和報紙出版方案的核心?？芍С植寮δ?。
 

　　作為一個合格、優(yōu)秀的UI設計師，你還要具備三種能力：界面視覺設計能力、交互體驗設計能力、用戶需求研究能力。通常，我們看到都是界面視覺設計，比如app的界面。UI 界面中，排版設計同樣重要。如何將至關重要的信息，有效地傳遞給用戶，這是界面本身的職責，而在絕大多數時候，這通常是靠文本來完成。有效的排版對于改善 UI 整體的用戶體驗十分重要。而優(yōu)化排版，本質上也是在優(yōu)化 UI 和 UX。雖然在絕大多數時候，優(yōu)化排版是在提升排版布局的可讀性，提升訪問性，但是它最低的標準和最核心的要素，依然是要保證排版本身的「可用性」。降低用戶使用時的障礙和摩擦，減少認知負荷。出色的排版設計能夠讓用戶注意到內容，而不是排版本身上。
 

　　實用性較強的排版優(yōu)化技巧：
 

　　強化層次結構來提升UI的清晰度：將必要的文本內容集合起來，重新組織，有意識地梳理視覺層次結構，要讓用戶能夠清晰地感知到內容。對于信息層級，通常會按照標題、副標題、正文、引用說明等常見的文本元素構成。而清晰的文本層次結構，是依托于符合文本本身所屬層次的響應的樣式，這樣才能確?？勺x性。大標題應當突出，正文應當清晰明了，副標題起到的是對標題的輔助說明作用，所以應當適當縮小，這樣一來，文本元素之前的大小關系，位置關系都更加清晰了。
 

　　有意識地創(chuàng)造具有呼吸感的排版：字間距、行高、行長是在進行排版的時候，最常調整的屬性。缺少足夠的間距，可能會讓文本難以閱讀，但是間接過多，可能會讓用戶在閱讀的時候感到稀疏難受。
 

　　根據內容來選取字體：在選取文本字體的時候，需要考慮到潛在讀者的體驗。不同的字體能夠給界面和體驗帶來截然不同的體驗，字體的選擇能夠影響用戶對于界面的第一印象。正確的字體選擇，能夠在信息和視覺兩個層面給用戶傳遞信息，錯誤的選擇會導致誤解和混亂的結果。
 

　　使用同一字體家族,如果你在不同字體的搭配上，并沒有足夠豐富的經驗，那么使用同一字體族的字體來進行設計，總是最為安全的選擇。通常，一個字體族是為一個明確的目標來設計的。它們有著更為統(tǒng)一的、富有凝聚力的外觀，在設計使用過程中，會更加便捷。使用字體族的另外一個好處在于，它可以更快適配不同文本元素在排版上的需求，你可以更快地通過調整字體大小、粗細、文字大小、色彩來制造相應的對比，呈現不同的視覺效果。
 

　　盡可能使用左對齊來提高可讀性，在世界上絕大多數的國家和地區(qū)，所使用的文字排版都是從左到右的，閱讀順序是自上而下的。這決定了左對齊是確保可讀性的重要基準。左對齊給人的雙眼提供了一個掃讀時候的基準位置，在大量、長時間閱讀的過程在，極大地減小了閱讀壓力——而居中對齊則明顯做不到這一點。
 

　　排版是數字時代每個設計師都需要學習和掌握的重要技能，無論你的設計項目是什么樣的，這些基本的規(guī)則總能給你的設計帶來更好的效果。不過這些排版技巧都還只是非?；A的部分，在實際的設計當中，還會涉及到很多更加復雜的排版布局——但是這些基礎，始終是最重要的事情。
 

　　一款 App 或 Web 產品，從用戶體驗的角度包含了戰(zhàn)略層、范圍層、結構層、框架層、表現層。而作為 UI 設計師，如果連「表現層」的內容都還一知半解就去盲目地學習其他領域，這是不提倡的。這里說的「表現層」是指視覺設計層面，在界面的視覺設計中同樣也包含了 5 個視覺要素：色彩、文字、圖標、圖片、空間。一個出色的界面設計，必然是將這些要素做到了淋漓盡致。
 

　　色彩三屬性：人眼看到的任一彩色光都是三個屬性的綜合效果。
 

　　色相(H)：即色彩的相貌、種類和名稱，比如紅、橙、黃、綠等顏色的種類就叫色相。
 

　　飽和度(S)：即色彩的鮮艷程度，也稱純度。
 

　　明度(B)：即色彩的明亮程度。
 

　　色彩寓意：同一色相的不同明度和不同飽和度，也會對人產生不同的心理感受。
 

　　白色(White)：純潔、神圣、干凈、高雅、冷淡
 

　　紅色(Red)：熱烈、喜慶、熱情、浪漫、危險
 

　　黃色(Yellow)：光輝、明亮、尊貴、權力
 

　　灰色(Gray)：平凡、隨意、蒼老、冷漠
 

　　橙色(Orange)：溫暖、食物、友好、財富、警告
 

　　藍色(Blue)：平靜、純潔、清涼、科技、沉穩(wěn)
 

　　綠色(Green)：健康、自然、清新、希望、安全
 

　　青色(Cyan)：朝氣、脫俗、真誠、清麗
 

　　紫色(Purple)：神秘、高貴、優(yōu)雅、浪漫、妖艷
 

　　黑色(Black)：深沉、莊重、嚴肅、邪惡、死亡
 

　　色彩搭配：色相對比：兩種及兩種以上色彩組合后，由于色相差別而形成的色彩對比效果稱為色相對比。色相對比的強弱程度，取決于色相之間在色環(huán)上的距離 (角度)，距離 (角度) 越大對比越強，反之亦然。一般界面的色彩搭配主要包括三種顏色：主色調、輔助色、點綴色，搭配比例分別為 6：3：1。
 

　　同類色搭配：色環(huán)上相距 0° 的顏色為同類色，一般常用同一種色相的不同明度或不同飽和度的組合方式，例如藍與淺藍，紅與粉紅等。同類色搭配對比效果統(tǒng)一、清新、含蓄，但也容易產生單調、乏味的感受。
 

　　鄰近色搭配：色環(huán)上相距 30° 左右的顏色為鄰近色 ，例如紫與藍紫，藍紫與藍等。鄰近色搭配對比效果柔和、文靜、和諧，但也容易感覺單調、模糊，需調節(jié)明度來加強效果。
 

　　類似色搭配：色環(huán)上相距 60° 左右的顏色為類似色，例如橙與黃，黃橙與黃綠等。類似色搭配對比效果較豐富、活潑，同時又不失統(tǒng)一、和諧的感覺。
 

　　中差色搭配：色環(huán)上相距 90° 左右的顏色為中差色，例如紅與黃橙，藍綠與黃等。中差色搭配對比效果明快、活潑、飽滿、使人興奮，同時不失調和之感。
 

　　對比色搭配：色環(huán)上相距 120° 左右的顏色為對比色，例如紅與黃，紅紫與黃橙等。對比色搭配對比效果強烈、醒目、刺激、有力，但也容易造成視覺疲勞，一般需要采用多種調和手段來改善對比效果。
 

　　互補色搭配：色環(huán)上相距 180° 左右的顏色為互補色，例如紅與綠，黃與紫等。互補色搭配表現出一種力量、氣勢與活力，具有非常強烈的視覺沖擊力。
 

　　多色搭配：是由多種色彩組合而成的一種搭配方式，一般以不超過 4 種顏色為宜，規(guī)定一種作為主導色，其余作為輔助色使用。多色搭配會讓畫面顯得更加豐富、多彩，充滿趣味性，但若控制不好，也容易讓畫面變花，失去平衡。搭配時須注意區(qū)分主次，按比例進行調和。
 

　　文字使用規(guī)則：不同平臺的界面設計中規(guī)范的字體會有不同，像移動端界面的設計就會有固定的字體樣式，網頁中會有常用的幾個字體。
 

　　圖標功能：圖標是 Web 和 App 設計中的點睛之筆，既能輔助文字信息的傳達，也能作為信息載體被高效地識別，并且圖標也有一定的裝飾作用，可以提高界面設計的美觀度。
 

　　圖標類型：關于圖標的類型目前并沒有很權威的分類，我根據圖標的用途將其分為兩大類：「功能型圖標」和「展示型圖標」。
 

　　功能型圖標：凡是 UI 界面中，用戶可以點擊的圖標均可看成是功能型圖標，該類圖標往往代表某一功能或某一鏈接的跳轉。這類圖標的典型應用場景就是 iOS 系統(tǒng)中的底部標簽欄，以及 Material Design 中側滑菜單選項的左側。
 

　　展示型圖標：相比功能型圖標，展示型圖標更加具有「設計感」，是獨特的、有內涵的以及具備辨識度的。展示型圖標主要是應用程序的啟動圖標。該類圖標代表了一款產品的屬性、氣質以及品牌形象等，也是用戶首先看到的內容，設計時應盡可能讓用戶記住并感到愉悅。該類圖標在 iOS 系統(tǒng)中除了出現在 App Store 里，還出現在用戶下載后的桌面上，以及 Spotlight 的搜索結果和設置等地方。
 

　　圖標風格：圖標的設計風格有很多種，如：線性圖標、面性圖標、線面結合圖標、扁平圖標、輕擬物圖標、擬物圖標、手繪型圖標等。
 

　　1、線性圖標：是由直線、曲線、點等元素組合而成的圖標樣式。該類圖標輕巧簡練，具有一定的想象空間，且不會對界面產生太大的視覺干擾。
 

　    2、面性圖標：可以簡單理解為對線性圖標的填充，但面性比線性更加穩(wěn)重和扎實，對色彩的傳達也清晰明顯。
 

　    3、線面結合圖標：典型代表是「MBE風格」圖標，其設計特點是采用了粗描邊線和偏移的填充面相結合，靈動而鮮明。粗線條起到對畫面的絕對分割，突顯內容、表現清晰
 

　　 4、扁平圖標：去掉了透視、紋理、漸變等能做出 3D 效果的元素，讓信息本身作為核心被凸顯出來，并且在設計元素上強調抽象、極簡、符號化。
 

　    5、輕擬物圖標：沒有擬物圖標那么寫實，也不像扁平圖標那么“平”，而是利用淡淡的漸變和一些光影來達到兩者之間的平衡，識別性高又不失美感。
 

　　圖片在 Web 和 App 界面設計中是非常常見的，圖片的質量和展現方式都會影響著用戶對產品的感官體驗。
 

　　圖片比例：不同比例的圖片所傳遞的主要信息各不相同，我們需要結合產品的特點，并根據不同的場景來選擇合適的圖片比例進行設計。16：10 的圖片比例最接近黃金比，而黃金分割具有嚴格的比例性、藝術性、和諧性，蘊藏著豐富的美學價值，被認為是藝術設計中最理想的比例。
 

　　圖片排版：排版類型有很多種，根據不同的場景和所需傳遞的主體信息來選擇與之相符的展現方式，以下是常見的幾種排版類型。
 

　　1、滿版型：是以圖片作為主體或背景鋪滿整個畫面，常搭配文字信息或 icon 修飾，視覺傳達直觀而強烈，給人大方、舒展的感覺。
 

　　2、通欄型：是指圖片與整體頁面的寬度相同，而高度為其幾分之一甚至更小的一種圖片展現方式，最常見的就是輪播圖(Banner)。通欄型圖片寬闊大氣，可以有效地強調和展示重要的商品、活動等運營內容。
 

　    3、并置型：將不同的圖片作大小相同而位置不同的重復排列，可以是左右或上下排列，能給原本復雜喧鬧的版面帶來秩序、安靜、調和與節(jié)奏感。
 

　    4、九宮格型：用四條線把畫面上下左右分割成九個小塊，可以把 1 個或者 2 個小塊作為一個單位填充圖像，這種構圖給人嚴謹、規(guī)范、有序的感覺。
 

　    5、瀑布流型：圖片會在頁面上呈現參差不齊的多欄布局，降低了界面設計復雜度，節(jié)省了空間，使用戶專注于瀏覽，去掉了繁瑣的操作，體驗更好。
 

　　空間留白：對于一些特殊的頁面，例如引導頁、閃屏頁、促銷頁等，可以不用嚴格按照柵格系統(tǒng)進行設計，但需要注意空間留白的運用。
 

　　留白屬性：
 

　　層次感：留白可以使頁面的層次感得到極大的增強，留白越大，模塊、信息間的層次感越清晰。
 

　　焦點：元素越多，人的視覺注意力越容易分散;相反元素越少(即留白越大)，注意力則會更有效地聚焦在重要的內容上。
 

　　韻味：留白具有“此時無物勝有物”的感覺，猶如中國的水墨畫。留白運用于頁面設計中，韻味也會出現。
 

　　呼吸：留白的呼吸屬性可以想象成周圍的空氣，當空氣中的顆粒物(元素)特別多時，人的呼吸也會覺得不通透;相反留白越多時，呼吸感越順暢。
 

　　留白表現形式
 

　　輕度留白：輕度留白是我們常見的頁面留白設計形式，在傳遞出雅致、高端、文藝等氣質的同時，又能將信息表現得清晰直接，讓頁面更加簡潔和實用。輕度留白融合了重度留白的優(yōu)勢，但不受品牌屬性的影響，幾乎任何產品都可以用這種表現形式。
 

　　重度留白：重度留白是把主體縮小到極致，其傳遞出的雅致、空靈、高端氣質是最強的，但與此同時，其他的屬性也近乎為零。“無印良品”品牌倡導簡約、質樸的生活方式，原研哉賦予其UI設計理念就是“空”。所以，重度留白傳遞的不是產品，而是概念、氣質和態(tài)度。
 

　　在任何領域，如果想要有所成就，都需要不斷的學習，尤其是像UI設計這樣技術含量比較高的一些行業(yè)，想要真正做出成績最少是系統(tǒng)學習專業(yè)知識技能，這樣快速高效的學習其實是在提高我們的學習效率，爭取把更多時間花在實踐操作和經驗積累上。