伊人直播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) "定制開(kāi)發(fā)-APP定制開(kāi)發(fā),微信定制開(kāi)發(fā),小程序定制開(kāi)發(fā),網(wǎng)站定制開(kāi)發(fā)"
    ["meta_keywords"] => string(75) "APP定制開(kāi)發(fā),微信定制開(kāi)發(fā),小程序定制開(kāi)發(fā),網(wǎng)站定制開(kāi)發(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) "小程序開(kāi)發(fā)"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(112) "專(zhuān)業(yè)微信小程序解決方案|各種場(chǎng)景核心功能,提前布局微信新生態(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) "小程序_商城小程序_門(mén)店小程序_微圈小程序_餐飲小程序開(kāi)發(fā)-藝源科技小程序開(kāi)發(fā)"
        ["meta_keywords"] => string(103) "小程序開(kāi)發(fā),商城小程序開(kāi)發(fā),門(mén)店小程序開(kāi)發(fā),微圈小程序開(kāi)發(fā),餐飲小程序開(kāi)發(fā)"
        ["meta_description"] => string(269) "專(zhuān)注提供專(zhuān)注提供小程序、商城小程序、門(mén)店小程序、微圈小程序、餐飲小程序開(kāi)發(fā),專(zhuān)業(yè)團(tuán)隊(duì),一對(duì)一服務(wù),助企業(yè)快速生成自己的移動(dòng)端微商城平臺(tái). 藝源科技小程序采用高性能數(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開(kāi)發(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開(kāi)發(fā)_app定制開(kāi)發(fā)_app制作開(kāi)發(fā)公司【藝源科技】"
        ["meta_keywords"] => string(53) "app開(kāi)發(fā),app定制開(kāi)發(fā)公司,app制作開(kāi)發(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) "快抖霸屏_抖音快手霸屏_短視頻營(yíng)銷(xiāo)獲客技術(shù)提供商!"
        ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短視頻搜索,同城爆店碼"
        ["meta_description"] => string(161) "藝源智能云推廣系統(tǒng)13325455411專(zhuān)注快抖霸屏,抖音快手霸屏,同城爆店碼,一款線(xiàn)下與線(xiàn)上流量緊密結(jié)合的營(yíng)銷(xiāo)爆客解決方案。"
        ["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智能名片_名片小程序_智能名片_讓銷(xiāo)售更簡(jiǎn)單"
        ["meta_keywords"] => string(97) "藝源AI智能名片,名片小程序,智能名片_讓銷(xiāo)售更簡(jiǎn)單,電子名片,二維碼名片"
        ["meta_description"] => string(184) "藝源AI智能名片-讓銷(xiāo)售更簡(jiǎn)單。藝源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) "商標(biāo)注冊(cè)"
      ["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) "商標(biāo)注冊(cè)_商標(biāo)注冊(cè)流程_商標(biāo)注冊(cè)流程及費(fèi)用_西安商標(biāo)注冊(cè)_西安商標(biāo)注冊(cè)代理-「源知果」藝源科技"
        ["meta_keywords"] => string(103) "商標(biāo)注冊(cè),商標(biāo)注冊(cè)流程,商標(biāo)注冊(cè)流程及費(fèi)用,西安商標(biāo)注冊(cè),西安商標(biāo)注冊(cè)代理"
        ["meta_description"] => string(182) "「源知果」西安提供代理版權(quán)登記,代理商標(biāo)注冊(cè),代理專(zhuān)利申請(qǐng),代理企業(yè)貫標(biāo),代理高新技術(shù)企業(yè)認(rèn)定的服務(wù);咨詢(xún)電話(huà):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成本/降低運(yùn)維成本/網(wǎng)站安全穩(wěn)定/不滿(mǎn)意全額退款|節(jié)約IT成本/降低運(yùn)維成本/網(wǎng)站安全穩(wěn)定/不滿(mǎ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è)_學(xué)校網(wǎng)站建設(shè)就選藝源科技"
        ["meta_keywords"] => string(113) "西安網(wǎng)站建設(shè),西安網(wǎng)絡(luò)公司,西安網(wǎng)頁(yè)設(shè)計(jì),商城網(wǎng)站建設(shè),政府網(wǎng)站建設(shè),學(xué)校網(wǎng)站建設(shè)"
        ["meta_description"] => string(248) "「藝源科技」是西安一家專(zhuān)業(yè)的西安商城網(wǎng)站建設(shè),政府網(wǎng)站建設(shè),學(xué)校網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,咨詢(xún)電話(huà):029-88810146/150 9401 9029。公司擁有10年實(shí)踐經(jīng)驗(yàn),為您提供一條龍的互聯(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ù)平臺(tái)"
      ["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),專(zhuān)注為企業(yè)提供百度等搜索引擎整站SEO優(yōu)化服務(wù),針對(duì)不同行業(yè)、網(wǎng)站情況給出不同策略、報(bào)價(jià)和SEO建議;是您值得信賴(lài)的seo診斷、顧問(wèn)咨詢(xún)等云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
    }
  }
}
				
