無極5登錄_iOS 人機界面指南精簡版筆記之界面元素:Views(上)

iOS 基本界面元素包括三大類,分別是 Bars(欄)、Views(視圖)、Controls(控件)。上一篇文章分享了 Bars(欄),今天給大家分享 Views(視圖)部分。

往期回顧:

iOS 人機界面指南精簡版筆記之界面元素:Bars

最近仔細研讀了蘋果官網最新的設計規範。網上沒有找到很滿意的翻譯版本,於是自己老老實實的啃了幾遍官方文檔,順便把學習筆記輸出給大家分享一下。

閱讀文章 >>

值得注意的是,Views 中的 Alerts、Action Sheets、Activity Views 都屬於模態視圖(Popovers 比較特殊,可以是模態或者非模態的)。今天我們先把具有模態屬性的各種視圖作為一個合集進行分享。

Modality 模態

1. 什麼是模態

模態是一種臨時模式,獨立於用戶之前的正常操作流程,需要執行明確操作才能將其關閉。

2. 模態的作用

  • 幫助人們專註於某個任務或相關操作。
  • 確保用戶接收到關鍵信息,採取行動。

iOS 13 及更高版本支持 Sheet 、Fullscreen 兩種可自定義樣式。

3. Sheet 卡片風格面板

卡片風格適用於非沉浸式模態內容,不要包含複雜任務。

取消卡片的方式

  • 從屏幕頂部向下輕掃
  • 卡片內容滾到頂部時,從屏幕任意位置向下輕掃
  • 點擊某按鈕(取消、完成等)

4. Fullscreen 全屏模態

先前視圖被完全覆蓋,從而將視覺干擾降至最低,只能通過點擊按鈕關閉全屏模態視圖。

適用於沉浸式內容(視頻、照片、拍攝),或複雜任務(標記文檔或編輯照片)。

5. 使用模態視圖時應注意

不要濫用模態,模態會破壞用戶心流,必要時才使用。

保持模態任務簡單、輕量,模態任務不要包含多個層級。如果不得不包含子頁面,則必須提供唯一、清晰的單線程路徑,幫助用戶完成任務。

提供退出模態視圖的按鈕,提供「完成」、「取消」按鈕,作為手勢的替代。我的理解是,手勢操作在界面上不可見,學習成本高。而按鈕在界面上可見,可以給用戶帶來操作可控的安全感。

避免數據丟失,不管用戶是使用手勢還是按鈕來關閉視圖,如果該操作會導致用戶生成的內容丟失,提示用戶,並提供挽回辦法。

不要在彈窗上面疊加卡片,應先關掉彈窗再展示卡片(消息對話框除外)。

明確當前任務,通過模態窗的標題(或其他文案)來幫助用戶明確當前任務是什麼。我的理解是,模態打斷了用戶之前的操作流,這會和用戶預期的操作相衝突。如果不能明確提示用戶當前任務是什麼,用戶會感到茫然甚至被打擾。

使用合適的過渡動效,使用動效向用戶暗示內容已發生轉換。系統的默認動效是屏幕底部向上滑出,關閉時向下滑出。

Alerts 消息對話框

消息對話框是對有關 App 或者手機狀態的重要說明,通常需要用戶執行操作反饋。

慎用消息對話框。消息對話框屬於模態視圖,會破壞用戶體驗,僅可用在重要場景中,例如確認付費,具有破壞性的不可逆操作(比如刪除),報錯。注意消息對話框出現頻率越高,用戶越容易將其忽視。

消息對話框組成元素

  • 標題
  • 說明性文字(非必須)
  • 一個或多個的按鈕
  • 可包含輸入框,用來收集用戶相關信息,注意消息對話框外觀不可自定義。
1. 文案相關注意事項

標題

標題越簡短越好,盡量一行內說完。

試試僅使用標題就把情況解釋清楚,而不需要額外說明性內容。單個字詞的標題很難提供完整的信息,建議使用疑問句或者短句。

說明性文字

說明性文案保持在兩行以內,要確保在橫屏豎屏方向上都能方便閱讀而無需滾動。

