激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

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

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

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

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

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

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

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

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

1顏色：

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

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

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

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

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

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

2粗細(xì)：

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

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

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


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

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

那是因?yàn)榘咨⒒疑氖褂檬箤Ρ榷冉档汀?/p>

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

使用彩色背景時，有兩種方法可以降低對比度：

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

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

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

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

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

三、去掉陰影

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

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

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

四、不要使用太多的邊框

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

1.使用邊框陰影

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

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

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

3.增加額外的間距

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

五、不要刪掉那些小的圖標(biāo)

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

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

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

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

一個簡單技巧是在界面的某些部分添加色彩鮮艷的邊框

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

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

......甚至在整個布局的頂部：

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

七、并非每個按鈕都需要背景顏色

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

像Bootstrap這樣的框架通過語義樣式菜單來做，無論何時添加新按鈕，都可以選擇：

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

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

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

頁面上的每個操作都位于重要金字塔的某個位置。大多數(shù)頁面只有一個真正的主要動作，一些不太重要的次要動作，以及一些很少使用的三級動作。

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

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

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

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

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

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

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

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

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定