iOS 9人機(jī)界面指南(四):UI元素 控件

4.3 控件

4.3.1 活動指示器

活動指示器表明任務(wù)或進(jìn)程正在進(jìn)行中,如下圖所示。

想要了解如何在代碼中定義活動指示器,可以參考UIActivityIndicatorView Class Reference.

活動指示器:

當(dāng)任務(wù)進(jìn)行和加載時(shí)旋轉(zhuǎn),任務(wù)完成后自動消失

不支持用戶交互行為

在工具欄或主視圖中使用活動指示器來告知用戶任務(wù)或加載正在進(jìn)行中,但并不提示該過程何時(shí)會結(jié)束。

不要使用靜止的活動指示器。用戶會以為該進(jìn)程停滯了。

用活動指示器來讓用戶知道進(jìn)程仍在進(jìn)行中。有些時(shí)候,告訴用戶進(jìn)程沒有停止比告訴他們何時(shí)完成更加重要。

設(shè)計(jì)一個與應(yīng)用的風(fēng)格協(xié)調(diào)的活動指示器。可以的話,讓活動指示器的尺寸和顏色與它所在的背景協(xié)調(diào)。

4.3.2 添加聯(lián)系人按鈕

添加聯(lián)系人按鈕讓用戶將現(xiàn)有聯(lián)系人添加到文本框或者其它文字視圖中。

想要了解如何在代碼中定義添加聯(lián)系人按鈕,請參考UIButton.

添加聯(lián)系人按鈕:

展示聯(lián)系人列表

幫助用戶將一個聯(lián)系人添加到當(dāng)前聯(lián)系人按鈕所在的視圖中

使用添加聯(lián)系人按鈕讓用戶在不需要使用鍵盤的情況下就可以方便地訪問到聯(lián)系人。舉個例子,在新建郵件的界面中,用戶可以點(diǎn)擊該按鈕來在郵件中添加收件人,而不需要用鍵盤輸入收件人的名字。

由于添加聯(lián)系人按鈕屬于鍵盤輸入聯(lián)系人方法的替代品,我們不推薦在不支持鍵盤輸入的界面中使用添加聯(lián)系人按鈕。

4.3.3 日期時(shí)間選擇器

日期時(shí)間選擇器展示關(guān)于日期和時(shí)間的組件,比如小時(shí),分鐘,天,以及年。

想要了解如何在代碼中定義添加日期時(shí)間選擇器,請參考UIDatePicker.

日期時(shí)間選擇器:

最多可以展示4個獨(dú)立的滑輪,每一個滑輪表示一個不同的值,比如月份或小時(shí)等

在每個滑輪的中央使用深色字體來表示當(dāng)前選中的值

日期時(shí)間選擇器的大小與iPhone鍵盤的大小相同,并且不可更改

包括四種模式,每一種模式代表了一組不同的值:

日期和時(shí)間。日期和時(shí)間模式(默認(rèn)模式)包含日期、小時(shí)、和分鐘,以及一個可選的AM/PM值。

時(shí)間。時(shí)間模式包括小時(shí)和分鐘,以及可選的AM/PM值。

日期。日期模式包括月份,天以及年三個值。

倒計(jì)時(shí)器。倒計(jì)時(shí)器模式展示了小時(shí)和分鐘值。你可以精確地設(shè)定總共的倒計(jì)時(shí)間,倒計(jì)時(shí)的最大值為23小時(shí)59分鐘。

使用日期時(shí)間選擇器來讓用戶選擇時(shí)間,而不是讓用戶自己輸入一個包含了日期、時(shí)間等多個部分的時(shí)間值。

盡量地讓用戶在當(dāng)前內(nèi)容中使用日期選擇器。盡量地讓用戶在當(dāng)前內(nèi)容中使用日期選擇器。最好避免用戶在使用日期選擇器的時(shí)候要進(jìn)入另外一個界面。在水平方向的常規(guī)環(huán)境,日期時(shí)間選擇器可能會出現(xiàn)在一個浮層中,或者嵌入在當(dāng)前內(nèi)容里。

有必要的時(shí)候,改變分鐘滑輪的單位刻度。在默認(rèn)情況下,分鐘滑輪包含從0到59共60個值,如果你要展示一個顆粒度較大的時(shí)間,你可以讓分鐘滑輪的單位刻度變大,只要這個刻度可以整除60。比如說你可能會設(shè)定每15分鐘為一個刻度,此時(shí)分鐘滑輪就有4個值,0、15、30、45。

4.3.4 詳情展開按鈕

詳情展開按鈕展示了與該項(xiàng)相關(guān)的更多詳細(xì)信息與功能描述。

