2020-8-6 資深UI設(shè)計者
按鈕在界面設(shè)計中,屬于最基礎(chǔ)的元素部分組成,按鈕設(shè)計的精致,整個頁面的品質(zhì)也會上升不少的檔次。今天給大家分享這篇文章,主要講解在設(shè)計按鈕時我們應(yīng)該考慮哪些因素,包括視覺上,有哪些萬能的方法及公式,能夠正確的制定按鈕的設(shè)計標(biāo)準(zhǔn),來提升整個設(shè)計的系統(tǒng)性。
在設(shè)計按鈕之前,需要先理解按鈕起到的代表含義。什么地方該加按鈕,什么地方不加按鈕,在系統(tǒng)化設(shè)計思路中需要非常有講究。通常按鈕在頁面,主要起到以下三點(diǎn)作用:
1. 某一類型的功能操作
這種比較常見,如一些控件形態(tài)的按鈕,比如加減、折疊、展開,下拉等。這類按鈕會起到一些功能形態(tài)的作用,常用于交互場景。所以在這類按鈕設(shè)計中,應(yīng)當(dāng)弱化按鈕形式,重點(diǎn)強(qiáng)調(diào)功能,突出主體信息。
2. 下一步的明確指引
當(dāng)頁面內(nèi)容信息過多后,用戶容易失去信息焦點(diǎn),從而忘記下一步操作。信息種類越多,用戶權(quán)衡的時間就會越久,用戶選擇罷手及跳出的幾率也會越大。所以這個時候,在合適的地方增添按鈕,能夠很好的引導(dǎo)用戶進(jìn)行下一步操作,提升整體操作的成功率。其次從體驗層面,也一定程度能起到頁面動線的引導(dǎo)作用,比如下方的一組卡片,在增添了按鈕后行動點(diǎn)很明確,非常有點(diǎn)擊欲望~
3. 固定習(xí)慣,明確心理預(yù)期
當(dāng)用戶知悉某個按鈕能指向某個操作,或者獲取某類信息后,長期以往用戶就會形成使用這個按鈕的習(xí)慣,這樣對提升復(fù)訪及固定心智是非常有效果。
所以如果你認(rèn)為你負(fù)責(zé)的產(chǎn)品或者是內(nèi)容,能持續(xù)為用戶帶來價值,那么在頁面的關(guān)鍵節(jié)點(diǎn),不如將按鈕設(shè)計的更醒目。這樣用戶下次再看到這個按鈕時,固定習(xí)慣會引導(dǎo)他持續(xù)的點(diǎn)擊。
這里我不以按鈕的長相來區(qū)分按鈕的類型,如漢堡按鈕或者別的什么的,意義不大。我主要還是想通過以按鈕的功能區(qū)分,來劃分類型,這樣大家理解起來更為清晰。
1. 功能性質(zhì)按鈕
這類按鈕見到的最多,我們常用的APP里,大量都充斥了這類按鈕,這類按鈕會起到重點(diǎn)的功能交互,幫助用戶得到TA想要的信息。其次樣式上面,其實圓形的點(diǎn)擊欲,會更強(qiáng)一些,看起來也更利于點(diǎn)擊。而方型的按鈕,則顯得更為正式、嚴(yán)謹(jǐn)。
公式:如果是圓形按鈕,圓角的半徑=高度的50%比較合適,而如果是方按鈕,邊角的小圓角半徑控制在15%以下比較合適,我個人喜好用10%。
2. 聚焦大按鈕
這類按鈕通常見于一些核心頁面的強(qiáng)指引,比如登錄、注冊、提交表單、或者是保存,等對頁面全局進(jìn)行操作的一些按鈕。需要注意的是,這類按鈕只適合對頁面全局進(jìn)行操作,而且頁面中大按鈕的數(shù)量不宜超過2個,信息盡量需要保持聚焦。
公式:基于@2x,這類大按鈕的高度≥72px是比較合適的,通常的尺寸有 80px、88px、96px,大家可以根據(jù)產(chǎn)品面向的人群來定高度,如果頁面面向的人群較為廣泛,我建議采用 88px 或者是 96px 的這種大號版本,畢竟操作起來更為方便。
3. 吸底按鈕
這類按鈕的優(yōu)先級,在整個頁面屬于最高,頁面的所有信息,都將聚焦在這個按鈕中。由于按鈕是吸底的,所以會一直浮在頁面上,不受頁面篇幅影響控制。
需要注意的是,吸底按鈕一定是頁面最重要的功能,或者是整個頁面的下一步指引,比如淘寶的立即購買,或者是餓了么、美團(tuán)的立即下單,又或者是常見的充值界面。
公式:基于@2x,吸底的高度≥80px是比較合適,常見的尺寸有88px、100px、112px ,按鈕的大小可以根據(jù)內(nèi)容來定,建議高度保持在72px以上比較合適。這里需要注意的是,吸底的按鈕,需要產(chǎn)出兩套設(shè)計稿,一套為常規(guī)稿,一套為iPhoneX的適配稿。iPhoneX底部控件的區(qū)域高度為68px,所以iPhoneX設(shè)計稿的吸底高度=常規(guī)設(shè)計稿吸底高度+68px
另外在設(shè)計按鈕的時候,也別忘了補(bǔ)充按鈕的多個狀態(tài)的設(shè)計稿。常見的狀態(tài),有以下四種:
1. Normal-正常態(tài)
這個為按鈕的正常顯示態(tài),就是正常頁面中的顯示效果。
2. Hover-懸浮態(tài)
這個為按鈕的懸浮態(tài),一般只會出現(xiàn)在使用鼠標(biāo)的時候。當(dāng)鼠標(biāo)指針停留在按鈕時,按鈕發(fā)出的特殊反饋,則為懸浮態(tài)。這類形式在移動端交互中無作用,所以移動界面設(shè)計中不需要考慮這個狀態(tài)。
公式:正常情況 Hover 態(tài)增加 10% 黑色就可以,原理如下
3. Pressed-點(diǎn)擊態(tài)
這個為按鈕的按壓態(tài),就是按鈕在被點(diǎn)擊或者是按壓后的效果。
公式:在APP設(shè)計中,點(diǎn)擊后的效果我們設(shè)一個標(biāo)準(zhǔn)值讓開發(fā)實現(xiàn)就好了。常用的值有按鈕減少20%的透明度,或者增添20%的暗度,這兩個都可以。通常我建議在亮色上的按鈕,使用暗度疊加(增添20%的黑色),在暗色上的按鈕,則使用透明度減少(透明度改為80%),實現(xiàn)效果原理參考 Hover 態(tài)那張配圖
4. Disable-禁用態(tài)
當(dāng)信息未填充完整,或者是某類條件未到,按鈕會出現(xiàn)不可點(diǎn)擊的狀態(tài),處于禁用形式,這個時候,按鈕就會呈現(xiàn)禁用態(tài)。這個禁用態(tài)無論是web還是app,很多場景都會用到,所以建議設(shè)定一套標(biāo)準(zhǔn)的設(shè)計規(guī)范,避免重復(fù)定義這個效果。
公式:禁用態(tài)尺寸及大小不變,僅使用色值做區(qū)分。建議使用灰色或者是不透明色,常用的禁用色有#CCC或者#999,需要盡可能把樣式做弱,避免用戶做無效的點(diǎn)擊。
在目前移動互聯(lián)網(wǎng)設(shè)計中,雖然按鈕的種類很多,但風(fēng)格變的逐漸統(tǒng)一,更多都是色值及細(xì)節(jié)上的差異。從大的風(fēng)格來看,按鈕還是分為這這幾種類型:扁平化、輕擬物、重擬物及游戲按鈕。
1. 扁平化按鈕
這類按鈕我們設(shè)計用的最多,信息簡潔,操作方便,形式追隨功能。這里也給大家分享一下我在設(shè)計扁平化按鈕的一些經(jīng)驗,比如高度寬度,以及陰影的色值。
公式:按鈕高度,這個通常是文字字號的2.4倍然后取4的倍數(shù)整數(shù),比如字號是24,那么按鈕的高度=57.6,離4倍數(shù)最近的是56,所以高度=56,圓角=10%的高度,取整后是6px。
另外如果覺得不合適,也可以單位往8遞增或者是遞減即可,例如 56、64、72、80、88 px
按鈕寬度:如果不是那種全局按鈕,通常按鈕的寬度=最多容納字?jǐn)?shù)的寬度+按鈕高度,就好啦。還是以上面那個例子為例,按鈕高度=56,文字寬度=96,那么按鈕的寬度=56+96=152
2. 輕擬物按鈕
這類按鈕近幾年變的非常流行,甚至QQ、淘寶,都開始大面積使用,因為這類按鈕在保持信息簡潔的同時,仍然有較強(qiáng)的點(diǎn)擊欲,視覺上面也能夠增添頁面的品質(zhì)感。
公式:漸變方向,建議采用水平漸變,重色在右側(cè),輕色在左側(cè)更為合適。陰影色值我之前就寫過,不知道大家還記得么,陰影顏色=按鈕顏色的 Alpha50%,x=0,y=按鈕高度的20%,模糊值=按鈕高度的50%,擴(kuò)展=按鈕高度的 -15%,高級又簡單,完美!
如果覺得這個彌散陰影太大的同學(xué),也可以自己手動簡單調(diào)整下,不礙事。(這個公式僅適用于Sketch,用PS的同學(xué),也可以按照這個邏輯自行研究一下)
另外說一句,實際上這個陰影公式并沒有什么很多的依據(jù),大多數(shù)都是我個人原創(chuàng)總結(jié)出來的,簡單好用。比如下面的這些按鈕的樣式,用了公式后的效果大家可以自行感受~
3. 重擬物及游戲按鈕
在一些營銷頁面中,按鈕的樣式通常需要做的比較游戲化。游戲化的按鈕,大部分會采取游戲場景中的元素,再采用擬物的手法,來進(jìn)行打造。
通常游戲化的按鈕,需要重點(diǎn)幾個部分組成,學(xué)過素描的同學(xué)應(yīng)該會知道,立體的物體,通常會有幾大特征,分別為高光,亮部,暗部,投影及反光。那么如果我們需要繪制一個在營銷或者游戲場景中使用的按鈕,只需要保證這個按鈕有高光,亮部,暗部,投影及反光的這些特征,然后飽滿一點(diǎn)就,立馬就可以出效果啦。
當(dāng)然,我舉的這幾個例子都是最基礎(chǔ)版本,如果你想做的更豐富一些,那也是沒問題的,這個可以case by case 來定。
這個沒有太多的公式可以總結(jié),更多的是看設(shè)計師的基礎(chǔ)美術(shù)水平啦~~
在寫這篇文章的時候,突然刷到了一套新擬態(tài)的控件設(shè)計風(fēng)格,有種眼前一亮的感覺。雖然這套設(shè)計視覺上很有層次很好看,不過感覺短時間之內(nèi),比較難大面積推廣,因為開發(fā)實現(xiàn)起來還是會比較耗費(fèi)成本。
我把源文件保存下來了,對這個感興趣或者好奇這種效果如何實現(xiàn)的同學(xué),可以下載源文件研究~~ sketch、psd、Figma 格式都有。
文章來源:優(yōu)設(shè) 作者:UX小學(xué)
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com