谷歌android品牌升級設(shè)計的詳細解讀

2019年8月22日,谷歌宣布Android系統(tǒng)的重大改變,不僅換了全新的Logo,命名方式也變了,今年的Android Q的正式名稱是Android 10,以后Android系統(tǒng)就會放棄字母命名改為更簡單好記的數(shù)字命名。該版本將使用數(shù)字(Android10)來代替原有的命名方式,這樣給用戶的感覺更加直觀、容易理解。


Image title


安卓版本的命名和Logo變得更加簡潔了,這說明谷歌也開始化繁為簡,追求極簡的設(shè)計。在系統(tǒng)交互方面,也會更加人性化.

Image title

全新版本的Android品牌字體顏色從綠色變成了黑色,這樣做也是方便閱讀,因為綠色的字體對于有視力障礙的人會閱讀困難。

Image title

全新的Logo增強了色彩的飽和度和對比度,用黑色文字和綠色圖標組合可以提高識別度,通過改變字體字重來弱化文字部分,簡化機器人圖案來增強圖形的識別度。


字體大小

Image title

人們在第一次學習英文字母的書寫時,會在一種類似五線譜的四根橫線的本子上練習英文字母的書寫。在西文字體中對這四根橫線都有專業(yè)的術(shù)語,從上到下依次為上升線(Ascender Line)、中線(Mean Line)、基線(Base Line)、下升線(Descender Line)。小寫字母在書寫時會有上升部和下升部,比如字母“h”和“g”等。為了方便閱讀,西文字體中的所有大寫和小寫都是基于字母的基線來進行對齊排列的。

Image title

android由于字母中沒有下升部,中線與基線的高度成為X-height,決定了字體的整體高度,新品牌降低了字母X-height字高,提升了字母的上升部,目的是為了和bugdroid機器人頭視覺平衡。

Image title



字間距

Image title

新版本的整體字間距都較為寬松,更加方便用戶閱讀和識別。an和dr之間的間距一致,nd和oi、id的間距一致。字母的幾何外形不同他們的字母間距也不同。


重復性和多樣性原則

所有精心設(shè)計的字體都體現(xiàn)了重復性和多樣性的原則

Image title

ado字母都使用了相同大小的內(nèi)圓,ad字母的外圓統(tǒng)一設(shè)計變化,

Image title

Image title

andri字母中的豎線元素都統(tǒng)一左下角使用相同大小的圓角,這是品牌更新的一大亮點。右下角都使用直角,由于字母是基于基線對齊的,豎線上方都使用直角會方便向上延展


完全形態(tài)法則

簡單點說,當圖形是一個殘缺圖形,但主體有一種使其閉合的傾向,即主體能自行填補缺口從而將其感知為一個整體。

Image title

當使用一段獨立的線條圍成環(huán)狀路徑時,人們的第一反應就是將它們視為一個整體圖形,然后才會注意到這個圖案其實是有許多獨立的線條組成。以這種方式感受信息的傾向是自動的、無意識的,而且可能是一種天生的喜好,人們偏愛單純甚于復雜,喜歡有規(guī)律甚于無規(guī)律可循。

Image title

如圖android中的字母ad的右側(cè)豎線做了修改,之前是豎線不變,讓你自動腦補圓弧其實比較別扭,現(xiàn)在圓弧切掉豎線部分元素,讓你自動腦補豎線就比較順其自然。


視覺平衡

26字母的形態(tài)各異,有的寬,例如“M” ;有的窄,例如“I”,有的圓有的尖,我們大致可以把26字母分成以下幾類

Image title

Image title

視錯覺的調(diào)整,數(shù)理上高低等大的三角形、方形、圓形,放在一起在視覺上感覺三角形過窄,圓形稍小,同樣的字母里同形狀的字母雖然在數(shù)理上等高等低,但是放在一起,視覺上就感覺稍小和稍窄。如果我們稍作調(diào)整,加寬三角形,放大圓形,那么就能取得視覺上的一致,很多新手在調(diào)整字母時都一味的按照自己畫的輔助線去做成數(shù)理上的等大,但是視覺上就出現(xiàn)了問題。

Image title

Image title

如圖android是基于基線對齊沒有下升部,O的圓弧底部會向下稍稍超出基線邊緣,來確定整個編排的視覺平衡。



色彩無障礙設(shè)計標準(WCAG 2.0)

顏色對比度無障礙標準

1.4.3 對比度(最?。? 文本的視覺呈現(xiàn)以及文本圖像至少要有 4.5:1 的對比度(AA級)大文本: 大號文本以及大文本圖像至少有 3:1 的對比度

1.4.6 對比度(加強): 文本視覺呈現(xiàn)以及文本圖像至少有 7:1 的對比度(AAA級)大文本: 大號文本以及大文本圖像至少有 4.5:1 的對比度

Ps:大文本:至少 18pt(24px)或 14pt(19px)bold


[WCAG 2.1: What You Need to Know](https://www.boia.org/blog/wcag-2.1-what-you-need-to-know)


Image title

Image title

之前的綠色在白色背景對比度才2.22:1,現(xiàn)在改成黑色變成了20.63:1。后者更符合顏色對比的無障礙標準。


圖形

谷歌保留了Android的頭部會更加有品牌表現(xiàn)力和擬人化的趣味性。Android頭部的眼睛和天線進行了適當?shù)膬?yōu)化,使整體的高寬比例與”android”字母相匹配。Android頭部的眼睛和天線通過位移旋轉(zhuǎn)動畫來表達自己的不同情緒。

Image title


Image title



品牌的擴展性

Image title

Image title

Image title

如圖天貓的貓頭設(shè)計,每年雙11的時候貓頭的金鐘罩設(shè)計會刷屏,大大增加了品牌的影響力。



顏色

全新的Logo增強了色彩的飽和度和對比度,用黑色文字和綠色圖標組合可以提高識別度,通過改變字體字重來弱化文字部分,簡化機器人圖案來增強圖形的識別度。

Image title

很多互聯(lián)網(wǎng)公司的品牌升級中,顏色都從深亮色調(diào)到淺亮色已是一種趨勢。且也符合我之前寫的CMYK配色法的規(guī)律,可以看上一篇哦~

Image title

Image title

新的配色為品牌靈活適應更多的應用場景。六種顏色進行搭配更具活力。新的品牌色也使用了潘通色卡關(guān)注打印模式下的品牌色,盡可能保證在不同載體下品牌色的統(tǒng)一性。



總結(jié)

看似一次不大的Android品牌升級,里面包含的很多細膩的設(shè)計。品牌設(shè)計中更注重理論與實踐相結(jié)合,一步一個迭代,讓品牌升級更出色。我們無論在品牌設(shè)計還是圖形圖標的設(shè)計時,應該為設(shè)計加入更多的細節(jié)讓我們設(shè)計更上一個臺階。





原文作者:RDD

每天更新,
全站高品質(zhì)素材免費下載!