為什么你的圖標(biāo)不夠?qū)I(yè)？大廠高手用實(shí)戰(zhàn)案例教會(huì)你！

2024 年 58 同城迎來(lái)了意義深遠(yuǎn)的企業(yè)文化煥新，借此東風(fēng)，我們順勢(shì)完成了產(chǎn)品視覺(jué)的全面升級(jí)。并確定了簡(jiǎn)單有效，美好安樂(lè)，多元融合和自然生長(zhǎng)作為主要原則的設(shè)計(jì)理念。這一理念，不僅是對(duì)產(chǎn)品視覺(jué)升級(jí)的指引，更是我們與用戶建立深度連接的精神紐帶。

在著手 icon 設(shè)計(jì)之初，老子《道德經(jīng)》中“大方無(wú)隅”一詞在我腦海閃現(xiàn)，而其體現(xiàn)出的開(kāi)放，包容，和諧，自然等哲學(xué)觀，與我們的設(shè)計(jì)原則不謀而合。為此次 icon 設(shè)計(jì)指明了方向。

接下來(lái)，我將從形、意、色、境、規(guī)五個(gè)維度，為大家分享這次的 icon 設(shè)計(jì)之旅。

更多設(shè)計(jì)復(fù)盤：

一、“形”-方圓之間融萬(wàn)物

1. 形態(tài)的確定

形態(tài)是圖標(biāo)設(shè)計(jì)的根基，不同的形態(tài)能賦予用戶截然不同的感官體驗(yàn)。

我們從最基礎(chǔ)的方形和圓形出發(fā)，方形象征著規(guī)矩、法則與穩(wěn)定，如同堅(jiān)固基石，代表著產(chǎn)品的規(guī)則與秩序；圓形則寓意著和諧、包容與流動(dòng)，恰似潺潺流水，展現(xiàn)出與用戶和諧共處的態(tài)度。

基于設(shè)計(jì)原則，我們將方圓進(jìn)行巧妙融合，設(shè)計(jì)出一種方中有圓，方圓結(jié)合的基礎(chǔ)形態(tài)。既體現(xiàn)了對(duì)產(chǎn)品規(guī)則的尊重，又傳遞出產(chǎn)品與用戶和諧統(tǒng)一的態(tài)度。

2. 與符號(hào)的結(jié)合

58 同城擁有豐富多樣的業(yè)務(wù)線，每個(gè)業(yè)務(wù)線都有其獨(dú)特的屬性和特色。為此我們精心打造了專屬符號(hào)。那么在圖標(biāo)的設(shè)計(jì)之中，我們便將符號(hào)融入其中。讓圖標(biāo)更多的傳遞業(yè)務(wù)屬性，激活用戶的感知度。

3. 線條的運(yùn)用

在線條的選擇上，我們始終圍繞方圓結(jié)合的形態(tài)設(shè)定，摒棄生硬的直線，轉(zhuǎn)而追求流暢的弧線與曲線。力求體現(xiàn)和諧，自然，舒適的原則和體驗(yàn)。

二、“意”-功能與情感表達(dá)

圖標(biāo)作為頁(yè)面中最醒目的視覺(jué)元素，其能否直觀表達(dá)功能或信息，直接影響用戶體驗(yàn)。

因此，打造讓用戶看得懂、有共鳴的圖標(biāo)設(shè)計(jì)，是我們此次設(shè)計(jì)的核心目標(biāo)。

1. 選擇具有普遍認(rèn)知的形象

我們秉持 “以用戶為中心” 的理念，在圖標(biāo)設(shè)計(jì)中只選用具有普遍認(rèn)知的形象。例如工作對(duì)應(yīng)公文包工卡，二手車對(duì)應(yīng)車子，生活服務(wù)對(duì)應(yīng)抹布刷子等。

這些形象簡(jiǎn)單易懂，無(wú)需過(guò)多解釋，用戶便能快速理解圖標(biāo)的含義。

2. 細(xì)節(jié)的呈現(xiàn)

為了讓扁平的圖標(biāo)更具真實(shí)感和立體感，我們?cè)趫D標(biāo)中巧妙地加入適量的光影和細(xì)節(jié)刻畫。不僅使圖標(biāo)更加生動(dòng)形象，還能讓表意更加清晰準(zhǔn)確，讓用戶在使用過(guò)程中一目了然。

3. 情感的共鳴

我們深知，優(yōu)秀的設(shè)計(jì)不僅要滿足功能需求，更要觸動(dòng)用戶的情感。

通過(guò)形態(tài)的建立，色彩的搭配以及細(xì)節(jié)的打磨，我們致力于為用戶帶來(lái)感官上的愉悅，引發(fā)情感共鳴，讓用戶在使用 58 同城的過(guò)程中感受到溫暖與關(guān)懷。

三、“色”-色彩的巧妙運(yùn)用

色彩在圖標(biāo)設(shè)計(jì)中起著舉足輕重的作用，它能賦予圖標(biāo)獨(dú)特的視覺(jué)吸引力。

1. 色彩體系的建立

我們基于 58 品牌色重新拓展了色彩體系，將原有的 4 種 58 品牌色融入其中。由原來(lái)的單一標(biāo)準(zhǔn)色擴(kuò)展至 5 個(gè)標(biāo)準(zhǔn)色，并將其與業(yè)務(wù)進(jìn)行了關(guān)聯(lián)。充分展現(xiàn)了 58 色彩系統(tǒng)的開(kāi)放性與包容性，為品牌形象注入了新的活力。

