一、使用顏色和粗細來創(chuàng)建層次結構，而不是字體大小

對UI文本進行樣式設計時常犯的一個錯誤是過于依賴字體大小來控制層次結構。

“這段文字是重要的嗎？讓它大一點。 ”

“這段文字是次要的？讓它小一點。 ”

不要將所有繁重的工作都留在字號上，而是嘗試使用顏色或字重來實現(xiàn)相同效果。

“這段文字是重要的嗎？讓它粗一點。 ”

“這段文字是次要的？讓它細一點。 ”

嘗試并堅持兩種或三種顏色：

1.主要內容的深色（但不是黑色，如：文章的標題）；
2.次要內容灰色（如文章發(fā)表日期）；
3.輔助內容的淺灰色（可能是頁腳中的版權聲明）。

UI設計上遠離字重不超過400的字體 ，他們可以用在大標題上，但在較小的字號下不易于閱讀。如果您正在考慮使用較輕的重量來淡化某些文字，請改為使用較淺的顏色或較小的字體。

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

使文本變?yōu)闇\灰色，是在白色背景上淡化它的好方法，但在彩色背景上看起來并不太好。這是因為我們實際看到白色灰色的效果是對比度降低，使文本更接近背景色實際上有助于創(chuàng)建層次結構，而不是使它變成淺灰色。

處理彩色背景時有兩種方法可以降低對比度：

（1）減少白色文字的不透明度

使用白色文字并降低不透明度，這可以讓背景顏色滲透一點點，以不與背景沖突的方式減弱文字。

（2）選擇基于背景色的顏色

當您的背景是圖像或圖案時，或者當減少不透明度會使文字感覺過于枯燥或不適應時，這會比減少不透明度效果更好。

選擇與背景色調相同的顏色，調整飽和度和亮度，直到看起來合適。

三、偏移陰影

不要使用較大的模糊和擴散值來使框陰影更明顯，請?zhí)砑哟怪逼啤Ｋ雌饋砀匀唬驗樗M了像我們以前在現(xiàn)實世界中看到的那樣從上方照射下來的光源。

四、盡量少使用邊框

當你需要在兩個元素之間創(chuàng)建分隔時，雖然邊框是區(qū)分兩個元素的好方法，但它們并不是唯一的方法，而使用它們太多會讓你的設計變得擁擠和混亂。

下一次你發(fā)現(xiàn)自己到達邊境時，請嘗試以下其中一個想法：

（1）使用盒子陰影

盒子陰影在繪制像邊框這樣的元素方面做得非常出色，但是可以更加微妙并且完成相同的目標而不會讓人分心。

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

通常只需將相鄰元素的背景顏色略有不同，就可以在它們之間進行區(qū)分。如果您已經在邊框上使用不同的背景顏色，請嘗試刪除邊框，你可能不需要它。

（3）添加額外的間距

什么方法創(chuàng)建元素之間的分離比增加分離更好呢？

將事物劃分得更遠，是一種在不引入任何新UI的情況下，創(chuàng)建元素組之間區(qū)別的好方法。

五、不要過渡放大圖標

畢竟它們是矢量圖像，所以如果你增加尺寸，質量不會受到影響？

雖然矢量圖像在增加尺寸時質量不會降低，但是在16-24像素繪制的圖標，在將它們放大3倍或4倍的預期尺寸時，會顯得非常不專業(yè)。他們缺乏細節(jié)，并總是感覺不成比例的“矮胖”。

如果您有小圖標，請嘗試將它們放在另一個形狀中，并為該形狀提供背景顏色。

這可以讓您保持實際的圖標更接近其預期的尺寸，同時仍然填充更大的空間。如果您有預算，也可以使用專門用于較大尺寸的高級圖標集

六、使用強調邊框為平淡的設計添加色彩

如果您不是平面設計師，那么您如何將其他設計從美麗的攝影或色彩豐富的插圖中，獲得的那種視覺風格添加到您的用戶界面中？

一個可以產生巨大差異的簡單訣竅是，在界面的某些部分添加色彩鮮明的重音邊框，否則會感覺有點平淡。例如：在提示消息的旁邊。

難以挑選顏色？

嘗試從Dribbble的顏色搜索等受限調色板中進行選擇，以避免被傳統(tǒng)顏色選擇器的無窮可能性所淹沒。

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

當用戶可以在頁面上執(zhí)行多個動作時，很容易陷入純粹基于語義設計這些動作的陷阱。

“這是一個積極的行動？選個綠色的按鈕。”

“這會刪除數(shù)據(jù)？將按鈕設為紅色。“

語義是按鈕設計的重要組成部分，但是還有一個更重要的維度被人們遺忘：層次結構。

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

在設計這些行動時，在層次結構中傳達他們的位置很重要。

1.主要行動應該很明顯。實心，高對比度的背景色在這里很有用。
2.次要行動應該明確但不突出。輪廓樣式或較低的對比度背景色是很好的選擇。
3.三級行動應該是可以發(fā)現(xiàn)但不顯眼的。將這些行為設計為鏈接通常是最好的方法。

那么消極行為按鈕呢？他們不應該總是紅色嗎？

不必要！如果消極行為不是頁面上的主要行為，那么給它一個二級或三級按鈕治療可能會更好。

在當負面行為實際上是界面中的主要行為時，（如在確認對話框中）采用大的，紅色的和粗體的樣式

本文來源于成都網站建設公司與成都網站設計制作公司-創(chuàng)新互聯(lián)成都公司！

網站欄目：平面設計中7個實用設計技巧
網站鏈接：http://www.js-pz168.com/news9/310359.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站改版、網站設計公司、靜態(tài)網站、響應式網站、網站排名、定制開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)