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

4.3 控件

4.3.1 活動指示器

活動指示器表明任務或進程正在進行中,如下圖所示。

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

活動指示器:

當任務進行和加載時旋轉佃乘,任務完成后自動消失

不支持用戶交互行為

在工具欄或主視圖中使用活動指示器來告知用戶任務或加載正在進行中,但并不提示該過程何時會結束麦锯。

不要使用靜止的活動指示器恕稠。用戶會以為該進程停滯了琅绅。

用活動指示器來讓用戶知道進程仍在進行中扶欣。有些時候,告訴用戶進程沒有停止比告訴他們何時完成更加重要千扶。

設計一個與應用的風格協(xié)調的活動指示器料祠。可以的話,讓活動指示器的尺寸和顏色與它所在的背景協(xié)調澎羞。

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

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

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

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

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

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

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

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

4.3.3 日期時間選擇器

日期時間選擇器展示關于日期和時間的組件启盛,比如小時,分鐘,天僵闯,以及年卧抗。

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

日期時間選擇器:

最多可以展示4個獨立的滑輪鳖粟,每一個滑輪表示一個不同的值社裆,比如月份或小時等

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

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

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

日期和時間浦马。日期和時間模式(默認模式)包含日期、小時张漂、和分鐘晶默,以及一個可選的AM/PM值。

時間航攒。時間模式包括小時和分鐘施禾,以及可選的AM/PM值创淡。

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

倒計時器。倒計時器模式展示了小時和分鐘值族淮。你可以精確地設定總共的倒計時間椭迎,倒計時的最大值為23小時59分鐘。

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

盡量地讓用戶在當前內容中使用日期選擇器簇抵。盡量地讓用戶在當前內容中使用日期選擇器庆杜。最好避免用戶在使用日期選擇器的時候要進入另外一個界面。在水平方向的常規(guī)環(huán)境碟摆,日期時間選擇器可能會出現(xiàn)在一個浮層中晃财,或者嵌入在當前內容里。

有必要的時候典蜕,改變分鐘滑輪的單位刻度断盛。在默認情況下,分鐘滑輪包含從0到59共60個值愉舔,如果你要展示一個顆粒度較大的時間钢猛,你可以讓分鐘滑輪的單位刻度變大,只要這個刻度可以整除60屑宠。比如說你可能會設定每15分鐘為一個刻度厢洞,此時分鐘滑輪就有4個值,0、15躺翻、30丧叽、45。

4.3.4 詳情展開按鈕

詳情展開按鈕展示了與該項相關的更多詳細信息與功能描述公你。

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

詳情展開按鈕以一個單獨的視圖展示特定項目的更多詳情信息與功能。

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

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

4.3.5 信息按鈕

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

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

iOS包含了兩種信息按鈕樣式:適用于淺色內容上的深色按鈕锻梳,以及適用于深色內容上的淺色按鈕。

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

4.3.6 標簽

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

標簽可以:

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

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

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

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

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

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

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

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

出現(xiàn)在狀態(tài)欄中敦迄,當網(wǎng)絡活動正在進行時它會旋轉,在活動停止時它則消失

不支持用戶交互行為

當你的app正在鏈接網(wǎng)絡,而這個連接過程將會持續(xù)好幾秒的時候罚屋,你可以通過網(wǎng)絡活動指示器來給用戶以反饋苦囱。如果進程所需時間很短,則不需要用到它脾猛,因為很可能在用戶注意到它之前撕彤,它就消失了。

4.3.8 頁面控件

頁面控件告訴用戶當前共打開了多少個視圖猛拴,還有他們正處在其中哪一個羹铅。

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

頁面控件:

包含一系列圓點愉昆,圓點的個數(shù)代表了當前打開的視圖數(shù)量(從左到右职员,這些圓點代表了視圖打開的先后順序)

默認情況下,使用不透明點來標識當前打開的視圖跛溉,使用半透明點來表示所有其它視圖

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

當視圖數(shù)量超過頁面寬度可承載的氛圍時廉邑,點的大小和間距并不會因此變小(如果需要顯示的點超過一定數(shù)量倒谷,系統(tǒng)會把它截斷)

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

當告知用戶有多少打開的視圖的需求比幫助用戶選擇特定的視圖更重要時,使用頁面控件渤愁。頁面控件是為所有視圖均平等的場景而設計的牵祟。

不要使用頁面控件來顯示視圖中的層次結構或其他復雜的排列。頁面控件不顯示視圖是如何相互關聯(lián)的抖格,而且不表明哪個視圖對應于每個點诺苹,因此它不能幫助用戶導航到特定的視圖。

