Material Design — App bars: top

自上次參加完回音分享會后誉尖,我下定決心要洗心革面乖乖打基礎烤咧,于是開啟了這個part,爭取兩個月不間斷更新酪耳,寫完Material Design與iOS中的組件(順便學學英語)浓恳,以便今后在使用的時候完全不虛

App bars: top

Material Design鏈接:App bars:top

Top app bar?顯示與當前屏幕相關的信息和操作刹缝。


用法

Top app bar 提供與當前屏幕相關的內(nèi)容和操作。 可用于品牌颈将,屏幕 title梢夯,導航和操作。

Top app bar 可以轉化為一個?contextual?action bar晴圾。

原則

·始終保持

Top app bar 出現(xiàn)在 app 中每個屏幕的頂部颂砸,并且可以在滾動時消失。

·引導

Top app bars 提供了一種可靠的方式來引導用戶瀏覽 app死姚。

·一致

Top app bars 有一個一致的位置和內(nèi)容來增加熟悉度人乓。


類型

Regular
Contextual action bar

Contextual action bars 為選定的項目提供操作。Top app bar可以轉換為?contextual action bar都毒,在采取行動或將其解除前保持活動狀態(tài)色罚。


分解

在 top app bar 中推薦的元素放置順序是(從左到右的語言順序中):

·將導航放置在最左側

·將任何 titles 放在導航的右側

·將 contextual actions 置于導航的右側

·將 overflow menu(如果使用)放在最右側

對于從右向左的語言順序,應該翻轉放置位置账劲。

Bar

Bar 包含 top app bar?的內(nèi)容保屯。 各種 bar 高度可供選擇:

·Regular

·Prominent

·Dense (desktop only)

·Prominent dense (desktop only)


Prominent

Prominent top app bars 可用于更長的?titles,用于存放圖像涤垫,或為 top app bar?提供更強大的存在感姑尺。

Dense (desktop only)

The top app bar may be condensed on desktop to accommodate denser layouts.

Top app bar 可能會在電腦上濃縮以適應更密集的布局。

Prominent dense

電腦上?prominent top app bars on 可以具有密集狀態(tài)以適應更密集的布局蝠猬。

Bars 中的圖像

Bars 可以包含圖像切蟋。 由于 Prominent top app bars 提供了更多的空間,因此推薦在其上使用圖像榆芦。

不要使用讓?top app bar 文字和圖標難以辨認的圖像柄粹。

Navigation icon (optional)

Navigation icon 是可選的。 當它出現(xiàn)在 app bar?中時匆绣,它將對齊欄的左側驻右。

它可以采取以下任何一種形式:

·一個?menu icon,打開一個 navigation drawer

·向上箭頭崎淳,用于導航 app 的層次結構

·后退箭頭堪夭,返回到前一個屏幕

Title (optional)

App bar title 可以用來描述:

·用戶當前所在的屏幕

·用戶當前所在的部分

·正在使用的 app

默認情況下,titles 在電腦桌面上左對齊拣凹。 手機和平板電腦上標題的默認位置取決于平臺森爽。?

如果標題文本很長,請使用?prominent app bar?并將標題折疊為兩行

Action items and overflow menu (optional)

App?操作位于?app bar?的右側嚣镜,可以是 icon爬迟,也可以是?overflow menu。Overflow menus?在移動平臺上有所不同菊匿。?

Icon 的位置

將最常用的操作放在左側付呕,越往右放置越少用的操作计福。 任何不適合?app bar?的其余操作都可能會進入?overflow menu。

App bar?寬度發(fā)生變化時徽职,操作會進入和退出?overflow menu棒搜,例如設備是從橫向旋轉到縱向。?

通過將最常用的動作(1)放在最左邊活箕,將第二常用的動作(2)放在最右邊來對動作項進行排序力麸,依此類推。 任何剩余的或次要的動作都應放置在?overflow menu?中(3)

行為

滾動

滾動時育韩,e top app bar?可保留原位克蚂,或以下列方式轉換:

·向上滾動隱藏?top app bar

·向下滾動顯示?top app bar

當?top app bar滾動時,其海拔在其他元素之上變得非常明顯筋讨。

Top app bars?可以與內(nèi)容位于同一高度埃叭。 在滾動時,它們會增加海拔并讓內(nèi)容在它們后面滾動

當向上滾動時悉罕,使用帶有圖像的?prominent top app bars?可以轉換為正常的?top app bars赤屋。 他們不應該返回到?prominent?模式,直到用戶滾動回頁面的頂部壁袄。

Nesting actions

當屏幕大小調(diào)整時类早,?top app bar?會隨之調(diào)整大小。 操作合并到?overflow menu?中嗜逻。

動作定位

操作從右向左移動到?overflow menu?涩僻,使最常用的操作最后移到?overflow menu。


Contextual action bar?

用法

?top app bar?可以轉換為?contextual action bar?以向選定項目提供上下文操作栈顷。 例如逆日,在用戶從圖庫中選擇照片時,Top app bar?轉換為與選擇的照片相關的動作的?contextual app bar萄凤。

當?top app bar?轉換為?contextual action bar室抽,會發(fā)生以下更改:

·Bar顏色改變

·導航圖標被關閉圖標替換

·Top app bar?標題文本轉換為?contextual action bar?

·Top app bar?動作被替換為?contextual?動作

關閉后,contextual action bar?會轉換回?top app bar靡努。

組成

Bar?

當?top app bar?變換為?contextual action bar?時坪圾,bar?應更改顏色以指示狀態(tài)更改。

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末颤难,一起剝皮案震驚了整個濱河市神年,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌行嗤,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件垛耳,死亡現(xiàn)場離奇詭異栅屏,居然都是意外死亡飘千,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門栈雳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來护奈,“玉大人,你說我怎么就攤上這事哥纫∶蛊欤” “怎么了?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵蛀骇,是天一觀的道長厌秒。 經(jīng)常有香客問我,道長擅憔,這世上最難降的妖魔是什么鸵闪? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮暑诸,結果婚禮上蚌讼,老公的妹妹穿的比我還像新娘。我一直安慰自己个榕,他們只是感情好篡石,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著西采,像睡著了一般夏志。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上苛让,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天沟蔑,我揣著相機與錄音,去河邊找鬼狱杰。 笑死瘦材,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的仿畸。 我是一名探鬼主播食棕,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼错沽!你這毒婦竟也來了簿晓?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤千埃,失蹤者是張志新(化名)和其女友劉穎憔儿,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體放可,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡谒臼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年朝刊,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蜈缤。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡拾氓,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出底哥,到底是詐尸還是另有隱情咙鞍,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布趾徽,位于F島的核電站续滋,受9級特大地震影響,放射性物質發(fā)生泄漏附较。R本人自食惡果不足惜吃粒,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望拒课。 院中可真熱鬧徐勃,春花似錦、人聲如沸早像。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽卢鹦。三九已至臀脏,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間冀自,已是汗流浹背揉稚。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留熬粗,地道東北人搀玖。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像驻呐,于是被迫代替她去往敵國和親灌诅。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

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