视觉规范化指的是通过对各种UI组件的标准化定义来统一app中的所有控件。经历了一个中型规模app的迭代，我深深感受到了视觉规范化对开发人员的效率提升和app视觉还原度的提升。总而言之这是一件投入产出比极高的工作，但却很容易被忽视。
背景
在 客户端开发中，传统UI开发方式是设计师在视觉稿中标注所有的大小、颜色的值来表示一个控件或者view。颜色是由6个十六进制表示，例 如#FDFDFD，大小由dp或者sp来表示。对于不同的状态下的控件（例如常规态、点击态、disable态）还需要分别标明不同状态下的各种色值。对 于高斯模糊这种遮罩要标明的元素更多了，有颜色、透明度、模糊半径等等。 对于程序员，拿到视觉稿后，根据字体大小、字体颜色、不同点击态颜色等元 素一一去设置font、textColor等值，繁琐且容易出错，等开发完成的时候设计师经常抱怨视觉还原度太低，深究原因经常是因为16进制颜色写错或 者是懒一点的开发者懒得按照视觉稿来而是自己估计了色值或者字号大小。 鉴于上述的种种麻烦，视觉规范化随之被应用在客户端开发实践中。具体来说，就是通过编码来表示一个个控件或者view，而设计师在视觉稿中标注对应的编码值，开发者只需要设置编码值即可完成UI组件的外观定义。我们对如下元素做了规范化， 查看图片视觉编码表
在前期开发中，只需要把设计师出的视觉编码表录入到代码中即可。举个简单的Label为例子，设计师会定义整个app使用的字体大小和色值，如下： 查看图片 而视觉稿中的标注不在是以#FDFDFD和14sp这样的格式给出，而是以T1CG4这样的字符串代替。 而Button用B1这样的字符串表示，B1标识了这Button对应的文字大小、文字颜色以及三种状态下button对应的背景色。 对于页面级别的元素，遮罩用M1字符串表示，M1样式标识了遮罩对应的背景色、透明度和模糊半径。app中经常出现的各种错误页面和空页面，也有E1这样的样式来表示。代码实现
代码实现非常简单，没有采用配置文件，而是硬编码到代码中。举Label为例子，@implementation UIFont (DRCStyle)
+ (UIFont *)drc_fontWithStyle:(NSString *)style {
if ([style isEqualToString:@"T0"]){
return [UIFont systemFontOfSize:10];
} else if ([style isEqualToString:@"T1"]){
return [UIFont systemFontOfSize:11];
} else if ([style isEqualToString:@"T2"]){
return [UIFont systemFontOfSize:12];
} else if ([style isEqualToString:@"T3"]){
return [UIFont systemFontOfSize:14];
} else if ([style isEqualToString:@"T4"]){
return [UIFont systemFontOfSize:16];
} else if ([style isEqualToString:@"T5"]){
return [UIFont systemFontOfSize:19];
} else if ([style isEqualToString:@"T6"]){
return [UIFont systemFontOfSize:21];
} else if ([style isEqualToString:@"T7"]){
return [UIFont systemFontOfSize:26];
} else if ([style isEqualToString:@"T8"]){
return [UIFont systemFontOfSize:34];
} else if ([style isEqualToString:@"T9"]){
return [UIFont systemFontOfSize:49];
} else{
DRCLog(@"error style of font");
return [UIFont systemFontOfSize:10];
}
}
@implementation UIColor (DRCStyle)
+ (UIColor *)drc_colorWithStyle:(NSString *)style {
if ([style isEqualToString:@"CY0"]) {
return [UIColor colorWithHexString:@"FA8919"];
} else if ([style isEqualToString:@"CY1"]) {
return [UIColor colorWithHexString:@"FFA033"];
} else if ([style isEqualToString:@"CG0"]) {
return [UIColor colorWithHexString:@"FFFFFF"];
} else if ([style isEqualToString:@"CG1"]) {
return [UIColor colorWithHexString:@"FAFAFA"];
} else if ([style isEqualToString:@"CG2"]) {
return [UIColor colorWithHexString:@"F0F0F0"];
} else if ([style isEqualToString:@"CG3"]) {
return [UIColor colorWithHexString:@"EBEBEB"];
} else if ([style isEqualToString:@"CG4"]) {
return [UIColor colorWithHexString:@"E5E5E5"];
} else if ([style isEqualToString:@"CG5"]) {
return [UIColor colorWithHexString:@"CCCCCC"];
} else if ([style isEqualToString:@"CG6"]) {
return [UIColor colorWithHexString:@"ADADAD"];
} else if ([style isEqualToString:@"CG7"]) {
return [UIColor colorWithHexString:@"878787"];
} else if ([style isEqualToString:@"CG8"]) {
return [UIColor colorWithHexString:@"666666"];
} else if ([style isEqualToString:@"CG9"]) {
return [UIColor colorWithHexString:@"333333"];
} else {
return [UIColor colorWithHexString:@"000000"];
}
}
@implementation UILabel (DRCStyle)
- (void)drc_setStyle:(NSString *)style {
NSString *fontStyle;
NSString *colorStyle;
NSRange rangeOfC = [style rangeOfString:@"C"];
if (rangeOfC.location == NSNotFound) {
return;
}
fontStyle = [style substringToIndex:rangeOfC.location];
colorStyle = [style substringFromIndex:rangeOfC.location];
self.font = [UIFont drc_fontWithStyle:fontStyle];
self.textColor = [UIColor drc_colorWithStyle:colorStyle];
}[myLabel drc_setStyle:@"T1CG4"] 即可。
对于所有的组件，都采用category的方式来实现，目的是为了不改变现有控件的继承体系，更加灵活。而Button需要用到Method swizzle方法来设置三种状态下的颜色，建议多个业务团队组合成的大型app谨慎使用。