想要了解如何在代碼中定義詳情展開按鈕,可以參考UITableViewCell Class ReferenceUIButton.

詳情展開按鈕以一個單獨(dú)的視圖展示特定項(xiàng)目的更多詳情信息與功能。

當(dāng)詳情展開按鈕在表格行中出現(xiàn)時(shí),點(diǎn)擊表格行的其它區(qū)域不會激活此按鈕,只會選中該行,或者觸發(fā)app中其它自定義的行為。

一般來說,你會在一個表格視圖中使用詳情展開按鈕來讓用戶知道更多關(guān)于這個列表項(xiàng)的信息。當(dāng)然你也可以將這個按鈕用在其它類型的視圖中來為用戶展示更多與特定項(xiàng)目相關(guān)的信息和功能。

4.3.5 信息按鈕

信息按鈕展示了app的配置信息,有時(shí)候它會出現(xiàn)在當(dāng)前視圖的背面。

想要了解如何在代碼中定義信息按鈕,可以參考UIButton.

iOS包含了兩種信息按鈕樣式:適用于淺色內(nèi)容上的深色按鈕,以及適用于深色內(nèi)容上的淺色按鈕。

使用信息按鈕來顯示app的配置信息或選項(xiàng)。你可以根據(jù)自己app的UI風(fēng)格來選擇最為協(xié)調(diào)的信息按鈕樣式。

4.3.6 標(biāo)簽

標(biāo)簽用于放置靜態(tài)文本。

標(biāo)簽可以:

展示任意數(shù)量的靜態(tài)文本

禁止除了復(fù)制文本外的任何用戶交互行為

你可以使用標(biāo)簽來命名或解釋你的部分UI,又或者用它來給用戶提供一些簡單的信息。標(biāo)簽最適合拿來展示相對簡單的文本信息。

保證你的標(biāo)簽清晰易讀。最好支持動態(tài)文本(Dynamic Type),并使用UIFont中的preferredFontForTextStyle來獲得標(biāo)簽中的展示文本。如果你要用自定義字體的話,請慎重選擇字體種類,不要以犧牲清晰度為代價(jià)來換取花哨的顏色和字體效果。(想要了解關(guān)于app中字體使用的指南,可以參考Color and Typography;想要了解更多動態(tài)文本的內(nèi)容,可以參考Text Programming Guide for iOS里面 的Text Styles部分。)

4.3.7 網(wǎng)絡(luò)活動指示器

網(wǎng)絡(luò)活動指示器在狀態(tài)欄中出現(xiàn),表示網(wǎng)絡(luò)活動正在進(jìn)行。

你可以在代碼中使用 UIApplication的networkActivityIndicatorVisible來控制該活動指示器的可見性。

網(wǎng)絡(luò)活動指示器:

出現(xiàn)在狀態(tài)欄中,當(dāng)網(wǎng)絡(luò)活動正在進(jìn)行時(shí)它會旋轉(zhuǎn),在活動停止時(shí)它則消失

不支持用戶交互行為

當(dāng)你的app正在鏈接網(wǎng)絡(luò),而這個連接過程將會持續(xù)好幾秒的時(shí)候,你可以通過網(wǎng)絡(luò)活動指示器來給用戶以反饋。如果進(jìn)程所需時(shí)間很短,則不需要用到它,因?yàn)楹芸赡茉谟脩糇⒁獾剿?,它就消失了?/p>

4.3.8 頁面控件

頁面控件告訴用戶當(dāng)前共打開了多少個視圖,還有他們正處在其中哪一個。

想要了解如何在代碼中定義頁面控件,可以參考UIPageControls.

頁面控件:

包含一系列圓點(diǎn),圓點(diǎn)的個數(shù)代表了當(dāng)前打開的視圖數(shù)量(從左到右,這些圓點(diǎn)代表了視圖打開的先后順序)

默認(rèn)情況下,使用不透明點(diǎn)來標(biāo)識當(dāng)前打開的視圖,使用半透明點(diǎn)來表示所有其它視圖

不支持用戶訪問不連續(xù)的視圖

當(dāng)視圖數(shù)量超過頁面寬度可承載的氛圍時(shí),點(diǎn)的大小和間距并不會因此變小(如果需要顯示的點(diǎn)超過一定數(shù)量,系統(tǒng)會把它截?cái)啵?/p>

默認(rèn)情況下不支持視圖之間導(dǎo)航;你必須實(shí)現(xiàn)視圖到視圖之間的導(dǎo)航并適當(dāng)?shù)馗马撁婵丶顟B(tài)

