李白 | 阿里巴巴用戶體驗(yàn)專家。阿里巴巴信息平臺(tái)IADC負(fù)責(zé)人，八年用戶體驗(yàn)相關(guān)工作經(jīng)驗(yàn)。

 

活動(dòng)：2016年7月10日  BOSS直聘主辦 “對(duì)話UI&UX設(shè)計(jì)|深圳UED大會(huì)”設(shè)計(jì)總監(jiān)的傲慢與偏見PPT來(lái)自嘉賓，筆記俠作為合作方，經(jīng)活動(dòng)方和演講者審閱授權(quán)發(fā)布筆記。

筆記：筆記俠  老周 深度好文：4779字 | 6分鐘閱讀

全網(wǎng)首發(fā)筆記

大家好，我是阿里巴巴信息平臺(tái)IADC團(tuán)隊(duì)的設(shè)計(jì)師李白，今天跟大家分享的主題是：“用戶體驗(yàn)設(shè)計(jì)規(guī)范的價(jià)值探索”。

我們團(tuán)隊(duì)所做的業(yè)務(wù)主要集中在阿里巴巴內(nèi)部服務(wù)系統(tǒng)，涵蓋HR招聘、財(cái)務(wù)等，它們的共同點(diǎn)是后臺(tái)類型的系統(tǒng)。今天和大家分享這套用戶體驗(yàn)設(shè)計(jì)規(guī)范背后，我們的思考、方法和經(jīng)驗(yàn)，希望能夠指導(dǎo)大家建立自己的用戶體驗(yàn)規(guī)范。

用戶設(shè)計(jì)使用規(guī)范的內(nèi)容包括：樣式、交互、模板、流程。

信息平臺(tái)的用戶體驗(yàn)規(guī)范主要包含：視覺(jué)樣式、交互規(guī)范、設(shè)計(jì)模板和設(shè)計(jì)流程。
 
1）樣式

我們將所有常見的樣式放置到一個(gè)設(shè)計(jì)文件中，設(shè)計(jì)師通過(guò)這個(gè)文件，快速搭建自己想要的效果。
 
2）交互

在交互設(shè)計(jì)規(guī)范里面，我們通過(guò)清晰的說(shuō)明，描述了不同的場(chǎng)景下，應(yīng)該用什么樣的組件去完成交互設(shè)計(jì)的任務(wù)，這可以幫助設(shè)計(jì)師深入了解每一個(gè)組建怎么使用，保證設(shè)計(jì)的統(tǒng)一性。
 
3）模板

設(shè)計(jì)模板是由基礎(chǔ)的組件組成。比如，任何產(chǎn)品的列表頁(yè)都可以被抽象成設(shè)計(jì)模板，它會(huì)包含一些通用內(nèi)容，我們把這類頁(yè)面總結(jié)成一個(gè)模板之后，它可以在不同的產(chǎn)品里適用。
 

這是一個(gè)典型的數(shù)據(jù)表格，在模板里我們可以看到，它由篩選器、表格等組成，設(shè)計(jì)師不需要重新設(shè)計(jì)頁(yè)面，只需要在模板的基礎(chǔ)上進(jìn)行調(diào)整，就可以快速產(chǎn)生符合自己目標(biāo)的設(shè)計(jì)。
 
4）流程

最后一部分是設(shè)計(jì)流程。為什么要強(qiáng)調(diào)設(shè)計(jì)流程呢？在每個(gè)公司里面，都有一套自己的設(shè)計(jì)流程，都有自己的特色，但是在我們的這套設(shè)計(jì)流程里面，我們強(qiáng)調(diào)三件事：

1）需求；

需求階段，我們鼓勵(lì)設(shè)計(jì)師進(jìn)入到項(xiàng)目團(tuán)隊(duì)里面，跟產(chǎn)品經(jīng)理或者產(chǎn)品設(shè)計(jì)師深入討論需求，去調(diào)研用戶、分析目標(biāo)、場(chǎng)景是什么，并且將它明確下來(lái)，指導(dǎo)整個(gè)項(xiàng)目組今后的設(shè)計(jì)思路。
 
