恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
控件解析系列之《警告框》
0.0°
2018-01-23 原创文章 规范/资料 举报 2924 13 6 0

这次分享的控件是—警告框,一个较为严肃的控件,先看看IOS和Android长什么样子:


Image title


Image title


从两个图可以看出:

1.两家的Alers表现形式一样,都是在中央出现且自带蒙版;

2.警告框的基本组成是标题、详情和选项按钮;

3.选项按钮通常是1~2个,避免直接使用“是/否”这样的选项,选项明确告知用户的操作结果。


看了下官方文档,IOS的Alert控件是在“Views”类下面,Android的Alerts控件是在“Components——Dialogs”类下面,下来我们各自分享一下两家的特点:



Google Material Design


官方定义:警告框在紧急中断、需要确认和通知用户的情况下使用。

这里需要提醒一下,在上期《提示框》中介绍的Snackbars,同样都是提示框,和警告框有什么区别呢,回顾一下:


Image title



警告框可以看做是操作的确认,可以理解成操作的最后一步,只有用户点击确认了,完整的操作才完成;

Snackbars是当用户完整操作完之后才出现的提醒信息,其信息重要度要比警告框低,有时候Snackbars二回有撤销按钮,留给用户反悔的余地。


警告框的内容样式分两种

1.内部没有标题的,大部分也是没有标题的


Image title



注意才做按钮的文字表述,避免使用“是/否”这样的字眼,应明确告知用户的具体操作。


2.内部有标题的,仅用于高风险操作


Image title



需要注意的是:

1.在内容区域使用一个明确的标题、陈述或问题;

2.避免使用模棱两可的问题。


iOS Human Interface Guideline


官方定义:警报传达与你的应用程序或设备状态有关的重要信息,并请求操作。


规范中对警告框包含的元素做出了如下规定:

标题(必选)  描述信息(可选)    输入框(可选)   按钮(必选)    

同样,警告框的样式都是磨砂效果的圆角白框,不可更改。


Image title



苹果公司也给了两个使用原则:


1.少用:只使用在重要场景,比如购买、破坏性行为(删除)、告知用户重要信息(报)错。警告框不常出现,确保能引起用户的足够重视,一定要确保每一个警告框都提供重要的信息和有用的操作选项;


2.确保警告框在横竖屏的正常显示。


关于IOS警告框中的文案内容也给了指导原则,这里不多赘述了,有兴趣了解的同学可以去官方文档查看。

更新:2018-01-23

收藏

13人已收藏

MiFan菌

现在只有看书和做笔记能让自己安心

  • 7

    作品

  • 16

    粉丝

  • 19

    关注

  • 图表设计,你不知道的那些事
  • 引导页设计—2.5D
  • 活动倒计时海报
  • Download动效设计
相关标签
设计规范iOSAndroid

    猜你喜欢

      2018-01-23 原创文章 规范/资料 举报 2924 13 6 0

      控件解析系列之《警告框》

      0.0°

      你确定要举报控件解析系列之《警告框》

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年01月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      13
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录