項目背景

           BOD是新一代的智能風控決策中心平臺。主要功能是通過產(chǎn)品對借款人進行準確、實時的風險量化評估和決策 ，將業(yè)務風控和IT進行分離, 提升內(nèi)部協(xié)作效率。

 

     隨著產(chǎn)品的不斷迭代更新和用戶需求的日益增加。之前的版本在交互統(tǒng)一性、易用性方面都有所下降，同時隨著監(jiān)管的加強和客戶對風控平臺部署需求的升級，產(chǎn)品在主功能層面的擴展性也受

到部分限制，因此進行一次全面的大版本升級。

本次升級主要包括兩方面：

1、整體UI及頁面架構(gòu)調(diào)整

2、舊功能梳理優(yōu)化、新功能的增加

 

 

主要功能

 

 

制作規(guī)范的原由

      在整個產(chǎn)品設(shè)計過程中，視覺與交互不僅肩負著需要展現(xiàn)表象，更是銜接產(chǎn)品需求，梳理產(chǎn)品骨架并且與前端開發(fā)團隊協(xié)作的工作的功能。有時雖然設(shè)計出了視覺圖但是卻不能基于開發(fā)同學的組件邏輯，或是交互的動效過于復雜耗時耗力延緩產(chǎn)品進度，這就造成開發(fā)同學有時會按自己的想法來做靜態(tài)頁面搭建，造成頁面形式各異體驗不統(tǒng)一。

       

     特別是TOB的軟件頁面，雖然不如web或是app來的炫酷但是在細節(jié)和使用體驗上的把控卻非常嚴格，對邏輯和頁面的統(tǒng)一性也要求非常高，所以更需要一套規(guī)范來輔助設(shè)計和開發(fā)，并且能在后續(xù)增改和迭代時有據(jù)可依。

 

 

制作規(guī)范的方向

 

制定時機

1.主要頁面與基礎(chǔ)模塊確定了之后在進行制定
 

     之前碰見好幾次頁面還沒有做產(chǎn)品就讓先出一套規(guī)范的情況，然后在后續(xù)的設(shè)計和開發(fā)時都嚴格按照規(guī)范來做。這就會在后面項目推進的過程中出現(xiàn)很多問題，在沒有實際開始設(shè)計時很多想法其實都很突發(fā)奇想會欠缺很多考慮，所以按這個時候制定的規(guī)范設(shè)計時時間一長就會出現(xiàn)很多問題，比如主次頁面分層表達不明確按鈕的尺寸分布樣式，表格列寬固定方式，哪些部分需要自適應等等，這些都是需在確定了大的主要頁面和模塊之后才能實際制定出來。

2.規(guī)范應該可修改

     也不是規(guī)范做好了就改不了，應該是按照開發(fā)時的實際情況可進行適當修改，譬如這次剛制定規(guī)范時沒有考慮到校驗性文字與提示性文字重疊的情況，所以在小表格頁面就出現(xiàn)了行高尺寸錯誤。規(guī)范并不是為了給整個視覺和開發(fā)制定條款的，而是為了更好的讓設(shè)計與開發(fā)進行協(xié)同工作，在保證頁面統(tǒng)一的情況下縮短開發(fā)的進度，也方便增加需求或是迭代時有跡可循。

 

3.提前溝通，了解開發(fā)同學的開發(fā)習慣和應用組件

      因為視覺和前端同學有時對同一組件的邏輯理解是不一樣的所以制定時一定要溝通協(xié)調(diào)，提前詢問好開發(fā)同學用的是什么組件庫和柵格比例，在此基礎(chǔ)上在進行控件的設(shè)計，也要提前詢問前端當你設(shè)計新的UIkit 模塊時他們代碼耗費時間和交互動效是能實現(xiàn)。

 

設(shè)計步驟

1.在主要界面和柵格確定后，整理出分類層級
 

根絕需求大致確定導航的層級，分類，一級頁面需要跳轉(zhuǎn)頁面和功能疊加頁面。

 

2.按照功能和層級區(qū)分出基礎(chǔ)模塊的分類，并確定使用的場景

根據(jù)結(jié)果來劃分顏色，字體，按鈕，組件大小和間隔距離。

 

3.細化顏色，字號，按鈕，控件等的基礎(chǔ)設(shè)計

 

     每個人對顏色的感知都是不一樣的，我們不能讓所有人都滿意但是卻可以滿足大部分人，所以在主要頁面確定后我們依照logo，行業(yè)標準色，官網(wǎng)，視覺疲勞耐受度等，出了5版顏色的主頁面讓項目相關(guān)的同學和一部分老用戶進行投票選擇，最后根據(jù)投票數(shù)決定。

 

4.制作可交互的查閱樣式，方便使用和演示時精準找到定位點
 

 