2）評(píng)估；

在每個(gè)項(xiàng)目的初始階段，根據(jù)項(xiàng)目的難度和復(fù)雜程度，我們會(huì)通過(guò)評(píng)估決定增加或減少一些角色的投入。例如，我們可能在某個(gè)項(xiàng)目中不需要交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)的介入，只需要產(chǎn)品設(shè)計(jì)師完成即可。從這點(diǎn)來(lái)看，減少了設(shè)計(jì)團(tuán)隊(duì)在部分項(xiàng)目中的投入，會(huì)提升我們整體的工作效率。
 
3）評(píng)審。

我們將評(píng)審分為內(nèi)部和外部?jī)蓧K，內(nèi)部主要是指設(shè)計(jì)團(tuán)隊(duì)內(nèi)部對(duì)自己的設(shè)計(jì)稿負(fù)責(zé)，從專業(yè)角度保證輸出的質(zhì)量。外部是和需求方進(jìn)行探討，保證大家對(duì)一些解決方案達(dá)成共識(shí)。
 
如何實(shí)現(xiàn)這套設(shè)計(jì)規(guī)范？
 
為什么我們的規(guī)范跟谷歌的規(guī)范不太一樣？回顧一下我們的設(shè)計(jì)目標(biāo)，我們定義了三個(gè)點(diǎn)：

1）體驗(yàn)；

因?yàn)樵谖覀兊漠a(chǎn)品中，曾經(jīng)出現(xiàn)了大量體驗(yàn)上的問(wèn)題，最基本的就是設(shè)計(jì)的不一致，交互和視覺(jué)設(shè)計(jì)師，他們?cè)谠O(shè)計(jì)的時(shí)候，質(zhì)量也是參差不齊。我們需要通過(guò)規(guī)范改善用戶體驗(yàn)，保證設(shè)計(jì)一致性。
 
2）設(shè)計(jì)效率；

我們團(tuán)隊(duì)總共14個(gè)人，對(duì)接7～80個(gè)項(xiàng)目，如果這些項(xiàng)目并行開展，我們就無(wú)法應(yīng)對(duì)。如何解決這個(gè)問(wèn)題？要提升執(zhí)行效率，利用工具減少一些重復(fù)性的工作。

3）擴(kuò)展性。

擴(kuò)展性是滿足在不同產(chǎn)品、場(chǎng)景、品牌之間切換的復(fù)雜性，能夠快速支持第三方合作的接入。
    
我們?nèi)绾螌?shí)現(xiàn)這件事情？ 

★ 體驗(yàn)：

（1）打造交互和視覺(jué)工具集，并持續(xù)優(yōu)化；

在提升產(chǎn)品體驗(yàn)環(huán)節(jié)，我們首先確定一點(diǎn)，在規(guī)范中建立一套工具集，它包含所有的交互和視覺(jué)組件。對(duì)設(shè)計(jì)師來(lái)說(shuō)，可以用它迅速搭建自己的設(shè)計(jì)。同時(shí)我們會(huì)持續(xù)性優(yōu)化組件庫(kù)，通過(guò)對(duì)規(guī)范組件的優(yōu)化，達(dá)到對(duì)整個(gè)信息平臺(tái)所有產(chǎn)品的優(yōu)化，這是一個(gè)非?？旖莸霓k法。

（2）基于場(chǎng)景和目標(biāo)用戶優(yōu)化用戶體驗(yàn)。

在我們的產(chǎn)品中，大部分是后臺(tái)系統(tǒng)，我們往往會(huì)為了滿足功能性需求而對(duì)用戶體驗(yàn)做出一些妥協(xié)。但是，在一些產(chǎn)品中，比如，我們有一款阿里巴巴內(nèi)部員工差旅報(bào)銷的應(yīng)用，很多員工都會(huì)用，頻率非常高。我們就會(huì)成立專門小組，對(duì)這款產(chǎn)品的用戶體驗(yàn)進(jìn)行優(yōu)化。
 

