品牌設(shè)計(jì)基因法,如何三步搞定圖標(biāo)設(shè)計(jì)?

來(lái)源:
木雞
時(shí)間:
2018-05-07 01:11:27
閱讀:
4826


 

文章大綱?:

  • 提取理論
  • 選擇合適的設(shè)計(jì)對(duì)象
  • 實(shí)例展示

 

一. 提取理論?

文章使用的「用品牌基因法做圖標(biāo)」理論源自菜心設(shè)計(jì)鋪。從理論到實(shí)踐的第一步是吸收理論關(guān)鍵點(diǎn),從菜心的品牌基因法做圖標(biāo)的方法中做了提煉。為方便閱讀本文,此處簡(jiǎn)要介紹部分理論,詳情請(qǐng)同學(xué)們看原文好好吸收。?

品牌基因的定義:視覺(jué)層面的品牌基因就是通過(guò)一件事物提取出一個(gè)(或一組)視覺(jué)符號(hào)。

 

將品牌基因應(yīng)用到圖標(biāo)中的方法如下:?

1. 提取特定形狀,直接應(yīng)用?

支付寶將Logo應(yīng)用為Tab首頁(yè)圖標(biāo),same將Logo應(yīng)用為我的圖標(biāo)。

?

△ 支付寶&same Logo在Tab圖標(biāo)的應(yīng)用

 

?2. 吸取品牌顏色

閑魚Tab圖標(biāo)使用了品牌色——黃黑色。?

 

△ 閑魚Logo在Tab圖標(biāo)的應(yīng)用

 

?3. 抓取風(fēng)格特點(diǎn)

網(wǎng)易美學(xué)Tab圖標(biāo)使用了品牌的心形圖形和品牌色紅色。?

 

△ 網(wǎng)易美學(xué)Logo在Tab圖標(biāo)的應(yīng)用

 

?理論經(jīng)過(guò)初步吸收后,實(shí)踐既可以檢驗(yàn)?zāi)闶欠裾娴恼莆樟死碚摚挚梢詮?qiáng)化對(duì)理論的深入理解。下面我們開始實(shí)踐吧!

 

二. 選擇具有明顯特征的設(shè)計(jì)對(duì)象?

?選擇合適的品牌形象來(lái)提取基因。要求:

  • 品牌特征明確,易提取易設(shè)計(jì)。
  • 該品牌的Tab圖標(biāo)缺少品牌特征。
  • 比較熟悉了解的產(chǎn)品。

 

按照上述的三點(diǎn),選擇了鏈家tab圖標(biāo)進(jìn)行重設(shè)計(jì)。

1. 品牌特征明確,易提取易設(shè)計(jì)

鏈家是二手房新房交易平臺(tái),其品牌Logo是一所房子的剪影,App Icon直接應(yīng)用了這個(gè)圖形。

 

△ 鏈家Logo及App Icon

 

經(jīng)過(guò)分析,我們提取出4個(gè)特點(diǎn):

  • 一條線:一條轉(zhuǎn)角圓潤(rùn)的矩形線條構(gòu)成了房屋的剪影。
  • 一個(gè)點(diǎn):點(diǎn)睛之處,將圖形連為一體。
  • 斷線:點(diǎn)與線之間斷開。
  • 綠色:鏈家的品牌色。?

 

△ 鏈家Logo的4個(gè)特點(diǎn)

 

?2. 鏈家的Tab圖標(biāo)缺少品牌特征

鏈家目前Tab圖標(biāo)只有綠色這一個(gè)品牌基因在里面,這使它無(wú)法很好的與其他應(yīng)用的圖標(biāo)區(qū)分。因此尚存較大優(yōu)化空間。

 

△ 鏈家App Tab圖標(biāo)缺少鏈家品牌基因

 

?3. 比較熟悉了解的產(chǎn)品

只有比較熟悉了解的產(chǎn)品,你對(duì)其的重設(shè)計(jì)才會(huì)相對(duì)不浮于表面。不過(guò)此次Icon的優(yōu)化主要是從視覺(jué)層面優(yōu)化。

 

三. 重設(shè)計(jì)展示?

鏈家的4個(gè)Tab圖標(biāo)分別是首頁(yè)、消息、看房、我。接下來(lái)我們便用提取的理論來(lái)指導(dǎo)設(shè)計(jì)。?

1. 提取特定形狀,直接應(yīng)用——首頁(yè)圖標(biāo)設(shè)計(jì)?

鏈家現(xiàn)在的首頁(yè)圖標(biāo)與網(wǎng)上搜索的首頁(yè)圖標(biāo),缺乏識(shí)別性,甚至和第一排第三個(gè)非常相似。

 

△ 鏈家首頁(yè)圖標(biāo)與網(wǎng)上搜索的首頁(yè)圖標(biāo)對(duì)比

 

?實(shí)際上,鏈家Logo本身就是房屋的剪影,可以說(shuō)已經(jīng)具有首頁(yè)的含義,其自身的4個(gè)特點(diǎn),使它比網(wǎng)上的圖形更具識(shí)別性。

