按鈕的設(shè)計是UI設(shè)計中必不可少的一個元素被去,怎么設(shè)計并制作出一個個精美得按鈕呢?
LV. ★
剛剛接觸UI設(shè)計檐晕,學做按鈕的時候概疆,只會加個底色逗威,搞個陰影,字體純白岔冀,然后在小聰明的調(diào)個圓角凯旭。
LV. ★★
(描邊、字體使套、內(nèi)陰影)
看了很多的UI設(shè)計案例罐呼,學會了一些小技巧,內(nèi)描邊1PX深色描邊使效果有所提升侦高。注意描邊要貼近按鈕色嫉柴,不要用純黑和純白。
其次奉呛,字體的顏色也同樣不要用純白计螺,要用貼近按鈕色的單色最佳夯尽。
當學會了內(nèi)陰影這項技能后,你就發(fā)現(xiàn)高光的按鈕看起來非常美好登馒。
LV. ★★(漸變疊加)
漸變疊加可以讓按鈕產(chǎn)生更多質(zhì)感效果匙握,多多嘗試,會有新的發(fā)現(xiàn)谊娇。
LV. ★★★(1像素的高光)
這是漸變的一種肺孤,明暗清晰。這里要說的是利用矢量圖做出1px的高光济欢,伴起左赠堵、右、上法褥,讓按鈕質(zhì)感更加強烈茫叭。
LV. ★★★(疊加的模糊光)
這是常用的一種網(wǎng)頁按鈕。甚至在紅色的按鈕疊加黃光半等,黑色的按鈕疊加紫光等等揍愁,具體大家自由發(fā)揮。
LV. ★★★(圖案疊加)
圖案疊加更多的是加強紋理杀饵,比如貼上皮革莽囤、金屬、木紋等素材切距,強調(diào)按鈕的與眾不同朽缎。這里的疊加,擴展了紋理谜悟。
LV. ★★★★(外發(fā)光)
利用文字的外發(fā)光话肖,讓按鈕看起來更富有光感,注意發(fā)光的顏色要貼近按鈕色葡幸,不要有太大的差異最筒。
LV. ★★★★(投影)
不要總使用默認的投影,多嘗試他們的數(shù)值蔚叨,會有不一樣的感覺床蜘。還有在字體上加入1px的內(nèi)陰影,讓字體更加凸起蔑水。
LV. ★★★★(1px的內(nèi)陰影和投影)
了解了內(nèi)陰影和投影的使用悄泥,就多玩玩1px的威力。它會讓你的按鈕看起來凹陷感更強烈肤粱。
LV. ★★★★(逆漸變)
大部分的這種技能用在按鈕觸碰效果弹囚,使其和靜態(tài)按鈕擁有很大的反差,提醒用戶鼠標懸浮于此领曼。
LV. ★★★★★(斜面和浮雕)
這個技能用得好也是一神技鸥鹉,他能讓按鈕效果片刻出結(jié)果蛮穿,也同樣能制作金屬質(zhì)感,當然毁渗,這需要調(diào)整它的曲線践磅,你可以試試。
LV. ★★★★★★(外圍輔助)
這種外圍的輔助灸异,讓按鈕看起來更是掉到了坑里府适。更加的吸引眼球,引起注意肺樟。其次注意這個按鈕PSD的漸變檐春,不是圖層疊加而是直接漸變。
LV. ★★★★★★(厚度)
這種按鈕的現(xiàn)在用的非常多么伯,加上一層使其空間感更加強烈疟暖,很多的手機應用下載按鈕就是用到了他。
LV. ★★★★★★(透明)
外圍的輔助田柔,也有這樣的功能俐巴,調(diào)整它的填充或者透明度,這樣的按鈕在有背景的頁面里效果尤為突出硬爆。之前我們說過的光疊加欣舵,也可以這樣疊加。
LV. ★★★★★★★(內(nèi)發(fā)光)
內(nèi)發(fā)光的按鈕缀磕,掌握不好的很容易出丑缘圈,如果用的好,也為自己的設(shè)計提分虐骑。內(nèi)發(fā)光不限于亮光准验,也適用于暗光赎线。
按鈕在界面設(shè)計中廷没,所占的比重是很重的,