當(dāng)告知用戶有多少打開的視圖的需求比幫助用戶選擇特定的視圖更重要時(shí),使用頁面控件。頁面控件是為所有視圖均平等的場景而設(shè)計(jì)的。

不要使用頁面控件來顯示視圖中的層次結(jié)構(gòu)或其他復(fù)雜的排列。頁面控件不顯示視圖是如何相互關(guān)聯(lián)的,而且不表明哪個視圖對應(yīng)于每個點(diǎn),因此它不能幫助用戶導(dǎo)航到特定的視圖。

避免顯示太多點(diǎn)。超過10個點(diǎn)就很難讓用戶一目了然,而超過20個視圖在序列中訪問起來非常耗時(shí)。如果用戶可以在你的應(yīng)用程序打開超過20個視圖,請考慮給視圖一個不同的展示方式,以提供關(guān)于視圖的詳細(xì)信息,使其支持不連續(xù)的導(dǎo)航。

在打開視圖的底部邊緣和屏幕的底部邊緣里垂直居中頁面控件。在這個位置,頁面控件是始終可見的,并且不會阻擋用戶的使用。

4.3.9 選擇器

選擇器展示了一組值,用戶可以從中選擇一個。

想要了解如何在代碼中定義選擇器,可以參考UIPickerView Class Reference.

選擇器:

是日期時(shí)間選擇器的通用模式

包括一個或多個滑輪,每個滑輪含有一組值

當(dāng)前選中的值在中間,以深色標(biāo)識

不可以自定義大小(選擇器的大小與iPhone的鍵盤相同)

使用選擇器可以讓用戶更容易從一系列不同的值中間進(jìn)行選擇。

一般來說,當(dāng)用戶對整組值都比較熟悉的時(shí)候,可以使用選擇器。由于當(dāng)滑輪靜止的時(shí)候,大部分的數(shù)值會被隱藏,最好是在用戶對所有數(shù)值均有預(yù)期的情況下才使用選擇器。當(dāng)你需要展示一大組用戶并不熟悉的選項(xiàng),此種選擇器可能不太適合。

盡可能讓讓用戶在當(dāng)前視圖中使用選擇器。不要讓他們在使用選擇器時(shí)還要進(jìn)入其它的視圖。

如果你需要展示的備選項(xiàng)數(shù)量很多,考慮使用表格視圖(Table View)而不是選擇器。因?yàn)楸砀褚晥D的高度較大,內(nèi)容滾動起來會更快。

4.3.10 進(jìn)度視圖

進(jìn)度視圖展示了任務(wù)或進(jìn)程的進(jìn)度(下圖是iOS默認(rèn)郵件App的工具欄)。

想要了解更多如何在代碼中定義進(jìn)度視圖,可以參考UIProgressView Class Reference.

進(jìn)度視圖:

是一條軌跡,隨著進(jìn)程的進(jìn)行從左向右進(jìn)行填充

不支持用戶交互行為

iOS定義了兩種進(jìn)度視圖樣式:

默認(rèn)(Default).默認(rèn)樣式適合用在app的主要內(nèi)容區(qū)中。

進(jìn)度條(Bar).此樣式比默認(rèn)樣式細(xì),適合用在工具欄中。

當(dāng)一個任務(wù)存在明確的進(jìn)程,可以使用進(jìn)度條來給與用戶反饋,尤其在需要明確告訴用戶這個任務(wù)大約需要多少時(shí)間完成的時(shí)候。

可以的話,請根據(jù)你的app的風(fēng)格來設(shè)計(jì)進(jìn)度條的外觀。你可以自定義進(jìn)度條的底色以及軌跡顏色,也可以直接使用圖片。

4.3.11 刷新控件

刷新控件執(zhí)行用戶觸發(fā)的內(nèi)容刷新——一個典型的例子,它常在表格中出現(xiàn)(下圖展示的是iOS默認(rèn)的郵件app的mailbox列表頁)。

想要了解更多如何在代碼中定義刷新控件,可以參考UIRefreshControl Class Reference.

刷新控件:

看起來類似活動指示器

可以出現(xiàn)在標(biāo)題中

默認(rèn)狀態(tài)下不可見,當(dāng)用戶在表格上緣往下拖拽以刷新內(nèi)容時(shí)才出現(xiàn)

使用刷新控件,給用戶提供一個一致的方式來了解一個表格或其他視圖的內(nèi)容更新,而不需要等待下一個自動更新。

