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(上)