@Jenny黃靜雯 ：???相信很多同學會有，看理論的時候覺得很有道理，看完后卻不知該怎么實踐，久而久之便會產生「看過很多設計理論，卻仍做不好設計」的困惑。今天靜雯就來帶你從理論到實踐，用菜心設計鋪的《用品牌基因法做圖標設計，這是高級UI設計師才會的手法！》理論來重設計鏈家Tab Icon。
文章大綱?：
- 提取理論
- 選擇合適的設計對象
- 實例展示
一. 提取理論?
文章使用的「用品牌基因法做圖標」理論源自菜心設計鋪。從理論到實踐的第一步是吸收理論關鍵點，從菜心的品牌基因法做圖標的方法中做了提煉。為方便閱讀本文，此處簡要介紹部分理論，詳情請同學們看原文好好吸收。?
品牌基因的定義：視覺層面的品牌基因就是通過一件事物提取出一個（或一組）視覺符號。
將品牌基因應用到圖標中的方法如下：?
1. 提取特定形狀，直接應用?
支付寶將Logo應用為Tab首頁圖標，same將Logo應用為我的圖標。?
△ 支付寶&same Logo在Tab圖標的應用
?2. 吸取品牌顏色
閑魚Tab圖標使用了品牌色——黃黑色。?
△ 閑魚Logo在Tab圖標的應用
?3. 抓取風格特點
網易美學Tab圖標使用了品牌的心形圖形和品牌色紅色。?
△ 網易美學Logo在Tab圖標的應用
?理論經過初步吸收后，實踐既可以檢驗你是否真的掌握了理論，又可以強化對理論的深入理解。下面我們開始實踐吧！
二. 選擇具有明顯特征的設計對象?
?選擇合適的品牌形象來提取基因。要求：
- 品牌特征明確，易提取易設計。
- 該品牌的Tab圖標缺少品牌特征。
- 比較熟悉了解的產品。
按照上述的三點，選擇了鏈家tab圖標進行重設計。
1. 品牌特征明確，易提取易設計
鏈家是二手房新房交易平臺，其品牌Logo是一所房子的剪影，App Icon直接應用了這個圖形。
?
△ 鏈家Logo及App Icon
經過分析，我們提取出4個特點：
- 一條線：一條轉角圓潤的矩形線條構成了房屋的剪影。
- 一個點：點睛之處，將圖形連為一體。
- 斷線：點與線之間斷開。
- 綠色：鏈家的品牌色。?
△ 鏈家Logo的4個特點
?2. 鏈家的Tab圖標缺少品牌特征
鏈家目前Tab圖標只有綠色這一個品牌基因在里面，這使它無法很好的與其他應用的圖標區分。因此尚存較大優化空間。
?
△ 鏈家App Tab圖標缺少鏈家品牌基因
?3. 比較熟悉了解的產品
只有比較熟悉了解的產品，你對其的重設計才會相對不浮于表面。不過此次Icon的優化主要是從視覺層面優化。
三. 重設計展示?
鏈家的4個Tab圖標分別是首頁、消息、看房、我。接下來我們便用提取的理論來指導設計。?
1. 提取特定形狀，直接應用——首頁圖標設計?
鏈家現在的首頁圖標與網上搜索的首頁圖標，缺乏識別性，甚至和第一排第三個非常相似。?
△ 鏈家首頁圖標與網上搜索的首頁圖標對比
?實際上，鏈家Logo本身就是房屋的剪影，可以說已經具有首頁的含義，其自身的4個特點，使它比網上的圖形更具識別性。
△ 鏈家Logo與網上搜索的首頁圖標
?《用品牌基因作圖標》理論的第一條，提取特定形狀直接應用，對于鏈家首頁icon十分受用，于是我們確定使用logo圖形作為首頁icon。
我們把鏈家Logo的放到750*1334px的界面里，將其尺寸調整至42px后，鏈家Logo粗細為8px，而鏈家首頁icon粗細為3px，經過優化后將鏈家Logo粗細調整為4px。
?
△ 鏈家Logo直接應用于界面
?
△ 鏈家Logo粗細調整為4px
2. 抓取風格特點——消息圖標設計?
消息圖標的設計，結合我們上面提取的鏈家Logo的4個特點 ：一條線、一個點、斷線、綠色。按下面的步驟逐一完成。
- 第一步：畫好基礎形。
- 第二步：在圖標右下的位置斷開（鏈家Logo的斷開位置）。
- 第三部：添加點，添加品牌色。
?
△ 消息圖標設計過程
?3. 度的把握——我的圖標設計
在設計我的圖標時，一開始我是很執著的使用之前提取的4個品牌特征，轉角圓潤的矩形、小圓角、右下角斷點、一條線構成整個圖形，但總是有點不對。?
△ 我的圖標設計探索
?最后選擇使用大一些圓角來過度，斷點也不執著于右下角后，整個Icon視覺上就舒服多了。所以品牌特征也不能強加，協調、整體風格符合即可。
?
△ 我的圖標確定稿
剩下的圖標如法炮制，4個Tab圖標就搞定了。圖標完成后更需要放入應用的場景檢查是否與之匹配。?
△ 具有鏈家品牌特征的Tab圖標
?
△ 優化后的Tab圖標在界面的應用
?4. 度的把握——8個入口圖標設計
Tab圖標完成后，我們發現鏈家首頁的8個入口圖標也存在一些優化空間。8個圖標都使用了尖銳的轉角，與Logo的圓潤轉角不符。使用了矩形元素，而非Logo的圓點，缺乏一定的品牌特征。此外整個首頁的其他控件等也是比較圓潤，這使得8個有著尖銳直角的圖標有一點突兀。此外視覺大小不一，部分圖標細節繁雜。
?
△ 鏈家首頁8個入口圖標
?由于Tab圖標的設計已經有了明顯的特征，鏈家首頁的8個入口圖標的優化便會更克制，僅添加了圓潤轉角、圓點2個品牌特征，使其有所呼應即可。
△ 優化后的鏈家首頁8個入口圖標
?
△ 優化后的圖標效果應用效果
四. 思考總結
從「用品牌基因作圖標」理論到實踐，關鍵是品牌特征的提取，其次則是對品牌特征的靈活運用，而對品牌特征的運用程度把控是使整個圖標協調的重點。
紙上得來終覺淺，絕知此事要躬行。理論經過初步吸收后，實踐既可以檢驗你是否真的掌握了理論，又可以強化理論的深入理解。所以快去操作來鞏固理論吧！?????
歡迎關注作者的微信公眾號：「Jenny黃靜雯」
「塑造優秀細節設計」
================明星欄目推薦================
優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。
設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
MJ+SD智能設計
已累計誕生 772 位幸運星
發表評論 為下方 1 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