UI設(shè)計(jì)干貨

APP圖標(biāo)LOGO設(shè)計(jì)之字體設(shè)計(jì)入門(mén)教程【唯一】

6496

很多的移動(dòng)APP圖標(biāo)的logo設(shè)計(jì)都是有一些字體轉(zhuǎn)換設(shè)計(jì)而來(lái)。比如美團(tuán)的APP圖標(biāo)LOGO，支付寶的APP圖標(biāo)logo、天貓的APP圖標(biāo)logo等等。

如果大家有興趣可以去看看APP store排行榜上的前100名APP。至少有10幾個(gè)APP圖標(biāo)logo都是用文字來(lái)演變的。

App Store 上前 100 位的 app 榜單地址：

http://www.apple.com/cn/itunes/charts/free-apps/

APP圖標(biāo)設(shè)計(jì)

以及更多APP圖標(biāo)靈感的源泉之地：iOS App圖標(biāo)集|iOS免費(fèi)圖標(biāo)下載-Iconsfeed

下面就跟隨25學(xué)堂的小編來(lái)一起學(xué)習(xí)字體設(shè)計(jì)入門(mén)教程的案例：【唯一】字體設(shè)計(jì)。

今天的主題是“以少勝多以一擋十”，通俗地說(shuō)就是字體設(shè)計(jì)中的筆畫(huà)省略，在開(kāi)始之前我們不得不提一下“格式塔心理學(xué)”，這是我們省略字體筆畫(huà)的理論基礎(chǔ)。

當(dāng)我們確定好移動(dòng)APP主題關(guān)鍵詞的需求之后，需要進(jìn)行字體設(shè)計(jì)的背景分析。

字體設(shè)計(jì)背景分析：

唯一兩個(gè)字給人一種很單純的感覺(jué)，因此，在設(shè)計(jì)的過(guò)程中我去除了一些比較繁瑣的筆畫(huà)結(jié)構(gòu)，讓筆畫(huà)更簡(jiǎn)單。中國(guó)有“一生二，二生三，三生萬(wàn)物”之說(shuō)，我們通過(guò)視覺(jué)自動(dòng)補(bǔ)償缺失筆畫(huà)來(lái)達(dá)到這一效果，增加了文字內(nèi)涵。

選擇不同的字體，設(shè)計(jì)出來(lái)的字體也是不一樣的。

我們可以在電腦上打出“唯一”兩個(gè)字，觀察一下筆畫(huà)結(jié)構(gòu)，我們可以發(fā)現(xiàn)字體中以橫畫(huà)與豎畫(huà)為主。

我們將“唯”字中傾斜的兩筆擺正，使筆畫(huà)更統(tǒng)一。

用矩形工具將字體骨架搭建好，筆畫(huà)更為單純。

將筆畫(huà)加粗，并降低字體重心，使其在視覺(jué)上給人一種安定感。

接下來(lái)我們嘗試幾種方式來(lái)省略字體筆畫(huà)，第一個(gè)結(jié)構(gòu)很亂，節(jié)奏掌握的不到位；第二個(gè)整體不錯(cuò)，那一點(diǎn)起到了“暗示”的作用，讓視覺(jué)自動(dòng)將筆畫(huà)補(bǔ)全；第三個(gè)沒(méi)有暗示的筆畫(huà)，看不出是“唯“字；第四個(gè)和第三個(gè)類(lèi)似，看不出是圖形還是文字，筆畫(huà)省略太過(guò)頭。

通過(guò)對(duì)比，我們選擇了第二個(gè)進(jìn)行優(yōu)化。將筆畫(huà)粗細(xì)的分配重新調(diào)整，使筆畫(huà)在視覺(jué)上粗細(xì)一致,并且字體灰度更為平均。

一般來(lái)說(shuō)，筆畫(huà)密集的地方要調(diào)細(xì)，筆畫(huà)疏的地方要加粗，上圖時(shí)進(jìn)行調(diào)整后的筆畫(huà)，分別用數(shù)字和字母來(lái)代表對(duì)應(yīng)的筆畫(huà)，仔細(xì)觀察你會(huì)發(fā)現(xiàn)其中的差異。