這是招聘平臺(tái)，招聘平臺(tái)是用于了解簡(jiǎn)歷的狀態(tài)和進(jìn)度。在舊版中，信息分布非常不合理，頁(yè)面上所有主要的內(nèi)容非常地分散，視覺(jué)焦點(diǎn)不明確。
 

在新版中，我們運(yùn)用了規(guī)范中的典型工作臺(tái)框架，就在體驗(yàn)層面比之前的產(chǎn)品取得了一定的飛躍。我想告訴大家的是，這種飛躍并不只是在這款產(chǎn)品上，在信息平臺(tái)80%的產(chǎn)品上都帶來(lái)了這樣的提升，而成本是非常低的，甚至有很多的產(chǎn)品不需要設(shè)計(jì)師去介入，只需要改一下代碼就可以。
 
★ 設(shè)計(jì)效率：

（1）利用設(shè)計(jì)工具減少設(shè)計(jì)節(jié)點(diǎn)，提高設(shè)計(jì)效率；

為什么能夠減少節(jié)點(diǎn)？是因?yàn)槲覀冞@套工具最初設(shè)計(jì)的目的，就是讓設(shè)計(jì)師們的角色變成可替代的，并且依然保證較高的設(shè)計(jì)質(zhì)量。這要?dú)w功于工具自身的很多功能，比如工具可以自動(dòng)對(duì)齊和保持間距，設(shè)計(jì)師只需要把這些模塊拉出來(lái)，就接近于最終的設(shè)計(jì)稿。

（2）重視設(shè)計(jì)流程的關(guān)鍵環(huán)節(jié)，強(qiáng)調(diào)設(shè)計(jì)師在前期就參與；

很多團(tuán)隊(duì)經(jīng)常遇到一個(gè)狀況，已經(jīng)在產(chǎn)品開發(fā)的時(shí)候，突然產(chǎn)品經(jīng)理說(shuō)需求改了。我們不知道為什么，但會(huì)導(dǎo)致整個(gè)團(tuán)隊(duì)重復(fù)工作。所以在這套設(shè)計(jì)流程里非常強(qiáng)調(diào)，前期一定要讓設(shè)計(jì)師參與到場(chǎng)景的研究、用戶的研究中去，確定設(shè)計(jì)的目標(biāo)，讓所有的成員清晰了解設(shè)計(jì)的目標(biāo)到底是什么，避免后期出現(xiàn)往復(fù)。
 
★ 擴(kuò)展性：

（1）設(shè)計(jì)語(yǔ)言一致、關(guān)鍵元素可配置、多平臺(tái)兼容性、避免個(gè)性化的設(shè)計(jì)元素，有助于產(chǎn)品的高擴(kuò)展性和兼容性；



強(qiáng)調(diào)兼容性的前提，是要保持設(shè)計(jì)語(yǔ)言的一致，設(shè)計(jì)語(yǔ)言的統(tǒng)一性，保持交互行為與視覺(jué)感受的一致。我們配合前端產(chǎn)出一套組件庫(kù)，可以對(duì)主要的配色、邊框、一些基礎(chǔ)的樣式隨意進(jìn)行調(diào)整。無(wú)論你跟任何一個(gè)第三方對(duì)接的時(shí)候，都能很快的融入到它的設(shè)計(jì)體系里去，不會(huì)造成突兀。通過(guò)一定的規(guī)則，滿足部分設(shè)計(jì)組件的多平臺(tái)兼容性，降低開發(fā)成本。此外，還需要避免個(gè)性化的設(shè)計(jì)元素，以保證在不同場(chǎng)景，不同產(chǎn)品中的兼容性。
 
比如，如果重新規(guī)劃阿里巴巴釘釘?shù)牡谌浇尤胍?guī)范，需要花一個(gè)月的時(shí)間，但通過(guò)在這套用戶體驗(yàn)規(guī)范上的調(diào)整，很快就可以達(dá)成目標(biāo)。
 
