久久久久久久岛国AV免费看,亚洲精品高清国产一线久久,亚洲精品无码av人在线播放

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

最新iOS平臺設計規范四｜3大界面要素：視圖(Views)

曉吾

2021-04-26

0 評論 5357 瀏覽 18 收藏

35 分鐘

編輯導讀：iOS是運行于iPhone、iPad和iPod touch設備上、最常用的移動操作系統之一。作為互聯網應用的開發者、產品經理、體驗設計師，都應當理解并熟悉平臺的設計規范。這有利于提高我們的工作效率，保證用戶良好的體驗。本文是iOS設計規范系列第4篇，介紹3大界面要素（欄、視圖、控件）中的視圖（Bars）。

iOS是運行于iPhone、iPad和iPod touch設備上、最常用的移動操作系統之一。作為互聯網應用的開發者、產品經理、體驗設計師，都應當理解并熟悉平臺的設計規范。這有利于提高我們的工作效率，保證用戶良好的體驗。

本文是iOS設計規范系列第4篇，介紹3大界面要素（欄、視圖、控件）中的視圖（Views）。首先讓我們回顧一下iOS的3大界面要素。

3大界面要素(Interface Essentials)：

大多數iOS應用都是由UI Kit中的組件構建的。UI Kit是一種定義通用界面元素的編程框架，這個框架不僅讓APP在視覺外觀上保持一致，同時也為個性化設計留有很大空間。

UI Kit提供的界面組件有三類：欄（Bars），視圖（Views），控件（Controls）。

欄（Bars）：

欄，可以告訴用戶在APP中當前在所在的位置、能提供導航，還可能包含用于觸發操作和傳遞信息的按鈕或其他元素。包括6種：導航欄、搜索欄、側邊欄、狀態欄、標簽欄、工具欄。

視圖（Views）：包含用戶在APP中看到的基本內容，例如：文本、圖片、動畫以及交互元素。視圖可以具有滾動、插入、刪除和排列等交互行為。

控件（Controls）：控件，是用于觸發操作并傳達信息的。例如：按鈕、開關、文本框和進度條，都屬于典型的控件。

iOS的12種視圖（Views）：

一、動作表單（Action Sheets）

動作表單是一種特定的警示樣式，它表示與當前上下文有關的兩個或多個選擇。在較小的屏幕上，動作表單會從屏幕底部向上滑動。在較大的屏幕上，動作表會以彈出框的形式同時出現。

在執行潛在的破壞性操作之前，請使用操作表請求確認。如果是非破壞性的操作可以使用下拉菜單（控件的一種，后面會講到）。
提供“取消”按鈕，使人們可以重新考慮破壞性操作。“取消”按鈕應出現在動作表單的底部。
突出顯示破壞性選擇。將紅色用于執行破壞性或危險操作的按鈕，并將這些按鈕顯示在動作表單的頂部。
避免讓操作表滾動。如果表單選項太多，用戶必須滾動才能看到所有選項。但滾動需要用戶額外花時間來做出選擇，而且很容易造成誤點。

二、活動視圖（Activity Views）

活動視圖通常出現在當前上下文中，而活動便是一項任務，例如復制、收藏、查找。一旦啟動，活動可以立即執行任務，或者在之前頁面的基礎上訪問更多信息。活動由活動視圖管理，以工作表或彈出窗口的形式顯示，具體取決于設備和方向?；顒颖挥脕斫o用戶在APP中執行一些自定義服務或任務。

iOS系統提供了許多內置活動，包括Print、Message和AirPlay。這些任務總是首先出現在活動視圖中，無法重新排序。你不必為執行這些內置任務而去創建自定義活動?；顒右晥D還顯示其他APP的共享和操作擴展。