就算你使用了刷新控件,也不要因此就不支持內(nèi)容自動刷新。盡管用戶喜歡在執(zhí)行刷新操作時(shí)內(nèi)容立刻刷新,他們也同樣會喜歡內(nèi)容自動刷新。如果過于一來用戶自己執(zhí)行所有刷新操作的話,那些不會自動刷新的用戶就會疑惑,為何你app中的數(shù)據(jù)永遠(yuǎn)都不更新。一般來說,刷新控件給了用戶多一個選擇,讓他們可以立刻獲得最新的內(nèi)容,但同時(shí),你也不能奢望用戶會主動獲取所有的更新信息。

只有在必要的時(shí)候才加短標(biāo)題。特別需要注意的是,不要使用短標(biāo)題來描述刷新控件怎么使用。

4.3.12圓角矩形按鈕

iOS7及更新版本中已經(jīng)不再使用圓角矩形按鈕,而是使用了新的系統(tǒng)按鈕——類型為UIButtonTypeSystem的UI按鈕(UIButton)。使用指南可參考System Button.

4.3.13 分段控件

分段控件是一組分段的線性集合,每一個分段的作用類似按鈕,點(diǎn)擊之后將切換到相應(yīng)的視圖。

想要了解更多如何在代碼中定義分段控件,可以參考Segmented Controls

分段控件:

由兩個或以上的分段組成,每一個分段的寬度相同,與分段的數(shù)量成比例(分段數(shù)量越多,則寬度越?。?/p>

可以包含文字或者圖片

使用分段控件來提供密切相關(guān)而又互斥的選項(xiàng)。

保證每個分段都容易點(diǎn)擊。為了保證每個分段的大小有至少44×44像素,請控制分段的數(shù)量。在iPhone上,1個分段控件最多包含5個分段。

盡可能地保持每個分段中的文字長度一致。因?yàn)槊總€分段都是等寬的,當(dāng)文本長度差異很大時(shí)看上去會很不協(xié)調(diào)。

不要在同一個分段控件中混用文字和圖片。每一個分段都僅可支持純文字或純圖片。避免在同一個分段控件中,一些分段里使用純文字,另一些分段里使用純圖。

請?jiān)诒匾獣r(shí)調(diào)整分段控件中文本的對齊方式。如果你給分段控件添加了自定義底圖,請確保控件里自動居中的文本依然清晰美觀。你可以通過bar metrics APIs 來調(diào)整分段控件內(nèi)文本的對齊方式(想要了解如何定義bar metrics,可以參考UISegmentedControl中關(guān)于自定義API外觀(appearance-customization APIs)的描述)。

4.3.14 滑塊

滑塊允許用戶在一個限定范圍內(nèi)調(diào)整某個數(shù)值或進(jìn)程(下圖展示的是iOS設(shè)置中亮度設(shè)置的滑塊,滑塊的左邊和右邊均為自定義圖形)。

想要了解更多如何在代碼中定義滑塊,可以參考Sliders

滑塊:

由一條水平的軌跡和一個Thumb(滑塊中支持用戶水平拖拽的圓形控件)組成

左邊和右邊支持使用自定義圖片來表述相對的最小值與最大值的含義

填充軌道左邊緣最小值之間到Thumb之間的部分

使用滑塊來讓用戶精準(zhǔn)地選擇自己想要的值,或者控制當(dāng)前的進(jìn)程。

如果合適的話,自定義滑塊的外觀。比如,你可以:

定義Thumb的外觀,讓用戶一看就知道滑塊當(dāng)前的狀態(tài)

在軌跡的左右兩端使用自定義圖片來告訴用戶滑塊的最小值和最大值所代表的含義。比如說,一個圖調(diào)整圖片尺寸的滑塊可以在最小值的左邊放一張小圖,在最大值的右邊放一張大圖。

根據(jù)Thumb所在的位置和當(dāng)前滑塊的狀態(tài)來為滑塊的軌跡定義不同的顏色

不要使用滑塊來顯示音量控制。如果你需要顯示一個音量滑塊,當(dāng)你使用MPVolumeView類的時(shí)候請使用系統(tǒng)提供的音量滑塊。請注意,當(dāng)當(dāng)前活動的音頻輸出設(shè)備不支持音量控制時(shí),音量滑塊以適當(dāng)?shù)脑O(shè)備名稱替換。

4.3.15 步進(jìn)器

步進(jìn)器可以以常數(shù)為幅度來增減當(dāng)前數(shù)值。

想要了解更多如何在代碼中定義步進(jìn)器,可以參考UIStepper.

步進(jìn)器:

是一個兩段控件,其中一段默認(rèn)顯示減號,另一端默認(rèn)顯示加號

支持自定義圖片

