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

項目概述

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

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

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

提案前準備

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

首先提案前準備階段是關鍵頁面的選擇，以及明確設計方向。

??1. 提案關鍵頁面選擇

提案關鍵頁面的抉擇有幾個要點：

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

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

? 2. 明確設計目標

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

圖像系統(tǒng)確定

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

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

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

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

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

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

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

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

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

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

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

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

? 2. 設計細節(jié)挖掘

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

界面調(diào)性重塑

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

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

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

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

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

動畫主題鋪陳

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

? 1. 動效曲線

UI 操作的場景之下，DOV 利用了特別的動效曲線，將減速度的時間延后，加上適當?shù)奈灰扑茉靹有Э焖俚轿磺矣袘T性回彈的動感效果，讓整體的氛圍高效率與高趣味性共存。

? 2. 品牌印記

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

? 3. 情節(jié)設計

除了令人有記憶點的動效曲線以及融入品牌識別的形變，動效本身因為具有時間軸的特性，在適當?shù)膱龊现锌蛇m度加入簡單的動作情節(jié)，讓 APP 的氛圍更輕松有趣。（備注：DOV1.2.1版本后已無消息列表下拉刷新）

運營規(guī)則制定

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

? 1. DOV運營字體

DOV 運用「造字工房素白」字體，取其圓潤且適合用于標題的特性大幅減少每次運營情況都需要重新寫標準字的困擾，另外邊緣加上立體畫的手法，讓 DOV 運營字體體量更充足，更有沖擊力。

? 2. DOV運營圖形

DOV 運營場景擁有專屬的 monogram pattren，除了可以讓背景豐富以外，每個單元都可以依照運營的需要替換，由此去保證共同的設計手法。

設計總結

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

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

歡迎關注「騰訊ISUX」的公眾號：