国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

要想發(fā)布一款能夠位于App Store排行榜之首的產(chǎn)品，產(chǎn)品在質(zhì)量和功能上的高標(biāo)準(zhǔn)表現(xiàn)是必不可少的，而為了達(dá)到這種高度，我們應(yīng)該如何做呢？本文主要講述的是 iOS 12 界面交互設(shè)計(jì)指南中的欄的部分，一起來看看~

一、導(dǎo)航欄

導(dǎo)航欄顯示在狀態(tài)欄下方的應(yīng)用程序屏幕頂部，可以通過一系列分層屏幕進(jìn)行導(dǎo)航。當(dāng)顯示新屏幕時(shí)，通常標(biāo)有前一屏幕標(biāo)題的后退按鈕顯示在欄的左側(cè)。有時(shí)，導(dǎo)航欄的右側(cè)包含一個(gè)控件，如“編輯”或“完成”按鈕，用于管理活動(dòng)視圖中的內(nèi)容。

在拆分視圖中，導(dǎo)航欄可能會(huì)顯示在拆分視圖的單個(gè)窗格中。導(dǎo)航欄是半透明的，可以具有背景色調(diào)，并且可以配置為在鍵盤在屏幕上，發(fā)生手勢或視圖調(diào)整大小時(shí)隱藏。

在顯示全屏內(nèi)容時(shí)，請(qǐng)考慮暫時(shí)隱藏導(dǎo)航欄：

當(dāng)您想要關(guān)注內(nèi)容時(shí)，導(dǎo)航欄可能會(huì)分散注意力，暫時(shí)隱藏欄以提供更加身臨其境的體驗(yàn)。查看全屏照片時(shí)，照片會(huì)隱藏導(dǎo)航欄和其他界面元素。如果您實(shí)現(xiàn)此類行為，請(qǐng)讓用戶使用簡單的手勢（如點(diǎn)按）恢復(fù)導(dǎo)航欄。

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

（1）考慮在導(dǎo)航欄中顯示當(dāng)前視圖的標(biāo)題

在大多數(shù)情況下，標(biāo)題可以幫助人們理解他們正在看什么。但是，如果標(biāo)題導(dǎo)航欄看起來多余，則可以將標(biāo)題留空。例如：Notes沒有標(biāo)題當(dāng)前注釋，因?yàn)榈谝恍袃?nèi)容提供了所需的所有上下文。

標(biāo)準(zhǔn)名稱

大標(biāo)題

（2）當(dāng)您需要特別強(qiáng)調(diào)上下文時(shí)，請(qǐng)使用大型標(biāo)題

在某些應(yīng)用程序中，大型標(biāo)題的大而粗體的文本可以幫助人們在瀏覽和搜索時(shí)定位。例如：在選項(xiàng)卡式布局中，大型標(biāo)題可以幫助澄清活動(dòng)選項(xiàng)卡，并在用戶滾動(dòng)到頂部時(shí)通知用戶。Phone使用這種方法，而Music使用大型標(biāo)題來區(qū)分內(nèi)容區(qū)域，如：專輯、藝術(shù)家、播放列表和廣播。

當(dāng)用戶開始滾動(dòng)內(nèi)容時(shí)，大標(biāo)題將轉(zhuǎn)換為標(biāo)準(zhǔn)標(biāo)題。大型游戲在所有應(yīng)用程序中都沒有意義，絕不應(yīng)與內(nèi)容競爭。盡管Clock應(yīng)用程序具有選項(xiàng)卡式布局，但不需要大型標(biāo)題，因?yàn)槊總€(gè)選項(xiàng)卡都具有獨(dú)特的可識(shí)別布局。

導(dǎo)航欄控件

（1）避免擁擠太多控件的導(dǎo)航欄

通常，導(dǎo)航欄應(yīng)該只包含視圖的當(dāng)前標(biāo)題，后退按鈕和一個(gè)管理視圖內(nèi)容的控件。如果在導(dǎo)航欄中使用分段控件，則欄不應(yīng)包含標(biāo)題或除分段控件之外的任何控件。

（2）使用標(biāo)準(zhǔn)后退按鈕

人們知道標(biāo)準(zhǔn)后退按鈕可以讓他們回溯信息層次結(jié)構(gòu)。但是，如果您實(shí)現(xiàn)自定義后退按鈕，請(qǐng)確保它仍然看起來像后退按鈕，行為直觀，與您的界面的其余部分匹配，并在整個(gè)應(yīng)用程序中始終如一地實(shí)施。如果將系統(tǒng)提供的后退按鈕V形圖標(biāo)替換為自定義圖像，也可以提供自定義蒙版圖像。iOS使用此蒙版在過渡期間為按鈕標(biāo)題設(shè)置動(dòng)畫。

（3）不要包含多段面包屑路徑

