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

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

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

建議收藏起來(lái)，方便隨時(shí)查看～

  用戶(hù)頭像篇

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

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

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

  按鈕篇

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

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

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

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

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

  卡片排版篇

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