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