如何做好品牌設(shè)計(jì)？來(lái)看騰訊短視頻的實(shí)戰(zhàn)案例！

編者按：一個(gè)完整的品牌設(shè)計(jì)流程是怎樣的？本文用騰訊DOV 視頻的實(shí)戰(zhàn)案例，告訴你高手是如何做品牌設(shè)計(jì)的！

項(xiàng)目概述

2017年短視頻產(chǎn)品爆發(fā)，有別于一般短視頻產(chǎn)品，DOV 主要講求透過(guò)短視頻記錄生活，并且將短視頻分享給熟人關(guān)系鏈好友，透過(guò)短視頻本身作為媒介達(dá)到社交的目的。目標(biāo)族群明確的定位在于高中以上的年輕族群。設(shè)計(jì)的任務(wù)除了基礎(chǔ)的體驗(yàn)之外，更應(yīng)該將分享生活的輕松感以及時(shí)下年輕人的生活態(tài)度結(jié)合至產(chǎn)品之中，藉由視覺(jué)的手法提升用戶的記憶與認(rèn)同。

本次 DOV 的品牌設(shè)計(jì)在基礎(chǔ)UI 已具備的條件下，上線前兩周經(jīng)過(guò)討論，以QQ family 中人氣最高的多福熊作為吉祥物，品牌LOGO 也沿用了多福的形象，為了有更全面的品牌感受，本次 DOV 品牌的設(shè)計(jì)包含了 LOGO、吉祥物、圖形系統(tǒng)、動(dòng)效系統(tǒng)、常規(guī)運(yùn)營(yíng)規(guī)范等等。

回顧 DOV 品牌設(shè)計(jì)，主要可分為提案前準(zhǔn)備、圖像系統(tǒng)設(shè)計(jì)、界面控件優(yōu)化、動(dòng)效主題鋪陳、運(yùn)營(yíng)規(guī)范制定等五個(gè)環(huán)節(jié)。

提案前準(zhǔn)備

以兩周含開(kāi)發(fā)還原的時(shí)間來(lái)說(shuō)，完成全部五個(gè)步驟不切實(shí)際，故上線前必須至少完成圖像系統(tǒng)設(shè)計(jì)以及界面控件設(shè)計(jì)的層次以確保用戶體驗(yàn)的完整。在時(shí)間有限的情況之下，提案前準(zhǔn)備至關(guān)重要，好的準(zhǔn)備可以避免走彎路，也可以將時(shí)間精準(zhǔn)的投入在創(chuàng)意之中。

首先提案前準(zhǔn)備階段是關(guān)鍵頁(yè)面的選擇，以及明確設(shè)計(jì)方向。

??1. 提案關(guān)鍵頁(yè)面選擇

提案關(guān)鍵頁(yè)面的抉擇有幾個(gè)要點(diǎn)：

高效率：若要提高效率則不能在任何地方浪費(fèi)設(shè)計(jì)資源（人力、時(shí)間），品牌風(fēng)格提案建議在3幀畫(huà)面以內(nèi)，免去不必要的工作量，除此之外，三幀畫(huà)面也是移動(dòng)端設(shè)計(jì)在 PPT 上展示最理想應(yīng)用空間的幀數(shù)。

高檢視：必須確保方案的呈現(xiàn)可以概覽日后延展的各種可能，以品牌方案階段為例，必須兼顧圖像與 UI 的協(xié)調(diào)、大面積展示時(shí)的效果，以及最小限度展示時(shí)是否還能延續(xù)品牌的感受。在 DOV 提案中，設(shè)計(jì)選擇了具有最大面積展示空間的 Login場(chǎng)景，保證最好的視覺(jué)效果可以被檢視。其次選擇資料卡，驗(yàn)證圖像與UI面積各50%時(shí)的協(xié)調(diào)性。最后選擇消息列表，確認(rèn)即使幾乎沒(méi)有圖像輔助是否還能延續(xù)品牌感受。

? 2. 明確設(shè)計(jì)目標(biāo)

設(shè)計(jì)的內(nèi)容必須為目標(biāo)服務(wù)，DOV 的 slogan 為無(wú)樂(lè)不作，目標(biāo)族群為18-25歲一線城市年輕人，故視覺(jué)風(fēng)格一方面朝向年輕人群中較頂端的潮流族群為主，另一方面則向大眾流行的風(fēng)格做嘗試。設(shè)計(jì)團(tuán)隊(duì)此次刻意簡(jiǎn)化方向，不做太多的關(guān)鍵字發(fā)散想象，原因在于雖然關(guān)鍵字發(fā)散想象能幫助設(shè)計(jì)師勾勒大致感覺(jué)，但沒(méi)有被收斂或是沒(méi)有被二次形容，亦或者沒(méi)有被類比為圖像的關(guān)鍵詞基本上無(wú)法形成共識(shí)，過(guò)長(zhǎng)的發(fā)想時(shí)間也不符合互聯(lián)網(wǎng)公司的敏捷特質(zhì)。敏捷和明確是 DOV 品牌設(shè)計(jì)的前提。