不展示用戶更改的值

當(dāng)用戶想要對數(shù)值進(jìn)行小幅度調(diào)整時(shí),可以使用步進(jìn)器。

當(dāng)用戶需要大幅度調(diào)整數(shù)值的時(shí)候,不要使用步進(jìn)器。用戶可能會在打印機(jī)里使用步進(jìn)器來確定打印份數(shù),因?yàn)檫@個值的變化幅度通常并不大;而當(dāng)用戶需要選擇打印的頁碼范圍時(shí),使用步進(jìn)器就會讓操作變得繁瑣,因?yàn)橛脩艉芸赡芤c(diǎn)很多下才能選定頁數(shù)。

確保步進(jìn)器所調(diào)整的值明顯可見。步進(jìn)器自身不展示任何數(shù)值,所以你需要保證讓用戶知道他們正在調(diào)整哪一個數(shù)值。

4.3.16 開關(guān)按鈕

開關(guān)按鈕展示了兩個互斥的選項(xiàng)或狀態(tài)。

想要了解更多如何在代碼中定義步開關(guān),可以參考UISwitch.

開關(guān)按鈕:

顯示了一個項(xiàng)存在二元狀態(tài)

僅在表格視圖中可用

在表格中使用開關(guān)按鈕來讓用戶從某一項(xiàng)的兩個互斥狀態(tài)中指定一個,比如是/否(Yes/No),開/關(guān)(On/Off)。

你可以使用開關(guān)按鈕來控制視圖中的其它UI元素。根據(jù)用戶的選擇,新的列表項(xiàng)可能出現(xiàn)或者消失,或從激活狀態(tài)變?yōu)椴患せ顮顟B(tài)。

4.3.17 系統(tǒng)按鈕

系統(tǒng)按鈕執(zhí)行app中定義的行為。

在iOS 7中,UIButtonTypeRoundedRect已經(jīng)被重新定義為 UIButtonTypeSystem. 想要了解更多如何在代碼中定義系統(tǒng)按鈕,可以參考UIButton.

系統(tǒng)按鈕:

默認(rèn)狀態(tài)下不含邊界,也不含背景圖

可以是圖標(biāo)或者文字標(biāo)題

支持自定義樣式,如描邊或者加背景圖(想要自定義按鈕外觀,可以使用 UIButtonTypeCustom 類型的按鈕,并且提供背景圖片)

使用系統(tǒng)按鈕來執(zhí)行某個動作。當(dāng)你為系統(tǒng)按鈕命名時(shí),請遵循以下方法:

使用動詞或動詞短語來描述按鈕所代表的動作。這種命名方法告訴用戶這個按鈕是可交互的,也提示了用戶點(diǎn)擊之后會執(zhí)行什么操作

使用標(biāo)題式大寫(title-style capitalization,每個單詞的首字母均大寫)。除了冠詞,并列連詞以及少于4個字母的介詞外,標(biāo)題中每個單詞的首字母均大寫。

標(biāo)題不要太長。太長的標(biāo)題會被截?cái)?,讓用戶難以理解其含義

以iPhone為例,給數(shù)字按鍵添加圓形邊框強(qiáng)化了用戶撥電話號碼時(shí)的心理模型,而結(jié)束(End)和隱藏(Hide)按鈕的背景色讓用戶擁有了更大的點(diǎn)擊范圍。

合適的話,為內(nèi)容區(qū)域內(nèi)的系統(tǒng)按鈕描邊或者加入背景。大多數(shù)情況下,你可以通過定義一個清晰的按鈕名稱、選擇一個不一樣的標(biāo)題顏色或提供上下文情景提示來讓用戶知道這是一個按鈕而非普通文本。但在某些特定的內(nèi)容區(qū)域內(nèi),為按鈕描邊或者添加背景顏色,讓用戶迅速地把注意力放到按鈕上,也是必要的。Value 2的布局中,文本和副標(biāo)題中間的垂直間距會讓用戶專注于副標(biāo)題的第一個單詞。

4.3.18文本框

開關(guān)按鈕展示了兩個互斥的選項(xiàng)或狀態(tài)。

想要了解如何在代碼中定義文本框,以及在文本框中支持圖片和按鈕,可以參考UITextField.

文本框

高度固定,包含圓角

當(dāng)用戶點(diǎn)擊它時(shí),自動喚起輸入鍵盤

可以包含系統(tǒng)提供的按鈕,如書簽按鈕(Bookmarks)

可以展示多種文字樣式(了解更多請參考UITextView)

使用文本框來獲取用戶輸入的少量信息。

