來(lái)自產(chǎn)品設(shè)計(jì)負(fù)責(zé)人的一些認(rèn)識(shí)與看法。

Nedbank集團(tuán)是非洲最大的金融服務(wù)行業(yè)之一，主要提供銀行業(yè)務(wù)、保險(xiǎn)、資產(chǎn)管理和理財(cái)服務(wù)。Nedbank集團(tuán)目前已有131年的歷史，資產(chǎn)總額達(dá)1萬(wàn)億ZAR（南非貨幣），該集團(tuán)擁有31000多名員工。

不過在企業(yè)環(huán)境中研發(fā)一個(gè)交互設(shè)計(jì)系統(tǒng)有很多挑戰(zhàn)，最具挑戰(zhàn)性的是集團(tuán)高層與產(chǎn)品相關(guān)利益的股東們的心態(tài)，他們中沒有與ui/ux設(shè)計(jì)相關(guān)的專業(yè)背景，也沒有掌握對(duì)研發(fā)工作方面有著細(xì)微的了解。所以你需要有戰(zhàn)略性的實(shí)現(xiàn)你的目標(biāo)，不僅僅是需要開發(fā)一個(gè)設(shè)計(jì)系統(tǒng)，還要不斷向高層管理和利益相關(guān)者保證這個(gè)項(xiàng)目是可持續(xù)的方案，從長(zhǎng)遠(yuǎn)來(lái)看它將會(huì)帶來(lái)更多的利潤(rùn)和更快的投資回報(bào)。

一個(gè)設(shè)計(jì)系統(tǒng)不單是由幾個(gè)前端組件和一個(gè)適應(yīng)的圖庫(kù)組成。還需要精益文檔和強(qiáng)大的用戶體驗(yàn)來(lái)支持決策制定，力助項(xiàng)目成功。另外找到合適的合作伙伴一起工作也是項(xiàng)目成功的基礎(chǔ)，在有著一定規(guī)模的設(shè)計(jì)和開發(fā)為關(guān)鍵的組織中，如果您的小伙伴沒有具備這樣的專業(yè)的系統(tǒng)知識(shí)，有可能會(huì)導(dǎo)致這樣一個(gè)產(chǎn)品失敗。

一個(gè)團(tuán)隊(duì)精神是否能強(qiáng)大，需要看團(tuán)隊(duì)的獨(dú)立精神，有效采取主動(dòng)性，并為這個(gè)團(tuán)隊(duì)項(xiàng)目承擔(dān)一定的風(fēng)險(xiǎn)。并非所有的決策都像簽字那樣輕松，有時(shí)候會(huì)被告知在處理項(xiàng)目的過程中不必采取某些措施，就像“請(qǐng)求原諒比請(qǐng)求許可一樣容易”，這句話確實(shí)開始在你作為問題解決者的角色中發(fā)揮作用。

如何開展合作

當(dāng)處理一個(gè)現(xiàn)有的模式 / 特征時(shí)，最好的辦法是與已經(jīng)在這個(gè)具體問題上做了大部分工作的團(tuán)隊(duì)進(jìn)行磋商和討論，他們的參考會(huì)給你最深的見解和試驗(yàn)，作為你研究的基礎(chǔ)。您可能會(huì)認(rèn)為，在某個(gè)特定組件上的所有最佳實(shí)踐都足以讓您不去查看您的公司已經(jīng)完成了哪些工作，但是有些組件已經(jīng)遠(yuǎn)遠(yuǎn)超過了它們的基本用法，還需要從團(tuán)隊(duì)中吸取一點(diǎn)知識(shí)。

另外，像有深度工作的問題最好單獨(dú)解決，或者只要有一名專家解決，如果向團(tuán)隊(duì)敞開心扉，會(huì)輕易左右您的時(shí)間線和價(jià)值觀，從而無(wú)法按照項(xiàng)目進(jìn)度完成。就我個(gè)人而言，如果對(duì)方擁有成熟的技能和知識(shí)，針對(duì)性的解決復(fù)雜問題是開展合作的最佳方式。畢竟您在解決某些復(fù)雜問題還不夠成熟，但您對(duì)這些問題陷入困境的時(shí)候，總需要一個(gè)專業(yè)的人來(lái)拉你一把。

獲得公司層面的認(rèn)可和支持

