追求卓越一諾千金

藍藍設計_|商南眼,2011年成立--|锥子脸蒂娜,主創清華團隊|--李俊案,專注軟件和互聯網ui設計開發|-|京津高铁二线。擅長企業信息化管理||-360双色球走势图、監控_-晨光bt、大數據軟件UIUE谘詢和設計開發服務-|丁丁和杨坤后场接吻。立足UI|-代练宝,好好學習|-_金心银灵,天天進步-__泰国斗鱼繁殖!


如何更好的使用彈窗|_-永宁县政府公众网?

2019-8-20 分享達人 設計資源


彈窗在設計中運用的非常廣泛||-描写大自然的诗歌,基本上每個應用都會涉及到_-新观兰。恰好這段時間我也在整理公司設計組件這一塊_菊丸英二bg,所以就想總結分享一下


設計師都會使用彈窗|-众益彩苹果版如何下载,但對於彈窗背後的分類及運用可能還不是特別了解_|_火瀑吧,在寫這篇文章之前__|林柏欣,我查看了很多應用及資料-|长武网,所以下麵會有大量的案例_--陶江湖,相信大家看完可以對彈窗的認識更明確_天天向上20100205,做設計規範的時候也能有自己的想法---林娜冰21。


現在的彈窗分為兩種||369彩票注册,一種是模態彈窗(重提示)|_男街霸投掷精通,一種是非模態彈窗(輕提示)-|_兰州摸吧。

常見的模態彈窗|_掌上彩票打:Dialog/Alert__-魔泥美白、Actionbar-殷世航一个月赚多少钱、Popover/Popup

常見的非模態彈窗-|赢彩网下载app:Toast/Hud--索纳塔i40、Tips_--河北中基吧、Snackbar--亿彩彩票有猫腻吗、



Dialog/Alert  對話框

對話框是我們常用的彈窗__-217彩票平台注册就送,安卓開發語言是Dialog--掌上彩票怎么打不开了,iOS開發語言Alert-|_铁路调度系统,它通常出現在頁麵的中間_|鱼翅价格,對話框/警示框的類別非常多-|-哈雷摩托车官网,對用戶的幹擾比較大|-|逍遥花丛录。前麵之所以說模態彈窗是一種重提示_|_ovleng,是因為它需要用戶主動觸發選擇才可以繼續當前的操作|掌上足球专业版下载。


① 信息-選擇確定

特點__361dy:這類彈窗通常是一些係統功能的授權||黄山天狗望月图片、版本更新-_金庸2加强版、消息通知|_众彩app怎么下载、重要提示等|-360彩票安全购首页,通常隻有1~3個主按鈕_诺森德草药有哪些,隻需要用戶進行簡單的選擇||-15选5开奖结果。


下圖舉例分析__上海sony笔记本维修:

iOS詢問是否刪除APP_|_宜兴土特产,就屬於重要提示彈窗|-_皮肤病图片,它一般會用在像刪除|-淘宝网沙发巾、確認提交...一些比較重要的功能操作中||舞hime系列。

小紅書的這個是否允許使用網絡彈窗|-|云购彩票是骗局吗,大家一定在許多APP中都見過_-_雍正皇后种田记,這屬於一個係統自帶的授權彈窗_-锦州人流。

馬蜂窩與天貓的消息提醒彈窗|-深圳第一现场重播,一個屬於初次使用APP時_诺基亚6120软件下载,係統自帶的彈窗-北交大晨光bt,一個屬於使用後期APP為了推送消息|-_邵长老,主動提示你開啟消息通知|_坊组词。

有錢花和愛奇藝的版本升級彈窗-||盈利娱乐,都屬於偏運營類的彈窗__规模报酬,這一類的彈窗通常會弱化暫不升級的按鈕_雪佛兰科鲁兹旅行版,突出升級主按鈕|-歌厅演艺。




② 信息-輸入勾選

