1.1 認(rèn)識(shí)UI

無(wú)論是對(duì)于小白，還是有一定設(shè)計(jì)經(jīng)驗(yàn)的UI設(shè)計(jì)來(lái)說(shuō)，在設(shè)計(jì)前對(duì)UI的系統(tǒng)認(rèn)識(shí)都是非常有必要的。在本節(jié)中，主要從UI這個(gè)大方向開(kāi)始，讓大家慢慢熟悉UI的發(fā)展歷程和UI設(shè)計(jì)的意義。

1.1.1 UI操作系統(tǒng)的發(fā)展簡(jiǎn)介

1. 設(shè)備的發(fā)展

對(duì)于如今的互聯(lián)網(wǎng)行業(yè)而言，UI設(shè)計(jì)越來(lái)越被重視。

20年前，也就是1997年，那個(gè)時(shí)候還沒(méi)有騰訊，也沒(méi)有阿里巴巴。許多老百姓還不知道什么叫作PC，只有家里條件還不錯(cuò)的人才有機(jī)會(huì)接觸真正的計(jì)算機(jī)。那時(shí)候的計(jì)算機(jī)也叫作“微機(jī)”（micro computer），大多數(shù)人對(duì)它都是懷著好奇的心態(tài)去看待。當(dāng)時(shí)的人們經(jīng)常將386和486（指計(jì)算機(jī)處理器型號(hào)，數(shù)字越大，性能越強(qiáng)）掛在嘴邊，但許多人并不知道其具體差別在哪里，就更別提現(xiàn)在人們每天都在津津樂(lè)道的“互聯(lián)網(wǎng)”等各種周邊名詞了。早期的個(gè)人臺(tái)式計(jì)算機(jī)如圖1-1所示。

UI即User Interface（用戶界面）的英文縮寫，泛指用戶軟件的操作界面。UI設(shè)計(jì)主要指軟件操作界面的樣式，而UI的用戶體驗(yàn)則指的是人們對(duì)軟件的人機(jī)交互、操作邏輯以及界面美觀的整體要求。

好的UI不僅讓軟件變得有個(gè)性、有品位，還要讓軟件的操作變得舒適、簡(jiǎn)單和方便，且充分體現(xiàn)軟件的定位和特點(diǎn)。

作為一名UI初學(xué)者或者是UI設(shè)計(jì)師，了解一下UI的發(fā)展歷程是很有必要的。這里我們以UI設(shè)計(jì)中最常見(jiàn)和最直觀的操作系統(tǒng)和圖形為例，介紹一下UI在近30年間從萌芽到逐漸演變的過(guò)程。

（1）個(gè)人計(jì)算機(jī)（PC）階段

對(duì)于大多數(shù)用戶來(lái)說(shuō)，在使用移動(dòng)設(shè)備之前，最早接觸UI的媒介主要是個(gè)人計(jì)算機(jī)上的操作系統(tǒng)。表1-1展示了從1981年到2015年，Windows操作系統(tǒng)和蘋果操作系統(tǒng)的發(fā)展過(guò)程。

（2）移動(dòng)設(shè)備發(fā)展的各個(gè)階段

針對(duì)本書需要講解的內(nèi)容方向，這里僅把操作系統(tǒng)上具有真正意義的手機(jī)納入關(guān)鍵時(shí)間點(diǎn)，而不是真正的手機(jī)編年史，請(qǐng)大家注意。同時(shí)，在該歷程中主要以覆蓋率最為廣泛的iOS/Android操作系統(tǒng)為主線來(lái)進(jìn)行介紹，并不包含Android開(kāi)源的手機(jī)品牌，見(jiàn)表1-2。

2. 風(fēng)格的發(fā)展

從最早8bit像素風(fēng)格的單色系統(tǒng)圖標(biāo)到后來(lái)的五顏六色的圖標(biāo)，再到后來(lái)的寫實(shí)風(fēng)格、扁平化、極簡(jiǎn)化圖標(biāo)，一路走來(lái)，圖標(biāo)的風(fēng)格演變都有著比較鮮明的時(shí)代特征，并且隨著時(shí)間的推移，各平臺(tái)操作系統(tǒng)之間的UI設(shè)計(jì)風(fēng)格也逐漸開(kāi)始分化，用戶的品牌感知也日漸明顯。各階段的UI主要涉及風(fēng)格如圖1-2所示。

