iOS11人機(jī)交互指南—欄—導(dǎo)航欄(Navigation Bar)

本文翻譯自iOS11蘋果系統(tǒng)的人機(jī)交互官方指南,原文鏈接

導(dǎo)航欄

導(dǎo)航欄位于界面的上方陶舞,狀態(tài)欄下面司抱,用戶可以通過導(dǎo)航欄切換到其他頁面。當(dāng)一個(gè)新頁面運(yùn)行時(shí)铐炫,通常會(huì)有一個(gè)返回按鈕和前一頁面的標(biāo)題出現(xiàn)在導(dǎo)航欄的左邊垒手。有時(shí),導(dǎo)航欄的右側(cè)會(huì)有一個(gè)控件用于管理當(dāng)前頁面中的內(nèi)容倒信,比如編輯或者完成按鈕科贬。在分屏視圖中,導(dǎo)航欄可能出現(xiàn)在拆分視圖的單個(gè)窗格中鳖悠。導(dǎo)航欄是半透明的榜掌,可能帶有背景色优妙。當(dāng)鍵盤在屏幕上、用戶使用手勢或者視圖調(diào)整大小時(shí)憎账,導(dǎo)航欄可以隱藏套硼。

在顯示全屏內(nèi)容時(shí),可以考慮暫時(shí)隱藏掉導(dǎo)航欄胞皱。當(dāng)用戶想專注于頁面內(nèi)容時(shí)熟菲,導(dǎo)航欄可能會(huì)讓用戶分心,這時(shí)暫時(shí)隱藏掉導(dǎo)航欄可以給用戶一個(gè)更加沉浸式的體驗(yàn)朴恳。例如:當(dāng)查看全屏照片時(shí)抄罕,照片會(huì)隱藏掉導(dǎo)航欄及其他交互元素。如果你想在你的APP中使用這種交互行為于颖,要確保用戶可以用簡單的手勢恢復(fù)導(dǎo)航欄呆贿,比如點(diǎn)擊屏幕。

更多開發(fā)者指南森渐,請(qǐng)看 UINavigationBar.

TIP:不需要導(dǎo)航欄或者需要多個(gè)控件來管理內(nèi)容時(shí)做入,可以使用工具欄.。詳情請(qǐng)看 Toolbars.

導(dǎo)航欄標(biāo)題

可以將當(dāng)前頁面的標(biāo)題放在導(dǎo)航欄中同衣。多數(shù)情況下竟块,標(biāo)題可以幫助用戶快速了解他們查看的內(nèi)容。如果導(dǎo)航欄的標(biāo)題看起來多余則可以將標(biāo)題空出耐齐。舉個(gè)例子浪秘,由于Notes的第一行已經(jīng)展示了上下文的內(nèi)容,因此Notes沒有在導(dǎo)航欄給當(dāng)前的筆記命名埠况。

可以使用大標(biāo)題來額外強(qiáng)調(diào)上下文耸携。在一些APP中,加粗的大標(biāo)題可以幫助用戶在瀏覽和搜索時(shí)定位辕翰。例如夺衍,在標(biāo)簽控件(tabbed layout)中,大標(biāo)題可以幫助用戶明確活動(dòng)標(biāo)簽同時(shí)在用戶滾動(dòng)到頁面頂部時(shí)通知用戶喜命。電話APP使用這種標(biāo)簽控件的方式沟沙,而音樂APP為不同的內(nèi)容區(qū)域使用大標(biāo)題,例如專輯壁榕、藝術(shù)家矛紫、播放列表和收音機(jī)。當(dāng)用戶下滑頁面時(shí)护桦,大標(biāo)題轉(zhuǎn)換成普通標(biāo)題含衔。大標(biāo)題在所有的APP中都是沒有實(shí)際意義的煎娇,不應(yīng)該與頁面內(nèi)容相競爭二庵。盡管Clock這款A(yù)PP有標(biāo)簽控件贪染,但大標(biāo)題是不需要的因?yàn)槊總€(gè)標(biāo)簽都有一個(gè)清晰可辨的布局。更多開發(fā)者指南催享,請(qǐng)看prefersLargeTitles.

導(dǎo)航欄控件

避免在導(dǎo)航欄放太多控件杭隙。通常導(dǎo)航欄的內(nèi)容應(yīng)當(dāng)只有標(biāo)題、返回按鈕和一個(gè)管理當(dāng)前頁面內(nèi)容的控件因妙。當(dāng)你在導(dǎo)航欄中使用分段控件(segmented control)時(shí)痰憎,導(dǎo)航欄不應(yīng)當(dāng)有標(biāo)題和其他控件。

使用標(biāo)準(zhǔn)的返回按鈕攀涵。用戶知道標(biāo)準(zhǔn)的返回按鈕可以讓他們返回之前的頁面铣耘,如果你想用自定義的返回按鈕,確保它看起來依然像一個(gè)返回按鈕以故,并且在你APP的其余頁面中保持一致蜗细。

不要使用多段的面包屑導(dǎo)航。返回按鈕只執(zhí)行返回上一個(gè)頁面這一單一的操作怒详。如果你覺得沒有進(jìn)入當(dāng)前頁面的完整路徑會(huì)導(dǎo)致用戶迷惑時(shí)炉媒,可以考慮讓APP的層次結(jié)構(gòu)更加扁平。

