1.1 初識(shí)UI設(shè)計(jì)

1.1.1 UI設(shè)計(jì)行業(yè)概述

1.UI設(shè)計(jì)就業(yè)現(xiàn)狀

近年來，隨著互聯(lián)網(wǎng)的蓬勃發(fā)展，UI設(shè)計(jì)作為互聯(lián)網(wǎng)中的新興行業(yè)，在互聯(lián)網(wǎng)的助力下呈現(xiàn)井噴式的發(fā)展態(tài)勢(shì)。拉鉤網(wǎng)、智聯(lián)招聘、Boss直聘等大型招聘平臺(tái)提供的統(tǒng)計(jì)數(shù)據(jù)顯示，截至2019年3月，全國(guó)發(fā)布UI設(shè)計(jì)師崗位共計(jì)20745個(gè)，UI設(shè)計(jì)行業(yè)的人才需求量相當(dāng)大。

Photoshop就業(yè)前景及安裝與卸載

另外，UI設(shè)計(jì)行業(yè)薪資待遇的平均水平與增長(zhǎng)幅度，相比平面設(shè)計(jì)、室內(nèi)設(shè)計(jì)等設(shè)計(jì)行業(yè)具有更強(qiáng)的競(jìng)爭(zhēng)力。圖1-1所示為職友集于2019年3月公布的統(tǒng)計(jì)數(shù)據(jù)：北京UI設(shè)計(jì)師的平均月收入為13330元，較2017年增長(zhǎng)27.2%，北京70%以上的UI設(shè)計(jì)師月收入在10000元以上；圖1-2所示為北京平面設(shè)計(jì)師平均月收入，僅為7940元，較2017年同比下降23.2%。

2.UI設(shè)計(jì)師能力模型

縱觀百度（Baidu）、阿里巴巴（Alibaba）、騰訊（Tencent）等大型互聯(lián)網(wǎng)企業(yè)的招聘信息可知：目前國(guó)內(nèi)對(duì)UI設(shè)計(jì)師的能力要求主要體現(xiàn)在視覺設(shè)計(jì)能力、用戶調(diào)研能力、持續(xù)學(xué)習(xí)能力、交互設(shè)計(jì)能力等方面。其中，視覺設(shè)計(jì)能力被視為UI設(shè)計(jì)師的核心競(jìng)爭(zhēng)力，視覺設(shè)計(jì)工作也是UI設(shè)計(jì)師日常的主要工作。目前，大部分互聯(lián)網(wǎng)企業(yè)對(duì)UI設(shè)計(jì)師的任職要求主要包括4個(gè)方面。

（1）視覺工作。負(fù)責(zé)UI產(chǎn)品從立項(xiàng)到迭代的整體視覺設(shè)計(jì)工作，跟蹤設(shè)計(jì)實(shí)現(xiàn)效果并提出優(yōu)化方案，落實(shí)日常運(yùn)營(yíng)活動(dòng)的UI設(shè)計(jì)支持工作，把控UI產(chǎn)品的視覺方向并建立產(chǎn)品設(shè)計(jì)流程與設(shè)計(jì)規(guī)范。

（2）調(diào)研工作。參與UI產(chǎn)品討論，與產(chǎn)品經(jīng)理、開發(fā)工程師協(xié)作，開展具有前瞻性的產(chǎn)品預(yù)研設(shè)計(jì)和用戶研究。

（3）學(xué)習(xí)深造。持續(xù)關(guān)注與分析設(shè)計(jì)趨勢(shì)，分享設(shè)計(jì)經(jīng)驗(yàn)，促進(jìn)團(tuán)隊(duì)設(shè)計(jì)能力提升，擴(kuò)大團(tuán)隊(duì)的行業(yè)影響力。

（4）交互工作。梳理UI產(chǎn)品的交互邏輯與操作流程，輸出相應(yīng)的產(chǎn)品原型圖。

3.UI設(shè)計(jì)流行趨勢(shì)

UI設(shè)計(jì)受時(shí)代變遷、用戶審美、地域文化、硬件設(shè)備等因素的影響，其流行趨勢(shì)呈動(dòng)態(tài)變化。所謂動(dòng)態(tài)變化，即設(shè)計(jì)的流行風(fēng)格在汲取以往設(shè)計(jì)風(fēng)格精華的基礎(chǔ)上呈漸進(jìn)式的優(yōu)化與演變。

自UI設(shè)計(jì)行業(yè)誕生以來，移動(dòng)終端的界面風(fēng)格主要經(jīng)歷了3次大規(guī)模的演變：非智能手機(jī)時(shí)代的像素風(fēng)格、智能手機(jī)剛誕生時(shí)的擬物風(fēng)格和智能手機(jī)普及后備受青睞的扁平風(fēng)格。

（1）像素風(fēng)格。像素風(fēng)格的廣泛應(yīng)用主要是因?yàn)?0世紀(jì)末非智能手機(jī)屏幕分辨率普遍較低，用戶通過肉眼就可以明顯看到屏幕中的像素格。圖1-3所示為諾基亞開機(jī)時(shí)的界面，界面中的文字有明顯的顆粒感。