1.1.2 UED團(tuán)隊(duì)的構(gòu)成與介紹

UED，全稱User Experience Design，中文含義為用戶體驗(yàn)設(shè)計(jì)。在日常生活中，想必大家經(jīng)常會(huì)聽(tīng)到一些關(guān)于用戶體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)的工作或者故事，同時(shí)也都知道如騰訊CDC、ISUX和TGidea這樣的一些行業(yè)標(biāo)桿團(tuán)隊(duì)。

下面針對(duì)目前比較完善的一些UED團(tuán)隊(duì)配置的崗位做一下簡(jiǎn)單介紹。就全球范圍來(lái)說(shuō)，對(duì)于UI設(shè)計(jì)領(lǐng)域細(xì)分普遍存在一種共性的人力配置，如圖1-3所示。

視覺(jué)設(shè)計(jì)師（VD，Visual Designer）：視覺(jué)設(shè)計(jì)的主要輸出方，視覺(jué)風(fēng)格的把控和視覺(jué)規(guī)范的制定者。

交互設(shè)計(jì)師（ID，Interaction Designer）：交互方案的主要輸出方，與產(chǎn)品經(jīng)理協(xié)同較為頻繁。

用戶研究設(shè)計(jì)師（UR，User Reserch Designer）：用戶市場(chǎng)調(diào)研組織、執(zhí)行和用研報(bào)告輸出方。

UI工程師（FD，F(xiàn)ront End Developer）：有的公司也稱之為重構(gòu)設(shè)計(jì)師，頁(yè)面還原重構(gòu)的技術(shù)輸出方。

當(dāng)然，像TGidea這一類的互聯(lián)網(wǎng)營(yíng)銷設(shè)計(jì)團(tuán)隊(duì)，除了以上的崗位分配之外，根據(jù)業(yè)務(wù)和創(chuàng)意的需要，甚至可能還配置有專業(yè)的多媒體動(dòng)畫師和優(yōu)秀的文案策劃人員這樣的職位。針對(duì)UED團(tuán)隊(duì)來(lái)說(shuō)，其對(duì)于崗位雖然有明確的劃分，但我還是希望大家在實(shí)際工作中能有意識(shí)地去做一些橫向拓展和學(xué)習(xí)，了解和熟悉除職責(zé)范圍內(nèi)的一些其他技能，將自己放在用戶的角度去思考問(wèn)題，并做好設(shè)計(jì)，如此才可能真正做出適合用戶需求的產(chǎn)品。

總而言之，全方位的技能掌握，對(duì)于一個(gè)合格的用戶體驗(yàn)設(shè)計(jì)師來(lái)說(shuō)至關(guān)重要。

1.1.3 UI的應(yīng)用領(lǐng)域分析

1. 支付領(lǐng)域

目前，我們正處于一個(gè)電子信息爆炸的時(shí)代，隨處都可見(jiàn)人機(jī)交互的場(chǎng)景，而只要有人機(jī)交互的場(chǎng)景，就一定會(huì)有UI的身影。同時(shí)，針對(duì)UI以往有很多無(wú)法實(shí)現(xiàn)且我們甚至都不敢想象的場(chǎng)景在最近的五六年時(shí)間里都慢慢變成了現(xiàn)實(shí)。例如，如今的支付方式已經(jīng)逐步被數(shù)字化，我們?nèi)绻獬鲑?gòu)物甚至可以不用帶任何現(xiàn)金，而只需要一部手機(jī)提供掃碼功能即可完成支付，如圖1-4所示，非常方便和快捷。

目前我們也正處于一個(gè)移動(dòng)互聯(lián)網(wǎng)盛行的時(shí)代，針對(duì)網(wǎng)上購(gòu)物的各種App（全稱Application，一般泛指手機(jī)上需要安裝的第三方應(yīng)用程序）服務(wù)應(yīng)有盡有，無(wú)論你是想品嘗美食、外出旅游、訂酒店、訂機(jī)票還是看電影等，利用App（見(jiàn)圖1-5）和各種網(wǎng)絡(luò)支付方式（見(jiàn)圖1-6）進(jìn)行操作基本上都可以搞定。

