發現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）的用法