設計簡單的模板圖像來展示自定義的活動。模板圖像使用Mask來創建圖標。使用具有適當透明度和抗鋸齒效果的黑白，并且不包括陰影。模板圖像應集中在約70px×70px的區域中。
使用簡單的活動標題來描述你的任務。標題顯示在活動視圖中的圖標下方。短標題最好。當標題太長時，iOS首先縮小文本，然后如果標題仍然太長直接將其截斷。一般來說，請避免在標題中包含你的公司名稱或產品名稱。
確?；顒舆m合當前上下文。雖然系統提供的任務無法在活動中重新排序，但如果它們不適用于你的APP，則可以將其屏蔽。例如：要阻止用戶打印圖像，你可以屏蔽“打印”活動。您還可以定義在給定的時間內顯示哪些自定義任務。
使用“操作”按鈕顯示活動視圖。人們習慣于點擊“操作”按鈕來訪問系統提供的活動。用戶習慣在點擊“功能”按鈕時彈出活動視圖。所以如果必是必須，盡量不要使用其他方法。

三、警示框（Alerts）

警示框主要用來傳達與APP或設備狀態相關的重要信息，并且通常會請求反饋。警示框由標題、可選消息、一個或多個按鈕以及用于收集用戶輸入信息的可選文本字段組成。除了這些可配置的元素外，警示框的視覺外觀是靜態的，無法自定義的。

盡量少用警示框。警示框會破壞用戶體驗，只在重要情況下使用，例如確認購買和破壞性操作（例如刪除）或通知用戶相關問題。嚴格控制警示框的數量，有助于讓用戶更認真對待它。確保每個警示框都是提供關鍵的信息和有用的選擇。
兩個方向都要測試警示框。在橫向模式和縱向模式下，警示框可能會有所不同。優化警示框文本，使其在任何方向上都無需滾動就能很好地閱讀。

警示框標題和內容：

盡可能寫一些短小的、描述性比較強的多文本警告標題。屏幕上需要閱讀的文字應該越少越好，可以嘗試編寫一個標題并且避免添加額外的信息。因為單字標題很少會提供有用的信息，所以可以考慮以問問題或使用短句的方式，盡可能的將標題保留在同一行上。通過大小寫及標點符號來共同完成文本語句，而且需要注意不要在句子中間使用結束標點符號。
如果你必須提供信息，盡可能寫簡短完整的句子。盡量保持消息足夠短，盡量保持在一兩行之內避免滾動，注意語句大小寫及標點符號。
避免使用帶有指責、批判、或侮辱性的詞語。人們知道警告會告訴他們問題的緊急和危險情況，所以依然要使用友好的語氣，因為直接正面的態度要比消極負面的態度有效果的多。避免使用代詞，如你，你，我，和我的等，它有時會比較容易被誤解為侮辱或不尊重。
避免去解釋警告按鈕的作用。如果的的警告文本和按鈕標題是明確的，那么就不需要去解釋按鈕是做什么的。除非在極少的情況下，必須提供指導，那么可以用“點擊”這個詞，在引用按鈕時保持大寫，不要在引號中包含按鈕標題。

警示框按鈕：

使用雙按鈕警示。雙按鈕警示框給予了用戶一個比較容易的雙選項的選擇方式。單按鈕通常只是告知信息，可操作性比較低。但如果3個或更多按鈕的話，會讓警示框變得很復雜并且可能需要滾動，這是一種不友好的用戶體驗。如果2個按鈕滿足不了你的需求的話，你可以考慮使用動作表單（Action Sheets）。
警示框按鈕的標題要簡潔明了、合乎邏輯。最合適的按鈕標題由一個或兩個詞語組成，用于描述選擇按鈕后的結果。對于所有的按鈕標題，使用標題樣式的文字且不需要標點符號。盡可能使用與警示框標題和警示框內容直接相關的動詞和動詞短語。例如：查看全部、回復或忽略。使用”好的“也可以被接受，但不要使用”是“和”否“。
將按鈕放置在人們期望的位置。一般而言，人們最有可能點擊的按鈕應位于右側。取消按鈕應始終位于左側。
正確標記取消按鈕。取消警報操作的按鈕應始終標記為“取消”。
識別破壞性按鈕。如果警示框按鈕含有破壞性操作（例如刪除內容），請將按鈕的樣式設計為“破壞性”（例如紅色字體），以便系統進行適當的格式設置。此外，提供“取消”按鈕，以便用戶可以安全地退出破壞性操作。將“取消”按鈕作為默認按鈕，并使用粗體文本。
允許用戶通過退出APP到主屏幕來取消警示框。當警示框出現時，退出到主屏幕可以退出APP。這個操作產生與點擊取消按鈕的效果是相同的。即警示框被取消，且不執行任何操作。如果你的警示框沒有“取消”按鈕，至少要保留這種取消警示框的交互方式。