規(guī)范的價(jià)值是什么？效率才是最大的價(jià)值點(diǎn)！

設(shè)計(jì)過(guò)程里團(tuán)隊(duì)也在反思，這套規(guī)范最大的價(jià)值是什么？我們思考的結(jié)果是：效率才是這套規(guī)范最大的價(jià)值點(diǎn)。大家對(duì)后臺(tái)系統(tǒng)的理解，其實(shí)是一些功能性為主、很丑陋、邏輯復(fù)雜，難理解的系統(tǒng)。確實(shí)，對(duì)于功能性的系統(tǒng)來(lái)說(shuō)，我們犧牲了用戶體驗(yàn)去滿足功能。

當(dāng)關(guān)注到效率這個(gè)點(diǎn)，我們發(fā)現(xiàn)，最初想解決的問(wèn)題就是團(tuán)隊(duì)的執(zhí)行效率，而這其中也挖掘出了更大的價(jià)值，于是我們制造了這套設(shè)計(jì)組件庫(kù)。
 

這套組件庫(kù)包含SKETCH和AXURE兩個(gè)版本，設(shè)計(jì)師只要閱讀完這套工具說(shuō)明之后，可以很快利用它去搭建一套設(shè)計(jì)，同時(shí)我們配合前端輸出了前端組件庫(kù)，在讓前端開發(fā)更快捷的同時(shí)，也讓后端和其他的開發(fā)人員利用這套工具很快地搭建頁(yè)面，所以我們需要跟前端同學(xué)配合，打造完整的工具集，從整體的流程環(huán)節(jié)上提升效率。

我們來(lái)看一下，如何利用這套工具影響設(shè)計(jì)流程。這是之前的設(shè)計(jì)流程，第一步是做需求的調(diào)研分析，一般是由產(chǎn)品完成，之后是交互行為設(shè)計(jì)、視覺(jué)風(fēng)格設(shè)計(jì)、前端開發(fā)，但往往有很多往復(fù)。而在一個(gè)新的流程中，在需求調(diào)研階段，交互設(shè)計(jì)師和產(chǎn)品設(shè)計(jì)師都可以進(jìn)行這項(xiàng)工作，而在視覺(jué)和交互行為的設(shè)計(jì)階段。
 
我們的產(chǎn)品、視覺(jué)、交互可以相互替代，都可以完成這部分的工作。最后在前端開發(fā)階段，由于運(yùn)用了組件模塊化工具，后端也可以做這部分的工作。這樣，我們減少了設(shè)計(jì)的節(jié)點(diǎn)，也許在某一個(gè)節(jié)點(diǎn)上，不能減少設(shè)計(jì)師的時(shí)間投入。但是，當(dāng)減少了一個(gè)節(jié)點(diǎn)的時(shí)候，它一定降低了溝通成本，所以我們整體的效率一定會(huì)得到提高。
 
一個(gè)實(shí)際案例：

這是我們一個(gè)行政訪客的項(xiàng)目，初期我們就和項(xiàng)目組討論。我們?nèi)绻凑找话懔鞒绦枰?天，但利用新的流程，我們?cè)谠碗A段兩天時(shí)間，產(chǎn)品設(shè)計(jì)師輸出的稿件質(zhì)量已經(jīng)很高了，交互的階段還是4天，但同時(shí)已經(jīng)完成了視覺(jué)設(shè)計(jì)。最后到了前端部分，節(jié)省了兩天的開發(fā)時(shí)間，因?yàn)橐玫氖墙M件庫(kù)，很快就可以搭建出來(lái)。事實(shí)上在最后的工作中，前端用的時(shí)間比四天還要少。

演講現(xiàn)場(chǎng)

我們要節(jié)省出來(lái)這些時(shí)間去做什么？讓設(shè)計(jì)師創(chuàng)造更大的價(jià)值。我們很多設(shè)計(jì)師

