前言

本書適合什么人

這是一本講解用戶體驗(yàn)設(shè)計(jì)的書，能夠給基礎(chǔ)薄弱和在設(shè)計(jì)時(shí)遇到瓶頸的UI設(shè)計(jì)師提供一套系統(tǒng)和完整的學(xué)習(xí)方法，幫助他們提升用戶體驗(yàn)設(shè)計(jì)方面的能力。書中的內(nèi)容結(jié)合了筆者多年的工作經(jīng)驗(yàn)和設(shè)計(jì)技巧，非常適合UI設(shè)計(jì)師閱讀和學(xué)習(xí)。

對(duì)于很多的UI設(shè)計(jì)師來(lái)說(shuō)，無(wú)論是想“跳槽”，還是想加薪，用人單位都會(huì)強(qiáng)調(diào)設(shè)計(jì)師一定要懂得用戶體驗(yàn)。大多數(shù)UI設(shè)計(jì)師對(duì)用戶體驗(yàn)的認(rèn)識(shí)不是很深刻，當(dāng)被問(wèn)到自己的作品的設(shè)計(jì)思路時(shí)，除了介紹下作品的配色和版式之外，就只能拋出“因?yàn)橛脩趔w驗(yàn)更好”這句話了。希望本書能夠?yàn)榇蠹医獯鹩脩趔w驗(yàn)方面的疑惑。

為什么本書重點(diǎn)介紹用戶體驗(yàn)

這是一本設(shè)計(jì)類的書，重點(diǎn)討論用戶體驗(yàn)方面的內(nèi)容。講用戶體驗(yàn)方面的內(nèi)容的原因有兩個(gè)。一是對(duì)于現(xiàn)在的設(shè)計(jì)師來(lái)講，他們的差距已經(jīng)不在設(shè)計(jì)能力上了，而在對(duì)用戶體驗(yàn)的理解和把握上。例如，只要在Dribbble或Behance網(wǎng)站上出現(xiàn)了比較有創(chuàng)意的設(shè)計(jì)稿，大家就能很快地模仿并做出比它更好的設(shè)計(jì)稿，然而也僅限于模仿頁(yè)面，很難理解原作者為何要這么設(shè)計(jì)。二是現(xiàn)在用人單位很重視設(shè)計(jì)師對(duì)用戶體驗(yàn)的理解，對(duì)設(shè)計(jì)師的要求已經(jīng)不再是把頁(yè)面做得好看就行，而是需要設(shè)計(jì)師能更好地從用戶角度出發(fā)，做出讓用戶覺(jué)得好用的頁(yè)面。

本書從用戶體驗(yàn)的角度出發(fā)，向設(shè)計(jì)師傳達(dá)UI設(shè)計(jì)的兩個(gè)目的：推動(dòng)用戶行為和傳遞產(chǎn)品理念。一般來(lái)說(shuō)，用戶使用App的流程：產(chǎn)生一個(gè)動(dòng)機(jī)——在一定的場(chǎng)景下——在頁(yè)面上進(jìn)行操作——頁(yè)面反饋一個(gè)結(jié)果。這整個(gè)過(guò)程中，設(shè)計(jì)師需要弄清楚目標(biāo)用戶是誰(shuí)，用戶使用的頁(yè)面功能是怎么樣的，以及用戶是否能順利地得到想要的結(jié)果。設(shè)計(jì)師可以通過(guò)UI設(shè)計(jì)將用戶引導(dǎo)到正確的使用路徑上，同時(shí)把產(chǎn)品理念傳遞給用戶，讓用戶和產(chǎn)品建立起情感，提升用戶對(duì)產(chǎn)品的忠誠(chéng)度。

2013年，蘋果公司發(fā)布的iOS 7系統(tǒng)推翻了其之前的擬物化設(shè)計(jì)風(fēng)格，采用全新的扁平化設(shè)計(jì)風(fēng)格，這件事既有一部分人叫好，也有一部分人反對(duì)。叫好是因?yàn)樵O(shè)計(jì)師們終于不用為了適配不同的Android手機(jī)而做多套設(shè)計(jì)稿了，也不用為了適配Android手機(jī)需要切“點(diǎn)九圖”而折騰很久。反對(duì)的這部分人有些不是UI設(shè)計(jì)師，其中有一部分人是用戶體驗(yàn)設(shè)計(jì)師和產(chǎn)品經(jīng)理，他們覺(jué)得對(duì)于用戶來(lái)說(shuō)擬物化設(shè)計(jì)風(fēng)格更容易被理解。例如，頁(yè)面上的按鈕是凸出來(lái)的，看起來(lái)就像是墻上的電燈開(kāi)關(guān)，用戶一看就知道如何操作。而扁平化設(shè)計(jì)風(fēng)格的系統(tǒng)UI的引導(dǎo)性就沒(méi)那么好，頁(yè)面上的控件看起來(lái)很平，大家擔(dān)心用戶使用起來(lái)不方便，又或者用戶需要花大量時(shí)間去學(xué)習(xí)和接受這些控件樣式的變化。但經(jīng)過(guò)一段時(shí)間發(fā)現(xiàn)，用戶并沒(méi)有反感，反而還很喜歡這種簡(jiǎn)潔干凈的頁(yè)面。因?yàn)榕c擬物化設(shè)計(jì)風(fēng)格相比，扁平化設(shè)計(jì)風(fēng)格給人最直接的感受是頁(yè)面上的信息更清晰。擬物化時(shí)代的設(shè)計(jì)師擁有的優(yōu)勢(shì)瞬間消失，之前能使用的那些技巧現(xiàn)在用不上了，此時(shí)的設(shè)計(jì)師面臨的最大的挑戰(zhàn)是怎么安排控件的位置、大小，以及頁(yè)面中元素與元素之間的距離。在2013年之前，手機(jī)屏幕的尺寸很小，設(shè)計(jì)師要保證在這么小的屏幕上既能讓元素有較高的可讀性，又能讓操作熱區(qū)有效，因此用戶體驗(yàn)設(shè)計(jì)漸漸受到重視。后來(lái)的iOS 11系統(tǒng)又重新定義了UI設(shè)計(jì)，除了其頁(yè)面上的標(biāo)題文字變大了以外，還做了其他一些小的改變。當(dāng)真的去深入研究之后，可能你會(huì)發(fā)現(xiàn)，現(xiàn)在的UI設(shè)計(jì)更重視結(jié)構(gòu)規(guī)劃。在蘋果的應(yīng)用商店中，除了下載量排在前列的幾個(gè)App以外，對(duì)于大家費(fèi)盡心血做出來(lái)的其他的App，用戶可能只會(huì)在其上停留1~2分鐘。對(duì)設(shè)計(jì)師來(lái)說(shuō)，如何在這么短的時(shí)間內(nèi)把主要的信息傳遞給用戶才是真的挑戰(zhàn)。