四、集合（Collections）

集合主要用來管理一系列有序的內容，例如一組照片，并以可自定義和高度可視化的布局呈現。因為集合沒有強制執行嚴格的線性格式，所以它特別適合顯示大小不同的項。

一般來說，集合非常展示基于圖像的內容?？梢赃x擇性地呈現背景和其他裝飾性的視圖，用以區分項目的子集。

集合支持交互性和動畫。默認情況下，你可以點按以選擇、觸摸并按住進行編輯，然后滑動進行滾動。

如有需要，還可以添加更多手勢來執行自定義操作。在集合中，插入、刪除或重新排序項目，都可以啟用動畫，并且還支持自定義動畫。

當標準行或網格布局足夠時，避免創建新的設計。集合應該是用來優化用戶體驗的，而不是成為關注的焦點。集合應該讓用戶松選擇項目更方便。如果在你的集合中很難找到某個條目，用戶會感到沮喪并失去興趣。在內容周圍使用足夠的填充，以保持布局整齊并防止內容重疊。
集合的方式不適用于文本信息，文本信息可以用列表。相對于集合，文本信息展示在一個可滾動的列表中，瀏覽起來會更簡單和有效。
謹慎進行動態布局變更。集合的布局是可以隨時更改的。但需要注意的是，如果你是在用戶進行查看集合或者正在與之進行交互時來更改動態布局的話，請確保更改是有意義的且是易于跟蹤的。

無意義的布局更改可能會使APP看起來不可預測且難以使用。如果由于布局改變而改變了用戶的使用語境，用戶可能會覺得迷失。

五、圖像視圖（Image Views）

圖像視圖是在透明或不透明背景上，顯示的單個圖像或動畫圖像序列。在圖像視圖中，圖像可以被拉伸、縮放、調整大小以適合或固定到特定位置。默認情況下，圖像視圖是不可進行交互的。

如果可能的話，請確保動畫序列中的所有圖像大小一致。理想情況下，應對圖像進行預分類以適應視圖，避免系統再進行任何縮放。如果系統必須執行縮放，那么所有圖像具有相同的大小和形狀時，最容易實現。

六、頁面視圖（Pages）

頁面視圖控制器提供了一種在內容頁面之間實現線性導航的方式，例如在文檔、書籍、記事本或日歷中。頁面視圖控制器可以使用滾動或頁面卷曲兩種樣式的任意一種完成頁面之間的轉場過渡。

如果需要，可以自定義一種非線性的導航方法。使用頁面視圖控制器時，頁面只能按順序跳轉，而跨頁面之間是無法跳轉的。如果用戶想要不按順序訪問頁面，你可以自定義控件來實現此功能。

七、浮層/彈出視圖（Popovers）

浮層通常是當用戶點擊屏幕上某個內容的控制點或區域時，在其上方出現的瞬態視圖。通常浮層上會有個指向其出現位置的箭頭。浮層分為非模態的和模態的。非模態浮層可以通過點擊屏幕上浮層以外的部分或浮層上的按鈕來取消/關閉。而模態浮層則是通過點擊浮層上的取消或其他按鈕來關閉/取消的。