做的都是價(jià)值感很低、存在感很低的工作，我們要用工具把這塊效率加快，同時(shí)讓設(shè)計(jì)師去做設(shè)計(jì)方法、設(shè)計(jì)思維上的沉淀，整體提升設(shè)計(jì)團(tuán)隊(duì)的能力。

 
★ 用戶體驗(yàn)設(shè)計(jì)規(guī)范可能帶來(lái)的問(wèn)題：

是不是這套規(guī)范就如此完美？它是不是沒(méi)有任何問(wèn)題？肯定不是，我們來(lái)看一下弊端有哪些。
 
1、規(guī)范限制交互及視覺(jué)設(shè)計(jì)層面的創(chuàng)新；

設(shè)計(jì)師每天都喜歡做新鮮的設(shè)計(jì)，但是規(guī)范要求他們?cè)谶@個(gè)框架內(nèi)設(shè)計(jì)。換一種思路來(lái)講，其實(shí)所有的創(chuàng)新可以基于規(guī)范去創(chuàng)新，規(guī)范不是一成不變的，可以在任何細(xì)節(jié)上繼續(xù)深入去做優(yōu)化，從而帶來(lái)規(guī)范不斷地優(yōu)化，得到改進(jìn)，它可以效率更高，設(shè)計(jì)體驗(yàn)更好。同時(shí)這套規(guī)范的價(jià)值還在于節(jié)省設(shè)計(jì)師的時(shí)間，讓設(shè)計(jì)師有更多時(shí)間和空間做更多有趣的事情和項(xiàng)目。

2、模糊了團(tuán)隊(duì)的個(gè)人能力界限；

在座的肯定有視覺(jué)設(shè)計(jì)師、交互、產(chǎn)品的同學(xué)，大家都非常喜歡自己的領(lǐng)域，覺(jué)得自己的領(lǐng)域有很深的學(xué)問(wèn)可以去研究，可以繼續(xù)積累自己的經(jīng)驗(yàn)。但是當(dāng)運(yùn)用這套工具的時(shí)候，我們需要交互設(shè)計(jì)師去做視覺(jué)，需要視覺(jué)設(shè)計(jì)師去理解交互等等，這對(duì)每個(gè)設(shè)計(jì)師來(lái)說(shuō)都是挑戰(zhàn)。但換種角度去看，這種方式和思路提升了每個(gè)個(gè)體的綜合能力，彌補(bǔ)了設(shè)計(jì)師個(gè)人能力上的缺失。
 
3、要求產(chǎn)品團(tuán)隊(duì)擁有設(shè)計(jì)能力；

在這套設(shè)計(jì)流程里，需要產(chǎn)品去做視覺(jué)，做交互，做用戶體驗(yàn)，這就為設(shè)計(jì)團(tuán)隊(duì)提出新的要求。我們需要把我們節(jié)省出來(lái)的時(shí)間，用于去影響團(tuán)隊(duì)，影響項(xiàng)目組，影響整個(gè)公司。你要去宣傳設(shè)計(jì)的方法、理念，什么樣的設(shè)計(jì)是好的，從而讓產(chǎn)品團(tuán)隊(duì)和設(shè)計(jì)團(tuán)隊(duì)保持一致的設(shè)計(jì)目標(biāo)。

4、規(guī)范系統(tǒng)的升級(jí)成本極高。

試想一下，讓蘋果重新做自己的設(shè)計(jì)規(guī)范，它可能需要一年兩年時(shí)間才能達(dá)到完善，所以這套規(guī)范不適用于所有的人和團(tuán)隊(duì)。如果你的產(chǎn)品進(jìn)入成熟期，而且短時(shí)間內(nèi)不會(huì)對(duì)我們的設(shè)計(jì)進(jìn)行大調(diào)整，我們完全可以沉淀一套設(shè)計(jì)系統(tǒng)。但如果我們還處于變動(dòng)時(shí)期，我們面對(duì)這套系統(tǒng)只會(huì)增加設(shè)計(jì)師的壓力，因?yàn)槟憧赡苊總€(gè)月都會(huì)進(jìn)行一次調(diào)整。
 
