地址：https://rmb-stg.pingan.com.cn/pax/fat/front/#/zh-CN/index

02

Pax Design規(guī)范平臺(tái)的設(shè)計(jì)價(jià)值觀

清晰

清晰的規(guī)范可以減少設(shè)計(jì)過程中不確定的因素。清晰的設(shè)計(jì)體系能夠降低用戶的學(xué)習(xí)成本，減少用戶判斷次數(shù)，明確信息層級(jí)導(dǎo)向，讓用戶的操作更便捷。

統(tǒng)一

樣式規(guī)范、操作流程高度一致，統(tǒng)一的設(shè)計(jì)標(biāo)準(zhǔn)，使微前端應(yīng)用能更好的融入到對(duì)公業(yè)務(wù)的各個(gè)產(chǎn)品中，實(shí)現(xiàn)多端產(chǎn)品的統(tǒng)一體驗(yàn)。有了統(tǒng)一的設(shè)計(jì)規(guī)范，設(shè)計(jì)師使用時(shí)可避免隨意創(chuàng)造組件，保持團(tuán)隊(duì)產(chǎn)品的統(tǒng)一性。一致的設(shè)計(jì)體系, 給用戶帶來品牌信賴感的同時(shí)還能夠縮短用戶學(xué)習(xí)使用產(chǎn)品的周期，用戶能夠預(yù)測(cè)元素的行為方式，這樣即使在第一次訪問的頁面/屏幕上與之交互，也能感覺到安全和舒適。

效率

有了完整的設(shè)計(jì)規(guī)范和對(duì)應(yīng)的組件控件，后期應(yīng)用時(shí)設(shè)計(jì)和開發(fā)都可以直接復(fù)用，減少中間的溝通成本，提高雙方的輸出效率。這樣，設(shè)計(jì)師可以有更多時(shí)間思考設(shè)計(jì)和業(yè)務(wù)背后的邏輯從而提高設(shè)計(jì)思維能力。

沉淀

團(tuán)隊(duì)有了設(shè)計(jì)規(guī)范之后，便于團(tuán)隊(duì)以后做設(shè)計(jì)的依據(jù)和參考，不論是新員工的到來還是老員工的離去，都可以很好的對(duì)接工作，提升團(tuán)隊(duì)的協(xié)同效率。同時(shí)完整的設(shè)計(jì)規(guī)范是系統(tǒng)的，設(shè)計(jì)師閱讀之后可以構(gòu)建自我的設(shè)計(jì)體系，對(duì)于設(shè)計(jì)的提高有極大的好處。

03

Pax Design規(guī)范平臺(tái)有哪些亮點(diǎn)？

 

1、更豐富完善的基礎(chǔ)組件

基于舊Pax的設(shè)計(jì)規(guī)范和團(tuán)隊(duì)內(nèi)設(shè)計(jì)師的B端業(yè)務(wù)實(shí)踐經(jīng)驗(yàn)，我們優(yōu)化了字體、按鈕、輸入框、選擇器、日期選擇、表格、步驟條、警告等多個(gè)組件，共產(chǎn)出了64個(gè)原子級(jí)基礎(chǔ)組件，全面覆蓋布局、數(shù)據(jù)輸入、數(shù)據(jù)展示、提示反饋等交互場(chǎng)景，這些組件基本可以滿足一個(gè)系統(tǒng)70%以上的頁面搭建訴求。豐富細(xì)小的組件顆粒度和靈活的定制能力幫助設(shè)計(jì)師輕松結(jié)合業(yè)務(wù)邏輯，設(shè)計(jì)出符合業(yè)務(wù)需求的界面。

2、主題配置

Pax Design規(guī)范平臺(tái)建立了主題色彩配置體系，使換膚可視化、更便捷。色彩配置在微前端的應(yīng)用上起到了很大的幫助，使微前端頁面通過更換主題色適配到平安對(duì)公業(yè)務(wù)的其他產(chǎn)品中，為各系統(tǒng)打通做基礎(chǔ)服務(wù)。

在主題配置方面，Pax Design規(guī)范平臺(tái)還提供了明亮和暗色兩種模式，支持一鍵開啟暗黑模式，無縫切換，流暢體驗(yàn)。Pax Design規(guī)范平臺(tái)的色彩變換優(yōu)化了顏色變量抽取，加快了頁面渲染速度從而實(shí)現(xiàn)無縫切換。