后退按鈕始終執(zhí)行單個(gè)操作，返回上一個(gè)屏幕，如果您認(rèn)為人們可能在沒有當(dāng)前屏幕的完整路徑的情況下迷路，請(qǐng)考慮展平應(yīng)用的層次結(jié)構(gòu)。

（4）給文本標(biāo)題按鈕足夠的空間

如果導(dǎo)航欄包含多個(gè)文本按鈕，則這些按鈕的文本可能會(huì)一起運(yùn)行，從而使按鈕難以區(qū)分。通過在按鈕之間插入固定的空格項(xiàng)來添加分隔。

（5）考慮在導(dǎo)航欄中使用分段控件來展平應(yīng)用程序的信息層次結(jié)構(gòu)

如果在導(dǎo)航欄中使用分段控件，則只在層次結(jié)構(gòu)的頂層執(zhí)行此操作，并確保在較低級(jí)別選擇準(zhǔn)確的后退按鈕標(biāo)題。

二、搜索欄

搜索欄允許人們通過在字段中鍵入文本來搜索大量值，搜索欄可以單獨(dú)顯示，也可以在導(dǎo)航欄或內(nèi)容視圖中顯示。當(dāng)在導(dǎo)航欄中顯示時(shí)，搜索欄可以固定到導(dǎo)航欄，以便始終可以訪問，或者可以折疊直到用戶向下滑動(dòng)以顯示它。

使用搜索欄而不是文本字段來實(shí)現(xiàn)搜索，文本字段沒有人們期望的標(biāo)準(zhǔn)搜索欄外觀。

啟用“清除”按鈕，大多數(shù)搜索欄都包含一個(gè)清除該字段內(nèi)容的清除按鈕。

適當(dāng)時(shí)啟用“取消”按鈕，大多數(shù)專用搜索欄都包含一個(gè)取消按鈕，可立即終止搜索。

清除按鈕

取消按鈕

如有必要，請(qǐng)?jiān)谒阉鳈谥刑峁┨崾竞蜕舷挛?。搜索欄的字段可以包含占位符文本，如“搜索服裝，鞋子和配件”或簡單地“搜索”，作為搜索上下文的提醒。帶有適當(dāng)標(biāo)點(diǎn)符號(hào)的簡潔單行提示，也可以直接顯示在搜索欄上方以提供指導(dǎo)。股票使用提示，讓人們知道他們可以輸入公司名稱或股票代碼。

占位符文本

介紹性文字

考慮在搜索欄下方提供有用的快捷方式和其他內(nèi)容，使用搜索欄下方的區(qū)域可以幫助人們更快地獲取內(nèi)容。例如：Safari會(huì)在您點(diǎn)按搜索字段后立即顯示您的書簽。選擇一個(gè)向右轉(zhuǎn)，不輸入任何搜索字詞。當(dāng)您在搜索字段中鍵入時(shí)，股票會(huì)顯示結(jié)果列表。無需再鍵入任何字符即可隨時(shí)點(diǎn)按一個(gè)。

范圍欄

可以將范圍欄添加到搜索欄以讓人們優(yōu)化搜索范圍。

有利于改進(jìn)搜索結(jié)果，包括范圍欄。當(dāng)有明確定義的類別可供搜索時(shí)，范圍欄可能很有用。但是，最好改進(jìn)搜索結(jié)果，因此不需要確定范圍。

三、狀態(tài)欄

狀態(tài)欄出現(xiàn)在屏幕的上邊緣，顯示有關(guān)設(shè)備當(dāng)前狀態(tài)的有用信息，如：時(shí)間、移動(dòng)電話運(yùn)營商、網(wǎng)絡(luò)狀態(tài)和電池電量。狀態(tài)欄中顯示的實(shí)際信息，因設(shè)備和系統(tǒng)配置而異。

（1）使用系統(tǒng)提供的狀態(tài)欄

人們希望狀態(tài)欄在整個(gè)系統(tǒng)范圍內(nèi)保持一致，請(qǐng)勿使用自定義狀態(tài)欄替換它。

燈狀態(tài)欄

黑暗狀態(tài)欄

（2）使用您的應(yīng)用程序設(shè)計(jì)協(xié)調(diào)狀態(tài)欄樣式

狀態(tài)欄的文本和指示器的視覺樣式可以是淺色或深色，可以針對(duì)您的應(yīng)用進(jìn)行全局設(shè)置，也可以針對(duì)不同的屏幕單獨(dú)進(jìn)行設(shè)置。黑暗狀態(tài)欄的效果遠(yuǎn)遠(yuǎn)高于淺色內(nèi)容，而明亮狀態(tài)欄的效果遠(yuǎn)遠(yuǎn)高于深色內(nèi)容。

（3）狀態(tài)欄下隱藏的內(nèi)容

