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

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

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

一、找問題

二、如何改

三、總結

四、標注文件分享

 一  找問題 

 1.1、先看整體

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

1.2、再看局部

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

1.3、設計規范

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

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

二  如何改 

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

 2.1、頭部細化（狀態欄）

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

2.2、Banner 尺寸標準化

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

2.3、金剛區圖標優化

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

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

2.4、通知欄優化

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

2.5、健康須知模塊優化

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

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

2.6、底部標簽欄優化

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

2.7、完成

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

三  總結 

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

四  標注文件分享 

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