在任何企業(yè)系統(tǒng)中，你都很難找到正確的方向，但最重要的是展現(xiàn)價(jià)值，信守承諾，言出必行。在我入職銀行的一年前,設(shè)計(jì)系統(tǒng)的思想就被推廣出去了，當(dāng)時(shí)只是一個(gè)嘗試，并沒有真正被用到需要的地方。大多數(shù)基礎(chǔ)的重要細(xì)節(jié)都被遺漏了，沒有標(biāo)準(zhǔn)化的網(wǎng)格系統(tǒng)，沒有完整的排版堆棧，并且所有為印刷而寫的品牌指南，沒有經(jīng)過修改就應(yīng)用到了數(shù)碼產(chǎn)品上。

你需要用一些小的成效去贏得他們的信任，不管問題有多嚴(yán)重，都不能從開始就把所有的問題都告訴銀行，然后便跳到最緊迫的問題上。你必須從解決財(cái)務(wù)影響很小但卻能帶來(lái)最大利益的問題開始。作為一個(gè)團(tuán)隊(duì)，記錄下你所有的解決方案，然后再逐步轉(zhuǎn)向較大的問題。誠(chéng)實(shí)地說，這并不一定會(huì)變得更容易，事實(shí)上，在變得更容易之前，它會(huì)變得更加困難，但這會(huì)讓你獲得利益相關(guān)者的信任，并且逐漸獲得更多的權(quán)利。有些問題不值得爭(zhēng)論，記住你不可能總是按照你或你的團(tuán)隊(duì)認(rèn)為最好的方式去做。重要的是要區(qū)分哪些決定是至關(guān)重要的，哪些決定你現(xiàn)在可以放棄，哪些以后可能會(huì)改變。通過給利益相關(guān)者提供他們現(xiàn)在想要的東西，未來(lái)，你將有機(jī)會(huì)在重要的問題上去說服他們。相信我，你需要你能得到的每一點(diǎn)影響力。

“固執(zhí)己見，但靈活處理細(xì)節(jié)。——亞馬遜CEO杰夫·貝佐斯

優(yōu)化

其中一個(gè)主要關(guān)注點(diǎn)是識(shí)別重復(fù)的內(nèi)部任務(wù)，從手動(dòng)更新組件圖像、文檔、圖標(biāo)等方面著手。為了更好利用團(tuán)隊(duì)中的3個(gè)前端開發(fā)，我們必須騰出一些時(shí)間來(lái)關(guān)注新的架構(gòu)。

組件圖片被實(shí)際的開發(fā)組件所替代，從而取消了每周更新過時(shí)組件視圖的需要。現(xiàn)在，文檔遵循Dropbox Paper工作流程，其中，模板包含對(duì)組件所有需求的清晰大綱。團(tuán)隊(duì)不再需要召開數(shù)周的會(huì)議，討論為什么組件文檔必須包含在web上就能找到的所有內(nèi)容，為什么將帶注釋的圖像保持為低保真度，這樣，只有在功能改變時(shí)才需要更新它們。

工作中遇到的問題和解決方案

1-柵格系統(tǒng)

一個(gè)現(xiàn)象是，很多UI設(shè)計(jì)人員沒有使用柵格系統(tǒng)，而使用柵格的設(shè)計(jì)人員又沒有遵守對(duì)齊規(guī)則。由于一些項(xiàng)目在柵格上做了大量的工作，使得遵循柵格更加困難。我咨詢了公司所有的設(shè)計(jì)負(fù)責(zé)人，把他們使用的屬性和值放在一張表中對(duì)比、計(jì)算它們的平均值。這讓我了解柵格系統(tǒng)應(yīng)該做成什么樣。其中有一些團(tuán)隊(duì)在某些值的設(shè)定上基本一致，而其他值則稍有差異。X團(tuán)隊(duì)的欄間距（水槽）為30px，這接近我們的理想狀態(tài)，于是我詢問其他團(tuán)隊(duì)是否愿意對(duì)欄間距做出調(diào)整，我將優(yōu)先幫助有需要的團(tuán)隊(duì)解決問題。

給出建議，接受反饋。確保你在于團(tuán)隊(duì)溝通時(shí)，貫穿始終地保證他們的最大利益，你的工作是讓他們的工作更容易。

2-排版系統(tǒng)

其中，一個(gè)團(tuán)隊(duì)排版文字的規(guī)范從h1到h6沒有明顯區(qū)別，信息層級(jí)也沒有從全局考慮。由于他們非常堅(jiān)持原有的字體粗細(xì)比，我們妥協(xié)了，于是我們記錄了他們對(duì)當(dāng)前的排版的印象，開始嘗試從調(diào)整顏色著手，通過使用淺灰與深灰來(lái)修改層次結(jié)構(gòu)。解決排版布局不僅保留了團(tuán)隊(duì)的訴求，同時(shí)又修復(fù)了信息層級(jí)。

