iOS中的警告框(alert)模式

发现iOS中的警告框,开发和设计其实是直接相关的.懂一点开发的知识,可以在设计中直接应用相应的设计模式,提高合作效率和产出物质量.

首先,警告框的按钮有且只有三种样式:

• default
• cancel
• destructive

在开发过程中需要指定按钮样式和按钮顺序,iOS会自动根据按钮数量和样式进行视觉上的调整.

• 当少于或等于2个按钮时,按钮是水平放置的,且cancel样式的按钮一定会在左边,这是系统自动完成的.
• 当多于2个按钮时,按钮是竖直放置的,cancel样式的按钮一定会在最下边,如下图所示:

按钮竖排的警告框

对应的Swift代码:

import UIKit

class ViewController: UIViewController, UIAlertViewDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBOutlet weak var showAlert: UIButton!
    
    @IBAction func alert(_ sender: UIButton) {
        let alertControler = UIAlertController(title: "Warning", message: "Do not open padara box!", preferredStyle: .alert)
        let cancelAction=UIAlertAction(title: "No", style: .cancel, handler: nil)
        let okAction=UIAlertAction(title: "Yes", style: .default, handler: nil)
        let otherAction=UIAlertAction(title: "Other", style: .default, handler: nil)
        let delAction=UIAlertAction(title: "Delete", style: .destructive, handler: nil)
        alertControler.addAction(cancelAction)
        alertControler.addAction(okAction)
        alertControler.addAction(delAction)
        alertControler.addAction(otherAction)
        self.present(alertControler, animated: true, completion: nil)
    }

}

可以看到即使代码中将cancle样式的"No"按钮第一个添加进去,实际弹出的警告框"No"按钮并不在第1行,而是在最后一行.

另外,警告框也有且只有两种样式:

• alert
• actionSheet

actionSheet样式就相当于强制按钮竖排并在底部向上弹出的alert.
在这两种样式的基础上,可以添加输入框和按钮,实现各种效果.例如:

登录弹框

基于这些对基本开发知识的了解,在输出交互文档时,就不再需要特别标注说明"取消按钮在左边",也不需要请UI专门指定破坏性操作按钮的颜色值了.同时,也可以将设计师的精力从"按钮如何排布"等琐碎内容上解脱出来.

Google的Material Design框架还没有详细了解,推测可能跟iOS一样,开发和设计是直接相关的.

相关资料:

Swift - 告警提示框（UIAlertController）的用法