100个弹框设计小结-UI设计网uish...
采集 评论
查看来源 u.uisheji.com
时针都停摆从一兜梦
转采于2017-03-22 10:29:37
100个弹框设计小结-UI设计网uisheji.com -得知市面上最小的屏幕是1024×768,因此只要保证在这个尺寸放得下, 其他尺寸也肯定没有问题。弹框的宽度一般不会太宽，1000px通常是足够有余的。高度的话，以Windows为例，去掉系统底部功能条的高度及浏览器的高度后，可以得出:
768px – 约60~100px(浏览器高度) – 40px(系统底部工具栏高度) = 约620px
web－弹窗
时针都停摆
100个弹框设计小结-UI设计网uisheji.com -
100个弹框设计小结-UI设计网uisheji.com -得知市面上最小的屏幕是1024×768,因此只要保证在这个尺寸放得下, 其他尺寸也肯定没有问题。弹框的宽度一般不会太宽，1000px通常是足够有余的。高度的话，以Windows为例，去掉系统底部功能条的高度及浏览器的高度后，可以得出: 768px – 约60~100px(浏览器高度) – 40px(系统底部工具栏高度) = 约620px
Marvel的新建项目弹框中，在大屏幕下，弹框尺寸为640px(宽)x760px(高); 在小屏幕下，选项及Icon则会缩小，弹框尺寸变成了640px(宽)x620px(高)
nVision的升级弹框中，在大屏幕下，列表的行距比较宽松，弹框尺寸为1100px(宽)x800px(高); 在小屏幕下，列表的高度则减小，弹框尺寸为1100px(宽)x630px(高)。
3.任务 有时候某些任务只是一些简单的操作，并不特地需要一个页面来表现，弹框是一个很好的方法。 Duolingo用插图和icon等视觉元素来丰富任务弹框的表现形式，减轻枯燥感。
100个弹框设计小结-UI设计网uisheji.com -2.选择器 选择器的特点是用一个内滚区域来承载一个很长的页面，而该内滚区域的高度是可以根据浏览器的高度拉伸的。其好处是除了能放下很长的页面，同时能保留一些操作一直停留在屏幕上。这裡可以选择性的为弹框设置一个最大及最小高度，但要注意的是必须把背景锁定，否则出现2条滚动条的体验是很糟糕的。以QQ公众平台的图文选择器为例:
Google Photos的新手引导更结合了微动画，效果非常惊艳，让人过目不忘。
1.新手引导 第一感觉是非常重要的。Google+及Carbonmade的新手引导采用了弹框，配上漂亮的插图。这种处理手法美观，不影响页面布局，卡片式的表现手法还能贯穿网页及移动的一致体验。
4.提示 提示是最基础的弹框应用，设计时需记往保持统一性。视觉上的统一性: 颜色，间距，文案风格等。交互的统一性: 主要操作是左边还是右边按钮，关闭是点击蒙版还是点击叉叉。 腾讯企点的提示弹框整理
Trello的任务弹框虽然信息较多，但好处是能快速切换到不同的任务，增加效率。
Flickr的图片选择器。-Flickr的图片选择器。
100个弹框设计小结-UI设计网uisheji.com -几个容易被忽视的弹框细节1.背景锁定与滚动条引起的抖动问题 浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力。 因此我们要做的是 – 背景锁定(从技术角度其实是暂时性干掉滚动条)。
同采自
u.uisheji.com
该采集也在以下画板
加载更多
推荐给你的采集
采集
alpha.wallhaven.cc
菇凉&采集到地产配图

General 1920x1080 Greece hotels mountain swim...

90

菇凉& 采集到
地产配图
采集
weibo.com
Lily名字十七画采集到场景素材

摄影 · 极简主义

445

Lily名字十七画 采集到
场景素材
采集
静候好戏采集到人像

泽捻知

612

静候好戏 采集到
人像
采集
weibo.com
Lily名字十七画采集到场景素材

极简主义摄影。

362

Lily名字十七画 采集到
场景素材
该采集待公开
采集
hidepink采集到素材–街景小场景

33

hidepink 采集到
素材–街景小场景
采集
meigongyun.com
伊岚分享采集到png素材

冬日冷色调圣诞手绘花卉系列元素 Scandi Fest collection

335

伊岚分享 采集到
png素材
采集
melodySixi采集到祛湿

湿气-微营销海报

22

melodySixi 采集到
祛湿
采集
雨ˋ滴滴答答采集到二次元

420

雨ˋ滴滴答答 采集到
二次元
采集
海盐荔枝的夏日采集到动漫

动漫

62

海盐荔枝的夏日 采集到
动漫
采集
mp.weixin.qq.com
菓仔fish采集到练习

【绘画参考】Hong SoonSang 的角色设定图（人物设计必学）

389

菓仔fish 采集到
练习
该采集待公开
采集
l0XI4gBo晓风残月采集到皇室

7

l0XI4gBo晓风残月 采集到
皇室
采集
xiachufang.com
Dora爱幻想采集到面包片

如何做超厚的沼三明治~详细tip！牛油果鸡蛋午餐肉三明治~

1151

Dora爱幻想 采集到
面包片
采集
pixiv.net
〃梦落雨`笑╰︶采集到二次元美图

しぶりん

215

〃梦落雨`笑╰︶ 采集到
二次元美图
采集
惜朝采集到绘画

206

惜朝 采集到
绘画
采集
峰言风语采集到醉美身材

95

峰言风语 采集到
醉美身材
采集
behance.net
顺物荣枯采集到主题活动

夏日逃离/SUMMER MUSIC FESTIVAL : 夏日逃离音乐会 | Summer...

69

顺物荣枯 采集到
主题活动
采集
pinterest.com
罗菩堤rowe采集到【色谱】装修配色

#Coastal #Colors Fashionable Coastal Living R...

27

罗菩堤rowe 采集到
【色谱】装修配色