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

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

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

更多設計復盤：

一、“形”-方圓之間融萬物

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

形態(tài)是圖標設計的根基，不同的形態(tài)能賦予用戶截然不同的感官體驗。

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

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

2. 與符號的結合

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

3. 線條的運用

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

二、“意”-功能與情感表達

圖標作為頁面中最醒目的視覺元素，其能否直觀表達功能或信息，直接影響用戶體驗。

因此，打造讓用戶看得懂、有共鳴的圖標設計，是我們此次設計的核心目標。

1. 選擇具有普遍認知的形象

我們秉持 “以用戶為中心” 的理念，在圖標設計中只選用具有普遍認知的形象。例如工作對應公文包工卡，二手車對應車子，生活服務對應抹布刷子等。

這些形象簡單易懂，無需過多解釋，用戶便能快速理解圖標的含義。

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

為了讓扁平的圖標更具真實感和立體感，我們在圖標中巧妙地加入適量的光影和細節(jié)刻畫。不僅使圖標更加生動形象，還能讓表意更加清晰準確，讓用戶在使用過程中一目了然。

3. 情感的共鳴

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

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

三、“色”-色彩的巧妙運用

色彩在圖標設計中起著舉足輕重的作用，它能賦予圖標獨特的視覺吸引力。

1. 色彩體系的建立

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

2. 圖標色彩的搭配

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

在圖標中，通過色彩圖形的虛實搭配，既突出了設計風格，又增添了趣味性，使圖標在眾多視覺元素中脫穎而出，吸引用戶的目光。

四、“境”-營造沉浸式體驗

1. 視覺層級的搭建

作為一個大型的平臺型產品，圖標的視覺層級搭建至關重要。合理的層級設計，既能清晰梳理平臺與各業(yè)務線的層級關系，又能有效調動用戶的感官體驗，避免視覺疲勞。

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

2. 場景適用性

當然場景的適用性同樣在我們的考量之中。

我們在平臺首頁的主金剛區(qū)圖標設計中加入更多光影和質感的細節(jié)設計，突出其重要性和引導性。

二級圖標我們設計更為扁平，尺寸也相對減小，對比突出的同時不影響本身識別性。

三級圖標則使用線性圖標，更符合功能性入口的場景屬性。

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

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

1. 規(guī)范的搭建

我們沉淀了一套全面的圖標設計視覺規(guī)范文檔，內容涵蓋理念介紹，基礎刪格，倍率，形狀符號，圖形特點，使用場景等各個方面。用于指導設計師的設計工作。

同時，我們將所有產出的圖標進行匯總整理，方便設計師快速查找和使用，提高設計效率。

2. 科學驗證

設計的優(yōu)劣不能僅憑個人喜好評判，而需要科學的驗證。在整個設計過程中，我們始終堅持通過量化評估來指導每一項設計產出。通過收集用戶反饋、分析數據等方式，對設計進行不斷優(yōu)化，確保每一次改進都能切實提升用戶體驗，讓設計真正服務于用戶。

寫在最后

在探索圖標設計的過程中。我們深刻認識到，圖標雖小，卻承載著連接用戶與產品、激發(fā)情感共鳴的巨大能量。

實踐中，我們通過形態(tài)設計，功能表意，色彩搭配，層級搭建等方面達成最終的設計產出。并通過規(guī)范的制定和科學驗證指導后續(xù)設計。

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