2. 圖標(biāo)色彩的搭配

我們將全新的色彩體系融入圖標(biāo)設(shè)計(jì)之中，為各業(yè)務(wù)線圖標(biāo)注入靈魂。

在圖標(biāo)中，通過(guò)色彩圖形的虛實(shí)搭配，既突出了設(shè)計(jì)風(fēng)格，又增添了趣味性，使圖標(biāo)在眾多視覺(jué)元素中脫穎而出，吸引用戶的目光。

四、“境”-營(yíng)造沉浸式體驗(yàn)

1. 視覺(jué)層級(jí)的搭建

作為一個(gè)大型的平臺(tái)型產(chǎn)品，圖標(biāo)的視覺(jué)層級(jí)搭建至關(guān)重要。合理的層級(jí)設(shè)計(jì)，既能清晰梳理平臺(tái)與各業(yè)務(wù)線的層級(jí)關(guān)系，又能有效調(diào)動(dòng)用戶的感官體驗(yàn)，避免視覺(jué)疲勞。

我們將圖標(biāo)大致劃分為三個(gè)層級(jí)：第一層級(jí)適用于平臺(tái)首頁(yè)的主金剛區(qū)，這里的圖標(biāo)是用戶進(jìn)入平臺(tái)后首先關(guān)注的焦點(diǎn)，需要突出重要性和引導(dǎo)性；第二層級(jí)適用于平臺(tái)首頁(yè)的副金剛區(qū)以及業(yè)務(wù)大類頁(yè)的金剛區(qū)，在保證識(shí)別性的同時(shí)，與第一層級(jí)形成對(duì)比；第三層級(jí)適用于個(gè)人中心等功能入口區(qū)域，以簡(jiǎn)潔的設(shè)計(jì)滿足功能性需求。

2. 場(chǎng)景適用性

當(dāng)然場(chǎng)景的適用性同樣在我們的考量之中。

我們?cè)谄脚_(tái)首頁(yè)的主金剛區(qū)圖標(biāo)設(shè)計(jì)中加入更多光影和質(zhì)感的細(xì)節(jié)設(shè)計(jì)，突出其重要性和引導(dǎo)性。

二級(jí)圖標(biāo)我們?cè)O(shè)計(jì)更為扁平，尺寸也相對(duì)減小，對(duì)比突出的同時(shí)不影響本身識(shí)別性。

三級(jí)圖標(biāo)則使用線性圖標(biāo)，更符合功能性入口的場(chǎng)景屬性。

五、“規(guī)”-規(guī)矩定方圓

“無(wú)規(guī)矩不成方圓”，優(yōu)秀的圖標(biāo)設(shè)計(jì)離不開(kāi)完善的設(shè)計(jì)規(guī)范。規(guī)范的制定，能確保不同設(shè)計(jì)師在后續(xù)設(shè)計(jì)過(guò)程中保持一致性，提升整體設(shè)計(jì)質(zhì)量。

1. 規(guī)范的搭建

我們沉淀了一套全面的圖標(biāo)設(shè)計(jì)視覺(jué)規(guī)范文檔，內(nèi)容涵蓋理念介紹，基礎(chǔ)刪格，倍率，形狀符號(hào)，圖形特點(diǎn)，使用場(chǎng)景等各個(gè)方面。用于指導(dǎo)設(shè)計(jì)師的設(shè)計(jì)工作。

同時(shí)，我們將所有產(chǎn)出的圖標(biāo)進(jìn)行匯總整理，方便設(shè)計(jì)師快速查找和使用，提高設(shè)計(jì)效率。

2. 科學(xué)驗(yàn)證

設(shè)計(jì)的優(yōu)劣不能僅憑個(gè)人喜好評(píng)判，而需要科學(xué)的驗(yàn)證。在整個(gè)設(shè)計(jì)過(guò)程中，我們始終堅(jiān)持通過(guò)量化評(píng)估來(lái)指導(dǎo)每一項(xiàng)設(shè)計(jì)產(chǎn)出。通過(guò)收集用戶反饋、分析數(shù)據(jù)等方式，對(duì)設(shè)計(jì)進(jìn)行不斷優(yōu)化，確保每一次改進(jìn)都能切實(shí)提升用戶體驗(yàn)，讓設(shè)計(jì)真正服務(wù)于用戶。

寫在最后

在探索圖標(biāo)設(shè)計(jì)的過(guò)程中。我們深刻認(rèn)識(shí)到，圖標(biāo)雖小，卻承載著連接用戶與產(chǎn)品、激發(fā)情感共鳴的巨大能量。

實(shí)踐中，我們通過(guò)形態(tài)設(shè)計(jì)，功能表意，色彩搭配，層級(jí)搭建等方面達(dá)成最終的設(shè)計(jì)產(chǎn)出。并通過(guò)規(guī)范的制定和科學(xué)驗(yàn)證指導(dǎo)后續(xù)設(shè)計(jì)。

未來(lái)，我們將繼續(xù)秉持這一設(shè)計(jì)理念，不斷探索創(chuàng)新，為用戶帶來(lái)更優(yōu)質(zhì)、更具溫度的設(shè)計(jì)體驗(yàn)。