之前就很想寫(xiě)這樣一個(gè)很無(wú)聊的技術(shù)性文章，我這塊只是在技術(shù)當(dāng)中也不算是一個(gè)碼活，靠的就是細(xì)致還有很多與生俱來(lái)的審美能力，以及不屈不撓的耐心和沉著。

說(shuō)不出來(lái)很多廢話(huà)，下面來(lái)看我的一些比較粗淺的總結(jié)

這是一套關(guān)于Button的實(shí)現(xiàn)，如果對(duì)HTML有了解的話(huà)，應(yīng)該知道active和hover偽類(lèi)，并且在網(wǎng)頁(yè)體現(xiàn)中，他們也起到了很大的作用，以至于牽扯到現(xiàn)在就是設(shè)計(jì)上也不僅僅只是一個(gè)button樣式那么簡(jiǎn)單，還要考慮acitve和hover的效果，就像下面實(shí)現(xiàn)的圖稿一樣

就這么一看，當(dāng)然什么都沒(méi)有，但是做設(shè)計(jì)的，或者簡(jiǎn)而言之就算是做美工的，也應(yīng)該把小圖放大個(gè)兩三倍去看，會(huì)發(fā)現(xiàn)一些自己可能會(huì)忽略的細(xì)節(jié)：

這就是我現(xiàn)在主要想提到的襯線(xiàn)，這張button主要使用了內(nèi)襯線(xiàn)，還是圍了一圈的，沒(méi)有使用漸變蒙版。

文字上其實(shí)也使用了圖層效果來(lái)代替一點(diǎn)一點(diǎn)去刻畫(huà)襯線(xiàn)，這個(gè)技術(shù)以前在站酷上看到一個(gè)設(shè)計(jì)者總結(jié)過(guò)，這是原文的鏈接，我就不多講文字修飾了：http://www.zcool.com.cn/article/ZMTQ2NDA=.html

我總是問(wèn)大家，為什么喜歡用陰影，用陰影覺(jué)得加了效果了就好看了嗎？有陰影，那你的光源又在哪里，兩處都加角度相同的陰影，那么有多少光源？這陰影的設(shè)置和光源匹配嗎？

這都是設(shè)計(jì)者要問(wèn)自己的問(wèn)題，設(shè)計(jì)師做設(shè)計(jì)稿是有理由的，不是隨心所欲的。

下面這一張?jiān)O(shè)計(jì)圖做的邊線(xiàn)襯線(xiàn)使用更為細(xì)致

我們看看它的原圖：

再看看放大后的按鈕旁邊的那條細(xì)線(xiàn)，粗淺一看是兩條雙色線(xiàn)顯出刻下來(lái)的效果，仔細(xì)放大才發(fā)現(xiàn)是四條線(xiàn)。

同時(shí)，按鈕上不再是簡(jiǎn)單的一圈襯線(xiàn)了，襯線(xiàn)使用了蒙版，因此有了過(guò)度，上面和下面的內(nèi)襯線(xiàn)很明顯，但是中間的襯線(xiàn)慢慢被蒙版遮蓋，文字使用了陰影，符合背景的深綠色來(lái)輝映上面的白色字體。

中間制作了一層比較淡的漸變，非常友好地體現(xiàn)出立體感。

頁(yè)面body的邊緣也是有襯線(xiàn)的，要仔細(xì)發(fā)現(xiàn)它

然后下面是只使用上襯線(xiàn)，下面用陰影代替立體感的button設(shè)計(jì)

使用上下兩根襯線(xiàn)，襯線(xiàn)采用漸變蒙版

只采用下襯線(xiàn)，漸變到上面慢慢減淡的效果

更為復(fù)雜地使用襯線(xiàn)體現(xiàn)光感

為什么會(huì)產(chǎn)生襯線(xiàn)

這是美術(shù)光學(xué)的影響，在學(xué)素描的時(shí)候，剛開(kāi)始老師都會(huì)那么講，哪里的線(xiàn)要加重，哪里有反光，哪里有陰影，為了體現(xiàn)物體在2D效果上的立體感，我們只能更加熟練地去運(yùn)用光線(xiàn)來(lái)體現(xiàn)。尋找自己虛擬出的光源帶來(lái)的高光、亮部、中間色、暗部、投影、明暗交接線(xiàn)。再提一下，為什么不讓大家使用太過(guò)強(qiáng)的漸變，不論是色向上還是亮度上還是飽和度上都不可跨度太過(guò)強(qiáng)，某些特殊情況除外。因?yàn)檫@樣強(qiáng)烈的過(guò)度根本不帶真實(shí)感，給人一種很不舒適的感覺(jué)。我始終堅(jiān)持設(shè)計(jì)貼近生活，源于生活。

源地址：http://lazymaru.co.cc/?p=98