2. 教育領(lǐng)域

無(wú)論在任何時(shí)代，教育和科技都是分不開(kāi)的，如果想要科技得以發(fā)展，就必然要重視教育。

對(duì)于如今的學(xué)生來(lái)說(shuō)，他們每天可能已不需要像我們小時(shí)候那樣整天背著一個(gè)十幾斤的書包往返于學(xué)校和家，因?yàn)樗幸獙W(xué)的內(nèi)容都可以存儲(chǔ)在一個(gè)輕薄的教學(xué)平板電腦中。同時(shí)除了打草稿之外，學(xué)生們幾乎不需要筆就能完成作業(yè)，老師也能通過(guò)網(wǎng)站系統(tǒng)批改作業(yè)。此外，如今學(xué)校若要通知學(xué)生的父母去學(xué)校開(kāi)家長(zhǎng)會(huì)，基本也不需要讓學(xué)生回家轉(zhuǎn)達(dá)父母或者打電話，而只需要通過(guò)微信或者QQ群發(fā)消息統(tǒng)一告知一下即可。

而對(duì)于如今的成人教育來(lái)說(shuō)，在線課堂和網(wǎng)絡(luò)培訓(xùn)課程日益火爆，且針對(duì)各行各業(yè)的學(xué)習(xí)和培訓(xùn)應(yīng)有盡有。這為急切需要提升技能又苦于找不到合適的平臺(tái)培訓(xùn)的人們提供了一個(gè)非常好的學(xué)習(xí)機(jī)會(huì)。各類型的教育類App如圖1-7所示。

3. 醫(yī)療領(lǐng)域

UI科技在醫(yī)療領(lǐng)域的利用，可以說(shuō)讓醫(yī)療技術(shù)和醫(yī)療服務(wù)的發(fā)展有了質(zhì)的飛躍。如今我們看病，除了到醫(yī)院掛號(hào)，還可以通過(guò)手機(jī)App預(yù)約掛號(hào)。同時(shí)，全計(jì)算機(jī)系統(tǒng)操作的醫(yī)療器械操作也會(huì)讓醫(yī)療技術(shù)更加精準(zhǔn)，同時(shí)也大大提高了手術(shù)成功的概率，減輕了患者的痛苦。此外，醫(yī)療領(lǐng)域中的大數(shù)據(jù)檢測(cè)分析技術(shù)，也使得人類能戰(zhàn)勝更多的疾病，讓更多的患者得到更加客觀和針對(duì)性的治療。各類型的醫(yī)療類App如圖1-8所示。

4. 娛樂(lè)領(lǐng)域

針對(duì)UI科技在娛樂(lè)領(lǐng)域的應(yīng)用，首先想到的便是游戲行業(yè)了。沒(méi)錯(cuò)，無(wú)論是從最早的8位游戲機(jī)到現(xiàn)在的VR/AR游戲，“人機(jī)互動(dòng)”這個(gè)概念在游戲上的體現(xiàn)是最為淋漓盡致的。在其中，我們可以盡情地享受科技給我們帶來(lái)的各種美好體驗(yàn)，并且從全球一些知名游戲公司每年在游戲上的投入和收益就可以看出，此領(lǐng)域?qū)τ诳萍嫉男枨蠛湍繕?biāo)有多大。因此，多媒體互動(dòng)時(shí)代注定是科技與人類之間的一場(chǎng)娛樂(lè)盛宴！各大游戲娛樂(lè)類App如圖1-9所示。

5. 共享領(lǐng)域

2010年前后，隨著實(shí)物共享平臺(tái)的出現(xiàn)，“共享”一詞的概念開(kāi)始從純粹的無(wú)償分享、信息分享逐漸轉(zhuǎn)變?yōu)椤矮@得一定報(bào)酬”為主要商業(yè)目的基于陌生人且存在物品使用權(quán)暫時(shí)轉(zhuǎn)移的“共享經(jīng)濟(jì)”。這種顛覆式經(jīng)濟(jì)模式下催生出來(lái)的行業(yè)種類繁多，幾乎涵蓋到各行各業(yè)。就線下共享經(jīng)濟(jì)來(lái)說(shuō)，手機(jī)終端成為聯(lián)通共享雙方或者多方的主要橋梁。人們簡(jiǎn)單地在手機(jī)上進(jìn)行一系列的操作，就可以輕松地解決生活中各種衣食住行的問(wèn)題。

