Material Design——Banners

#我是一個(gè)可愛的搬磚工系列# 嘗試對(duì)照英文翻譯學(xué)習(xí)MD的組件設(shè)計(jì),借此加深各種組件的應(yīng)用~

Material Design鏈接:Banners

Banners顯示突出的消息和相關(guān)可選操作。

一、使用

Banners顯示一個(gè)重要杜耙、簡潔的消息称龙,并為用戶提供地址(或取消Banner)的動(dòng)作。它要求忽略用戶的操作褐耳。
Banners應(yīng)顯示在屏幕頂部迟赃,在頂部應(yīng)用程序欄下方陪拘。它們是持久的和非模態(tài)的,允許用戶忽略它們或隨時(shí)與它們交互纤壁。

Banners傳達(dá)重要但不需要用戶操作的消息左刽。他們比 Snackbar 更突出,但帶來的干擾比 dialogs 少酌媒。


△ 原則

· 可適當(dāng)中斷? 橫幅是中斷性的欠痴,但它們的中斷級(jí)別應(yīng)該與它們所包含的信息和它們出現(xiàn)的上下文相匹配。

· 清晰? 橫幅傳達(dá)簡潔的信息秒咨,以及如果用戶與他們交互會(huì)發(fā)生什么喇辽。

· 專注性? 橫幅包含一條消息和用戶可以采取的特定操作。


二雨席、分析

1. Supporting illustration (optional)(插圖)菩咨;2.Container(卡片容器);3.Text(文案);4.Buttons(操作按鈕)

△ Banner container

承載Banner的卡片是矩形的抽米,占滿布局的全部寬度特占。在整個(gè)應(yīng)用程序中,承載Banner的卡片應(yīng)該被放置在一個(gè)一致且突出的位置云茸,與屏幕內(nèi)容共享相同的高度是目,一次只能顯示一個(gè)Banner。

一個(gè)Banner出現(xiàn)在內(nèi)容上方和頂部的應(yīng)用程序欄下面标捺。
上圖為錯(cuò)誤案例胖笛,因?yàn)橐淮沃荒苷故疽粋€(gè)banner。

△ banner信息

banner消息在應(yīng)用程序中傳遞更改或錯(cuò)誤宜岛。

banner應(yīng)該被視為整個(gè)應(yīng)用程序中消息傳遞策略的一種。

△ 按鈕

banner中的按鈕應(yīng)與banner的信息直接相關(guān)功舀,并清楚地表示banner的操作萍倡,為了清晰起見,按鈕必須配上相應(yīng)文案辟汰,而不是圖標(biāo)列敲。banner可以包含最多兩個(gè)文本按鈕,左邊放置消極的操作帖汞,右邊有確認(rèn)操作戴而,如果有足夠的空間,可以將按鈕放置在banner信息下面翩蘸,或者放在同一行上所意。

banner可能有一個(gè)或兩個(gè)次重點(diǎn)的文本按鈕。
左: 避免使用單個(gè)按鈕作為確認(rèn)banner并將其取消的方法催首,關(guān)閉banner的按鈕應(yīng)與處理其信息的操作配對(duì)扶踊;右:banner的意圖是最低限度的干擾,如果banner中的按鈕需要額外的強(qiáng)調(diào)郎任,一個(gè)包含形式的秧耗、通欄的按鈕可以用于單個(gè)突出的動(dòng)作(盡管它的突出程度可能會(huì)分散注意力)。
左: 不要在banner信息中包含鏈接舶治,所有可用的操作都應(yīng)該表示為按鈕分井;右: 不要將不同強(qiáng)調(diào)級(jí)別的按鈕組合在一起,相比于這個(gè)動(dòng)作可能會(huì)更促進(jìn)另一個(gè)動(dòng)作霉猛。
左: 除非沒有足夠的空間來顯示它們尺锚,否則不要堆疊按鈕;右: 不要使用一個(gè)通過關(guān)閉圖標(biāo)來關(guān)閉banner惜浅,所有操作都應(yīng)該用文本按鈕缩麸。

△ Supporting illustration

banner可以使用允許的說明形式來補(bǔ)充他們的信息。

圖標(biāo)可以幫助傳達(dá)banner的信息。
一個(gè)圖標(biāo)作為一個(gè)插圖可能包含不同意思杭朱,使banner在布局中過于突出阅仔,插圖支持banner信息,而不是主要的交流方法弧械。


三八酒、位置

banner應(yīng)放置在布局或屏幕的頂部。

滾動(dòng)時(shí)刃唐,banner通常會(huì)隨內(nèi)容移動(dòng)并從屏幕上滾動(dòng)羞迷,一次只能顯示一個(gè)banner。

△ Banner和頂部應(yīng)用程序欄

banner放置在屏幕頂部下方的應(yīng)用程序欄頂部画饥,它們可以是固定的衔瓮,也可以是內(nèi)容的滾動(dòng),視上下文而定:

· 在移動(dòng)設(shè)備上抖甘,它們在屏幕外滾動(dòng)內(nèi)容热鞍,與應(yīng)用程序內(nèi)容在同一高度。

· 而在桌面上衔彻,它們?nèi)匀还潭ㄔ谄聊坏捻敳哭背瑁c頂部應(yīng)用程序欄的高度相同。