圖像系統(tǒng)確定

完成了設(shè)計(jì)前準(zhǔn)備，后面則是圖像系統(tǒng)確定的階段，此階段分別是風(fēng)格發(fā)散以及設(shè)計(jì)細(xì)節(jié)的挖掘。

? 1. 風(fēng)格的發(fā)散

多人提案的過(guò)程中如果沒(méi)有明確的共識(shí)往往會(huì)難以發(fā)揮，單純的定義方向往往會(huì)造成設(shè)計(jì)師們重復(fù)設(shè)計(jì)路線或者命題太廣導(dǎo)致難以下手的問(wèn)題，所以本次 DOV 團(tuán)隊(duì)采用容器+內(nèi)容的設(shè)計(jì)發(fā)散方式。所謂容器，即是指常用的基本視覺(jué)原理、設(shè)計(jì)技巧等等歸納出可能的設(shè)計(jì)方式。視覺(jué)原理與經(jīng)典的設(shè)計(jì)手法能比較直接地引起用戶視覺(jué)心理上的主觀反應(yīng)，具有強(qiáng)且純粹的視覺(jué)沖擊力。所謂內(nèi)容，則是屬于可以象征 DOV 目標(biāo)人群的符號(hào)，這些符號(hào)往往透過(guò)符號(hào)學(xué)中的定錨效應(yīng)讓用戶有更深層次的認(rèn)同感。

除此之外，此次提案也使用極度繁復(fù)的原則。在眾多社交產(chǎn)品中，過(guò)度干凈純粹的設(shè)計(jì)在當(dāng)下各種日益娛樂(lè)化營(yíng)造視覺(jué)氛圍的競(jìng)品app 中已經(jīng)難以取得優(yōu)勢(shì)，且一些朝向年輕化或是潮流化的時(shí)尚品牌或者藝術(shù)家近年來(lái)也大量的使用極繁的手法來(lái)影響設(shè)計(jì)的走向，這是一個(gè)趨勢(shì)。

透過(guò)容器+內(nèi)容的設(shè)計(jì)方式，可以簡(jiǎn)單的提煉出可能的手法。如下：

經(jīng)由這些設(shè)計(jì)方式的組合，順應(yīng)設(shè)計(jì)的目標(biāo)，依照大眾化的口味以及潮流的風(fēng)格分別有以下五組方案。

方案A：利用簡(jiǎn)單的等比級(jí)數(shù)分割畫(huà)面，在畫(huà)面切割的模組內(nèi)填入潮流中常用的斜紋、X等符號(hào)，形成穩(wěn)定肌理之后再與 DOV熊做形態(tài)上大小的對(duì)比，營(yíng)造精致且沖擊力飽滿的畫(huà)面。

方案B：透過(guò)反復(fù)的方式在畫(huà)面背景中鋪陳穩(wěn)定的節(jié)奏營(yíng)造熱鬧的社交氛圍，另外透過(guò)前方特寫(xiě)的多福形成強(qiáng)烈對(duì)比，制造出強(qiáng)烈的視覺(jué)沖擊感吸引用戶目光。

方案C：同方案B利用對(duì)比的手法塑造視覺(jué)沖擊感受，同時(shí)簡(jiǎn)化了 DOV 的形象并帶入了類似潮流公仔翻玩造型內(nèi)材質(zhì)的手法，兼顧了品牌符號(hào)的印象也帶入潮流氛圍。

方案D：利用具有涂鴉手感的字體設(shè)計(jì)手法填滿背景，透過(guò)字體形塑潮酷的氛圍，背景前景以資訊量多寡、面積差異等方面做對(duì)比處理，形成有態(tài)度且豐富的畫(huà)面感。

方案E：將潮流中常用的 X符號(hào)與多福熊做組合，安排在等比級(jí)數(shù)分割的框架之中形成韻律之美，同時(shí)部分元素加上了潮流常用的流光材質(zhì)，讓 DOV 的意象完全與潮流形象貼合。

最后方案整體全覽如下，在跨度上包含了潮流與大眾流行，透過(guò)攔訪驗(yàn)證，左起2、4、5方案也受到了用戶明確好評(píng)，反饋，但基于4、5的用戶好惡較極端，故最終選了方案2作為DOV的主視覺(jué)。

? 2. 設(shè)計(jì)細(xì)節(jié)挖掘

整體品牌風(fēng)格定案后，選擇用戶在體驗(yàn)過(guò)程中最高頻的下拉上滑場(chǎng)景以及必經(jīng)的登錄流程中植入彩蛋，在上線前以有限的精力內(nèi)用最小的設(shè)計(jì)投入換得最多的精致感以及情感傳遞。

界面調(diào)性重塑

