追求卓越一諾千金

藍藍設計-沈阳市财政局财会之窗,2011年成立--|2分钟快3是什么彩票,主創清華團隊台湾杨帆,專注軟件和互聯網ui設計開發|_动情迹忆。擅長企業信息化管理-_|众亿彩票注册、監控---2004009期双色球事件、大數據軟件UIUE谘詢和設計開發服務__众盈彩票真能挣钱吗。立足UI__-魔力旺旺,好好學習-_亿彩下载安装,天天進步-_张子强电影!


交互控件科普係列花果园业主论坛! Sheet 的常見樣式和設計注意事項總結

2019-9-2 泥人張 手機及小程序界麵設計文章及欣賞


還在頻繁地使用彈窗對用戶展示重要提示嗎|_|陈德铭去向?明知這樣有損體驗卻沒有更好的選擇嗎-|-二胡几根玄?那麼不妨來試試幹擾度更低__英国商人,卻依然可以用於重要提示的 Sheet 控件吧_|雅迪燃油助力车价格。

什麼是Sheets

Sheets 控件並非彈窗-|枪王之王游戏,通常會被熟稱為「浮層」或「浮窗」__|132彩票官网注册用户名。

該控件在 iOS 和 Android 係統規範中都有相關定義|-qq2011官方下载正式版免费下载,屬於多才多藝的控件--2019香港赛马比赛,可以用於給予信息提示_|happytogetherfx,也可用於展示更多的拓展信息|-_狼行天下三轮车。

從用於提示的角度來看--_广州火车北站,Sheets 控件和 Dialogs 控件的相同點和不同點在哪裏呢|_大庆信息港庆聊?

1. 共同點

模態化

二者都可以設置模態|_-苏西 埃米斯,當模態控件顯示時-__赢彩彩票注册邀请码,頁麵背景會顯示深色遮罩__闻一多的故事,並立即打斷用戶當前操作_世界杯意大利阵容。

承載操作和信息

二者都可以承載豐富的操作和信息__新塑料球,支持嵌入列表_-陇南政府、選擇器等控件及圖片_|赢咖娱乐靠谱吗、文本信息|390彩票网址。

2. 不同點

觸發方式不同

Dialog 可以不通過用戶操作而自動觸發---地精炼金术士,Sheet 必須通過用戶操作才可以觸發顯示--盈彩彩票软件,因此用戶對 Sheet 的顯示會更有預期___温汤散。

關閉方式不同

Dialog 的關閉方式較少_镇江警官学校,通常會要求用戶進行選項操作後才可關閉-__掌上彩票没有了;Sheet 的關閉方式較多|_大成基金2020,對於用戶而言有更豐富的選擇權_|经典图文日志。

因此綜上所述|__248彩票真害人,我們可以發現-_|苍井空50分钟无码,Sheet 對比 Dialog 的優勢在於|雷霆扫毒蒙面人是谁,它的顯示會更符合用戶的預期_|-中博彩票娱乐平台登录,它的幹擾層度也會低於Dialog(因為更易關閉)---心理罪为什么看不了。

  • Sheets 在 Google Material design 規範中被分為了 Bottom sheest 和 Side sheets 兩類|_易旺彩票信誉;
  • 在 iOS Human Interface Guidelines 中被分為了 Action sheets 和 Activity views 兩類--_李白谈爱原文。

下麵就由我來依次詳解其特性和玩法吧|_芦竹根。

Bottom sheets 底部浮窗

專屬於 Android 的 Sheets 控件--118彩票是不是正规的。

1. 使用場景

用於補充內容相關的更多信息(非模態)--_众盈彩票怎么猜、提供可交互的菜單或對話(模態)或其它關鍵功能/任務的拓展-__历届北京市委书记。

2. 注意事項
  • Bottom sheet 通常用於 Android 豎屏場景|-31选七走势图,在 Android 橫屏場景建議使用 Side sheet||西雅图邀请赛。
  • 在 iOS 中不建議使用 Bottom sheet_|234彩票是黑彩吗,建議使用原生的 Action sheets 或 Activity views_-小学安全教育记录。
3. 樣式類型

菜單樣式

可嵌套 Menus__长江工程职业技术学院教务系统,展示多個選項內容-_永胜国际app是干什么的。

宮格樣式

可使用宮格布局||殷世航,展示多個選項內容||_张一山股票视频下载。

迷你樣式(非模態)

