隨著設(shè)計職場對 UI 設(shè)計師的要求不斷升級，我們需要掌握的技能層層疊加，從最初的視覺層加對接層演變成我們還需要具備動效層、交互層、產(chǎn)品層等能力。所以說三年入行五年精專，想要做好這個細(xì)分崗位也是不易的。

 當(dāng)然，無論高度的天花板有多高，一切都還需要腳踏實(shí)地。就算是面對視覺層這樣的底層技能需求，依然還是有部分設(shè)計師達(dá)不到精細(xì)化的程度。無論是整體的風(fēng)格把控，還是局部的細(xì)節(jié)思考，都容易被忽略。

 今天黑馬哥就來和大家一起攻破一下視覺層面的精細(xì)化，挑選了黑馬家族成員第一次嘗試的界面為案例進(jìn)行解析。以案例實(shí)戰(zhàn)的形式進(jìn)行解析，很多設(shè)計原則和思考僅代表個人經(jīng)驗(yàn)總結(jié)，大家需要結(jié)合自身項(xiàng)目情況酌情運(yùn)用。

一、找問題

二、如何改

三、總結(jié)

四、標(biāo)注文件分享

 一  找問題 

 1.1、先看整體

當(dāng)我們設(shè)計完一個界面之后，我們需要先看整體再打磨細(xì)節(jié)，整體的視覺引導(dǎo)和信息層級關(guān)系需要處理到位。如果整體信息層級把控不準(zhǔn)，可以將界面模糊態(tài)之后觀察。案例中界面頭部到 Banner 區(qū)域信息對比模糊；金剛區(qū)下方的異形廣告位過度干擾，導(dǎo)致視覺焦點(diǎn)不明顯。

1.2、再看局部

整體排查之后，從上往下再進(jìn)行局部細(xì)節(jié)走查。導(dǎo)航欄和 Banner 區(qū)域需要進(jìn)行視覺比重區(qū)分，這里忽略 Banner 設(shè)計本身的質(zhì)量；金剛區(qū)圖標(biāo)無需灰色卡片背景，圖標(biāo)設(shè)計細(xì)節(jié)規(guī)范和表現(xiàn)力不夠深入等；異形廣告比重太大，需要弱化處理；列表排版信息對比不明顯，局部信息需要圖標(biāo)化引導(dǎo)，配圖處理過于單一等；底部標(biāo)簽欄沒有區(qū)分點(diǎn)擊和默認(rèn)狀態(tài)，圖標(biāo)設(shè)計細(xì)節(jié)規(guī)范問題，中間圖標(biāo)采用“凹”式效果不夠柔和等。

1.3、設(shè)計規(guī)范

對于 UI設(shè)計來說，規(guī)范性是設(shè)計的基礎(chǔ)，確定好界面尺寸的模版比例之后，標(biāo)準(zhǔn)的控件不要用錯。根據(jù)案例的尺寸比例屬于 iPhone X 的設(shè)計，在項(xiàng)目設(shè)計中盡量真實(shí)還原設(shè)計稿，狀態(tài)欄和底部主頁控制器不要用錯。整體布局過程中的數(shù)字關(guān)系比較混亂，在布局的過程中定好數(shù)字系數(shù)，按照系數(shù)的倍數(shù)關(guān)系來進(jìn)行排版布局。

 以上問題僅作為列舉示意，更多問題大家自行分析歸納，這里就粗略統(tǒng)計啦！

二  如何改 

 根據(jù)分析出的問題，接下來我們逐步進(jìn)行調(diào)整。在進(jìn)行界面布局的過程中，我們需要根據(jù)需求先設(shè)計出高保真原型圖，忽略顏色、配圖、圖標(biāo)等耗費(fèi)時間的設(shè)計內(nèi)容，快速將整體的信息對比關(guān)系做出來。個人的習(xí)慣是根據(jù)低保真原型圖、高保真原型圖、UI 設(shè)計稿、細(xì)節(jié)打磨等環(huán)節(jié)進(jìn)行。

 2.1、頭部細(xì)化（狀態(tài)欄）

