Material Design —懸浮響應(yīng)式按鈕(Buttons: Floating Action Button)

自上次參加完回音分享會(huì)后,我下定決心要洗心革面乖乖打基礎(chǔ)茸苇,于是開啟了這個(gè)part,爭(zhēng)取兩個(gè)月不間斷更新沦寂,寫完Material Design與iOS中的組件(順便學(xué)學(xué)英語(yǔ))学密,以便今后在使用的時(shí)候完全不虛

Material Design鏈接:懸浮響應(yīng)式按鈕

懸浮響應(yīng)式按鈕

懸浮響應(yīng)式按鈕代表一個(gè)應(yīng)用中最重要的操作。

懸浮響應(yīng)式按鈕用于促進(jìn)操作传藏。

就像在UI上方浮動(dòng)的圓形icon一樣腻暮,它會(huì)在聚焦時(shí)改變顏色,并在選擇時(shí)上浮毯侦。 點(diǎn)擊時(shí)哭靖,它可能包含更多相關(guān)的操作。

用法

每個(gè)屏幕只推薦一個(gè)懸浮響應(yīng)式按鈕來(lái)表示最常用的操作叫惊。

行為

默認(rèn)情況下款青,懸浮響應(yīng)式按鈕在屏幕上以動(dòng)畫形式展開做修。

尺寸

默認(rèn)值:56 x 56dp

最谢粽:40 x 40dp


懸浮響應(yīng)式按鈕

懸浮響應(yīng)式按鈕

浮動(dòng)操作按鈕用于促進(jìn)操作,懸浮響應(yīng)式按鈕是由在UI上方浮動(dòng)的圓形icon來(lái)區(qū)分的饰及,它們的運(yùn)動(dòng)行為包括變色蔗坯、發(fā)射(功能)和改變錨點(diǎn)。

浮動(dòng)操作按鈕有兩種尺寸:

·默認(rèn)大辛呛:對(duì)于大多數(shù)用例宾濒。

·最小尺寸:只用于創(chuàng)建與其他屏幕元素的視覺連續(xù)性。

當(dāng)屏幕寬度為460dp或更小時(shí)屏箍,按鈕的大小應(yīng)該從默認(rèn)的(56dp)變?yōu)樽钚〕叽?40dp)绘梦。

左:默認(rèn)尺寸 ? ?右:最小尺寸

懸浮響應(yīng)式按鈕應(yīng)該放置在離手機(jī)邊緣至少16dp的位置,平板電腦/pc上至少需要離24dp赴魁。

懸浮響應(yīng)式按鈕在聚焦時(shí)改變顏色卸奉,在選擇時(shí)上浮。

左:聚焦前 ? ?右:聚焦后
左:選擇前 ? ?右:選擇后

并非每屏都需要浮動(dòng)操作按鈕颖御。 浮動(dòng)操作按鈕表示app中的最重要的操作榄棵。

左:最重要的操作是點(diǎn)擊圖片 ? ?右:最重要的操作是添加文件

每個(gè)屏幕建議只用一個(gè)懸浮響應(yīng)式按鈕,增加其顯眼程度潘拱。 懸浮響應(yīng)式按鈕應(yīng)該只代表最常用的動(dòng)作疹鳄。

性質(zhì)

使懸浮響應(yīng)式按鈕代表積極的操作,如創(chuàng)建芦岂,喜歡瘪弓,共享,導(dǎo)航和搜索禽最。

避免對(duì)次要和消極的操作使用浮動(dòng)操作按鈕杠茬,包括以下內(nèi)容:

·存檔或清空

·不明確的行為

·警告或錯(cuò)誤

·有限制的任務(wù)月褥,如剪切文本

·應(yīng)該在工具欄中的控件,如音量控制或更改字體顏色

浮動(dòng)操作按鈕不包含應(yīng)用欄icons或狀態(tài)通知(如小紅點(diǎn))瓢喉。 不要將其他元素疊放在懸浮響應(yīng)式按鈕上宁赤。

一致地使用圓形圖標(biāo)以在app間強(qiáng)制最重要的操作的一致性皂冰。

不要給懸浮響應(yīng)式按鈕多余的維度效果偎痛。


行為(此部分見原網(wǎng)站)

默認(rèn)情況下,懸浮響應(yīng)式按鈕在屏幕上以動(dòng)畫形式展開偷俭。 其中的icon可能是動(dòng)態(tài)的走贪。

由于其相對(duì)而言的重要性佛猛,懸浮響應(yīng)式按鈕的移動(dòng)方式可能與其他UI元素不同。

