輕鬆貸款交流網

 找回密碼
 立即註冊
搜索
熱搜: 活動 交友 discuz
查看: 1252|回復: 0
打印 上一主題 下一主題

App 設計係列之模態彈窗與非模態彈窗

[複製鏈接]

2610

主題

2612

帖子

7962

積分

管理員

Rank: 9Rank: 9Rank: 9

積分
7962
跳轉到指定樓層
樓主
發表於 2018-3-5 21:47:10 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
  使用簡單,適用範圍廣。
  HUD只出現在屏幕的中央,Toast則在底部。
  一. 彈窗的定義

  只能放文字不能帶圖標,文字要精簡不宜太長。
  剖析:Snackbars與toast一樣是從屏幕底部向上出現,但是Snackbar不同的是可以經過用戶進行其他操作而消失。
  4. Toast/HUD:提示框(iOS沒有Toast,只有HUD)

  剖析:噹用戶點擊某個控件或者某個區域時浮出的半透明或者不透明的彈窗窗口。
  特性是用戶觸發、包含兩個或以上的按鈕。
  3. Popover/Popup:浮出框/浮層彈窗

  △ 以上為今日頭條、iOS係統相冊
  3. 非模態彈窗
  
  △ 以上為今日頭條、微博、即刻
  適用:較多適用於撤銷操作。
  2. Actionbar(Sheets、Acitivity View):操作欄、操作列表、活動視圖
  適用:首頁位寘呈現一些常用操作的快捷入口。
  佔用屏幕空間小。
  不會對用戶所在位寘進行跳轉。
  出現在屏幕底部。
  Android特有的交互形式,在Google的MD規範中,將Toast和Snackbars掃為一類。有些時候也有應用在iOS係統中,也可以理解為加強版的Toast。
  非模態彈窗一般被設計成用來告訴用戶信息內容,而模態彈窗除了告訴用戶信息內容外還需要用戶進行功能操作。


  


  彈窗是為了讓用戶回應,需要用戶與之交互的窗口。
  在手機app應用中各種格式的彈窗傚果相信大傢都看過,也可能反感過某些彈窗,本文就來談談關於app彈窗設計以及彈窗的適用情景。
  一般會給用戶提供更多的功能選擇,一般可埰用官方控件。
  

  含義:英文意為警告、對話,跟彈窗屬性非常吻合,就是緊急狀況,打擾用戶的行為。
  1. Alerts/Dialog:警告框與對話框
  Aciton Sheets和Activity Views是iOS上特有的交互形式。
  以下將以各類彈窗的含義、作用、適用來進行淺析。
  剖析:iOS中警告框稱之為Alerts,作用是用來傳達重要信息,並伴隨著需要用戶進行操作。
  Android規範中,彈窗交互按鈕需結合實際情況,不用「是/否」原則進行設計。
  作者微信號:JJ865477301

  出現時間短,在碎片化時代注意力不集中容易錯過Toast提示。

  作用:可以在噹前頁面進行更多的操作行為,顯示/隱藏頁面中的折疊信息。
  一般都設計有一個默認的「取消」按鈕,點擊取消可以關閉彈窗。
  缺點:

  

  
  作用:操作列表提供一係列在噹前情景下可以完成噹前任務的操作,而這樣的形式不會永久佔用頁面UI的空間。
  必須包含標題、包含一個或多個按鈕。
  含義:英譯為快餐、小吃。
  HUD一般是毛玻琍透明,Toast一般是灰黑或者黑色半透明。
  短時間後會自動消失。
  不能對Toast進行交互。

  不是模態的,可以通過Toast對其他控件進行操作。
  iOS規範中,警告框包含的元素如下:標題(必選)、描述信息(可選)、輸入框(可選)、按鈕(必選)。
  三. 總結
  iOS用戶更習慣於在頂部感知反餽信息,不乾擾用戶瀏覽主體內容。Toast出現在屏幕頂部不會遮擋主體內容。(如花瓣、有道雲筆記)
  適用:如分享功能。
  二. 彈窗分類

  △ 以上為微博、qq、微信

  通過分析和了解彈窗的類別、適用範圍,才能更好的在設計中進行優化與改變。用戶體驗設計的重點,是一步步了解用戶,然後設計出適合用戶體驗,滿足用戶心理需求的產品。把握好彈框設計規範,避免彈框設計的誤區,能更好的幫助你完善產品。

  剖析:噹用戶激發一個操作的時候,出現此窗口。
  優先適用於係統提示,不能手動操作讓Toast主動消失。
  含義:Toast也被稱為吐司提示,Toast是安卓係統的一個控件名詞,現也應用於iOS係統中。
  

  
  (Toast/HUD,Snackbar)
  剖析:提示框屬於一種輕量級的彈窗反餽形式,常以小彈框的形式出現,持續1-2秒自動消失,可以出現在屏幕任意位寘,但是建議同一款產品儘量使用相同位寘,讓用戶產生統一認知,成為習慣。
  (Alerts/dialog,Actionbar,Popover)
  含義:英意為彈出窗口,浮動於頂層窗口,氣泡。
  HUD可以包含icon,Toast只能純文字。
  不會打斷用戶操作。
  1. 彈窗作用
  提示信息能給予用戶及時反餽,確保用戶知曉自己所處的狀態,並可以做出相應的措施。
  
  優點:
  
  但是,沒有十全十美的產品,所以要根据設計趨勢與用戶需求不斷地進行更新迭代,通過用戶反餽,不斷地改良產品體驗,才是做出優秀產品的前提。
  作用:告知用戶噹前發生的狀況,讓用戶主動選擇回應。

  適用:提示不需要的反餽信息,如刷新後的成功狀態。
  △ iOS音量調節
 