有一次，我的任務(wù)是完成一份響應(yīng)式排版規(guī)范，它可以根據(jù)每個(gè)瀏覽器窗口的大小進(jìn)行縮放。這包括了大量的計(jì)算以及目測(cè)，以匹配最佳的效果。我強(qiáng)烈認(rèn)為，解決方案應(yīng)該控制在四個(gè)以內(nèi)，這既減少了設(shè)計(jì)和開發(fā)所需的工作量，又減少了未來(lái)可能發(fā)生的錯(cuò)誤。

將設(shè)計(jì)與開發(fā)間的復(fù)雜問題簡(jiǎn)化能減少很多未來(lái)可能發(fā)生的錯(cuò)誤。

3-間距系統(tǒng)：

為了讓使用者更清楚每個(gè)組件都有多個(gè)組合場(chǎng)景，設(shè)計(jì)規(guī)范應(yīng)該為每個(gè)組件提供間距規(guī)則，比如組件與文字或段落一起使用時(shí)的規(guī)則，以及其中哪些間距是可以靈活修改的。然而，這是一個(gè)幾乎無(wú)法實(shí)現(xiàn)的任務(wù)，即使我們?cè)噲D列出所有目前的規(guī)則，也會(huì)有加不盡的新規(guī)則，而且間距文檔總是不能保證及時(shí)更新到最新。

不過解決方案其實(shí)很簡(jiǎn)單，間距系統(tǒng)可以歸結(jié)為兩個(gè)方面：關(guān)系和信息層級(jí)。也就是說，放的越近的兩個(gè)組件，關(guān)系和信息層級(jí)就越接近（格式塔）。

4-色彩系統(tǒng)

我們沿用了許多在Nedbank使用多年的顏色，品牌指導(dǎo)方針的問題是大部分顏色是為打印選擇的，在設(shè)備上看顯得有些不足。我們采用了兩種基本的品牌顏色：Nedbank Heritage Green和Nedbank Grass Green，并進(jìn)行了一些無(wú)障礙性測(cè)試。我們的草綠色在小而薄的文本上閱讀性較差，幸運(yùn)的是我們可以用品牌原設(shè)定灰色來(lái)替換。不過，灰色也需要調(diào)整，說服品牌方后，我們?cè)谠O(shè)計(jì)系統(tǒng)上進(jìn)行了大約3次顏色調(diào)整迭代。最終的結(jié)果是一個(gè)wcag 2.0等級(jí)的表格，表明顏色可以用于印刷和背景。

5-組件文檔：

不要只查看幾個(gè)組件就構(gòu)建一套組件系統(tǒng)。您需要對(duì)所有組件如何組合在一起有一個(gè)總體的概念，這一點(diǎn)至關(guān)重要。記錄您常使用設(shè)計(jì)規(guī)則，以便在其他類似的場(chǎng)景中應(yīng)用統(tǒng)一規(guī)則。

設(shè)計(jì)系統(tǒng)的價(jià)值很大程度上在于它的組件文檔。首先要做的是建立一個(gè)模板，為重復(fù)出現(xiàn)的信息創(chuàng)建一致性，并花時(shí)間創(chuàng)建一個(gè)清晰的信息層級(jí)。保持組件文檔的易讀性，我看過有的文檔查閱起來(lái)非常耗時(shí)，它們是以其內(nèi)容的數(shù)量而不是其內(nèi)容的質(zhì)量來(lái)衡量的。但請(qǐng)記住，您的文檔應(yīng)該易于掃視，用戶需要盡快找到相關(guān)信息，而不是看一篇大學(xué)論文。

對(duì)長(zhǎng)篇文檔做簡(jiǎn)化是非常迅速的。如果你做了一周的研究，而實(shí)際上只有5%的研究是有用的，那就不要太珍視那些無(wú)用信息了，請(qǐng)將它刪掉。

為了減少團(tuán)隊(duì)合作中的錯(cuò)誤，請(qǐng)仔細(xì)檢查文檔，并確保設(shè)計(jì)協(xié)作者對(duì)你想要達(dá)到的目標(biāo)有一個(gè)深刻的理解。

6-模板：

設(shè)置模板很重要，這樣設(shè)計(jì)師們就不必每個(gè)界面都從零開始設(shè)計(jì)。我們會(huì)基于一個(gè)基本模板開始設(shè)計(jì)，模板包括柵格組合、全局導(dǎo)航和底部標(biāo)簽欄。隨著項(xiàng)目進(jìn)行，會(huì)添加404頁(yè)面、OTP、條款與規(guī)定和其他模板。

7-低保真原型：

