俗話說：“細(xì)節(jié)決定成敗”，細(xì)節(jié)的把控至關(guān)重要，這也是設(shè)計(jì)師能力的代表。隨著項(xiàng)目經(jīng)驗(yàn)的積累和專業(yè)能力的成熟，我們對(duì)于設(shè)計(jì)原則、設(shè)計(jì)細(xì)節(jié)和設(shè)計(jì)經(jīng)驗(yàn)的沉淀也會(huì)越來越多，設(shè)計(jì)輸出也會(huì)因?yàn)檫@些細(xì)節(jié)而顯得更優(yōu)秀。
黑馬哥結(jié)合職場(chǎng)經(jīng)驗(yàn)和教學(xué)經(jīng)驗(yàn)，總結(jié)了 120+ 設(shè)計(jì)原則、設(shè)計(jì)細(xì)節(jié)和設(shè)計(jì)經(jīng)驗(yàn)的案例分析。案例內(nèi)容涉及布局、圖標(biāo)、按鈕、文本、配色、配圖、規(guī)范、交互和設(shè)計(jì)經(jīng)驗(yàn)等，目的是為了讓我們的設(shè)計(jì)更規(guī)范、更專業(yè)、有細(xì)節(jié)、有亮點(diǎn)、有思維。
今天先挑選其中的 10 個(gè)案例和大家一起交流一下。
1. 圓角圖片對(duì)齊時(shí)不要完全左對(duì)齊
2. 同屬性版塊統(tǒng)一圖標(biāo)設(shè)計(jì)規(guī)范
設(shè)計(jì)中遇到圖片帶有圓角時(shí)，文字排版不適合完全基于圖片左對(duì)齊，視覺上會(huì)顯得文字太靠左，失去視覺平衡度。適當(dāng)預(yù)留間距視覺上更平衡，版面結(jié)構(gòu)也會(huì)更穩(wěn)重。
同屬性版塊需要統(tǒng)一圖標(biāo)設(shè)計(jì)規(guī)范，不要出現(xiàn)風(fēng)格混搭，遵循圖標(biāo)設(shè)計(jì)的十大統(tǒng)一性：風(fēng)格、大小、粗細(xì)、圓角、比例、透視、角度、疏密、間距、正負(fù)形。
在可視化的場(chǎng)景中，針對(duì)一些特殊數(shù)據(jù)展示的時(shí)候，可以選擇特殊字體增加設(shè)計(jì)感。再通過字體大小對(duì)比、字重對(duì)比、顏色深淺對(duì)比等來突出數(shù)據(jù)。
在進(jìn)行 UI 設(shè)計(jì)時(shí)，需要預(yù)估好當(dāng)前位置所能承載的最大值，不能只在理想化的狀態(tài)內(nèi)設(shè)計(jì)。雖然簡化的內(nèi)容看起來更美觀，但是最大值下的設(shè)計(jì)思考才能避免上線后的誤差。
界面設(shè)計(jì)配色需要考慮用戶長時(shí)間的預(yù)覽體驗(yàn)，高飽和度的配色不適合長時(shí)間觀看，容易造成視覺疲勞。適當(dāng)降低飽和度使得配色更加舒適，有利于提升用戶預(yù)覽體驗(yàn)度。
在圖片上面展示文案時(shí)，需要考慮圖片對(duì)于文案信息的干擾度。為了防止復(fù)雜場(chǎng)景的圖片干擾信息傳遞，需要在信息區(qū)域添加漸變蒙版，以此來降低對(duì)于信息的干擾度。
需要突出圖標(biāo)的空間占比時(shí)，放大圖標(biāo)會(huì)顯得視覺焦點(diǎn)太強(qiáng)，也容易暴露圖標(biāo)繪制的缺點(diǎn)而顯得粗糙。添加統(tǒng)一的造型和背景色，可以突出小圖標(biāo)的空間占比，提升感官體驗(yàn)。
在主界面或者一些特殊場(chǎng)景中，需要對(duì)按鈕添加漸變色時(shí)，最好選擇近似色等鄰近范圍的配色，會(huì)使得視覺效果更加和諧、舒適。
按鈕設(shè)計(jì)需要考慮在不同環(huán)境下的適應(yīng)度，確保用戶可以一目了然的發(fā)現(xiàn)它。在白色背景、淺色背景、深色背景中都要形成配色對(duì)比，始終保持按鈕與背景的高對(duì)比度和可讀性。
淺色背景的卡片、按鈕、標(biāo)簽、圖片或者其他元素等，在白色背景中都不適合添加投影。投影使得視覺效果對(duì)比模糊，畫面表現(xiàn)不夠干凈、通透，去掉投影反而更加清晰自然。
以上案例屬于 120+ 案例中隨機(jī)挑選的 10 個(gè)作為示意，該系列案例也會(huì)持續(xù)更新。希望大家可以從這些案例中獲得一些設(shè)計(jì)經(jīng)驗(yàn)，助力設(shè)計(jì)輸出，能夠做出更好的設(shè)計(jì)作品。經(jīng)驗(yàn)屬于個(gè)人職場(chǎng)和教學(xué)中的沉淀，如有不足歡迎留言補(bǔ)充。
作者：黑馬青年
鏈接：https://www.zcool.com.cn/article/ZMTYyNjg0NA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
