亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢(xún)電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

7個(gè)UI設(shè)計(jì)小技巧— 今天你get了嗎?

發(fā)布時(shí)間：2024-01-24 17:44:11 瀏覽量：242次

對(duì)于新手ui設(shè)計(jì)師或前端來(lái)說(shuō)，也許你所在的公司沒(méi)有牛逼的UI設(shè)計(jì)師，或者是需要前端自己進(jìn)行UI界面的視覺(jué)優(yōu)化。

你肯定崩潰的說(shuō)：“我又不是設(shè)計(jì)師，我做成這樣已經(jīng)很不錯(cuò)了！”但事實(shí)證明我們可以不需要更多藝術(shù)背景也可以用很多小技巧來(lái)提升你的設(shè)計(jì)水平。

以下UI設(shè)計(jì)種的七個(gè)小技巧：

一、使用字體的顏色和粗細(xì)來(lái)創(chuàng)建界面層次結(jié)構(gòu)

一般我們所看到的UI樣式文本都是用字體的大小來(lái)控制界面層次結(jié)構(gòu)。

1顏色：

“這個(gè)文字很重要嗎？讓我們更大膽。”

“這個(gè)文字是次要的嗎？讓我們用淺色?！?/p>

嘗試并使用兩種或三種顏色：

主要內(nèi)容的深色（但不是黑色）（可以是#333）

二級(jí)內(nèi)容的灰色（可以是#666）

輔助內(nèi)容的淺灰色（可以是#999 ddd 等）

2粗細(xì)：

兩種字體的粗細(xì)通常足以應(yīng)付日常UI工作：

正常字體的粗細(xì)（很多正文的選擇）

強(qiáng)調(diào)的文本可以使用更粗的字體（很多標(biāo)題字體的選擇）


二、不要在彩色背景上使用灰色文字

我們經(jīng)常會(huì)在白色背景下用淺灰色的字體，但如果是彩色背景下用淺灰色的字體，并不好看。

那是因?yàn)榘咨?、灰色的使用使?duì)比度降低。

而文本更接近背景顏色實(shí)際上有助于創(chuàng)建層次結(jié)構(gòu)，而不是使字體變?yōu)闇\灰色。

使用彩色背景時(shí)，有兩種方法可以降低對(duì)比度：

1.降低白色文本的不透明度

使用白色文本并降低不透明度。這樣可以使背景顏色稍微滲透，以不與背景沖突的方式去強(qiáng)調(diào)文本。

2.自行選擇基于背景顏色的文本顏色

當(dāng)背景是圖像或圖案時(shí)，或者當(dāng)降低不透明度使文本感覺(jué)太鈍或褪色時(shí)，這比減少不透明度更好。

選擇與背景色調(diào)相同的顏色，調(diào)整飽和度和亮度，直到它看起來(lái)不錯(cuò)。

三、去掉陰影

不是使用較大的模糊和展開(kāi)值來(lái)使框陰影更加明顯，而是添加垂直偏移。

它看起來(lái)更自然，因?yàn)樗M了從上面照射下來(lái)的光源，就像我們以前在現(xiàn)實(shí)世界中看到的一樣。

這適用于可能在表格輸入上使用的插入陰影：

四、不要使用太多的邊框

雖然使用邊框可以更好的區(qū)分兩個(gè)元素，但它并不是唯一的方法，我們可以使用其他的辦法來(lái)實(shí)現(xiàn)：

1.使用邊框陰影

邊框陰影可以很好地勾勒出像邊框一樣的元素，它可以更精細(xì)并實(shí)現(xiàn)相同的目標(biāo)而不會(huì)分散注意力。

2.使用兩種不同的背景顏色

我們可以為相鄰元素提供稍微不同的背景顏色使它們之間進(jìn)行區(qū)分。

3.增加額外的間距

有什么更好的方法來(lái)創(chuàng)建元素之間的分離而不是簡(jiǎn)單地增加分離？我們可以創(chuàng)建元素組。

五、不要?jiǎng)h掉那些小的圖標(biāo)

選擇圖標(biāo)的時(shí)候，雖然都是矢量的文件，我們?cè)黾映叽?，質(zhì)量不會(huì)受到影響，但是當(dāng)我們將它們拉到預(yù)期尺寸的3倍或4倍時(shí)，以16-24px繪制的圖標(biāo)看起來(lái)永遠(yuǎn)不會(huì)非常專(zhuān)業(yè)。他們?nèi)狈?xì)節(jié)，總是感到不成比例的“矮胖”。

如果已經(jīng)獲得了小圖標(biāo)，可以將它們包含在另一個(gè)形狀中。

這可以使實(shí)際圖標(biāo)更接近其預(yù)期大小，同時(shí)仍然填充更大的空間。

六、使用重點(diǎn)邊框?yàn)槠降脑O(shè)計(jì)增添色彩

一個(gè)簡(jiǎn)單技巧是在界面的某些部分添加色彩鮮艷的邊框

例如，在警告消息的旁邊：

...或突出顯示活動(dòng)導(dǎo)航項(xiàng)：

......甚至在整個(gè)布局的頂部：

它不需要任何圖形設(shè)計(jì)人才來(lái)為您的UI添加彩色矩形，它可以大大有助于使你的網(wǎng)站更“設(shè)計(jì)”。

七、并非每個(gè)按鈕都需要背景顏色

當(dāng)用戶(hù)可以在頁(yè)面上執(zhí)行多個(gè)操作時(shí)，我們可以區(qū)分不同的按鈕。

像Bootstrap這樣的框架通過(guò)語(yǔ)義樣式菜單來(lái)做，無(wú)論何時(shí)添加新按鈕，都可以選擇：

“這是一個(gè)積極的行動(dòng)嗎？將按鈕設(shè)為綠色。”

“這會(huì)刪除數(shù)據(jù)嗎？將按鈕設(shè)為紅色?！?/p>

語(yǔ)義是按鈕設(shè)計(jì)的一個(gè)重要部分，但是有一個(gè)更常見(jiàn)的重要維度：層次結(jié)構(gòu)。

頁(yè)面上的每個(gè)操作都位于重要金字塔的某個(gè)位置。大多數(shù)頁(yè)面只有一個(gè)真正的主要?jiǎng)幼鳎恍┎惶匾拇我獎(jiǎng)幼鳎约耙恍┖苌偈褂玫娜?jí)動(dòng)作。

在設(shè)計(jì)這些操作時(shí)，在層次結(jié)構(gòu)中傳達(dá)它們的位置非常重要。

主要行動(dòng)應(yīng)該是明顯的。堅(jiān)固，高對(duì)比度的背景色可以在這里使用。

次要行動(dòng)應(yīng)該清楚但不突出。輪廓樣式或較低對(duì)比度的背景顏色是很好的選擇。

三級(jí)行動(dòng)應(yīng)該是可發(fā)現(xiàn)的，但不引人注目。像鏈接一樣設(shè)置這些操作通常是最好的方法。

“破壞性的行動(dòng)怎么樣，他們不應(yīng)該總是變紅嗎？”

不必要！如果破壞性操作不是頁(yè)面上的主要操作，則最好為其提供二級(jí)或三級(jí)按鈕處理。

保存大，紅色和粗體樣式，以便當(dāng)負(fù)面操作實(shí)際上是界面中的主要操作時(shí)，就像在確認(rèn)對(duì)話框中一樣：

以上這些技能，你get到了嗎？

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定