如何為多元化的產品場景選擇完美的色彩組合?

2021-10-18 06:41:18 字數 3375 閱讀 3546

隨著產品及設計理念的發展,多元、豐富、年輕、個性等元素越來越多的應用到產品中。色彩即是一種視覺感受,也能傳遞一種視覺資訊,當前國內外產品中越來越注重頁面色彩帶來的氛圍渲染與沉浸感受。

但是目前很多業務線存在產品展現形態單一,頁面資訊層級扁平問題。如下圖展示10.0版本之前的貼吧與其他的社群產品在頁面展現上的區別:

△貼吧與其他社群產品的頁面展現對比

通過對比,明顯感覺貼吧頁面相對單調一些。

貼吧擁有千萬級別個吧,如果採用同一種顏色進行頁面渲染顯然不能體現每乙個吧的主題和氛圍,而且在量級方面考慮,也不可能採用人工配置的方式去對每乙個吧進行設計。

為解決以上問題,智慧型取色通過分析每個吧的吧頭像色彩成分,自動生成頁面渲染所需要的吧頭背景色、「置頂「等字型色、發帖按鈕色等顏色,完成整個頁面的色彩渲染,並支援日/夜/黑三種模式,體現「千吧千面「的效果。

△貼吧智慧型取色效果

隨著手百、搜尋、商業等越來越多的場景需要進行豐富、個性化的色彩渲染,智慧型取色不斷地進行策略、服務公升級來滿足各產品線的產品需求。

目前智慧型取色中臺提供的是一套從使用者側到服務側的產品頁面配色解決方案,並完成演算法策略、架構服務、產品方案的一體化輸出。

下面主要介紹智慧型取色服務的整體架構、演算法策略、服務接入及效果展示這幾個方面。

智慧型取色本質上是利用頁面中的特徵,選取中中的代表色,並在色彩不失真的條件下,將其調整為適合頁面展現的顏色,並配合漸變色、字型色等衍射色策略,生成頁面渲染所需要的一系列顏色。

下面主要介紹以下智慧型取色支援的策略模式及應用場景。

1)策略模式

智慧型取色策略模式支援模版色彩匹配和自然色彩提取兩種模式。

△兩種智慧型取色策略模式

· 自然色彩提取

根據產品調性,通過亮度或者飽和度範圍等簡單的視覺策略,計算頁面需要的展示顏色,具有顏色豐富、自然、顏色關聯性強的優點。

· 模版色彩匹配

根據場景計算色彩色相,並對映到業務規範色板,定製專屬顏色。此方法提取的顏色相對單一,但因為人工定製顏色模版,整體色彩結果與產品調性更加的吻合。

2) 應用場景

智慧型取色目前提供背景色、按鈕色、陰影色、蒙層色、字型色等10餘種頁面渲染所需要的色彩,可以整體提公升整個頁面的氛圍感知。

△部分產品頁面元件的色彩渲染方式及效果

△智慧型取色整體架構圖

智慧型取色從使用者側到服務側主要分為感知層、應用層、服務層、視覺演算法層以及依賴的基礎元件。

1)感知層

在產品設計層面上,智慧型取色提供設計規則及解決方案,主要解決如何選色、如何渲染的問題。

2)應用層

3)服務層

4)視覺策略層

視覺策略層是智慧型取色服務的核心,主要提供自然色彩提取、模版色彩提取兩種提取模式。在演算法策略方面,主要包括策略控制及預處理、演算法核心,策略規則定製,產出主題色等10餘種頁面渲染所需要的顏色。

智慧型取色整體採用影象演算法與視覺策略相結合的方法,整體流程如下:

△智慧型取色整體流程

1)影象演算法

根據頁面中的一張特徵,通過前面提到的roi區域提取、檢視裁剪等一些預處理,進入到影象演算法處理階段,主要包括色彩量化、區域顯著度、色彩顯著度等演算法處理。

· 色彩量化

顏色量化是利用人眼對顏色的惰性,將原影象中不太重要的相似顏色合併為一種顏色,減少影象中的顏色,得到中主要的色彩成分集以及每種色彩在這個中的數量佔比。此專案中,我們對八叉樹、中位切分等多種量化演算法在演算法效率、記憶體占用進行工程分析,並經過設計師對其量化結果的評估,最終選擇八叉樹作為基礎量化演算法。