美觀是設(shè)計(jì)的目標(biāo)，但設(shè)計(jì)師更要重視的是用戶體驗(yàn)設(shè)計(jì)。首先，UI設(shè)計(jì)師在用戶體驗(yàn)設(shè)計(jì)方面的造詣能夠直接體現(xiàn)在自己的作品中。設(shè)計(jì)出來(lái)的產(chǎn)品是否受歡迎，這是衡量設(shè)計(jì)師設(shè)計(jì)的產(chǎn)品是否有價(jià)值的指標(biāo)之一。其次，UI設(shè)計(jì)師重視用戶體驗(yàn)設(shè)計(jì)能讓自己的能力得到提升。老實(shí)說(shuō)，現(xiàn)在很多的App頁(yè)面都大同小異，甚至有些頁(yè)面已經(jīng)有標(biāo)準(zhǔn)的設(shè)計(jì)模板，如手機(jī)號(hào)注冊(cè)頁(yè)面、購(gòu)物車頁(yè)面和訂單管理頁(yè)面等。設(shè)計(jì)師如果還停留在只會(huì)畫頁(yè)面這個(gè)層次，那么他對(duì)其所在公司來(lái)說(shuō)已經(jīng)沒(méi)有太大的價(jià)值了。能在畫頁(yè)面的同時(shí)，還能講出每個(gè)頁(yè)面上信息安排的原理，這才是設(shè)計(jì)師應(yīng)追求的狀態(tài)。以設(shè)計(jì)注冊(cè)頁(yè)面為例，設(shè)計(jì)師可以將這些觀點(diǎn)闡述出來(lái)：一是講出注冊(cè)的主要目的；二是將引導(dǎo)文案進(jìn)行精簡(jiǎn)，并突出輸入框和“下一步”按鈕；三是根據(jù)運(yùn)營(yíng)給出的用戶轉(zhuǎn)化率數(shù)據(jù)衡量這個(gè)設(shè)計(jì)方案是否有效，然后找出問(wèn)題并更新設(shè)計(jì)方案。如果能做到這些，那么這類設(shè)計(jì)師必定是公司重點(diǎn)挽留的人才。

接下來(lái)的幾年，設(shè)計(jì)師面對(duì)的挑戰(zhàn)不光是理解用戶體驗(yàn)設(shè)計(jì)，還要學(xué)會(huì)應(yīng)對(duì)技術(shù)革新帶來(lái)的變化。例如，VR技術(shù)與全息投影不僅要求設(shè)計(jì)師做好頁(yè)面和體驗(yàn)，還需要設(shè)計(jì)師對(duì)材料和實(shí)現(xiàn)方式進(jìn)行深入了解。這里也向大家強(qiáng)調(diào)一點(diǎn)：做設(shè)計(jì)，只有不停地學(xué)習(xí)和努力，才能做出更好的作品。

最后，感謝人民郵電出版社數(shù)字藝術(shù)出版分社對(duì)筆者的支持，該社出版過(guò)很多相關(guān)行業(yè)的優(yōu)質(zhì)書籍，對(duì)這些行業(yè)從業(yè)者的幫助非常大。特別感謝筆者太太曹馨這么多年對(duì)筆者的工作和事業(yè)的支持。本書獻(xiàn)給筆者的兒子李錦恒，希望他成為一個(gè)有夢(mèng)想的人。

版權(quán)聲明

本書引用了大量市場(chǎng)上的App截圖，以解釋用戶體驗(yàn)設(shè)計(jì)是怎樣在UI設(shè)計(jì)中起到實(shí)際的作用，在此特別感謝這些頁(yè)面的原作者和相關(guān)機(jī)構(gòu)為本書提供了很好的參考。如果本書在引用的內(nèi)容上對(duì)原作者和相關(guān)機(jī)構(gòu)造成了困擾，歡迎及時(shí)聯(lián)系筆者，筆者會(huì)在下一版中及時(shí)補(bǔ)充或更正。

芒果道長(zhǎng)