特點-|168彩票正规吗:這類彈窗通常是輸入一些比較少的信息或者勾選信息|__苏州红星美凯龙招聘,常用於備注輸入_|-唐易康官网、規格選擇_-31选7走势图、分組選擇等_-注册彩乐园邀请码,通常隻有確定和取消兩個按鈕-__118彩票会员账号。


下圖舉例分析_|赢彩专家计划:

微博對於已關注人的分組及備注|-苏州园区湖东地图,都屬於信息輸入及勾選類彈窗_-阳光炫舞,操作通常都比較簡單-_-娱乐天地客服联系。




③ 信息-傳達展示

特點||3g加油站:這類彈窗通常是一些廣告|-_后来歌词、紅包優惠|--固话资费、節日活動等一些運營類彈窗-|33彩票官方网站,主要是吸引用戶點擊及參加活動_||梧州网通露天影院,這類運營彈窗通常會設計的比較吸引人_-陈大伟博客,造型各異|_|洛阳信息港绿色营地,會突出領取||_铜钱占卜、查看等大按鈕-月城ひとみ,弱化關閉按鈕||爱婚婚。


下圖舉例分析|-|仙剑5下载:

拚多多和餓了麼這類的紅包優惠彈窗_|-亿彩票安全吗,就不多說了||湖南基础教育网,大家都懂-|-拍拍网充话费,它們最主要的目的就是吸引用戶點擊_1q币购物券怎么用,提升購買率_大老虎周永慷。

美團的變黃送好禮彈窗_雷柏1810,屬於一次比較大的品牌升級_|_铀钚,它主要目的是讓用戶更好的了解並接受品牌色升級-|-富士施乐3117加粉。整體的元素及動效設計都非常清晰_|塔河吧,視覺感很強_优秀班主任主要事迹。

支付寶的這個猜世界杯贏螞蟻積分的彈窗|_12彩票IOS版,屬於活動彈窗|__魔法龙虾盒,它的整體設計非常貼合主題_-_106福利安卓版。




Actionbar操作欄

Actionbar主要分為Action Views和Action Sheets--_分宜租房网。它們通常是由底部彈出||-我要一个身份证号码,它的操作及信息會比對話框類型的彈窗更多更複雜_|陈德铭去向。這種當前頁麵的下拉彈窗好處就是_|-中国卫生人才网成绩查询2015,可以讓用戶清楚的感知當前的操作|-苯胺基丙酸,比跳轉到新頁麵更加有安全感-|amway易联网。還有一個特殊的抽屜式彈窗也順便說一下--斗战神入定修炼怎么弄。


① Action Views操作視圖

特點__淄博豪哥健身俱乐部:這類視圖彈窗通常占屏比較多__123手机开奖软件,以文字|-365彩票能提现吗、圖標等形式展示各種功能-_-花雨伞包包,也可以說這類的彈窗是一個小型的頁麵|_|钱多多的手机铃声。它一般從底部彈出__2018版本彩票256,不太強調歸屬|_|常熟新闻,大多出現在購買_|样本量计算公式、支付|_-拳皇麻宫雅典娜h、分享等場景|_榆树徐大伟。


下圖舉例分析-绅士的恶魔剧情介绍:

百度網盤的這個+號擴展彈窗比較特殊|_-093彩票是真的?,它也可以說是浮層|-_诺基亚电子书,占滿整個屏幕-年利率是什么意思,它最吸引人的還是它的小動效--0368彩票。

京東購買時的彈窗和支付寶付款時的彈窗|_345彩票安全吗?,都是比較典型的|-东方热线网络测速,在各種電商產品及付款頁麵用的非常多|众赢彩票主页。

轉轉這個的鍵盤與輸入為一體的彈窗-09被骗20w,設計的非常人性化|_360彩票网导航走势官网,讓用戶一次就可以輸入多個價格--106官方彩票注册。大大提高了用戶的操作效率__|22彩票打不开。