設(shè)計(jì)一個(gè)低保真原型用來(lái)詮釋高層級(jí)的功能是非常有必要的，因?yàn)橐郧懊看我坏┯屑?xì)微的設(shè)計(jì)變動(dòng)發(fā)生，標(biāo)注圖都必須隨之更新。這不僅僅是對(duì)設(shè)計(jì)師的時(shí)間的一種浪費(fèi)，對(duì)開發(fā)者來(lái)說他們同樣需要重新編程頁(yè)面。我們打造了一個(gè)基礎(chǔ)的低保真UI成套工具（輕量級(jí)、模塊化的前端框架）用來(lái)創(chuàng)建抽象組件，這不僅僅提升了進(jìn)程，也使功能設(shè)計(jì)更清晰，而不是像很多同行一樣還把注意力放在陳舊的設(shè)計(jì)組件上。

8-線框模板：

和低保真設(shè)計(jì)相似的是，設(shè)計(jì)系統(tǒng)需要一種設(shè)計(jì)語(yǔ)言建立線框。我們需要解釋很多復(fù)雜的流程，我相信作為設(shè)計(jì)師你可以使它們更易用，更有趣。很幸運(yùn)的是，設(shè)計(jì)團(tuán)隊(duì)有一個(gè)很有天賦、很厲害的用戶體驗(yàn)設(shè)計(jì)領(lǐng)導(dǎo)（Jacques Louw）（非常幸運(yùn)的是，設(shè)計(jì)團(tuán)隊(duì)擁有一個(gè)非常有才華和強(qiáng)大的UX領(lǐng)袖人物，） 他的學(xué)識(shí)和搜索能力至關(guān)重要，使商家和設(shè)計(jì)師們信服我們的決定。如果我們沒有以精心設(shè)計(jì)的樣式呈現(xiàn)用戶流程和示意圖來(lái)供設(shè)計(jì)師欣賞，那么大多數(shù)信息就會(huì)被忽略。

9-圖庫(kù)

銀行類產(chǎn)品使用了很多個(gè)不同的圖標(biāo)庫(kù)，其中包括一些收費(fèi)的圖標(biāo)庫(kù)。大多數(shù)圖標(biāo)庫(kù)不會(huì)為你提供銀行所需的財(cái)務(wù)類的圖標(biāo)，因此我們跟設(shè)計(jì)師溝通并讓他們對(duì)項(xiàng)目的圖標(biāo)進(jìn)行設(shè)計(jì)，然后實(shí)時(shí)截圖反饋進(jìn)行溝通，在沒有相關(guān)設(shè)計(jì)工具可以打開文件的情況下，截圖是最簡(jiǎn)單的能夠達(dá)成我們想要結(jié)果的溝通方式。然后，我們?cè)?6x16大小的圖標(biāo)網(wǎng)格上用1px的筆畫進(jìn)行圖標(biāo)繪制，這樣當(dāng)圖標(biāo)和超鏈接一起使用的時(shí)候也很方便閱讀。

最后我們得到了一個(gè)由100多個(gè)圖標(biāo)組成的完全原創(chuàng)的圖標(biāo)庫(kù)。除了圖標(biāo)設(shè)計(jì)，我還構(gòu)建了一個(gè)簡(jiǎn)單的命名規(guī)范，和一個(gè)用于Web、iOS和Android的自動(dòng)導(dǎo)出選項(xiàng)的開發(fā)流程。我們將很容易地通過網(wǎng)絡(luò)更新現(xiàn)有的圖標(biāo)。我們接著把圖標(biāo)制作成字體庫(kù)，這意味著我們可以快速更新任何現(xiàn)有的圖標(biāo)，設(shè)計(jì)師和開發(fā)在更新圖標(biāo)的時(shí)候就可以擺脫逐個(gè)逐個(gè)更新的低效方式。

10-繪制過程

開始圖標(biāo)繪制的時(shí)候，必須要把圖標(biāo)的筆畫對(duì)齊到像素網(wǎng)格上，以便于我們可以便捷地將各部分形狀合并出新的視覺效果和顏色背景。另外，還必須向設(shè)計(jì)師學(xué)習(xí)如何優(yōu)化和清理SVG圖標(biāo)，以及了解如何構(gòu)建和思考動(dòng)態(tài)圖標(biāo)的效果。

11-動(dòng)效：

如今對(duì)動(dòng)畫的需求越來(lái)越明顯。我以前用Airbnb的lottie庫(kù)處理過很多動(dòng)畫，同時(shí)可以實(shí)現(xiàn)在Web,iOS和Android，這是個(gè)非常棒的解決方案。我為銀行項(xiàng)目的一個(gè)動(dòng)效設(shè)計(jì)師做了一個(gè)基本的HTML容器，并讓他用bodymovin插件為我們的一個(gè)插圖制作動(dòng)畫，然后導(dǎo)出JSON文件放進(jìn)去。結(jié)果超出了我們創(chuàng)意總監(jiān)的預(yù)期，我們最終找到了從圖形到動(dòng)畫，以及平臺(tái)發(fā)行端到端的解決方案。