3、銀行特色業(yè)務(wù)組件庫

 為了滿足更多業(yè)務(wù)場(chǎng)景，我們總結(jié)了各項(xiàng)目?jī)?yōu)秀體驗(yàn)設(shè)計(jì)組件，針對(duì)高頻場(chǎng)景封裝高頻標(biāo)準(zhǔn)組件，沉淀出銀行特色業(yè)務(wù)組件庫，開發(fā)在遇到相同業(yè)務(wù)流程時(shí)便可以直接調(diào)用完整的業(yè)務(wù)組件。目前產(chǎn)出有15個(gè)業(yè)務(wù)組件，后續(xù)會(huì)持續(xù)增加和優(yōu)化。下面詳細(xì)介紹幾個(gè)復(fù)用率較高的業(yè)務(wù)組件：

查詢區(qū)組件

結(jié)合Form、Button、Link等基礎(chǔ)組件做了進(jìn)一步封裝，形成了查詢區(qū)組件，廣泛應(yīng)用于表格中的條件篩選。查詢條件采用了標(biāo)題右對(duì)齊、輸入框左對(duì)齊的方式，還封裝了常用的幾種輸入選擇框的樣式，可以滿足大部分頁面需求。

基礎(chǔ)表格設(shè)置組件

表格作為組織整理數(shù)據(jù)的手段，可以有效地向用戶展示數(shù)據(jù)信息，是 B 端產(chǎn)品中出現(xiàn)最高頻的模塊之一。用戶主要通過表格瀏覽獲取信息、對(duì)數(shù)據(jù)進(jìn)行篩選、排序以及相關(guān)業(yè)務(wù)處理等更多復(fù)雜操作、對(duì)比數(shù)據(jù)的差異與變化（關(guān)聯(lián)和區(qū)別）。好的表格信息展示設(shè)計(jì)，應(yīng)當(dāng)是能夠輔助用戶高效便捷地實(shí)現(xiàn)以上場(chǎng)景中的訴求。

Pax Design規(guī)范平臺(tái)的表格在實(shí)現(xiàn)基礎(chǔ)功能之外，還做了其他差異化設(shè)計(jì)。例如表格可以通過調(diào)整單元格行高來調(diào)整密度，緊湊模式下可以顯示更多的數(shù)據(jù)。還可以讓用戶自己選擇需要展示的列數(shù)據(jù)，以及拖拽移動(dòng)列的位置，可以更好的對(duì)比數(shù)據(jù)，解決了很多B端產(chǎn)品的痛點(diǎn)。

短信驗(yàn)證碼組件

短信驗(yàn)證碼組件是由手機(jī)號(hào)碼、短信驗(yàn)證碼輸入框以及滑塊驗(yàn)證碼組成，封裝了手機(jī)號(hào)及短信驗(yàn)證碼的判斷邏輯，主要用于用戶注冊(cè)及一些開戶表單錄入頁面。

選擇銀行組件

涉及到交易的銀行業(yè)務(wù)比較常出現(xiàn)選擇銀行的功能，于是我們將這個(gè)功能封裝成了業(yè)務(wù)組件。這個(gè)組件可根據(jù)分類選擇銀行，也可以進(jìn)行模糊搜索，這里還封裝了179個(gè)常見銀行l(wèi)ogo和一個(gè)默認(rèn)logo，規(guī)范了銀行l(wèi)ogo的樣式。

信息展示表格

這個(gè)組件常用于詳情及表單確認(rèn)信息頁面中，能比較規(guī)整、清晰的展示信息。默認(rèn)一個(gè)字段占用二分之一行寬度（一行展示兩個(gè)字段），支持自動(dòng)換行保持高度一致。

結(jié)果頁 

結(jié)果頁應(yīng)用比較廣泛，狀態(tài)、提示語都需要保持一致，所以封裝成了業(yè)務(wù)組件。結(jié)果頁的樣式有頁面及彈窗兩種，根據(jù)使用邏輯選擇結(jié)果頁出現(xiàn)方式。成功、失敗等狀態(tài)都有對(duì)應(yīng)的icon和文案，能比較好的避免設(shè)計(jì)差異，開發(fā)樣式也能保持一致。

4、設(shè)計(jì)和開發(fā)更好的協(xié)作

Pax Design規(guī)范平臺(tái)希望通過完善的設(shè)計(jì)體系，提升設(shè)計(jì)、開發(fā)全流程工作體驗(yàn)。設(shè)計(jì)師和前端開發(fā)之間的同步，幾乎是每個(gè)設(shè)計(jì)系統(tǒng)在實(shí)現(xiàn)過程中最為頭疼的事情了，雖然設(shè)計(jì)系統(tǒng)建立了一套標(biāo)準(zhǔn)的溝通語言，但是還缺少一套溝通的方法，而組件庫就是這個(gè)溝通的方法。

