Thanks for my colleague WanChing‘s help to prepare this sharing article. E-Commerce app collects plentiful products from various brands. Each brand has its brand signature colors and public image. This article introduces how we made a single page to present a different brand’s style depending on its trademark.

感谢我的同事WanChing协助编写此共享文章。 电子商务应用程序收集来自各个品牌的丰富产品。 每个品牌都有其品牌标志色和公众形象。 本文介绍了如何制作单个页面来展示不同品牌的样式(取决于其商标)。

E-Commerce app collects plentiful products from various brands. In the TW Yahoo shopping business, we have more than 200 brands. Each of them has a brand signature color, style, etc. For example, when it comes to l’occitane, the yellow color will be our first impression.

电子商务应用程序收集来自各个品牌的丰富产品。 在TW Yahoo购物业务中，我们有200多个品牌。 他们每个人都有品牌标志的颜色，样式等。例如，当涉及欧舒丹时，黄色将是我们的第一印象。

Those signature colors are so important for a brand. If we use the same style and tone for all brands, the visual feeling will be inconsistent with the brand’s public image, and those brands cannot show their characteristics in our app. The same style is unacceptable for any brand since some brands treat this UI page as an official entry to buy their products online. The public image and spirit of the brand need to display to their customers accurately.

这些标志性色彩对于品牌来说非常重要。 如果我们对所有品牌使用相同的样式和色调，则视觉感受将与品牌的公众形象不一致，并且这些品牌无法在我们的应用程序中展现其特征。 任何品牌都无法接受相同的样式，因为某些品牌将该用户界面页面视为在线购买其产品的正式条目。 品牌的公众形象和精神需要准确地向客户展示。

We introduce a method to implement a single page to present a different brand’s style depending on its trademark. Furthermore, we can make the editors set up which color a particular brand uses, or even unique colors during the promotions or holidays.

我们引入一种方法来实现一个页面，以根据其商标呈现不同的品牌样式。 此外，我们可以让编辑者设置特定品牌使用的颜色，甚至在促销或假日期间使用独特的颜色。

设计 (Design)

When navigating to the brand page, the app will query the information (including name, banner image, trademark, promotions, etc.) of the brand from the server. Meanwhile, the app will also fetch the remote configuration of this brand, including predefined primary colors. If this brand has a remote configuration, it’s an individual case where we don’t want to use the trademark’s dominant color as the primary color.

导航到品牌页面时，该应用程序将从服务器查询品牌信息(包括名称，横幅图像，商标，促销等)。 同时，该应用程序还将获取该品牌的远程配置，包括预定义的原色。 如果该品牌具有远程配置，那么在个别情况下，我们不想使用商标的主要颜色作为原色。

If there isn’t any remote configuration, the app needs to calculate the primary colors from the trademark. After deciding the primary color, we have sets of designs to fit with the primary color. Our designers pick those sets of colors to use on texts, buttons, links, etc.

如果没有任何远程配置，则应用程序需要根据商标计算原色。 在确定原色之后，我们有适合原色的设计方案。 我们的设计师选择那些颜色用于文本，按钮，链接等。

When the primary color is dark, the app should choose the Dark Background Theme or Dark Text Theme, depending on the style setting. When the primary color is light, the app should only apply Light Background Theme.

当原色为深色时，应用程序应根据样式设置选择“ 深色背景主题”或“ 深色文本主题” 。 当原色为浅色时，应用程序应仅应用浅色背景主题 。

深色背景主题 (Dark Background Theme)

In the Dark Background Theme, the app will use primary color as the background color of most components; currently, we predefine pure white color, 0xFFFFFF, as the text color. For extracting another color from the trademark, it is still under discussion.

在深色背景主题中，应用程序将使用原色作为大多数组件的背景色； 目前，我们将纯白色0xFFFFFF预定义为文本颜色。 为了从商标中提取另一种颜色，仍在讨论中。

深色文字主题 (Dark Text Theme)

Dark Text Theme is almost the same as Dark Background Theme. The only difference is the promotion cell, whose background color is white, and the text is the primary color.

深色文本主题与深色背景主题几乎相同。 唯一的区别是促销单元格，其背景色为白色，文本为原色。

浅色背景主题 (Light Background Theme)

In Light Background Theme, since the primary color is light, and the page applies it to the most background of the UI components, we need to make sure the text color has enough contrast. That’s why we choose a dark color as the text color in this case.

在浅色背景主题中，由于主要颜色是浅色，并且页面将其应用于UI组件的大多数背景，因此我们需要确保文本颜色具有足够的对比度。 这就是为什么在这种情况下我们选择深色作为文本颜色的原因。

Another thing that needs to be taking care of is: Since our page background color is #F3F3F3, when the primary color is also closed to white, the user will not be able to distinguish where the button is. To tackle this problem, we add a dark rim to the button whenever we realize the primary color is closed to a white color.

需要注意的另一件事是：由于我们的页面背景颜色是＃F3F3F3，因此当原色也被封闭为白色时，用户将无法区分按钮的位置。 为了解决这个问题，只要我们意识到原色接近白色，就会在按钮上添加深色边框。

远程配置设置 (Remote Configuration Setting)

