发现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一样,开发和设计是直接相关的.
相关资料:
