聊一聊APP弹框使用

Posted 2023-04-13

参考技术A 最近看了很多关于终端弹窗的文章，由于知识点零散，最终决定已文字的方式写出来，算是消化领会，以下是自身对弹框的理解。

目前已知的弹框有：toast、snackbar、dialog、actionbar，分类为模态和非模态弹框，太官方的名字不便于理解，根据我自己的看法，把它发划分为：轻量级和重量级类型。

所谓轻量级是指出现时对用户行为影响小，不影响其操作，在场景上主要是对操作结果反馈、提醒，通常在超时或用户随意进行点击操作之后消失。

toast： 一般以3s提醒时间显示在屏幕中上方或者下方，以文本和透明黑色背景存在，用户不可操作。在安卓系统中弹框控件叫toast，ios并无此说法，ios一种弹框是HUD，与toast差不多性质。

Tips：

出现在状态栏下部，页面内容上部。

snackbar： 反馈轻量级操作反馈，出现在屏幕底部，在屏幕所有层上方，只能以文本的形式存在，可操作，滑动关闭。

使用场景：

1.弹框时间短、体积小，所承载信息量有限，不易设计为过多内容信息，适合于轻度提示，不中断用户当前操作行为的场景。2、语言精练、提取重点文字；3、一瞬间，时间短，不易反反复复提示，不利于用户体验。

也称为模态弹框，是指对话框出现时，遮罩中断父级视图，需要完成当前弹框内容，才能进行下一步操作。有利于用户集中精力完成当前内容。

dialog： 用户必须对弹窗进行回应，否则弹窗不消失。默认有”取消“按钮，点击该按钮关闭弹窗，点击弹窗以外的区域相当于取消弹窗。

版本升级提醒：

目前升级形式弹框是如下两种，取消升级方式不一样。一种是点击“叉”关闭，一种是作为文字按钮关闭。个人倾向于文字按钮关闭，便于单手持设备方便用户操作，把“立即更新”用颜色着重强调，“取消”颜色弱化视觉焦点。

这里特别喜欢携程的设计，在立即升级按钮下边，提醒用户“WiFi环境下更新不到30秒哦”，温馨提示，超出用户预期希望，深得人心的设计。

任务型领取弹框：

图1与图2可选择关闭弹框，不领取奖励，给用户多种选择，不强制要求领取；图3签到功能，无关闭按钮，点击直接签到，点击遮罩层也可取消，弱化关闭功能，目的在于提高用户留存率，增加用户粘性。

获取权限提醒：

应用安装到手机，根据app，需要获取不同的手机权限，才能保证软件正常使用。常见获取权限的有相机、GPS、个人通讯录、短信、推送等。图1和图2是个不错的方法，设计上表现更人性化亲切，一次性告知用户需要获取手机哪些权限，但是有些特别的权限，比如获取短信等安全性的权限，那么就需要在需要时提醒用户是否获取。所以权限获取要根据产品特性和当前使用场景来决定，合理平衡业务和用户体验需要。

用户反馈提醒：

收集用户反馈信息，后期做数据统计，及时跟踪用户需求，对产品进行迭代和优化。所以在产品中需要给用户提供意见反馈功能，让用户实时对产品做出评价和改进意见，可以直接跳转到应用市场，做用户反馈。

个人建议提醒用户评价弹框出现的频率要低，比如每天提醒一次，不需要每次启动应用都在提醒，反而让用户产生厌恶感；其次在文案规划上有创意，利用当前最新网络词汇，拉进和用户的距离；再次在视觉上设计也要有创意和想法，不要墨守成规，一步一步引导用户去评价。

底部弹框： 淘宝、京东、分享、支付等产品，以底部弹框形式出现，中段当前操作。一般ios控件弹窗是以底部形式出现，android对话框控件是以显示在屏幕中间弹框出现。

重量级弹框使用场景：

1、需要用户做出反馈。

2、处于安全考虑，需要用户知晓，当前操作带来的影响。

3、创建类目需要。

使用何种弹框，应该根据当前产品业务性质和业务需求来确定，并不是一成不变的。需要着重提醒用户的可以使用重量级弹框，用户知晓程度低可以使用轻量级弹框。弹框定义只是一种形式，面对产品时，需要正确理解当前产品业务和使用场景，在规范引导下，做出最适合的设计

聊一聊登录页设计那些事儿

现在很多的大型网站把登录和首页放在一起设计，由此可见产品登录页面设计的重要性。一个出彩的登录界面，将提升产品的品质，赋予产品独特的气质。登录界面也是一个发挥情感化设计，提升用户体验，拉近与用户之间距离的兵家必争之地。

 

无论网页或是移动APP的设计，很重要的一点是如何能在小而美和功能复杂性之间找到平衡点。 在执行设计的第一步，便是思考如何利用原型工具诸如Mockplus或Axure在初始阶段把握产品登陆页面设计的技巧。

 

一、 学会做减法

 

跳出登录界面设计中的条条框框，搭配简单的配色，醒目又大方。

 

 

 

二、 结合用户界面设计-页面背景

 

1. 模糊背景

 

模糊背景的运用不仅让整个网站显得更加人性化，并且在很大程度上烘托出网站所要表现的氛围。

 

2. 暗色背景

 

在暗色背景中，明亮的输入框便吸引了所有的注意力。

 

3.扁平化纯色背景

 

 

 

三、清晰的视觉纵线

 

人的视觉浏览一般呈“L”型视线，意指从上到下，从左至右，表单的视觉浏览顺序符合“L”型规律就基本符合用户的心理预期。

 

四.注重用户体验设计

 

登陆和注册表单的使用率非常高，一个表单的设计其实也不是简单的事情，用户体验是必须要考虑的事情。哪怕是一个注册表单，也值得再细心研究。如果不重视用户体验，就会致使网站流失大量用户。一切以最佳用户体验为出发。

 

 

1.减少用户的强制性操作

 

2. 减少用户输入

 

一般说来，注册表中每增加一个字段，注册率就会相应的下降。

 

3. 信息化注册提示

 

为终端用户提供有效的信息提示是用户体验设计中的最好方式，尤其是在用户注册填写信息具有多个输入域，而在需要填写的字段互相可能产生歧义的时候，这些消息提示可以减少用户的思考和猜测时间。

 

4. 错误密码输入记忆

 

当用户第一次输入一个错误的密码时，系统在判断错误后同时把用户输入的错误密码保存记忆，当用户再次输入这个错误密码时，系统会自动在客户端提示“密码错误”。

 

以上就是一些常见的网页或APP产品登陆页面设计的技巧。巧妙的设计是吸引用户的第一步，站在用户的角度，让更多的用户通过登陆注册这扇大门真正的走近和了解我们的产品。

 

更多设计类相关干货（文章及教程），详见：UI/UX专业博客