用戰(zhàn)術(shù)而不是天賦改進你的設(shè)計奋救。
每個Web開發(fā)人員都不可避免地遇到需要做出視覺設(shè)計決策的情況。也許你工作的公司沒有一個全職設(shè)計師结笨，你需要自己實現(xiàn)一個新功能的UI包晰。或者炕吸，也許你正在攻克一個編外項目伐憾，并希望它看起來比「另一個Bootstrap站點」更好。很容易舉起雙手說：“我永遠無法讓這個看起來很好赫模，我不是一個藝術(shù)家树肃！”但事實證明，有很多技巧可以用來提升你的工作瀑罗，不需要有平面設(shè)計的經(jīng)驗胸嘴。
這里有七個簡單的想法可以用來改善你的設(shè)計。
1.使用顏色和粗細來創(chuàng)建層次結(jié)構(gòu)斩祭，而不是字體大小
對UI文本進行樣式設(shè)計時常犯的一個錯誤是過于依賴字體大小來控制層次結(jié)構(gòu)劣像。
“這段文字是重要的嗎？讓它大一點停忿。 ”
“這段文字是次要的驾讲？讓它小一點。 ”
不要將所有繁重的工作都留在字號上席赂，而是嘗試使用顏色或字重來實現(xiàn)相同效果吮铭。
“這段文字是重要的嗎？讓它粗一點颅停。 ”
“這段文字是次要的谓晌？讓它細一點。 ”
嘗試并堅持兩種或三種顏色：
①主要內(nèi)容的深色（但不是黑色）（如文章的標題）
②次要內(nèi)容灰色（如文章發(fā)表日期）
③輔助內(nèi)容的淺灰色（可能是頁腳中的版權(quán)聲明）
類似地癞揉，兩種字體權(quán)重通常足以用于UI工作：
①大多數(shù)文本的正常字重（400或500取決于字體）
②較粗的字體（600或700）用于您要強調(diào)的文字
UI設(shè)計上遠離字重不超過400的字體 ; 他們可以用在大標題上纸肉，但在較小的字號下不易于閱讀溺欧。如果您正在考慮使用較輕的重量來淡化某些文字，請改為使用較淺的顏色或較小的字體柏肪。
2.不要在彩色背景上使用灰色文字
使文本變?yōu)闇\灰色是在白色背景上淡化它的好方法姐刁，但在彩色背景上看起來并不太好。
這是因為我們實際看到白色灰色的效果是對比度降低烦味。
使文本更接近背景色實際上有助于創(chuàng)建層次結(jié)構(gòu)聂使，而不是使它變成淺灰色。
處理彩色背景時有兩種方法可以降低對比度：
①減少白色文字的不透明度
使用白色文字并降低不透明度谬俄。這可以讓背景顏色滲透一點點柏靶，以不與背景沖突的方式減弱文字。
②選擇基于背景色的顏色
當(dāng)您的背景是圖像或圖案時溃论，或者當(dāng)減少不透明度會使文字感覺過于枯燥或不適應(yīng)時屎蜓，這會比減少不透明度效果更好。
選擇與背景色調(diào)相同的顏色钥勋，調(diào)整飽和度和亮度炬转，直到看起來合適。
3.偏移陰影
不要使用較大的模糊和擴散值來使框陰影更明顯笔诵，請?zhí)砑哟怪逼啤?/p>
它看起來更自然返吻，因為它模擬了像我們以前在現(xiàn)實世界中看到的那樣從上方照射下來的光源。
這適用于表格輸入框：
如果您有興趣了解更多關(guān)于陰影設(shè)計的知識乎婿，Google的"材料設(shè)計指南"是一本很棒的入門指南测僵。
4.盡量少使用邊框
當(dāng)你需要在兩個元素之間創(chuàng)建分隔時，雖然邊框是區(qū)分兩個元素的好方法谢翎，但它們并不是唯一的方法捍靠，而使用它們太多會讓你的設(shè)計變得擁擠和混亂。
下一次你發(fā)現(xiàn)自己到達邊境時森逮，請嘗試以下其中一個想法：
①.使用盒子陰影
盒子陰影在繪制像邊框這樣的元素方面做得非常出色榨婆，但是可以更加微妙并且完成相同的目標而不會讓人分心。
②使用兩種不同的背景顏色
通常只需將相鄰元素的背景顏色略有不同就可以在它們之間進行區(qū)分褒侧。如果您已經(jīng)在邊框上使用不同的背景顏色良风，請嘗試刪除邊框; 你可能不需要它。
③添加額外的間距
什么方法創(chuàng)建元素之間的分離比增加分離更好呢闷供？將事物劃分得更遠是一種在不引入任何新UI的情況下創(chuàng)建元素組之間區(qū)別的好方法烟央。
5.不要過渡放大圖標
如果你正在設(shè)計一些可能使用一些大圖標的東西（比如可能是著陸頁上的“功能”部分），你可能會本能地采用一個像Font Awesome或Zondicons這樣的免費圖標集歪脏，并且調(diào)整大小直到它們符合你的需求疑俭。
畢竟它們是矢量圖像，所以如果你增加尺寸婿失，質(zhì)量不會受到影響钞艇？
雖然矢量圖像在增加尺寸時質(zhì)量不會降低啄寡，但是在16-24像素繪制的圖標在將它們放大3倍或4倍的預(yù)期尺寸時會顯得非常不專業(yè)。他們?nèi)狈毠?jié)哩照，并總是感覺不成比例的“矮胖”挺物。
如果您有小圖標，請嘗試將它們放在另一個形狀中葡秒，并為該形狀提供背景顏色：
這可以讓您保持實際的圖標更接近其預(yù)期的尺寸姻乓，同時仍然填充更大的空間嵌溢。
如果您有預(yù)算眯牧，也可以使用專門用于較大尺寸的高級圖標集，如Heroicons或Iconic赖草。
6.使用強調(diào)邊框為平淡的設(shè)計添加色彩
如果您不是平面設(shè)計師学少，那么您如何將其他設(shè)計從美麗的攝影或色彩豐富的插圖中獲得的那種視覺風(fēng)格添加到您的用戶界面中？
一個可以產(chǎn)生巨大差異的簡單訣竅是在界面的某些部分添加色彩鮮明的重音邊框秧骑，否則會感覺有點平淡版确。
例如，在提示消息的旁邊：
...或突出顯示活動的導(dǎo)航項目：
......甚至是整個布局的頂部：
簡單的為您的界面添加一個彩色矩形不需要任何平面設(shè)計專業(yè)天才乎折，但卻可以使您的網(wǎng)站更具有“設(shè)計感”绒疗。
難以挑選顏色？嘗試從Dribbble的顏色搜索等受限調(diào)色板中進行選擇骂澄，以避免被傳統(tǒng)顏色選擇器的無窮可能性所淹沒吓蘑。
7.并非每個按鈕都需要背景顏色
當(dāng)用戶可以在頁面上執(zhí)行多個動作時，很容易陷入純粹基于語義設(shè)計這些動作的陷阱坟冲。
像Bootstrap這樣的框架通過為您提供一系列樣式供你選擇：
“這是一個積極的行動磨镶？選個綠色的按鈕〗√幔“
“這會刪除數(shù)據(jù)琳猫？將按鈕設(shè)為紅色∷奖裕“
語義是按鈕設(shè)計的重要組成部分脐嫂，但是還有一個更重要的維度被人們遺忘：層次結(jié)構(gòu)。
網(wǎng)頁上的每個動作都位于重要金字塔的某處紊遵。大多數(shù)頁面只有一個真正的主要操作账千，一些不太重要的次要操作，以及幾個很少使用的三級操作癞蚕。
在設(shè)計這些行動時蕊爵，在層次結(jié)構(gòu)中傳達他們的位置很重要。
①主要行動應(yīng)該很明顯桦山。實心攒射，高對比度的背景色在這里很有用醋旦。
②次要行動應(yīng)該明確但不突出。輪廓樣式或較低的對比度背景色是很好的選擇会放。
③三級行動應(yīng)該是可以發(fā)現(xiàn)但不顯眼的饲齐。將這些行為設(shè)計為鏈接通常是最好的方法。
“那么消極行為按鈕呢咧最？他們不應(yīng)該總是紅色嗎捂人？”
不必要！如果消極行為不是頁面上的主要行為矢沿，那么給它一個二級或三級按鈕治療可能會更好滥搭。
在當(dāng)負面行為實際上是界面中的主要行為時（如在確認對話框中）采用大的，紅色的和粗體的樣式：