5.利用協(xié)同工具輸出規(guī)范

 

      在這里給大家推薦一下pxcook，我們是直接把psd文件放進去標注，開發(fā)同學就能直接測量和調(diào)用樣式代碼，通用Mac和win系統(tǒng)并且可以實時更新非常的方便。

 

 

規(guī)范內(nèi)容
 

除了層級展示和柵格標注外，規(guī)范內(nèi)還應該包含以下內(nèi)容
 

規(guī)范的最終交付的應包含：規(guī)范展示、場景示例，輸出標注，規(guī)范文檔

 

     除了常規(guī)的顏色，icon，按鈕之外，控件是我們花費精力最大的部分，初期要先梳理需求部件，參考前端通用組件，衡量任務比重和時間節(jié)點，再次基礎(chǔ)上將出現(xiàn)兩處以上的控件羅列出來，根絕實際場景進行分類設(shè)計。主頁面畫布區(qū)的顏色，字體，按鈕，行高等都要和次級區(qū)域的進行區(qū)分，不同含義的側(cè)邊和彈窗的交互方式也會有區(qū)別需要特別進行標示。

 

 

顏色

     以顏色中最具有系統(tǒng)性，科技感的藍色為主，同時用于長時間使用所以降低了藍色的明度和飽和度，減少用戶的沖擊性顏色所帶來的疲勞感，根據(jù)互補色選取了低明度/低飽和度的綠色和橙色作為輔助色和提示色，頁面區(qū)塊背景部分用簡單的“白-灰-白”進行區(qū)分，使主體內(nèi)容突出的同時減少用戶的閱讀阻力，提供了更舒適的體驗。

顏色除了按使用場景標明外，還需要注意漸變色也要給出漸變色值和擴展值。

 

 

字符

 

 

      產(chǎn)品使用的主要載體是筆記本并且大部分銀行使用系統(tǒng)都是固定的windows系統(tǒng)，所以字體選用了微軟的系統(tǒng)字體微軟雅黑，防止在不同分辨率時會出現(xiàn)變形或是虛化的情況出現(xiàn)。字符分類時盡量不要用一級二級或是主輔，因為有時程序同學的對主次級的理解和設(shè)計并不一樣，折行文字的行高一定要標清楚，曾經(jīng)因為沒有標被前端diss了很久了，簡直深深的刻在了恥辱柱上，如果有特殊字符樣式也需要標示清楚。

 

 

控件
 

 

     規(guī)范標準控件主要是為了統(tǒng)一不同的板塊在設(shè)計和開發(fā)時快速引用樣式，所以需要規(guī)范盡量全面并在后續(xù)設(shè)計開發(fā)時不斷補充和完善。這次的改版主要是把之前繁冗的層級和交互邏輯進行精簡和分類，所以我們將之前較深的頁面和彈窗全部提出打平做成主頁面的側(cè)邊活動欄，這樣做主要有兩個目的

1.可以對節(jié)點進行針對性的編輯和說明，讓用戶在使用時能夠快速了解自己所在的位置和所做的更改，并且可以快速提取自己所需信息。
 

2.簡化層級的同時增加了交互動畫，提升軟件的展示活力。
 

     所以所有帶交互展示和輸入功能的控件就需要兩種尺寸來區(qū)分所使用場景的主次性，大尺寸用于大畫布區(qū)域小尺寸用于側(cè)邊欄和彈窗，我定初始尺寸大小是根據(jù)頁面最少內(nèi)容最小展開時在一頁顯示完全避免出現(xiàn)過多的滾動條。
 

 

表格

因為是自適應頁面，除了正常情況下的大表格和小表格外還需注意超列時的表格樣式。

 

 

表單

     頁面的基本柵格為20px,為了盡量保持頁面的統(tǒng)一性，設(shè)置含有輸入和選擇器的表單行高為54px，當減去輸入框34px的高度時上下會各余10px,這樣就能保證兩行輸入框之間的間距為20px，同理文本表單行高32px減去字符高度12px，就能保證上下各余10px間距為20px。

 

總結(jié)

這次的項目對我本身的成長非常大，不僅是在設(shè)計方面更滲透了產(chǎn)品，前端和運營的知識。

    剛?cè)胄袝r覺得設(shè)計就是錦上添花的功能，現(xiàn)在時間越長越覺得設(shè)計不僅要求有感性的審美還要有理性的邏輯，需要能在程序之前理清所有的層級結(jié)構(gòu)邏輯功能，最好能在做1的時候就想到之后的2，3，4。協(xié)同合作的軟件有時雖然能減輕很多工作量但是細節(jié)性的內(nèi)容還是需要提前說明清楚，一定要多寫，多想，遇見特殊情況時可以先畫一下簡圖整理一下。

寫這篇文章的時候也參考了很多大神的經(jīng)驗，感謝有他們無私的奉獻，才能讓我在設(shè)計的道路上越走越遠。