400-611-9921
2017-09-12
2871
品牌專業(yè)網(wǎng)站設(shè)計(jì),對(duì)移動(dòng)互聯(lián)網(wǎng)時(shí)代的的產(chǎn)品質(zhì)量提升帶來(lái)了更多的可能性。也對(duì)設(shè)計(jì)師本身的平面視覺(jué)技能帶來(lái)了更大的機(jī)會(huì)和挑戰(zhàn)。APP為什么需要品牌設(shè)計(jì),距離上一篇App系列文章已經(jīng)過(guò)去兩個(gè)星期了,我除去教學(xué)生的時(shí)間,都在準(zhǔn)備這篇文章的資料,因?yàn)檫@篇文章的內(nèi)容除了大量的截圖還有視頻需要處理。上篇文章有人留言說(shuō)文字太多,懶得看。我想說(shuō)我的文章是寫給愛(ài)學(xué)習(xí)的同學(xué)看的,不是娛樂(lè)貼。所以這篇文章依然很長(zhǎng),干貨十足。
現(xiàn)在打開(kāi)各種設(shè)計(jì)網(wǎng)站,去尋找App界面設(shè)計(jì)參考。你會(huì)發(fā)現(xiàn)如果去掉圖標(biāo),僅僅去看界面設(shè)計(jì),很多App的界面設(shè)計(jì)差異性非常小。App設(shè)計(jì)有一種同質(zhì)化的傾向。
在產(chǎn)品型公司,UI設(shè)計(jì)師的工作流程一般是這樣的,和產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師討論每個(gè)版本的規(guī)劃,在這個(gè)討論過(guò)程中用草圖的形式畫出大致的流程。之后將流程圖細(xì)化并分析使用上的便利性和技術(shù)上的可行性,然后設(shè)計(jì)師將界面設(shè)計(jì)好,經(jīng)過(guò)評(píng)審沒(méi)有問(wèn)題,直接輸出給程序員。這是一個(gè)標(biāo)準(zhǔn)化的流水作業(yè)流程,留給設(shè)計(jì)師發(fā)揮的時(shí)間和空間并不多,更多時(shí)候是以功能實(shí)現(xiàn)為第一需求。另外的有部分原因是設(shè)計(jì)師趨向于保守設(shè)計(jì),遵循各種平臺(tái)規(guī)范,這樣的保守設(shè)計(jì)不容易出錯(cuò)。因?yàn)閭€(gè)性的設(shè)計(jì)的App可能非常成功,也可能是大家眼中的異類。以上的原因?qū)е潞芏嗌虡I(yè)的App設(shè)計(jì)的大同小異。
經(jīng)過(guò)這幾年的移動(dòng)創(chuàng)業(yè)風(fēng)潮,大量App設(shè)計(jì)已經(jīng)存在,現(xiàn)在設(shè)計(jì)師遇到的不是從零起步,如何設(shè)計(jì)一款A(yù)pp的問(wèn)題了。而是面臨各種改版設(shè)計(jì)的需求,如何設(shè)計(jì)一款和競(jìng)品有差異化設(shè)計(jì)的界面,這是UI設(shè)計(jì)師越來(lái)越迫切的需求。面對(duì)現(xiàn)在App設(shè)計(jì)趨同的市場(chǎng)行情,如果誰(shuí)可以做出不一樣的設(shè)計(jì),那么你就可以鶴立雞群。差異化設(shè)計(jì)這對(duì)界面設(shè)計(jì)師也是一個(gè)巨大的挑戰(zhàn)和機(jī)會(huì)。
APP品牌植入設(shè)計(jì)
品牌設(shè)計(jì)是在企業(yè)自身正確定位的基礎(chǔ)之上,基于正確品牌定義下的視覺(jué)溝通。我們平??吹降膌ogo設(shè)計(jì)只是品牌設(shè)計(jì)視覺(jué)延伸的一部分。因?yàn)橐苿?dòng)界面設(shè)計(jì)的同質(zhì)化嚴(yán)重,所以越來(lái)越多的公司重視對(duì)App的品牌塑造,希望通過(guò)品牌的塑造,使用戶快速的對(duì)產(chǎn)品形象進(jìn)行有效深刻的記憶。 App中的 Logo圖標(biāo)、界面的視覺(jué)風(fēng)格,甚至App Store上的介紹和宣傳Banner等,都是品牌設(shè)計(jì)的組成部分。 App的品牌設(shè)計(jì),對(duì)移動(dòng)互聯(lián)網(wǎng)時(shí)代的的產(chǎn)品質(zhì)量提升帶來(lái)了更多的可能性。也對(duì)設(shè)計(jì)師本身的平面視覺(jué)技能帶來(lái)了更大的機(jī)會(huì)和挑戰(zhàn)。
移動(dòng)端產(chǎn)品品牌視覺(jué)設(shè)計(jì)的點(diǎn):
圖標(biāo):APP圖標(biāo)、底部導(dǎo)航欄、其他頁(yè)面的功能圖標(biāo)
字體:字體(APP可以內(nèi)置字體包變換字體)、字號(hào)
頁(yè)面設(shè)計(jì):引導(dǎo)頁(yè)、啟動(dòng)頁(yè)、刷新控件
排版:元素的留白
圖片:頁(yè)面的配圖、占位圖片、頁(yè)面的情感插畫
線下物料:線下的各種物料及其衍生品。
APP品牌設(shè)計(jì)的步驟
1、 發(fā)掘產(chǎn)品的氣質(zhì)
2、 品牌圖形的提煉
3、 品牌圖形的幾何化輪廓
4、 品牌圖形在界面設(shè)計(jì)中的應(yīng)用
5、 視覺(jué)語(yǔ)言的一致性
第一步:發(fā)掘產(chǎn)品的氣質(zhì)
當(dāng)我們看一個(gè)人的時(shí)候,會(huì)根據(jù)他的外表+內(nèi)涵,我們會(huì)對(duì)他有第一個(gè)印象的認(rèn)知,這個(gè)就是氣質(zhì)。APP也一樣。App的外表是我們產(chǎn)品的視覺(jué)設(shè)計(jì)呈現(xiàn),也就是這個(gè)產(chǎn)品看起來(lái)讓人感覺(jué)如何。內(nèi)涵就是App的內(nèi)容和功能的呈現(xiàn),就是能否進(jìn)一步留住用戶駐足。所以產(chǎn)品就是這樣,呈現(xiàn)什么樣的氣質(zhì),就會(huì)吸引來(lái)什么樣子的用戶。
常見(jiàn)的品牌氣質(zhì)
1、 高冷氣質(zhì)
2、 文藝氣質(zhì)
3、 時(shí)尚氣質(zhì)
4、 活力向上
5、 個(gè)性張揚(yáng)
1、高冷氣質(zhì)
高冷的人自帶著一種生人勿近的冷淡氣質(zhì),喜歡穿著黑白灰。朋友不是很多,不需要融入小圈子。然后嚴(yán)格按照自己任性極致的標(biāo)準(zhǔn)篩選良莠,深交的少,淺交的保持距離懶得討好。所謂可親而難以靠近。所以高冷氣質(zhì)的應(yīng)用不需要討好所有人,只服務(wù)好這個(gè)App定位的群體就好。例如(圖1-1)的Gucci應(yīng)用,整個(gè)界面只有黑白以及一些色彩豐富的配圖,非常的簡(jiǎn)潔明快,沒(méi)有任何多余的修飾,隱隱透露出大牌的傲嬌。
2、文藝氣質(zhì)
這個(gè)說(shuō)到文藝氣質(zhì),其實(shí)就是一個(gè)字“范兒”, 如何才能有范兒?首先要有文化底蘊(yùn),素質(zhì)修養(yǎng),如果沒(méi)有的話,裝不像的。具體什么樣,可以去看看一些詩(shī)人,搞民謠音樂(lè)的人的裝扮,尤其是上個(gè)世紀(jì)的。穿著寬松的毛衣,戴著圓圓的黑框眼鏡,搞一條素色的圍巾,拿個(gè)老式的手動(dòng)旁軸相機(jī),留著稀疏的胡渣,或是女生長(zhǎng)發(fā)飄飄的感覺(jué)。所以應(yīng)用從界面設(shè)計(jì)到頁(yè)面內(nèi)容,都要有足夠的范兒,這樣才是文藝的徹底。例如(圖1-2)最美有物,從界面設(shè)計(jì)到內(nèi)容標(biāo)題的文字都散發(fā)出足夠的文藝氣質(zhì)。這種范兒可能不是所有人都學(xué)的來(lái)的,比如讓做B2C綜合電商的應(yīng)用學(xué)這樣的氣質(zhì)就不倫不類,也許這就是產(chǎn)品基因吧。
3、時(shí)尚氣質(zhì)
所謂時(shí)尚,是時(shí)與尚的結(jié)合體。代表當(dāng)前世界對(duì)社會(huì)某項(xiàng)事物崇尚的潮流。是一個(gè)時(shí)期的流行風(fēng)氣與社會(huì)環(huán)境,時(shí)尚引領(lǐng)潮流,是流行文化的表現(xiàn)。對(duì)時(shí)尚最為敏感的就是家居、服飾行業(yè)。沒(méi)有人希望自己買來(lái)的衣服或者家具是一個(gè)落伍淘汰的風(fēng)格。當(dāng)前的在界面設(shè)計(jì)中最流行的就是使用各種幾何元素,通過(guò)點(diǎn)線面的搭配塑造頁(yè)面的時(shí)尚感。例如(圖1-3)男衣邦應(yīng)用,從啟動(dòng)界面到首頁(yè)都穿插了非常多的幾何線條,界面具有濃濃的幾何構(gòu)成時(shí)尚感。
4、活力向上
有活力的感覺(jué),就是充滿了朝氣。 Same是一個(gè)非常有個(gè)性的社交應(yīng)用。你安裝完App打開(kāi)應(yīng)用首先呈現(xiàn)的就是兩個(gè)陽(yáng)光可愛(ài)的美少女。通過(guò)開(kāi)場(chǎng)的短片秀(圖1-4),就給人信心滿滿,自信陽(yáng)光的感覺(jué)。有些人,從頭到腳散發(fā)出一股吸引你的氣息,這就是所謂志趣相投。有些產(chǎn)品也一樣,你可以在上面找到和你一樣特質(zhì)的人群。Same定位的用戶是90后、00后的年輕人,他們內(nèi)心世界豐富,喜歡新鮮事物。所以界面內(nèi)的表情(圖1-4),是繼line表情之后,對(duì)當(dāng)前年輕人群身份、氣質(zhì)、角色和代入感相當(dāng)強(qiáng)的作品。
5、個(gè)性張揚(yáng)
個(gè)性意味和人家不一樣,不是隨大流的那種,張揚(yáng)就是外向活潑,給人不見(jiàn)外的感覺(jué),到任何地方都能引起別人的關(guān)注,張揚(yáng)的壞處就是,過(guò)分的顯擺自己,容易招人嫉妒。所以你的應(yīng)用設(shè)計(jì)的明顯和別人不一樣。兩種結(jié)果。好評(píng)如潮,說(shuō)這個(gè)設(shè)計(jì)不一樣,有自己特點(diǎn)。還有一種結(jié)果就是,這個(gè)應(yīng)用怎么能這樣設(shè)計(jì),太不符合主流習(xí)慣了。例如(圖1-6)野獸派應(yīng)用,這是綜合類的時(shí)尚類家居相關(guān)售賣平臺(tái)。做為一個(gè)電商類的應(yīng)用,他的設(shè)計(jì)明顯是非常個(gè)性的,沒(méi)有傳統(tǒng)的底部標(biāo)簽欄模塊設(shè)計(jì),而是首頁(yè)就是一整張插畫,作為首頁(yè)各種子模塊店鋪的入口。這樣的設(shè)計(jì)非常有個(gè)性,讓人一下就記住了。所以UI設(shè)計(jì)師需要做的是提煉出的產(chǎn)品氣質(zhì)并轉(zhuǎn)化為具象化的視覺(jué)語(yǔ)言。讓用戶通過(guò)界面這層介質(zhì)感知到你產(chǎn)品的氣質(zhì)。
第二步:品牌圖形的提煉
這個(gè)過(guò)程與平面設(shè)計(jì)logo基本類似,其實(shí)某種程度上就是設(shè)計(jì)logo,現(xiàn)在的App圖標(biāo)游戲圖標(biāo)還會(huì)使用復(fù)雜的光影質(zhì)感。其他主流的商業(yè)應(yīng)用圖標(biāo)都是極簡(jiǎn)的扁平圖標(biāo)。所以更需要一個(gè)獨(dú)特的品牌圖形。
1、具象圖形
通常情況下,具象圖形的LOGO設(shè)計(jì)會(huì)更受到移動(dòng)設(shè)計(jì)的親睞。部分原因是這些LOGO圖形容易辨認(rèn),可以更清晰的表述出應(yīng)用是做什么的。例如(圖1-7)里的應(yīng)用只看圖形就能很清晰的明白這個(gè)應(yīng)用的屬性或者應(yīng)用的功能。只留給大家很少的開(kāi)放性解釋空間。有些應(yīng)用的圖形甚至很聰明地運(yùn)用了雙關(guān)含義和隱藏圖形。例如OFO既使用品牌的名稱,又表達(dá)了自行車的圖形符合共享單車的屬性。是一個(gè)非常 成功的logo品牌圖形。
2、抽象的幾何圖形
抽象圖形,抽象圖形LOGO設(shè)計(jì)同樣很適用于多元化企業(yè),因?yàn)樗鼈儌鬟_(dá)出的是情緒和基調(diào),而非具體的公司類型。一個(gè)LOGO未必需要直接反映出公司是做什么的。想想Nike旋風(fēng),McDonald’s金色拱門,或是Apple的LOGO。所以有時(shí)候App的圖標(biāo)也是如此,更多通過(guò)一些抽象的圖形傳達(dá)一些特別的含義。比如愛(ài)彼迎的圖形背后有四層含義(圖1-8)。首先,這是一個(gè)字母A,代表了Airbnb;第二,這像是一個(gè)人張開(kāi)雙手,代表了人;第三,這像是一個(gè)標(biāo)記地理位置的符號(hào),代表地點(diǎn);第四,這是一個(gè)倒過(guò)來(lái)的愛(ài)心,代表了愛(ài)。
3、吉祥物
互聯(lián)網(wǎng)公司非常喜歡用動(dòng)物做為公司的吉祥物。這些互聯(lián)網(wǎng)公司的logo有很多是采用讓人萌化的動(dòng)物圖案,這成了一種風(fēng)氣,感覺(jué)互聯(lián)網(wǎng)的圈子成了動(dòng)物園一樣。比如京東的狗(圖
第三步:品牌圖形的幾何化輪廓
我經(jīng)常和學(xué)生強(qiáng)調(diào),繪畫和設(shè)計(jì)是兩回事情,也許你會(huì)畫但并不意味著設(shè)計(jì)可以做的好?,F(xiàn)在主流App的LOGO圖形傾向于扁平化設(shè)計(jì),可能就是一個(gè)簡(jiǎn)單的剪影圖形。比如你要設(shè)計(jì)一個(gè)表現(xiàn)自然或者格調(diào)感的應(yīng)用。設(shè)計(jì)師想使用“鹿”這個(gè)圖形。如果直接用鋼筆勾勒鹿的圖形(圖1-10),那么這個(gè)呈現(xiàn)的是一副剪影插畫。這個(gè)圖形又很多細(xì)節(jié),線條充滿了不規(guī)則感,這些不規(guī)則線條對(duì)于一個(gè)LOGO設(shè)計(jì)來(lái)說(shuō)是非常冗余的。
1、設(shè)計(jì)輔助線
好的品牌圖形是需要對(duì)基本圖形進(jìn)行2次提煉,去除一些不必要線條細(xì)節(jié),對(duì)原有的剪影圖形進(jìn)行幾何抽象化。我們經(jīng)??吹皆诋婰OGO時(shí)候出現(xiàn)的各種輔助線(圖1-11),這些輔助線以各種圓為參考形。輔助線的作用是幫助設(shè)計(jì)師用規(guī)整的幾何圖形去切分原有的剪影。讓線條更加規(guī)整幾何化。這樣幾何規(guī)整化的圖形已經(jīng)和不規(guī)則的偏插畫的剪影圖形區(qū)分開(kāi)來(lái)了?,F(xiàn)在更像一個(gè)有設(shè)計(jì)感的圖標(biāo)圖形了。當(dāng)然現(xiàn)在這樣的設(shè)計(jì)輔助線,在一些設(shè)計(jì)師中有濫用的嫌疑。在一些不需要的加輔助線的地方,加了很多線條,營(yíng)造一種專業(yè)的感覺(jué)。這種做法在有經(jīng)驗(yàn)的設(shè)計(jì)師眼中是非常可笑的。
2、設(shè)計(jì)的圖形語(yǔ)言
經(jīng)過(guò)幾何規(guī)整化的圖形只能算是一個(gè)好的圖標(biāo),離好的品牌圖形還有一段距離。品牌圖形一定要有自己獨(dú)特的設(shè)計(jì),講白圖形一定要有自己的特色,讓別人一下記住你。例如(圖1-12)的設(shè)計(jì)語(yǔ)言就是流暢柔和的線條,通過(guò)這個(gè)極簡(jiǎn)的線條構(gòu)造了鹿的品牌圖形。
3、提取典型的特征
由于移動(dòng)設(shè)計(jì)的LOGO需要在一個(gè)圓角矩形中展示,并沒(méi)有那么大面積供設(shè)計(jì)師發(fā)揮。所以需要選取最具有代表的形的局部圖形(圖1-14),比如鹿的頭部是最具有代表性的圖形部分。
第四步:品牌圖形在界面設(shè)計(jì)中的運(yùn)用
1、 引導(dǎo)頁(yè)
抽象形式感的圖形,與廣告頁(yè)進(jìn)行呼應(yīng)。點(diǎn)擊App圖標(biāo),第一次打開(kāi)應(yīng)用的界面。會(huì)呈現(xiàn)一組引導(dǎo)頁(yè)。引導(dǎo)頁(yè)是用戶進(jìn)入主界面之前,首先見(jiàn)到的頁(yè)面。這是產(chǎn)品給用戶的第一印象。由于第一印象的好壞會(huì)極大地影響到后續(xù)的產(chǎn)品使用體驗(yàn),因此我們需要花一些時(shí)間去精心設(shè)計(jì)引導(dǎo)頁(yè)。匠物APP的應(yīng)用通過(guò)一個(gè)動(dòng)畫,把LOGO的圖形放大(圖1-15),映射在引導(dǎo)頁(yè)的背景上。這樣品牌圖形前后有了一個(gè)呼應(yīng),加深了用戶的印象。
現(xiàn)在很多應(yīng)用都放棄了四頁(yè)引導(dǎo)頁(yè)的傳統(tǒng)做法,而是偏向內(nèi)置視頻的做法。視頻具有更好的視覺(jué)動(dòng)態(tài)效果。比如最美有物引導(dǎo)頁(yè)使用了一段視頻(圖1-16),使用各種絢麗效果,最后一幀放出品牌logo圖形,這種手法是不是很像我們以前看的各種國(guó)外大牌廣告。比如耐克的廣告從來(lái)不會(huì)放什么XX產(chǎn)品就是好的廣告,而是喜歡放一段情懷畫面,最后一個(gè)大大的LOGO告訴消費(fèi)者我這是耐克的廣告。
2、 啟動(dòng)頁(yè)
每次打開(kāi)一個(gè)App,都會(huì)看到啟動(dòng)頁(yè),所以這是一個(gè)品牌露出非常高頻次的頁(yè)面,大多數(shù)應(yīng)用都是品牌圖形+ Slogan的設(shè)計(jì)形式,比如Life的啟動(dòng)頁(yè)(圖1-17),直接把品牌Slogan反復(fù)在啟動(dòng)頁(yè),和隨后的廣告頁(yè)反復(fù)呈現(xiàn)。如果覺(jué)得直接放品牌圖形+背景的做法,比較老套的話,也可以嘗試在品牌圖形上進(jìn)行2次設(shè)計(jì)。比如良倉(cāng)的啟動(dòng)頁(yè)(圖1-18)運(yùn)用logo圖標(biāo)的典型輪廓進(jìn)行2次創(chuàng)作。
3、刷新控件
刷新控件用于刷新當(dāng)前頁(yè)面內(nèi)容。在我的書中《術(shù)與道移動(dòng)應(yīng)用設(shè)計(jì)必修課》中有介紹。目前主流有下拉刷新和上拉刷新兩種方式,這兩種交互方式有很大區(qū)別。以網(wǎng)易新聞為例,我們?cè)诳串?dāng)前頁(yè)面的時(shí)候,使用下拉動(dòng)作,界面反饋當(dāng)前頁(yè)面內(nèi)容條數(shù)不變,而內(nèi)容更新。而上拉刷新代表是加載。一個(gè)頁(yè)面固定加載一定條數(shù)的新聞,從上往下看,看完一定條數(shù),往上一拉,后面的內(nèi)容繼續(xù)載入。
方法1使用幾何圖形
Enjoy的品牌圖形有一個(gè)非常鮮明的圖形是那個(gè)波浪線,Enjooy下拉刷新的時(shí)候使用了這個(gè)波浪圖形(圖1-19),讓品牌圖形無(wú)處不在。當(dāng)然使用的圖形也可以是一種圖形的設(shè)計(jì)風(fēng)格,比如造作的全局是較為硬朗的圖形,這點(diǎn) 在他的個(gè)人中心就可以看出來(lái),他的個(gè)人中心(圖1-20)都是非常硬朗的直接圖標(biāo)。所以他的刷新使用了一個(gè)矩形做為刷新圖形
方法2使用吉祥物圖形
在界面設(shè)計(jì)中嗎,必須有一個(gè)設(shè)計(jì)語(yǔ)言貫穿,這樣你的設(shè)計(jì)才會(huì)有特色,這個(gè)語(yǔ)言可以是一個(gè)圖形,也可以是一個(gè)吉祥物卡通形象。如果有這樣一個(gè)形象存在,你的界面設(shè)計(jì)會(huì)一下提升不少的特色。
4、 占位圖片
在界面設(shè)計(jì)中,很多圖片需要考慮數(shù)據(jù)為空的情況,也有可能由于網(wǎng)絡(luò)的情況圖片可能沒(méi)有加載出來(lái),這些都需要設(shè)計(jì)一個(gè)默認(rèn)的占位圖片。例如最美有物的品牌圖形是一個(gè)鹿(圖1-23),他的個(gè)人中心默認(rèn)頭像就是一個(gè)鹿的占位圖.需要注意的是在社交或者內(nèi)容社區(qū),品牌圖形的個(gè)人頭像有時(shí)候是需要慎重使用的,因?yàn)槟菢訒?huì)讓人誤以為這是官方頭像。
5、 界面其他小元素
有時(shí)候界面中功能會(huì)配上一些圖標(biāo),讓設(shè)計(jì)更好的釋義。對(duì)于一些約定俗成的功能,如果把這個(gè)圖標(biāo)去除也不會(huì)很明顯的影響含義。這個(gè)時(shí)候可以考慮使用特別的品牌圖形替代。比如life的卡片banner上的點(diǎn)贊功能圖標(biāo),使用了品牌圖形指紋替代來(lái)傳統(tǒng)的心形(圖1-24)。從體驗(yàn)來(lái)說(shuō),這個(gè)數(shù)字很容易讓人聯(lián)想到這是評(píng)論數(shù)或者點(diǎn)贊數(shù)。所以替換為品牌圖形對(duì)于用戶體驗(yàn)并沒(méi)有明顯的降低。
六、底部導(dǎo)航欄圖標(biāo)
典型的IOS應(yīng)用的結(jié)構(gòu)是把App的主要模塊放在底部導(dǎo)航進(jìn)行切換,底部導(dǎo)航一般分為4到5個(gè)模塊。以圖標(biāo)+文字的設(shè)計(jì)形式進(jìn)行展示。那么這些圖標(biāo)就可以與品牌圖形相結(jié)合,加深用戶的印象。
方法1:品牌圖形應(yīng)用在首頁(yè)圖標(biāo)
首頁(yè)最常見(jiàn)使用的圖標(biāo)是一個(gè)房子的圖形,這個(gè)圖形來(lái)源于PC時(shí)代的面包屑結(jié)構(gòu),Home的圖形代表家,代表不管你在網(wǎng)站哪個(gè)層級(jí),點(diǎn)擊Home圖標(biāo)像回家一樣可以回到起始的位置。很多應(yīng)用的圖標(biāo)上的logo,都是一個(gè)讓人印象深刻的主圖形,那么我們可以直接把這個(gè)logo圖形做為應(yīng)用的首頁(yè)模塊圖標(biāo)使用。這樣的好處很明顯,每次用戶打開(kāi)應(yīng)用后,都會(huì)看到這個(gè)圖形,反復(fù)加強(qiáng)了用戶對(duì)App的logo的印象。例如大眾點(diǎn)評(píng)、餓了么、花瓣、貓途鷹、網(wǎng)易云音樂(lè)提取各自品牌圖形(圖1-25),應(yīng)用在了App底部導(dǎo)航欄首頁(yè)模塊上。
方法2:品牌名稱應(yīng)用在底部導(dǎo)航欄
一些應(yīng)用的名稱是字母構(gòu)成,為了強(qiáng)化用戶對(duì)于應(yīng)用名稱的認(rèn)知,直接把名稱做為標(biāo)簽欄的圖標(biāo)。例如MONO(圖1-26)應(yīng)用的標(biāo)簽欄圖標(biāo),設(shè)計(jì)的非常大膽,提取logo上面的4個(gè)字母M、O、N、O后,直接將其作為圖標(biāo)。但是這種設(shè)計(jì)策略的缺陷也很大,每個(gè)字母和功能模塊本身的含義并沒(méi)有直接聯(lián)系,對(duì)用戶幫助理解模塊有一定的困難。所以這種方法適合一些極客小眾App去使用。
第五步:視覺(jué)語(yǔ)言的一致性
1、顏色的一致性
在完成了產(chǎn)品的整體風(fēng)格和功能構(gòu)架后,我們可以著眼于一些細(xì)節(jié)層面的設(shè)計(jì)。比如統(tǒng)一你的產(chǎn)品中,色彩和圖形的意義。比如設(shè)計(jì)一套套標(biāo)準(zhǔn)的配色方案,:用品牌色代表可點(diǎn)擊的按鈕,用橙色代表與金錢有關(guān)的操作,用藍(lán)色代表鏈接,用戶對(duì)這些顏色的含義就進(jìn)行了學(xué)習(xí)和習(xí)慣。讓用戶對(duì)這個(gè)App內(nèi)的顏色形成記憶。例如好物(圖1-27)好物每個(gè)可點(diǎn)擊的按鈕都是品牌黃色。
2、圖形設(shè)計(jì)的一致性
圖形設(shè)計(jì)包含各種插圖和圖標(biāo)。對(duì)于插圖如果是一個(gè)人設(shè)計(jì)的,那么更容易形成統(tǒng)一的風(fēng)格。
插圖的風(fēng)格和圖標(biāo)的風(fēng)格也需要保持一致。一些應(yīng)用的插圖設(shè)計(jì)師和界面設(shè)計(jì)師是2個(gè)人,插圖的風(fēng)格偏卡通或者手繪,而界面的圖標(biāo)設(shè)計(jì)偏規(guī)整。那么這個(gè)風(fēng)格就顯得格格不入。比如Same(圖1-28)的插圖風(fēng)格和圖標(biāo)風(fēng)格就協(xié)調(diào)的非常好。
3、元素的一致性
界面的本質(zhì)是信息傳遞的一種介質(zhì),界面中包含各種繁雜的信息。所以如果我們希望通過(guò)設(shè)計(jì)讓界面自己會(huì)說(shuō)明,我們可能會(huì)加上一些樣式的區(qū)分,比如我把標(biāo)題加粗加大,把輔助信息變淺色變小一些,但這只能區(qū)分主次,很難具體說(shuō)明每一部分的意義;那我還可以給一些信息加上可識(shí)別的圖標(biāo)。Life采用的是圖標(biāo)+標(biāo)題+欄目上下排版形式(圖1-29)。這樣的設(shè)計(jì)好處是每個(gè)模塊很清晰,且用戶可以很清晰的對(duì)應(yīng)分類各種子頻道。所以設(shè)計(jì)樣式不是隨意的選擇,單純的看視覺(jué)美學(xué)樣式。而是需要有效的對(duì)產(chǎn)品運(yùn)營(yíng)的需求進(jìn)行支撐。
設(shè)計(jì)結(jié)語(yǔ)
一個(gè)成功商業(yè)產(chǎn)品,首先需要所有團(tuán)隊(duì)成員有一個(gè)共同的目標(biāo),并且大部分人具有品牌思維和設(shè)計(jì)思維,將其落實(shí)到和用戶的每一個(gè)觸點(diǎn)中去,也就是我們所說(shuō)的服務(wù)設(shè)計(jì),這樣品牌的影響力才能逐漸深入人心。今天我們說(shuō)的視覺(jué)圖形設(shè)計(jì)只是品牌設(shè)計(jì)中的冰山一角,是最容易被普通用戶感知的一層。寫完這一篇《品牌設(shè)計(jì)在界面設(shè)計(jì)中的植入》,感覺(jué)還有很多沒(méi)有說(shuō)完。所以下一篇繼續(xù)說(shuō)品牌設(shè)計(jì)的內(nèi)容,題目是《品牌設(shè)計(jì)在圖標(biāo)設(shè)計(jì)中的運(yùn)用》。
本文來(lái)自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天科技
標(biāo)簽:廣州網(wǎng)站設(shè)計(jì),廣州網(wǎng)站開(kāi)發(fā),廣州網(wǎng)站建設(shè)公司,廣州網(wǎng)頁(yè)設(shè)計(jì)公司
400-611-9921
020-29860991
地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場(chǎng)16F
業(yè)務(wù) QQ: 3561401262
E-mail: sales@zomsky.com
立即與縱天項(xiàng)目顧問(wèn)通話
400-611-9921
您也可以咨詢我們的在線客服或預(yù)約資深顧問(wèn)