大面積的圖像氛圍以及體驗(yàn)路徑上必經(jīng)的關(guān)鍵點(diǎn)品牌化之后，界面本身的品牌調(diào)性也必須跟進(jìn)，讓靜態(tài)的平面上達(dá)到圖像與界面最大的契合，此次 DOV 分別在界面的造型以及界面的效果中做調(diào)整。

? 1. 造型統(tǒng)一

造型上統(tǒng)整了所有界面的輪廓，以大圓角呼應(yīng)了圖像系統(tǒng)親和的特質(zhì)。

? 2. 效果統(tǒng)一

效果上一致采取了具有Y軸偏移的投影，透過(guò)營(yíng)造漂浮層次過(guò)程中減少過(guò)硬的線段分隔，達(dá)到親和的特質(zhì)。

動(dòng)畫(huà)主題鋪陳

除了圖像元素以及控件元素外，由于動(dòng)畫(huà)可以透過(guò)結(jié)合品牌印記、動(dòng)效曲線、情節(jié)設(shè)計(jì)等部分，形成令人有記憶點(diǎn)并且愉悅的效果，所以在品牌化的過(guò)程中是畫(huà)龍點(diǎn)睛的環(huán)節(jié)。

? 1. 動(dòng)效曲線

UI 操作的場(chǎng)景之下，DOV 利用了特別的動(dòng)效曲線，將減速度的時(shí)間延后，加上適當(dāng)?shù)奈灰扑茉靹?dòng)效快速到位且有慣性回彈的動(dòng)感效果，讓整體的氛圍高效率與高趣味性共存。

? 2. 品牌印記

一般動(dòng)效主題大多止于動(dòng)效曲線，而 DOV 除了共同的動(dòng)效曲線外，融入了品牌吉祥物以及更生動(dòng)活潑的擠壓形變，讓動(dòng)效的記憶點(diǎn)更加鮮明。

? 3. 情節(jié)設(shè)計(jì)

除了令人有記憶點(diǎn)的動(dòng)效曲線以及融入品牌識(shí)別的形變，動(dòng)效本身因?yàn)榫哂袝r(shí)間軸的特性，在適當(dāng)?shù)膱?chǎng)合中可適度加入簡(jiǎn)單的動(dòng)作情節(jié)，讓 APP 的氛圍更輕松有趣。（備注：DOV1.2.1版本后已無(wú)消息列表下拉刷新）

運(yùn)營(yíng)規(guī)則制定

APP 本身具有完整的視覺(jué)品牌調(diào)性之后，對(duì)外的一切宣傳與運(yùn)營(yíng)也需要讓用戶有固定的認(rèn)知，透過(guò)制定通用的運(yùn)營(yíng)專用字體、以及通用的輔助圖形，明確定義可發(fā)揮區(qū)域，讓 DOV 運(yùn)營(yíng)設(shè)計(jì)品質(zhì)事半功倍，且每次活動(dòng)都可以加深用戶對(duì) DOV 的印象。

? 1. DOV運(yùn)營(yíng)字體

DOV 運(yùn)用「造字工房素白」字體，取其圓潤(rùn)且適合用于標(biāo)題的特性大幅減少每次運(yùn)營(yíng)情況都需要重新寫(xiě)標(biāo)準(zhǔn)字的困擾，另外邊緣加上立體畫(huà)的手法，讓 DOV 運(yùn)營(yíng)字體體量更充足，更有沖擊力。

? 2. DOV運(yùn)營(yíng)圖形

DOV 運(yùn)營(yíng)場(chǎng)景擁有專屬的 monogram pattren，除了可以讓背景豐富以外，每個(gè)單元都可以依照運(yùn)營(yíng)的需要替換，由此去保證共同的設(shè)計(jì)手法。

設(shè)計(jì)總結(jié)

品牌化設(shè)計(jì)在過(guò)去往往發(fā)力于 Logo、吉祥物，以及部分線下場(chǎng)景的組合運(yùn)用，這類組合體現(xiàn)品牌傳播效果上稍嫌不足，但若能全盤(pán)鋪陳線上落地的場(chǎng)景，嚴(yán)格把控設(shè)計(jì)方向，不僅可以在多人協(xié)作的情況下輕松地把控一致調(diào)性，更可以讓軟件本身以及運(yùn)營(yíng)項(xiàng)目持續(xù)的強(qiáng)化用戶記憶與設(shè)計(jì)的效率。DOV 上線后經(jīng)歷了兩次大改版，在精簡(jiǎn)視覺(jué)設(shè)計(jì)師的投入下，仍保持同樣的氣質(zhì)以及配合產(chǎn)品高效的產(chǎn)出，證明了方法的可行也保證了后續(xù)設(shè)計(jì)體驗(yàn)的一致。讓用戶從應(yīng)用中的各個(gè)場(chǎng)景體驗(yàn)到品牌精神，這可能將會(huì)是品牌化設(shè)計(jì)的重要趨勢(shì)。

下面是DOV APP的二維碼鏈接，歡迎大家下載體驗(yàn)！

歡迎關(guān)注「騰訊ISUX」的公眾號(hào)：