文作者对弹窗4大控件进行了对比分析，非常好地阐释了不同控件的应用场景，并通过案例进一步加深了对控件应用的理解。

大家平时做完一个项目有没有总结的习惯呢？最近我一直在分析弹窗相关的知识点，原本觉得弹窗很简单没啥可分析的，大家基本也清楚什么情况下该用什么弹窗，但是发现一些同学在设计时仍然会出现滥用的情况，主要原因还是知识没有内化。

如何才能把看过的文章内化成自己的知识呢，那就是多发现问题，比如之前我在写弹窗的总结文章时就发现了3个问题：

问题一：警示类弹窗用 Alert 好还是 Action Sheets 好？

问题二：Toast的位置在界面顶部、居中、底部都有，三者哪个好？

问题三：Snackbar和Toast有啥区别？

当然发现问题并不能达到知识的内化，重要的是去分析并解决这些问题，这样以后在设计时就能做到有理有据，不会滥用了。

一、了解四大控件

谈问题之前我们先了解写这些英文控件分别代表什么：Alert（对话框）、Action Sheets（控制面板）、Toast（小提示）、Snackbar（快捷提示）。

1. Alert：对话框是一种模态弹窗，当用户将进行一些危险或者不可逆操作时，系统将会以Alert对话框的形式提醒用户是否还继续操作，起到警示的作用，其阻断感强，操作不可忽略。
2. Action Sheets：控制面板是Alert的一种延伸，也是模态弹窗，用户必须进行操作，弹窗才会消失，和Alert的区别是Action Sheets拥有更多的功能按钮，其重点在操作。
3. Toast：是一种非模态弹窗，他一般出现在页面的任何位置，显示几秒然后自动消失，其阻断感弱，一般用来显示操作结果，或者表单未填写提示。
4. Snackbar：是 Google Material Design 中提供的一种兼容提示与操作的消息控件。其和Toast类似，在不操作的情况下几秒后自动消失，同时向下滑动也可忽略消息。

二、界面位置的强弱

通过分析上面提出的三个问题，不难看出其实就是位置强弱的选择，因此在解决问题之前，我们先来了解下APP界面中位置的强弱对比。

一个界面我们可以将其分为上中下三个部分，如下图：

其中中间部分为用户的视觉焦点，最吸引用户的注意，当然对用户的干扰也比较大，因此在使用时往往将重要的弹窗信息放在此处，比如对话框、二次确认等。

上下两个部分的权重相当（上部略大于下部），对用户的吸引和干扰都小于中间，因此我们可以把通知、不太重要的操作放在这两个位置。

三、解决问题

了解了界面中位置的强弱，我们在回到最初的问题，就能更好的判断了。

1. 警示类弹窗用 Alert 好还是 Action Sheets 好？

在一般的Alert和Action Sheets的对比文章中，大多区别是Action Sheets可以包含更多的按钮，同时暂用空间小，而Alert一般只支持2个按钮。

但是当都是警示类弹窗、都只有2个按钮又该如何判断呢？这时候就可以通过弹窗的强弱来判断。

• 微信提倡用完即走，因此当用户退出时并没有做过多的挽留，这时候我们可以使用Action Sheets控件，其阻断感小，用户能很快的完成退出操作。
• QQ从弹窗的文案上我们就能看出，当用户退出时连续登陆的记录将被清零，QQ达人图标变灰，通过这样的方式尽力挽回用户。因此采用Alert对话框阻断感更强，更合适。

2. Toast的位置在界面顶部、居中、底部都有，三者哪个好？

Toast的位置从常规来看，安卓端一般在界面底部；iOS端在界面的中部，但并不是所有产品都遵循这一原则。

有的产品也将Toast放在顶部，同时iOS中也有部分APP放在底部。那么具体什么位置好一点呢？同样我们可以根据位置的强弱进行分析。

• 淘票票选择电影最佳观影区提示，这些提示信息对用户操作并没有影响，因此放到中部可以减少对用户的阻断感，同时相对底部来说又更容易被注意到。
• 菜鸟裹裹当为选择收件人地址时，点击立即下单系统会采用Toast提示你，这时候放到界面中间能够很好的引起用户注意。
• 猫眼的选座提示，其实和淘票票一样的功能，但是其放在界面底部，对用户的干扰最小。

3. Snackbar和Toast有什么区别？

在应用时Snackbar和Toast有点类似，现在也可以看到一些APP已经将Toast换成了Snackbar，那他们有什么区别呢？