例如，當(dāng)我們用手機(jī)打開(kāi)某個(gè)乘車App，就可以解決自身的用車問(wèn)題；外出旅游時(shí)如果感覺(jué)酒店太貴或不夠溫馨，沒(méi)有家的氛圍，那么你可以打開(kāi)某個(gè)民宿App，在世界范圍內(nèi)都可以預(yù)定到一個(gè)靠海看日出且溫馨的臨時(shí)住所來(lái)充當(dāng)你在旅途中的“家”；需要近距離出行的時(shí)候，如今各大城市的街道角落里都擺放有各種品牌的共享單車，此時(shí)只要打開(kāi)手機(jī)上的共享單車App（見(jiàn)圖1-10），然后進(jìn)行掃碼，即可開(kāi)始騎車出行。

6. 金融領(lǐng)域

當(dāng)你想要投資或者辦理銀行業(yè)務(wù)的時(shí)候，你一定會(huì)看看手機(jī)上的金融類App中有沒(méi)有可以直接在手機(jī)上就能辦理的業(yè)務(wù)。對(duì)于金融行業(yè)而言，越來(lái)越多的銀行和金融機(jī)構(gòu)開(kāi)始重視互聯(lián)網(wǎng)服務(wù)，通過(guò)彼此之間的良性競(jìng)爭(zhēng)，用戶有了更多的了解和選擇的空間，用戶體驗(yàn)得到提升，如圖1-11所示。

總體來(lái)說(shuō)，目前UI科技滲透到的領(lǐng)域還有很多，這里不再一一列舉。同時(shí)，越來(lái)越多的創(chuàng)業(yè)團(tuán)隊(duì)也正在用互聯(lián)網(wǎng)的思維努力地改變著各行各業(yè)的傳統(tǒng)模式，以求能發(fā)現(xiàn)新的“藍(lán)海”行業(yè)。但是無(wú)論是哪個(gè)領(lǐng)域，只要是跟人打交道，那就必然會(huì)發(fā)生交互行為。有一天也許手機(jī)會(huì)消失，也許某個(gè)操作能簡(jiǎn)單到甚至不用手就能完成，但是對(duì)于人機(jī)交互而言，UI的存在，至少在未來(lái)20年，很難被打破，這也是越來(lái)越多的傳統(tǒng)設(shè)計(jì)師轉(zhuǎn)行到UI設(shè)計(jì)行業(yè)的原因吧。

1.1.4 UI設(shè)計(jì)師的自我修養(yǎng)

1. 技能的培養(yǎng)與提升

針對(duì)不同的設(shè)計(jì)，技能需求往往都有所不同，但是唯有一點(diǎn)是相通的，即無(wú)論是做什么樣的設(shè)計(jì)，都要基于“符合用戶審美和滿足用戶需求”這一點(diǎn)。

對(duì)于剛?cè)胄械腢I設(shè)計(jì)師來(lái)說(shuō)，首先需要做的，就是不斷提升自己的專業(yè)技能。一個(gè)在開(kāi)始階段如果只會(huì)動(dòng)嘴皮子而忽略了動(dòng)手實(shí)干的設(shè)計(jì)師，那無(wú)異于自毀前程，所以也就不要怪機(jī)會(huì)和時(shí)運(yùn)不佳了。

在實(shí)際生活中，很多設(shè)計(jì)師經(jīng)常會(huì)問(wèn)我：“什么才是做好UI設(shè)計(jì)師的第一步？”我的答案很簡(jiǎn)單，那就是不斷地學(xué)習(xí)臨摹。雖然如今UI行業(yè)流行的是扁平化設(shè)計(jì)，但在實(shí)際臨摹時(shí)，建議大家還是針對(duì)擬物化圖標(biāo)來(lái)多做一下練習(xí)。