★ 不同發(fā)展階段的團(tuán)隊(duì)適用不同的用戶體驗(yàn)規(guī)范：

這不是適合所有團(tuán)隊(duì)的解決方案，但是我會(huì)根據(jù)個(gè)人的經(jīng)驗(yàn)給大家一些建議，如何建立你的用戶體驗(yàn)規(guī)范。
 
初創(chuàng)的設(shè)計(jì)團(tuán)隊(duì)，其實(shí)設(shè)計(jì)師非常少，可能只有三個(gè)人甚至一個(gè)人，我建議不要花太多的精力在設(shè)計(jì)規(guī)范上，因?yàn)闃I(yè)務(wù)的變化太快，過(guò)一個(gè)月，可能你的產(chǎn)品又要重新做了，如果你花心思去做規(guī)范可能完全沒(méi)有價(jià)值，最后可能只是滿足設(shè)計(jì)師自我表現(xiàn)欲。

我鼓勵(lì)的行為是，利用網(wǎng)上開源的組建庫(kù)和設(shè)計(jì)工具，去加速你的設(shè)計(jì)。當(dāng)然我不是建議設(shè)計(jì)師抄襲別人的設(shè)計(jì)，我們只是利用設(shè)計(jì)工具提升速度，更快的產(chǎn)出高質(zhì)量的設(shè)計(jì)。
 
對(duì)于小型團(tuán)隊(duì)來(lái)說(shuō)，可能5到10個(gè)人，這種團(tuán)隊(duì)相對(duì)穩(wěn)定一些，我建議做一些基礎(chǔ)的視覺(jué)樣式庫(kù)，可以保證團(tuán)隊(duì)設(shè)計(jì)一致性，交互設(shè)計(jì)師，可以做一些通用型的組件，提升設(shè)計(jì)效率。不建議做很完整復(fù)雜的系統(tǒng)，同時(shí)還有一個(gè)很重要的點(diǎn)，就是設(shè)計(jì)團(tuán)隊(duì)要在自己的公司或團(tuán)隊(duì)建立最基本的設(shè)計(jì)流程，在設(shè)計(jì)流程中最需要強(qiáng)調(diào)的就是評(píng)審機(jī)制。我們要鼓勵(lì)團(tuán)隊(duì)利用評(píng)審來(lái)確保設(shè)計(jì)質(zhì)量輸出是高水平的，而不是依靠某個(gè)人去決定。
 
對(duì)于中型團(tuán)隊(duì)來(lái)說(shuō)，因?yàn)橛凶銐虻娜肆?，包括也要面?duì)業(yè)務(wù)上的壓力，可能需要處理很多的設(shè)計(jì)工作，這時(shí)候也會(huì)出現(xiàn)很多重復(fù)性的設(shè)計(jì)工作，我的建議就是你要利用這套用戶體驗(yàn)規(guī)范去加速你的設(shè)計(jì)。在加速設(shè)計(jì)之后，你的設(shè)計(jì)團(tuán)隊(duì)才有機(jī)會(huì)去做更多新鮮的東西，去做產(chǎn)品創(chuàng)新，去給公司帶來(lái)更大的商業(yè)價(jià)值，而不是做最低價(jià)值的重復(fù)性設(shè)計(jì)工作。
 
對(duì)于大型設(shè)計(jì)團(tuán)隊(duì)，我的建議是要有一個(gè)用戶體驗(yàn)設(shè)計(jì)的體系。就像谷歌，要通過(guò)和品牌團(tuán)隊(duì)的深入合作，將品牌與自己的設(shè)計(jì)語(yǔ)言結(jié)合，利用設(shè)計(jì)語(yǔ)言形成品牌，產(chǎn)品與用戶之間的連接，帶來(lái)用戶對(duì)產(chǎn)品之間的情感依賴，這能讓設(shè)計(jì)團(tuán)隊(duì)創(chuàng)造更大的價(jià)值。
 

謝謝大家！