Snackbar和Toast的一样有时间限制，若用户不回应，他将在几秒后自动消失，其区别是Snackbar提供一个或者2个功能按钮。

AudioClip当我选择标记音乐时，他直接用Snackbar提示需要登录，这样并不会打扰用户当然的操作，如果用户不想登录，直接忽略即可。

划重点

1. 当你不知道用Alert还是Action Sheets时可根据弹窗的强度来选择，如果强度大就选择Alert，强度小九选择Action Sheets；
2. Toast在使用时首先可根据平台规范来选择，其次在部分位置可根据具体场景来放置；
3. 当反馈信息不需要太强的阻断感时，采用Snackbar代替Toast也是一个不错的选择。从用户体验上来说，用户操作起来会更顺畅。

作者：风筝KK，公众号：海盐社

本文由 @风筝KK 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

建图片样式到样式库，快速实现图片排版格式化。

大家好，今天这一讲我们来讲创建图片样式到样式库，快速实现图片排版格式化。当我们把图片插入到一篇文档中以后，可能也会遇到这样的问题，图片的并没有像我们预想的那样居中显示，而是偏左或者偏右，这样我们就需要将图片的位置进行调整。

如果我们单纯的来设置这个图片，让它居中对齐，经常是没有效果的，这种情况可能是我们的段落设置所造成的。我们可以看一下这个图片的段落设置，它的首行缩进是2.02个字符，所以才造成了它无法居中对齐这种情况。把它调整为没有缩进，然后确定，然后居中对齐或者是ctrl+e，这个图片就居中对齐的。

还有一种方式，通过选择这个图片，然后拖动标尺上的游标，然后拖到左边，接下来再选择居中对齐，这样这个图片也变成了居中对齐。这是两种居中对齐的方式。

但是不管是第一种方法还是第二种方法，我们都需要对一个图片进行两步操作。第一步把它的缩进取消掉，第二步居中对齐这两个步骤。如果图片比较多的话，那么我们每个图片都需要进行两步的操作，可能就会花费我们较多的时间。

今天介绍一种方法，能够把两步操作步骤减少为一步，怎么实现呢？

·首先选择一个已经调整好格式的图片，然后在开始菜单的样式选项卡里面，选择这个向下的小箭头点击一下。

·然后在最下方有一个创建样式，点一下，再根据格式化创建样式，对话框里面为这个样式起个名字，比如叫插图样式，然后确定。

·这时候再点向下的小箭头就可以看到刚刚建好的这个样式，这时候要确保刚才调整好的图片是选中状态，这时候对应的样式库里面的插图样式也是选择状态。

·然后把鼠标放在插图样式这里，右击鼠标，点击第一个更新插图样式已匹配，所选内容就是把当前选中的图片的格式更新到插图样式里面来，这时候插图样式就可以作为样式模板来使用。

·继续在下面一个图片，这个也是由左缩镜的选中图片，在样式库里面找到插图样式，点一下就变成居中对齐了，第二个点一下，后面继续点一下完成。

通过这样创建一个插图样式就把两步操作合并为一步操作，节省了一半的时间。另外这种方式还会对以后选择图片有非常大的用处。

辑导语：关于启动页和引导页，我们在每个APP都可以看到。做好这两个页面，是用户了解产品的基础一步，也是用户最先了解产品的第一个窗口。因此，该如何设计启动页与引导页，才能够吸引他人？作者总结了一些自己的经验，与你分享。

启动页与引导页设计几乎是每个APP必备的。

在产品上架前期，设计师们通常会集中设计产品启动页与引导页。启动页与引导页是用户了解产品的第一个窗口，能给用户留下初印象~最近刚做完新产品的启动图与引导页设计，分享自己关于做启动图、引导页学到的相关知识与经验总结，希望对大家有所帮助，欢迎一起交流学习呀~

一、启动页、引导页是什么？

启动页：当用户打开APP时，在启动APP的过程中被用户所看到的过渡页面或动画都被称为启动页。

作用：

• 缓解用户启动APP时等待的焦虑情绪。
• 传递品牌或介绍产品服务理念，加强用户对产品的印象。

特点：

• 展示时间短，一般3s内，不可交互。
• 启动图设计的更新速率可以保持1~3年更换一次，不建议频繁更换，启动图设计更新应该是跟随产品整个战略进行更换的。

启动页的形式比较多样化，但UI设计师在产品上架前期主要还是设计以产品内容或品牌为主的品牌启动图，介绍产品核心服务与传递品牌，本文主要介绍的是APP品牌启动图这种形式。

