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

項(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.1 提案關(guān)鍵頁(yè)面選擇

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

（1）高效率

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

（2）高檢視

必須確保方案的呈現(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ù)品牌感受。

1.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é)的挖掘。

2.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ù)分割畫面，在畫面切割的模組內(nèi)填入潮流中常用的斜紋、X等符號(hào)，形成穩(wěn)定肌理之后再與DOV熊作形態(tài)上大小的對(duì)比，營(yíng)造精致且沖擊力飽滿的畫面。

方案B：透過(guò)反覆的方式在畫面背景中鋪陳穩(wěn)定的節(jié)奏營(yíng)造熱鬧的社交氛圍，另外透過(guò)前方特寫的多福形成強(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)度且豐富的畫面感。

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

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

2.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)整。

3.1 造型統(tǒng)一

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

3.2 效果統(tǒng)一

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

四、動(dòng)畫主題鋪陳

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

4.1 動(dòng)效曲線

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

4.2 品牌印記

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

4.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的印象。

5.1 DOV運(yùn)營(yíng)字體

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

5.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)品牌傳播效果上稍嫌不足，但若能全盤鋪陳線上落地的場(chǎng)景，嚴(yán)格把控設(shè)計(jì)方向，不僅可以設(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ì)。

作者：六林，公眾號(hào)：騰訊ISUX

來(lái)源：https://mp.weixin.qq.com/s/mG3eVQlYS-RjShAHgjqifg

題圖來(lái)自Unsplash，基于CC0協(xié)議