相信很多同學(xué)會(huì)有，看理論的時(shí)候覺得很有道理，看完后卻不知該怎么實(shí)踐，久而久之便會(huì)產(chǎn)生「看過(guò)很多設(shè)計(jì)理論，卻仍做不好設(shè)計(jì)」的困惑。今天靜雯就來(lái)帶你從理論到實(shí)踐，用菜心設(shè)計(jì)鋪的《經(jīng)驗(yàn)分享|利用品牌基因法進(jìn)行圖標(biāo)設(shè)計(jì)》理論來(lái)重設(shè)計(jì)鏈家Tab Icon。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供雞西網(wǎng)站建設(shè)、雞西做網(wǎng)站、雞西網(wǎng)站設(shè)計(jì)、雞西網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、雞西企業(yè)網(wǎng)站模板建站服務(wù)，十年雞西做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

文章大綱：

提取理論

選擇合適的設(shè)計(jì)對(duì)象

實(shí)例展示

一. 提取理論

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

品牌基因的定義：視覺層面的品牌基因就是通過(guò)一件事物提取出一個(gè)(或一組)視覺符號(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)化主要是從視覺層面優(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視覺上就舒服多了。所以品牌特征也不能強(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)突兀。此外視覺大小不一，部分圖標(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)終覺淺，絕知此事要躬行。理論經(jīng)過(guò)初步吸收后，實(shí)踐既可以檢驗(yàn)?zāi)闶欠裾娴恼莆樟死碚摚挚梢詮?qiáng)化理論的深入理解。所以快去操作來(lái)鞏固理論吧!

作者：Jenny黃靜雯 (微信公眾號(hào)：「Jenny黃靜雯」)，平安銀行視覺&插畫設(shè)計(jì)師。微博設(shè)計(jì)美學(xué)博主，花瓣認(rèn)證設(shè)計(jì)師，優(yōu)優(yōu)網(wǎng)入駐設(shè)計(jì)講師，深圳市插畫協(xié)會(huì)專業(yè)會(huì)員，視覺中國(guó)簽約設(shè)計(jì)師。

本文由 @Jenny黃靜雯 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pixabay，基于 CC0 協(xié)議

文章題目：重設(shè)計(jì)鏈家TabIcon：用品牌基因法搞定圖標(biāo)設(shè)計(jì)
文章分享：http://jinyejixie.com/article2/chocic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站、自適應(yīng)網(wǎng)站、網(wǎng)站排名、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)