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

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

UI設(shè)計小技巧

發(fā)布時間：2024-04-03 11:49:36 瀏覽量：162次

一、不會過度依賴字體大小去區(qū)分等級，而是恰當(dāng)?shù)氖褂么旨毢皖伾?/p>

1.重要的就讓它粗一點，次要就顏色淺一點

2.盡量保持在2-3種顏色：

用深色（不是黑色）來表示首要的內(nèi)容，例如文章的標(biāo)題。用更淺的灰色來表示輔助文本，例如頁腳的版權(quán)信息等等。

3.兩種字體粗細對于UI界面來說足夠了。

大多數(shù)文本使用正常字體粗細（400或500，具體取決于字體），重點強調(diào)的文本使用更粗一些的字體（600或者700）

注意的是：不要使用400以下的字體粗細，因為它只有在較大的字號如標(biāo)題這種才有效果，在小號字體上表現(xiàn)的非常不明顯，如果你想用更細的字來表示更次要的文本，可以使用更淺的顏色或者小一號的字體大小。

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

在白色背景下使用較淺一些的灰色來表示次要文本是一種不錯的選擇，但是在有顏色的背景下就不太好了。這是因為我們實際看到的灰色在白色背景下的效果是降低對比度。要想視覺上讓文本的呈現(xiàn)次要等級效果，應(yīng)該要讓文字顏色更接近背景色，而不是用灰色，以達到降低對比度的效果。

在彩色背景下，你可以采用一下兩種方式來降低對比度：

1.降低白色字的透明度 - 適當(dāng)降低字的透明度，讓背景顏色稍微滲透一些，這樣即達到了弱化的效果又不會與背景相互沖突。

2.手動選擇一個接近背景顏色的字體顏色。當(dāng)你的背景是圖形或者圖片的時候，這種方式比用透明度要好，因為透明度看起來會更死板像是褪色的感覺。選擇一個跟背景色的色調(diào)相同的顏色，調(diào)整飽和度和明度直到你覺得合適為止。

三、設(shè)置陰影偏移

與其用大塊的陰影模糊去強調(diào)盒子，不如使用垂直方向上的偏移量。它看起來會更加的自然，因為它模擬的是燈光從上往下照射在物體上的投射，更接近我們在現(xiàn)實中看到的場景。這個小技巧同樣也適用于input。

如果你想了解更多關(guān)于陰影設(shè)計的東西，可以看看 Material Design Guidelines。

四、少用點邊框

當(dāng)你想要在兩個區(qū)塊之間做分隔的時候，不要第一時間就想著用邊框。當(dāng)然，邊框確實是很好的用來分割的方式，但是它不是唯一的方式啊，過多的使用邊框會讓你的設(shè)計看起來雜亂。

下次當(dāng)你想用邊框的時候，不妨試試下面這幾個：

1. 使用盒子陰影 - 盒子陰影實現(xiàn)的效果和邊框基本相同，但是它呈現(xiàn)的效果會更微妙一些，沒有邊框那么讓人分心。

2. 用兩種不同的背景色 - 只要給元素稍微加一點背景顏色的不同，就能呈現(xiàn)分割的效果了，你可以嘗試去掉兩個不同背景色之間的邊框，其實根本不需要呢。

3. 增加額外空間 - 還有什么比給元素之間增加空間更能體現(xiàn)分隔效果的呢？制造一點空間讓元素互相遠離，就能很好的達到分隔效果，也不需要引入其他的UI元素。

五、不要把小圖標(biāo)放大

當(dāng)你在某個地方需要用到大的圖標(biāo)的時候（比如登錄頁的功能部分），你可能立馬就去用免費的字體圖標(biāo)庫如 Font Awesome 之類的，然后調(diào)整字號大小，達到你需要的效果。

矢量圖像即便是被放大也不會影響圖像質(zhì)量，但是 實際大小為16–24px的圖標(biāo)被放大3-4px之后，看上去會非常的不專業(yè)，缺乏細節(jié)，看上去十分笨重。

如果你只有小號的圖標(biāo)，可以把它包裹在一個有背景色的大色塊里面，這樣既不影響圖標(biāo)的顯示效果，又能占據(jù)更大的空間。

如果你有足夠的預(yù)算，也可以使用一些額外收費的圖標(biāo)，比如 Heroicons 或者 Iconic。

六、使用鮮明的邊框為平淡的設(shè)計增添色彩

如果你不是專業(yè)的設(shè)計師，你的界面也沒有也很平淡，沒有優(yōu)美的插圖或者照片來裝飾，如何為頁面增添一點風(fēng)味呢？

有一個效果很顯著的小技巧就是為簡單的頁面添加粗重的邊框，高亮導(dǎo)航欄元素，這樣可以減少頁面的乏味感。


這種方式不需要你有什么設(shè)計就能改善頁面UI，讓頁面看起來更有設(shè)計感。

如果你不知道如何選擇顏色，網(wǎng)上也有很多色系搭配方案可供選擇，或者試試 Dripple的顏色選擇，讓你從傳統(tǒng)顏色選擇器無窮無盡的可能中解脫出來。

七、不是所有的按鈕都需要背景色

當(dāng)一個頁面上有很多需要用戶操作的按鈕時，很容易就陷入一種錯誤，就是完全根據(jù)語義來設(shè)計這些操作按鈕的顏色。Bootsrap框架從某種程度上鼓勵了這種行為，當(dāng)你引入一個button的時候，有一排不同語義的不同顏色的按鈕供你選擇。

誠然，語義也是按鈕設(shè)計中必不可少的一個因素，但還有另外一個維度卻被忽略了，那就是層級。

在一個頁面的里面，操作按鈕的層級就像金字塔一樣分布，有一個最高級別的操作，和一些次要操作，以及一些不怎么使用的三次操作。操作的層級在設(shè)計按鈕的時候必須明顯的體現(xiàn)出來：

首要操作必須明顯 - 高對比度的背景顏色適用于這里。次要操作應(yīng)該表現(xiàn)清晰但不用太突出- 邊框樣式或者低對比度的背景色適用于這里。三級次要操作應(yīng)該是可被發(fā)現(xiàn)但不引人注目的 - 把這些操作當(dāng)成 link鏈接的樣式來處理會比較好。


如有侵權(quán)，請聯(lián)系刪除

原文轉(zhuǎn)自
https://www.cnblogs.com/PeriHe/p/9717091.html

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

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