跨屏幕

橫跨多個(gè)橫向屏幕(例如頂部標(biāo)簽屏幕)的懸浮響應(yīng)式按鈕應(yīng)該短暫消失坠狡,然后如果其動(dòng)作改變就重新出現(xiàn)(此部分動(dòng)圖見原網(wǎng)站)继找。

如果按鈕在各個(gè)屏幕上的動(dòng)作保持不變(如有必要,則轉(zhuǎn)換為新位置)逃沿,該按鈕應(yīng)保持在屏幕上婴渡。

列表

懸浮響應(yīng)式按鈕下面的列表應(yīng)該在它們下面有足夠的空間,以便它們的內(nèi)容不被按鈕擋住凯亮。

帶標(biāo)簽的屏幕

在帶標(biāo)簽的屏幕上边臼,懸浮響應(yīng)式按鈕不應(yīng)以與內(nèi)容相同的方向退出屏幕。 這可以防止:

·懸浮響應(yīng)式按鈕在不在屏幕時(shí)顯示功能

·懸浮響應(yīng)式按鈕與內(nèi)容海拔相同的感覺


變換

變換

浮動(dòng)操作按鈕是app中主要用例的特別示例假消。 利用其可見性為主要的UI元素創(chuàng)建令人愉快的變換柠并。

常用變換包括觸發(fā),工具欄富拗,Speed dial和變形臼予。 這不是一個(gè)詳盡的清單。 懸浮響應(yīng)式按鈕的設(shè)計(jì)靈活啃沪。 嘗試最適合您的app和按鈕所在屏幕的變換粘拾。

觸發(fā)

懸浮響應(yīng)式按鈕可以簡(jiǎn)單地觸發(fā)動(dòng)作或在某處導(dǎo)航。 觸摸波動(dòng)的動(dòng)畫向外擴(kuò)展導(dǎo)致UI變化谅阿。

工具欄

浮動(dòng)動(dòng)作按鈕可以在按下時(shí)變換成工具欄半哟。 工具欄可以包含相關(guān)的操作,如文本和搜索字段签餐,或任何其他有用的項(xiàng)目寓涨。

滾動(dòng)就消失的工具欄適用于:

·最開始進(jìn)入時(shí)需要完整工具欄的屏幕

·長(zhǎng)列表頂部或底部需要完整工具欄的屏

當(dāng)用戶通過(guò)滾動(dòng)表示他們有興趣查看主要內(nèi)容時(shí),節(jié)省了屏幕空間氯檐。

如果懸浮響應(yīng)式按鈕變形為工具欄戒良,則該工具欄應(yīng)包含相關(guān)操作。

工具欄中的操作需關(guān)聯(lián)

Speed dial

按動(dòng)懸浮響應(yīng)式按鈕可以甩出相關(guān)動(dòng)作冠摄。 菜單被喚起后糯崎,該按鈕應(yīng)保持在屏幕上几缭。 在同一地點(diǎn)點(diǎn)擊應(yīng)激活最常用的操作或關(guān)閉打開的菜單。

懸浮響應(yīng)式按鈕可以轉(zhuǎn)換為包含所有動(dòng)作的單張材料沃呢。

一般規(guī)則是年栓,按下時(shí)至少有三個(gè)選項(xiàng),但不能超過(guò)六個(gè)薄霜,包括原始懸浮響應(yīng)式按鈕目標(biāo)某抓。 如果您有兩個(gè)選項(xiàng) ,即您的浮動(dòng)操作按鈕只顯示另一個(gè)選項(xiàng)惰瓜,則選最重要的動(dòng)作作為懸浮響應(yīng)式按鈕否副。 如果你有超過(guò)六個(gè),用戶可能難以觸摸到最遠(yuǎn)的選擇崎坊。

為用戶提供最好备禀,最明顯,最少的選擇奈揍,來(lái)減少?zèng)Q策疲勞曲尸。

不要在浮動(dòng)操作按鈕操作中放置溢出菜單。 從最初的屏幕應(yīng)該最多只有兩次點(diǎn)擊就能到達(dá)預(yù)期的目的地打月。

將溢出操作置于工具欄中的溢出菜單中队腐,而不是懸浮響應(yīng)式按鈕中蚕捉。

如果app的特點(diǎn)是添加文件類型奏篙,浮動(dòng)操作按鈕可以在第一次觸摸后轉(zhuǎn)換為相關(guān)操作。 但是迫淹,如果顯示的操作與按鈕無(wú)關(guān)秘通,請(qǐng)將操作放入溢出菜單。

