來自產品設計負責人的一些認識與看法。
Nedbank集團是非洲最大的金融服務行業之一,主要提供銀行業務、保險、資產管理和理財服務。Nedbank集團目前已有131年的歷史,資產總額達1萬億ZAR(南非貨幣),該集團擁有31000多名員工。
不過在企業環境中研發一個交互設計系統有很多挑戰,最具挑戰性的是集團高層與產品相關利益的股東們的心態,他們中沒有與ui/ux設計相關的專業背景,也沒有掌握對研發工作方面有著細微的了解。所以你需要有戰略性的實現你的目標,不僅僅是需要開發一個設計系統,還要不斷向高層管理和利益相關者保證這個項目是可持續的方案,從長遠來看它將會帶來更多的利潤和更快的投資回報。
一個設計系統不單是由幾個前端組件和一個適應的圖庫組成。還需要精益文檔和強大的用戶體驗來支持決策制定,力助項目成功。另外找到合適的合作伙伴一起工作也是項目成功的基礎,在有著一定規模的設計和開發為關鍵的組織中,如果您的小伙伴沒有具備這樣的專業的系統知識,有可能會導致這樣一個產品失敗。
一個團隊精神是否能強大,需要看團隊的獨立精神,有效采取主動性,并為這個團隊項目承擔一定的風險。并非所有的決策都像簽字那樣輕松,有時候會被告知在處理項目的過程中不必采取某些措施,就像“請求原諒比請求許可一樣容易”,這句話確實開始在你作為問題解決者的角色中發揮作用。
如何開展合作
當處理一個現有的模式 / 特征時,最好的辦法是與已經在這個具體問題上做了大部分工作的團隊進行磋商和討論,他們的參考會給你最深的見解和試驗,作為你研究的基礎。您可能會認為,在某個特定組件上的所有最佳實踐都足以讓您不去查看您的公司已經完成了哪些工作,但是有些組件已經遠遠超過了它們的基本用法,還需要從團隊中吸取一點知識。
另外,像有深度工作的問題最好單獨解決,或者只要有一名專家解決,如果向團隊敞開心扉,會輕易左右您的時間線和價值觀,從而無法按照項目進度完成。就我個人而言,如果對方擁有成熟的技能和知識,針對性的解決復雜問題是開展合作的最佳方式。畢竟您在解決某些復雜問題還不夠成熟,但您對這些問題陷入困境的時候,總需要一個專業的人來拉你一把。
獲得公司層面的認可和支持
在任何企業系統中,你都很難找到正確的方向,但最重要的是展現價值,信守承諾,言出必行。在我入職銀行的一年前,設計系統的思想就被推廣出去了,當時只是一個嘗試,并沒有真正被用到需要的地方。大多數基礎的重要細節都被遺漏了,沒有標準化的網格系統,沒有完整的排版堆棧,并且所有為印刷而寫的品牌指南,沒有經過修改就應用到了數碼產品上。
你需要用一些小的成效去贏得他們的信任,不管問題有多嚴重,都不能從開始就把所有的問題都告訴銀行,然后便跳到最緊迫的問題上。你必須從解決財務影響很小但卻能帶來最大利益的問題開始。作為一個團隊,記錄下你所有的解決方案,然后再逐步轉向較大的問題。誠實地說,這并不一定會變得更容易,事實上,在變得更容易之前,它會變得更加困難,但這會讓你獲得利益相關者的信任,并且逐漸獲得更多的權利。有些問題不值得爭論,記住你不可能總是按照你或你的團隊認為最好的方式去做。重要的是要區分哪些決定是至關重要的,哪些決定你現在可以放棄,哪些以后可能會改變。通過給利益相關者提供他們現在想要的東西,未來,你將有機會在重要的問題上去說服他們。相信我,你需要你能得到的每一點影響力。
“固執己見,但靈活處理細節。——亞馬遜CEO杰夫·貝佐斯
優化
其中一個主要關注點是識別重復的內部任務,從手動更新組件圖像、文檔、圖標等方面著手。為了更好利用團隊中的3個前端開發,我們必須騰出一些時間來關注新的架構。
組件圖片被實際的開發組件所替代,從而取消了每周更新過時組件視圖的需要。現在,文檔遵循Dropbox Paper工作流程,其中,模板包含對組件所有需求的清晰大綱。團隊不再需要召開數周的會議,討論為什么組件文檔必須包含在web上就能找到的所有內容,為什么將帶注釋的圖像保持為低保真度,這樣,只有在功能改變時才需要更新它們。
工作中遇到的問題和解決方案
1-柵格系統
一個現象是,很多UI設計人員沒有使用柵格系統,而使用柵格的設計人員又沒有遵守對齊規則。由于一些項目在柵格上做了大量的工作,使得遵循柵格更加困難。我咨詢了公司所有的設計負責人,把他們使用的屬性和值放在一張表中對比、計算它們的平均值。這讓我了解柵格系統應該做成什么樣。其中有一些團隊在某些值的設定上基本一致,而其他值則稍有差異。X團隊的欄間距(水槽)為30px,這接近我們的理想狀態,于是我詢問其他團隊是否愿意對欄間距做出調整,我將優先幫助有需要的團隊解決問題。
給出建議,接受反饋。確保你在于團隊溝通時,貫穿始終地保證他們的最大利益,你的工作是讓他們的工作更容易。
2-排版系統
其中,一個團隊排版文字的規范從h1到h6沒有明顯區別,信息層級也沒有從全局考慮。由于他們非常堅持原有的字體粗細比,我們妥協了,于是我們記錄了他們對當前的排版的印象,開始嘗試從調整顏色著手,通過使用淺灰與深灰來修改層次結構。解決排版布局不僅保留了團隊的訴求,同時又修復了信息層級。
有一次,我的任務是完成一份響應式排版規范,它可以根據每個瀏覽器窗口的大小進行縮放。這包括了大量的計算以及目測,以匹配最佳的效果。我強烈認為,解決方案應該控制在四個以內,這既減少了設計和開發所需的工作量,又減少了未來可能發生的錯誤。
將設計與開發間的復雜問題簡化能減少很多未來可能發生的錯誤。
3-間距系統:
為了讓使用者更清楚每個組件都有多個組合場景,設計規范應該為每個組件提供間距規則,比如組件與文字或段落一起使用時的規則,以及其中哪些間距是可以靈活修改的。然而,這是一個幾乎無法實現的任務,即使我們試圖列出所有目前的規則,也會有加不盡的新規則,而且間距文檔總是不能保證及時更新到最新。
不過解決方案其實很簡單,間距系統可以歸結為兩個方面:關系和信息層級。也就是說,放的越近的兩個組件,關系和信息層級就越接近(格式塔)。
4-色彩系統
我們沿用了許多在Nedbank使用多年的顏色,品牌指導方針的問題是大部分顏色是為打印選擇的,在設備上看顯得有些不足。我們采用了兩種基本的品牌顏色:Nedbank Heritage Green和Nedbank Grass Green,并進行了一些無障礙性測試。我們的草綠色在小而薄的文本上閱讀性較差,幸運的是我們可以用品牌原設定灰色來替換。不過,灰色也需要調整,說服品牌方后,我們在設計系統上進行了大約3次顏色調整迭代。最終的結果是一個wcag 2.0等級的表格,表明顏色可以用于印刷和背景。
5-組件文檔:
不要只查看幾個組件就構建一套組件系統。您需要對所有組件如何組合在一起有一個總體的概念,這一點至關重要。記錄您常使用設計規則,以便在其他類似的場景中應用統一規則。
設計系統的價值很大程度上在于它的組件文檔。首先要做的是建立一個模板,為重復出現的信息創建一致性,并花時間創建一個清晰的信息層級。保持組件文檔的易讀性,我看過有的文檔查閱起來非常耗時,它們是以其內容的數量而不是其內容的質量來衡量的。但請記住,您的文檔應該易于掃視,用戶需要盡快找到相關信息,而不是看一篇大學論文。
對長篇文檔做簡化是非常迅速的。如果你做了一周的研究,而實際上只有5%的研究是有用的,那就不要太珍視那些無用信息了,請將它刪掉。
為了減少團隊合作中的錯誤,請仔細檢查文檔,并確保設計協作者對你想要達到的目標有一個深刻的理解。
6-模板:
設置模板很重要,這樣設計師們就不必每個界面都從零開始設計。我們會基于一個基本模板開始設計,模板包括柵格組合、全局導航和底部標簽欄。隨著項目進行,會添加404頁面、OTP、條款與規定和其他模板。
7-低保真原型:
設計一個低保真原型用來詮釋高層級的功能是非常有必要的,因為以前每次一旦有細微的設計變動發生,標注圖都必須隨之更新。這不僅僅是對設計師的時間的一種浪費,對開發者來說他們同樣需要重新編程頁面。我們打造了一個基礎的低保真UI成套工具(輕量級、模塊化的前端框架)用來創建抽象組件,這不僅僅提升了進程,也使功能設計更清晰,而不是像很多同行一樣還把注意力放在陳舊的設計組件上。
8-線框模板:
和低保真設計相似的是,設計系統需要一種設計語言建立線框。我們需要解釋很多復雜的流程,我相信作為設計師你可以使它們更易用,更有趣。很幸運的是,設計團隊有一個很有天賦、很厲害的用戶體驗設計領導(Jacques Louw)(非常幸運的是,設計團隊擁有一個非常有才華和強大的UX領袖人物,) 他的學識和搜索能力至關重要,使商家和設計師們信服我們的決定。如果我們沒有以精心設計的樣式呈現用戶流程和示意圖來供設計師欣賞,那么大多數信息就會被忽略。
9-圖庫
銀行類產品使用了很多個不同的圖標庫,其中包括一些收費的圖標庫。大多數圖標庫不會為你提供銀行所需的財務類的圖標,因此我們跟設計師溝通并讓他們對項目的圖標進行設計,然后實時截圖反饋進行溝通,在沒有相關設計工具可以打開文件的情況下,截圖是最簡單的能夠達成我們想要結果的溝通方式。然后,我們在16x16大小的圖標網格上用1px的筆畫進行圖標繪制,這樣當圖標和超鏈接一起使用的時候也很方便閱讀。
最后我們得到了一個由100多個圖標組成的完全原創的圖標庫。除了圖標設計,我還構建了一個簡單的命名規范,和一個用于Web、iOS和Android的自動導出選項的開發流程。我們將很容易地通過網絡更新現有的圖標。我們接著把圖標制作成字體庫,這意味著我們可以快速更新任何現有的圖標,設計師和開發在更新圖標的時候就可以擺脫逐個逐個更新的低效方式。
10-繪制過程
開始圖標繪制的時候,必須要把圖標的筆畫對齊到像素網格上,以便于我們可以便捷地將各部分形狀合并出新的視覺效果和顏色背景。另外,還必須向設計師學習如何優化和清理SVG圖標,以及了解如何構建和思考動態圖標的效果。
11-動效:
如今對動畫的需求越來越明顯。我以前用Airbnb的lottie庫處理過很多動畫,同時可以實現在Web,iOS和Android,這是個非常棒的解決方案。我為銀行項目的一個動效設計師做了一個基本的HTML容器,并讓他用bodymovin插件為我們的一個插圖制作動畫,然后導出JSON文件放進去。結果超出了我們創意總監的預期,我們最終找到了從圖形到動畫,以及平臺發行端到端的解決方案。
12-測試模版庫和代碼庫:
不要等待其他團隊對問題給出反饋,作為一個團隊,每個人都有責任使用并檢驗他們的產品。你認為廚師在食物送到客人之前自己沒有親自試過嗎?我們在自己的工作中發現了大量的問題和錯誤,只有通過積極地測試和檢查自身的工作,我們才能向銀行提供高質量的組件和代碼。
13-資源中心:
我們收到了多個對公司從入職培訓到業務流程信息的請求,這些信息都要放在設計系統中。但是對于為什么要構建這個產品缺乏了解,此時重要的是要保持設計師或開發人員的任務相關的信息,而不是僅僅將這個平臺用作所有其他文檔的垃圾場。(作為一個設計師或開發人員,保持與任務相關的信息是很重要的,而不是僅僅把這個平臺當作所有其他文檔的轉儲平臺。)解決方案是一個名為資源中心的專用頁面,其中包含指向多個Dropbox文件夾的出站鏈接,允許不同部門存儲相關策略和文檔。這個解決方案不僅避免了從設計系統開發人員那里拿走所需資源,而且其他部門可以自由地更新和向其專用空間添加這些內容。
結語
對于那些正忙于構建設計系統或考慮開始的人來說,這里有一些重要的經驗可供參考:
· 在實現目標的過程中要講究策略。
· 找到合適的人加入設計系統中。
· 有時候,獲得原諒比獲得允許更容易。
· 當某人已經做了很多基礎工作的時候可以進行協作。
· 如果支持方擁有成熟的技能和知識,那么結對可以很好地解決復雜的問題,否則您最好獨自解決。
· 先讓利益方獲得他們目前最需要的,這樣以后才有機會展示更多更重要的東西。
· 不僅優化你自己的工作流程,還要優化整個團隊的流程。
· 當多個團隊已經設計了某個東西時,將所有有價值的方案放入一個表中,并找平衡的方案。
· 記住要簡化解決方案,復雜的解決方案會導致復雜的問題。
· 您不能一次一個組件地去設計系統,您需要對所有構建塊如何組合在一起有一個系統級別的視圖。
(您不能一次只針對一個組件構建一個設計系統,你需要有一個完整的視圖,看看所有的組件是如何組合在一起)
· 必須有文檔模板。
· 當設計組件還沒有那么成熟時,低保真的視覺效果是最劃算的。
· 整合和創建你們自己的圖標,只需要花很少的時間就能獲得很大的收益。
· 指導插畫師如何優化和清理SVG。
· 使用Airbnb的Lottie庫實現跨平臺的復雜動畫。