文章大綱：
- 提取理論
- 選定合適的設(shè)計對象
- 實例展示
一. 提取理論
文章使用的「用品牌基因法做圖標(biāo)」理論源自菜心設(shè)計鋪。從理論到實際的第一步是吸收理論環(huán)節(jié)點，從菜心的品牌基因法做圖標(biāo)的方法中做了提煉。為利便閱讀本文，此處扼要介紹片面理論，詳情請同學(xué)們看原文好好吸收。
品牌基因的定義：視覺層面的品牌基因即是通過一件事物提取出一個（或一組）視覺符號。
將品牌基因軟件到圖標(biāo)中的方法如下：
1. 提取特定形狀，直接軟件
支付寶將Logo軟件為Tab首頁圖標(biāo)，same將Logo軟件為我的圖標(biāo)。
△ 支付寶&same Logo在Tab圖標(biāo)的軟件
2. 吸取品牌顏色
閑魚Tab圖標(biāo)使用了品牌色——黃黑色。
△ 閑魚Logo在Tab圖標(biāo)的軟件
3. 抓取風(fēng)格特點
網(wǎng)易美學(xué)Tab圖標(biāo)使用了品牌的心形圖形和品牌色血色。
△ 網(wǎng)易美學(xué)Logo在Tab圖標(biāo)的軟件
理論經(jīng)過初步吸收后，實際既可以檢驗?zāi)闶欠裾娴恼莆樟死碚?，又可以?qiáng)化對理論的深入理解。下面我們開始實際吧！
二. 選定具有明顯特性的設(shè)計對象
選定合適的品牌形象來提取基因。要求：
- 品牌特性明確，易提取易設(shè)計。
- 該品牌的Tab圖標(biāo)貧乏品牌特性。
- 相對熟悉打聽的產(chǎn)品。
按照上述的三點，選定了鏈家tab圖標(biāo)進(jìn)行重設(shè)計。
1. 品牌特性明確，易提取易設(shè)計
鏈家是二手房新房交易平臺，其品牌Logo是一所房子的剪影，App Icon直接軟件了這個圖形。
△ 鏈家Logo及App Icon
經(jīng)過分析，我們提取出4個特點：
- 一條線：一條轉(zhuǎn)角圓潤的矩形線條組成了房屋的剪影。
- 一個點：點睛之處，將圖形連為一體。
- 斷線：點與線之間斷開。
- 綠色：鏈家的品牌色。
△ 鏈家Logo的4個特點
2. 鏈家的Tab圖標(biāo)貧乏品牌特性
鏈家當(dāng)前Tab圖標(biāo)只有綠色這一個品牌基因在內(nèi)部，這使它無法很好的與其余軟件的圖標(biāo)辨別。因此尚存較大優(yōu)化空間。
△ 鏈家App Tab圖標(biāo)貧乏鏈家品牌基因
3. 相對熟悉打聽的產(chǎn)品
只有相對熟悉打聽的產(chǎn)品，你對其的重設(shè)計才會相對不浮于表面。不過此次Icon的優(yōu)化主要是從視覺層面優(yōu)化。
三. 重設(shè)計展示
鏈家的4個Tab圖標(biāo)分別是首頁、消息、看房、我。接下來我們便用提取的理論來指導(dǎo)設(shè)計。
1. 提取特定形狀，直接軟件——首頁圖標(biāo)設(shè)計
鏈家現(xiàn)在的首頁圖標(biāo)與網(wǎng)上搜索的首頁圖標(biāo)，缺乏識別性，乃至和第一排第三個非常相似。
△ 鏈家首頁圖標(biāo)與網(wǎng)上搜索的首頁圖標(biāo)對比
實際上，鏈家Logo本身即是房屋的剪影，可以說曾經(jīng)具有首頁的含義，其本身的4個特點，使它比網(wǎng)上的圖形更具識別性。
△ 鏈家Logo與網(wǎng)上搜索的首頁圖標(biāo)
《用品牌基因作圖標(biāo)》理論的第一條，提取特定形狀直接軟件，對于鏈家首頁icon十分受用，于是我們確定使用logo圖形作為首頁icon。
我們把鏈家Logo的放到750*1334px的界面里，將其尺寸調(diào)整至42px后，鏈家Logo粗細(xì)為8px，而鏈家首頁icon粗細(xì)為3px，經(jīng)過優(yōu)化后將鏈家Logo粗細(xì)調(diào)整為4px。
△ 鏈家Logo直接軟件于界面
△ 鏈家Logo粗細(xì)調(diào)整為4px
2. 抓取風(fēng)格特點——消息圖標(biāo)設(shè)計
消息圖標(biāo)的設(shè)計，結(jié)合我們上面提取的鏈家Logo的4個特點 ：一條線、一個點、斷線、綠色。按下面的步驟逐一實現(xiàn)。
- 第一步：畫好基礎(chǔ)形。
- 第二步：在圖標(biāo)右下的位置斷開（鏈家Logo的斷開位置）。
- 第三部：增加點，增加品牌色。
△ 消息圖標(biāo)設(shè)計過程
3. 度的把握——我的圖標(biāo)設(shè)計
在設(shè)計我的圖標(biāo)時，一開始我是很執(zhí)著的使用之前提取的4個品牌特性，轉(zhuǎn)角圓潤的矩形、小圓角、右下角斷點、一條線組成整個圖形，但總是有點不對。
△ 我的圖標(biāo)設(shè)計探索
末了選定使用大一些圓角來過度，斷點也不執(zhí)著于右下角后，整個Icon視覺上就舒服多了。所以品牌特性也不能強(qiáng)加，協(xié)調(diào)、整體風(fēng)格符合即可。
△ 我的圖標(biāo)確定稿
剩下的圖標(biāo)如法炮制，4個Tab圖標(biāo)就搞定了。圖標(biāo)實現(xiàn)后更需要放入軟件的場景搜檢是否與之匹配。
△ 具有鏈家品牌特性的Tab圖標(biāo)
△ 優(yōu)化后的Tab圖標(biāo)在界面的軟件
4. 度的把握——8個進(jìn)口圖標(biāo)設(shè)計
Tab圖標(biāo)實現(xiàn)后，我們發(fā)現(xiàn)鏈家首頁的8個進(jìn)口圖標(biāo)也存在一些優(yōu)化空間。8個圖標(biāo)都使用了尖銳的轉(zhuǎn)角，與Logo的圓潤轉(zhuǎn)角不符。使用了矩形元素，而非Logo的圓點，缺乏一定的品牌特性。此外整個首頁的其余控件等也是相對圓潤，這使得8個有著尖銳直角的圖標(biāo)有一點突兀。此外視覺大小不一，片面圖標(biāo)細(xì)節(jié)繁雜。
△ 鏈家首頁8個進(jìn)口圖標(biāo)
由于Tab圖標(biāo)的設(shè)計曾經(jīng)有了明顯的特性，鏈家首頁的8個進(jìn)口圖標(biāo)的優(yōu)化便會更克制，僅增加了圓潤轉(zhuǎn)角、圓點2個品牌特性，使其有所呼應(yīng)即可。
△ 優(yōu)化后的鏈家首頁8個進(jìn)口圖標(biāo)
△ 優(yōu)化后的圖標(biāo)效果軟件效果
四. 思考總結(jié)
從「用品牌基因作圖標(biāo)」理論到實際，環(huán)節(jié)是品牌特性的提取，其次則是對品牌特性的靈活運用，而對品牌特性的運用程度把控是使整個圖標(biāo)協(xié)調(diào)的重點。
紙上得來終覺淺，絕知此事要躬行。理論經(jīng)過初步吸收后，實際既可以檢驗?zāi)闶欠裾娴恼莆樟死碚?，又可以?qiáng)化理論的深入理解。所以快去操縱來鞏固理論吧！