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