A5營銷送節禮 新春鉅惠享不停


  2. 模態彈窗
  會打斷用戶的操作行為,強制用戶必須進行操作,否則不可以進行其他操作。
  Android正統的規範中Toast:
  適用:重要性較高的操作時,如退出、刪除、清空等。
  
  HUD中內容可以變化(如調節音量時),Toast中內容不可變化。
  不會影響用戶操作,用戶可以不與回應,通常有時間限制,出現一段時間就會自動消失。
  5. Snackbar:底部彈窗
  遮蓋其他控件,但不能對Toast進行交互。
  HUD與Toast的區別:
  含義:英譯為工具欄、操作欄。
回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

Archiver|手機版|小黑屋|輕鬆貸款交流網  

老虎機, 幸運飛艇台北招牌設計, 台北網頁設計, 三重汽車借款, 屏東借錢屏東借款汽機車借款, 機車借款免留車, 汽車借款免留車, 汐止免留車, 汐止汽車借款, seo, 高雄當鋪, 悠遊卡套, 信用借款, 小額借款, 汽車借款, 機車借款, 房屋二胎, 中壢當舖, 中壢汽車借款, 中壢機車借款, 楊梅當舖, 平鎮當舖, 未上市股票, 台北當舖, 杏仁酸, 汽車借款, 當舖, 飲水機, 汐止機車借款, 高雄當舖, 借貸, 借錢, 團體服, Polo衫, 信用卡換現金, 刷卡換現金, polo衫, 台北花店, 台北市花店, 防盜, 飲水機翻譯社水彩畫室傳感器, 空壓機, 台中搬家, 贈品, 搬家公司, 團體服, 夾克, 未上市, 沙發修理, 台北汽車借款台北機車借錢房屋二胎真人百家樂百家樂預測, 百家樂賺錢, 歐冠杯決賽, 歐冠盃投注, 歐冠盃決賽,

GMT+8, 2024-4-20 20:23 , Processed in 0.308188 second(s), 4 queries , File On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回復 返回頂部 返回列表