国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

如何讓你的「按鈕設計」上檔次?

2020-8-6    資深UI設計者

按鈕在界面設計中,屬于最基礎的元素部分組成,按鈕設計的精致,整個頁面的品質也會上升不少的檔次。今天給大家分享這篇文章,主要講解在設計按鈕時我們應該考慮哪些因素,包括視覺上,有哪些萬能的方法及公式,能夠正確的制定按鈕的設計標準,來提升整個設計的系統性。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

按鈕有哪些作用?

在設計按鈕之前,需要先理解按鈕起到的代表含義。什么地方該加按鈕,什么地方不加按鈕,在系統化設計思路中需要非常有講究。通常按鈕在頁面,主要起到以下三點作用:

1. 某一類型的功能操作

這種比較常見,如一些控件形態的按鈕,比如加減、折疊、展開,下拉等。這類按鈕會起到一些功能形態的作用,常用于交互場景。所以在這類按鈕設計中,應當弱化按鈕形式,重點強調功能,突出主體信息。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

2. 下一步的明確指引

當頁面內容信息過多后,用戶容易失去信息焦點,從而忘記下一步操作。信息種類越多,用戶權衡的時間就會越久,用戶選擇罷手及跳出的幾率也會越大。所以這個時候,在合適的地方增添按鈕,能夠很好的引導用戶進行下一步操作,提升整體操作的成功率。其次從體驗層面,也一定程度能起到頁面動線的引導作用,比如下方的一組卡片,在增添了按鈕后行動點很明確,非常有點擊欲望~

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

3. 固定習慣,明確心理預期

當用戶知悉某個按鈕能指向某個操作,或者獲取某類信息后,長期以往用戶就會形成使用這個按鈕的習慣,這樣對提升復訪及固定心智是非常有效果。

所以如果你認為你負責的產品或者是內容,能持續為用戶帶來價值,那么在頁面的關鍵節點,不如將按鈕設計的更醒目。這樣用戶下次再看到這個按鈕時,固定習慣會引導他持續的點擊。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

按鈕有哪些類型?

這里我不以按鈕的長相來區分按鈕的類型,如漢堡按鈕或者別的什么的,意義不大。我主要還是想通過以按鈕的功能區分,來劃分類型,這樣大家理解起來更為清晰。

1. 功能性質按鈕

這類按鈕見到的最多,我們常用的APP里,大量都充斥了這類按鈕,這類按鈕會起到重點的功能交互,幫助用戶得到TA想要的信息。其次樣式上面,其實圓形的點擊欲,會更強一些,看起來也更利于點擊。而方型的按鈕,則顯得更為正式、嚴謹。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

公式:如果是圓形按鈕,圓角的半徑=高度的50%比較合適,而如果是方按鈕,邊角的小圓角半徑控制在15%以下比較合適,我個人喜好用10%。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

2. 聚焦大按鈕

這類按鈕通常見于一些核心頁面的強指引,比如登錄、注冊、提交表單、或者是保存,等對頁面全局進行操作的一些按鈕。需要注意的是,這類按鈕只適合對頁面全局進行操作,而且頁面中大按鈕的數量不宜超過2個,信息盡量需要保持聚焦。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

公式:基于@2x,這類大按鈕的高度≥72px是比較合適的,通常的尺寸有 80px、88px、96px,大家可以根據產品面向的人群來定高度,如果頁面面向的人群較為廣泛,我建議采用 88px 或者是 96px 的這種大號版本,畢竟操作起來更為方便。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

3. 吸底按鈕

這類按鈕的優先級,在整個頁面屬于最高,頁面的所有信息,都將聚焦在這個按鈕中。由于按鈕是吸底的,所以會一直浮在頁面上,不受頁面篇幅影響控制。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

需要注意的是,吸底按鈕一定是頁面最重要的功能,或者是整個頁面的下一步指引,比如淘寶的立即購買,或者是餓了么、美團的立即下單,又或者是常見的充值界面。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

公式:基于@2x,吸底的高度≥80px是比較合適,常見的尺寸有88px、100px、112px ,按鈕的大小可以根據內容來定,建議高度保持在72px以上比較合適。這里需要注意的是,吸底的按鈕,需要產出兩套設計稿,一套為常規稿,一套為iPhoneX的適配稿。iPhoneX底部控件的區域高度為68px,所以iPhoneX設計稿的吸底高度=常規設計稿吸底高度+68px

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

按鈕有哪些狀態?

另外在設計按鈕的時候,也別忘了補充按鈕的多個狀態的設計稿。常見的狀態,有以下四種:

1. Normal-正常態

這個為按鈕的正常顯示態,就是正常頁面中的顯示效果。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

2. Hover-懸浮態

這個為按鈕的懸浮態,一般只會出現在使用鼠標的時候。當鼠標指針停留在按鈕時,按鈕發出的特殊反饋,則為懸浮態。這類形式在移動端交互中無作用,所以移動界面設計中不需要考慮這個狀態。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

