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的顏色。