頭部我們通常采用深色（品牌色）、淺色、白頭、Banner 圖填充等形式。為了使整體設(shè)計通透性更好，我選擇白頭加局部色彩點(diǎn)綴的形式，處理手法使用了極光效果。既可以讓頭部的效果更具特色，露出品牌色增強(qiáng)曝光度，也不會和 Banner 圖互相干擾。

2.2、Banner 尺寸標(biāo)準(zhǔn)化

在確定 Banner 圖尺寸的時候雖然我們可以自定義，但是我們也盡可能的在探索更規(guī)范的形式，利用一些數(shù)列關(guān)系來確定比例關(guān)系。這里我采用了斐波那契數(shù)列進(jìn)行計算，在推薦的寬高比例中我使用了 8:3 進(jìn)行計算。在算出的值中取能被 4 整除的數(shù)值，確定 Banner 尺寸為：686*256px（基于二倍圖）。

2.3、金剛區(qū)圖標(biāo)優(yōu)化

金剛區(qū)圖標(biāo)設(shè)計風(fēng)格很多，大體上分為線性和面性風(fēng)格，而面性里面也會有扁平的和質(zhì)感的。如果在圖形統(tǒng)一性上面把控較弱，也可以采用統(tǒng)一的外輪廓背景來進(jìn)行約束。外輪廓有圓形、圓角矩形、橢圓形、超橢圓等，這里我選擇了超橢圓作為圖標(biāo)設(shè)計的外輪廓。

 在配色上面為了和整體色系搭配，選擇了莫蘭迪色系，圖標(biāo)設(shè)計風(fēng)格偏向于微質(zhì)感。

2.4、通知欄優(yōu)化

根據(jù)之前案例中異形廣告的文案“中華醫(yī)學(xué)會指南全新上線”，偏向于通知形式，優(yōu)化后改為通知欄板塊。既可以突出查看按鈕，也不會過度視覺化干擾金剛區(qū)功能模塊。為了突出通知內(nèi)容，根據(jù)內(nèi)容的強(qiáng)化等級在前面添加火苗圖標(biāo)，起到重點(diǎn)強(qiáng)化的目的。

2.5、健康須知模塊優(yōu)化

該模塊優(yōu)化了卡片式設(shè)計，改灰色卡片為白色卡片，這樣顯得更加干凈整潔。除了對標(biāo)題等信息對比加強(qiáng)以外，也將一些文案進(jìn)行圖標(biāo)化，增強(qiáng)設(shè)計感。

 之前的配圖采用統(tǒng)一模版的文字表達(dá)形式，這樣過于單一，而且設(shè)計感欠佳。調(diào)整后采用圖片表達(dá)，更能引導(dǎo)用戶點(diǎn)擊閱讀。

2.6、底部標(biāo)簽欄優(yōu)化

重新繪制了底部標(biāo)簽欄的圖標(biāo)，默認(rèn)狀態(tài)采用線性圖標(biāo)，點(diǎn)擊狀態(tài)采用面性。中間圖標(biāo)將“凹”式改為“凸”式，通過調(diào)整凸出的錨點(diǎn)使得整體過渡柔和。中間凸出圖標(biāo)設(shè)計風(fēng)格和金剛區(qū)保持一致，形成上下風(fēng)格關(guān)聯(lián)。

2.7、完成

在保持原有信息的基礎(chǔ)上，僅做了視覺層面的優(yōu)化，希望這個案例修改可以帶給你更多思考。

三  總結(jié) 

 這是一個功能相對比較簡單的首頁案例，本次案例忽略了產(chǎn)品層面、交互層面等思考，只在視覺層進(jìn)行了優(yōu)化。調(diào)整了色彩關(guān)系、布局細(xì)節(jié)和圖標(biāo)設(shè)計等內(nèi)容，基于原始案例內(nèi)容不變的情況進(jìn)行調(diào)整，希望拋磚引玉，可以帶給大家更多思考。

四  標(biāo)注文件分享 

最后附上修改案例的標(biāo)注文件，希望可以幫助大家更好的理解。關(guān)注“黑馬家族”公眾號，后臺回復(fù)關(guān)鍵詞“首頁設(shè)計”獲取標(biāo)注文件。