在這里，我們來(lái)說(shuō)一下擬物化圖標(biāo)臨摹和學(xué)習(xí)的好處。

（1）強(qiáng)化對(duì)物體造型的構(gòu)建能力和想象力

圖1-12和圖1-13所展示的為寫實(shí)風(fēng)格圖標(biāo)，這兩張圖大約是我10年前的作品。由于當(dāng)時(shí)寫實(shí)化風(fēng)格占據(jù)著市場(chǎng)的主導(dǎo)，所以在那個(gè)時(shí)代，幾乎全球范圍內(nèi)的UI設(shè)計(jì)師都在努力追求著ICON的細(xì)節(jié)和質(zhì)感。不得不說(shuō)的是，那段時(shí)間我對(duì)于寫實(shí)圖標(biāo)的強(qiáng)化訓(xùn)練，不僅強(qiáng)化了我對(duì)于造型和質(zhì)感表現(xiàn)的基本功，同時(shí)讓我對(duì)整體畫面感的理解有了比較大的提升。直到現(xiàn)在，就我個(gè)人來(lái)說(shuō)，在圖標(biāo)制作中我依然鐘情于質(zhì)感表現(xiàn)這一塊。

（2）強(qiáng)化對(duì)物體光影和細(xì)節(jié)的把控能力

下面介紹到的這個(gè)案例（見(jiàn)圖1-14和圖1-15）是關(guān)于一個(gè)Android操作系統(tǒng)的鎖屏動(dòng)畫方案，這是我在大約2010年時(shí)設(shè)計(jì)的作品，目前已經(jīng)開(kāi)發(fā)完成。由于這是一個(gè)動(dòng)態(tài)的鎖屏動(dòng)畫效果，在設(shè)計(jì)中除了對(duì)于基本造型的考量之外，最為重要的還是對(duì)于一些細(xì)節(jié)的處理，如金屬元件的劃痕、機(jī)械軸承滾動(dòng)式同步的旋轉(zhuǎn)以及金屬杠桿隨著機(jī)械聯(lián)動(dòng)所產(chǎn)生的同步變化等效果。

對(duì)設(shè)計(jì)師來(lái)說(shuō)，要把一個(gè)效果盡量地還原到真實(shí)狀態(tài)，其實(shí)就是一個(gè)不斷去記憶真實(shí)場(chǎng)世界中的一些物理?xiàng)l件和細(xì)節(jié)的過(guò)程，在這個(gè)過(guò)程中當(dāng)你考量得越多，你所制作出的圖標(biāo)細(xì)節(jié)就會(huì)越豐富，那么圖標(biāo)中的物體還原度也就越高，效果也就越真實(shí)和自然。

（3）強(qiáng)化設(shè)計(jì)內(nèi)容的拆解能力

當(dāng)你在臨摹或者分析別人的作品時(shí)，我們的大腦意識(shí)里會(huì)沉淀和提煉出若干的元素內(nèi)容。如圖1-16所示，圖中的1號(hào)正方圖形便是你所見(jiàn)的別人的優(yōu)秀作品，經(jīng)過(guò)拆解之后，會(huì)變成一些零碎的靈感來(lái)源即2號(hào)三角圖形，隨后這些靈感元素在你大腦中會(huì)經(jīng)過(guò)一個(gè)重組、更新和完善的過(guò)程，在具體設(shè)計(jì)工作中，我們可以將這些靈感進(jìn)行自我消化和重塑，并且這當(dāng)中可能會(huì)產(chǎn)生出千萬(wàn)種新的設(shè)計(jì)想法和可能，之后根據(jù)具體的需求將想法付諸設(shè)計(jì)，也就得到了我們自己想要的作品。

總之，多學(xué)多練，是設(shè)計(jì)師技能提升的關(guān)鍵。而在前期的設(shè)計(jì)練習(xí)過(guò)程中，臨摹是一個(gè)既快捷又方便的有效學(xué)習(xí)方法，它不僅能提升你的設(shè)計(jì)能力，同時(shí)也能讓你在不斷地觀摩別人的優(yōu)秀作品的過(guò)程中，接收到越來(lái)越多的靈感和想法，從而做出更好的設(shè)計(jì)作品。

