別小看簡單的UI界面，排版細(xì)節(jié)決定UI的質(zhì)感！

2025-05-30 點(diǎn)擊量：

本篇將介紹UI界面的設(shè)計細(xì)節(jié)，從UI的頭像、按鈕、卡片排版、文字排版4個方面，帶來26個實(shí)實(shí)在在好用的設(shè)計技巧，相信看完后，大家都能快速上手應(yīng)用到實(shí)際工作中。

建議收藏起來，方便隨時查看～

  用戶頭像篇

關(guān)于用戶頭像這個板塊的信息，如果采用昵稱向上對齊，ID向下對齊的方式，兩塊內(nèi)容就會很分散，不夠聚焦。

如果頭像和背景的顏色有一部分接近或者顏色一樣，看起來會感覺頭像好像少了一塊，例如左圖。為頭像框添加描邊，讓頭像更有整體性，還可以讓文案對比更明顯，頁面看起來也會更精致。

當(dāng)用戶使用手機(jī)注冊登錄后，新用戶沒有頭像的情況下，就要給一個默認(rèn)頭像，或者使用品牌IP形象，增加用戶的品牌記憶。

  按鈕篇

當(dāng)一個頁面有兩個操作按鈕時，可以區(qū)分出來一個最重要的按鈕，引導(dǎo)用戶更容易去進(jìn)行選擇。

當(dāng)彈窗背景是白色的時候，會有點(diǎn)空蕩的感覺，顯得細(xì)節(jié)不夠，可以為背景豐富細(xì)節(jié)，增加耐看程度。

當(dāng)使用亮色按鈕時，如果文字也比較亮，識別度就會很差。識別度對比一定要明顯，亮底暗字，暗底亮字，畫面一定不能出現(xiàn)識別模糊的情況。

登錄板塊，在用戶未輸入的狀態(tài)下，登錄/注冊按鈕呈現(xiàn)置灰狀態(tài)，給人不可點(diǎn)擊的感覺。輸入信息后，激活登錄按鈕高亮狀態(tài)，這樣可以更清晰地引導(dǎo)用戶操作下一步。

在這樣的登錄狀態(tài)中，輸入后與未輸入的文字顏色需要給予一定的區(qū)分，這樣便于用戶區(qū)分哪些是填寫和未填寫的。在輸入框可以增加對應(yīng)的icon ，讓整體感覺更豐富。

  卡片排版篇

關(guān)于投影的使用技巧，盡量選擇顏色微淺或者和卡片顏色相近的投影。左圖的投影使用比較深的顏色，會讓畫面太過沉重。