公式:正常情況 Hover 態增加 10% 黑色就可以,原理如下

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

3. Pressed-點擊態

這個為按鈕的按壓態,就是按鈕在被點擊或者是按壓后的效果。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

公式:在APP設計中,點擊后的效果我們設一個標準值讓開發實現就好了。常用的值有按鈕減少20%的透明度,或者增添20%的暗度,這兩個都可以。通常我建議在亮色上的按鈕,使用暗度疊加(增添20%的黑色),在暗色上的按鈕,則使用透明度減少(透明度改為80%),實現效果原理參考 Hover 態那張配圖

4. Disable-禁用態

當信息未填充完整,或者是某類條件未到,按鈕會出現不可點擊的狀態,處于禁用形式,這個時候,按鈕就會呈現禁用態。這個禁用態無論是web還是app,很多場景都會用到,所以建議設定一套標準的設計規范,避免重復定義這個效果。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

公式:禁用態尺寸及大小不變,僅使用色值做區分。建議使用灰色或者是不透明色,常用的禁用色有#CCC或者#999,需要盡可能把樣式做弱,避免用戶做無效的點擊。

按鈕的風格及尺寸

在目前移動互聯網設計中,雖然按鈕的種類很多,但風格變的逐漸統一,更多都是色值及細節上的差異。從大的風格來看,按鈕還是分為這這幾種類型:扁平化、輕擬物、重擬物及游戲按鈕。

1. 扁平化按鈕

這類按鈕我們設計用的最多,信息簡潔,操作方便,形式追隨功能。這里也給大家分享一下我在設計扁平化按鈕的一些經驗,比如高度寬度,以及陰影的色值。

公式:按鈕高度,這個通常是文字字號的2.4倍然后取4的倍數整數,比如字號是24,那么按鈕的高度=57.6,離4倍數最近的是56,所以高度=56,圓角=10%的高度,取整后是6px。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

另外如果覺得不合適,也可以單位往8遞增或者是遞減即可,例如 56、64、72、80、88 px

按鈕寬度:如果不是那種全局按鈕,通常按鈕的寬度=最多容納字數的寬度+按鈕高度,就好啦。還是以上面那個例子為例,按鈕高度=56,文字寬度=96,那么按鈕的寬度=56+96=152

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

2. 輕擬物按鈕

這類按鈕近幾年變的非常流行,甚至QQ、淘寶,都開始大面積使用,因為這類按鈕在保持信息簡潔的同時,仍然有較強的點擊欲,視覺上面也能夠增添頁面的品質感。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

公式:漸變方向,建議采用水平漸變,重色在右側,輕色在左側更為合適。陰影色值我之前就寫過,不知道大家還記得么,陰影顏色=按鈕顏色的 Alpha50%,x=0,y=按鈕高度的20%,模糊值=按鈕高度的50%,擴展=按鈕高度的 -15%,高級又簡單,完美!

如果覺得這個彌散陰影太大的同學,也可以自己手動簡單調整下,不礙事。(這個公式僅適用于Sketch,用PS的同學,也可以按照這個邏輯自行研究一下)

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

另外說一句,實際上這個陰影公式并沒有什么很多的依據,大多數都是我個人原創總結出來的,簡單好用。比如下面的這些按鈕的樣式,用了公式后的效果大家可以自行感受~

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

 

3. 重擬物及游戲按鈕

在一些營銷頁面中,按鈕的樣式通常需要做的比較游戲化。游戲化的按鈕,大部分會采取游戲場景中的元素,再采用擬物的手法,來進行打造。

通常游戲化的按鈕,需要重點幾個部分組成,學過素描的同學應該會知道,立體的物體,通常會有幾大特征,分別為高光,亮部,暗部,投影及反光。那么如果我們需要繪制一個在營銷或者游戲場景中使用的按鈕,只需要保證這個按鈕有高光,亮部,暗部,投影及反光的這些特征,然后飽滿一點就,立馬就可以出效果啦。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

當然,我舉的這幾個例子都是最基礎版本,如果你想做的更豐富一些,那也是沒問題的,這個可以case by case 來定。

這個沒有太多的公式可以總結,更多的是看設計師的基礎美術水平啦~~

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

新擬態按鈕

在寫這篇文章的時候,突然刷到了一套新擬態的控件設計風格,有種眼前一亮的感覺。雖然這套設計視覺上很有層次很好看,不過感覺短時間之內,比較難大面積推廣,因為開發實現起來還是會比較耗費成本。

如何讓你的「按鈕設計」上檔次?送你這份萬能公式!

我把源文件保存下來了,對這個感興趣或者好奇這種效果如何實現的同學,可以下載源文件研究~~ sketch、psd、Figma 格式都有。

文章來源:優設    作者:UX小學

藍藍設計paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://paul-jarrel.com

存檔