2. 設(shè)計(jì)思維的訓(xùn)練

對(duì)于UI設(shè)計(jì)行業(yè)來(lái)說(shuō)，設(shè)計(jì)的思維不單單是把界面設(shè)計(jì)得漂亮和美觀就可以了，更多的是側(cè)重于功能性，并且它是一種偏理性的思維方式，對(duì)于用戶體驗(yàn)來(lái)說(shuō)至關(guān)重要，同時(shí)也是除不斷練習(xí)外如何讓設(shè)計(jì)師快速地從初級(jí)到高級(jí)提升過(guò)程中的關(guān)鍵，希望引起大家重視（在本書第2章中，將會(huì)比較細(xì)致地和大家聊一聊關(guān)于設(shè)計(jì)的思維訓(xùn)練，這里只做一個(gè)簡(jiǎn)單介紹）。

3. 培養(yǎng)耐心觀察的習(xí)慣

在設(shè)計(jì)圈子中，我們經(jīng)常會(huì)聽(tīng)到的一個(gè)詞就是“走心”，也就是指在一個(gè)設(shè)計(jì)上你是否用心的問(wèn)題。

如今，越來(lái)越多的設(shè)計(jì)行業(yè)開(kāi)始推崇“匠人”精神。我們都知道，好的設(shè)計(jì)作品是需要反復(fù)思考和不斷地打磨才能完成的。而每一次的修改和調(diào)整甚至推翻重來(lái)，都是對(duì)設(shè)計(jì)師耐性的考驗(yàn)。如果一個(gè)設(shè)計(jì)師對(duì)待設(shè)計(jì)的態(tài)度有著“匠人”精神，那么他會(huì)是一個(gè)出色的設(shè)計(jì)師；如果一個(gè)設(shè)計(jì)團(tuán)隊(duì)對(duì)待設(shè)計(jì)有著“匠人”精神，那么這會(huì)是一個(gè)出色的團(tuán)隊(duì)。

在我看來(lái)，“匠人”精神最核心的一點(diǎn)，就是要求人要有追求完美的態(tài)度和超高的耐性。面對(duì)發(fā)展日益迅速、生活節(jié)奏越來(lái)越快的情況，試問(wèn)，有多少人能夠真正耐著性子專心去做好一件事呢？

同時(shí)，觀察能力是設(shè)計(jì)師能否設(shè)計(jì)出優(yōu)秀作品的關(guān)鍵。這就要求我們?cè)谠O(shè)計(jì)過(guò)程中要學(xué)會(huì)將看到的內(nèi)容進(jìn)行拆解和提煉。對(duì)于互聯(lián)網(wǎng)設(shè)計(jì)師來(lái)說(shuō)，我們面對(duì)的是C端（指消費(fèi)者），他們對(duì)于產(chǎn)品的反饋和體驗(yàn)無(wú)疑會(huì)傳達(dá)得更加直觀。同時(shí)對(duì)于如今人人都提到的“提升用戶黏性”這個(gè)問(wèn)題上，我們?nèi)绻患?xì)心和耐心去觀察用戶的一舉一動(dòng)，分析用戶的使用場(chǎng)景，提煉和歸納用戶的關(guān)注點(diǎn)，那么所謂的“用戶黏性”就失去了其應(yīng)有的意義。

尤其對(duì)于一些新設(shè)計(jì)師來(lái)說(shuō)，對(duì)于此則更難以沉下心去面對(duì)，因此在工作上受阻之后往往也容易表現(xiàn)出一些負(fù)面情緒，這個(gè)值得大家注意。

以上3點(diǎn)，是我認(rèn)為的一個(gè)設(shè)計(jì)師自我修養(yǎng)提升的關(guān)鍵。提升一個(gè)設(shè)計(jì)師的自我修養(yǎng)，不單單是指設(shè)計(jì)能力和功底的提升，還包括對(duì)于想法和創(chuàng)意的能力的提升。遠(yuǎn)離“照搬”模式，通過(guò)不斷地技能訓(xùn)練、設(shè)計(jì)思維訓(xùn)練以及耐心觀察的習(xí)慣養(yǎng)成，才有望成為一名合格并優(yōu)秀的UI設(shè)計(jì)師。