當(dāng)前位置: 首頁(yè) > 售后 > 藝源智庫(kù)
超全面!這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析
時(shí)間:2019-08-20 10:04:20
文章發(fā)布:李陽(yáng)
原創(chuàng)作者:未知
來(lái)源:互聯(lián)網(wǎng)

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


看完本文你會(huì)學(xué)到:

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


一. 什么是彈窗

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

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

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


二. 彈窗的分類(lèi)

模態(tài):對(duì)話(huà)框

對(duì)話(huà)框類(lèi)型的彈窗有很多,我把他們劃分為:信息下發(fā)類(lèi)、信息提交類(lèi)。

信息下發(fā)類(lèi)型的對(duì)話(huà)框通常指代程序運(yùn)行的過(guò)程出現(xiàn)需要用戶(hù)決策的「即時(shí)任務(wù)」。

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

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

超全面!這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析-藝源科技

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

超全面!這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析-藝源科技

△ 系統(tǒng)電量提示 / 活動(dòng)運(yùn)營(yíng)提示 / 廣告彈窗

信息提交類(lèi)則是需要用戶(hù)在彈窗內(nèi)進(jìn)行操作,二次提交信息。使用場(chǎng)景有,登錄注冊(cè),改名分組等等,如下圖。

超全面!這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析-藝源科技

△ 登錄對(duì)話(huà)框 / 改備注名 / 新建分組名

模態(tài):浮層

超全面!這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析-藝源科技

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

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

模態(tài):操作欄

超全面!這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析-藝源科技

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

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

Hud是iOS的控件,Toast則是android的,業(yè)內(nèi)大部分 App 在 iOS 提示體系內(nèi)采用了Toast來(lái)設(shè)計(jì)。所以?xún)蓚€(gè)端不管從功能還是形式上來(lái)看都有異曲同工之處。

超全面!這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析-藝源科技

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

超全面!這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析-藝源科技

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

超全面!這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析-藝源科技

△ 按鍵引導(dǎo) / 按鍵引導(dǎo) / 按鍵引導(dǎo)

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

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

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

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


非模態(tài):Snackbar

超全面!這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析-藝源科技

△ 售罄提示/ 簽到提示 / 登錄活動(dòng)提示

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


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

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

超全面!這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析-藝源科技

△ 登錄提示 / 登錄提示 / 離線(xiàn)提示


總結(jié)

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

不管是模態(tài)彈窗還是非模態(tài)彈窗,它的出現(xiàn)多多少少會(huì)影響到用戶(hù)當(dāng)前的體驗(yàn),所以我們使用彈窗要克制,不能高頻率的使用。同時(shí),我們選擇彈窗時(shí)也要謹(jǐn)慎,合理。

當(dāng)出現(xiàn)犯錯(cuò)成本很高的操作前,及時(shí)使用對(duì)話(huà)框提醒用戶(hù)規(guī)避風(fēng)險(xiǎn),用戶(hù)才會(huì)覺(jué)得安心,可靠。如果在電量還剩10%時(shí),蘋(píng)果只是淡淡的浮出1s的氣泡來(lái)提醒,而你恰好沒(méi)有看見(jiàn)導(dǎo)致關(guān)機(jī),你是不是感到十分崩潰?所以,選擇彈窗也需要根據(jù)場(chǎng)景。

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

超全面!這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析-藝源科技

△ 版本更新提示 / 廣告彈窗 / 評(píng)價(jià)提示

反面1的問(wèn)題:文案不友好

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

反面2的問(wèn)題:錯(cuò)誤的交互

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

反面3的問(wèn)題:糟糕的時(shí)機(jī)

這個(gè)彈窗的文案也很好,選項(xiàng)也很合理,看起來(lái)沒(méi)有任何問(wèn)題,我把他放進(jìn)反面案例的原因是,我剛下載完這個(gè)App,評(píng)價(jià)彈窗就跳了出來(lái)。我知道現(xiàn)在有很多App這樣做,對(duì)此我真的覺(jué)得很糟糕,用戶(hù)甚至沒(méi)有足夠的時(shí)間使用你的產(chǎn)品,如何給出評(píng)價(jià)呢?建議給新用戶(hù)一段使用時(shí)間,再進(jìn)行彈窗評(píng)價(jià)。

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