本篇將介紹UI界面的設(shè)計(jì)細(xì)節(jié)，從UI的頭像、按鈕、卡片排版、文字排版4個(gè)方面，帶來(lái)26個(gè)實(shí)實(shí)在在好用的設(shè)計(jì)技巧，相信看完后，大家都能快速上手應(yīng)用到實(shí)際工作中。
建議收藏起來(lái)，方便隨時(shí)查看～
用戶頭像篇
關(guān)于用戶頭像這個(gè)板塊的信息，如果采用昵稱(chēng)向上對(duì)齊，ID向下對(duì)齊的方式，兩塊內(nèi)容就會(huì)很分散，不夠聚焦。
如果頭像和背景的顏色有一部分接近或者顏色一樣，看起來(lái)會(huì)感覺(jué)頭像好像少了一塊，例如左圖。為頭像框添加描邊，讓頭像更有整體性，還可以讓文案對(duì)比更明顯，頁(yè)面看起來(lái)也會(huì)更精致。
當(dāng)用戶使用手機(jī)注冊(cè)登錄后，新用戶沒(méi)有頭像的情況下，就要給一個(gè)默認(rèn)頭像，或者使用品牌IP形象，增加用戶的品牌記憶。
按鈕篇
當(dāng)一個(gè)頁(yè)面有兩個(gè)操作按鈕時(shí)，可以區(qū)分出來(lái)一個(gè)最重要的按鈕，引導(dǎo)用戶更容易去進(jìn)行選擇。
當(dāng)彈窗背景是白色的時(shí)候，會(huì)有點(diǎn)空蕩的感覺(jué)，顯得細(xì)節(jié)不夠，可以為背景豐富細(xì)節(jié)，增加耐看程度。
當(dāng)使用亮色按鈕時(shí)，如果文字也比較亮，識(shí)別度就會(huì)很差。識(shí)別度對(duì)比一定要明顯，亮底暗字，暗底亮字，畫(huà)面一定不能出現(xiàn)識(shí)別模糊的情況。
登錄板塊，在用戶未輸入的狀態(tài)下，登錄/注冊(cè)按鈕呈現(xiàn)置灰狀態(tài)，給人不可點(diǎn)擊的感覺(jué)。輸入信息后，激活登錄按鈕高亮狀態(tài)，這樣可以更清晰地引導(dǎo)用戶操作下一步。
在這樣的登錄狀態(tài)中，輸入后與未輸入的文字顏色需要給予一定的區(qū)分，這樣便于用戶區(qū)分哪些是填寫(xiě)和未填寫(xiě)的。在輸入框可以增加對(duì)應(yīng)的icon ，讓整體感覺(jué)更豐富。
卡片排版篇
關(guān)于投影的使用技巧，盡量選擇顏色微淺或者和卡片顏色相近的投影。左圖的投影使用比較深的顏色，會(huì)讓畫(huà)面太過(guò)沉重。
在圖文式卡片排版的場(chǎng)景中，圖片占比內(nèi)容區(qū)域大，能起到突出重點(diǎn)的作用。
右圖內(nèi)容少的時(shí)候使用的是黃金分割比法則 0.618:1的比例。當(dāng)內(nèi)容多的時(shí)候，左圖的布局也不錯(cuò)，瀑布流排下去能避免過(guò)于死板。
卡片上有過(guò)多的小標(biāo)簽時(shí)，可以加一個(gè)淡色的底，這樣不會(huì)給人文案很多的感覺(jué)，整體視覺(jué)不會(huì)很分散，且層級(jí)更加分明，讓用戶更快速的找到自己需要的信息。
卡片背景直接排上文案，背景會(huì)顯得很空，沒(méi)有層次和細(xì)節(jié)。所以在做背景的時(shí)候，適當(dāng)加上一些細(xì)節(jié)，就會(huì)顯得耐看很多。
文案直接加在圖片上時(shí)，要去對(duì)應(yīng)地處理圖片，例如給圖片加一個(gè)蒙版，這樣就不會(huì)導(dǎo)致文字的顏色和圖片疊加在一起看不清的情況。
在做效果圖的時(shí)候，有圖片需要添加到設(shè)計(jì)稿中，盡量選擇搭配起來(lái)比較和諧的圖片，比如：飽和度、色相、亮度等盡量保持差不多的感覺(jué)，這樣看起來(lái)會(huì)增加設(shè)計(jì)稿中的整體一致。
在有多個(gè)板塊需要做成滑動(dòng)的時(shí)候，需要留出一個(gè)被遮住的板塊，代表還有內(nèi)容可以滑動(dòng)。在左圖中，多個(gè)板塊剛好做成一個(gè)寬度的內(nèi)容，那么用戶不知道后面還有內(nèi)容可以滑動(dòng)。
文字排版篇
文字行間距的把控，對(duì)于較大的文字，行間距通常來(lái)說(shuō)采用文字大小1.5倍的間距，文字較小時(shí)使用1.2倍的間距會(huì)比較合適。通常情況下，我會(huì)設(shè)置比1.5倍還大一些的間距，文字行間距太小不易于用戶閱讀，可適具體情況而定。
當(dāng)主標(biāo)題和副文案一樣長(zhǎng)的時(shí)候，整體會(huì)顯得很呆板，且看著是一團(tuán)字的感覺(jué)，這時(shí)就可以讓標(biāo)題和副標(biāo)題之間產(chǎn)生長(zhǎng)短不一的顯示，就不會(huì)那么呆板。
在卡片上排列信息時(shí)，需要用到線條的時(shí)候，線太深給人感覺(jué)分割會(huì)很明顯，把線的顏色調(diào)淺，有一點(diǎn)感覺(jué)在會(huì)比較好。
接著上面的信息排列，另一種方案是可以把線去掉，增加上下兩者的間距，擴(kuò)大留白也可以起到拉開(kāi)信息之間的板塊區(qū)分，讓整個(gè)畫(huà)面更加簡(jiǎn)潔和干凈。
信息已填寫(xiě)與未填寫(xiě)的一個(gè)區(qū)分，已填寫(xiě)過(guò)的信息用深一些的顏色，未填寫(xiě)的信息用淺一些的顏色，這樣利于用戶更快速找到需要修改和填寫(xiě)的信息。
對(duì)于導(dǎo)航選中的欄目，選中的信息顯示和其他的欄目對(duì)比要拉開(kāi)。對(duì)比弱的話，用戶一眼看不出來(lái)當(dāng)前選擇的導(dǎo)航欄目是哪一個(gè)。針對(duì)選中的欄目，可以根據(jù)品牌形象去做延展，建立品牌認(rèn)知感。
面對(duì)內(nèi)容過(guò)多的場(chǎng)景，分別將兩組信息排在畫(huà)面里，例如左圖，會(huì)感覺(jué)整個(gè)畫(huà)面信息很多，而且很分散。
在右邊的排版中，加了一層背景包裹起來(lái)分別對(duì)應(yīng)的信息時(shí)，會(huì)讓信息層級(jí)更加分明。
圖標(biāo)和文字搭配的情況下，為圖標(biāo)加一個(gè)底色，可以讓該頁(yè)面圖標(biāo)的大小視覺(jué)保持一致，也會(huì)給予其重心的承載作用。
在需要突出信息的時(shí)候，左圖的排版方式并沒(méi)有達(dá)到需要突出的信息，看不到重要的信息。如前面所說(shuō)，在做信息層級(jí)的時(shí)候?qū)Ρ纫欢ㄒ_(kāi)，才能突出最重要的信息，讓用戶一眼get到主要信息。
文案信息板塊的排版，當(dāng)文案層級(jí)對(duì)比不是很明顯的時(shí)候，如第三種，居中排列文案，會(huì)使閱讀體驗(yàn)很差，視覺(jué)參差不齊的循環(huán)。當(dāng)文案層級(jí)比較明顯的時(shí)候，居中對(duì)齊也是一種比較好的方式。
當(dāng)文案標(biāo)題需要加硬投影的時(shí)候，亮字下應(yīng)該加顏色較暗的投影，例如右圖。如果亮字下面的投影顏色還是很亮，會(huì)出現(xiàn)標(biāo)題文案識(shí)別不清晰，對(duì)比度不足。
最后
以上就是全部的UI/UX設(shè)計(jì)技巧，希望通過(guò)這些技巧能夠讓你對(duì)界面設(shè)計(jì)加入更多思考，打造更好用的產(chǎn)品！
另外推薦大家去「下雨天DS」主頁(yè)查看更多內(nèi)容：myandy.zcool.com.cn
慢慢來(lái)比較快，如覺(jué)得有幫助，