網易雲音樂的分享彈窗就是典型的以文字與圖標來展示功能的-_亿彩彩票代理赚钱吗。

微信讀書的底部閱讀設置彈窗__-掌上农行手机银行,比較特殊-|105彩票真的能获利,為了使用戶沉浸閱讀|__bmw尊选二手车,它是比較隱藏的|-云顶至尊app安全吗,而且非常輕量化|-战地3沙漠巡逻车。


undefined



② Action Sheets 操作列表

特點--叶扬眉:操作列表相對於操作視圖_|-朱晓东我型我秀,它更單一-|亿彩彩票官网苹果。主要是以文字展示功能按鈕|__译乐通,重要敏感的功能操作一般會用主題顏色或紅色顯示|_-斗战神入定修炼怎么弄,主要運用在一些日常控件-_-银尖宝戟、功能選擇-瑞丽裳电子杂志、刪除||_江苏高考数学试卷2013、保存等場景_-手机四核处理器。


下圖舉例分析_|苏西 埃米斯:

Keep的選擇日期--_卤中仙官网,屬於iOS原生控件-_|2m彩票最新资料,非常常見|-|淘宝 开店。

淘寶的選擇地址彈窗-_-139乐享平台合法吗,整個展示的非常清晰全麵|168彩票App,而且用戶每選擇一項|--郎酒股票代码,就會有相應的顯示|_金乐活纳豆激酶。

支付寶和天貓超市的兩種列表彈窗-亿彩彩票首页,就不多說了|-_优选彩票平台好不好,簡單的功能選擇都會采用這種|||励志小说排行榜前十名。




③ 抽屜式彈窗

特點-__易盈彩票靠谱吗?:這種抽屜式彈窗一般從左右兩邊彈出-_-吉林移动话费详单,經常運用在一些導航擴展和目錄展示中|--移动电源加工,它能承載比較多的信息--温网2017男单决赛,基本上都是用來放一些不太常用的功能_-注册众银家会员安全吗。


下圖舉例分析|-金桥一景:

微信讀書及一些其他閱讀類產品|张羽 央视,由於目錄很長|||陕西地震信息网,而且一般是從上到下瀏覽的_36选7好彩3复式5,所以基本都采用了這種抽屜式彈窗_|球衣印号。

小紅書的這個抽屜式彈窗_|_盈彩彩票是骗局么,以圖標和文字的形式展示了一些不是很常用的功能--_苏州寒山寺招聘尼姑,為我的頁麵節約了不少空間-||11选五5开奖结果。




Popover/Popup 浮層

Popover是ios的開發語言-_150号段,popup是安卓的開發語言__亿彩彩票手机版登录,浮層是指__衡水热线欢迎你,用戶點擊某個功能後浮出一個臨時氣泡對其作出補充_-198彩官网下载,它通常會伴隨著半透明的遮罩或者投影襯底__22选大星彩票走势图,用戶需要點擊功能區域操作|_陈大鹏,或者點擊空白處取消-|众发彩票倍投能赚钱吗,才能進入下一步操作_-寇小宇。它與上麵操作欄的最大區別就在於_--国世平本人新浪博客,它更強調歸屬_-_博客大巴,可以出現在頁麵的任何地方--198彩票平台号,而操作欄一般隻出現在底部|_金绒飞,不強調歸屬|-|斗战神入定修炼。


① 指向浮層

特點|--2019最新送300彩金平台:這類的浮層一般伴隨有小三角指向_|盈彩彩票能提现吗,強調歸屬||-掌上工商(APP)(河南版)。氣泡裏麵的功能通常以單一的文字或文字與圖標結合的形式來展示_--1227次列车时刻表,主要運用在頂部加號補充|__银富鳞、複製__|ovi套件下载、分享轉發等場景-||仙剑五破解补丁。


下圖舉例分析|_|请贴的写法:

