臨時視圖

2018-08-12 21:55 更新

臨時視圖

警告框

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

API 提示:

如需在代碼中使用警告框,你可以創(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符號。

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

  • 確定使用輕擊(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)”。
  • 避免使用”你”,“你的”,“我”,“我的”這類字眼。含有這些字眼的文案可能會指代不清,還有可能造成冒犯。

操作列表

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

API 提示:

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

操作列表:

  • 由用戶某個操作行為觸發(fā)
  • 包含兩個或以上的按鈕 使用操作列表來:

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

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

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

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

模態(tài)視圖

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

API 提示:

如需在代碼中使用模態(tài)視圖,你可以創(chuàng)建一個 UIPresentationController. 并指定適當?shù)臉邮?完整的樣式列表,請參考 Modal Presentation Styles)

模態(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)視圖時,原先的父視圖從左邊滑回屏幕右邊。 如果你要改變當前的過渡動畫樣式,請確保這種改變對于用戶而言是有用而且有意義的。用戶很容易便能感知到這些改變,還會認為這些改變存在特別的意義。最好能設計出一種符合邏輯并始終保持一致的過渡方式,讓用戶容易感知并且記憶。在沒有充分理由支持的情況下,最好不要改變這些默認的過渡方式。
以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號