杏吧app下载，关婷娜被揉胸视频直播，杏吧之春暖花开有你

array(23) {
  ["id"] => string(2) "96"
  ["siteid"] => string(1) "1"
  ["type"] => string(1) "1"
  ["m_id"] => string(1) "0"
  ["p_id"] => string(1) "0"
  ["name"] => string(6) "服務(wù)"
  ["thumb"] => string(63) "/modules/cms/uploads/recommend/2018/05/15/05797102164099283.png"
  ["image"] => string(0) ""
  ["desc"] => string(0) ""
  ["pdir"] => string(0) ""
  ["dir"] => string(7) "service"
  ["url"] => string(0) ""
  ["setting"] => array(15) {
    ["is_html"] => int(1)
    ["content_is_html"] => int(0)
    ["urlrule"] => int(1)
    ["contenturlrule"] => int(0)
    ["meta_title"] => string(88) "定制開發(fā)-APP定制開發(fā),微信定制開發(fā),小程序定制開發(fā),網(wǎng)站定制開發(fā)"
    ["meta_keywords"] => string(75) "APP定制開發(fā),微信定制開發(fā),小程序定制開發(fā),網(wǎng)站定制開發(fā)"
    ["meta_description"] => string(0) ""
    ["category_template"] => string(0) ""
    ["list_template"] => string(0) ""
    ["show_template"] => string(21) "show_page_dingzhi.tpl"
    ["formid"] => string(0) ""
    ["url"] => string(0) ""
    ["target"] => string(0) ""
    ["pri_grade_visit"] => array(0) {
    }
    ["pri_grade_add"] => array(0) {
    }
  }
  ["order"] => string(1) "1"
  ["sethtml"] => string(1) "0"
  ["stat"] => string(1) "2"
  ["flowid"] => string(1) "0"
  ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2018/05/25/05805654599261264.jpg"
  ["page_num"] => string(1) "0"
  ["wxstat"] => string(1) "0"
  ["scope"] => string(0) ""
  ["modelname"] => NULL
  ["son"] => array(9) {
    [0] => array(22) {
      ["id"] => string(3) "187"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(15) "小程序開發(fā)"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(112) "專業(yè)微信小程序解決方案|各種場景核心功能，提前布局微信新生態(tài)，搶占第一波紅利"
      ["pdir"] => string(0) ""
      ["dir"] => string(6) "wechat"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(107) "小程序_商城小程序_門店小程序_微圈小程序_餐飲小程序開發(fā)-藝源科技小程序開發(fā)"
        ["meta_keywords"] => string(103) "小程序開發(fā),商城小程序開發(fā),門店小程序開發(fā),微圈小程序開發(fā),餐飲小程序開發(fā)"
        ["meta_description"] => string(269) "專注提供專注提供小程序、商城小程序、門店小程序、微圈小程序、餐飲小程序開發(fā)，專業(yè)團隊,一對一服務(wù),助企業(yè)快速生成自己的移動端微商城平臺. 藝源科技小程序采用高性能數(shù)據(jù)架構(gòu),系統(tǒng)穩(wěn)定安全。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_xcx.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "0"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "1"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [1] => array(22) {
      ["id"] => string(3) "199"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(9) "APP開發(fā)"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(3) "APP"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(65) "app開發(fā)_app定制開發(fā)_app制作開發(fā)公司【藝源科技】"
        ["meta_keywords"] => string(53) "app開發(fā),app定制開發(fā)公司,app制作開發(fā)公司"
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_app.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "1"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [2] => array(22) {
      ["id"] => string(3) "244"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "快抖霸屏"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "kuaidou"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(71) "快抖霸屏_抖音快手霸屏_短視頻營銷獲客技術(shù)提供商！"
        ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短視頻搜索,同城爆店碼"
        ["meta_description"] => string(161) "藝源智能云推廣系統(tǒng)13325455411專注快抖霸屏,抖音快手霸屏,同城爆店碼,一款線下與線上流量緊密結(jié)合的營銷爆客解決方案。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(20) "show_page_douyin.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "2"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(27) "需要短視頻推廣排名"
      ["modelname"] => NULL
    }
    [3] => array(22) {
      ["id"] => string(3) "207"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(14) "AI智能名片"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/07/04/06155550417466502.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(2) "ai"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(68) "藝源AI智能名片_名片小程序_智能名片_讓銷售更簡單"
        ["meta_keywords"] => string(97) "藝源AI智能名片,名片小程序,智能名片_讓銷售更簡單,電子名片,二維碼名片"
        ["meta_description"] => string(184) "藝源AI智能名片-讓銷售更簡單。藝源AI智能名片為企業(yè)提供名片小程序,智能名片,企業(yè)名片,小程序名片,電子名片,二維碼名片等相關(guān)的服務(wù)。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(16) "show_page_ai.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "3"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [4] => array(22) {
      ["id"] => string(3) "201"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "版權(quán)登記"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814062280145708.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(9) "copyright"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(0) ""
        ["meta_keywords"] => string(0) ""
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(23) "show_page_copyright.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "4"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814063838873717.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [5] => array(22) {
      ["id"] => string(3) "203"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "商標注冊"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813359170749750.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(9) "trademark"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(131) "商標注冊_商標注冊流程_商標注冊流程及費用_西安商標注冊_西安商標注冊代理-「源知果」藝源科技"
        ["meta_keywords"] => string(103) "商標注冊,商標注冊流程,商標注冊流程及費用,西安商標注冊,西安商標注冊代理"
        ["meta_description"] => string(182) "「源知果」西安提供代理版權(quán)登記，代理商標注冊，代理專利申請，代理企業(yè)貫標，代理高新技術(shù)企業(yè)認定的服務(wù)；咨詢電話：13325455411。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(23) "show_page_trademark.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "5"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/11/06135617157272716.png"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [6] => array(22) {
      ["id"] => string(3) "205"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "網(wǎng)站建設(shè)"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/06/21/06144566585327511.jpg"
      ["desc"] => string(149) "節(jié)約IT成本/降低運維成本/網(wǎng)站安全穩(wěn)定/不滿意全額退款|節(jié)約IT成本/降低運維成本/網(wǎng)站安全穩(wěn)定/不滿意全額退款"
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "website"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(80) "西安商城網(wǎng)站建設(shè)_政府網(wǎng)站建設(shè)_學校網(wǎng)站建設(shè)就選藝源科技"
        ["meta_keywords"] => string(113) "西安網(wǎng)站建設(shè),西安網(wǎng)絡(luò)公司,西安網(wǎng)頁設(shè)計,商城網(wǎng)站建設(shè),政府網(wǎng)站建設(shè),學校網(wǎng)站建設(shè)"
        ["meta_description"] => string(248) "「藝源科技」是西安一家專業(yè)的西安商城網(wǎng)站建設(shè),政府網(wǎng)站建設(shè),學校網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司，咨詢電話:029-88810146/150 9401 9029。公司擁有10年實踐經(jīng)驗,為您提供一條龍的互聯(lián)網(wǎng)應(yīng)用解決方案。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(21) "show_page_website.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "6"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/24/06146855992801864.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [7] => array(22) {
      ["id"] => string(3) "208"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "2"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(15) "云服務(wù)平臺"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(0) ""
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(0)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(0)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(0) ""
        ["meta_keywords"] => string(0) ""
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(0) ""
        ["formid"] => string(0) ""
        ["url"] => string(21) "http://www.qulvkj.com"
        ["target"] => string(6) "_blank"
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "7"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [8] => array(22) {
      ["id"] => string(3) "202"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(9) "SEO優(yōu)化"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813061683398516.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(3) "seo"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(90) "【西安SEO優(yōu)化_西安網(wǎng)站優(yōu)化_關(guān)鍵詞排名優(yōu)化】-SEO優(yōu)化公司藝源科技"
        ["meta_keywords"] => string(81) "西安SEO優(yōu)化,西安SEO優(yōu)化公司,西安網(wǎng)站優(yōu)化,西安網(wǎng)站優(yōu)化公司"
        ["meta_description"] => string(244) "藝源科技（yysweb.com）,專注為企業(yè)提供百度等搜索引擎整站SEO優(yōu)化服務(wù),針對不同行業(yè)、網(wǎng)站情況給出不同策略、報價和SEO建議;是您值得信賴的seo診斷、顧問咨詢等云SEO技術(shù)服務(wù)外包商。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_seo.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "8"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813062712033401.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
  }
}
當前位置： 首頁 > 售后 > 藝源智庫
超全面！這可能是你見過最全的彈窗設(shè)計解析
時間：2019-08-20 10:04:20
文章發(fā)布：李陽
原創(chuàng)作者：未知
來源：互聯(lián)網(wǎng)

彈窗，對于大家來說并不陌生。UI設(shè)計師在工作中，乃至日常App使用過程中，經(jīng)常接觸到形形色色的彈窗設(shè)計。今天這篇好文將讓你對彈窗設(shè)計的理解更加透徹。


看完本文你會學到：

1. 什么是彈窗，彈窗的定義
2. 彈窗的分類以及他們各自的特征
3. 彈窗設(shè)計的思考和優(yōu)化


一. 什么是彈窗

一般來說它的功能意義是：中斷用戶當前操作并對其作出補充，或中斷用戶當前操作并對其作出反饋。作為拉通產(chǎn)品交互與用戶操作的核心樞紐，作為用戶處理「即時任務(wù)」的重要載體，它的模樣可謂是千變?nèi)f化，但萬變不離其宗。在交互形式上它分為兩種形式，模態(tài)彈窗和非模態(tài)彈窗。

模態(tài)彈窗，它的特征為，當它出現(xiàn)在用戶的操作視野內(nèi)時，用戶需要對其作出回應(yīng)，所以它是可交互的。常見的種類有對話框（Dialog），警示框（Alter），浮層（Popover/Popup）和操作欄（Actionbar），由于它的特性，它的層級注定比較高，可以很好的吸引用戶的注意。同時會帶來頓挫感強烈的體驗風險，個人建議慎用。

非模態(tài)彈窗在特征上則與模態(tài)彈窗相反，它從出現(xiàn)到停留消失的時間很短暫，短到用戶不需要對它作出反映，所以它是一種輕量級的反饋機制。常見的種類有Hud/Toast，提示欄和Snackbar。


二. 彈窗的分類

模態(tài)：對話框

對話框類型的彈窗有很多，我把他們劃分為：信息下發(fā)類、信息提交類。

信息下發(fā)類型的對話框通常指代程序運行的過程出現(xiàn)需要用戶決策的「即時任務(wù)」。

比較典型的：系統(tǒng)、版本更新、消息通知、警示欄、運營/廣告彈窗等等。

這類彈窗的視覺層級非常高，設(shè)計也是多種多樣。通常出現(xiàn)在屏幕中心，伴隨半透明遮罩，讓你想忽略都難。他們通常用來提示重大信息，提醒用戶處理當前任務(wù)等等。由于它「引人注目」的特性，用于活動運營，廣告宣發(fā)的頻率非常高。

超全面！這可能是你見過最全的彈窗設(shè)計解析-藝源科技

△ 系統(tǒng)位置提示 / 新版本提示 / 開啟通知提示

超全面！這可能是你見過最全的彈窗設(shè)計解析-藝源科技

△ 系統(tǒng)電量提示 / 活動運營提示 / 廣告彈窗

信息提交類則是需要用戶在彈窗內(nèi)進行操作，二次提交信息。使用場景有，登錄注冊，改名分組等等，如下圖。

超全面！這可能是你見過最全的彈窗設(shè)計解析-藝源科技

△ 登錄對話框 / 改備注名 / 新建分組名

模態(tài)：浮層

超全面！這可能是你見過最全的彈窗設(shè)計解析-藝源科技

△ 按鍵浮層 / 按鍵浮層 / 下拉菜單浮層

浮層是指，用戶點擊某個功能控件后浮出一個臨時界面對其作出補充，它通常會伴隨半透明的遮罩/陰影襯底，用戶需要點擊臨時界面的功能區(qū)域，或者點擊空白處才能進行下一步操作。它也會有一些其他的名詞，像是「下拉菜單」「下拉彈窗」等等。他們的功能屬性是一樣的，所以我把他們歸類到一起，方便大家歸納。

模態(tài)：操作欄

超全面！這可能是你見過最全的彈窗設(shè)計解析-藝源科技

△ 操作欄 / 操作菜單 / 操作菜單

操作欄實際上和浮層很像，都是通過用戶主動點擊后對某一功能作出補充，只不過浮層通常出現(xiàn)在比較靠上的位置，操作欄通常出現(xiàn)在底部。浮層從形式上更強調(diào)它的歸屬，也就是從哪來，為用戶明確操作導向。圖三是讓我感到很迷惑的一個設(shè)計，我?guī)缀鯖]法為它歸類，由于它帶有半透明的毛玻璃遮罩，所以我把它歸為操作欄。它是點擊某個分享button出現(xiàn)的，整個界面密封性較高，點擊空白區(qū)域會撤銷當前操作，不過個人感覺如果不是慣性操作，用戶很容易覺得迷茫。建議適當優(yōu)化，例如加個返回鍵，固定操作區(qū)域等等。

Hud是iOS的控件，Toast則是android的，業(yè)內(nèi)大部分 App 在 iOS 提示體系內(nèi)采用了Toast來設(shè)計。所以兩個端不管從功能還是形式上來看都有異曲同工之處。

超全面！這可能是你見過最全的彈窗設(shè)計解析-藝源科技

△ 音量Hud / 更新氣泡 / 更新提示條

超全面！這可能是你見過最全的彈窗設(shè)計解析-藝源科技

△ 清理緩存 / 更新氣泡 / 更新氣泡

超全面！這可能是你見過最全的彈窗設(shè)計解析-藝源科技

△ 按鍵引導 / 按鍵引導 / 按鍵引導

由于他們的形式非常多變，甚至有些很難被定義，我截了以上9個界面來幫助大家理解。

通過1、2行圖例，大家可以看出，他們都是反饋用戶的任務(wù)狀態(tài)，例如更新了多少條新動態(tài)，發(fā)送成功，正在清除緩存等等。這類toast存在的時間非常短暫，大概1s左右。第3行圖例中的Toast和前兩行有些不同，他們主動出現(xiàn)，用于提示用戶，對某個功能點做必要的補充。

這類Toast存在的時間會稍長一點，或者伴隨用戶滑動/點擊后才會消失，我把這類叫做引導氣泡。重點想來聊一聊他們的「形式」和「位置」。從形式上來看大概分為純文本，icon+文本，有的是氣泡（POP），有的是提示條，設(shè)計師根據(jù)權(quán)重選擇即可。

從位置上來說，這些彈窗幾乎出現(xiàn)在任何區(qū)域，值得注意的是，Toast出現(xiàn)的位置往往與用戶操作息息相關(guān)，作為設(shè)計師，我們需要確保即便是這樣輕量的反饋，也要出現(xiàn)在合適的位置，有效的被用戶接收，像是下拉刷新后Toast一般出現(xiàn)在頂部，雙擊Navbar中首頁icon后提示更新的Toast會出現(xiàn)在底部，引導氣泡往往出現(xiàn)在按鍵周圍等等，設(shè)計師不妨多多思考。


非模態(tài)：Snackbar

超全面！這可能是你見過最全的彈窗設(shè)計解析-藝源科技

△ 售罄提示/ 簽到提示 / 登錄活動提示

Snackbar和Toast一樣是Android里的控件，也是現(xiàn)在通用于iOS端App提示提示的彈窗。同樣針對用戶操作的輕量反饋機制。他們通常出現(xiàn)在底部，可交互，短暫停留后，或滑動頁面后就會消失。這兩個端的交互方式存在一些區(qū)別，Android中Snackbar的出現(xiàn)更加針對用戶某個操作，iOS中可能用戶打開App，或者滑動商品列表就會出現(xiàn)，更像是吸引用戶，進行下一步操作，在電商 App 內(nèi)尤其常見。


非模態(tài)：提示欄

提示欄是內(nèi)嵌于當前頁面的一個組件，由于它和彈窗一樣與當前頁面有較大區(qū)別，所以我把它也歸入彈窗來總結(jié)了。常態(tài)下的提示欄雖然隸屬非模態(tài)彈窗，但是他們是常駐于頁面的某個區(qū)域的，并且可交互。

超全面！這可能是你見過最全的彈窗設(shè)計解析-藝源科技

△ 登錄提示 / 登錄提示 / 離線提示


總結(jié)

彈窗設(shè)計是我非常喜歡的內(nèi)容之一，我覺得它讓用戶真正感覺到自己與產(chǎn)品之間產(chǎn)生了某種聯(lián)系。同時，設(shè)計的好壞也考量了產(chǎn)品背后的團隊是否真正的了解用戶，了解產(chǎn)品。

不管是模態(tài)彈窗還是非模態(tài)彈窗，它的出現(xiàn)多多少少會影響到用戶當前的體驗，所以我們使用彈窗要克制，不能高頻率的使用。同時，我們選擇彈窗時也要謹慎，合理。

當出現(xiàn)犯錯成本很高的操作前，及時使用對話框提醒用戶規(guī)避風險，用戶才會覺得安心，可靠。如果在電量還剩10%時，蘋果只是淡淡的浮出1s的氣泡來提醒，而你恰好沒有看見導致關(guān)機，你是不是感到十分崩潰？所以，選擇彈窗也需要根據(jù)場景。

在文章的準備期我截了差不多70個界面，有的彈窗設(shè)計十分精妙，當然也有碰到「一言難盡」的設(shè)計。下面我羅列了彈窗設(shè)計的三個「反面案例」，希望為大家規(guī)避掉設(shè)計中的一些誤區(qū)。

超全面！這可能是你見過最全的彈窗設(shè)計解析-藝源科技

△ 版本更新提示 / 廣告彈窗 / 評價提示

反面1的問題：文案不友好

用戶并不關(guān)心新版本修復了什么問題，他們甚至連「Bug」是什么都不知道，彈窗的文案讓人覺得很迷惑。產(chǎn)品方不妨把思路從「我們修復了什么」換成「我們帶來了什么」，具體可以參考各大電商app的做法。

反面2的問題：錯誤的交互

當我打開這個App的時候，我甚至都沒有滑動頁面，就直接跳出一個廣告，這讓我覺得體驗非常差。并且重點是，居然設(shè)置了5s后才能點擊關(guān)閉按鈕。好吧，我立馬就卸載了并放進了反面案例中。不要在用戶沒有進行任何操作前彈窗。在高層級，高量級的彈窗上盡可能不要再次增加復雜的交互，再一次的消耗用戶耐心。這樣做實在太不合理了，建議參考一些新零售App的做法，利用設(shè)計+文案+布局，「聰明」的打廣告。

反面3的問題：糟糕的時機

這個彈窗的文案也很好，選項也很合理，看起來沒有任何問題，我把他放進反面案例的原因是，我剛下載完這個App，評價彈窗就跳了出來。我知道現(xiàn)在有很多App這樣做，對此我真的覺得很糟糕，用戶甚至沒有足夠的時間使用你的產(chǎn)品，如何給出評價呢？建議給新用戶一段使用時間，再進行彈窗評價。

小程序開發(fā)
標簽： 彈窗設(shè)計 用戶體驗 經(jīng)驗分享
*版權(quán)申明:本站部分文章由藝源科技收集整理，不代表我們的觀點。如果這篇轉(zhuǎn)載侵犯您的版權(quán)，請及時聯(lián)系我們刪除！
為您推薦
最新文章
掃碼加他，免費獲取方案