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

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

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

一、找問題

二、如何改

三、總結

四、標注文件分享

 一  找問題 

 1.1、先看整體

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

1.2、再看局部

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

1.3、設計規(guī)范

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

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

二  如何改 

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

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

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

2.2、Banner 尺寸標準化

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

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

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

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

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

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

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

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

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

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

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

2.7、完成

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

三  總結 

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

四  標注文件分享 

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