多款按鈕的設(shè)計與制作

按鈕的設(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è)計中廷没,所占的比重是很重的,

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末垂寥,一起剝皮案震驚了整個濱河市颠黎,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌滞项,老刑警劉巖狭归,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異文判,居然都是意外死亡过椎,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進店門戏仓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來疚宇,“玉大人亡鼠,你說我怎么就攤上這事》蟠” “怎么了间涵?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長榜揖。 經(jīng)常有香客問我勾哩,道長,這世上最難降的妖魔是什么举哟? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任思劳,我火速辦了婚禮,結(jié)果婚禮上炎滞,老公的妹妹穿的比我還像新娘敢艰。我一直安慰自己,他們只是感情好册赛,可當我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布钠导。 她就那樣靜靜地躺著,像睡著了一般森瘪。 火紅的嫁衣襯著肌膚如雪牡属。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天扼睬,我揣著相機與錄音逮栅,去河邊找鬼。 笑死窗宇,一個胖子當著我的面吹牛措伐,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播军俊,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼侥加,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了粪躬?” 一聲冷哼從身側(cè)響起担败,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎镰官,沒想到半個月后提前,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡泳唠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年狈网,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡拓哺,死狀恐怖害淤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情拓售,我是刑警寧澤窥摄,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站础淤,受9級特大地震影響崭放,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鸽凶,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一币砂、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧玻侥,春花似錦决摧、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至姑食,卻和暖如春波岛,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背音半。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工则拷, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人曹鸠。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓煌茬,卻偏偏與公主長得像,于是被迫代替她去往敵國和親彻桃。 傳聞我的和親對象是個殘疾皇子坛善,可洞房花燭夜當晚...
    茶點故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內(nèi)容