“大方無隅”-58改版設(shè)計icon篇
58 同城以 “大方無隅” 哲學(xué)為引領(lǐng),從形、意、色、境、規(guī)五維度出發(fā),完成產(chǎn)品視覺升級,體現(xiàn)了對規(guī)則與秩序的尊重及與用戶的和諧相處。
2024年58同城迎來了意義深遠的企業(yè)文化煥新,借此東風(fēng),我們順勢完成了產(chǎn)品視覺的全面升級。并確定了簡單有效,美好安樂,多元融合和自然生長作為主要原則的設(shè)計理念。這一理念,不僅是對產(chǎn)品視覺升級的指引,更是我們與用戶建立深度連接的精神紐帶。
在著手icon設(shè)計之初,老子《道德經(jīng)》中“大方無隅”一詞在我腦海閃現(xiàn),而其體現(xiàn)出的開放,包容,和諧,自然等哲學(xué)觀,與我們的設(shè)計原則不謀而合。為此次icon設(shè)計指明了方向。
接下來,我將從形、意、色、境、規(guī)五個維度,為大家分享這次的icon設(shè)計之旅。
“形”-方圓之間融萬物
1.形態(tài)的確定
形態(tài)是圖標設(shè)計的根基,不同的形態(tài)能賦予用戶截然不同的感官體驗。
我們從最基礎(chǔ)的方形和圓形出發(fā),方形象征著規(guī)矩、法則與穩(wěn)定,如同堅固基石,代表著產(chǎn)品的規(guī)則與秩序;圓形則寓意著和諧、包容與流動,恰似潺潺流水,展現(xiàn)出與用戶和諧共處的態(tài)度。
基于設(shè)計原則,我們將方圓進行巧妙融合,設(shè)計出一種方中有圓,方圓結(jié)合的基礎(chǔ)形態(tài)。既體現(xiàn)了對產(chǎn)品規(guī)則的尊重,又傳遞出產(chǎn)品與用戶和諧統(tǒng)一的態(tài)度。
2.與符號的結(jié)合
58 同城擁有豐富多樣的業(yè)務(wù)線,每個業(yè)務(wù)線都有其獨特的屬性和特色。為此我們精心打造了專屬符號。那么在圖標的設(shè)計之中,我們便將符號融入其中。讓圖標更多的傳遞業(yè)務(wù)屬性,激活用戶的感知度。
3.線條的運用
在線條的選擇上,我們始終圍繞方圓結(jié)合的形態(tài)設(shè)定,摒棄生硬的直線,轉(zhuǎn)而追求流暢的弧線與曲線。力求體現(xiàn)和諧,自然,舒適的原則和體驗。
“意”-功能與情感表達
圖標作為頁面中最醒目的視覺元素,其能否直觀表達功能或信息,直接影響用戶體驗。
因此,打造讓用戶看得懂、有共鳴的圖標設(shè)計,是我們此次設(shè)計的核心目標。
1.選擇具有普遍認知的形象
我們秉持 “以用戶為中心” 的理念,在圖標設(shè)計中只選用具有普遍認知的形象。例如工作對應(yīng)公文包工卡,二手車對應(yīng)車子,生活服務(wù)對應(yīng)抹布刷子等。
這些形象簡單易懂,無需過多解釋,用戶便能快速理解圖標的含義。
2.細節(jié)的呈現(xiàn)
為了讓扁平的圖標更具真實感和立體感,我們在圖標中巧妙地加入適量的光影和細節(jié)刻畫。不僅使圖標更加生動形象,還能讓表意更加清晰準確,讓用戶在使用過程中一目了然。
3.情感的共鳴
我們深知,優(yōu)秀的設(shè)計不僅要滿足功能需求,更要觸動用戶的情感。
通過形態(tài)的建立,色彩的搭配以及細節(jié)的打磨,我們致力于為用戶帶來感官上的愉悅,引發(fā)情感共鳴,讓用戶在使用 58 同城的過程中感受到溫暖與關(guān)懷。
“色”-色彩的巧妙運用
色彩在圖標設(shè)計中起著舉足輕重的作用,它能賦予圖標獨特的視覺吸引力。
1.色彩體系的建立
我們基于58品牌色重新拓展了色彩體系,將原有的4種58品牌色融入其中。由原來的單一標準色擴展至5個標準色,并將其與業(yè)務(wù)進行了關(guān)聯(lián)。充分展現(xiàn)了 58 色彩系統(tǒng)的開放性與包容性,為品牌形象注入了新的活力。
2.圖標色彩的搭配
我們將全新的色彩體系融入圖標設(shè)計之中,為各業(yè)務(wù)線圖標注入靈魂。
在圖標中,通過色彩圖形的虛實搭配,既突出了設(shè)計風(fēng)格,又增添了趣味性,使圖標在眾多視覺元素中脫穎而出,吸引用戶的目光。
“境”-營造沉浸式體驗
1.視覺層級的搭建
作為一個大型的平臺型產(chǎn)品,圖標的視覺層級搭建至關(guān)重要。合理的層級設(shè)計,既能清晰梳理平臺與各業(yè)務(wù)線的層級關(guān)系,又能有效調(diào)動用戶的感官體驗,避免視覺疲勞。
我們將圖標大致劃分為三個層級:第一層級適用于平臺首頁的主金剛區(qū),這里的圖標是用戶進入平臺后首先關(guān)注的焦點,需要突出重要性和引導(dǎo)性;第二層級適用于平臺首頁的副金剛區(qū)以及業(yè)務(wù)大類頁的金剛區(qū),在保證識別性的同時,與第一層級形成對比;第三層級適用于個人中心等功能入口區(qū)域,以簡潔的設(shè)計滿足功能性需求。
2.場景適用性
當然場景的適用性同樣在我們的考量之中。
我們在平臺首頁的主金剛區(qū)圖標設(shè)計中加入更多光影和質(zhì)感的細節(jié)設(shè)計,突出其重要性和引導(dǎo)性。
二級圖標我們設(shè)計更為扁平,尺寸也相對減小,對比突出的同時不影響本身識別性。
三級圖標則使用線性圖標,更符合功能性入口的場景屬性。
“規(guī)”-規(guī)矩定方圓
“無規(guī)矩不成方圓”,優(yōu)秀的圖標設(shè)計離不開完善的設(shè)計規(guī)范。規(guī)范的制定,能確保不同設(shè)計師在后續(xù)設(shè)計過程中保持一致性,提升整體設(shè)計質(zhì)量。
1.規(guī)范的搭建
我們沉淀了一套全面的圖標設(shè)計視覺規(guī)范文檔,內(nèi)容涵蓋理念介紹,基礎(chǔ)刪格,倍率,形狀符號,圖形特點,使用場景等各個方面。用于指導(dǎo)設(shè)計師的設(shè)計工作。
同時,我們將所有產(chǎn)出的圖標進行匯總整理,方便設(shè)計師快速查找和使用,提高設(shè)計效率。
2.科學(xué)驗證
設(shè)計的優(yōu)劣不能僅憑個人喜好評判,而需要科學(xué)的驗證。在整個設(shè)計過程中,我們始終堅持通過量化評估來指導(dǎo)每一項設(shè)計產(chǎn)出。通過收集用戶反饋、分析數(shù)據(jù)等方式,對設(shè)計進行不斷優(yōu)化,確保每一次改進都能切實提升用戶體驗,讓設(shè)計真正服務(wù)于用戶。
寫在最后
在探索圖標設(shè)計的過程中。我們深刻認識到,圖標雖小,卻承載著連接用戶與產(chǎn)品、激發(fā)情感共鳴的巨大能量。
實踐中,我們通過形態(tài)設(shè)計,功能表意,色彩搭配,層級搭建等方面達成最終的設(shè)計產(chǎn)出。并通過規(guī)范的制定和科學(xué)驗證指導(dǎo)后續(xù)設(shè)計。
未來,我們將繼續(xù)秉持這一設(shè)計理念,不斷探索創(chuàng)新,為用戶帶來更優(yōu)質(zhì)、更具溫度的設(shè)計體驗。
本文由人人都是產(chǎn)品經(jīng)理作者【58UXD】,微信公眾號:【58UXD】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于 CC0 協(xié)議。
- 目前還沒評論,等你發(fā)揮!