默認(rèn)情況下，狀態(tài)欄的背景是透明的，允許下方的內(nèi)容顯示。保持狀態(tài)欄可讀，并不暗示其背后的內(nèi)容是交互式的。

有幾種常見的技術(shù)可以做到這一點(diǎn)：

1. 在您的應(yīng)用中使用導(dǎo)航欄，該導(dǎo)航欄會(huì)自動(dòng)顯示狀態(tài)欄背景，并確保內(nèi)容不會(huì)顯示在狀態(tài)欄下。
2. 在狀態(tài)欄后面顯示自定義圖像，如漸變色或純色。
3. 在狀態(tài)欄后面放置模糊的視圖。

（4）在顯示全屏媒體時(shí)，請(qǐng)考慮暫時(shí)隱藏狀態(tài)欄

當(dāng)用戶嘗試關(guān)注媒體時(shí)，狀態(tài)欄可能會(huì)分散注意力，暫時(shí)隱藏這些元素以提供更加身臨其境的體驗(yàn)。例如：當(dāng)用戶瀏覽全屏照片時(shí)，“照片”應(yīng)用會(huì)隱藏狀態(tài)欄和其他界面元素。

（5）避免永久隱藏狀態(tài)欄

如果沒有狀態(tài)欄，用戶必須離開您的應(yīng)用以檢查時(shí)間或查看他們是否有Wi-Fi連接。讓人們通過使用簡單，可發(fā)現(xiàn)的手勢重新顯示隱藏的狀態(tài)欄。在“照片”應(yīng)用中瀏覽全屏照片時(shí)，只需點(diǎn)按一次即可顯示狀態(tài)欄。

（6）使用狀態(tài)欄表示網(wǎng)絡(luò)活動(dòng)

當(dāng)您的應(yīng)用使用網(wǎng)絡(luò)時(shí)，尤其是長時(shí)間操作時(shí)，請(qǐng)顯示網(wǎng)絡(luò)活動(dòng)狀態(tài)欄指示器，以便人們知道正在進(jìn)行活動(dòng)。

四、標(biāo)簽欄

標(biāo)簽欄顯示在應(yīng)用程序屏幕的底部，可以在應(yīng)用程序的不同部分之間快速切換。標(biāo)簽欄是半透明的，可以具有背景色調(diào)，在所有屏幕方向上保持相同的高度，并且在顯示鍵盤時(shí)隱藏。標(biāo)簽欄可能包含任意數(shù)量的標(biāo)簽，但可見標(biāo)簽的數(shù)量因設(shè)備大小和方向而異。

如果由于水平空間有限而無法顯示某些選項(xiàng)卡，則最終的可見選項(xiàng)卡將變?yōu)椤案唷边x項(xiàng)卡，從而在單獨(dú)的屏幕上顯示列表中的其他選項(xiàng)卡。

（1）使用標(biāo)簽欄在應(yīng)用級(jí)別組織信息

標(biāo)簽欄是展平信息層次結(jié)構(gòu)，并同時(shí)提供對(duì)多個(gè)對(duì)等信息類別，或模式的訪問的好方法。

（2）嚴(yán)格使用標(biāo)簽欄進(jìn)行導(dǎo)航

標(biāo)簽欄按鈕不應(yīng)用于執(zhí)行操作，如果需要提供對(duì)當(dāng)前視圖中的元素起作用的控件，請(qǐng)改用工具欄。

（3）避免使用太多標(biāo)簽

每個(gè)附加選項(xiàng)卡都會(huì)縮小用于選擇選項(xiàng)卡的可點(diǎn)擊區(qū)域，并增加應(yīng)用程序的復(fù)雜性，從而使查找信息變得更加困難。雖然“更多”選項(xiàng)卡可以顯示額外的選項(xiàng)卡，但這需要額外的點(diǎn)擊，并且空間使用率很低。僅包含基本選項(xiàng)卡，并使用信息層次結(jié)構(gòu)所需的最少選項(xiàng)卡。

選項(xiàng)卡太少也可能是一個(gè)問題，因?yàn)樗赡軙?huì)使您的界面顯示為斷開連接。通常，在iPhone上使用三到五個(gè)標(biāo)簽。iPad上還有一些是可以接受的。

（4）當(dāng)功能不可用時(shí)，請(qǐng)勿刪除或禁用選項(xiàng)卡

如果選項(xiàng)卡在某些情況下可用但在其他情況下不可用，則應(yīng)用程序的界面將變得不穩(wěn)定且不可預(yù)測。確保始終啟用所有選項(xiàng)卡，并解釋選項(xiàng)卡內(nèi)容不可用的原因。例如：如果iOS設(shè)備上沒有歌曲，則音樂應(yīng)用中的“我的音樂”選項(xiàng)卡會(huì)說明如何下載歌曲。

（5）始終在附加視圖中切換上下文