說明性文字要使用完整句子,而不是短語。

語氣

避免聽起來是指責,審判或侮辱。

只要使用了禮貌語氣,否定且直接的態度,效果要好過正面但隱晦的態度。

按鈕

按鈕文案清晰明確,盡量無需額外解釋按鈕含義。

若必須提供操作指導,引用按鈕時使用動詞「點擊」,例如「點擊 XX 按鈕」。如果是英文要注意,引用的按鈕文案用大寫字母,而不是引號引起來。

2. 按鈕相關注意事項

按鈕規範系列!從四個方面詳解「按鈕位置」的設計方法

本文從經典的古騰堡原則出發,通過超多大廠的優秀案例告訴大家如何正確擺放按鈕的位置。

閱讀文章 >>

數量

1 個按鈕用於通知場景,通常是 2 個按鈕,3 個以上建議使用活動面板(Action Sheet)。

明確

盡量使用與標題和消息直接呼應的動詞,避免使用是和否。

位置

取消按鈕在左側,建議操作按鈕在右側。

破壞性的操作

破壞性的操作要使用系統已有的「破壞性」格式。將「取消」按鈕標記為默認按鈕,使其變為粗體。

Action Sheets 動作面板

動作面板是消息對話框(Alert)的一種特殊形態,在用戶點擊某控件后出現的一組操作選項(發起任務、對破壞性操作進行確認等)。在較小屏幕上,動作面板是從屏幕底部向上滑出的。在較大屏幕上,動作面板以彈出窗口(Popover)的形式一次全部彈出。

屏幕底部放置取消按鈕。原則上取消按鈕不是必要的,但可以讓用戶獲得確定性和安全感。

破壞性操作要足夠明顯。通過紅色文字暗示其危險性,將破壞性操作置於其他操作頂部。

不要讓動作面板滾動。若操作項過多,用戶可能需要滾動才能查看所有選項,這會增加誤操作的概率。

Activity Views 活動視圖

活動視圖。一個活動即一個任務,例如「複製」,「添加收藏」或「查找」等針對當前內容的有用操作,一旦選中立即執行,或是獲取執行任務所需的信息。

是採用卡片樣式還是彈窗樣式,取決於設備尺寸和方向,如下圖。

系統內置任務,系統自帶一些內置任務,例如打印、發送消息、AirPlay 等。系統內置任務默認展示在前面,順序不能改變,不要重新設計,但可配置不使用哪些任務。

可支持分享到其他應用和一些擴展操作。

圖標標題保持簡短,標題太長會被系統縮小甚至被截斷。

動作按鈕,使用系統默認的動作按鈕(action button)來調出活動視圖。動作按鈕見下圖。

Popovers 彈窗

彈窗可以是模態或者非模態的,如果彈窗是非模態的,點擊彈窗以外區域就可以使彈窗消失。

彈框體系總結:模態彈框和非模態彈框

王M爭:彈框是一種重要的交互方式,主要用於完成信息傳遞和用戶反饋兩大功能。彈框很常見,但並不見得每一個設計師都可以100%的弄明白彈框這個概念。這篇文章是對彈框體系的一個簡單…

閱讀文章 >>

彈窗元素。彈窗可以包括各種元素,包括導航欄、工具欄、標籤欄、表格、集合、圖片、地圖,自定義視圖等。

屏幕。彈窗更適合用在大屏設備上(比如 iPad)。

建議保存操作結果。非模態彈窗容易由誤操作導致關閉,例如用戶不小心點擊了彈窗以外區域。除非用戶主動點擊「取消」按鈕關閉彈窗,否則建議保存用戶的操作結果。

謹慎考慮彈窗大小和位置。彈窗不要太大,不要遮擋重要內容和來源控件。

不要在彈窗上面疊加彈窗。要展示多個,必須先關掉前一個(消息對話框除外)。

彈窗大小變化時使用動畫效果平滑過渡,不然用戶會以為出現了一個新彈窗。

歡迎關注作者的微信公眾號:「能呆書房一整天」

未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極5登錄_iOS 人機界面指南精簡版筆記之界面元素:Views(上)

赞 (0)