避免顯示太多點雹拄。超過10個點就很難讓用戶一目了然收奔,而超過20個視圖在序列中訪問起來非常耗時。如果用戶可以在你的應用程序打開超過20個視圖滓玖,請考慮給視圖一個不同的展示方式坪哄,以提供關于視圖的詳細信息,使其支持不連續(xù)的導航势篡。

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

4.3.9 選擇器

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

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

選擇器:

是日期時間選擇器的通用模式

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

當前選中的值在中間,以深色標識

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

使用選擇器可以讓用戶更容易從一系列不同的值中間進行選擇若厚。

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

盡可能讓讓用戶在當前視圖中使用選擇器沈撞。不要讓他們在使用選擇器時還要進入其它的視圖。

如果你需要展示的備選項數(shù)量很多雕什,考慮使用表格視圖(Table View)而不是選擇器缠俺。因為表格視圖的高度較大,內容滾動起來會更快贷岸。

4.3.10 進度視圖

進度視圖展示了任務或進程的進度(下圖是iOS默認郵件App的工具欄)壹士。

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

進度視圖:

是一條軌跡偿警,隨著進程的進行從左向右進行填充

不支持用戶交互行為

iOS定義了兩種進度視圖樣式:

默認(Default).默認樣式適合用在app的主要內容區(qū)中躏救。

進度條(Bar).此樣式比默認樣式細,適合用在工具欄中螟蒸。

當一個任務存在明確的進程盒使,可以使用進度條來給與用戶反饋,尤其在需要明確告訴用戶這個任務大約需要多少時間完成的時候七嫌。

可以的話少办,請根據(jù)你的app的風格來設計進度條的外觀。你可以自定義進度條的底色以及軌跡顏色诵原,也可以直接使用圖片英妓。

4.3.11 刷新控件

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

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

刷新控件:

看起來類似活動指示器

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

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

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

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

只有在必要的時候才加短標題菲饼。特別需要注意的是肾砂,不要使用短標題來描述刷新控件怎么使用。

4.3.12圓角矩形按鈕

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

4.3.13 分段控件

分段控件是一組分段的線性集合,每一個分段的作用類似按鈕饼煞,點擊之后將切換到相應的視圖源葫。

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

分段控件:

由兩個或以上的分段組成砖瞧,每一個分段的寬度相同臼氨,與分段的數(shù)量成比例(分段數(shù)量越多,則寬度越邪沤臁)

可以包含文字或者圖片

使用分段控件來提供密切相關而又互斥的選項储矩。

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

盡可能地保持每個分段中的文字長度一致屡拨。因為每個分段都是等寬的,當文本長度差異很大時看上去會很不協(xié)調褥实。

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

請在必要時調整分段控件中文本的對齊方式僻澎。如果你給分段控件添加了自定義底圖貌踏,請確笔ⅲ控件里自動居中的文本依然清晰美觀。你可以通過bar metrics APIs 來調整分段控件內文本的對齊方式(想要了解如何定義bar metrics祖乳,可以參考UISegmentedControl中關于自定義API外觀(appearance-customization APIs)的描述)逗堵。

4.3.14 滑塊

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

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

滑塊:

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

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

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

使用滑塊來讓用戶精準地選擇自己想要的值,或者控制當前的進程亚斋。

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

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

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

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

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

4.3.15 步進器

步進器可以以常數(shù)為幅度來增減當前數(shù)值冬竟。

想要了解更多如何在代碼中定義步進器欧穴,可以參考UIStepper.

步進器:

是一個兩段控件,其中一段默認顯示減號泵殴,另一端默認顯示加號

支持自定義圖片

不展示用戶更改的值

當用戶想要對數(shù)值進行小幅度調整時涮帘,可以使用步進器。

當用戶需要大幅度調整數(shù)值的時候笑诅,不要使用步進器调缨。用戶可能會在打印機里使用步進器來確定打印份數(shù),因為這個值的變化幅度通常并不大吆你;而當用戶需要選擇打印的頁碼范圍時弦叶,使用步進器就會讓操作變得繁瑣,因為用戶很可能要點很多下才能選定頁數(shù)妇多。

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

4.3.16 開關按鈕

開關按鈕展示了兩個互斥的選項或狀態(tài)默责。

想要了解更多如何在代碼中定義步開關贬循,可以參考UISwitch.

開關按鈕:

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

僅在表格視圖中可用

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

你可以使用開關按鈕來控制視圖中的其它UI元素烂瘫。根據(jù)用戶的選擇媒熊,新的列表項可能出現(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)按鈕:

默認狀態(tài)下不含邊界柠衅,也不含背景圖

可以是圖標或者文字標題

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

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

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

使用標題式大寫(title-style capitalization呜达,每個單詞的首字母均大寫)谣蠢。除了冠詞,并列連詞以及少于4個字母的介詞外查近,標題中每個單詞的首字母均大寫眉踱。

