項(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)。