每個(gè)web開(kāi)發(fā)人員都會(huì)遇到過(guò)一些需要你做視覺(jué)決策的情況，不管他們喜不喜歡。
也許是因?yàn)槟闼诘墓緵](méi)有全職設(shè)計(jì)師或者你需要嘗試一套新功能時(shí)需要自己優(yōu)化細(xì)節(jié)。
也許上述情況發(fā)生了，你也可以說(shuō)一句：“我不是設(shè)計(jì)師，更不是藝術(shù)家?！钡聦?shí)證明有很多技巧可以提升界面的水平，不需要有圖形設(shè)計(jì)背景。
這里有7個(gè)小技巧幫助你更好的優(yōu)化網(wǎng)頁(yè)的細(xì)節(jié)。
1.使用顏色和字體粗細(xì)來(lái)創(chuàng)造層次感而非字體大小
一個(gè)設(shè)計(jì)新手經(jīng)常會(huì)犯的錯(cuò)我就是，在UI文字處理中單一使用字體大小來(lái)體現(xiàn)層級(jí)。
“這行文字信息很重要，放大一點(diǎn)”
“這行文字信息不重要，縮小一點(diǎn)”
相比與用字號(hào)大小來(lái)豐富層級(jí)，試一試增加顏色和字體粗細(xì)兩種方式，會(huì)讓你的界面開(kāi)起來(lái)更優(yōu)秀。
“這行文字信息和很重要？變得粗一點(diǎn)”
“這行文字信息不重要？變得淺一點(diǎn)?！?/p>
嘗試并保持兩種或三種以上的配色
用暗色「或者黑色」突出表現(xiàn)主要內(nèi)容顏色（類(lèi)似標(biāo)題樣式）
用灰色表現(xiàn)次要內(nèi)容（類(lèi)似文章的出版日期）
用更淺的灰色表現(xiàn)輔助信息（類(lèi)似文章中的腳注信息）
與其類(lèi)似的，兩種字體粗細(xì)通?？梢詽M(mǎn)足一套UI的層次表達(dá)。
常規(guī)字體（400或500）可用于大多數(shù)文字信息。
粗體字體（600或700）可用于強(qiáng)調(diào)文字信息。
用戶(hù)界面設(shè)計(jì)中盡量避免使用字重在400以下的字體；我們可以用于大標(biāo)題，單在較小尺寸的界面上會(huì)顯得很不友好。
如果你想在次要信息中使用自重較輕的字體時(shí)，考慮使用淺色或者小字號(hào)字體會(huì)時(shí)不錯(cuò)的選擇。
2.不要在有色背景上使用灰階文字信息
在白色背景上通過(guò)讓文字信息變?yōu)闇\灰色來(lái)表現(xiàn)次要信息時(shí)一種不錯(cuò)的方式。但不適用于有色背景。
那是因?yàn)槲覀冊(cè)诎咨尘吧峡吹降幕疑Ч麜?huì)降低對(duì)比度。
使文本顏色接近背景色有助于創(chuàng)建層次感。
這里有兩種方法可以降低對(duì)比度。
1.降低白色文本的不透明度
使用白色文本和底不透明度。這樣可以讓背景色與文本顏色相互滲透，使色調(diào)和諧，不與背景沖突。
2.選取基于背景色的顏色
當(dāng)背景色是圖片和圖像時(shí)，避免因?yàn)榻档筒煌该鞫鴰?lái)的顏色太純或褪色，此方法優(yōu)于上一種。
3.抵消陰影
不使用較大的的模糊和擴(kuò)展用而是添加垂直偏移
這樣會(huì)顯得更自然，因?yàn)檫@樣做是模擬了一個(gè)從上面照下來(lái)的光源，就像現(xiàn)實(shí)世界中的一樣。
這也同樣適用于在表哥輸入框內(nèi)部的陰影樣式。
如果想深入了解陰影的處理，請(qǐng)移步Material design guidelines
4.使用較少的邊框
當(dāng)你需要分離兩個(gè)元素時(shí)，嘗試不同的方法，而不僅僅是用邊框區(qū)分。
當(dāng)然用邊框區(qū)分兩個(gè)元素不失為一種方法，且是最容易想到的。但有時(shí)太多的邊框會(huì)讓人感到心煩意亂的。
嘗試去用下面的方法：
1.使用 box-shadow
Box-shadow 可以更好的概括邊界內(nèi)的元素，可以簡(jiǎn)潔有效的區(qū)分元素。
2.使用兩種不同的背景色
給元素賦予兩種背景色即可區(qū)分它們，如果在元素邊框內(nèi)已經(jīng)有了背景色，去掉邊框試試看。
3.增加分層
如何更好的隔離元素？干脆將層隔離好了。
5.不要隨意擴(kuò)展圖標(biāo)
如果你需要一些大尺寸的圖標(biāo)（例如首頁(yè)導(dǎo)航欄中的一些圖標(biāo)）你可能會(huì)在iconfont下載后，然后調(diào)整尺寸滿(mǎn)足你的需求。
矢量圖增加尺寸后，質(zhì)量真的不會(huì)受到影響嗎？
雖然矢量圖在放大后，不會(huì)降低質(zhì)量，但在16-24px處繪制的圖標(biāo)將尺寸擴(kuò)展3、4倍后會(huì)看起來(lái)菲方不專(zhuān)業(yè)。他們?nèi)狈?xì)節(jié)，總是感覺(jué)到不協(xié)調(diào)。
如果你有小圖標(biāo)嘗試包含在另一個(gè)形狀中，并為形狀提供背景顏色。
6.使用accent border為你的設(shè)計(jì)增色
如果你不是平面設(shè)計(jì)師，怎樣在用戶(hù)界面中提升視覺(jué)效果。
例如，在警告消息的旁邊：
或突出顯示爹活動(dòng)導(dǎo)航欄
甚至在整個(gè)頁(yè)面布局的頂部
7.并非每個(gè)按鈕都需要背景色
當(dāng)用戶(hù)在頁(yè)面上執(zhí)行多個(gè)操作時(shí)，很容易陷入純粹歸因于的語(yǔ)義的操作陷阱
像bootstrap這樣的框架通過(guò)提供一個(gè)語(yǔ)義樣式菜單來(lái)鼓勵(lì)這一點(diǎn)，無(wú)論添加何種按鈕，都可以選擇：
語(yǔ)義是按鈕設(shè)計(jì)的一個(gè)重要組成部分，但有一個(gè)更常見(jiàn)的維度，層次結(jié)構(gòu)。
頁(yè)面上的每個(gè)操作都位于層級(jí)的某個(gè)位置。大多數(shù)頁(yè)面只有一個(gè)主要操作，一些次要操作，和一些很少使用的三級(jí)操作。
在設(shè)計(jì)這些操作時(shí)，層次結(jié)構(gòu)中傳答它們的位置非常重要。