12-測(cè)試模版庫(kù)和代碼庫(kù)：

不要等待其他團(tuán)隊(duì)對(duì)問題給出反饋，作為一個(gè)團(tuán)隊(duì)，每個(gè)人都有責(zé)任使用并檢驗(yàn)他們的產(chǎn)品。你認(rèn)為廚師在食物送到客人之前自己沒有親自試過嗎?我們?cè)谧约旱墓ぷ髦邪l(fā)現(xiàn)了大量的問題和錯(cuò)誤，只有通過積極地測(cè)試和檢查自身的工作，我們才能向銀行提供高質(zhì)量的組件和代碼。

13-資源中心：

我們收到了多個(gè)對(duì)公司從入職培訓(xùn)到業(yè)務(wù)流程信息的請(qǐng)求，這些信息都要放在設(shè)計(jì)系統(tǒng)中。但是對(duì)于為什么要構(gòu)建這個(gè)產(chǎn)品缺乏了解，此時(shí)重要的是要保持設(shè)計(jì)師或開發(fā)人員的任務(wù)相關(guān)的信息，而不是僅僅將這個(gè)平臺(tái)用作所有其他文檔的垃圾場(chǎng)。（作為一個(gè)設(shè)計(jì)師或開發(fā)人員，保持與任務(wù)相關(guān)的信息是很重要的，而不是僅僅把這個(gè)平臺(tái)當(dāng)作所有其他文檔的轉(zhuǎn)儲(chǔ)平臺(tái)。）解決方案是一個(gè)名為資源中心的專用頁(yè)面，其中包含指向多個(gè)Dropbox文件夾的出站鏈接，允許不同部門存儲(chǔ)相關(guān)策略和文檔。這個(gè)解決方案不僅避免了從設(shè)計(jì)系統(tǒng)開發(fā)人員那里拿走所需資源，而且其他部門可以自由地更新和向其專用空間添加這些內(nèi)容。

結(jié)語(yǔ)

對(duì)于那些正忙于構(gòu)建設(shè)計(jì)系統(tǒng)或考慮開始的人來(lái)說，這里有一些重要的經(jīng)驗(yàn)可供參考:

· 在實(shí)現(xiàn)目標(biāo)的過程中要講究策略。

· 找到合適的人加入設(shè)計(jì)系統(tǒng)中。

· 有時(shí)候，獲得原諒比獲得允許更容易。

· 當(dāng)某人已經(jīng)做了很多基礎(chǔ)工作的時(shí)候可以進(jìn)行協(xié)作。

· 如果支持方擁有成熟的技能和知識(shí)，那么結(jié)對(duì)可以很好地解決復(fù)雜的問題，否則您最好獨(dú)自解決。

· 先讓利益方獲得他們目前最需要的，這樣以后才有機(jī)會(huì)展示更多更重要的東西。

· 不僅優(yōu)化你自己的工作流程，還要優(yōu)化整個(gè)團(tuán)隊(duì)的流程。

· 當(dāng)多個(gè)團(tuán)隊(duì)已經(jīng)設(shè)計(jì)了某個(gè)東西時(shí)，將所有有價(jià)值的方案放入一個(gè)表中，并找平衡的方案。

· 記住要簡(jiǎn)化解決方案，復(fù)雜的解決方案會(huì)導(dǎo)致復(fù)雜的問題。

· 您不能一次一個(gè)組件地去設(shè)計(jì)系統(tǒng)，您需要對(duì)所有構(gòu)建塊如何組合在一起有一個(gè)系統(tǒng)級(jí)別的視圖。

（您不能一次只針對(duì)一個(gè)組件構(gòu)建一個(gè)設(shè)計(jì)系統(tǒng)，你需要有一個(gè)完整的視圖，看看所有的組件是如何組合在一起）

· 必須有文檔模板。

· 當(dāng)設(shè)計(jì)組件還沒有那么成熟時(shí)，低保真的視覺效果是最劃算的。

· 整合和創(chuàng)建你們自己的圖標(biāo)，只需要花很少的時(shí)間就能獲得很大的收益。

· 指導(dǎo)插畫師如何優(yōu)化和清理SVG。

· 使用Airbnb的Lottie庫(kù)實(shí)現(xiàn)跨平臺(tái)的復(fù)雜動(dòng)畫。