你可以自定義一個文本框,幫助用戶更好地理解如何使用它。舉個例子,你可以在文本框的左側(cè)或者右側(cè)加入自定義圖形,或者加入系統(tǒng)按鈕,如書簽按鈕等。一般來說,文本框的左側(cè)用于表述文本框的含義,而右側(cè)用于展示附加的功能,如書簽。

合適的話,在文本框右側(cè)加入清除按鈕。輕擊清除按鈕變可清空當(dāng)前框內(nèi)輸入的全部內(nèi)容,無論你原本打算在這個按鈕上面展示什么其它圖片。

如果可以幫助用戶理解的話,可以在文本框中加入提示文字。當(dāng)文本框里沒有任何其它提示文字時(shí),會展示占位符文本(placeholder text),如名字、地址等。

根據(jù)輸入內(nèi)容的類型來指定不同的鍵盤類型。舉例來說,你希望用戶能更方便地輸入網(wǎng)址、密碼或者電話號碼。iOS提供了各種不同的鍵盤類型,以便用戶輸入不同類型的文本。想要了解可用鍵盤類型,可以參考UITextInputTraits Protocol Reference中的UIKeyboardType.想要了解如何在管理你的應(yīng)用中的鍵盤,請參考Managing the Keyboard部分。但請注意,由于鍵盤的布局以及輸入方法是由用戶的系統(tǒng)語言設(shè)置決定的,這是你不能控制的。

4.4臨時(shí)視圖

4.4.1 警告框

警告框用于告知用戶一些會影響到他們使用app或設(shè)備的重要信息。

如需在代碼中使用警告框,你可以創(chuàng)建UIAlertController并且指定UIAlertControllerStyleAlert.

警告框:

必須包含標(biāo)題,有時(shí)候會包含正文文本

包含一個或多個按鈕

一般來說,警告框警告出現(xiàn)的頻率較低,也正因?yàn)槿绱耍娴某霈F(xiàn)通常會讓用戶額外重視。請嚴(yán)格控制你的app中警告的個數(shù),并且保證每一個警告都能提供重要的信息,或者有用的選項(xiàng)。

避免出現(xiàn)不必要的警告框。一般來說,在以下情景中,是不需要用到警告框的:

當(dāng)你在設(shè)計(jì)警告文案的時(shí)候,了解以下這些定義非常有用:

標(biāo)題式大寫(Title-style capitalization)指的是除了冠詞,并列連詞以及少于4個字母且不處在第一個單詞位置上的介詞外,標(biāo)題中每個單詞的首字母均大寫。

句子式大寫(Sentence-style capitalization)指的是第一個字母大寫,其余除了專有名詞和專有形容詞外的字母均小寫

簡明扼要地描述當(dāng)前情景,并告訴用戶他們可以做什么。理想情況下,警告框中的文字應(yīng)該給與用戶足夠的情景和上下文聯(lián)想,讓他們可以清楚地知道為什么警告會出現(xiàn),同時(shí)幫助他們判斷自己應(yīng)該點(diǎn)哪個按鈕。

保證標(biāo)題足夠簡短,最好在一行之內(nèi)。過長的標(biāo)題讓用戶很難快速理解它的意思,還可能會被截?cái)唷?/p>

避免單個字的標(biāo)題。單字標(biāo)題,例如:錯誤,或警告,幾乎不能提供任何有用信息。

如果可以的話,使用句子片段而非完整的句子。一個簡潔清晰的狀態(tài)描述往往比一個完整的句子更容易理解。

盡可能的精煉你的標(biāo)題文字,讓警告框即使沒有下面的正文信息也能完全讓用戶理解。舉個例子,當(dāng)你使用一個問題,或者兩個短句來作為警告框標(biāo)題的話,很可能你并不需要添加文本信息。

不用刻意避免在警告框中使用消極負(fù)面的文案。用戶們理解大多數(shù)警告框是為了告訴他們發(fā)生的問題,或者對他們目前的狀態(tài)作出警告。因此消極但清晰直接的文案優(yōu)于積極但晦澀間接的文案。

