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

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

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

一、找問(wèn)題

二、如何改

三、總結(jié)

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

 一  找問(wèn)題 

 1.1、先看整體

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

1.2、再看局部

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

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

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

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

二  如何改 

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

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

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

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

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

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

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

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

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

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

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

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

 之前的配圖采用統(tǒng)一模版的文字表達(dá)形式，這樣過(guò)于單一，而且設(shè)計(jì)感欠佳。調(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)將“凹”式改為“凸”式，通過(guò)調(diào)整凸出的錨點(diǎn)使得整體過(guò)渡柔和。中間凸出圖標(biāo)設(shè)計(jì)風(fēng)格和金剛區(qū)保持一致，形成上下風(fēng)格關(guān)聯(lián)。

2.7、完成

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

三  總結(jié) 

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

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

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