超實用!3分鐘帶你掌握11個最常用的交互控件

      作者:cyRotel
      分類: 觀點/經驗
      2017-06-01
      4037

      模態讓用戶聚焦到某一個任務、消息或者視圖上而不能做別的事情,直到用戶完成了當前的任務。

      警告框(Alerts),彈出框(Popovers,iOS獨有),簡易菜單(Simple Menus,MD獨有),模態視圖(Modal Views,iOS獨有),確認彈框(Confirmation Dialogs,MD獨有),全屏彈框(Full-screen Dialogs,MD獨有),上拉菜單(Action Sheets,iOS獨有),簡易彈框(Simple Dialogs,iOS獨有),活動視圖(Activity Views,iOS獨有),底板(Bottom Sheets,MD獨有),提示框(Toasts)。既然各個控件都出過場了,是時候讓它們合個體了!!

      模態

      觀察上表,左邊iOS這一欄,從警告框到活動視圖,它們構成了一個聽起來很高大上的詞匯——模態(Modal,不是Model)。iOS設計規范對模態的定義是這樣神兒的:模態讓用戶聚焦到某一個任務、消息或者視圖上而不能做別的事情,直到用戶完成了當前的任務。比如警告框,用戶必須必須選擇警告框里的一個選項,警告框才會消失,否則用戶什么也做不了。這個警告框,就創造了“模態”的體驗。

      模態.png

      △ 模態示例1——警告框

      警告框.png

      △ 模態示例2——模態視圖。

      關于如何使用模態,蘋果有以下幾點建議:

      1. 盡量少使用。因為一般來說,人們使用應用的時候不是線性的,不是先做A再做B這樣,是想到啥做啥。而模態是線性的,比較強制。蘋果建議,只在某個任務特別重要,必須引起用戶的注意、或者某個任務必須被完成才能繼續使用應用、或者需要應用需要保存數據時,才使用模態這種設計。

      2. 使用模態時需要提供一個清楚明白的退出模態的通道。需保證用戶總能知道他們在一個模態中操作后的結果。

      3. 保持模態里的任務簡單、簡短、單一。如果要在模態視圖中創建帶有多層級關系的任務,一定要慎重!因為用戶很容易忘記它們操作的來龍去脈。

      4. 只在展示很重要的提示信息時,才考慮使用警告框。最理想的情況是,警告框可以讓用戶采取行動。警告框比較打擾用戶,所以有必要讓用戶覺得這種打擾是值得的。

      5. 不要在一個彈出框上面使用模態視圖。彈出框之上唯一可以出現的,是警告框(警告框權限真的很大啊!)如果非要在彈出框上面展示一個模態視圖,那么請先讓彈出框關閉,再展現模態視圖。

      在Material Design(簡稱為MD,下同)中,沒有與模態相對應的概念。但其實,對話框和底板(除了固定底板),構成的也是模態的體驗。

      控件對比總結

      不知不覺中,對比了這么多控件。下面我們來總結一下各個控件的特點,方便各位更好的理解這些控件。

      警告框

      警告框1.png

      △ 左:iOS警告框; 右:MD警告框

      左圖展示了iOS中警告框的幾種形式,右圖展示了MD中警告框的包含元素,其中標題不是必須的。對于警告框,蘋果規范和MD都建議盡量少使用,必須是告知很重要的信息才出現。另外,對于警告框的按鈕,應盡量告知用戶操作的結果,而盡量避免使用“是/否”這樣的文案。

      彈出框 & 簡易菜單

      彈出框 & 簡易菜單.png

      △ 左:iOS彈出框; 中、右:MD簡易菜單

      對于iOS的彈出框,原本是針對iPad這樣的大屏設備設置的控件,近兩年由于手機屏幕越來越大,也開始應用于手機,需要注意iOS的彈出框是自帶箭頭的,箭頭指向入口。MD的簡易菜單,需要注意菜單沒有箭頭,并且菜單是壓住入口的,這一點經常被用錯。

      上拉菜單 & 簡易彈框

      上拉菜單 & 簡易彈框.png

      △ 左:iOS上拉菜單; 右:MD簡易彈框

      上拉菜單和簡易彈框,都是用于提供一些列選項的控件。不同的是,上拉菜單必須包含“取消”按鈕;上拉菜單可用于毀滅性操作(比如“刪除”)等的二次確認。而簡易彈框沒有“取消”按鈕,在選項中可加入頭像、icon等元素,另外還有如上圖中的“添加聯系人”這樣的操作按鈕。

      上拉菜單 & 活動視圖 & 模態底板

      上拉菜單 & 活動視圖 & 模態底板.png

      △ 左:上拉菜單; 中:活動視圖; 右:模態底板

      細心的朋友可能已經發現了,這里又出現了上拉菜單。事實上,這里要跟大家總結一下,上面提到的彈出框、上拉菜單、活動視圖、簡易彈框、簡易菜單、模態底板,功能上其實非常相近,都是提供當前環境下的一系列選項。區別是展現形式的不同,還有個別控件有其獨特的功能點。在MD中,有這樣一句介紹:Modal bottom sheets are alternatives to menus, or simple dialogs, and can display deep-linked content from another app(模態底板與簡易彈框、簡易菜單可以互相替換使用,唯一的區別就是模態底板中可以承載深層鏈接)。鐺鐺,模態底板把這一串控件都串起來了。

      確認彈框 & 全屏彈框 & 模態視圖

      確認彈框 & 全屏彈框 & 模態視圖.png

      △ 左:MD確認彈框; 中:全屏彈框; 右:模態視圖

      確認彈框用于確定一個選項。全屏彈框和模態視圖,可用于較為復雜的任務,它們可以調起別的控件。

      另外,還有工具欄(下一篇會介紹)、模態底板和提示框,就不一一列舉了。


      0
      0
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務聯系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學科技園東區9號樓2層

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

      主站蜘蛛池模板: 国产福利一区二区精品秒拍| 冲田杏梨AV一区二区三区| 亚洲成AV人片一区二区| 中文乱码人妻系列一区二区| 国产成人无码AV一区二区| 无码一区二区三区中文字幕| 久久伊人精品一区二区三区 | 国内偷窥一区二区三区视频| 日本片免费观看一区二区| 无码午夜人妻一区二区三区不卡视频| 亚洲av乱码中文一区二区三区| 国产成人AV一区二区三区无码 | 国模无码一区二区三区不卡| 国产伦精品一区三区视频| 51视频国产精品一区二区| 污污内射在线观看一区二区少妇| 久久成人国产精品一区二区| 人妻无码一区二区三区| 日本中文一区二区三区亚洲| 国产精品一区二区久久沈樵| 国产成人欧美一区二区三区| 最新中文字幕一区| 成人精品视频一区二区三区尤物| 麻豆AV无码精品一区二区| 一区二区三区在线观看| 久久蜜桃精品一区二区三区| 亚洲熟妇无码一区二区三区导航| 中文字幕无码不卡一区二区三区| 日韩在线一区二区| 日韩精品免费一区二区三区| 日本一区二区三区日本免费| 杨幂AV污网站在线一区二区| 中文字幕在线观看一区二区三区| 国产在线精品一区二区夜色| 国产午夜精品一区二区三区漫画| 国产一区二区免费| 99在线精品一区二区三区| 国模精品一区二区三区视频| AV怡红院一区二区三区| 国产一区二区福利| 亚洲变态另类一区二区三区|