设计与开发规范总结

原创

莫空9081

修改于 2021-03-23 14:27:01

7740

修改于 2021-03-23 14:27:01

文章被收录于专栏：iOS 备忘录

前言

对比林永坚大佬的08 | 设计组件：DesignKit 组件桥接设计与开发规范想到的，总结一下。

开发中，一套统一的设计规范至关重要，比如颜色、间距、字体、iconfont等等，这些都是在开发前需要和设计统一制定的。首先要有一套统一的规范，设计出设计稿时按照这一套规范来，开发做的时候也按照同一套规范来，这样做出来的东西，最后效果就会保持一致。

如果没有一套统一的规范，设计出设计稿时，每一个设计师的审美和偏好都是不同的，有些觉得浅色好看，有些觉得深色好看，有些觉得留白多点大气，有些觉得地方一定要显示尽可能多的东西。最后设计出来的设计稿就是大杂烩，统一放到一个app里就会出现不协调。

开发在开发时如果没有一套统一的规范，每个地方的间距都是各自设置，每个地方的颜色都是各自设置，到最后如果想要改变一下全局的色调和间距，需要一个个地方找出来排查，开发起来也不方便。

内容

开发中都会经历APP改版的情况，有时改版只是调整了颜色、间距，但是由于开发时没有统一处理，所以需要一个个地方找出修改，耗时耗力。所以一套统一的设计规范是必不可少的。

和设计确定清楚，比如：

设计的主色调是什么，用于哪些场景；
字体的颜色有哪些，分别用于哪些情况；
按钮的颜色有哪些，按钮的选中效果有哪些，什么时候使用哪种；
分割线的颜色是什么，是否只有一种分割线；
弹窗的样式有哪些，各种样式出一个示例，以后弹窗样式不能超出这些类型
- 纯文字的
- 纯图片的
- 文字+图片的
- toast的
- 带按钮的，多个按钮的
留白是多少，左右留白、上下留白，有多少情况；
阴影效果有哪些

确认好了上述规范之后，就可以把一套规范做成公共组件库，开发中直接使用组件库，不单独在每个地方设置，这样保证了效果和规范的统一。比如拿颜色来说：

设计给出的颜色一般是16进制的数字，所以我们先写一个UIColor的Extention，把0x00ff00或者#00ff00这种格式的，可以直接使用

import UIKit

extension UIColor {
    @objc public convenience init?(hex: String, alpha: CGFloat = 1.0) {
        let r, g, b, a: CGFloat

        if hex.hasPrefix("#") {
            let start = hex.index(hex.startIndex, offsetBy: 1)
            let hexColor = String(hex[start...])

            let scanner = Scanner(string: hexColor)
            var hexNumber: UInt64 = 0

            if scanner.scanHexInt64(&hexNumber) {
                if hexColor.count == 8 { // 说明有alpha
                    r = CGFloat((hexNumber & 0xff000000) >> 24) / 255
                    g = CGFloat((hexNumber & 0x00ff0000) >> 16) / 255
                    b = CGFloat((hexNumber & 0x0000ff00) >> 8) / 255
                    a = CGFloat(hexNumber & 0x000000ff) / 255

                    self.init(red: r, green: g, blue: b, alpha: a)
                }
                else if hexColor.count == 6 { // 说明没有alpha
                    r = CGFloat((hexNumber & 0xff0000) >> 16) / 255
                    g = CGFloat((hexNumber & 0x00ff00) >> 8) / 255
                    b = CGFloat(hexNumber & 0x0000ff) / 255
                    a = alpha

                    self.init(red: r, green: g, blue: b, alpha: a)
                }
                else {
                    return nil
                }
                return
            }
        }
        else if hex.hasPrefix("0x") {
            let sharpColorStr = (hex as NSString).replacingOccurrences(of: "0x", with: "#")
            self.init(hex: sharpColorStr, alpha: alpha)
            return
        }

        return nil
    }
}

然后再新建一个统一的颜色的struct，项目中设置的所有颜色，都是struct中的方法。

import UIKit

public struct ColorManager {
    // MARK: - view color
    // 全局主色调，主题色
    static func primaryViewColor() -> UIColor? {
        return UIColor(hex: "0x00ff00")
    }

    // 次要颜色
    static func secondaryViewColor() -> UIColor? {
        return UIColor(hex: "#ff0000")
    }

    // MARK: - text color
    // 主要文字颜色，按钮、标题文字颜色
    static func primaryTextColor() -> UIColor? {
        return UIColor(hex: "#ffe700ff")
    }

    // 次要文字颜色，描述性文字颜色
    static func secondaryTextColor() -> UIColor? {
        return UIColor(hex: "#ffe700ff")
    }

    // MARK: - button color
    // 主要按钮颜色
    static func primaryButtonColor() -> UIColor? {
        return UIColor(hex: "#ffe700ff")
    }

    // 次要按钮颜色
    static func secondaryButtonColor() -> UIColor? {
        return UIColor(hex: "#ffe700ff")
    }

    // MARK: - other colors
    // 分割线颜色
    static func dividerColor() -> UIColor? {
        return UIColor(hex: "#ffe700ff")
    }

    // 背景颜色
    static func backgrounColor() -> UIColor? {
        return UIColor(hex: "#ffe700ff")
    }
}

再然后可以把这两个单独封装成Pod的私有库，使用时，直接Pods导入即可。

或许会有疑问，只有这两个类，封装成组件是否大材小用，可以参考林大佬的总结

首先，为了减低组件之间的耦合性，提高组件的健壮性，组件的设计需要符合单一功能原则。也就是说，一个组件只做一件事情，一个组件库只做一类相关的事情。每个组件库都要相对独立且功能单一。
比如，我们可以分别封装网络库、UI 库、蓝牙处理库等底层库，但不能把所有库合并在一个单独的库里面，这样可以方便上层应用按需使用这些依赖库。例如，广告 SDK 可以依赖于网络库、UI 库，但并不依赖蓝牙处理库。这样做一方面可以减少循环依赖的可能性，另一方面可以加快编译和链接的速度，方便使用。
最后，组件的开发并不是一蹴而就，很多时候可以根据业务需求把公共模块一点点地移入公共组件库中，一步步地完善组件库的功能。不要为了开发组件而开发组件，很多时候当我们充分理解了使用者的需求后，才能为组件定义完善的接口和完整的功能。