浮層適合大屏幕上，可以包含各種元素，包括導航欄、工具欄、標簽欄、表格、集合、圖像、地圖和自定義視圖。當浮層出現時，其他視圖的交互行為會被禁止，直到浮層被取消/關閉。使用浮層所顯示的內容要與當前頁面中的內容關聯。例如：當你點擊“操作”按鈕時，許多iPad應用會彈出一個浮層（如下圖）。

盡量不要在iPhone上使用浮層。一般來說，浮層主要應用于iPad上的APP(聚焦用戶注意力）。在iPhone的APP中，通常會使用全屏模態視圖來呈現信息，而不是彈出浮層來節省空間。通過在全屏模式視圖中顯示信息而不是在彈出窗口中來利用所有可用屏幕空間。
使用“關閉”按鈕僅用于確認和指導。如果傳達的含義足夠清晰明確，可以使用“關閉”按鈕（例如“取消”或“完成”），例如退出是否保存更改。若無存在的必要，彈出窗口應自動關閉。當用戶點擊浮層之外的區域或浮層中的關閉/取消按鈕時，浮層應該關閉。如果可以進行多次選擇，則浮層還是要保持打開狀態，直到用戶有意識地對它進行關閉。
自動關閉非模式彈出窗口時，請務必保存當前任務。通過點擊屏幕非浮層區域部分，很容易誤點而關閉非模態彈出窗口。僅當用戶點擊取消按鈕時才取消當前的任務。
在屏幕適當的位置顯示浮層。浮層的箭頭應盡可能直接指向觸發它的元素。因為浮層不能在屏幕上拖動，所以浮層不能覆蓋屏幕上太多內容。也不能覆蓋觸發它的元素。
一次只顯示一個浮層。顯示多個浮層會使界面混亂不堪。永遠不要顯示一個有層級關系的浮層，或一個浮層接著又彈出一個浮層。如果你需要顯示另一個浮層，請先關閉當前浮層。
警示框除外，不要在浮層上顯示其他視圖。除了警示框，浮層上不應顯示任何視圖。
如果可能的話，讓用戶在一次點擊中關閉一個浮層，同時打開另一個浮層。避免額外的點擊，尤其是需要在多個不同的項目欄中打開浮層時。
避免浮層太大。浮層不應該占據整個屏幕，足以顯示其內容并指向觸發按鈕即可。請注意，系統可能會調整浮層的大小，以確保它適合屏幕。
確保自定義的浮層與系統提供的浮層類似。盡管可以自定義浮層，但是也應該避免創建看起來都不像是浮層的設計。當浮層接近系統浮層時，往往效果最好。
當需要改變浮層的大小時，提供一個平滑過渡的方案。一些浮層對于相同信息提供了精簡視圖和擴展視圖兩種展示方式。如果你調整浮層的大小，請為更改設置一些動畫，以避免用戶產生新浮層替換舊浮層的意識。

八、滾動視圖（Scroll Views）

滾動視圖主要被用戶用來去瀏覽那些像文檔中的文本，集合中的圖像等比顯示區域要大的內容。當用戶進行翻閱、輕擊、拖拽、點擊以及縮放等交互行為時，滾動視圖會隨之進行放大縮小等與之對應的變化。

滾動視圖本身沒有可視化界面，但是其會隨著用戶的滾動顯示滾動條。同時滾動視圖也可以被設置為頁面模式，此時滾動視圖便可以以頁面翻轉的形式進行新舊頁面間的切換。

恰當的支持縮放交互行為。在確保有意義的前提下，支持用戶通過縮放或雙擊進行縮放。當滾動視圖的縮放選項被打開時，設置比較合適的最大及最小值。例如：放大文本直到一個單一的字符充滿整個屏幕，即使其可能對于大部分應用來說是沒有意義的。
當滾動視圖處于頁面模式時考慮顯示頁面控制元素。頁面元素通常會顯示有多少頁面，多少屏，或者多少數量的內容是當前可用及可見的。如果你在滾動視圖中顯示頁面控制元素，則需要關閉滾動視圖中的滾動條以免為用戶帶來困擾。
不要在一個滾動視圖中放置另一個滾動視圖。這樣做帶來的后果主要為會產生一個不可預期的用戶界面，從而控制起來會變得非常困難。
同一時刻只顯示一個滾動視圖。用戶經常會在滾動時使用非常大幅度的動作，如此便會非常難以避免在同一屏幕中對相鄰的滾動視圖進行交互操作。所以如果你需要在一個屏幕中放置兩個滾動視圖時，盡量考慮允許它們在不同的方向進行滾動，如此可能對其相互間的影響是最小的。

例如：當iPhone處于水平方向時，股票類應用程序會在垂直方向支持滾動來展示特定公司的股票行情。

九、分列視圖（Split Views）

分列視圖管理應用程序頂層的分層內容的呈現。分列視圖由一個兩列或三列的界面組成，分別顯示一個主列，一個可選的補充列和一個輔助內容窗格。主列中的更改將導致可選補充列中內容的更改。分列視圖對于瀏覽內容層次結構的多個級別很有用，例如通過橫穿收件箱列表和郵件，來查看每個郵件的內容。

分列視圖可以顯示各種內容，但是許多系統應用程序（例如Mail）都使用拆分視圖來創建基于邊欄的界面。在這種類型的界面中，主要列顯示側邊欄，可選補充列顯示列表視圖，輔助內容窗格顯示有關所選內容的詳細信息。

在iPad上，使用拆分視圖而不是標簽欄。拆分視圖提供與選項卡欄相同的快速導航，同時更好地利用了大屏幕。
為每種類型的列選擇適當的樣式。對于顯示側欄的主列，請使用側欄外觀。此外觀適用于應用程序級導航和集合列表，例如Mail中的郵箱。對于顯示列表視圖的補充列，請使用普通邊欄外觀。這種外觀適合于單個內容的列表，例如郵箱中的消息。
在主要和補充列中持續突出顯示任務選擇。盡管輔助窗格的內容可以更改，但它應始終與其他列中可清楚識別的選擇相對應。這種選擇有助于人們理解列之間的關系并保持自己的方向。
如果合適，允許人們在列之間拖放內容。由于拆分視圖提供了對多個層次結構的訪問權限，因此人們可以通過在列之間拖放項目來將內容從應用程序的一個部分快速移動到另一部分。

十、表單（Tables）

表單通常通過單行或多行的形式，對數據進行分組分類展示。表單可以簡潔、高效地展示大量或少量信息。一般而言，表格是基于文本的內容的理想選擇，并且通常作為導航視圖顯示在拆分視圖的一側，而相關內容顯示在另一側。

表單分類iOS有三種樣式的列表，平級、分組、插入分組。

平級。行可以被分隔為不同標記的部分，并且會有索引標記顯示在屏幕右側。頁眉可以出現在一節中的第一項之前，頁腳可以出現在最后一項之后。

分組列表。行以分組的形式顯示，組的上方可以出現頁眉，下方則可以出現頁腳。此樣式的列表至少包含一個組，每個組至少包含一行。分組列表一般不包含索引標記。

插入分組。行以具有圓角的組顯示，并從父視圖的邊緣插入。這種樣式的表始終包含至少一組，并且每組始終包含至少一行，并且可以在其后跟一個頁眉和一個頁腳。插入分組表不包含索引。插入的分組樣式在常規寬度的環境中效果最佳。因為在緊湊的環境中空間較小，所以插入的分組表可能會導致文本換行，尤其是在內容本地化時。

設計規范：

注意列表的寬度。過于狹窄的列表可能導致文字沒法連續，這樣便會使用戶很難閱讀，并且難以在垂直方向像快速瀏覽。同樣，過寬的列表也一樣可能難以閱讀和掃描，并且可能占用內容空間。
快速顯示列表內容。在顯示內容之前，不要讓用戶等待大量的列表內容加載。先用文本數據填充屏幕行，再顯示更復雜的數據（如圖像）。這種方式可以立即為用戶提供有用的信息，并提APP的感知響應能力。某些情況下，在新數據加載出來之前，先展示之前的舊數據也是有意義的。
在內容加載時配以進度條指示進度。如果列表的數據需要一段時間才能加載出來，請顯示進度條或旋轉加載器（俗稱的小菊花），以向用戶保證APP仍在運行。
保持內容新鮮性?？梢钥紤]定期更新表格內容，及時展示新的數據。但不要改變滾動的位置。相反，將內容添加到表的開頭或結尾，讓用戶在準備好時滾動到它。一些APP在加載新數據時會顯示一個加載器，并提供一個直接跳轉到該數據的控件。最好還包括一個刷新控件，這樣用戶就可以隨時手動進行更新。
避免將索引與包含右對齊元素的表單結合在一起。索引一般通過大的滑動手勢來控制的。如果附近存在其他交互元素，例如顯示指示器，則在出現手勢時很難辨別用戶的意圖，并且可能會激活錯誤的元素。