懸浮響應(yīng)式按鈕可以包含聯(lián)系人列表敛熬。 該列表不應(yīng)包含無(wú)關(guān)的操作肺稀。

變形

浮動(dòng)操作按鈕可以轉(zhuǎn)換為屬于應(yīng)用程序結(jié)構(gòu)的一部分材料。 這種戲劇性的變化突出了按鈕所能實(shí)現(xiàn)的動(dòng)作应民。

懸浮響應(yīng)式按鈕變形時(shí)话原,以有邏輯的方式在開始和結(jié)束位置之間轉(zhuǎn)換。 例如诲锹,不要通過(guò)其他材料繁仁。

變形動(dòng)畫應(yīng)該是可逆的并且可以將新的材料片轉(zhuǎn)換回浮動(dòng)動(dòng)作按鈕。

全屏

浮動(dòng)動(dòng)作按鈕可以轉(zhuǎn)換為跨越整個(gè)屏幕的新材料归园。

這種戲劇性轉(zhuǎn)變通常與創(chuàng)建新內(nèi)容相關(guān)聯(lián)黄虱。 因此,它往往不具有撤消轉(zhuǎn)換或可逆動(dòng)畫的方法庸诱。


大屏幕

大屏幕

懸浮響應(yīng)式按鈕可以附加到擴(kuò)展的應(yīng)用程序欄捻浦。

懸浮響應(yīng)式按鈕可以附加到工作表內(nèi)的工具欄或結(jié)構(gòu)元素(只要它不阻擋其他元素)晤揣。

懸浮響應(yīng)式按鈕可以附加到薄片的邊緣。

每個(gè)屏幕不要有多個(gè)浮動(dòng)動(dòng)作按鈕朱灿。

不要將懸浮響應(yīng)式按鈕與屏幕上的每個(gè)元素相關(guān)聯(lián)昧识。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市盗扒,隨后出現(xiàn)的幾起案子滞诺,更是在濱河造成了極大的恐慌,老刑警劉巖环疼,帶你破解...
    沈念sama閱讀 221,820評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件习霹,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡炫隶,警方通過(guò)查閱死者的電腦和手機(jī)淋叶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)伪阶,“玉大人煞檩,你說(shuō)我怎么就攤上這事≌ぬ” “怎么了斟湃?”我有些...
    開封第一講書人閱讀 168,324評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)檐薯。 經(jīng)常有香客問(wèn)我凝赛,道長(zhǎng),這世上最難降的妖魔是什么坛缕? 我笑而不...
    開封第一講書人閱讀 59,714評(píng)論 1 297
  • 正文 為了忘掉前任墓猎,我火速辦了婚禮,結(jié)果婚禮上赚楚,老公的妹妹穿的比我還像新娘毙沾。我一直安慰自己,他們只是感情好宠页,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,724評(píng)論 6 397
  • 文/花漫 我一把揭開白布左胞。 她就那樣靜靜地躺著,像睡著了一般举户。 火紅的嫁衣襯著肌膚如雪烤宙。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,328評(píng)論 1 310
  • 那天敛摘,我揣著相機(jī)與錄音门烂,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛屯远,可吹牛的內(nèi)容都是我干的蔓姚。 我是一名探鬼主播,決...
    沈念sama閱讀 40,897評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼慨丐,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼坡脐!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起房揭,我...
    開封第一講書人閱讀 39,804評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤备闲,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后捅暴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體恬砂,經(jīng)...
    沈念sama閱讀 46,345評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,431評(píng)論 3 340
  • 正文 我和宋清朗相戀三年蓬痒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了泻骤。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,561評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡梧奢,死狀恐怖狱掂,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情亲轨,我是刑警寧澤趋惨,帶...
    沈念sama閱讀 36,238評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站惦蚊,受9級(jí)特大地震影響器虾,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜养筒,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,928評(píng)論 3 334
  • 文/蒙蒙 一曾撤、第九天 我趴在偏房一處隱蔽的房頂上張望端姚。 院中可真熱鬧晕粪,春花似錦、人聲如沸渐裸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)昏鹃。三九已至尚氛,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間洞渤,已是汗流浹背阅嘶。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人讯柔。 一個(gè)月前我還...
    沈念sama閱讀 48,983評(píng)論 3 376
  • 正文 我出身青樓抡蛙,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親魂迄。 傳聞我的和親對(duì)象是個(gè)殘疾皇子粗截,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,573評(píng)論 2 359

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