設(shè)計(jì)修改怎么做

1、隨著設(shè)計(jì)職場對 UI 設(shè)計(jì)師的要求不斷升級，我們需要掌握的技能層層疊加，從最初的視覺層加對接層演變成我們還需要具備動(dòng)效層、交互層、產(chǎn)品層等能力。所以說三年入行五年精專，想要做好這個(gè)細(xì)分崗位也是不易的。當(dāng)然，無論高度的天花板有多高，一切都還需要腳踏實(shí)地。就算是面對視覺層這樣的底層技能需求，依然還是有部分設(shè)計(jì)師達(dá)不到精細(xì)化的程度。無論是整體的風(fēng)格把控，還是局部的細(xì)節(jié)思考，都容易被忽略。今天就來和大家一起攻破一下視覺層面的精細(xì)化，挑選了界面為案例進(jìn)行解析。以案例實(shí)戰(zhàn)的形式進(jìn)行解析，很多設(shè)計(jì)原則和思考僅代表個(gè)人經(jīng)驗(yàn)總結(jié)，大家需要結(jié)合自身項(xiàng)目情況酌情運(yùn)用。一、找問題二、如何改三、總結(jié)四、標(biāo)注文件分享一

2、找問題1.1、先看整體當(dāng)我們設(shè)計(jì)完一個(gè)界面之后，我們需要先看整體再打磨細(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è)計(jì)本身的質(zhì)量；金剛區(qū)圖標(biāo)無需灰色卡片背景，圖標(biāo)設(shè)計(jì)細(xì)節(jié)規(guī)范和表現(xiàn)力不夠深入等；異形廣告比重太大，需要弱化處理；列表排版信息對比不明顯，局部信息需要圖標(biāo)化引導(dǎo)，配圖處理過于單一等；底部標(biāo)簽欄沒有區(qū)

3、分點(diǎn)擊和默認(rèn)狀態(tài)，圖標(biāo)設(shè)計(jì)細(xì)節(jié)規(guī)范問題，中間圖標(biāo)采用“凹”式效果不夠柔和等。1.3、設(shè)計(jì)規(guī)范對于 UI 設(shè)計(jì)來說，規(guī)范性是設(shè)計(jì)的基礎(chǔ)，確定好界面尺寸的模版比例之后，標(biāo)準(zhǔn)的控件不要用錯(cuò)。根據(jù)案例的尺寸比例屬于 iPhone X 的設(shè)計(jì)，在項(xiàng)目設(shè)計(jì)中盡量真實(shí)還原設(shè)計(jì)稿，狀態(tài)欄和底部主頁控制器不要用錯(cuò)。整體布局過程中的數(shù)字關(guān)系比較混亂，在布局的過程中定好數(shù)字系數(shù)，按照系數(shù)的倍數(shù)關(guān)系來進(jìn)行排版布局。以上問題僅作為列舉示意，更多問題大家自行分析歸納，這里就粗略統(tǒng)計(jì)啦！二 如何改根據(jù)分析出的問題，接下來我們逐步進(jìn)行調(diào)整。在進(jìn)行界面布局的過程中，我們需要根據(jù)需求先設(shè)計(jì)出高保真原型圖，忽略顏色、配圖、圖標(biāo)等耗

4、費(fèi)時(shí)間的設(shè)計(jì)內(nèi)容，快速將整體的信息對比關(guān)系做出來。個(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)系來確定比例關(guān)系。這里我采用了斐波那契數(shù)列進(jìn)行計(jì)算，在推薦的寬高比例

5、中我使用了 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)一的外輪廓背景來進(jìn)行約束。外輪廓有圓形、圓角矩形、橢圓形、超橢圓等，這里我選擇了超橢圓作為圖標(biāo)設(shè)計(jì)的外輪廓。在配色上面為了和整體色系搭配，選擇了莫蘭迪色系，圖標(biāo)設(shè)計(jì)風(fēng)格偏向于微質(zhì)感。2.4、通知欄優(yōu)化根據(jù)之前案例中異形廣告的文案“中華醫(yī)學(xué)會(huì)指南全新上線”，偏向于通知形式，優(yōu)化后改為通知欄板塊。既可以突出查看按鈕，也不會(huì)過度視

6、覺化干擾金剛區(qū)功能模塊。為了突出通知內(nèi)容，根據(jù)內(nèi)容的強(qiáng)化等級在前面添加火苗圖標(biāo)，起到重點(diǎn)強(qiáng)化的目的。2.5、健康須知模塊優(yōu)化該模塊優(yōu)化了卡片式設(shè)計(jì)，改灰色卡片為白色卡片，這樣顯得更加干凈整潔。除了對標(biāo)題等信息對比加強(qiáng)以外，也將一些文案進(jìn)行圖標(biāo)化，增強(qiáng)設(shè)計(jì)感。之前的配圖采用統(tǒng)一模版的文字表達(dá)形式，這樣過于單一，而且設(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)將“凹”式改為“凸”式，通過調(diào)整凸出的錨點(diǎn)使得整體過渡柔和。中間凸出圖標(biāo)設(shè)計(jì)風(fēng)格和金剛區(qū)保持一致，形成上下風(fēng)格關(guān)聯(lián)。2.7、完成在保持原有信息的基礎(chǔ)上，僅做了視覺層面的優(yōu)化，希望這個(gè)案例修改可以帶給你更多思考。三 總結(jié)這是一個(gè)功能相對比