@Jenny黃靜雯 ：???相信很多同學(xué)會有，看理論的時候覺得很有道理，看完后卻不知該怎么實(shí)踐，久而久之便會產(chǎn)生「看過很多設(shè)計(jì)理論，卻仍做不好設(shè)計(jì)」的困惑。今天靜雯就來帶你從理論到實(shí)踐，用菜心設(shè)計(jì)鋪的《用品牌基因法做圖標(biāo)設(shè)計(jì)，這是高級UI設(shè)計(jì)師才會的手法！》理論來重設(shè)計(jì)鏈家Tab Icon。

文章大綱?：

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

一. 提取理論?

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

品牌基因的定義：視覺層面的品牌基因就是通過一件事物提取出一個（或一組）視覺符號。

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

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

支付寶將Logo應(yīng)用為Tab首頁圖標(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)過初步吸收后，實(shí)踐既可以檢驗(yàn)?zāi)闶欠裾娴恼莆樟死碚摚挚梢詮?qiáng)化對理論的深入理解。下面我們開始實(shí)踐吧！

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

?選擇合適的品牌形象來提取基因。要求：

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

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

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

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

?

△ 鏈家Logo及App Icon

經(jīng)過分析，我們提取出4個特點(diǎn)：

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

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

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

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

?

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

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

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

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

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

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

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

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

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

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

?《用品牌基因作圖標(biāo)》理論的第一條，提取特定形狀直接應(yīng)用，對于鏈家首頁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直接應(yīng)用于界面

?

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

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

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

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

?

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

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

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

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

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

?

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

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

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

?

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

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

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

?

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

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

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

?

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

四. 思考總結(jié)

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

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

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

「塑造優(yōu)秀細(xì)節(jié)設(shè)計(jì)」

• 《用品牌基因法做圖標(biāo)設(shè)計(jì)，高級UI設(shè)計(jì)師才會的手法！（升級篇）》
• 《用品牌基因法做圖標(biāo)設(shè)計(jì)，高級UI設(shè)計(jì)師才會的手法！（實(shí)戰(zhàn)篇）》
• 《網(wǎng)易資深設(shè)計(jì)師：視覺設(shè)計(jì)如何繼承品牌基因？》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com