自上次參加完回音分享會(huì)后,我下定決心要洗心革面乖乖打基礎(chǔ)茸苇,于是開啟了這個(gè)part,爭(zhēng)取兩個(gè)月不間斷更新沦寂,寫完Material Design與iOS中的組件(順便學(xué)學(xué)英語(yǔ))学密,以便今后在使用的時(shí)候完全不虛
Material Design鏈接:懸浮響應(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)绘梦。
懸浮響應(yīng)式按鈕應(yīng)該放置在離手機(jī)邊緣至少16dp的位置,平板電腦/pc上至少需要離24dp赴魁。
懸浮響應(yīng)式按鈕在聚焦時(shí)改變顏色卸奉,在選擇時(shí)上浮。
并非每屏都需要浮動(dòng)操作按鈕颖御。 浮動(dòng)操作按鈕表示app中的最重要的操作榄棵。
每個(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)操作。
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)昧识。