必須Skr的乾貨：APP品牌設計套路
親愛的小夥伴們~（˙▽˙//）
這段時間，MID研習設的成員都在潛心修鍊新技能，C4D和AE都有不小的進步，總結了很多心得，在以後的文章里會給大家分享成果。
今天，先來看看MID帥氣的資深設計師阿勇的撩妹品牌設計套路吧~
阿勇-資深設計
大家好！我是阿勇。
之前給大家分享過一篇《運營設計的套路》，大家都表示套路很深、很實用。這次給大家分享一篇《品牌設計的套路》，希望能為大家提供參考，歡迎討論、共同學習。
在過去的一年裡，我一直服務於「有料短視頻」這個APP產品，由於產品業務方向變動很大，期間經歷了多次大改版，每一次改版品牌相關的設計都要調整，經過對品牌不斷的嘗試打磨，也總結出了一些對品牌設計思考和方法論。
- 形象設計-
一個完善的品牌形象系統（CI）包含了理念識別（MI）、行為識別（BI）、視覺識別（VI）三個組成部分，如果比作人的的話，MI和BI更像一個人的內在，他的行為言行舉止，而VI就是這個人的臉。
一個好的「臉」不僅能提升整個產品的氣質，對產品的宣傳推廣也有很大幫助。用我的偶像閆妮來打比方的話，粗糙的造型只能當胡歌他媽，精緻優美的形象設計，就能跟胡歌談戀愛＋ω＋。
- 了解背景-
設計師接到品牌設計需求時，不著急動手，可以先把整個產品理一遍，和產品經理聊聊品牌設計的側重點，和用研團隊談談用戶對產品的認知，紮根於用戶的根本需求來看品牌設計的方向，這樣設計出的東西才能有說服力。
1.了解產品目標
設計師首先要熟悉自己所服務的產品。核心業務是做什麼的，提供怎樣的服務，為哪一類人群服務等，了解清楚了才能對標到品牌設計的層面上。
2.了解產品發展方向
設計師不能只關注產品現狀，更要關注產品未來的發展，未來發展趨勢是什麼？現階段的設計目標能不能迎合未來的發展目標？只有掌握了產品的發展方向，那麼品牌設計就不會盲目。
3.了解競品在做什麼
做品牌設計，我們需要足夠的了解市場上的競品，觀察同行們是怎麼做的，跟競品的差異是什麼，我們的優勢是什麼，有哪些是值得我們學習的。
通過對競品的調研分析，可以讓我們更準確的找准產品在市場中的定位，在品牌設計包裝上找到更能突顯自己優勢的風格路線，這樣才能在眾多的競品中脫穎而出。
- 賦予個性-
在了解產品背景後，接下來設計師就需要考慮如何賦予產品品牌個性了。單純logo上來說，不足以形成一個品牌，它只是品牌視覺識別的一部分，品牌是一個整體的印象，包括品牌帶來的價值，提供的服務等。
品牌不單單以標誌的形式存在於用戶的心裡，它是在與用戶的情感交流過程中逐漸形成他的個性。
品牌個性留給用戶很重要的一點就是品牌印象，他可以是一個調皮有趣的品牌，可是是充滿魅力時尚的品牌，也可以是活力向上的品牌，一個產品有他的品牌個性，才會帶來一批忠實的擁護者，才會被用戶所推崇。
有料短視頻初期的產品定位是一個搞笑逗趣的短視頻平台，定位以年輕男性用戶為主，選取了香蕉作為主元素，從logo到整體UI風格設計上都透露出一種壞笑小污蕉的氣質，與產品定位的輕鬆、內涵、搞笑的調性一拍即合。
- 品牌設計-
考慮好產品的品牌個性之後，接下來是設計師的重點工作——品牌的露出設計。品牌的露出元素非常多，這裡列舉一些基本的設計元素展開講解。
-01-
品牌LOGO部分
一款產品從下載到安裝，用戶首先接觸的就是Logo，也就是桌面圖標。Logo是整個產品品牌的縮影，他的圖形、色調給用戶的第一映像很重要，甚至決定了整個品牌調性。在產品雲集的商店市場里，一個有吸引力的logo更能觸動用戶去下載它。
以下是自己總結的五個設計Logo的方法套路，大家在看自己手機裡面的桌面圖標時，留意下Logo的設計，基本是可以運用了這些設計方法的。
套路1：使用產品的基本屬性作為元素
每個產品都有他的行業屬性，設計可以從產品屬性里提煉出最能代表這個品牌的基礎圖形作為LOGO設計的核心元素。
拿ofo共享單車舉例，他的基本屬性就是騎單車，從它的Logo設計上就能很直觀的表現出騎單車的形象。
使用產品屬性的基礎元素設計LOGO的好處就是，能直觀的了解到這個產品是幹什麼的，增強產品的識別性。
套路2：使用吉祥物、動物作為元素
在中國設計領域裡，我們對吉祥物一直都情有獨鍾。古人創造的龍、鳳、麒麟等吉祥怪獸，賦予了這些怪獸們吉祥的寓意。
在旅遊行業的產品中甚至可以組一個動物園了。如飛豬的豬、攜程的海豚，去哪兒的駱駝等。
吉祥物元素LOGO的設計難點在於挖掘他的品牌內涵，品牌不能憑空造出一隻吉祥物，而是通過吉祥物賦予這個品牌帶來的價值、精神。
拿手機迅雷的Logo舉例，Logo形象是一直極簡的蜂鳥，它是地球上體積最小的鳥，但動作卻十分敏捷，速度極快，寓意迅雷有速度，夠智能，為打造速度最快的下載工具而不懈的企業文化。
套路3：使用圖形構成元素
Logo可以是由基本的幾何圖形構成的，如點、線、面或者圓形、三角形、方形等等，每一種圖形都有能傳達不同的形態感覺。
如三角形的穩重藝術化，圓形的簡約時尚，方形的端正等。
拿有料短視頻這個例子，升級後當時定位的是年輕人的音樂短視頻社區平台，提取的品牌關鍵信息點就是 音樂、律動、節奏，通過選取五個長短變化的圓角矩形作為基本元素，組合成為一個律動感強烈的音階logo。
套路4：使用字母或者文字為基本元素
文字也是一種符號化的視覺元素，它表達的意思更純粹，使用圖形圖案來設計logo，需要用戶拐個彎去理解他的含義，而使用文字來設計logo，能讓用戶更容易理解和記住這個品牌。
文字logo可以是中文也可以是英文，甚至是標點符號，用中文更加符合國人對漢字的閱讀習慣。英文logo則看起來更加的國際化和簡潔。
套路5：使用擬人化手法
通過給圖形添加眼睛、嘴巴、手腳等元素，再通過表情的變化，可以使整個圖形擬人化，變得有親和力，給用戶帶來情感上的共鳴，同時也容易傳播記憶。
比如陌陌的logo設計，加上眼睛後對話氣泡與定點陣圖標組成了一個簡潔可愛擬人的形象，代表著陌陌是一個基於地理位置的社交平台產品，而通過眼睛的設計，代表著陌陌的用戶對於世界永遠充滿好奇、樂於探索，享受和發現身邊精彩的一切。
_________________________________________
logo設計案例分享
有料短視頻在品牌探索的道路上經歷了好幾次改版，第一個版本logo是個擬人化的香蕉，邪惡的笑容加墨鏡的形象設計，很符合當時搞笑、內涵的短視頻聚集地的定位。
在第二個版本的LOGO升級上，純潔的我們拋棄了原來具有風險的設計元素，設計上結合了emoji的搞怪表情和吃豆人里的小怪形象，通過大眾熟悉的形象來設計LOGO，能降低用戶對品牌的認知門檻。圓腦袋加上萌賤小豆眼，也符合當時趣味短視頻的產品定位。
第三次內容轉型的品牌升級，有料短視頻的產品定位整個做了調整，拋棄了之前逗趣惡搞的短視頻內容，轉型為年輕潮酷的音樂短視頻社區。
在新品牌LOGO的設計上，用了最簡單的幾何圖形，構成了一個律動的音律符號，同時呈現出一個舞動嘻哈的手勢表現音樂短視頻的元素。
第四個版本的有料在產品整體設計風格上全面升級，最大變化就是主界面深色改成白色，LOGO也做了相應的調整，顏色更加年輕活力，傳達青春有顏值的社區概念。
-02-
品牌字體設計部分
好的logo需要搭配好的品牌字體設計，如果直接使用電腦字型檔的話會給人感覺品牌有點隨意，缺乏創新。
品牌字體設計的氣質能傳達出品牌的內涵和價值，在品牌視覺識別中是至關重要的一環。APP產品更多的是在手機或者電腦屏幕上瀏覽，字體設計要以易讀，易識別為基準，其次才去考慮設計樣式和風格。
套路1：帶產品屬性的元素表現手法
在設計品牌字體的時候，適當的加上產品屬性相關的元素，比如視頻類的產品,在字體設計時可以加上播放，影視類等符號元素，可以增強品牌屬性識別度。設計上要注意元素搭配，強行關聯的話反而會讓人不理解。
秒拍的字體設計巧妙的簡化了秒字的禾字旁，在拍字一橫筆畫上用拍攝鏡頭代替，很好的辨認出是個以拍攝為基本屬性的產品。
知乎二字看似設計的平淡，仔細看亮點在於知字的口處理上，融合了對話框的設計，傳達出知乎是個分享交流見解的產品屬性。
套路2：局部筆畫修飾法
筆畫修飾法就是在設計字體的基礎上，對筆畫的局部細節進行修飾，比如所有每一筆的筆畫末端，加上圓角，或者斜角。
圓角可以體現出圓潤的風格特點，字體看起來親和力較強；斜角看起來硬朗有速度感，展現一種向前沖的姿態；也可以是圓角、直角相結合等。
不管以怎樣的方式修飾品牌字體，前提是他跟品牌的調性是一致的。
騰訊新出的品牌字體最大特點就是8°傾斜以及添加了筆畫斜角處理，
姿態自帶速度感與動感，體現了騰訊品牌不斷向上，不斷追求科技潮流的精神。
火山小視頻在字體的筆畫上做了統一的半圓角處理，從logo上提取的火焰元素巧妙結合。
套路3:筆斷意連，筆畫公用法
這種方法主要看字與字之間的筆畫聯繫，比如一個字的筆畫收尾與另一個字的筆畫有呼應的時候，可以嘗試結合起來，可以是字與字之間的聯繫，也可以是筆畫與筆畫之間的聯繫；當文字的筆畫較複雜，不影響整體識別度的情況下，可以適當減少筆畫，與其他筆畫公用一筆，可以很好的簡化的字形。
「哈」與「你」字、「直」與」播「字筆斷意連，手寫風俏皮可愛。直播的直字很好的結合了短視頻三角播放圖標，與品牌屬性很好的融合。
網易遊戲字與字之間有前後呼應，首位連接流暢，字體粗細度上與logo的火焰指紋保持統一，非常整體。
最右的字體設計巧妙的把最字頂的日簡化，與「取」字相連，公用了一橫，簡化了兩橫卻不影響文字識別度。
_________________________________________
字體設計案例分享
有料短視頻中的字體設計，同樣是筆畫修飾的法，對筆畫進行打磨，從而設計出符合產品氣質、調性的的字體。
左圖是第二版本的有料，設計上比較圓潤和俏皮風格為主，整體趣味性強，符合有料搞笑輕鬆的短視頻定位。
右圖為有料在轉型為音樂短視頻階段的LOGO，定位的是潮、酷的音樂短視頻社區，所以字體重點往更現代，更時尚更符合新產品形態的字體設計。
-03-
品牌卡通形象設計部分
卡通形象是品牌很重要的一個視覺傳達元素，他是整個品牌的代言人，即使沒有logo出現的地方，看到卡通形象也能很好的把品牌聯繫在一起，能為品牌宣傳加把火。
天貓結合漢字「天」字，和supermall里mall的諧音「貓」，一雙大大的智慧之眼，寓意著天貓認真挑選每一樣好商品，用最好服務來滿足大家需求，每一年的雙十一，都很好的結合貓頭的外輪轂做包裝，在運營推廣上不斷的給用戶洗腦了整個貓頭這個視覺，讓人記憶深刻。
套路1：從產品LOGO 中提取
從logo中提取元素設計卡通形象是最普遍的做法，若logo直接就是卡通形象，那產品里的品牌露出都可以用統一的形象，加強整個產品的品牌關聯度。比如美團外賣的袋鼠，映兔的兔子等等。
美團外賣的logo以袋鼠作為卡通形象，在品牌整體包裝上把袋鼠形象貫穿到整個品牌，從logo到界面UI，從線上到線下宣傳都把袋鼠融進產品設計里，整體品牌識別很強。
如果logo本身不是吉祥物，那麼就需要去思考怎樣去從logo或品牌中衍生一個吉祥物。比如小紅書諧音來的「小紅薯」，又或者「in圖片分享社區」通過logo英文字母in，提取了首字母i作為原型，加上手腳與五官，衍生出一個鮮活可愛的卡通形象。
套路2：從品牌定位中挖掘
每個產品都有他的核心定位，從定位出發挖掘出的卡通形象可以更加的符合產品的調性，更好的和產品目標用戶相匹配。
比如嗶哩嗶哩，定位的是二次元聚集地的動畫視頻社區，主打喜愛動漫、二次元的年輕用戶，APP里的卡通形象2233娘就是兩個二次元虛擬角色，強化了整個品牌的定位，更迎合了用戶的口味。
________________________________________
卡通形象設計案例分享
有料第二版本的卡通形象來自於logo，設計上基本形態不變，配合運營活動做相關的動作、表情變化，呈現出一個性格活潑有趣的形象。
轉型音樂短視頻後的有料，卡通形象取自於logo中的圓角矩形元素，通過三種不同顏色演變出3個性格不同的卡通形象，分別代表著有料不同類型KOL用戶，從而拉近了產品與用戶的距離。
-04-
輔助圖形設計部分
輔助圖形是品牌不可或缺的一部分，他可以增加用戶對品牌的好感度，烘托品牌形象的訴求，為品牌傳遞價值。
輔助圖形還能彌補基礎要素的設計運用不足，尤其在對外宣傳中的使用，比如印刷品，延展的周邊產品等，可以豐富品牌的整體印象，強化品牌形象。
套路1：從logo中提煉圖形
從logo元素出發，通過角度和大小間距的變化，提煉出具有一定規律的圖形，這個圖形是能給為品牌帶來內涵和意義的，而不是憑空出現的，將logo圖形元素組合為有節奏和韻律的圖案作為產品的裝飾，兼具美感和品牌效應。
菜鳥輔助圖形是logo中A和I組合成的連續向上的圖形，體現了物流行業的流動性，讓品牌無論在線上還是傳統媒體都能體現「流通」這個概念。
網易嚴選輔助圖形用了品牌logo字體的筆畫拆分重組，形成一個有品質感的圖案，體現了品牌精雕細琢，對產品服務的的無限追求。
在個人中心上輔助圖形的外露
套路2：結合產品功能、服務組合出圖形
每個產品都有他的基本功能或者服務，輔助圖形可以從中挖掘中跟產品功能服務等相匹配的圖形，通過把這些圖形進行有規律的組合排列，形成品牌獨一無二的輔助圖形。
比如小米的米粉卡，用米粉卡可以豐富你的生活，衣食住行都可以通過米粉卡來實現，背景設計上選取了各種生活相關的元素，平鋪出一張精美的背景。
小米米粉卡
58的轉轉和美團外賣輔助圖形外露
套路3：運用完整的logo外形
即把logo放大來運用，可以線描，填色塊，使其圖案化，logo本身就是一個設計過的精美圖案，通過對logo進行處理可以美化品牌的傳播。
網商銀行啟動頁輔助圖形
_________________________________________
輔助圖形設計案例分享
有料短視頻的輔助圖形設計採用的是很多小元素組成的圖案，有音樂圖標、播放圖標、波動的音頻，節拍符合等元素，傳達出一種年輕，有活力的品牌調性，跟產品的定位的音短視頻是緊密聯繫在一起的。
-05-
啟動頁設計部分
APP首次啟動的時候都需要載入一個過程，為了讓用戶減少等待的時間成本，都會加上啟動頁去做載入等待，所以啟動頁是最佳展示品牌的機會。
大多數的啟動頁的做法都是品牌logo加slogan的結構，當然還有更多的展現方式，比如logo加大背景，logo加輔助圖形，logo加視頻背景等等。
展現形式可以很多種，核心是品牌能不能很好的傳遞讓給用戶，給用戶留下品牌印象，尤其是產品剛開始萌芽的最初階段，
品牌的曝光度更需要加強，以達到建立用戶認知的目的。
logo加slogan的排版結構
logo加背景圖、視頻的排版結構
_________________________________________
啟動頁設計案例分享
有料各個版本的啟動頁設計，初期的前兩個版本都強調logo圖形與品牌名稱，轉型音樂短視頻的第三個版本強調有料潮酷的社區概念，對slogan進行了字體設計，強化品牌訴求，第四個版本在於強調品牌與內容的升級，往更年輕方向發展，所以啟動頁上以卡通形象設計為主。
-06-
預設頁設計部分
預設頁也叫空頁面，主要是用戶在產品操作過程中存在異常的反饋，比如沒有內容，網路不好，斷開網路等，精心設計好的預設頁可以達到傳播品牌的目的，更重要的是可以指引用戶下一步該怎麼做，可以很好的安撫用戶遇到界面異常的心理情緒，降低給用戶帶來的困擾。
預設頁通常的做法就是產品的品牌卡通形象加文字描述，如果沒有卡通形象，可以是跟頁面引導相關的元素做設計，可以使用大家比較熟悉有認知的圖形元素，如斷網狀態可使用WiFi圖形，載入狀態的時間漏斗等。
淘票票的預設頁設計上使用了logo的卡通形象，
從圖形和色調上都跟logo產生很好的關聯在一起。
愛彼迎的預設頁雖然沒有卡通形象，但是用了一套簡筆插畫風格，比較有趣味性。甚至插入了動畫的預設頁，引導性很強。
愛彼迎的動效載入頁
_________________________________________
預設頁設計案例分享
第一版本的有料用了香蕉人的形象作為預設頁，形象延展運用上走的是逗趣搞笑的風格。
升級版本的預設用了有料活潑可愛的形象去貫穿整個產品設計。
-07-
下拉刷新loading設計
下拉刷新和loading控制項主要是一個載入的狀態，app產品自帶的控制項一般是轉菊花，對用戶來說常規的東西帶來的體驗感覺會比較枯燥，好的下拉刷新和loading動效設計可以給品牌加分，同時體現了產品個性化的一面，
最主要的是解決了用戶等待過程中的體驗問題。
套路1：使用logo作為設計元素
可以在logo的基礎圖形上做動效設計，比如在logo圖形上做旋轉，顏色變化，變形等。
nice的下拉刷新設計
Snapchat的下拉刷新設計
套路2：使用品牌卡通形象
運用卡通形象可以很好的增加產品的趣味性與故事性，讓用戶更願意刷當前界面消費內容。
in的下拉刷新設計
美團的load載入頁
套路3：使用品牌的輔助圖形
輔助圖形運用在下拉刷新上，可以提高了品牌輔助圖形的曝光度，也給產品增加點特色。
菜鳥的loading載入設計
-08-
UI圖標風格
產品界面上每個元素都決定了這個品牌是怎樣的調性，圖標設計樣式上有線描的，圓潤的，卡通風格的等等，圖標設計原則首先是識別度高，其實是才是風格的統一性，圖標呈現出來的風格與產品傳達出來的內容調性應該是相呼應的。
________________________________________
圖標設計案例分享
有料改版後的圓潤圖標風格
-09-
頭像、佔位符、播放器界面等
產品界面還有很多容易忽略的UI元素，比如頭像、佔位符、播放界面等，這些元素也構成了品牌給用戶的映像，可以根據品牌的性格特點去設計這些UI元素，比如嗶哩嗶哩，二次元為主的視頻社區，他的播放界面、視頻封面佔位符、默認頭像等都經過設計，跟整個產品的調性是緊密關聯的。
-10-
線下推廣物料設計
線下推廣的物料設計應用比較廣，常用的比如手提袋，易拉寶，名片信封賀卡、T恤等等物料，這些物料的設計核心是規範好品牌常用元素的展現，
大小用色等等，設計師需要嚴格遵守基礎圖形、輔助圖形的使用規則，卡通形象以及品牌色彩的規範運用。
有料的線下物料設計，整體設計元素都離不開輔助圖形的運用，統一使用品牌感會更強。
-11-
統一的運營活動風格
最後說一下品牌的運營方面的設計，既然是一個品牌，那麼運營風格就應該有屬於該品牌調性的設計規範，顏色的定義，常用元素漏出，字體的設計，排版結構等等都需要統一去規範，只有形成統一的運營風格，才能保證品牌對外傳播的一致性。對運營設計套路可以翻閱在MID研習社我以前分享的文章。
抖音早期的運營風格：酷炫、抖動、音樂
小黃車運營風格：大黃色、活潑年輕
2017雙十一運營風格：綻放、張開雙臂、色彩氛圍感強
_________________________________________
有料運營設計案例分享
有料早期的運營設計風格規範：統一常用色調、左右或者居中結構、有趣的字體，氛圍點綴。
有料升級後的運營設計風格規範：鮮明的色調、左右或者居中結構、有趣的字體，氛圍點綴
最後
APP的品牌設計是一個漫長的打造過程，需要時間的沉澱，設計師需要對設計有一個堅持的心態才能把品牌搭建好。
以上總結的只是自己的心得與方法論，
每一條都可以有很深入的探討，這裡只是一個拋磚引玉，感謝閱讀~^_^
MID研習設
「Skr一下我們嘛~」
TAG:MID研習設 |