用图像传递情绪：通过色彩提取提升用户体验

IOS

2023-11-07 00:11:40

图像颜色提取：提升UI设计吸引力的艺术

在现代UI设计中，颜色不仅仅是一种装饰元素，它还承担着至关重要的沟通和情感传递作用，甚至能够在潜意识层面影响用户的行为。因此，设计师们孜孜不倦地探索着新的色彩运用方式，旨在打造出更具吸引力、更能引起用户共鸣的视觉体验。

图像颜色提取技术 应运而生，它使设计师能够从图像中提取主导色调，并将其巧妙地融入UI设计之中。这一技术带来的益处不容小觑：

1. 强化品牌形象： 通过从标志、产品或其他品牌资产中抽取颜色，设计师们可以创建出与品牌形象高度契合的UI设计，从而提升品牌知名度和识别度。

2. 提升用户体验： 从图像中提取的颜色能够创造出更加和谐、赏心悦目的UI设计，从而提升用户体验。例如，如果用户选择了一张自然风光照片作为背景，那么应用程序的UI设计就可以采用与照片相似的绿色或蓝色，营造出一种沉浸式的体验。

3. 增强用户参与度： 颜色能够影响情绪和行为，因此图像颜色提取技术也可以用作提高用户参与度的利器。例如，如果应用程序的UI设计采用了充满活力的色彩，那么用户就有更大的可能性与之互动。

iOS图像颜色提取指南

Swift

import UIKit

extension UIImage {
    func dominantColor() -> UIColor? {
        guard let inputImage = CIImage(image: self) else { return nil }
        let extent = inputImage.extent
        let dominantColorFilter = CIFilter(name: "CIColorMonochrome")!
        dominantColorFilter.setValue(inputImage, forKey: "inputImage")
        dominantColorFilter.setValue(1.0, forKey: "inputIntensity")
        guard let outputImage = dominantColorFilter.outputImage,
            let cgImage = CIContext().createCGImage(outputImage, from: extent) else { return nil }
        return UIColor(cgImage: cgImage)
    }
}

Objective-C

#import <CoreImage/CoreImage.h>

@implementation UIImage (ColorExtraction)

- (UIColor *)dominantColor {
    CIImage *inputImage = [[CIImage alloc] initWithImage:self];
    CIContext *context = [CIContext contextWithOptions:nil];
    CIFilter *dominantColorFilter = [CIFilter filterWithName:@"CIColorMonochrome"];
    [dominantColorFilter setValue:inputImage forKey:@"inputImage"];
    [dominantColorFilter setValue:@1.0 forKey:@"inputIntensity"];
    CIImage *outputImage = [dominantColorFilter outputImage];
    CGImageRef cgImage = [context createCGImage:outputImage fromRect:inputImage.extent];
    return [UIColor colorWithCGImage:cgImage];
}

@end