重設計鏈家Tab Icon:用品牌基因法搞定圖標設計

4 評論 9215 瀏覽 42 收藏 11 分鐘

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

文章大綱?:

  • 提取理論
  • 選擇合適的設計對象
  • 實例展示

一. 提取理論?

文章使用的「用品牌基因法做圖標」理論源自菜心設計鋪。從理論到實踐的第一步是吸收理論關鍵點,從菜心的品牌基因法做圖標的方法中做了提煉。為方便閱讀本文,此處簡要介紹部分理論,詳情請同學們看原文好好吸收。?

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

將品牌基因應用到圖標中的方法如下:?

1. 提取特定形狀,直接應用?

支付寶將Logo應用為Tab首頁圖標,same將Logo應用為我的圖標。?

△ 支付寶&same Logo在Tab圖標的應用

?2. 吸取品牌顏色

閑魚Tab圖標使用了品牌色——黃黑色。?

△ 閑魚Logo在Tab圖標的應用

?3. 抓取風格特點

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

△ 網(wǎng)易美學Logo在Tab圖標的應用

?理論經(jīng)過初步吸收后,實踐既可以檢驗你是否真的掌握了理論,又可以強化對理論的深入理解。下面我們開始實踐吧!

二. 選擇具有明顯特征的設計對象?

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

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

按照上述的三點,選擇了鏈家tab圖標進行重設計。

1. 品牌特征明確,易提取易設計

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

?

△ 鏈家Logo及App Icon

經(jīng)過分析,我們提取出4個特點:

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

△ 鏈家Logo的4個特點

?2. 鏈家的Tab圖標缺少品牌特征

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

?

△ 鏈家App Tab圖標缺少鏈家品牌基因

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

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

三. 重設計展示?

鏈家的4個Tab圖標分別是首頁、消息、看房、我。接下來我們便用提取的理論來指導設計。?

1. 提取特定形狀,直接應用——首頁圖標設計?

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

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

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

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

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

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

?

△ 鏈家Logo直接應用于界面

?

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

2. 抓取風格特點——消息圖標設計?

消息圖標的設計,結(jié)合我們上面提取的鏈家Logo的4個特點 :一條線、一個點、斷線、綠色。按下面的步驟逐一完成。

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

△ 消息圖標設計過程

?3. 度的把握——我的圖標設計

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

△ 我的圖標設計探索

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

△ 我的圖標確定稿

剩下的圖標如法炮制,4個Tab圖標就搞定了。圖標完成后更需要放入應用的場景檢查是否與之匹配。?

△ 具有鏈家品牌特征的Tab圖標

?

△ 優(yōu)化后的Tab圖標在界面的應用

?4. 度的把握——8個入口圖標設計

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

?

△ 鏈家首頁8個入口圖標

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

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

?

△ 優(yōu)化后的圖標效果應用效果

四. 思考總結(jié)

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

紙上得來終覺淺,絕知此事要躬行。理論經(jīng)過初步吸收后,實踐既可以檢驗你是否真的掌握了理論,又可以強化理論的深入理解。所以快去操作來鞏固理論吧!?????

 

作者:Jenny黃靜雯?(微信公眾號:「Jenny黃靜雯」),平安銀行視覺&插畫設計師。微博設計美學博主,花瓣認證設計師,優(yōu)優(yōu)網(wǎng)入駐設計講師,深圳市插畫協(xié)會專業(yè)會員,視覺中國簽約設計師。

本文由 @Jenny黃靜雯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Pixabay,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 我是覺得優(yōu)化的還可以

    來自上海 回復
  2. 說圓角可以。但不要隨便動別人細節(jié) 你優(yōu)化的并不好

    回復
    1. 用綠色可以理解。
      不小心贊了下。

      回復
  3. 品牌基因法在設計圖標時很有指導作用,但是個人覺得作者在鏈家APP上的應用上沒有真正的出到很好優(yōu)化的效果.

    來自廣東 回復