—用策略代替才能來提升你的設(shè)計(jì)—
在我們的工作中乃秀，經(jīng)常會遇到要求設(shè)計(jì)改稿顽频√僦或許你會說：我無法做的讓它看起來很好。但事實(shí)證明糯景，你可以使用大量的技巧來提升你工作的水平嘁圈，而不需要平面設(shè)計(jì)背景。
今天蟀淮，這里有七個(gè)簡單的想法可以用來提升你的設(shè)計(jì)最住！
1、使用顏色和字重來創(chuàng)建層次結(jié)構(gòu)怠惶，而不是大小
當(dāng)對UI文本進(jìn)行樣式設(shè)計(jì)時(shí)常犯的一個(gè)錯(cuò)誤是過于依賴字體大小來控制層次結(jié)構(gòu)温学。
“這段文字重要嗎？ 讓我們做得更大甚疟≌提”
“這段文字次要嗎？讓我們做得更小览妖≡簦”
不要將所有繁重的工作都留在字號上，而是嘗試使用顏色或字重來完成相同的工作讽膏。
“這段文字重要嗎檩电？ 讓我們把他加粗。”
“這段文字次要嗎府树？讓我們用一個(gè)更淺的顏色俐末。”
嘗試并堅(jiān)持兩種或三種顏色：
· 一個(gè)黑色（但不是純黑）用于主要內(nèi)容（例如文章標(biāo)題）
· 灰色用于次要內(nèi)容（例如文章的發(fā)表日期）
· 淺灰色用于輔助內(nèi)容（可能是頁腳中的版權(quán)聲明）
類似的，通常兩個(gè)字重足以用于UI工作：
· 正常字重用于大多數(shù)的文本（400或500取決于字體）
· 較重的字重（600或700）用于你要強(qiáng)調(diào)的文字
用于UI工作時(shí)遠(yuǎn)離400以下的字重奄侠；他們可以用于大標(biāo)題卓箫，但在較小尺寸下閱讀困難。如果你正在考慮使用較輕的字重來淡化某些文字垄潮，請改用較淡的顏色或較小的字體大小烹卒。
2闷盔、不要在彩色背景上使用灰色文字
使文本變?yōu)闇\灰色是在白色背景上淡化它的好方法，但在彩色背景上看起來并不太好旅急。
這是因?yàn)槲覀儗?shí)際上看到白色灰色的效果是對比度降低逢勾。
實(shí)際上，使文本更接近背景色有助于創(chuàng)建層次結(jié)構(gòu)藐吮，而不是使它變成淺灰色溺拱。
處理彩色背景時(shí)有兩種方法可以降低對比度：
1、減少白色文字的不透明度
使用白色文字并降低不透明度谣辞。 這可以讓背景顏色滲透一點(diǎn)點(diǎn)盟迟，以不與背景沖突的方式減弱文字。
2潦闲、手動選擇一種基于背景顏色的顏色
當(dāng)你的背景是圖像或圖案時(shí)攒菠，或者當(dāng)減少不透明度會使文字感覺過于枯燥或不適應(yīng)時(shí)，這會比減少不透明度效果更好歉闰。
選擇與背景色調(diào)相同的顏色辖众，調(diào)整飽和度和亮度，直到看起來合適和敬。
3凹炸、垂直陰影
不要使用較大的模糊和擴(kuò)散值來使框陰影更明顯，請?zhí)砑哟怪逼啤?/p>
它看起來更自然昼弟，因?yàn)樗M了像我們以前在現(xiàn)實(shí)世界中看到的那樣從上方照射下來的光源啤它。
像文本框輸入就適用插入陰影：
如果你有興趣了解更多關(guān)于陰影設(shè)計(jì)的知識，“ Material Design Guidelines ”是一本很棒的入門指南舱痘。
4变骡、減少使用分割線
當(dāng)你需要在兩個(gè)元素之間創(chuàng)建分隔時(shí)，盡量抵制立即拉一條分割線芭逝。
雖然分割線是區(qū)分兩個(gè)元素的好方法塌碌，但它們并不是唯一的方式，而使用它們太多會讓你的設(shè)計(jì)感到雜而亂旬盯。
下一次你發(fā)現(xiàn)自己要用分割線時(shí)台妆，請嘗試以下其中一個(gè)辦法：
1、使用箱形陰影
箱形陰影在繪制像邊框這樣的元素方面做得非常出色胖翰，可以更加微妙并且完成相同的目標(biāo)而不會分散注意力接剩。
2、使用兩種不同的背景顏色
通常只需將相鄰元素的背景顏色略有不同就可以在它們之間進(jìn)行區(qū)分萨咳。 如果您已經(jīng)在邊框上使用不同的背景顏色懊缺，請嘗試刪除邊框; 你可能不需要它。
3某弦、添加額外的間距（留白代替分割線）
什么是更好的方法來創(chuàng)建元素之間的分隔桐汤，而不是簡單地增加分割線？ 將元素之間劃分得更遠(yuǎn)是一種在不引入任何新UI的情況下創(chuàng)建元素組之間分隔的好方法靶壮。
5怔毛、規(guī)范圖標(biāo)的使用
如果你正在設(shè)計(jì)一些可能使用一些大圖標(biāo)的東西（比如可能是登陸頁的“功能”部分），你可能會本能地抓住一個(gè)像 Font Awesome 這樣的免費(fèi)圖標(biāo)集腾降，并調(diào)整大小直到它們符合你的需求拣度。
畢竟它們是矢量圖像，那么如果你增加尺寸螃壤，質(zhì)量不會受到影響抗果？
雖然矢量圖像在增加尺寸時(shí)質(zhì)量不會降低，但是在16-24像素處繪制的圖標(biāo)在將它們吹成3倍或4倍的預(yù)期尺寸時(shí)決不會顯得非常專業(yè)奸晴。 他們?nèi)狈?xì)節(jié)冤馏，并總是感覺不成比例的“矮胖”。
如果你有一個(gè)小圖標(biāo)寄啼，請嘗試將它們放在另一個(gè)形狀中逮光，并為該形狀提供背景顏色：
這可以讓您保持實(shí)際的圖標(biāo)更接近其預(yù)期的尺寸，同時(shí)仍然填充很大的空間墩划。
如果您有預(yù)算涕刚，也可以使用專門用于較大尺寸的高級圖標(biāo)集，如Heroicons或Iconic乙帮。
6杜漠、使用加重邊框?yàn)槠降脑O(shè)計(jì)增添色彩
如果你不是平面設(shè)計(jì)師，那么你如何將從優(yōu)秀攝影或色彩豐富的插圖中獲得的那種視覺風(fēng)格添加到你的UI中察净？
一個(gè)可以產(chǎn)生巨大不同的簡單訣竅是在界面的某些部分添加多彩的加重邊框驾茴，否則會感覺有點(diǎn)平淡無奇。
例如氢卡，在警報(bào)消息的旁邊：
或者突出顯示活動的導(dǎo)航項(xiàng)目：
或者甚至是橫跨整個(gè)布局的頂部：
它不需要任何平面設(shè)計(jì)人才為你的用戶界面添加一個(gè)彩色矩形沟涨，并且可以使您的網(wǎng)站感覺更“精心設(shè)計(jì)”。
難以挑選顏色异吻？ 嘗試從Dribbble’s color search 進(jìn)行選擇裹赴，以避免感覺被傳統(tǒng)顏色選擇器的無窮可能性所苦惱。
7诀浪、并非每個(gè)按鈕都需要背景顏色
當(dāng)用戶可以在頁面上執(zhí)行多個(gè)動作時(shí)棋返，很容易陷入純粹基于語義設(shè)計(jì)這些動作的陷阱。
像Bootstrap這樣的框架通過為您提供一個(gè)語義樣式菜單來添加一個(gè)新按鈕來進(jìn)行選擇：
“這是一個(gè)積極的行動雷猪？ 用按鈕綠色睛竣。”
“這是刪除數(shù)據(jù)求摇？ 將按鈕設(shè)為紅色射沟∈庹撸”
語義是按鈕設(shè)計(jì)的重要組成部分，但是還有一個(gè)更重要的維度被人們遺忘：層次結(jié)構(gòu)验夯。
網(wǎng)頁上的每個(gè)動作都位于重要金字塔的某處猖吴。 大多數(shù)頁面只有一個(gè)真正的主要操作，一些不太重要的次要操作挥转，以及幾個(gè)很少使用的三級操作海蔽。
在設(shè)計(jì)這些行動時(shí)，用層次結(jié)構(gòu)傳達(dá)他們的位置很重要绑谣。
· 主要行動應(yīng)該明顯党窜。 實(shí)心，高對比度的背景色在這里很有用借宵。
· 次要行動應(yīng)該明確但不突出幌衣。 輪廓樣式或較低的對比度背景色是很好的選擇。
· 三級行動應(yīng)該是可以發(fā)現(xiàn)但不顯眼的壤玫。 將這些行為設(shè)計(jì)為像鏈接一樣通常是最好的方法泼掠。
“破壞性行為怎么樣，他們不應(yīng)該總是紅色嗎垦细？”
不必要择镇！ 如果破壞性行為不是頁面上的主要行為，那么給它一個(gè)二級或三級按鈕可能會更好括改。
當(dāng)負(fù)面行為實(shí)際上是界面中的主要行為時(shí)腻豌，保存大的，紅色的和粗體的樣式嘱能，如在確認(rèn)對話框中：
如果你喜歡這篇文章吝梅，一定要關(guān)注我。
本文翻譯來自Medium,感謝RefactoringUI.com
https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
