項(xiàng)目背景
BOD是新一代的智能風(fēng)控決策中心平臺。主要功能是通過產(chǎn)品對借款人進(jìn)行準(zhǔn)確、實(shí)時的風(fēng)險量化評估和決策 ，將業(yè)務(wù)風(fēng)控和IT進(jìn)行分離, 提升內(nèi)部協(xié)作效率。
隨著產(chǎn)品的不斷迭代更新和用戶需求的日益增加。之前的版本在交互統(tǒng)一性、易用性方面都有所下降，同時隨著監(jiān)管的加強(qiáng)和客戶對風(fēng)控平臺部署需求的升級，產(chǎn)品在主功能層面的擴(kuò)展性也受
到部分限制，因此進(jìn)行一次全面的大版本升級。
本次升級主要包括兩方面：
1、整體UI及頁面架構(gòu)調(diào)整
2、舊功能梳理優(yōu)化、新功能的增加
主要功能
制作規(guī)范的原由
在整個產(chǎn)品設(shè)計(jì)過程中，視覺與交互不僅肩負(fù)著需要展現(xiàn)表象，更是銜接產(chǎn)品需求，梳理產(chǎn)品骨架并且與前端開發(fā)團(tuán)隊(duì)協(xié)作的工作的功能。有時雖然設(shè)計(jì)出了視覺圖但是卻不能基于開發(fā)同學(xué)的組件邏輯，或是交互的動效過于復(fù)雜耗時耗力延緩產(chǎn)品進(jìn)度，這就造成開發(fā)同學(xué)有時會按自己的想法來做靜態(tài)頁面搭建，造成頁面形式各異體驗(yàn)不統(tǒng)一。
特別是TOB的軟件頁面，雖然不如web或是app來的炫酷但是在細(xì)節(jié)和使用體驗(yàn)上的把控卻非常嚴(yán)格，對邏輯和頁面的統(tǒng)一性也要求非常高，所以更需要一套規(guī)范來輔助設(shè)計(jì)和開發(fā)，并且能在后續(xù)增改和迭代時有據(jù)可依。
制作規(guī)范的方向
制定時機(jī)
1.主要頁面與基礎(chǔ)模塊確定了之后在進(jìn)行制定
之前碰見好幾次頁面還沒有做產(chǎn)品就讓先出一套規(guī)范的情況，然后在后續(xù)的設(shè)計(jì)和開發(fā)時都嚴(yán)格按照規(guī)范來做。這就會在后面項(xiàng)目推進(jìn)的過程中出現(xiàn)很多問題，在沒有實(shí)際開始設(shè)計(jì)時很多想法其實(shí)都很突發(fā)奇想會欠缺很多考慮，所以按這個時候制定的規(guī)范設(shè)計(jì)時時間一長就會出現(xiàn)很多問題，比如主次頁面分層表達(dá)不明確按鈕的尺寸分布樣式，表格列寬固定方式，哪些部分需要自適應(yīng)等等，這些都是需在確定了大的主要頁面和模塊之后才能實(shí)際制定出來。
2.規(guī)范應(yīng)該可修改
也不是規(guī)范做好了就改不了，應(yīng)該是按照開發(fā)時的實(shí)際情況可進(jìn)行適當(dāng)修改，譬如這次剛制定規(guī)范時沒有考慮到校驗(yàn)性文字與提示性文字重疊的情況，所以在小表格頁面就出現(xiàn)了行高尺寸錯誤。規(guī)范并不是為了給整個視覺和開發(fā)制定條款的，而是為了更好的讓設(shè)計(jì)與開發(fā)進(jìn)行協(xié)同工作，在保證頁面統(tǒng)一的情況下縮短開發(fā)的進(jìn)度，也方便增加需求或是迭代時有跡可循。
3.提前溝通，了解開發(fā)同學(xué)的開發(fā)習(xí)慣和應(yīng)用組件
因?yàn)橐曈X和前端同學(xué)有時對同一組件的邏輯理解是不一樣的所以制定時一定要溝通協(xié)調(diào)，提前詢問好開發(fā)同學(xué)用的是什么組件庫和柵格比例，在此基礎(chǔ)上在進(jìn)行控件的設(shè)計(jì)，也要提前詢問前端當(dāng)你設(shè)計(jì)新的UIkit 模塊時他們代碼耗費(fèi)時間和交互動效是能實(shí)現(xiàn)。
設(shè)計(jì)步驟
1.在主要界面和柵格確定后，整理出分類層級
根絕需求大致確定導(dǎo)航的層級，分類，一級頁面需要跳轉(zhuǎn)頁面和功能疊加頁面。
2.按照功能和層級區(qū)分出基礎(chǔ)模塊的分類，并確定使用的場景
根據(jù)結(jié)果來劃分顏色，字體，按鈕，組件大小和間隔距離。
3.細(xì)化顏色，字號，按鈕，控件等的基礎(chǔ)設(shè)計(jì)
每個人對顏色的感知都是不一樣的，我們不能讓所有人都滿意但是卻可以滿足大部分人，所以在主要頁面確定后我們依照logo，行業(yè)標(biāo)準(zhǔn)色，官網(wǎng)，視覺疲勞耐受度等，出了5版顏色的主頁面讓項(xiàng)目相關(guān)的同學(xué)和一部分老用戶進(jìn)行投票選擇，最后根據(jù)投票數(shù)決定。
4.制作可交互的查閱樣式，方便使用和演示時精準(zhǔn)找到定位點(diǎn)
5.利用協(xié)同工具輸出規(guī)范
在這里給大家推薦一下pxcook，我們是直接把psd文件放進(jìn)去標(biāo)注，開發(fā)同學(xué)就能直接測量和調(diào)用樣式代碼，通用Mac和win系統(tǒng)并且可以實(shí)時更新非常的方便。
規(guī)范內(nèi)容
除了層級展示和柵格標(biāo)注外，規(guī)范內(nèi)還應(yīng)該包含以下內(nèi)容
規(guī)范的最終交付的應(yīng)包含：規(guī)范展示、場景示例，輸出標(biāo)注，規(guī)范文檔
除了常規(guī)的顏色，icon，按鈕之外，控件是我們花費(fèi)精力最大的部分，初期要先梳理需求部件，參考前端通用組件，衡量任務(wù)比重和時間節(jié)點(diǎn)，再次基礎(chǔ)上將出現(xiàn)兩處以上的控件羅列出來，根絕實(shí)際場景進(jìn)行分類設(shè)計(jì)。主頁面畫布區(qū)的顏色，字體，按鈕，行高等都要和次級區(qū)域的進(jìn)行區(qū)分，不同含義的側(cè)邊和彈窗的交互方式也會有區(qū)別需要特別進(jìn)行標(biāo)示。
顏色
以顏色中最具有系統(tǒng)性，科技感的藍(lán)色為主，同時用于長時間使用所以降低了藍(lán)色的明度和飽和度，減少用戶的沖擊性顏色所帶來的疲勞感，根據(jù)互補(bǔ)色選取了低明度/低飽和度的綠色和橙色作為輔助色和提示色，頁面區(qū)塊背景部分用簡單的“白-灰-白”進(jìn)行區(qū)分，使主體內(nèi)容突出的同時減少用戶的閱讀阻力，提供了更舒適的體驗(yàn)。
顏色除了按使用場景標(biāo)明外，還需要注意漸變色也要給出漸變色值和擴(kuò)展值。
字符
產(chǎn)品使用的主要載體是筆記本并且大部分銀行使用系統(tǒng)都是固定的windows系統(tǒng)，所以字體選用了微軟的系統(tǒng)字體微軟雅黑，防止在不同分辨率時會出現(xiàn)變形或是虛化的情況出現(xiàn)。字符分類時盡量不要用一級二級或是主輔，因?yàn)橛袝r程序同學(xué)的對主次級的理解和設(shè)計(jì)并不一樣，折行文字的行高一定要標(biāo)清楚，曾經(jīng)因?yàn)闆]有標(biāo)被前端diss了很久了，簡直深深的刻在了恥辱柱上，如果有特殊字符樣式也需要標(biāo)示清楚。
控件
規(guī)范標(biāo)準(zhǔn)控件主要是為了統(tǒng)一不同的板塊在設(shè)計(jì)和開發(fā)時快速引用樣式，所以需要規(guī)范盡量全面并在后續(xù)設(shè)計(jì)開發(fā)時不斷補(bǔ)充和完善。這次的改版主要是把之前繁冗的層級和交互邏輯進(jìn)行精簡和分類，所以我們將之前較深的頁面和彈窗全部提出打平做成主頁面的側(cè)邊活動欄，這樣做主要有兩個目的
1.可以對節(jié)點(diǎn)進(jìn)行針對性的編輯和說明，讓用戶在使用時能夠快速了解自己所在的位置和所做的更改，并且可以快速提取自己所需信息。
2.簡化層級的同時增加了交互動畫，提升軟件的展示活力。
所以所有帶交互展示和輸入功能的控件就需要兩種尺寸來區(qū)分所使用場景的主次性，大尺寸用于大畫布區(qū)域小尺寸用于側(cè)邊欄和彈窗，我定初始尺寸大小是根據(jù)頁面最少內(nèi)容最小展開時在一頁顯示完全避免出現(xiàn)過多的滾動條。
表格
因?yàn)槭亲赃m應(yīng)頁面，除了正常情況下的大表格和小表格外還需注意超列時的表格樣式。
表單
頁面的基本柵格為20px,為了盡量保持頁面的統(tǒng)一性，設(shè)置含有輸入和選擇器的表單行高為54px，當(dāng)減去輸入框34px的高度時上下會各余10px,這樣就能保證兩行輸入框之間的間距為20px，同理文本表單行高32px減去字符高度12px，就能保證上下各余10px間距為20px。
總結(jié)
這次的項(xiàng)目對我本身的成長非常大，不僅是在設(shè)計(jì)方面更滲透了產(chǎn)品，前端和運(yùn)營的知識。
剛?cè)胄袝r覺得設(shè)計(jì)就是錦上添花的功能，現(xiàn)在時間越長越覺得設(shè)計(jì)不僅要求有感性的審美還要有理性的邏輯，需要能在程序之前理清所有的層級結(jié)構(gòu)邏輯功能，最好能在做1的時候就想到之后的2，3，4。協(xié)同合作的軟件有時雖然能減輕很多工作量但是細(xì)節(jié)性的內(nèi)容還是需要提前說明清楚，一定要多寫，多想，遇見特殊情況時可以先畫一下簡圖整理一下。
寫這篇文章的時候也參考了很多大神的經(jīng)驗(yàn)，感謝有他們無私的奉獻(xiàn)，才能讓我在設(shè)計(jì)的道路上越走越遠(yuǎn)。