表單中的行使用標準表格單元格樣式來定義內容在表格行中的顯示方式。

基礎列表（默認）：行的左側顯示圖像，其后緊跟左對齊標題。對于不需要顯示其他附加信息的項目來說，這是一種很好的選擇。

子標題模式：同一行中，包含左對齊標題和標題下面的左對齊文本。這種樣式適用于視覺上相似的列表。而加上子標題有利于區分行與行。

右側子標題：左對齊標題，右對齊子標題，位于同一行。

左側子標題：右對齊標題，左對齊子標題，位于同一行。

以上所有系統提供的標準列表單元格樣式，同樣都支持圖形元素，例如勾選圖標或其他指示性控件。當然，添加這些元素會減少標題和子標題的可用空間。

保持文本言簡意賅，避免顯示不全。顯示不全的文字和詞語很難被閱讀和理解。超長的文本被截斷在所有表格單元格樣式中都是自動的，只是根據你使用的單元格樣式和發生截斷的位置，它可能會出現或多或少的問題。
可為“刪除”按鈕自定義標題。如果某行支持刪除并且有助于提供清晰性，請將系統提供的刪除標題替換為自定義標題。
在用戶做出選擇時給予相應的反饋。用戶在與列表進行交互時，希望被點擊的列表可以突出顯示。然后，用戶還會期待出現新的視圖或者要改變的東西，例如已勾選按鈕，是表示用戶已經做出了選擇。
為非標準表行設計自定義表格單元格樣式。系統提供的這些標準單元格樣式，很適合在各種常見場景中使用，但某些內容或某個APP有可能需要大量自定義的單元格樣式。

十一、文本視圖（Text Views）

文本視圖主要用以顯示多行樣式的文本內容。文本視圖可以是任何高度，并可以通過滾動的方式顯示額外的內容。

默認情況下，文本視圖中的文本是左對齊的，并使用黑色的系統字體。如果文本視圖可編輯，則在視圖內部點擊時，屏幕下方會彈出鍵盤。

保持文字清晰。雖然你可以使用各種類型的字體、顏色以及對齊方式，但必須保持內容的可讀性。采用動態類型文本是個好辦法，這樣如果用戶在設備上更改文字大小，你的文本內容仍然會有友好的體驗。還應該在啟用了輔助功能選項（例如粗體文本）的情況下測試內容單顯示情況。
顯示恰當的鍵盤類型。iOS提供了幾種不同的鍵盤類型，每種鍵盤都對應著一種具體的輸入方式。為了用戶可以流暢地進行數據輸入，在編輯文本視圖期間顯示的鍵盤，應該適合于該字段中的內容類型。例如，輸入支付密碼彈出的是數字鍵盤。