標題不要太長。太長的標題會被截斷霜威,讓用戶難以理解其含義

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

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

4.3.18文本框

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

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

文本框

高度固定,包含圓角

當用戶點擊它時侄柔,自動喚起輸入鍵盤

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

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

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

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

合適的話贝椿,在文本框右側加入清除按鈕。輕擊清除按鈕變可清空當前框內輸入的全部內容陷谱,無論你原本打算在這個按鈕上面展示什么其它圖片烙博。

如果可以幫助用戶理解的話,可以在文本框中加入提示文字烟逊。當文本框里沒有任何其它提示文字時渣窜,會展示占位符文本(placeholder text),如名字宪躯、地址等乔宿。

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

4.4臨時視圖

4.4.1 警告框

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

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

警告框:

必須包含標題蝶押,有時候會包含正文文本

包含一個或多個按鈕

一般來說踱蠢,警告框警告出現(xiàn)的頻率較低,也正因為如此播聪,警告的出現(xiàn)通常會讓用戶額外重視朽基。請嚴格控制你的app中警告的個數(shù)布隔,并且保證每一個警告都能提供重要的信息离陶,或者有用的選項。

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

當你在設計警告文案的時候哀军,了解以下這些定義非常有用:

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

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

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

保證標題足夠簡短,最好在一行之內秽五。過長的標題讓用戶很難快速理解它的意思孽查,還可能會被截斷。

避免單個字的標題坦喘。單字標題盲再,例如:錯誤,或警告瓣铣,幾乎不能提供任何有用信息答朋。

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

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

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

盡可能地避免使用“你”,“你的”晶乔,“我”芍锚,“我的”這類字眼。有時候冰评,這些直接指向的字眼容易引起歧義趣兄,有時候甚至會被誤認為是一種冒犯。

適當?shù)厥褂么髮懞蜆它c符號翻具,尤其是在以下這些場景中:

如果你必須為警告框添加正文文本履怯,請使用一個完整的短句。可能的話裆泳,盡量保證句子在1到2行之間叹洲。如果句子太長,用戶會需要滾動才能看完工禾,這樣的體驗很糟运提。使用句子式大寫,并在句末加上適當?shù)臉它c符號帜篇。

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

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

不要用引號,但保證大寫

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

一般情況下拾给,使用兩個按鈕的警告框。兩個按鈕的警告框是最為常見和有用的兔沃,因為它最便于用戶在兩個按鈕中做選擇蒋得。單按鈕警告框不那么有用,因為它通常只是起到告知的作用乒疏,并未給予用戶控制當前狀態(tài)的能力额衙。多于兩個按鈕的警告框太過復雜,應該盡可能地避免使用怕吴。如果你在警告框中設計了太多按鈕窍侧,它也許會導致警告框被強制滾動,這也是一個非常糟糕的體驗转绷。

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

正確地放置按鈕暇咆。理想情況下锋爪,最容易點擊也最不容易點錯的按鈕符合兩個條件:它代表了用戶最可能會選擇的操作,即使用戶一時不注意誤點了它爸业,也不會造成嚴重問題。尤其是:

如果這個按鈕不會造成損害性結果亏镰,又是用戶最有可能會選擇的操作扯旷,那么它應該放在右邊,取消按鈕則應該放在左邊索抓。

如果這個按鈕會造成損害性后果钧忽,又是用戶最有可能會選擇的操作,那么它應該被放在左邊逼肯,取消按鈕應該放在右邊耸黑。

一般來說,當警告框出現(xiàn)的時候篮幢,按Home鍵將會從該app里切回主屏幕大刊,此時Home鍵的效果類似于取消按鈕——當用戶回到app中的時候,警告框將消失三椿,操作也不會被執(zhí)行缺菌。

為按鈕設計簡短而邏輯清晰的文案。好的按鈕文案一般只有1到2個單詞搜锰,描述用戶點擊按鈕后的結果伴郁。設計文案時可以遵循以下指南:

跟其它所有按鈕一樣,使用標題式大寫蛋叼,而且不需要標點符號

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

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

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

4.4.2 操作列表

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

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

操作列表:

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

包含兩個或以上的按鈕

使用操作列表來:

提供完成一項任務的不同方法公荧。操作列表提供一系列在當前情景下可以完成當前任務的操作,而這樣的形式不會永久占用頁面UI的空間同规。

在用戶完成一項可能有風險的操作前獲得用戶的確認循狰。操作列表讓用戶有機會停下來充分考慮當前操作可能導致的危險結果,并為他們提供了一些其它的選項券勺,尤其是在以下這些情景下:

