UI品牌設(shè)計(jì)怎么落地
品牌在UI設(shè)計(jì)中的色彩,圖形,插畫,字體,圖標(biāo)五個(gè)維度到底怎么落地,如何成功打造一個(gè)UI的品牌,今天一同學(xué)習(xí)。
品牌ui是什么
首先大家要注意到,我們平時(shí)書寫中的UI正確的寫法應(yīng)該都是大寫,UI是User Interface的縮寫。
品牌VI跟UI只有一個(gè)字母的差別,且看起來十分相似。
UI即User Interface(用戶界面)的簡稱。泛指用戶的操作界面,包含移動(dòng)APP,網(wǎng)頁,智能穿戴設(shè)備等。上海vi設(shè)計(jì)公司的小編說UI設(shè)計(jì)主要指界面的樣式,美觀程度。而使用上,對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)則是同樣重要的另一個(gè)門道。好的UI不僅是讓軟件變得有個(gè)性有品味,還要讓軟件的操作變得舒適、簡單、自由,充分體現(xiàn)軟件的定位和特點(diǎn)。UI還有其它的意義,如Unit Interval,Univ of Iowa,Unlock Ins
VI即(Visual Identity),通譯為視覺識(shí)別系統(tǒng),是CIS系統(tǒng)最具傳播力和感染力的部分。是將CI的非可視內(nèi)容轉(zhuǎn)化為靜態(tài)的視覺識(shí)別符號(hào),以無比豐富的多樣的應(yīng)用形式,在最為廣泛的層面上,進(jìn)行最直接的傳播。設(shè)計(jì)到位、實(shí)施科學(xué)的視覺識(shí)別系統(tǒng),是傳播企業(yè)經(jīng)營理念、建立企業(yè)知名度、塑造企業(yè)形象的快速便捷之途。 在品牌營銷的今天,沒有上海vi設(shè)計(jì)公司對(duì)于一個(gè)現(xiàn)代企業(yè)來說,就意味著它的形象將淹沒于商海之中,讓人辨別不清;就意味著它是一個(gè)缺少靈魂的賺錢機(jī)器;就意味著它的產(chǎn)品與服務(wù)毫無個(gè)性,消費(fèi)者對(duì)它毫無眷戀;就意味著團(tuán)隊(duì)的渙散和低落的士氣。
VI設(shè)計(jì)一般包括基礎(chǔ)部分和應(yīng)用部分兩大內(nèi)容。其中,基礎(chǔ)部分一般包括:企業(yè)的名稱、標(biāo)志設(shè)計(jì)、標(biāo)識(shí)、標(biāo)準(zhǔn)字體、標(biāo)準(zhǔn)色、輔助圖形、標(biāo)準(zhǔn)印刷字體、禁用規(guī)則等等;而應(yīng)用部分則一般包括:標(biāo)牌旗幟、辦公用品、公關(guān)用品、環(huán)境設(shè)計(jì)、辦公服裝、專用車輛等等。更多關(guān)于素馬品牌VI設(shè)計(jì)報(bào)價(jià)方案,請?jiān)L問《Behance & Dribbble上的品牌設(shè)計(jì)師巧妙包裝logo標(biāo)志作品》。
UI設(shè)計(jì)和VI設(shè)計(jì),兩種設(shè)計(jì)的工作屬性不同。UI設(shè)計(jì)中,平面設(shè)計(jì)工作只是其中的一小部分內(nèi)容,其設(shè)計(jì)工作的主體,還是在軟件交互性設(shè)計(jì)上,軟件交互性設(shè)計(jì),上海vi設(shè)計(jì)公司主要是針對(duì)軟件操作流程提出最優(yōu)方案,屬于應(yīng)用工程設(shè)計(jì),而非平面設(shè)計(jì)。而其中涉及到軟件圖標(biāo)、界面視覺布局等平面設(shè)計(jì)項(xiàng)目,只是整個(gè)交互設(shè)計(jì)工作中的一項(xiàng)。其主要目的,是為用戶提供更具親和力的界面外觀。是服務(wù)于交互性設(shè)計(jì)工作的。VI設(shè)計(jì),則是完全的,且自成系統(tǒng)的平面設(shè)計(jì)工作。其設(shè)計(jì)成果,直接應(yīng)用于客戶的機(jī)構(gòu)或品牌。其設(shè)計(jì)目的,是將所服務(wù)的機(jī)構(gòu)或品牌的相關(guān)視覺要素加以系統(tǒng)化與規(guī)范化,進(jìn)而強(qiáng)化其可識(shí)別性。
價(jià)值百萬的品牌設(shè)計(jì)模型
色彩
色彩毋庸置疑,每年很多產(chǎn)品品牌更新,或者迭代都會(huì)去更新色彩,好的色彩能讓人記憶深刻,平庸色彩只會(huì)讓人忽略,所以在塑造一個(gè)品牌時(shí)候,色彩一定不能土,要讓人記憶猶新。
陳宋品牌顧問
C&S BRAND DESIGN
陳宋品牌顧問前身為陳紹華設(shè)計(jì),由中國著名設(shè)計(jì)大師陳紹華先生創(chuàng)辦于1992年,是中國最早成立的設(shè)計(jì)公司之一。伴隨中國經(jīng)濟(jì)的高速發(fā)展,服務(wù)過華潤、萬科、天虹、中國高鐵、中國華信、三一重工等眾多國內(nèi)外知名品牌與企業(yè),為中國品牌的崛起樹立全新形象,北京申奧設(shè)計(jì)更成為我們作品中的里程碑。
陳宋品牌顧問官方網(wǎng)站主色采用了高亮黃色,給人印象深刻。紅色與深灰的搭配也是經(jīng)典的色彩搭配方案。
色彩一定要和產(chǎn)品目標(biāo)相匹配,如果你的產(chǎn)品是以年輕人為主,比如ins那么你的色彩可以更加飽和度高,更明亮一些,如果你的產(chǎn)品是比較商務(wù)包容性強(qiáng)一些,可以是Facebook的藍(lán)色。
Adobe每年的產(chǎn)品更新迭代,2年更換一次品牌,目的是區(qū)別這些不同的版本,可以發(fā)現(xiàn),每年的更新除了視覺樣式的更新,整體的色彩也進(jìn)行了更新,最新版本的PS顏色更加商務(wù),更加穩(wěn)重,和潘通流行色很貼近!
這些知名公司每年的品牌升級(jí),都會(huì)重點(diǎn)在色彩上去進(jìn)行更新和迭代,一方面占據(jù)用戶心中的品牌色彩,比如微信綠色,支付寶藍(lán)色,美團(tuán)黃色,淘寶橙色,另外一方面也是為了讓品牌更加和戰(zhàn)略貼合更緊密。
2019年最明顯案例應(yīng)該是美團(tuán)黃了,品牌從藍(lán)綠漸變變?yōu)辄S色為主,從品牌LOGO到主頁面都進(jìn)行了品牌色的變化,讓用戶明顯的感知到變化。
之前陌陌升級(jí)新LOGO啟用了紅黃藍(lán)三原色,從冷色到暖色過渡,寓意是通過陌陌的連接,從陌生走向熟悉。眼睛圖案的使用,代表著陌陌用戶對(duì)這個(gè)世界的好奇與探索。多重色彩的設(shè)計(jì),象征著產(chǎn)品視頻化。
所以當(dāng)我們需求去重塑一個(gè)品牌時(shí)候,色彩一定是要優(yōu)先級(jí)很高的去考慮,原因就在于色彩是人最容易感知,也最明顯的感覺,淘寶每一年改版變化最大的就是色彩,從當(dāng)年的扁平化橙色調(diào)整為漸變色,從漸變色到現(xiàn)在版本的白色,每次都是讓用戶感知明顯。
圖形
除了色彩,板式,圖像等優(yōu)化還有一個(gè)很重要的元素就是形狀,這個(gè)很容易被很多設(shè)計(jì)師忽略,其實(shí)圖形也是有情感的。
我們界面中經(jīng)常用到的卡片,按鈕,菜單,圖像的等等都是由形狀組成了,在材料設(shè)計(jì)中也很明顯的強(qiáng)調(diào)了這一點(diǎn),最新的谷歌材料設(shè)計(jì)中,很明確告訴設(shè)計(jì)師我們需要通過形狀來增加品牌的吸引力!
圓形的浮動(dòng)動(dòng)作按鈕和凹陷的底部應(yīng)用導(dǎo)航欄在設(shè)計(jì)中脫穎而出。
選中的卡片,選中效果有一個(gè)彎曲的弧度,來代表它的被選中狀態(tài)。
谷歌材料設(shè)計(jì)官方文檔,https://material.io/design/shape/#components-shape
如果想你的產(chǎn)品在競品中脫穎而出,除了色彩以外,形狀是很好的一個(gè)表達(dá)方式,一致的形狀配合色彩能為品牌帶來很好的記憶點(diǎn)。
不同的圖形,傳遞出來用戶心理感受是完全不一樣的,三角形是充滿活力的和動(dòng)態(tài)的表達(dá),一般和方向關(guān)聯(lián),三角形的圖形會(huì)吸引我們眼睛自動(dòng)的根據(jù)它的位置和方向,不同的三角形給人的視覺感受是完全不一樣的,等邊三角形給人穩(wěn)定平衡的感覺,倒轉(zhuǎn)的三角形給人看起來冒險(xiǎn)并且容易倒緊張的視覺感受!
矩形和圓角是我們最常用的,生活中很多產(chǎn)品也都是這些圖形組成的,手機(jī),電腦,書籍,相機(jī)等等都是矩形組織,矩形形狀和直角給人可靠性和安全感!另外包豪斯建筑風(fēng)格也多是以直角和圓角為主,所以如果你的產(chǎn)品是走安全感和權(quán)威感,用矩形和圓角矩形沒錯(cuò)
圓形和大自然的太陽地球宇宙關(guān)聯(lián)性比較大,橢圓也和宇宙很像,因此圓形給人永恒,未來,神秘的感受,和其它圖形不同的是圓形更加柔和,因此在很多年輕化產(chǎn)品中經(jīng)??梢钥匆妶A形的運(yùn)用。
因?yàn)閳A形沒有終點(diǎn),線條柔和,特別是形狀大屏手機(jī)越來越多,圓形和手機(jī)屏幕適配也更加靈活,在很多運(yùn)動(dòng),年輕,潮流產(chǎn)品設(shè)計(jì)基本都能看見圓形作為主要圖形的運(yùn)用,手淘就是一個(gè)很好的案例,從"淘"字的LOGO提取一個(gè)圓點(diǎn),到界面中圓形符號(hào)等!所以當(dāng)你需要對(duì)你的設(shè)計(jì)進(jìn)行升級(jí)時(shí)候,記住圖形千萬不要忽略。
分形,這個(gè)圖形經(jīng)常在大自然中看見,花朵職位等等,這些圖形會(huì)圍繞一個(gè)圖形進(jìn)行延展變化,非常具有生命力,也經(jīng)常在設(shè)計(jì)中運(yùn)用到,特別在現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品中,給人視覺感受是創(chuàng)造力和新思維的表現(xiàn),在很多科技的發(fā)布會(huì)上都會(huì)運(yùn)用到這些圖形。
蘋果最新的apple pay設(shè)計(jì)的卡面圖案就是運(yùn)用的這種分形的幾何圖形,非常抽象且具有生命力,instagram早上的圖片軟件的logo也是類似的設(shè)計(jì)手法!以及各類型科技發(fā)布會(huì)的海報(bào)設(shè)計(jì),詳細(xì)更多案例歡迎去我的pinterest上查閱!
除了上述圖形之外還有各種各樣的大自然圖形,比如葉子,花朵,動(dòng)物等等,這些圖形經(jīng)常被設(shè)計(jì)師和藝術(shù)家當(dāng)做創(chuàng)意的靈感來源,因?yàn)榇笞匀坏男螤畋硪馇逦?,能讓人和自然?lián)系在一起!作為設(shè)計(jì)師,我們需要去了解這些圖形給人的視覺感受,然后將其運(yùn)用到我們的設(shè)計(jì)中去!
插畫
插畫對(duì)于品牌來說也是非常重要的一個(gè)因素,無論在界面設(shè)計(jì),還是在品牌營銷很多場景我們都需要插畫去營造我們的產(chǎn)品氛圍和氣質(zhì),插畫有助于將我們的品牌故事講述給聽眾聽,所以在構(gòu)建一個(gè)品牌時(shí)候,插畫是非常重要的點(diǎn)之一,但是做之前我們一定要盡量多去了解我們?yōu)榭蛻籼峁┑脑O(shè)計(jì)價(jià)值,只有了解了用戶價(jià)值,才能去定義去特色的故事,幫助產(chǎn)品!
菲安妮
FION
20世紀(jì)七十年代,F(xiàn)ION帶著藝匠的初心,對(duì)時(shí)尚的追求,于1979年正式成立。三十多年來,F(xiàn)ION 對(duì)傳統(tǒng)技藝的堅(jiān)持始終如一 , 繼承香港"第一代皮匠" 的頂尖工藝,成就其一貫的精工品質(zhì)和對(duì)細(xì)節(jié)的考究。 同時(shí),F(xiàn)ION致力于帶給都市女性精致的品質(zhì)生活, 通過藝術(shù)聯(lián)乘與時(shí)尚潮流的碰撞,將藝術(shù)創(chuàng)意融入在FION的產(chǎn)品設(shè)計(jì)中,用更多元的內(nèi)容和更多樣的商品,帶給女性高品質(zhì)的生活美學(xué)和有幸福感的生活方式,讓藝術(shù)走進(jìn)生活。
素馬為時(shí)尚品牌菲安妮官方網(wǎng)站建設(shè)時(shí)就采用了插畫設(shè)計(jì)技巧。
Uber系列插畫提供暖色,以及安全藍(lán)的運(yùn)用,突出打車服務(wù)中安全的關(guān)鍵要素
東南亞電商lazada整體品牌定位年輕活力的用戶,所以對(duì)東南亞人群氣質(zhì)提煉出一系列的人物插畫運(yùn)用到UI產(chǎn)品界面中,在傳遞個(gè)性同時(shí)也把產(chǎn)品的情緒融入其中。
設(shè)計(jì)師根據(jù)這些插畫的特別,延展出一系列運(yùn)營場景,在界面,空白頁等場景傳遞出品牌的氣質(zhì)!
在淘寶產(chǎn)品中,設(shè)計(jì)師將空白頁面運(yùn)用有趣的小故事傳遞給用戶,給用戶帶來更好的購物體驗(yàn)和感受!
故事一:太空網(wǎng)絡(luò)遺跡
通用的"網(wǎng)絡(luò)異常"的場景,講的是"一個(gè)宇航員在外太空尋找網(wǎng)絡(luò)遺跡"的故事,太空場景本身就是一種神秘且容易丟失的空間,將網(wǎng)絡(luò)夸張擬物保證意義明確,最后定格在正向俯視圖上。
故事二:大漠足印
"足跡為空"的場景,是"一個(gè)考古學(xué)家在大漠中追尋巨人足跡"的故事,一個(gè)在沙漠中找尋的學(xué)家,發(fā)現(xiàn)了一個(gè)類似巨人的足印,但足印的主人不知所蹤。
故事三:擁擠的傳送帶
通用限流場景,把貨物擬人化,卡在貨物傳送帶的入口上你推我搡,豐富的畫面間接體現(xiàn)擁擠的感覺。
設(shè)計(jì)師提供故事將我們的一些功能融于場景中,讓我們的產(chǎn)品變成一個(gè)有血有肉有故事的人,讓用戶更加的親切,在產(chǎn)品設(shè)計(jì)中,插畫是非常重要的一個(gè)點(diǎn)!不可忽視。
字體
自從騰訊在20周年發(fā)布了騰訊字體,運(yùn)用一些有向前感覺的斜體,越來越多的公司在品牌升級(jí)時(shí)候,加入品牌字體設(shè)計(jì)。
阿里巴巴在2019年UCAN大會(huì)上發(fā)布了阿里普惠體,為了解決廣大的素材需求和高昂版權(quán)費(fèi)用之間的矛盾,整個(gè)字體采用現(xiàn)代簡潔的筆畫,適用于多個(gè)業(yè)務(wù)場景,這套字體不是單純從某一種西文或中文字體的造型特征出發(fā)進(jìn)行延展,而是以 9 個(gè)品牌體感詞為切入點(diǎn),將體感共鳴轉(zhuǎn)換為字體造型。
OPPO字體,跟隨著整個(gè)品牌升級(jí),OPPO也更新了自己字體,圍繞著探索科技美感,有獨(dú)特的語言打造具有標(biāo)志性的,與眾不同的品牌體驗(yàn)。
小米發(fā)布了小米蘭亭體,整個(gè)字體可以動(dòng)態(tài)變化粗細(xì)是一大創(chuàng)新亮點(diǎn),可見現(xiàn)在設(shè)計(jì)越來越難做了,作為一個(gè)大型公司品牌設(shè)計(jì),一套專屬字體好像已經(jīng)成為標(biāo)配了。
Facebook推出的企業(yè)LOGO采用定制字體,以全部大寫的形式在應(yīng)用產(chǎn)品之間建立視覺區(qū)別。以不同的顏色顯示,表現(xiàn)出旗下不同社交品牌的屬性,如藍(lán)色代表和公司同名的 Facebook 社交平臺(tái),綠色代表 WhatsApp(跨平臺(tái)應(yīng)用程序,用于智能手機(jī)之間的通訊),粉色代表 Instagram 等等。
和以往不同的是,之前我們在定義一個(gè)字體時(shí),只需要根據(jù)產(chǎn)品的氣質(zhì)去選擇一個(gè)合適字體即可,現(xiàn)在成本變的更大了,可喜的是行業(yè)中越來越多的開源字體,對(duì)于沒有條件去設(shè)計(jì)字體的團(tuán)隊(duì),我們要學(xué)會(huì)去借力!另外就是一定要注意字體版權(quán)問題。
圖標(biāo)
圖標(biāo)是界面中除了文字以外經(jīng)常運(yùn)用到的點(diǎn),一個(gè)好的圖標(biāo)能把產(chǎn)品特點(diǎn)體現(xiàn)的淋漓盡致!
我們結(jié)合一個(gè)實(shí)際案例,看看設(shè)計(jì)師是如何在圖標(biāo)中融于品牌元素的:
這是產(chǎn)品LOGO,粗略看沒什么特點(diǎn),但是設(shè)計(jì)師從LOGO中挖掘了一個(gè)圖形,也就是這個(gè)半弧的圖形作為一個(gè)設(shè)計(jì)創(chuàng)意點(diǎn),然后將這個(gè)圖形進(jìn)行運(yùn)用到各個(gè)場景!
這套圖標(biāo)中,圓角元素,圖標(biāo)顏色和LOGO匹配,保留LOGO中黃色元素,同時(shí)圖標(biāo)的弧度在圓弧的地方,運(yùn)用比較大的柔和的角度和整體的LOGO匹配。
最后
正如我們之前文章中所說,品牌就像內(nèi)褲,看不見但是很重要,作為設(shè)計(jì)師,除了做好滿足產(chǎn)品的功能設(shè)計(jì)外,把你負(fù)責(zé)的產(chǎn)品賦予性格和生命力,是我們必須的職責(zé)也是作為產(chǎn)品設(shè)計(jì)師必須要具備的能力,最后我們來回顧下今天的內(nèi)容,如何在UI中塑造一個(gè)品牌,可以通過以下維度:
1.色彩(有特點(diǎn)的顏色,顏色不能太普通)
2.形狀(合理運(yùn)用形狀特點(diǎn),定義圖形風(fēng)格)
3.插畫(符合產(chǎn)品調(diào)性的插畫風(fēng)格)
4.字體(定義獨(dú)特氣質(zhì)的字體,或者選擇一套)
5.圖標(biāo)(基于LOGO找到特別符號(hào)的圖標(biāo))
但是其實(shí)塑造品牌遠(yuǎn)遠(yuǎn)不止我上面說的那些,還包括之前說的話術(shù),圖片,產(chǎn)品功能等等,遠(yuǎn)遠(yuǎn)不是一朝一夕,一套模板就能搞定的,這一系列文章也只是打開大家的眼界和思路,具體如何做好,是需要我們不斷項(xiàng)目中實(shí)踐得來的。
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請?jiān)L問:網(wǎng)站技術(shù)