· 區域顯著度

通過影象演算法模擬人的視覺特點,提取影象中的顯著區域(即人類感興趣的區域)。通過對影象的區域顯著度檢測,可以獲取每個畫素點的顯著度歸一化評分。

· 色彩顯著度

在不同的色相下,或者在相同色相下的不同飽和度和亮度的色彩,人眼對其關注程度是不一樣的,我們針對色彩的色相進行顯著度劃分,並根據其飽和度和亮度,劃分了白、淺、彩、深、黑5個層級,並將其作為量化色彩評分的依據。

根據前面提到的三個特性,並對其進行綜合性分析,最終我們獲得了一組主題色候選色以及每種顏色的權重分值,進入到視覺策略選擇與調整的步驟。

2)視覺策略

視覺策略的作用是在影象演算法產出的候選色集中選擇出最能夠代表的主題顏色,並調整其色相、亮度及飽和度,使這個顏色能夠達到產品頁面展現的要求(畢竟,最能代表主題的顏色不一定符合頁面展示的標準)。

主要有以下三個準則:色相的合理選擇、亮度純度的準確控制、多模式下的合理對映。

△視覺策略的準則

主要通過以下主要的策略來實現:

· 色系劃分及主題色系選取

△劃分色彩及確定主題色系

根據hsv色彩空間中的色相,將色彩劃分為24個色系,並對候選色進行色系分類。根據每個色系中獲選色的個數、面積、顯著度,最終策略確定主題色系,並在色系中選擇出綜合評分最高的初始主題色。

· 亮度控制及區間控制

△色彩亮度控制

在hsv色彩空間下,即便各色彩的亮度分量相同,顏色本身給人眼的亮度感覺是不一樣的。根據每一種顏色本身的針對人眼的亮度屬性,生成色相的光亮度曲線,並根據光亮的曲線進行反映射得到色彩調整曲線,作為色彩的亮度調整準則。

針對各產品線本身設計風格及調性不同,視覺策略中設定八個亮度等級,並可以設定飽和度範圍視窗,滿足各個等級亮度和飽和度的精細化控制。

· 延伸色及日夜間模式對映

如果產品線需求不只是一種顏色,在通過上述策略得到的主題色基礎上,可以通過一系列輔助色延伸色策略,得到字型色、漸變色等色彩。如下圖,左邊是字型色相關的對映策略,右邊是漸變色策略。均是根據主題色的色相,在亮度及飽和度上的控制與展示。

△字型色和漸變色的對映策略

通過根據多模式的色彩對映規則,在產出一套日間模式的主題色字型色等渲染色彩後,都有其相應的夜間模式的對映規則,最終可以產出日/夜/黑一整套的頁面渲染色彩。

匯付天下深度布局支付場景多元化

隨著多種新經濟業態不斷湧現,消費場景多元化,支付環節起著至關重要的作用。支付作為企業交易行為的起點和終點,牽動著企業經營的各個環節,但是很多企業在支付 財務等方面的需求越來越複雜,線上線下多個支付場景和支付方式讓商家的賬務收銀缺乏統一管理 統一分賬,這都是商家數位化公升級的阻礙。在此巨大的行業訴求中...

消費需求多元化,品牌該如何構建新的消費場景?

在商品相當豐饒的當下國內市場,消費已經不僅僅是滿足於實用和物質上的享受。尤其是伴隨著網際網路成長起來的90後 z世代等年輕消費人群,追求精神上的愉悅 情感上的共振 文化上的認同,是其在物質消費之外更深層次需求,有的時候甚至超越了物質消費本身。如何在商品本身之外,給消費者提供更加豐富 多元的消費體驗是...

物聯網安全的多元化

如今物聯網技術高速發展,各形態物聯網裝置層出不窮,從無人機到智慧型交換機,甚至到供熱通風與空氣調節系統內都有其身影。不過在安全防護上卻並沒深刻意識到來自裝置維度 系統維度 網路維度 雲端維度上的諸多威脅。實際上,多雲多維的物聯網防護正成為亟待提供的服務需求。物聯網在多元化託管 鑑於物聯網技術在不同行...