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

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

這就是我現(xiàn)在主要想提到的襯線，這張button主要使用了內(nèi)襯線，還是圍了一圈的，沒有使用漸變 蒙版 。
文字上其實也使用了 圖層 效果來代替一點一點去刻畫襯線，這個技術(shù)以前在站酷上看到一個設(shè)計者總結(jié)過，這是原文的鏈接，我就不多講文字修飾了。
我總是問大家，為什么喜歡用陰影，用陰影覺得加了效果了就好看了嗎？有陰影，那你的光源又在哪里，兩處都加角度相同的陰影，那么有多少光源？這陰影的設(shè)置和光源匹配嗎？
這都是設(shè)計者要問自己的問題，設(shè)計師做設(shè)計稿是有理由的，不是隨心所欲的。
下面這一張設(shè)計圖做的邊線襯線使用更為細(xì)致
我們看看它的原圖：

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

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

中間制作了一層比較淡的漸變，非常友好地體現(xiàn)出立體感。
頁面body的邊緣也是有襯線的，要仔細(xì)發(fā)現(xiàn)它

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

使用上下兩根襯線，襯線采用漸變蒙版

只采用下襯線，漸變到上面慢慢減淡的效果

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

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