給文字標(biāo)題按鈕留足夠的空間昆烁。如果你的導(dǎo)航欄包含多個(gè)文本按鈕吊骤,這些按鈕上的文字可能會(huì)擠在一起,使按鈕不易區(qū)分静尼。這時(shí)可以在不同按鈕之間添加固定的空間來區(qū)分不同按鈕白粉。更多開發(fā)者指南,請(qǐng)看UIBarButtonItem中的常量值UIBarButtonSystemItemFixedSpace.

可以在導(dǎo)航欄使用分段控件來展開APP的信息層次結(jié)構(gòu)鼠渺。如果你想在導(dǎo)航欄使用分段控件蜗元,請(qǐng)僅僅在信息層次結(jié)構(gòu)的頂層使用,同事確保在低信息層次結(jié)構(gòu)使用正確的返回按鈕標(biāo)題系冗。更多開發(fā)者指南奕扣,請(qǐng)看Segmented Controls.

分段控件
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市掌敬,隨后出現(xiàn)的幾起案子惯豆,更是在濱河造成了極大的恐慌,老刑警劉巖奔害,帶你破解...
    沈念sama閱讀 218,525評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件楷兽,死亡現(xiàn)場離奇詭異,居然都是意外死亡华临,警方通過查閱死者的電腦和手機(jī)芯杀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人揭厚,你說我怎么就攤上這事却特。” “怎么了筛圆?”我有些...
    開封第一講書人閱讀 164,862評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵裂明,是天一觀的道長。 經(jīng)常有香客問我太援,道長闽晦,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,728評(píng)論 1 294
  • 正文 為了忘掉前任提岔,我火速辦了婚禮仙蛉,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘碱蒙。我一直安慰自己捅儒,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,743評(píng)論 6 392
  • 文/花漫 我一把揭開白布振亮。 她就那樣靜靜地躺著巧还,像睡著了一般。 火紅的嫁衣襯著肌膚如雪坊秸。 梳的紋絲不亂的頭發(fā)上麸祷,一...
    開封第一講書人閱讀 51,590評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音褒搔,去河邊找鬼阶牍。 笑死,一個(gè)胖子當(dāng)著我的面吹牛星瘾,可吹牛的內(nèi)容都是我干的走孽。 我是一名探鬼主播,決...
    沈念sama閱讀 40,330評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼琳状,長吁一口氣:“原來是場噩夢啊……” “哼磕瓷!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起念逞,我...
    開封第一講書人閱讀 39,244評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤困食,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后翎承,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體硕盹,經(jīng)...
    沈念sama閱讀 45,693評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,885評(píng)論 3 336
  • 正文 我和宋清朗相戀三年叨咖,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了瘩例。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片啊胶。...
    茶點(diǎn)故事閱讀 40,001評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖垛贤,靈堂內(nèi)的尸體忽然破棺而出焰坪,到底是詐尸還是另有隱情,我是刑警寧澤南吮,帶...
    沈念sama閱讀 35,723評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站誊酌,受9級(jí)特大地震影響部凑,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜碧浊,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,343評(píng)論 3 330
  • 文/蒙蒙 一涂邀、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧箱锐,春花似錦比勉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至臊恋,卻和暖如春衣洁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背抖仅。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評(píng)論 1 270
  • 我被黑心中介騙來泰國打工坊夫, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人撤卢。 一個(gè)月前我還...
    沈念sama閱讀 48,191評(píng)論 3 370
  • 正文 我出身青樓环凿,卻偏偏與公主長得像,于是被迫代替她去往敵國和親放吩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子智听,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,955評(píng)論 2 355

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,144評(píng)論 25 707
  • 導(dǎo)航欄 導(dǎo)航欄出現(xiàn)在頂部狀態(tài)欄的下方,并且能夠跨越一系列不同層級(jí)的屏幕界面存在渡紫。當(dāng)展開一個(gè)新的界面時(shí)瞭稼,導(dǎo)航欄的左側(cè)...
    小白面包閱讀 1,238評(píng)論 6 6
  • 忙的焦頭爛額 領(lǐng)導(dǎo)還幸災(zāi)樂禍 忙是你沒本事吧 如果你非要這樣認(rèn)為 我也無話可說 世界上有被動(dòng)和主動(dòng)兩種人 主動(dòng)的人...
    風(fēng)夢閱讀 273評(píng)論 0 0
  • 浸泡村英語廣州校區(qū)2018年春季Report Show圓滿謝幕集灌,期間學(xué)員們?nèi)硇耐度牖诒ⅲ耧枬M复哆,或戲精附體,或本色...
    Smile2018440閱讀 434評(píng)論 0 1
  • 本來心緒就不寧腌零,為了一個(gè)言語惡毒的家伙梯找!在廣場上坐了二個(gè)多小時(shí),我還是回家了益涧!看到我锈锤,她開始收拾東西準(zhǔn)備出去,我吃...
    華姐手心里的溫柔閱讀 184評(píng)論 0 0