Banner and a top bar
左:包含banner的表面應(yīng)該與頂部的top app bar?surface清晰地區(qū)分開來艰额;右: banner不應(yīng)該出現(xiàn)在頂部應(yīng)用程序欄前面澄港。

△ Banners 和持續(xù)搜索功能

當(dāng)存在持久搜索欄,banner會(huì)放置在搜索欄下面柄沮。

一個(gè)banner出現(xiàn)在持久搜索欄下面回梧。

△ Banners 和底部導(dǎo)航欄

當(dāng)?shù)撞繉?dǎo)航出現(xiàn)時(shí),banner應(yīng)保留在屏幕頂部祖搓。

△ Banners in wide layouts

寬布局的banner橫跨屏幕的整個(gè)寬度漂辐,它們和top app bar寬度相同,并在內(nèi)容滾動(dòng)時(shí)保持在屏幕上棕硫。

寬布局中的橫幅顯示在與頂部應(yīng)用程序欄相同的高度上髓涯。

當(dāng)垂直導(dǎo)航出現(xiàn)時(shí),banner可以出現(xiàn)在內(nèi)容上方哈扮,而不是顯示在屏幕的整個(gè)寬度上纬纪。

屏幕上帶有導(dǎo)航抽屜的banner略高于內(nèi)容(y軸上),與該內(nèi)容的高度相同滑肉。
避免堆疊多個(gè)banners包各。

△ Banners and pannable content

當(dāng)滾動(dòng)可滾動(dòng)的內(nèi)容時(shí),Banner仍保留在屏幕上靶庙。

當(dāng)滾動(dòng)可滾動(dòng)的內(nèi)容時(shí)问畅,Banner仍保留在屏幕上。


四、行為

△ 顯示Banner

當(dāng)屏幕加載內(nèi)容時(shí)护姆,通常會(huì)出現(xiàn)banner矾端,屏幕加載后出現(xiàn)的banner應(yīng)該從布局的頂部顯示在屏幕上,如果banner與內(nèi)容處于相同的高度(y軸)卵皂,則會(huì)將內(nèi)容向下推秩铆。

在同一高度的banner與內(nèi)容相同,當(dāng)它們從布局的頂部進(jìn)入時(shí)灯变,將內(nèi)容向下推送殴玛。

△ 關(guān)閉Banner

Banner必須一直在屏幕上顯示,直到被用戶取消為止添祸。

Banner可被用戶關(guān)閉滚粟。
Banner一直存在,直到用戶對(duì)其進(jìn)行操作或?qū)⑵鋭h除為止刃泌。



END.THANKS FOR YOUR READING~

如有不當(dāng)凡壤,還請多多指教~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市蔬咬,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌沐寺,老刑警劉巖林艘,帶你破解...
    沈念sama閱讀 210,914評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異混坞,居然都是意外死亡狐援,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評(píng)論 2 383
  • 文/潘曉璐 我一進(jìn)店門究孕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來啥酱,“玉大人,你說我怎么就攤上這事厨诸∠庖螅” “怎么了?”我有些...
    開封第一講書人閱讀 156,531評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵微酬,是天一觀的道長绘趋。 經(jīng)常有香客問我,道長颗管,這世上最難降的妖魔是什么陷遮? 我笑而不...
    開封第一講書人閱讀 56,309評(píng)論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮垦江,結(jié)果婚禮上帽馋,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好绽族,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,381評(píng)論 5 384
  • 文/花漫 我一把揭開白布姨涡。 她就那樣靜靜地躺著,像睡著了一般项秉。 火紅的嫁衣襯著肌膚如雪绣溜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,730評(píng)論 1 289
  • 那天娄蔼,我揣著相機(jī)與錄音怖喻,去河邊找鬼。 笑死岁诉,一個(gè)胖子當(dāng)著我的面吹牛锚沸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播涕癣,決...
    沈念sama閱讀 38,882評(píng)論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼哗蜈,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了坠韩?” 一聲冷哼從身側(cè)響起距潘,我...
    開封第一講書人閱讀 37,643評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎只搁,沒想到半個(gè)月后音比,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,095評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡氢惋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,448評(píng)論 2 325
  • 正文 我和宋清朗相戀三年洞翩,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片焰望。...
    茶點(diǎn)故事閱讀 38,566評(píng)論 1 339
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡骚亿,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出熊赖,到底是詐尸還是另有隱情来屠,我是刑警寧澤,帶...
    沈念sama閱讀 34,253評(píng)論 4 328
  • 正文 年R本政府宣布震鹉,位于F島的核電站的妖,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏足陨。R本人自食惡果不足惜嫂粟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,829評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望墨缘。 院中可真熱鬧星虹,春花似錦零抬、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至卸亮,卻和暖如春忽妒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背兼贸。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評(píng)論 1 264
  • 我被黑心中介騙來泰國打工段直, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人溶诞。 一個(gè)月前我還...
    沈念sama閱讀 46,248評(píng)論 2 360
  • 正文 我出身青樓鸯檬,卻偏偏與公主長得像,于是被迫代替她去往敵國和親螺垢。 傳聞我的和親對(duì)象是個(gè)殘疾皇子喧务,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,440評(píng)論 2 348

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