2020-11-25 周周
今天分享的題目是從品牌到UI,用設(shè)計(jì)的思想與這個(gè)世界和解;這里的我說的和解比較寬泛,大家可以理解成與客戶和解,也可與產(chǎn)品經(jīng)理和解,也可以是與自己和解;
為什么選這個(gè)主題呢,原因是之前在網(wǎng)上聽一群人總是說互聯(lián)網(wǎng)走到了下半場,我和好奇,就去查這個(gè)下半場到底是什么,后來總算知道了,互聯(lián)網(wǎng)行業(yè)走到現(xiàn)在,已經(jīng)從增量時(shí)代轉(zhuǎn)為存量時(shí)代,這個(gè)存量時(shí)代就是下半場,人口、流量、資本的紅利都逐漸收緊。
在這種情況下我的產(chǎn)品如何從同類產(chǎn)品中脫穎而出,或許增加品牌屬性是種方法,希望大家在聽完這個(gè)分享后,會(huì)有一些啟發(fā)。
在互聯(lián)網(wǎng)的增量時(shí)代,品牌設(shè)計(jì)與UI設(shè)計(jì)是兩條平行線,幾乎沒有交集,你做你的畫冊、slogan、包裝,我做我的網(wǎng)站、app、微信小程序,偶爾互相模仿,但也不是主流,畢竟兩者載體不同,目的不同,用戶也不同;
但是到了存量時(shí)代,影響用戶選擇的一個(gè)重要因素是「品牌」,一個(gè)產(chǎn)品要想從同類產(chǎn)品中區(qū)別出來,需要有個(gè)性,UI+品牌成為產(chǎn)品生命周期中重要的一環(huán),下面我們看看如何在用戶心中植入產(chǎn)品品牌;
在在品牌植入方便,國外很多產(chǎn)品已經(jīng)走在了我們前面,我們來看看谷歌,谷歌開發(fā)者大會(huì)上對 Material( Design做了更新,我印象特別深刻的是Google對圖形語言單獨(dú)拿出來做一個(gè)模塊解釋它,它提取了圓形作為視覺DNA,并沿用到產(chǎn)品的每一個(gè)控件;
當(dāng)然,如果我們想傳達(dá)我們產(chǎn)品的品牌理念,只在圖標(biāo)組件里運(yùn)用是遠(yuǎn)遠(yuǎn)不夠的。
誕生于1886年的可口可樂,每年都做產(chǎn)品運(yùn)營推廣,不斷大量的重復(fù)它logo的弧線元素和瓶子的外形;
還有剛剛過去的雙11,從2012年11月11日開始的天貓節(jié),現(xiàn)在是全球最大的B2C平臺(tái),天貓貓頭運(yùn)用也是滲透到全產(chǎn)品線里面去了,問大家個(gè)問題,大家有沒有人知道這個(gè)貓頭品牌是誰創(chuàng)立的?其實(shí)就是馬云的繼任者,現(xiàn)任阿里巴巴集團(tuán)董事局主席張勇;講的有點(diǎn)遠(yuǎn)了,我們再回到我們的主題;
這個(gè)圖很好的解釋了品牌與產(chǎn)品與用戶的關(guān)系,產(chǎn)品需要品牌牽引、支撐,現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品越來越趨于同質(zhì)化,UI 設(shè)計(jì)師已經(jīng)不能局限于界面的表現(xiàn)層,更要了解產(chǎn)品背后的邏輯,然后以業(yè)務(wù)為依據(jù)設(shè)計(jì)品牌,以品牌為基準(zhǔn)去設(shè)計(jì)產(chǎn)品。
第一章意義Significance,這個(gè)章節(jié)我們講講從品牌到UI的意義
第一個(gè)意義是對內(nèi):可以規(guī)范統(tǒng)一,協(xié)作
品牌本身就可以作為設(shè)計(jì)規(guī)范的一個(gè)重要指導(dǎo)原則,通過對配色、文字、圖標(biāo)、控件等建立設(shè)計(jì)規(guī)范,可以有效減少設(shè)計(jì)決策時(shí)間,傳達(dá)一致的品牌調(diào)性。
第二個(gè)意義是對外:可以提高認(rèn)知,溢價(jià)增值
如果一個(gè)產(chǎn)品失去了個(gè)性,不看 logo,單純看界面的話,很多時(shí)候根本分不清是到底是哪一家公司的產(chǎn)品。如果能夠關(guān)注設(shè)計(jì)細(xì)節(jié)對品牌的影響,肯定能更好地提高用戶對產(chǎn)品的認(rèn)知,當(dāng)你對一件產(chǎn)品注入了感情,同時(shí)也就為產(chǎn)品提供了營銷推廣的立足點(diǎn);也可以這么說,設(shè)計(jì)師創(chuàng)造的情感性價(jià)值,直接實(shí)現(xiàn)了產(chǎn)品的溢價(jià)增值;
第二章感知Perception
有位設(shè)計(jì)界的前輩講過,品牌知名度其實(shí)就是信任度的體現(xiàn),他說世界上最成功的品牌就是宗教,這里沒有詆毀任何宗教的意思,但是宗教建立的品牌信任度,遠(yuǎn)遠(yuǎn)超過了任何商品;
這里我們從用戶的角度出發(fā),看下用戶是如何從產(chǎn)品感知品牌的;
在設(shè)計(jì)產(chǎn)品的時(shí)候常常會(huì)發(fā)現(xiàn)我們覺得理所當(dāng)然的地方,用戶往往沒按我們想的方式去使用。那是因?yàn)樵O(shè)計(jì)師通常有整體觀,站在金字塔頂端去規(guī)劃一個(gè)產(chǎn)品的設(shè)計(jì),而用戶則恰恰相反,在金字塔底端往上爬,他們不知道這個(gè)金字塔多高,也不知道從哪一面開始最好爬,所以會(huì)遇到各種問題。
同樣,用戶對品牌的感知由低向高的,用戶通過各種場景接觸到產(chǎn)品,再通過產(chǎn)品的視覺呈現(xiàn)、功能體驗(yàn)、信息內(nèi)容等感知品牌,最后在心中形成印象,構(gòu)建品牌信念,從而影響下次產(chǎn)生相應(yīng)需求時(shí)對產(chǎn)品的選擇;
可以聯(lián)想下我們的購物體驗(yàn),是不是總是從同一個(gè)地方shopping,這就是購物APP品牌價(jià)值已經(jīng)使你已經(jīng)形成了習(xí)慣選擇;
作為設(shè)計(jì)師,我們需要充分理解品牌內(nèi)核,由內(nèi)向外將抽象的品牌內(nèi)核轉(zhuǎn)化為具象的視覺符號(hào),再延伸到用戶與產(chǎn)品的各個(gè)接觸點(diǎn),從而將品牌理念植入用戶內(nèi)心。
第三章融合Integration既然上面我們講品牌和UI最終要走的一起,這一章我們講他們?nèi)绾卧诠ぷ魅诤?/span>
第一步,明確定位,提取關(guān)鍵詞,建立情緒板
當(dāng)代廣告教皇,美國奧美廣告創(chuàng)始人大衛(wèi).奧格威說,“最重要的決定是如何定位你的產(chǎn)品?!?/span>
在大師的指引下,我們發(fā)現(xiàn)首先找到品牌定位,定位自己的細(xì)分市場和目標(biāo)用戶;
2.圍繞品牌定位提取關(guān)鍵詞;
3.建立情緒版,將抽象的概念轉(zhuǎn)化為可感知的視覺;
第二步,提取視覺表現(xiàn)元素,并設(shè)計(jì)融入品牌定位。我們重點(diǎn)從顏色、圖形、紋理、字體四個(gè)方面講一下。
有時(shí)甚至不需要任何圖形,單憑顏色就能產(chǎn)生對某一事物的聯(lián)想。
現(xiàn)在UI設(shè)計(jì)流行的極簡風(fēng),我們發(fā)現(xiàn)這些應(yīng)用采用極簡化設(shè)計(jì)的同時(shí),圖標(biāo)也變得更鮮艷,更引人注目,說明這些產(chǎn)品也在尋求一個(gè)平衡,在 UI 設(shè)計(jì)變得極簡趨同的同時(shí),仍然能保留核心的品牌基因。
顏色在 UI 中的表現(xiàn)有 logo、導(dǎo)航欄底色、圖標(biāo)、文字、可視化圖表、插圖、按鈕等等。
現(xiàn)在UI設(shè)計(jì)流行的極簡風(fēng),我們發(fā)現(xiàn)這些應(yīng)用采用極簡化設(shè)計(jì)的同時(shí),圖標(biāo)也變得更鮮艷,更引人注目,說明這些產(chǎn)品也在尋求一個(gè)平衡,在 UI 設(shè)計(jì)變得極簡趨同的同時(shí),仍然能保留核心的品牌基因。
圖形
我們知道顏色是抽象感知,圖形是相對具象的表現(xiàn)方式。
一旦某個(gè)特有的圖形在用戶心中形成烙印,用戶見到相似的圖形組合都能往該圖形聯(lián)想,從而關(guān)系到圖形背后所代表的品牌,這也是很多企業(yè)做品牌升級的時(shí)候 logo 都越來越簡潔的原因,因?yàn)檫@樣能有效降低用戶的認(rèn)知負(fù)擔(dān),提高品牌認(rèn)知。
圖形通常從 logo 本身提取,并在 UI 中延伸應(yīng)用。比如馬蜂窩、百度網(wǎng)盤、京東做品牌升級的時(shí)候都不約而同地從 logo 中提取了一個(gè)代表微笑的弧度,傳遞友好、溫暖的品牌形象。
飛豬提取了 logo 中「豬的發(fā)型」用于搜索框,韓國的電商品牌11街也將 logo 延長作為界面中的搜索框。
紋理
在 UI 設(shè)計(jì)或者運(yùn)營推廣運(yùn)用中,通過提取品牌圖形元素,再運(yùn)用分形、排列、重復(fù)、平鋪等設(shè)計(jì)手法形成品牌紋理。
我們看看京東的啟動(dòng)頁用 Joy 的外形旋轉(zhuǎn)做成的紋理背景;
國外著名的聊天應(yīng)用 Whatsapp,在聊天頁的背景用涂鴉插圖紋理做背景;
還有騰訊文檔的啟動(dòng)頁、登錄頁用了漸變的菱形作為紋理,輔助品牌的視覺表現(xiàn)。
我們還在聊圖形復(fù)制變形的時(shí)候,國外的UI設(shè)計(jì)已經(jīng)細(xì)化到了十分驚人的程度
例如UBER 在做的品牌升級,設(shè)計(jì)師出來將每個(gè)國家富有代表性的圖形提煉, 然后重復(fù)運(yùn)?平鋪,形成帶有地域特色的?何紋理,運(yùn)?到閃屏和線上線下的產(chǎn)品當(dāng)中。
字體
字體是最容易被忽視的設(shè)計(jì)元素,很多人會(huì)認(rèn)為 UI 中的字體用系統(tǒng)默認(rèn)的就行。其實(shí)字體對于產(chǎn)品氣質(zhì)的體現(xiàn)著很大的作用,很多品牌都把字體設(shè)計(jì)當(dāng)成品牌基因中重要一部分。
字體的選擇需要契合產(chǎn)品功能特點(diǎn)與品牌調(diào)性。
微信讀書使用了方正宋三,讓人閱讀起來有種文字秀麗的浸入感;每日故宮使用了方正清刻悅宋體,字里行間隱含著歷史古韻,滲透著文化氣息;澎湃新聞使用方正準(zhǔn)雅宋體,體現(xiàn)其作為新聞產(chǎn)品「專注時(shí)政與思想」的嚴(yán)肅一面。
英文字體也可以使用契合產(chǎn)品氣質(zhì)的英文字體。比如常被用作數(shù)字字體的 Din、經(jīng)典的襯線字體 Playfair Display、?歌御用的 Roboto 等。
第三步,融入品牌觸點(diǎn)
這里我解釋下品牌觸點(diǎn)這概念,是指一款產(chǎn)品中品牌信息接觸點(diǎn),是決定用戶對產(chǎn)品品牌印象的關(guān)鍵;
我們看幾個(gè)案例,
啟動(dòng)頁:知乎的啟動(dòng)頁采用 slogan 加 logo 的方式來體現(xiàn)品牌,這也是絕大多數(shù)應(yīng)用的做法;每日故宮啟動(dòng)的時(shí)候伴隨著一聲鐘聲,頁面會(huì)有一個(gè)光線流動(dòng)的動(dòng)畫,極具儀式感,一下子就把用戶帶入故宮莊嚴(yán)的氛圍當(dāng)中。
圖標(biāo):東家的每一個(gè)圖標(biāo)都融入了印刷式字體的元素,體現(xiàn)其匠人的品牌基因;mono 則直接把產(chǎn)品名稱「 M O N O」用于導(dǎo)航欄。
插圖:Dropbox 的兒童風(fēng)格的插畫與 B站 的二次元插畫都非常契合品牌特征。
品牌觸點(diǎn)式多樣的,除了上面的啟動(dòng)頁、圖標(biāo)、插圖之外,還有預(yù)加載圖、loading、動(dòng)效、新手引導(dǎo)等等都能體現(xiàn)品牌觸點(diǎn),這些品牌觸點(diǎn),都是講述品牌故事的關(guān)鍵載體,幫助產(chǎn)品從同行業(yè)中脫穎而出,這里由于時(shí)間的關(guān)系我們就不展開講了,有興趣的同學(xué),我們可以單獨(dú)交流哦
互聯(lián)網(wǎng)行業(yè)已經(jīng)過了拓荒時(shí)代,行業(yè)沉淀下了許多有價(jià)值的知識(shí),也有許多非常好的 UI 組件和規(guī)范文檔可以直接使用;
另一方面,很多公司對于 UI 設(shè)計(jì)在整個(gè)產(chǎn)品生命周期中的價(jià)值,普遍覺得不是非常重要,UI 設(shè)計(jì)部門只是一個(gè)業(yè)務(wù)支持部門,起不到主導(dǎo)作用。而如果 UI 設(shè)計(jì)師做的工作還是停留在把產(chǎn)品的原型文檔變漂亮,肯定是不行了。
設(shè)計(jì)師不僅需要對產(chǎn)品業(yè)務(wù)和商業(yè)有深入了解,更重要的是對于品牌在整個(gè)產(chǎn)品鏈路中的應(yīng)用與把控。
我們需要走出舒適圈,主動(dòng)去挖掘更深層次的設(shè)計(jì)價(jià)值,提升自我價(jià)值。
誠然改變一個(gè)大的設(shè)計(jì)生存環(huán)境是非常漫長的過程。要不停的嘗試,就像不停的迭代做新產(chǎn)品一樣,不能因?yàn)橐粌纱蔚氖〈蛳粼O(shè)計(jì)的積極性。
設(shè)計(jì)的終極最后就是和解 Compromise
開篇我提到了與世界和解,分享下我是怎么和這個(gè)世界和解的,我相信三句話,可以跟這個(gè)世界和解
再次謝謝大家聽我叨叨,如果大家喜歡,下次我們可以叨叨點(diǎn)關(guān)于設(shè)計(jì)的更有意思的事,謝謝
文章來源:tob.design 作者:無名大師29aef85c40
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com