要保持界面可預(yù)測，選擇選項(xiàng)卡應(yīng)始終影響直接連接到選項(xiàng)卡欄的視圖，而不是影響屏幕上其他位置的其他視圖。例如：選擇拆分視圖左側(cè)的選項(xiàng)卡不應(yīng)導(dǎo)致拆分視圖的右側(cè)突然更改，選擇彈出窗口中的選項(xiàng)卡不應(yīng)導(dǎo)致彈出窗口后面的視圖發(fā)生更改。

（6）確保標(biāo)簽欄圖標(biāo)在視覺上一致且平衡

系統(tǒng)為常見用例提供了一系列預(yù)定義圖標(biāo)。

（7）使用徽章進(jìn)行不顯眼的溝通

您可以在選項(xiàng)卡上顯示徽章，包含白色文本和數(shù)字或感嘆號(hào)的紅色橢圓，以指示新信息與該視圖或模式相關(guān)聯(lián)。

提示

了解標(biāo)簽欄和工具欄之間的區(qū)別非常重要，因?yàn)檫@兩種類型的欄都顯示在應(yīng)用程序屏幕的底部。選項(xiàng)卡欄允許用戶在應(yīng)用程序的不同部分之間快速切換，例如：Clock應(yīng)用程序中的Alarm、Stopwatch和Timer選項(xiàng)卡。工具欄包含用于執(zhí)行與當(dāng)前上下文相關(guān)的操作的按鈕，例如：創(chuàng)建項(xiàng)目、刪除項(xiàng)目，添加注釋或拍照，標(biāo)簽欄和工具欄永遠(yuǎn)不會(huì)出現(xiàn)在同一視圖中。

五、工具欄

工具欄顯示在應(yīng)用程序屏幕的底部，其中包含用于執(zhí)行與當(dāng)前視圖或其中內(nèi)容相關(guān)的操作的按鈕。工具欄是半透明的，可能具有背景色調(diào)，并且當(dāng)人們不太可能需要它們時(shí)經(jīng)常隱藏。例如：在Safari中，當(dāng)您開始滾動(dòng)頁面時(shí)，工具欄會(huì)隱藏，因?yàn)槟赡苷陂喿x。您可以通過點(diǎn)擊屏幕底部再次顯示它。當(dāng)鍵盤在屏幕上時(shí)，工具欄也會(huì)隱藏。

（1）提供相關(guān)工具欄按鈕

工具欄應(yīng)包含在當(dāng)前上下文中有意義的常用命令。

（2）考慮圖標(biāo)或文本標(biāo)題按鈕是否適合您的應(yīng)用

當(dāng)您需要三個(gè)以上的工具欄按鈕時(shí)，圖標(biāo)效果很好。如果您有三個(gè)或更少的按鈕，文本有時(shí)可以更清晰。例如：在日歷中，使用文本是因?yàn)閳D標(biāo)會(huì)令人困惑，文本的使用還允許“收件箱”按鈕顯示日歷和事件邀請(qǐng)的計(jì)數(shù)。

（3）避免在工具欄中使用分段控件

分段控件允許人們切換上下文，而工具欄特定于當(dāng)前屏幕。如果您需要提供切換上下文的方法，請(qǐng)考慮使用標(biāo)簽欄。

（4）給文本標(biāo)題按鈕足夠的空間

如果您的工具欄包含多個(gè)按鈕，則這些按鈕的文本可能會(huì)一起運(yùn)行，從而使按鈕難以區(qū)分。通過在按鈕之間插入固定空間來添加分隔。

提示

了解工具欄和標(biāo)簽欄之間的區(qū)別非常重要，因?yàn)檫@兩種類型的欄都顯示在應(yīng)用程序屏幕的底部。工具欄包含用于執(zhí)行與當(dāng)前上下文相關(guān)的操作的按鈕，例如：創(chuàng)建項(xiàng)目、刪除項(xiàng)目、添加注釋或拍照。

標(biāo)簽欄允許用戶在應(yīng)用程序的不同部分之間快速切換，例如：Clock應(yīng)用程序中的Alarm，Stopwatch和Timer選項(xiàng)卡，工具欄和標(biāo)簽欄永遠(yuǎn)不會(huì)出現(xiàn)在同一視圖中。

相關(guān)閱讀

iOS 12 人機(jī)交互指南（一）：主題與基本界面元素

iOS 12 人機(jī)交互指南（二）：App架構(gòu)（Accessibility）

iOS 12 人機(jī)交互指南（三）：交互（User Interaction）

iOS 12 人機(jī)交互指南（四）：系統(tǒng)功能（System Capabilities）

iOS 12 人機(jī)交互指南（五）：視覺設(shè)計(jì)（Visual Design）

iOS 12 人機(jī)交互指南（六）：圖標(biāo)圖像（Icons and Images）

本文由 @沸騰 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來源于網(wǎng)絡(luò)