支付寶和美團的頂部加號補充浮層|脉搏士,展示形式是差不多的___毕业感谢词,隻是UI樣式不一樣--|杨幂遭人非礼,一個是白色氣泡黑色半透明遮罩_|_诛仙国家宝藏拼图,一個是深灰色氣泡__众富彩票富彩彩票怎么样。

微信讀書和微信的選擇文字氣泡-|移动彩票平台怎么样,在文字複製中很常見_-188彩票网官网,通常會與其他轉發收藏小功能一起出現_-上海大专排名。




② 導航篩選浮層

特點|_-自由们7 42下载:所謂導航篩選_-锵锵三人行20140801,自然是與導航分不開的__玫琳凯订单网,再加上浮層是比較強調歸屬的-_17英里ktv团购,所以它通常會與導航連在一起_|-重庆万盛黑山论坛,一般出現在頂部-_隆鼻尖。


下圖舉例分析-_|徐粉林简历:

美團的導航篩選|-|12月新规都是好消息,因為選項及開關很多-_|赢彩邀请码,所以它的底部會有兩個主按鈕|-长沙王府井影城,一個完成-|-沧州蜜宝团,一個重置|_北镇青网。

餓了麼的這個隻有一個功能選項_2019年白姐正版先锋,所以它一般是直接選擇就收起浮層了|||汇家卡盟。




③ 引導浮層

特點---英国女主播直播中脱胸衣露乳出镜:引導浮層的作用就是引導用戶更好的使用產品及交互_|鸣人堂,降低用戶的學習成本_-|金南珠主演的电视剧。它通常會出現在用戶首次進入APP的時候|_陈少游,一般隻會出現一次___众投彩,點擊空白位置或我知道了浮層就會消失--微来购托尼团队。


下圖舉例分析|_|新沂style:

QQ音樂與微醫的引導浮層都是用戶首次進入應用時-日暮苍山兰舟小 李白,給出的功能搬家提醒浮層_||盈彩彩票是正规的吗。





Toast/Hud 提示框

Hud是ios的控件名詞|-_御龙在天野蘑菇在哪,Toast是安卓的控件名詞|_描写大自然的诗歌,它們都屬於一種輕提示-_|娱乐彩票app,給予用戶及時反饋|_-龙之谷单刷,讓用戶知道自己當前所處的狀態_-|瓦楞纸规格。

Hud一般隻出現在屏幕的中央_|shuaitong,以毛玻璃的樣式表現___鲍继荣,內容展示比較富豐富-|_2240期海南头尾规律。

Toast可以出現在屏幕任意位置_给个身份证,通常以黑色半透明的小框來表現_|霞浦一中,內容一般是純文字提示或者文字與圖標結合提示||联众好友在线。


① 狀態提示

特點|-|雷霆扫毒蒙面人是谁:狀態提示的Toast||挟货要5倍运费,它們一般都是反饋用戶當前操作的狀態-_|盈彩彩票可信吗?,隻出現1到2秒就會自動消失|_|01彩票597849com,場景一般是關注成功--_黎巴嫩邮编、密碼錯誤|_|金义大都市、音量提示_-运城特产、靜音_||杀人游戏软件、清除緩存等云顶娱乐平台。


下圖舉例分析_|永盛彩票网手机app:

移動的屬於操作遇阻提示|-|船讯网船位查询。

京東的屬於操作成功反饋_-重庆信鸽信息网。

iOS的音量控製屬於毛玻璃Hud_-038的邀请码。

微信的清除緩存屬於正在操作狀態___新晃红网百姓呼声。




② 按鍵提示

特點|众博国际:按鍵Toast提示與狀態提示不同|-|金华职业技术学院信息工程学院,它們一般自動出現或者點擊觸發才會出現_|-盈彩彩票是不是黑网,用於對功能點的補充說明-|-男扮女装过程,讓用戶對功能有更深的了解-|_春日樱。


下圖舉例分析_||霹雳赛车主题曲:

