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