其他的，比如广告页、节日闪屏等运营类的启动页形式，我们知道有这种过渡页面存在就行了，这里就不做过多介绍了。

引导页：当用户安装或更新APP后首次启动APP时展示的3-5个滑动页面就是引导页，帮助用户更加清晰的了解产品定位与功能服务。

作用：

• 呈现APP核心功能服务与产品特色或对迭代优化的地方做功能说明，让用户快速了解产品。
• 引导页的设计调性能让用户对产品设计留下初印象。引导页已成为每个APP的仪式感设计，每次产品迭代更新，通过引导页形式，让用户感知到产品的迭代更新。

特点：

• 可左右滑动切换页面，最后一页有进入按钮
• 引导页个数一般为3-5个，个数不要超过5个，且尽量提供直接进入或跳过的按钮
• 引导页的设计更新频率可以跟随每次产品升级、新功能特色进行更新，更新频率相对较频繁一些

二、启动页、引导页怎么做？

启动图设计形式启动图常见的设计形式有纯背景+图标/slogan、背景图片、漂浮图标、品牌渗透这4种形式。

纯背景+图标/slogan在纯色背景上，融入产品启动图标或产品slogan。这一种是最简洁也是最经典的启动图设计形式。简单有力的宣传产品品牌、传递产品服务理念、加深用户对产品印象。

设计小tip：设计这种形式的启动图，我们需要注意页面的视觉平衡。上下比例建议采用0.86:1很多设计师在对齐的时候会直接采用工具的垂直居中，我们可以来对比看一下直接垂直居中与微调后的视觉感受~

很明显，直接采用垂直居中，上下比例为1:1的话，视觉中心是有些往下掉的；我们需要往上进行调整，达到视觉平衡。NAVER的改版设计中，专门将启动页的比例由1:1调整为了0.86:1，让视觉达到舒适。

背景图片采用图片或短视频作为背景图。图片或视频的选取需要符合产品调性。这种设计形式更加直观，具有场景感，能带来更大的共鸣，具有沉浸式体验。最具代表的就是微信的启动图了，仅靠一张图片就形成了产品的记忆点。

政务类产品启动图常选用当地的地标建筑或区域特色作为启动背景图。

漂浮图标将与产品相关的功能服务图标飘散浮动在整个页面中。最具代表的就是淘宝的启动图。

品牌渗透品牌渗透设计形式是目前市场上应用得最多的。采用插画、3D等设计手法，结合产品IP形象、品牌符号等与品牌相关的元素进行融合设计，加强品牌推广，形成品牌记忆。

品牌渗透的设计形式有：a.将品牌图形与服务场景进行融合设计利用插图或3d的形式将品牌图形与功能服务场景相结合，这类设计形式也是比较流行的，既能直观的展示服务场景又能很好的宣传品牌。

b.品牌符号因为启动图时间特别短，将产品的品牌符号放大或者重复排版，从而加深用户对产品、品牌的记忆，这也是一个比较讨巧的方法。

c.IP形象启动图展示产品的IP形象，加强用于与产品IP的链接。最经典的就是QQ的企鹅开屏，这么多年都是一直保持这种设计形式。

引导页动图设计形式引导页设计除了帮助用户更加清晰的了解产品定位与功能服务外，现已成为每个app的仪式感设计。

每次下载新的app后，自己也很期待看到产品的引导页，通过引导页来推测整个app的设计调性~引导页设计内容相对来说比较固定，一般为文案（主副标题）、图形部分、轮播器、按钮这四部分。

设计形式也主要为插画、3D、实景图片这3种设计形式。

插画设计形式这是市场上应用得最多的设计形式，分为扁平化插图与2.5D插图形式。

3D元素随着3D设计形式的流行，3D元素在UI设计中越来越常见。3D图形比扁平化的图形更加直观立体、具有场景感，在引导页中的应用也越来越多。

实景图片采用实景图片或视频形式，让画面更具场景感，具有沉浸式体验。这类设计形式更适合旅游类或短视频类产品。

一个产品的启动图与引导页设计（特别是启动图设计）是很具有代表性的。我们可以从启动图与引导页看出产品的设计调性与服务理念，个人觉得这两个模块也是值得设计师花心思做的~

结合产品服务与品牌进行设计方案探索，也是很有趣的。以上就是自己关于启动图与引导页的部分设计见解与解析，欢迎大家多多指教呀~

本文由 @小鱼晴子 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议