一個非模態底部浮窗可被設置固定展示在頁麵底部__teemzone钱包怎么样,用戶可以隨時用它來對其它功能/任務進行快捷操作|-1分快3,如進入購物車-|酷顿、查看所選圖片__|雅漾防晒霜保质期、查看聊天和查看剛才的視頻等_|浙江省师训管理平台。

4. 模態/非模態

非模態浮窗__|众赢彩票软件:如左下圖所示__093彩票怎么样,非模態浮窗與內容保持在同一層級___塔罗牌大师tlp6868668,用戶可同時對內容和浮窗進行操作|_|刷qb软件免费版。

模態浮窗--上海体育馆招聘会:如右下圖所示|-让我再抱你一回,模態浮窗層級高於內容_-_晶体敌百虫,背景深色顯示遮罩_-258竞彩网合法吗,用戶僅能對浮窗進行操作---365彩票打不开。

5. 顯示與消失

顯示

浮窗顯示時從底部向上滑入__-青苹果家园系统,非模態浮窗顯示時不會打斷用戶操作-_-电影天堂快车下载,模態浮窗顯示時會顯示深色遮罩以打斷用戶操作-_张子强电影。

消失

浮窗消失時會向底部滑出-长春市亚泰小学。

模態浮窗在以下情況下會消失_-高考是哪天:

  • 用戶觸發浮窗上的對應操作(自定義)||_雪佛兰beat;
  • 用戶點擊浮窗外的區域|_-临朐韩涛;
  • 用戶下拉浮窗達到收起閾值後(自定義)-_|绅士的恶魔剧情介绍;
  • 用戶點擊 Android 係統返回鍵---2018彩票平台排行榜。

非模態浮窗在以下情況下會消失--初中数学教案模板:用戶選中浮窗上的對應按鈕(自定義)_注册送99元现金可提现。

6. 支持高度延伸

當浮窗底部仍有未顯示的內容時|_-鹿喜微断食纤体,可設置通過滑動或拖動浮窗來使其變為全屏展示|_|铁路调度系统,並在頂部顯示 Toolbar 來展示關閉/收起操作|-_欧蒂芙喷立婷。

7. 支持深層鏈接

模態浮窗中可以展示其它應用的深層鏈接內容或操作|圆点包包网,譬如調用 Google 翻譯||锈水财阀声望。

8. 範例

抖音的評論功能使用的是模態 Bottom sheet_沪指最低点;百度地圖的路線切換功能使用的是非模態 Bottom sheet|||情况说明模板。

Side sheets 側邊浮窗

專屬於 Android 的 Sheets 控件--_沟槽式法兰。

1. 使用場景

用於補充內容相關的更多信息(非模態)或提供可交互的列表信息(模態)|-铁路公安改革。

2. 注意事項
  • Bottom sheet 通常用於 Android 豎屏場景-_|36选7中注好彩3中奖,在 Android 橫屏場景建議使用 Side sheet|_-吹情药。
  • 在 iOS 中不建議使用 Bottom sheet-_-盈彩在线678,建議使用原生的 Action sheet 或 Activity views|_|亚当夏娃怡情谷。
3. 樣式類型

菜單樣式_|长沙居家spa:可嵌套 Menus|全鹿大补胶囊,展示多個選項內容|-|2019年彩友福彩3d预测。

宮格樣式--天然故事:可使用宮格布局|_-让我再抱你一回,展示多個選項內容-_35彩票官方。

4. 模態/非模態

如左下圖所示-_-万能上分器,非模態浮窗與內容保持在同一層級__-51jiemeng,用戶可同時對內容和浮窗進行操作(在移動端較少使用-_八宝山旧货市场,通常用於 PC 端)-|诺基亚ovi。

如右下圖所示-_亿彩账号,模態浮窗層級高於內容-|_云端彩票,背景深色顯示遮罩|_芙蓉树下的博客,用戶僅能對浮窗進行操作_-_钢铁战歌。

5. 顯示與消失

顯示

浮窗顯示時從左/右邊緣滑入-_谈爱李白原文,非模態浮窗顯示時不會打斷用戶操作|-长春艺术实验中学,模態浮窗顯示時會顯示深色遮罩以打斷用戶操作_|_365彩票网站是否正规。

消失

浮窗消失時會向左/右邊緣滑出-众盈彩票的骗局揭秘。

模態浮窗在以下情況下會消失||陕西高职院校排名:

  • 用戶觸發浮窗上的對應操作(自定義)|--青年中国说余佳文;
  • 用戶點擊浮窗外的區域|||保定二手摩托车58;
  • 用戶側拉浮窗達到收起閾值後(自定義)|_自我介绍包括什么;
  • 用戶點擊 Android 係統返回鍵-18乐捕鱼游戏平台18乐游戏中心。

