在設(shè)計(jì)界面和UI組件時(shí)，很容易被所有要做出的設(shè)計(jì)選擇所淹沒(méi)。有時(shí)，UI 設(shè)計(jì)在您一遍又一遍地調(diào)整它直到感覺(jué)恰到好處之前并不完全有效。 就像一幅畫(huà)是由成千上萬(wàn)個(gè)簡(jiǎn)單的筆觸組成的一樣，一個(gè)好的 UI 設(shè)計(jì)是由無(wú)數(shù)個(gè)小細(xì)節(jié)組成的，這些細(xì)節(jié)為用戶帶來(lái)輕松愉快的體驗(yàn)。天健世紀(jì)科技小編整理出了一篇關(guān)于UI設(shè)計(jì)應(yīng)該重視的小細(xì)節(jié)知識(shí)，一起來(lái)學(xué)習(xí)提高我們的 UI 設(shè)計(jì)技能吧~
01
關(guān)于用戶頭像這個(gè)板塊的信息，如果昵稱和ID都靠向上和向下對(duì)齊，內(nèi)容就會(huì)很分散，不夠聚焦。
02
依然是關(guān)于頭像板塊這里的，如果頭像和背景的顏色有一部分接近或一樣，就會(huì)感覺(jué)頭像好像缺少了一塊，加一個(gè)描邊就會(huì)使其更有整體性。以及文案對(duì)比更加明顯，能增加其突出的點(diǎn)，頁(yè)面也會(huì)更加精致。
03
當(dāng)用戶使用手機(jī)注冊(cè)登錄后，新用戶沒(méi)有頭像的情況，就要給一個(gè)默認(rèn)頭像的展示，或者使用品牌IP形象，增強(qiáng)用戶的品牌記憶。
04
關(guān)于投影的使用技巧，盡量選擇顏色微淺以及和卡片顏色相近的投影，如右邊的投影使用比較深的顏色，會(huì)使畫(huà)面太過(guò)沉重。
05
文字的行間距把控，較大的文字，行間距的大概距離正常來(lái)說(shuō)使用文字1.5倍的間距，文字較小使用1.2倍的間距會(huì)比較合適，通常情況下，我會(huì)比1.5倍的間距還會(huì)設(shè)置大一些，文字行間距太小不易于用戶閱讀，可適具體情況而定。
06
當(dāng)有兩個(gè)按鈕要操作的時(shí)候，可以區(qū)分出一個(gè)最重要的按鈕出來(lái)，引導(dǎo)用戶更容易的去進(jìn)行選擇。
07
當(dāng)這樣一個(gè)卡片就是白色的時(shí)候，會(huì)有點(diǎn)空蕩的感覺(jué)，顯得不夠有細(xì)節(jié)，于是可以豐富一下背景的細(xì)節(jié)，增加耐看的程度。
08
當(dāng)使用按鈕比較亮的時(shí)候，文字也比較亮，識(shí)別度就會(huì)很差，識(shí)別度對(duì)比一定要明顯，亮底暗字，暗底亮字，畫(huà)面一定不能出現(xiàn)識(shí)別模糊的情況。
09
在圖文式卡片排版的場(chǎng)景中，圖片占比內(nèi)容區(qū)域大，會(huì)起到突出重點(diǎn)的作用，右邊這里內(nèi)容少的時(shí)候使用的是黃金分割比法則0.618:1的比例，當(dāng)內(nèi)容多的時(shí)候，左邊這樣的布局好像也不錯(cuò)。這樣的瀑布流排下去能避免過(guò)于死板。
10
板塊小優(yōu)化，當(dāng)有過(guò)多的小標(biāo)簽時(shí)，可以加一個(gè)淡一點(diǎn)的底，這樣整體感覺(jué)不會(huì)給人文案很多的感覺(jué)，整體視覺(jué)也不會(huì)很分散，且層級(jí)更加分明，讓用戶更快速的找到自己需要的信息。
11
登錄板塊，在用戶未輸入的狀態(tài)下，登錄/注冊(cè)按鈕呈現(xiàn)暗的狀態(tài)，給人不可點(diǎn)擊的感覺(jué)在輸入后，激活登錄按鈕的高亮狀態(tài)，這樣可以更清晰的去引導(dǎo)用戶去操作下一步。
12
在這樣的登錄狀態(tài)中，輸入后與未輸入的文字，顏色要給予一定的區(qū)分，這樣就可以便于用戶區(qū)分哪些是填寫(xiě)和未填寫(xiě)的;在輸入框可以增加對(duì)應(yīng)的icon，讓整體感覺(jué)更豐富。
13
當(dāng)主標(biāo)題和副文案一樣長(zhǎng)的時(shí)候，整體會(huì)顯得很呆板，且看著就是一團(tuán)字的感覺(jué)，這時(shí)就可以讓標(biāo)題和副標(biāo)題之前產(chǎn)生長(zhǎng)短不一的顯示，就不會(huì)那么呆板。
14
卡片背景直接排上文案，背景就會(huì)很空蕩，沒(méi)有層次和細(xì)節(jié)，在做背景的時(shí)候，適當(dāng)加上一些細(xì)節(jié)，就會(huì)顯得耐看很多。
15
文案直接加在圖片上的時(shí)候，要去對(duì)應(yīng)的處理圖片，給圖片加一個(gè)蒙版，這樣就不會(huì)導(dǎo)致字的顏色和圖片疊加在一起的時(shí)候看不清。
16
在卡片上排列信息時(shí)，需要用到線條的時(shí)候，線太深會(huì)給人感覺(jué)分割會(huì)很明顯，把線的顏色調(diào)淺一點(diǎn)，有一點(diǎn)感覺(jué)在就會(huì)比較好。
17
繼續(xù)上面的一個(gè)信息排列，另外一種排列方案，也可以把線去掉，增大兩者之間的間距大留白也可以起到拉開(kāi)信息之間的板塊區(qū)分，讓整個(gè)畫(huà)面更加簡(jiǎn)潔和干凈。
18
關(guān)于信息填寫(xiě)過(guò)與未填寫(xiě)的一個(gè)區(qū)分，已填寫(xiě)過(guò)的信息，用深一點(diǎn)的顏色區(qū)分和未填寫(xiě)的用淺一點(diǎn)的顏色，這樣利于用戶更快速的找到需要修改和填寫(xiě)的信息。
19
關(guān)于導(dǎo)航選中的欄目，選中的信息顯示要和其他的欄目對(duì)比要拉開(kāi)，對(duì)比弱的話，用戶一眼看不出來(lái)當(dāng)前選擇的導(dǎo)航欄目是哪一個(gè)，針對(duì)選中的欄目，可以根據(jù)品牌形象去做延展，建議品牌認(rèn)知感。
20
在做內(nèi)容信息過(guò)多的時(shí)候，分別的獎(jiǎng)兩組信息排在畫(huà)面里，如左邊這個(gè)，就會(huì)感覺(jué)整個(gè)畫(huà)面信息很多，很分散，如右邊，加了一層底包表起來(lái)分別對(duì)應(yīng)的信息時(shí)，就會(huì)讓信息層級(jí)更加分明。
21
在做效果圖的時(shí)候，有圖片需要添加到設(shè)計(jì)稿中，盡量選擇一些一起搭配起來(lái)比較和諧的圖片，比如:飽和度、色相、亮度等盡量保持差不多的感覺(jué)，這樣看起來(lái)會(huì)增加設(shè)計(jì)稿中的整體一致。
22
圖標(biāo)和文字搭配的情況下，將圖標(biāo)加一個(gè)底色，可以更加的讓該頁(yè)面的圖標(biāo)大小視覺(jué)保持一致，也會(huì)給予其重心的承載作用。
23
在需要突出信息的時(shí)候，如左圖排列，并沒(méi)有達(dá)到需要該突出的信息，看不到重要的信息，就如前面說(shuō)的，在做信息層級(jí)，對(duì)比一定要拉開(kāi)，才能突出最重要的信息，讓用戶一眼get到主要信息。
24
在有多個(gè)板塊需要做成滑動(dòng)的時(shí)候，需要留出一個(gè)被遮住的板塊，代表還有內(nèi)容可以滑動(dòng)如左圖，有多個(gè)板塊的時(shí)候，剛好做成一個(gè)寬度的內(nèi)容，那么用戶不知道后面還有內(nèi)容可以滑動(dòng)。
25
文案信息板塊排版，當(dāng)文案層級(jí)對(duì)比不是很明顯的時(shí)候，如第三種，居中排列文案，就會(huì)使閱讀體驗(yàn)很差，視覺(jué)參差不齊的循環(huán)，當(dāng)文案層級(jí)比較明顯的時(shí)候，居中對(duì)齊也是一種比較好的方式。
26
當(dāng)文案標(biāo)題需要加硬投影的時(shí)候，亮字暗投影，亮字亮投影的話，就會(huì)出現(xiàn)標(biāo)題文案識(shí)別不清晰，也就是之前講到的對(duì)比度問(wèn)題。
微信公眾號(hào)
業(yè)務(wù)咨詢：400-9969-069（24小時(shí)服務(wù)） 028-86052918
售后熱線：028-86052836
公司地址：成都市武侯區(qū)天益街38號(hào)理想中心3棟1810