舉一個(gè)例子，設(shè)計(jì)師給一個(gè)設(shè)計(jì)稿是由8個(gè)元素拼裝成的，但是前端開發(fā)覺得需要10個(gè)元素才能拼裝成功。雖然溝通語言是一樣，但是溝通方法不一樣（也就是設(shè)計(jì)師和前端的實(shí)現(xiàn)方法不一樣），但是把已經(jīng)封裝好的組件當(dāng)作溝通方法的話，設(shè)計(jì)師和前端開發(fā)看到的將不是元素而是一個(gè)個(gè)的組件，那實(shí)現(xiàn)出來的產(chǎn)品在信息框、視覺表達(dá)、交互體驗(yàn)都一致，這一點(diǎn)和建立設(shè)計(jì)系統(tǒng)的初衷是一樣的。把封裝好的組件當(dāng)成溝通方法，可保證開發(fā)出來的產(chǎn)品在設(shè)計(jì)風(fēng)格和交互體驗(yàn)上都保持一致，對(duì)于設(shè)計(jì)師進(jìn)行設(shè)計(jì)效果的還原也方便許多。同時(shí)方便設(shè)計(jì)師和開發(fā)人員之間的交接協(xié)作效率，從而幫助系統(tǒng)剔除重復(fù)不必要的組件提高開發(fā)產(chǎn)能效率，使開發(fā)更加便捷。

04

未來展望

組件庫的添加與完善

設(shè)計(jì)系統(tǒng)并不是一成不變的，需要不斷的維護(hù)與更新，是一個(gè)動(dòng)態(tài)進(jìn)化的過程。隨著產(chǎn)品功能的更新和新產(chǎn)品的上市，設(shè)計(jì)組件庫都會(huì)不斷被添加和完善。同時(shí)設(shè)計(jì)規(guī)范也會(huì)跟隨設(shè)計(jì)流行趨勢(shì)做出調(diào)整，符合當(dāng)下流行的審美觀，做補(bǔ)充和優(yōu)化。后續(xù)，Pax Design規(guī)范平臺(tái)還會(huì)推出針對(duì)于不同垂直領(lǐng)域的行業(yè)組件，覆蓋更多的業(yè)務(wù)范圍。產(chǎn)品團(tuán)隊(duì)可以借助內(nèi)置的頁面模板，快速配置對(duì)應(yīng)需求，啟動(dòng)業(yè)務(wù)開發(fā)。

設(shè)計(jì)系統(tǒng)的未來不只組件庫

 在未來，我們會(huì)陸續(xù)增加更多可規(guī)范化的模塊，包括圖表可視化、插畫庫、銀行業(yè)務(wù)特色典型流程、典型頁面模板等，通過設(shè)計(jì)工程化的思路，將開箱即用的資源和系統(tǒng)平臺(tái)更智能地連接起來，自動(dòng)化、工具化實(shí)現(xiàn)打通設(shè)計(jì)師與前端工程師的工作流，提升設(shè)計(jì)開發(fā)效率。

設(shè)計(jì)系統(tǒng)不是一蹴而就的，在維護(hù)和升級(jí)的過程中要做好版本的記錄，把整個(gè)設(shè)計(jì)系統(tǒng)作為一個(gè)完整的項(xiàng)目進(jìn)行管理，更有助于設(shè)計(jì)系統(tǒng)的良性生長(zhǎng)與發(fā)展。

05

我們服務(wù)哪些用戶？

Pax Design規(guī)范平臺(tái)致力于探索更符合業(yè)務(wù)場(chǎng)景的設(shè)計(jì)體系，以解決復(fù)雜的業(yè)務(wù)以及冗余的溝通帶來的體驗(yàn)問題，統(tǒng)一對(duì)公業(yè)務(wù)各產(chǎn)品基礎(chǔ)交互體驗(yàn)，助力打通對(duì)公業(yè)務(wù)各產(chǎn)品。在平安內(nèi)部，我們服務(wù)了香港企業(yè)網(wǎng)銀、票據(jù)微應(yīng)用、理財(cái)微應(yīng)用、跨境微應(yīng)用、代收付微應(yīng)用、平安薪、對(duì)公認(rèn)證中心、數(shù)字人民幣、智能清分等9個(gè)產(chǎn)品模塊實(shí)現(xiàn)高效高質(zhì)的產(chǎn)品搭建流程。Pax Design規(guī)范平臺(tái)是從實(shí)踐中孵化而來，也廣泛服務(wù)于內(nèi)部業(yè)務(wù)的產(chǎn)品。

歡迎銀行對(duì)公業(yè)務(wù)各產(chǎn)品使用Pax Design規(guī)范平臺(tái)，在實(shí)踐中發(fā)現(xiàn)問題、解決問題，持續(xù)優(yōu)化Pax Design規(guī)范平臺(tái)。