使用紅色文字來表示可能存在破壞性的操作绪钥。在操作列表的頂部使用文字顏色為紅色的按鈕,因為越靠近列表頂部的操作越容易引起用戶注意关炼。在iPhone里程腹,潛在風險的操作離列表底部越遠,用戶在關注Home鍵的時候就越不容易誤點它儒拂。

避免讓用戶滾動操作列表寸潦。如果你的操作列表中存在過多按鈕,用戶必須要滾動才能看完所有操作社痛。這樣的體驗是可能讓用戶不安见转,因為他們要花更多的時間來充分理解每個選項的區(qū)別。此外蒜哀,用戶在滾動的過程中將很有可能誤點其它按鈕斩箫。

4.4.3模態(tài)視圖

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

模態(tài)視圖:

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

包含完成當前任務所需的文字和控件

通常也會包含一個完成任務的按鈕(點擊后即可完成任務寨典,當前模態(tài)視圖也會消失),和一個取消按鈕(點擊后即放棄當前任務房匆,同時當前模態(tài)視圖消失)

當需要用戶完成與你的app中的基礎功能相關的耸成、獨立的任務的時候报亩,可以使用模態(tài)視圖。模態(tài)視圖尤其適用于那些所需元素并非常駐在app主要UI中井氢、又包含多個步驟的子任務弦追。

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

不要讓模態(tài)視圖覆蓋在浮出層之上花竞。除了警告框外劲件,沒有任何元素應該覆蓋在彈出層上面。除非極其少有的情況下约急,用戶在彈出層內進行的操作結果必須要以模態(tài)視圖的形式展現(xiàn)零远,即便是這個時候,也請先將彈出層關閉厌蔽,再出現(xiàn)模態(tài)視圖牵辣。

確保你的模態(tài)視圖看起來與你的app的整體視覺風格相協(xié)調。舉個例子奴饮,如果一個模態(tài)視圖中含有導航條和取消或完成任務的按鈕纬向,這里的導航條樣式應該與你的app中導航條一樣。

合適的話戴卜,在模態(tài)視圖里加入可以說明任務內容的標題逾条。你可能還需要在模態(tài)視圖里加入一些補充文字,來清楚地闡明任務內容叉瘩,并提供一些任務指南膳帕。

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

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

彈出(Flip).當前視圖從右往左水平滑動娩缰,露出模態(tài)視圖灸撰。從視覺上看,模態(tài)視圖好像原來就處于當前視圖的下面拼坎,當前視圖移開時浮毯,它便出現(xiàn)了。離開模態(tài)視圖時泰鸡,原先的父視圖從左邊滑回屏幕右邊债蓝。

如果你要改變當前的過渡動畫樣式,請確保這種改變對于用戶而言是有用而且有意義的盛龄。用戶很容易便能感知到這些改變饰迹,還會認為這些改變存在特別的意義芳誓。最好能設計出一種符合邏輯并始終保持一致的過渡方式,讓用戶容易感知并且記憶啊鸭。在沒有充分理由支持的情況下锹淌,最好不要改變這些默認的過渡方式。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末赠制,一起剝皮案震驚了整個濱河市赂摆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌钟些,老刑警劉巖烟号,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異厘唾,居然都是意外死亡褥符,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進店門抚垃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來喷楣,“玉大人,你說我怎么就攤上這事鹤树∠澈福” “怎么了?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵罕伯,是天一觀的道長曲伊。 經(jīng)常有香客問我,道長追他,這世上最難降的妖魔是什么坟募? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮邑狸,結果婚禮上懈糯,老公的妹妹穿的比我還像新娘。我一直安慰自己单雾,他們只是感情好赚哗,可當我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著硅堆,像睡著了一般屿储。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上渐逃,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天够掠,我揣著相機與錄音,去河邊找鬼朴乖。 笑死祖屏,一個胖子當著我的面吹牛助赞,可吹牛的內容都是我干的。 我是一名探鬼主播袁勺,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼雹食,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了期丰?” 一聲冷哼從身側響起群叶,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎钝荡,沒想到半個月后街立,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡埠通,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年赎离,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片端辱。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡梁剔,死狀恐怖,靈堂內的尸體忽然破棺而出舞蔽,到底是詐尸還是另有隱情荣病,我是刑警寧澤,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布渗柿,位于F島的核電站个盆,受9級特大地震影響,放射性物質發(fā)生泄漏朵栖。R本人自食惡果不足惜颊亮,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望陨溅。 院中可真熱鬧编兄,春花似錦、人聲如沸声登。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽悯嗓。三九已至,卻和暖如春卸察,著一層夾襖步出監(jiān)牢的瞬間脯厨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工坑质, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留合武,地道東北人临梗。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像稼跳,于是被迫代替她去往敵國和親盟庞。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內容