（2）擬物風(fēng)格。擬物風(fēng)格早在智能手機(jī)誕生前就已經(jīng)存在于各大非智能手機(jī)界面，圖1-4所示為非智能手機(jī)中的擬物風(fēng)格圖標(biāo)。以iPhone 4為代表的智能手機(jī)誕生后，為保證用戶能夠快速識(shí)別不同圖標(biāo)的含義，蘋果公司iOS負(fù)責(zé)人斯科特·福斯特爾（Scott Forstall）將擬物風(fēng)格發(fā)揚(yáng)光大。圖1-5所示為iPhone 4擬物風(fēng)格界面。

（3）扁平風(fēng)格。扁平風(fēng)格的概念于2008年由谷歌公司提出，微軟公司將其稱為 “authentically digital”。扁平風(fēng)格最終風(fēng)靡全球得益于蘋果公司的大力推廣。蘋果公司作為UI設(shè)計(jì)的時(shí)尚風(fēng)向標(biāo)，在其iOS 7系統(tǒng)中啟用了扁平風(fēng)格，順應(yīng)了越來越多樣化的屏幕適配需求。圖1-6所示為蘋果 iOS 7中的扁平風(fēng)格界面。

1.1.2 Photoshop在UI設(shè)計(jì)中的應(yīng)用

Photoshop由著名桌面軟件公司Adobe Systems Incorporated出品。Adobe是著名的圖形圖像與排版軟件生產(chǎn)商，旗下的設(shè)計(jì)軟件還包括Illustrator、InDesign、After Effects、Flash、Experience Design 等。

Photoshop的應(yīng)用領(lǐng)域

UI設(shè)計(jì)工作非常龐雜，需要UI設(shè)計(jì)師掌握全面的技能以滿足企業(yè)的各類設(shè)計(jì)需求。一般情況下，UI設(shè)計(jì)師需要掌握的常用設(shè)計(jì)軟件包括Photoshop、Illustrator、After Effects、Axure、MindManager等。圖1-7所示為UI設(shè)計(jì)中常用的各類軟件。

在UI設(shè)計(jì)工作中，Photoshop是各類設(shè)計(jì)軟件中使用頻率較高的工具，作為UI設(shè)計(jì)師必須掌握的設(shè)計(jì)軟件廣泛應(yīng)用于UI設(shè)計(jì)的各個(gè)領(lǐng)域，如圖標(biāo)與圖形設(shè)計(jì)、原型與界面設(shè)計(jì)、插畫與計(jì)算機(jī)圖形（Computer Graphics,CG）設(shè)計(jì)、圖像合成與精修等。

1.圖標(biāo)與圖形設(shè)計(jì)

在圖標(biāo)與圖形基本輪廓的繪制方面，Photoshop中提供了強(qiáng)大的矢量工具與布爾運(yùn)算功能，UI設(shè)計(jì)師可根據(jù)創(chuàng)作需求，繪制規(guī)則或自由形態(tài)的圖標(biāo)與圖形，如圖1-8所示。在圖標(biāo)與圖形的光影、質(zhì)感、紋理設(shè)計(jì)方面，Photoshop具有豐富的圖層樣式與圖層混合模式，利用它，UI設(shè)計(jì)師可模擬出現(xiàn)實(shí)世界中的各類物體，如圖1-9所示。

2.原型與界面設(shè)計(jì)

在設(shè)計(jì)網(wǎng)頁(yè)界面或移動(dòng)端界面時(shí)，UI設(shè)計(jì)師需要事先規(guī)劃好界面中各個(gè)模塊與功能的布局，確保應(yīng)用的操作流程符合邏輯，這些僅由黑白灰色塊構(gòu)成的簡(jiǎn)易頁(yè)面即為原型圖，如圖1-10所示。UI設(shè)計(jì)師可借助Photoshop繪制網(wǎng)頁(yè)及移動(dòng)端界面的原型圖，方便指導(dǎo)后期的視覺設(shè)計(jì)工作。

3.插畫與CG設(shè)計(jì)

Photoshop支持Wacom、Bamboo等品牌手繪板的應(yīng)用。Photoshop中形態(tài)各異的畫筆工具通過壓桿可感知設(shè)計(jì)師運(yùn)筆的力度，繪制出流暢的線條與形狀。UI設(shè)計(jì)師借助Photoshop中的畫筆工具，可自由創(chuàng)作商業(yè)插畫及CG人物、場(chǎng)景、道具等美術(shù)資源，如圖1-11所示。

4.圖像合成與精修

Photoshop是一款強(qiáng)大的數(shù)字圖像處理軟件，能勝任圖像合成、圖像精修、圖像校色、圖像格式轉(zhuǎn)換等圖像編輯工作，幫助UI設(shè)計(jì)師快速實(shí)現(xiàn)天馬行空的圖像創(chuàng)意設(shè)計(jì)。圖1-12所示為精修前后的模特圖像，精修后的模特肌膚明顯更干凈、明亮。