A remote setting usually happens when there’s a big promotion event or holiday celebration. For example, some brands may want to use red or green as the primary color during Christmas. We have an online system for editors to set up the colors for the specific brand, and once we find the editor’s choice exists, we’ll use the color set directly. Currently, we didn’t open a lot of items to be configured. For now, the system merely supports changing the primary color. In our goal, we should dispose of all components’ background color, text color, border color, and even shadow color, so that our editors have full control over the UI.

当有大型促销活动或节日庆祝活动时，通常会发生远程设置。 例如，某些品牌可能希望在圣诞节期间使用红色或绿色作为主要颜色。 我们有一个在线系统，供编辑人员设置特定品牌的颜色，一旦发现编辑的选择存在，我们将直接使用颜色集。 当前，我们没有打开很多要配置的项目。 目前，该系统仅支持更改原色。 在我们的目标中，我们应该处理所有组件的背景色，文本色，边框色，甚至阴影色，以便我们的编辑者可以完全控制UI。

成就 (Achievement)

Now, this mechanism is already on our app for several months. It serves more than 200 brands and can fulfill most of the brand owners’ requirements no matter on normal days or special days. This mechanism may also be a possible solution to provide a more friendly UI for ads to bring our customer’s characteristics to their target users.

现在，这种机制已经在我们的应用程序上使用了几个月。 它服务于200多个品牌，无论在正常工作日或特殊日子均可满足大多数品牌所有者的要求。 此机制也可能是一种解决方案，可以为广告提供更友好的UI，以将我们客户的特征带给其目标用户。

• Playboy
  花花公子

• Peanuts
  花生

扩展计划 (Extension Plan)

After picking the primary color, we can calculate more relative colors from primary colors, such as the title text color, the body text color, which is already supported by the Android Palette library. Those colors are guaranteed to have sufficient contrast.

选择原色后，我们可以根据原色计算更多的相对颜色，例如标题调色板颜色，正文文本颜色，Android Palette库已经支持。 保证这些颜色具有足够的对比度。

• Text color on title is a color with a contrast ratio larger than 3.0f.

  标题上的文本颜色是一种对比度大于3.0f的颜色。

• Text color on the body is a color with a contrast ratio larger than 4.5f.

  正文上的文本颜色是一种对比度大于4.5f的颜色。

We also try to migrate the formula from Android to other platforms and cooperate with our designers to calculate the identified text colors from the same primary color palette. Then we can support more styles than the current predefined themes.

我们还尝试将公式从Android迁移到其他平台，并与我们的设计师合作，从相同的主调色板计算已识别的文本颜色。 然后，我们可以支持比当前预定义主题更多的样式。

实作 (Implementation)

商标原色选择器 (Trademark Primary Color Picker)

Since each brand has its trademark and most of them use the brand signature color as the dominant color, we extract the dominant color of the bitmap of the trademark as the primary color of our UI page.

由于每个品牌都有其商标，并且大多数都使用品牌签名颜色作为主色，因此我们提取商标位图的主色作为UI页面的原色。

• Android
  安卓

Use AndroidX Palette library to get the colors from trademark:

使用AndroidX Palette库从商标获取颜色：

fun getPrimaryColor(trademark: Bitmap) =
Palette.from(bitmap).generate().getDarkMutedColor(DEFAULT_COLOR)

• iOS
  的iOS

We need to calculate the color because there is not a ready-made method:

我们需要计算颜色，因为没有现成的方法：

extension UIImage {  var primaryColor: UIColor? {    guard let inputImage = CIImage(image: self) else { return nil }    let extentVector = CIVector(x: inputImage.extent.origin.x,
                                y: inputImage.extent.origin.y,
                                z: inputImage.extent.size.width,
                                w: inputImage.extent.size.height)    guard let filter = CIFilter(
             name: "CIAreaAverage",
             parameters: [kCIInputImageKey: inputImage,
                          kCIInputExtentKey: extentVector])
          else { return nil }    guard let outputImage = filter.outputImage else { return nil }    var bitmap = [UInt8](repeating: 0, count: 4)    let context = UIImage.contextForAverage    
    context.clearCaches()    context.render(
           outputImage, toBitmap: &bitmap, rowBytes: 4,
           bounds: CGRect(x: 0, y: 0, width: 1, height: 1),
           format: .RGBA8, colorSpace: nil)    return UIColor(red: CGFloat(bitmap[0]) / 255.0,
                   green: CGFloat(bitmap[1]) / 255.0,
                   blue: CGFloat(bitmap[2]) / 255.0,
                   alpha: CGFloat(bitmap[3]) / 255.0)
}

暗光探测器 (Dark Light Detector)

We use a formula to calculate if the primary color is a darken color or not and decide which color set we use for displaying the UI page. The following is how we determine the color is light:

我们使用公式来计算原色是否为深色，并确定用于显示UI页面的颜色集。 以下是我们确定颜色为浅色的方法：

• Brightness of Color = ((r * 299) + (g * 587) + (b * 114)) / 1000.0f

  色彩亮度=((r * 299)+(g * 587)+(b * 114))/ 1000.0f

• A light color = (brightness >= 204)

  浅色=(亮度> = 204)

And we need to understand whether the primary color is closed to white, the following is how we find out those colors:

我们需要了解原色是否接近白色，以下是我们找出这些颜色的方法：

• Color close-to-white is a color with a brightness value larger than 239.

  接近白色的颜色是一种亮度值大于239的颜色。