非模態浮窗在以下情況下會消失_艾尔之光剑鞘骑士加点:用戶選中浮窗上的對應按鈕(自定義)_||动情迹忆。

6. 滑動說明

支持上下滑動|--金鼎一级大豆油,不支持左右滑動_|-佐助vs团藏是第几集。

7. 範例

淘寶的篩選功能使用的是 Side sheet|__105彩票苹果版。

Action sheets 操作浮窗

專屬於 iOS 的 Sheets 控件-_|105彩票返点怎么回事。

1. 使用場景

用於呈現一組與當前操作相關的選項_-_众彩娱乐登录,如啟動某個任務|_-10元可提现的彩票网站,或者確認是否開始執行某個可能具有破壞性的操作|--078彩票计划群。

2. 注意事項

在 Android 中不建議使用 Action sheet___粤dk0213,建議使用原生的 Bottom sheet 或 Simple dialog|__106官网彩票怎么下。

3. 樣式類型

如下所示-_注册送168彩金,支持單個或多個操作的展示|-赢发彩票,以及說明文案的展示-永盛国际手机彩票官网:

4. 顯示與消失

顯示

浮窗顯示時從底部向上滑入_|淘宝整点聚秒杀器,會顯示深色遮罩以打斷用戶操作_||铁路安全管理条例。

消失

浮窗消失時會向底部滑出__娃哈哈股票代码。會在以下情況消失__智胜彩票官方:

  • 用戶觸發浮窗上的對應操作(自定義)__|11选5任3必中计算方法;
  • 用戶點擊浮窗外的區域_|优彩彩票苹果下载安装;
  • 用戶點擊浮窗「取消」按鈕||包头医学院就业指导网。
5. 顯示位置

豎屏時顯示在頁麵底部___炒葱椒鸡 菜系,橫屏是居中顯示在頁麵底部-|娱乐天地旧版。

6. 範例

微信的選擇朋友圈發布類型及清除聊天記錄的二次確認_运盛娱乐app靠谱吗,都是使用的 Action sheet--quick office。

Activity views 活動浮窗

專屬於 iOS 的 Sheets 控件||芬兰语好学吗。

1. 使用場景

用於呈現一組與當前操作相關的選項表__ZOOSKOOIStay大狗,如複製__谷子产地、收藏或分享|-潘春春 樊玲。

2. 注意事項

在 Android 中不建議使用 Activity views至尊彩网站12,建議使用原生的 Bottom sheet||动感地带积分兑换商城。

3. 樣式類型

列表樣式

宮格樣式

混合樣式

4. 顯示與消失

顯示

浮窗顯示時從底部向上滑入mucuntang,會顯示深色遮罩以打斷用戶操作|__作战场景布置。

消失

浮窗消失時會向底部滑出|-风来照相馆。會在以下情況消失-至尊彩是骗局吗?:

  • 用戶觸發浮窗上的對應操作(自定義)-干油泵;
  • 用戶點擊浮窗外的區域_|长沙三毛妮休闲中心;
  • 用戶下拉浮窗達到收起閾值後(自定義)|-运盛彩票网行大运。
5. 顯示位置

豎屏時顯示在頁麵底部-_金池 后知后觉,橫屏是居中顯示在頁麵底部_娱乐彩票平台代理。

6. 支持高度延伸

當麵板底部仍有未顯示的內容時|_库提价,可設置通過滑動或拖動麵板來使其高度進行延伸--优游登录地址,從而展示更多信息_||广东打黑。

7. 範例

愛奇藝的分享功能和泡泡圈選擇發布內容類型|--优衣库视频完整版下载,都使用的是 Activity view__娱乐天地拉菲吧。

用法總結

建議針對非係統級或業務級的重要提示__萌系牛奶,使用 Sheets 控件進行提示|--阿克苏教育局;Dialogs 控件僅用於最重要的信息提示才算是「好鋼用在了刀刃上」|-掌上彩票官方版下载。

另外在調用原生 Sheets 組件時_诺基亚5310xm怎么样,記得分端的差異性--|今日股市行情查询。

文章來源_256买彩安卓版:優設網

標簽: 交互控件||张柏芝约谈谢霆锋;sheets樣式 « 巧用動效解決問題 | Vue 3.0 前瞻-_美丽港发型设计软件,體驗 Vue Function API»


訂閱Rss