#我是一個(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í)與它們交互纤壁。
△ 原則
· 可適當(dāng)中斷? 橫幅是中斷性的欠痴,但它們的中斷級(jí)別應(yīng)該與它們所包含的信息和它們出現(xiàn)的上下文相匹配。
· 清晰? 橫幅傳達(dá)簡潔的信息秒咨,以及如果用戶與他們交互會(huì)發(fā)生什么喇辽。
· 專注性? 橫幅包含一條消息和用戶可以采取的特定操作。
二雨席、分析
△ Banner container
承載Banner的卡片是矩形的抽米,占滿布局的全部寬度特占。在整個(gè)應(yīng)用程序中,承載Banner的卡片應(yīng)該被放置在一個(gè)一致且突出的位置云茸,與屏幕內(nèi)容共享相同的高度是目,一次只能顯示一個(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信息下面翩蘸,或者放在同一行上所意。
△ Supporting illustration
banner可以使用允許的說明形式來補(bǔ)充他們的信息。
三八酒、位置
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)用程序欄的高度相同。
△ Banners 和持續(xù)搜索功能
當(dāng)存在持久搜索欄,banner會(huì)放置在搜索欄下面柄沮。
△ 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í)保持在屏幕上棕硫。
當(dāng)垂直導(dǎo)航出現(xiàn)時(shí),banner可以出現(xiàn)在內(nèi)容上方哈扮,而不是顯示在屏幕的整個(gè)寬度上纬纪。
△ Banners and pannable content
當(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)容向下推秩铆。
△ 關(guān)閉Banner
Banner必須一直在屏幕上顯示,直到被用戶取消為止添祸。
END.THANKS FOR YOUR READING~
如有不當(dāng)凡壤,還請多多指教~