盡可能地避免使用“你”,“你的”,“我”,“我的”這類字眼。有時(shí)候,這些直接指向的字眼容易引起歧義,有時(shí)候甚至?xí)徽`認(rèn)為是一種冒犯。

適當(dāng)?shù)厥褂么髮懞蜆?biāo)點(diǎn)符號,尤其是在以下這些場景中:

如果你必須為警告框添加正文文本,請使用一個完整的短句。可能的話,盡量保證句子在1到2行之間。如果句子太長,用戶會需要滾動才能看完,這樣的體驗(yàn)很糟。使用句子式大寫,并在句末加上適當(dāng)?shù)臉?biāo)點(diǎn)符號。

避免在文本中詳細(xì)描述“該按哪個按鈕”而導(dǎo)致文本過長。理想情況下,表意明確的警告文案和邏輯清晰的按鈕文案已經(jīng)足以讓用戶正確判斷自己該按哪個按鈕了。但如果你一定要在文案中描述這些內(nèi)容,請遵循以下原則:

確定使用輕擊(tap)來描述這個選擇操作,不要用觸摸(touch)、點(diǎn)擊(click)或者選擇(choose)這類字眼。

不要用引號,但保證大寫

確保警告框在豎屏和橫屏中均顯示正常。橫屏模式下警告框的高度會受到限制,其大小與豎屏下可能會有區(qū)別。我們推薦您限定好警告框的最大高度,保證在豎屏和橫屏模式下文字均能不需要滾動便可完整地顯示。

一般情況下,使用兩個按鈕的警告框。兩個按鈕的警告框是最為常見和有用的,因?yàn)樗畋阌谟脩粼趦蓚€按鈕中做選擇。單按鈕警告框不那么有用,因?yàn)樗ǔV皇瞧鸬礁嬷淖饔?,并未給予用戶控制當(dāng)前狀態(tài)的能力。多于兩個按鈕的警告框太過復(fù)雜,應(yīng)該盡可能地避免使用。如果你在警告框中設(shè)計(jì)了太多按鈕,它也許會導(dǎo)致警告框被強(qiáng)制滾動,這也是一個非常糟糕的體驗(yàn)。

如果你需要在警告框中給與用戶超過2個選項(xiàng),可以考慮使用操作列表來代替警告框。

正確地放置按鈕。理想情況下,最容易點(diǎn)擊也最不容易點(diǎn)錯的按鈕符合兩個條件:它代表了用戶最可能會選擇的操作,即使用戶一時(shí)不注意誤點(diǎn)了它,也不會造成嚴(yán)重問題。尤其是:

如果這個按鈕不會造成損害性結(jié)果,又是用戶最有可能會選擇的操作,那么它應(yīng)該放在右邊,取消按鈕則應(yīng)該放在左邊。

如果這個按鈕會造成損害性后果,又是用戶最有可能會選擇的操作,那么它應(yīng)該被放在左邊,取消按鈕應(yīng)該放在右邊。

一般來說,當(dāng)警告框出現(xiàn)的時(shí)候,按Home鍵將會從該app里切回主屏幕,此時(shí)Home鍵的效果類似于取消按鈕——當(dāng)用戶回到app中的時(shí)候,警告框?qū)⑾?,操作也不會被?zhí)行。

為按鈕設(shè)計(jì)簡短而邏輯清晰的文案。好的按鈕文案一般只有1到2個單詞,描述用戶點(diǎn)擊按鈕后的結(jié)果。設(shè)計(jì)文案時(shí)可以遵循以下指南:

跟其它所有按鈕一樣,使用標(biāo)題式大寫,而且不需要標(biāo)點(diǎn)符號

盡可能的使用與警告文案直接相關(guān)的動詞或動詞詞組,如”取消(Cancel)”,”查看全部(View All)”,”回復(fù)(Reply)”和“忽略(Ignore)”等

當(dāng)沒有更好的選擇的時(shí)候,可以使用”O(jiān)K”.避免使用”是(Yes)”或”否(No)”。

避免使用”你”,“你的”,“我”,“我的”這類字眼。含有這些字眼的文案可能會指代不清,還有可能造成冒犯。

4.4.2 操作列表

操作列表展示了與用戶觸發(fā)的操作直接相關(guān)的一系列選項(xiàng)。

如需在代碼中使用操作列表,你可以創(chuàng)建一個UIAlertController.并指定UIAlertControllerStyleActionSheet

操作列表:

由用戶某個操作行為觸發(fā)

包含兩個或以上的按鈕

使用操作列表來:

提供完成一項(xiàng)任務(wù)的不同方法。操作列表提供一系列在當(dāng)前情景下可以完成當(dāng)前任務(wù)的操作,而這樣的形式不會永久占用頁面UI的空間。

在用戶完成一項(xiàng)可能有風(fēng)險(xiǎn)的操作前獲得用戶的確認(rèn)。操作列表讓用戶有機(jī)會停下來充分考慮當(dāng)前操作可能導(dǎo)致的危險(xiǎn)結(jié)果,并為他們提供了一些其它的選項(xiàng),尤其是在以下這些情景下:

使用紅色文字來表示可能存在破壞性的操作。在操作列表的頂部使用文字顏色為紅色的按鈕,因?yàn)樵娇拷斜眄敳康牟僮髟饺菀滓鹩脩糇⒁?。在iPhone里,潛在風(fēng)險(xiǎn)的操作離列表底部越遠(yuǎn),用戶在關(guān)注Home鍵的時(shí)候就越不容易誤點(diǎn)它。

避免讓用戶滾動操作列表。如果你的操作列表中存在過多按鈕,用戶必須要滾動才能看完所有操作。這樣的體驗(yàn)是可能讓用戶不安,因?yàn)樗麄円ǜ嗟臅r(shí)間來充分理解每個選項(xiàng)的區(qū)別。此外,用戶在滾動的過程中將很有可能誤點(diǎn)其它按鈕。

4.4.3模態(tài)視圖

模態(tài)視圖是一個以模態(tài)形式展現(xiàn)的視圖,它為當(dāng)前任務(wù)或當(dāng)前工作流程提供獨(dú)立的、自包含的(self-contained)功能。

模態(tài)視圖:

能占據(jù)整個屏幕,它也可能占據(jù)整個父視圖(parent view)的區(qū)域,或者是屏幕的一部分

包含完成當(dāng)前任務(wù)所需的文字和控件

通常也會包含一個完成任務(wù)的按鈕(點(diǎn)擊后即可完成任務(wù),當(dāng)前模態(tài)視圖也會消失),和一個取消按鈕(點(diǎn)擊后即放棄當(dāng)前任務(wù),同時(shí)當(dāng)前模態(tài)視圖消失)

當(dāng)需要用戶完成與你的app中的基礎(chǔ)功能相關(guān)的、獨(dú)立的任務(wù)的時(shí)候,可以使用模態(tài)視圖。模態(tài)視圖尤其適用于那些所需元素并非常駐在app主要UI中、又包含多個步驟的子任務(wù)。

根據(jù)當(dāng)前任務(wù)的種類和你的app的整體視覺風(fēng)格來選擇適當(dāng)?shù)哪B(tài)視圖。你可以使用以下定義的任何一種模態(tài)視圖樣式:

不要讓模態(tài)視圖覆蓋在浮出層之上。除了警告框外,沒有任何元素應(yīng)該覆蓋在彈出層上面。除非極其少有的情況下,用戶在彈出層內(nèi)進(jìn)行的操作結(jié)果必須要以模態(tài)視圖的形式展現(xiàn),即便是這個時(shí)候,也請先將彈出層關(guān)閉,再出現(xiàn)模態(tài)視圖。

確保你的模態(tài)視圖看起來與你的app的整體視覺風(fēng)格相協(xié)調(diào)。舉個例子,如果一個模態(tài)視圖中含有導(dǎo)航條和取消或完成任務(wù)的按鈕,這里的導(dǎo)航條樣式應(yīng)該與你的app中導(dǎo)航條一樣。

合適的話,在模態(tài)視圖里加入可以說明任務(wù)內(nèi)容的標(biāo)題。你可能還需要在模態(tài)視圖里加入一些補(bǔ)充文字,來清楚地闡明任務(wù)內(nèi)容,并提供一些任務(wù)指南。

選擇一個適當(dāng)?shù)倪^渡動畫來展示模態(tài)視圖。使用與你的app一致的過渡動畫,讓用戶可以準(zhǔn)確地理解當(dāng)前頁面內(nèi)容的轉(zhuǎn)變與模態(tài)視圖的出現(xiàn)。關(guān)于這一點(diǎn),你可以指定以下任意一種過渡動畫:

垂直出現(xiàn)(Vertical).模態(tài)視圖從底部邊緣滑入屏幕,也同樣從屏幕底部滑出(默認(rèn)模式)。

彈出(Flip).當(dāng)前視圖從右往左水平滑動,露出模態(tài)視圖。從視覺上看,模態(tài)視圖好像原來就處于當(dāng)前視圖的下面,當(dāng)前視圖移開時(shí),它便出現(xiàn)了。離開模態(tài)視圖時(shí),原先的父視圖從左邊滑回屏幕右邊。

如果你要改變當(dāng)前的過渡動畫樣式,請確保這種改變對于用戶而言是有用而且有意義的。用戶很容易便能感知到這些改變,還會認(rèn)為這些改變存在特別的意義。最好能設(shè)計(jì)出一種符合邏輯并始終保持一致的過渡方式,讓用戶容易感知并且記憶。在沒有充分理由支持的情況下,最好不要改變這些默認(rèn)的過渡方式。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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