螞蟻森林裏點擊樹木就會出現相關信息-观赏鱼之家网站zadull,當然它也會自動出現_|100元彩金卡,點擊其他區域也會自動消失_-_109彩票安卓版。 

知乎的消息標簽不僅有小紅點提示__金华诸葛八卦村,還會在上方自動出現數字提示|_谁能百里挑一于淼。




Snackbar

Snackbar是Android中的一個控件--|missripley结局。它一般會在超時自動關閉或者在屏幕上滑動關閉|亿彩投注赚钱是真的吗,它沒有Toast那麼輕量_-中华益智养生功,設置出現的時間會比Toast長-|我爱淘折,而且可以點擊按鈕進行交互-_校服门。


下圖舉例分析||长沙停电信息:

UC瀏覽器的Snackbar--雅虎翻译宝贝鱼,是在提示用戶上滑_|助赢软件官网,來查看更多內容--_云顶至尊为什么便宜,它需要滑動或者超時才能關閉_|北京466耳鼻咽喉医院。

京東的Snackbar__|盈彩彩票可信吗?,是在為用戶推薦商品_-_一动即欢,提示用戶點擊箭頭來查看喜歡的商品__|东国大学庆州校区,它比UC瀏覽器多了一個關閉的按鈕|中博彩票网合法吗。




Tips提示

Tips與Snackbar最主要的區別就是__诺基亚5700主题下载:Tips它是內嵌在頁麵上的--邓有帮,而Snackbar則是浮在頁麵上的-_北京466耳鼻喉科。Tips一般要讓用戶主動觸發關閉按鈕或點擊進入下級頁麵才會消失_-_丧尸类电影,一般用於需要用戶感知到的通知信息__铺底流动资金,或者植入廣告-_-诚实基金。


下圖舉例分析_-门萨俱乐部试题:

百度網盤在下載視頻時||-电视棒密码,就會出現一個Tips的提示-|中诚快递,讓用戶觀看廣告來得到加速下載-钢铁悍将。這種提示雖說是廣告_|隆昌地图,但它抓住了用戶的場景及心理_-365彩票是真的吗,觀看廣告的幾率大大提升-_-云鼎彩票。

愛奇藝的Tips提示就屬於重要通知提示了_-易旺彩票网下载,提示用戶VIP即將到期--038彩票提款被拒绝,續費可優惠-_好看的丧尸片,它們都有一個主按鈕及關閉按鈕|--基督教赞美歌曲大全,需要用戶主動觸發提示才會消失-|_360彩票机选大厅。


undefined



規範總結

目前的彈窗樣式非常多|--行尸走肉第六季,你能想到的-汕尾台风网,你想不到的基本都可以技術實現__10秒猜大小的彩票。但這同時也帶來一個問題---景伯宁,那就是“不規範”_-|云顶至尊怎么样。以上提到的彈窗種類_北京市委书记刘琦,你隻需要選擇符合你產品要求的幾個類型-诺基亚5320xm软件下载,最好不要在一個產品中運用多個同種類型的彈窗|--008com彩票论坛,否則後期會很難規範及組件化||秦国赵弋,當然運營廣告類彈窗可以另當別論-|_陈秋艳。

轉自|--csol防沉迷:站酷

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_|电影节目表,為期望卓越的國內外企業提供卓越的UI界麵設計_kb女烈、BS界麵設計 -_云顶彩票注册送45元、 cs界麵設計 -|-东港宋老六、 ipad界麵設計 -||亿博彩观音图、 包裝設計 |_305彩票软件、 圖標定製 |-|阿杰路、 用戶體驗 _汶川大地震电影、交互設計|_-新疆民歌mp3、 網站建設 --陈明月爱情连连看、平麵設計服務|_金清二中。


標簽: 如何更好的使用彈窗|_ed2k 麻仓优? « 如何通過競品分析來解決問題 | Vue cli之全家桶搭建項目»


訂閱Rss