△ 鏈家Logo與網(wǎng)上搜索的首頁(yè)圖標(biāo)

 

?《用品牌基因作圖標(biāo)》理論的第一條,提取特定形狀直接應(yīng)用,對(duì)于鏈家首頁(yè)icon十分受用,于是我們確定使用logo圖形作為首頁(yè)icon。

我們把鏈家Logo的放到750*1334px的界面里,將其尺寸調(diào)整至42px后,鏈家Logo粗細(xì)為8px,而鏈家首頁(yè)icon粗細(xì)為3px,經(jīng)過(guò)優(yōu)化后將鏈家Logo粗細(xì)調(diào)整為4px。

?

△ 鏈家Logo直接應(yīng)用于界面

 

 

△ 鏈家Logo粗細(xì)調(diào)整為4px

 

2. 抓取風(fēng)格特點(diǎn)——消息圖標(biāo)設(shè)計(jì)?

消息圖標(biāo)的設(shè)計(jì),結(jié)合我們上面提取的鏈家Logo的4個(gè)特點(diǎn) :一條線、一個(gè)點(diǎn)、斷線、綠色。按下面的步驟逐一完成。

  • 第一步:畫好基礎(chǔ)形。
  • 第二步:在圖標(biāo)右下的位置斷開(鏈家Logo的斷開位置)。
  • 第三部:添加點(diǎn),添加品牌色。

 

△ 消息圖標(biāo)設(shè)計(jì)過(guò)程

 

?3. 度的把握——我的圖標(biāo)設(shè)計(jì)

在設(shè)計(jì)我的圖標(biāo)時(shí),一開始我是很執(zhí)著的使用之前提取的4個(gè)品牌特征,轉(zhuǎn)角圓潤(rùn)的矩形、小圓角、右下角斷點(diǎn)、一條線構(gòu)成整個(gè)圖形,但總是有點(diǎn)不對(duì)。?

△ 我的圖標(biāo)設(shè)計(jì)探索

 

?最后選擇使用大一些圓角來(lái)過(guò)度,斷點(diǎn)也不執(zhí)著于右下角后,整個(gè)Icon視覺(jué)上就舒服多了。所以品牌特征也不能強(qiáng)加,協(xié)調(diào)、整體風(fēng)格符合即可。

 

△ 我的圖標(biāo)確定稿

 

剩下的圖標(biāo)如法炮制,4個(gè)Tab圖標(biāo)就搞定了。圖標(biāo)完成后更需要放入應(yīng)用的場(chǎng)景檢查是否與之匹配。?

 

△ 具有鏈家品牌特征的Tab圖標(biāo)

 

 

△ 優(yōu)化后的Tab圖標(biāo)在界面的應(yīng)用

 

?4. 度的把握——8個(gè)入口圖標(biāo)設(shè)計(jì)

Tab圖標(biāo)完成后,我們發(fā)現(xiàn)鏈家首頁(yè)的8個(gè)入口圖標(biāo)也存在一些優(yōu)化空間。8個(gè)圖標(biāo)都使用了尖銳的轉(zhuǎn)角,與Logo的圓潤(rùn)轉(zhuǎn)角不符。使用了矩形元素,而非Logo的圓點(diǎn),缺乏一定的品牌特征。此外整個(gè)首頁(yè)的其他控件等也是比較圓潤(rùn),這使得8個(gè)有著尖銳直角的圖標(biāo)有一點(diǎn)突兀。此外視覺(jué)大小不一,部分圖標(biāo)細(xì)節(jié)繁雜。

 

△ 鏈家首頁(yè)8個(gè)入口圖標(biāo)

 

?由于Tab圖標(biāo)的設(shè)計(jì)已經(jīng)有了明顯的特征,鏈家首頁(yè)的8個(gè)入口圖標(biāo)的優(yōu)化便會(huì)更克制,僅添加了圓潤(rùn)轉(zhuǎn)角、圓點(diǎn)2個(gè)品牌特征,使其有所呼應(yīng)即可。

 

△ 優(yōu)化后的鏈家首頁(yè)8個(gè)入口圖標(biāo)

 

△ 優(yōu)化后的圖標(biāo)效果應(yīng)用效果

 

四. 思考總結(jié)

從「用品牌基因作圖標(biāo)」理論到實(shí)踐,關(guān)鍵是品牌特征的提取,其次則是對(duì)品牌特征的靈活運(yùn)用,而對(duì)品牌特征的運(yùn)用程度把控是使整個(gè)圖標(biāo)協(xié)調(diào)的重點(diǎn)。

紙上得來(lái)終覺(jué)淺,絕知此事要躬行。理論經(jīng)過(guò)初步吸收后,實(shí)踐既可以檢驗(yàn)?zāi)闶欠裾娴恼莆樟死碚?,又可以?qiáng)化理論的深入理解。所以快去操作來(lái)鞏固理論吧!?????

歡迎關(guān)注作者的微信公眾號(hào):「Jenny黃靜雯」

 



轉(zhuǎn)載請(qǐng)注明:優(yōu)波設(shè)計(jì)


掃描二維碼可分享給好友