首頁(yè)

扁平化設(shè)計(jì)終結(jié)?新趨勢(shì)來(lái)了?

天宇 圖標(biāo)設(shè)計(jì)文章及欣賞

扁平化設(shè)計(jì)這一趨勢(shì)已經(jīng)流行了挺長(zhǎng)時(shí)間,而現(xiàn)在,設(shè)計(jì)風(fēng)向似乎要有所轉(zhuǎn)變了,這或許可以從一些設(shè)計(jì)案例中透露出來(lái)。這篇文章里,作者就從案例出發(fā),展示了設(shè)計(jì)趨勢(shì)的演變,一起來(lái)看看吧。

設(shè)計(jì)趨勢(shì)來(lái)來(lái)去去,但一個(gè)普遍的趨勢(shì)已經(jīng)流行了很長(zhǎng)時(shí)間,那就是扁平化設(shè)計(jì),現(xiàn)在也幾乎是無(wú)處不在,UI中的按鈕,Logo,圖形設(shè)計(jì)等等。

最近感覺(jué)設(shè)計(jì)風(fēng)向有點(diǎn)變啊,我碰到幾個(gè)例子感覺(jué)挺有意思的,似乎是印證了這波轉(zhuǎn)變。

在這篇文章里,我主要聚焦在UI設(shè)計(jì)領(lǐng)域,看看設(shè)計(jì)趨勢(shì)在這方面都經(jīng)歷了哪些變化。

一、扁平化設(shè)計(jì)趨勢(shì)是怎么興起的?

2013 年蘋果推出 iOS 7 后,扁平化設(shè)計(jì)火得一塌糊涂,界面設(shè)計(jì)方向一夜之間發(fā)生了轉(zhuǎn)變。雖然蘋果也是借鑒了其他制造商已經(jīng)應(yīng)用的元素,但其作為行業(yè)風(fēng)向標(biāo)的影響力依然無(wú)人能及。

從擬物到扁平,iOS 7 帶來(lái)了革命性的設(shè)計(jì)語(yǔ)言飛躍,顛覆了之前 iOS 的視覺(jué)風(fēng)格。蒂姆·庫(kù)克將其稱為 “iPhone 以來(lái) iOS 最大的變革”。

看上圖就一目了然(iOS 6 左,iOS 7 右),iOS 7 砍掉了許多元素的 3D 效果,整體扁平了很多。其實(shí)改成這樣是有道理的,畢竟擬物設(shè)計(jì)當(dāng)初是為了讓用戶更快上手新界面,現(xiàn)在大家都習(xí)慣了,設(shè)計(jì)語(yǔ)言也需要更新迭代了。

十年過(guò)去了,絕大部分現(xiàn)代界面設(shè)計(jì)依然在用這種設(shè)計(jì)語(yǔ)言。然而,隨著設(shè)計(jì)逐漸追求更多復(fù)雜性和立體感(是的,又是3D,回到擬物設(shè)計(jì)),一些方面也開始出現(xiàn)變化。讓我們來(lái)看看幾個(gè)近期的例子。

值得說(shuō)的是,盡管蘋果公司在引領(lǐng)扁平化設(shè)計(jì)趨勢(shì)方面發(fā)揮了重要作用,但其實(shí)靈感還是來(lái)自Windows Mobile 和 Android 等產(chǎn)品。Windows Mobile 才是先在主流制造商中第一個(gè)用扁平化設(shè)計(jì)的大廠。

對(duì)這段歷史感興趣的可以看看這篇10年前寫的文章:https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences

二、Reddit 品牌設(shè)計(jì)刷新

先一起看看最近的一個(gè)大廠設(shè)計(jì)改版案例,Reddit最近刷新了它的Logo。你能從上面的圖中看到,相比于舊版,新的設(shè)計(jì)有了一些3D風(fēng)格化。

一直以來(lái),扁平化logo是主流,但隨著像Pentagram這樣的設(shè)計(jì)大廠都開始探索3D化設(shè)計(jì)風(fēng)格,預(yù)示著扁平化的時(shí)代就快要過(guò)去了。

現(xiàn)代的品牌logo設(shè)計(jì)大多是扁平的,因?yàn)檫@樣既清晰易讀又方便調(diào)整大小。真想看看其他公司接下來(lái)會(huì)怎么玩品牌設(shè)計(jì)。

三、MacOS Big Sur 圖標(biāo)

回到2020年,在那年的11月,蘋果刷新了它們的MacOS圖標(biāo)風(fēng)格。我個(gè)人認(rèn)為,這是在細(xì)節(jié)設(shè)計(jì)上搭配更多3D效果這股趨勢(shì)的源頭,我在網(wǎng)上看到了很多這樣的討論。

從 Big Sur 開始,蘋果就在圖標(biāo)上下功夫,給原生應(yīng)用圖標(biāo)加料,讓它們看起來(lái)不那么乏味。你看上面那些,陰影也深了,漸變也多了,整個(gè)圖標(biāo)更有立體感。

一看蘋果都整 3D 了,不少第三方應(yīng)用開發(fā)商也坐不住了,紛紛改起了自家圖標(biāo),看起來(lái)更立體了。

蘋果在界面設(shè)計(jì)上向來(lái)引領(lǐng)潮流,這次的新趨勢(shì),又不知道多少公司和個(gè)人會(huì)跟著玩。

四、Airbnb 新版本設(shè)計(jì)

Airbnb在最近的夏冬主題設(shè)計(jì)更新里,玩了不少 3D 和復(fù)雜設(shè)計(jì)。就拿它們新出的“游客護(hù)照”來(lái)說(shuō)吧,圖標(biāo)就跟真“書”似的,點(diǎn)開交互還有翻書動(dòng)畫,賊逼真。

游客護(hù)照打開后,頂部卡片加了陰影,看著更有立體感,一點(diǎn)都不扁了。

Airbnb 在其他地方也玩兒 3D 了,比如“最受歡迎”那個(gè)地方,評(píng)分都立體起來(lái)了,還有那個(gè)改版后的“選月份”的按鈕,做得跟真表盤似的。

最后,他們冬天的新版本里,插畫也搞起了等角投影風(fēng)格,給你們看下面他們那個(gè)新版本宣傳片就知道了。

五、Shopify更新了設(shè)計(jì)系統(tǒng)

Shopify 對(duì)深受好評(píng)的設(shè)計(jì)系統(tǒng) Polaris 進(jìn)行了重大更新,換了套新花樣!以前那些扁平的按鈕,現(xiàn)在縮小了,還更帶感了,按著賊舒服。

這次重設(shè)計(jì)也不是瞎改,當(dāng)初設(shè)計(jì)團(tuán)隊(duì)說(shuō)扁平化做能讓界面干凈,理解簡(jiǎn)單,用著還效率高。可時(shí)間一長(zhǎng),商家們就不樂(lè)意了,說(shuō)這界面整得“沒(méi)勁”、“乏味”還“單調(diào)”。

改設(shè)計(jì)主要是為了把軟件界面打造成 “專業(yè)工具”,更加高大上。改動(dòng)之后,按鈕在點(diǎn)擊時(shí)更爽了一些,就像商家們平時(shí)在用的物理按鍵一般。

探索的2種不同設(shè)計(jì)風(fēng)格

總結(jié)

上面這些案例展示了現(xiàn)代設(shè)計(jì)趨勢(shì)的演變,從扁平化設(shè)計(jì)向更加注重細(xì)節(jié)的方向過(guò)渡。

扁平化設(shè)計(jì)固然擁有清晰高效等優(yōu)點(diǎn),但現(xiàn)代設(shè)計(jì)更傾向于展現(xiàn)層次和深度。設(shè)計(jì)師和開發(fā)者應(yīng)當(dāng)密切關(guān)注這一趨勢(shì),并做好準(zhǔn)備將相關(guān)元素融入自身系統(tǒng),尤其是在大型品牌和產(chǎn)品中逐漸成為趨勢(shì)的情況下。

設(shè)計(jì)趨勢(shì)真是一個(gè)輪回。

原文作者:Chan Karunaratne(本文翻譯已獲得作者的正式授權(quán))

譯者:彩云Sky,人人都是產(chǎn)品經(jīng)理專欄作家,騰訊高級(jí)視覺(jué)設(shè)計(jì)師。

本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash,基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

創(chuàng)造出眾的UI圖標(biāo):點(diǎn)亮你的界面

天宇 圖標(biāo)設(shè)計(jì)文章及欣賞

在做產(chǎn)品設(shè)計(jì)的時(shí)候,UI界面更多是由設(shè)計(jì)師完成,產(chǎn)品僅是提供界面元素和布置,其他的由設(shè)計(jì)師發(fā)揮。但如果產(chǎn)品能了解更多設(shè)計(jì)相關(guān)的知識(shí),在和設(shè)計(jì)師探討、分析時(shí)會(huì)更有針對(duì)性,也會(huì)讓產(chǎn)品的工作顯得更為專業(yè)。

在當(dāng)今數(shù)字化時(shí)代,我們與各種移動(dòng)應(yīng)用、網(wǎng)頁(yè)和軟件界面打交道,圖標(biāo)就像是這些界面的明星。它們小巧玲瓏、獨(dú)具特色,扮演著連接用戶與界面的重要角色。本文將帶您深入了解UI圖標(biāo)的定義、作用以及在用戶界面中的重要性。

一、UI圖標(biāo)的定義和作用

A. UI圖標(biāo)的定義

UI圖標(biāo)是指用簡(jiǎn)潔明了的小型圖形符號(hào)來(lái)表示特定功能、操作或信息的設(shè)計(jì)元素。圖標(biāo)通過(guò)簡(jiǎn)單的形狀和圖像,向用戶傳遞信息和功能,并在界面中起到重要的導(dǎo)航和標(biāo)識(shí)作用。

B. UI圖標(biāo)的作用

  • 提供快速識(shí)別:UI圖標(biāo)能夠以簡(jiǎn)單直觀的方式展示功能和操作,使用戶迅速識(shí)別界面元素,快速完成操作。
  • 提升用戶體驗(yàn):UI圖標(biāo)能夠使界面更加直觀、友好和易于使用,用戶無(wú)需過(guò)多猜測(cè),更加自信地與界面互動(dòng)。
  • 增加品牌識(shí)別度:UI圖標(biāo)承載著品牌形象,設(shè)計(jì)合理的圖標(biāo)能夠提升品牌的識(shí)別度和記憶性,促進(jìn)用戶與品牌的情感連接。

C. UI圖標(biāo)在用戶界面中的重要性

UI圖標(biāo)在用戶界面設(shè)計(jì)中扮演著不可或缺的角色,其重要性體現(xiàn)在以下幾個(gè)方面:

  • 導(dǎo)航和標(biāo)識(shí)功能:UI圖標(biāo)通過(guò)視覺(jué)上的差異化,幫助用戶快速識(shí)別和定位所需的功能模塊,提供直觀導(dǎo)航,減少操作復(fù)雜度。
  • 美觀和統(tǒng)一性:精心設(shè)計(jì)的UI圖標(biāo)能夠增加界面的美感,提升用戶體驗(yàn)。通過(guò)一致性的圖標(biāo)設(shè)計(jì),整個(gè)界面呈現(xiàn)出協(xié)調(diào)統(tǒng)一的視覺(jué)效果。
  • 信息傳遞效果:UI圖標(biāo)通過(guò)形狀、顏色和圖像等視覺(jué)元素,能夠傳達(dá)具體的信息和功能,使用戶更容易理解界面的意圖和操作方式。
  • 增強(qiáng)品牌形象:UI圖標(biāo)能夠?qū)⑵放菩蜗笕谌氲浇缑嬷?,形成?dú)特的品牌風(fēng)格和個(gè)性,幫助品牌建立與用戶的情感聯(lián)系。

二、設(shè)計(jì)原則和要素

UI圖標(biāo)設(shè)計(jì)是用戶界面的重要組成部分,它們不僅可以幫助用戶更快地理解和使用應(yīng)用程序或網(wǎng)站,還可以增強(qiáng)整體視覺(jué)效果。為了設(shè)計(jì)出高質(zhì)量的UI圖標(biāo),設(shè)計(jì)師需要遵循一些基本原則和要素。

A. 獨(dú)特性和可識(shí)別性

設(shè)計(jì)具有獨(dú)特特征的圖標(biāo) UI圖標(biāo)應(yīng)該具有獨(dú)特的特征,使其能夠與其他圖標(biāo)區(qū)分開來(lái)。設(shè)計(jì)師可以通過(guò)使用不同的形狀、顏色和風(fēng)格來(lái)實(shí)現(xiàn)這一目標(biāo)。同時(shí),圖標(biāo)的形狀和顏色也應(yīng)該與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致,以幫助用戶更快地識(shí)別和理解圖標(biāo)的功能和意義。

避免與其他圖標(biāo)混淆 為了避免UI圖標(biāo)與其他圖標(biāo)混淆,設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀、顏色和風(fēng)格與其他圖標(biāo)有足夠的區(qū)別。如果圖標(biāo)的形狀和顏色與其他圖標(biāo)過(guò)于相似,用戶可能會(huì)難以區(qū)分它們的功能和意義,從而影響用戶的使用體驗(yàn)。

B. 簡(jiǎn)潔性和清晰性

追求簡(jiǎn)潔的圖標(biāo)設(shè)計(jì) 簡(jiǎn)潔的圖標(biāo)設(shè)計(jì)可以幫助用戶更快地理解和使用圖標(biāo)。設(shè)計(jì)師應(yīng)該盡可能地簡(jiǎn)化圖標(biāo)的形狀和顏色,避免使用過(guò)多的細(xì)節(jié)和復(fù)雜的形狀。簡(jiǎn)潔的圖標(biāo)設(shè)計(jì)還可以幫助應(yīng)用程序或網(wǎng)站的整體視覺(jué)效果更加統(tǒng)一和和諧。

避免過(guò)度復(fù)雜化的細(xì)節(jié) 過(guò)度復(fù)雜化的細(xì)節(jié)可能會(huì)使圖標(biāo)變得過(guò)于復(fù)雜和難以理解。設(shè)計(jì)師應(yīng)該避免使用過(guò)多的細(xì)節(jié)和復(fù)雜的形狀,以確保圖標(biāo)的簡(jiǎn)潔性和清晰性。同時(shí),設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的形狀和顏色足夠明確,以便用戶能夠輕松地識(shí)別和理解圖標(biāo)的功能和意義。

C. 一致性和統(tǒng)一性

維護(hù)整個(gè)UI界面的一致性風(fēng)格 UI圖標(biāo)應(yīng)該與整個(gè)UI界面的風(fēng)格保持一致。設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀、顏色和風(fēng)格與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致。這樣可以幫助用戶更快地識(shí)別和理解圖標(biāo)的功能和意義,同時(shí)也可以增強(qiáng)應(yīng)用程序或網(wǎng)站的整體視覺(jué)效果。

使用相似的線條、顏色和風(fēng)格 為了實(shí)現(xiàn)一致性和統(tǒng)一性,設(shè)計(jì)師應(yīng)該使用相似的線條、顏色和風(fēng)格來(lái)設(shè)計(jì)圖標(biāo)。這樣可以使圖標(biāo)與整個(gè)UI界面的風(fēng)格保持一致,同時(shí)也可以使圖標(biāo)的形狀和顏色更加和諧統(tǒng)一。

D. 可視化傳達(dá)

明確圖標(biāo)所代表的含義和功能 為了確保用戶能夠輕松地理解和使用圖標(biāo),設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀和顏色能夠明確地傳達(dá)

使用適當(dāng)?shù)男螤?、符?hào)和顏色傳達(dá)信息 為了確保圖標(biāo)能夠明確地傳達(dá)信息,設(shè)計(jì)師應(yīng)該使用適當(dāng)?shù)男螤?、符?hào)和顏色。

例如,一個(gè)圖標(biāo)可能需要使用一個(gè)圓形作為基本形狀,同時(shí)使用一個(gè)代表性的符號(hào)來(lái)表示它的功能和意義。

同時(shí),設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的形狀和顏色與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致,以幫助用戶更快地識(shí)別和理解圖標(biāo)的功能和意義。

E. 可縮放性和適應(yīng)性

使用矢量圖形實(shí)現(xiàn)圖標(biāo)的可縮放性 為了確保圖標(biāo)在不同屏幕和設(shè)備上的可用性,設(shè)計(jì)師應(yīng)該使用矢量圖形來(lái)實(shí)現(xiàn)圖標(biāo)的可縮放性。

矢量圖形是一種基于數(shù)學(xué)公式的圖形,它們可以在不失真的情況下進(jìn)行任意大小的縮放。

這意味著:即使圖標(biāo)被放大或縮小,它們的形狀和顏色也不會(huì)發(fā)生變化。

確保在不同屏幕和設(shè)備上的可用性 為了確保圖標(biāo)在不同屏幕和設(shè)備上的可用性,設(shè)計(jì)師應(yīng)該考慮圖標(biāo)在不同分辨率和屏幕尺寸下的表現(xiàn)。

例如,設(shè)計(jì)師應(yīng)該確保圖標(biāo)的大小和形狀適合不同屏幕和設(shè)備的顯示。

同時(shí),設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的顏色在不同的屏幕和設(shè)備上都能夠保持一致,以幫助用戶更快地識(shí)別和理解圖標(biāo)的功能和意義。

三、設(shè)計(jì)流程和技巧

UI圖標(biāo)設(shè)計(jì)需要遵循一定的流程和技巧,以確保圖標(biāo)的高質(zhì)量和可用性。

以下是一些常用的設(shè)計(jì)流程和技巧:

A. 需求分析和功能定義

在開始設(shè)計(jì)之前,設(shè)計(jì)師需要了解UI圖標(biāo)的使用場(chǎng)景和目的。這可以幫助設(shè)計(jì)師確定圖標(biāo)所代表的含義和功能,以確保圖標(biāo)的準(zhǔn)確性和可用性。

B. 創(chuàng)意和草圖階段

在進(jìn)行創(chuàng)意和草圖階段,設(shè)計(jì)師應(yīng)該進(jìn)行創(chuàng)意思維和頭腦風(fēng)暴,以產(chǎn)生出多種不同的設(shè)計(jì)方案。同時(shí),設(shè)計(jì)師也應(yīng)該從簡(jiǎn)單的草圖開始構(gòu)思圖標(biāo)設(shè)計(jì),以確保圖標(biāo)的可行性和可實(shí)現(xiàn)性。

C. 細(xì)化和完善設(shè)計(jì)

在細(xì)化和完善設(shè)計(jì)階段,設(shè)計(jì)師應(yīng)該使用矢量工具進(jìn)行圖標(biāo)設(shè)計(jì),并重點(diǎn)關(guān)注細(xì)節(jié)和清晰度的提升。這可以幫助設(shè)計(jì)師創(chuàng)建出具有獨(dú)特特征的圖標(biāo),并確保圖標(biāo)的可縮放性和適應(yīng)性。

D. 反饋和優(yōu)化

在反饋和優(yōu)化階段,設(shè)計(jì)師應(yīng)該向用戶和團(tuán)隊(duì)收集反饋,并根據(jù)反饋進(jìn)行圖標(biāo)的優(yōu)化和調(diào)整。這可以幫助設(shè)計(jì)師確保圖標(biāo)的準(zhǔn)確性和可用性,并根據(jù)用戶的需求和期望進(jìn)行調(diào)整和優(yōu)化。

四、設(shè)計(jì)最佳實(shí)踐和案例研究

UI圖標(biāo)設(shè)計(jì)是一個(gè)重要的設(shè)計(jì)領(lǐng)域,它可以幫助用戶更快地理解和使用應(yīng)用程序或網(wǎng)站。以下是一些成功的UI圖標(biāo)設(shè)計(jì)案例和分析。

A. 探索成功的UI圖標(biāo)設(shè)計(jì)案例

成功的UI圖標(biāo)設(shè)計(jì)案例可以幫助設(shè)計(jì)師了解和學(xué)習(xí)一些設(shè)計(jì)最佳實(shí)踐和技巧。成功的圖標(biāo)有很多以下只列舉兩個(gè)圖標(biāo)設(shè)計(jì)案例:

  1. Airbnb圖標(biāo):Airbnb是一個(gè)在線旅行房屋租賃平臺(tái),它的圖標(biāo)設(shè)計(jì)非常簡(jiǎn)潔和具有代表性。Airbnb的圖標(biāo)設(shè)計(jì)使用了一個(gè)圓形的形狀,并使用了一個(gè)代表性的符號(hào)來(lái)表示它的功能和意義。同時(shí),Airbnb的圖標(biāo)設(shè)計(jì)也非常簡(jiǎn)潔,它只使用了少量的顏色和形狀,這使得圖標(biāo)非常易于理解和使用。
  2. Apple的App Store圖標(biāo):Apple的App Store圖標(biāo)采用了一個(gè)簡(jiǎn)單明了的大字母”A”,代表了應(yīng)用程序。這個(gè)圖標(biāo)的設(shè)計(jì)借鑒了蘋果公司的品牌風(fēng)格,采用了簡(jiǎn)潔、現(xiàn)代的風(fēng)格,使其在界面中易于辨認(rèn)。

B. 分析圖標(biāo)設(shè)計(jì)背后的原理和決策

成功的UI圖標(biāo)設(shè)計(jì)案例背后都有一些共同的原理和決策。

以下是一些分析圖標(biāo)設(shè)計(jì)背后的原理和決策的方法:

  • 了解用戶的需求和期望:設(shè)計(jì)師應(yīng)該了解用戶的需求和期望,并根據(jù)用戶的需求和期望進(jìn)行圖標(biāo)設(shè)計(jì)。這可以幫助設(shè)計(jì)師創(chuàng)建出更加符合用戶需求和期望的圖標(biāo),從而提高圖標(biāo)的可用性和易用性。
  • 遵循一致性和統(tǒng)一性原則:設(shè)計(jì)師應(yīng)該遵循一致性和統(tǒng)一性原則,使用相似的線條、顏色和風(fēng)格來(lái)設(shè)計(jì)圖標(biāo)。這可以幫助設(shè)計(jì)師創(chuàng)建出具有一致性和統(tǒng)一性的圖標(biāo),從而提高圖標(biāo)的可視化傳達(dá)和可用性。
  • 避免過(guò)度復(fù)雜化的細(xì)節(jié):設(shè)計(jì)師應(yīng)該避免過(guò)度復(fù)雜化的細(xì)節(jié),追求簡(jiǎn)潔的圖標(biāo)設(shè)計(jì)。這可以幫助設(shè)計(jì)師創(chuàng)建出更加簡(jiǎn)潔和易于理解的圖標(biāo),從而提高圖標(biāo)的可用性和易用性。

五、最后

A. 總結(jié)UI圖標(biāo)設(shè)計(jì)的重要性和原則

UI圖標(biāo)在用戶界面中扮演著重要的角色,它們不僅能夠傳達(dá)信息和功能,還能夠增強(qiáng)用戶體驗(yàn)和界面的美感。以下是一些重要的UI圖標(biāo)設(shè)計(jì)原則:

  • 簡(jiǎn)潔明了:使用必要的元素和形狀,避免過(guò)度復(fù)雜化的細(xì)節(jié)。
  • 可識(shí)別性:使圖標(biāo)獨(dú)特、清晰、易于辨認(rèn),以便用戶快速理解其含義。
  • 一致性:與品牌風(fēng)格相匹配,確保整個(gè)界面的視覺(jué)統(tǒng)一性。
  • 可擴(kuò)展性:使用矢量圖形制作圖標(biāo),以便在不同尺寸和分辨率下保持清晰度。
  • 用戶反饋和測(cè)試:收集用戶的意見和建議,進(jìn)行測(cè)試和調(diào)整,以提升圖標(biāo)的質(zhì)量和效果。

B. 鼓勵(lì)設(shè)計(jì)師繼續(xù)探索和發(fā)展圖標(biāo)設(shè)計(jì)技能

圖標(biāo)設(shè)計(jì)是一個(gè)不斷發(fā)展和演進(jìn)的領(lǐng)域。鼓勵(lì)設(shè)計(jì)師們繼續(xù)學(xué)習(xí)、實(shí)踐和探索,通過(guò)不斷嘗試新的技術(shù)和方法,提升自己的設(shè)計(jì)能力。以下是一些建議:

  • 深入研究:學(xué)習(xí)不同的圖標(biāo)設(shè)計(jì)風(fēng)格和趨勢(shì),深入了解各種設(shè)計(jì)工具和技術(shù),保持對(duì)設(shè)計(jì)領(lǐng)域的持續(xù)學(xué)習(xí)。
  • 觀察和啟發(fā):注意身邊的圖標(biāo)設(shè)計(jì),從成功的案例中汲取靈感,拓寬自己的設(shè)計(jì)思維。
  • 反饋和合作:與團(tuán)隊(duì)和用戶溝通交流,接受他們的反饋和建議,與其他設(shè)計(jì)師合作分享經(jīng)驗(yàn)和知識(shí)。
  • 認(rèn)識(shí)目標(biāo)用戶:了解目標(biāo)用戶的需求和偏好,將其融入到圖標(biāo)設(shè)計(jì)的決策中。

UI圖標(biāo)設(shè)計(jì)在用戶界面中起著重要的作用。通過(guò)掌握設(shè)計(jì)原則和實(shí)踐技巧,繼續(xù)學(xué)習(xí)和發(fā)展設(shè)計(jì)技能,我們將能夠創(chuàng)造出令人印象深刻的UI圖標(biāo)作品,提升用戶體驗(yàn)和界面美感。不斷探索和挑戰(zhàn)自己,成為一名卓越的圖標(biāo)設(shè)計(jì)師!

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

題圖來(lái)自 Unsplash,基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

畫圖標(biāo),我是認(rèn)真的

天宇 圖標(biāo)設(shè)計(jì)文章及欣賞

對(duì)于 UI 設(shè)計(jì)師來(lái)說(shuō),圖標(biāo)設(shè)計(jì)的能力至關(guān)重要,也是提升感官體驗(yàn)的重要方向。對(duì)于一些初入行業(yè)的設(shè)計(jì)師,習(xí)慣下載圖標(biāo)素材應(yīng)付項(xiàng)目需求,失去了動(dòng)手能力培養(yǎng)的機(jī)會(huì)。甚至一些多年工作經(jīng)驗(yàn)的老司機(jī),依然還擺脫不了使用素材的習(xí)慣,稍微復(fù)雜一點(diǎn)的技法就會(huì)難以駕馭。

 

1. 切勿過(guò)度素材化

 

對(duì)于初入職場(chǎng)的設(shè)計(jì)師來(lái)說(shuō),偶爾運(yùn)用素材可以理解,但是一定要學(xué)會(huì)拆解和分析,掌握還原設(shè)計(jì)的技巧和能力。

 

 

過(guò)度依賴素材容易導(dǎo)致思維固化,不愿意去創(chuàng)造,失去創(chuàng)新設(shè)計(jì)的能力;也容易導(dǎo)致眼高手低,有想法卻實(shí)現(xiàn)不出來(lái),極容易萌生放棄的念頭;素材拼貼形式完成的設(shè)計(jì),在規(guī)范性和細(xì)節(jié)性上面也是大打折扣的,導(dǎo)致設(shè)計(jì)作品不夠精細(xì)化和規(guī)范性。

 

 

 

 

 

2. 刻意練習(xí)強(qiáng)化

 

我們需要通過(guò)刻意練習(xí)來(lái)提升圖標(biāo)設(shè)計(jì)的能力,根據(jù)一萬(wàn)小時(shí)定律,技法層面的提升都是通過(guò)反復(fù)磨練達(dá)到的。

 

 

 

 

 

 

3. 擺脫素材才能規(guī)范化

 

圖標(biāo)設(shè)計(jì)從素材習(xí)慣過(guò)度到設(shè)計(jì)動(dòng)手其實(shí)很容易,但是從會(huì)畫到畫好之間看似簡(jiǎn)單卻很難掌握。擺脫素材是圖標(biāo)設(shè)計(jì)規(guī)范化的關(guān)鍵,然后再統(tǒng)一風(fēng)格和細(xì)節(jié)規(guī)范,掌握數(shù)字化關(guān)系也是需要我們反復(fù)研究的課題。

 

 

 

 

比如以這個(gè)天氣圖標(biāo)來(lái)舉例,相信很多同學(xué)都能畫出來(lái),但是有沒(méi)有把控里面的數(shù)字關(guān)系就難說(shuō)了。通過(guò)以下示意圖我們可以看出來(lái),大圓和小圓之間的比例關(guān)系是 4:3,而間距的關(guān)系也與圓形的大小有著數(shù)字關(guān)系。這些數(shù)字關(guān)系可以使得圖標(biāo)設(shè)計(jì)更加精細(xì)化,也能引導(dǎo)我們?nèi)ヌ剿髟O(shè)計(jì)背后量化的標(biāo)準(zhǔn)和關(guān)系。

 

 

 

 

 

 

4. 質(zhì)感的層層強(qiáng)化

 

當(dāng)我們繪制完圖標(biāo)的造型之后,運(yùn)用合適的風(fēng)格進(jìn)行質(zhì)感強(qiáng)化也是尤為重要的。這里我先運(yùn)用其中的一個(gè)風(fēng)格來(lái)完成,選擇了磨砂玻璃質(zhì)感的效果。為了質(zhì)感和層級(jí)關(guān)系更加明顯,這里單獨(dú)對(duì)局部進(jìn)行了光影強(qiáng)化和邊界處理,看看以下步驟拆解圖感受一下。

 

 

 

 

備注:運(yùn)用的軟件功能是背景模糊,Sketch 或者 Figma 等軟件皆可實(shí)現(xiàn)。

 

 

 

5. 延展界面場(chǎng)景

 

為了進(jìn)一步強(qiáng)化圖標(biāo)練習(xí),延展了一個(gè)簡(jiǎn)單的界面場(chǎng)景,一個(gè)由宮格布局組合成的界面設(shè)計(jì)。為了填充所需的內(nèi)容,先把之前的一些圖標(biāo)作品放進(jìn)去占個(gè)位置。雖然都是質(zhì)感一類的圖標(biāo),但是由于透視、配色、風(fēng)格和細(xì)節(jié)規(guī)范等不一致,整體還是存在一定的排斥感。

 

 

 

 

 

 

6. 根據(jù)界面環(huán)境重新調(diào)整

 

由于界面設(shè)計(jì)屬于深色主題,之前練習(xí)的天氣圖標(biāo)放入場(chǎng)景中顯得過(guò)于突出,而且玻璃質(zhì)感的通透性沒(méi)有得到很好的發(fā)揮。于是根據(jù)界面環(huán)境對(duì)天氣圖標(biāo)進(jìn)行了重新調(diào)整,以深色關(guān)系調(diào)整了云朵部分,針對(duì)太陽(yáng)的配色和尺寸比例也進(jìn)行了調(diào)整,如以下效果圖。

 

 

 

 

 

 

7. 延續(xù)風(fēng)格補(bǔ)全設(shè)計(jì)

 

以調(diào)整后的天氣圖標(biāo)作為風(fēng)格規(guī)范,延續(xù)了其它業(yè)務(wù)場(chǎng)景的圖標(biāo)設(shè)計(jì),在透視關(guān)系、細(xì)節(jié)規(guī)范、配色比例和光影效果等方面進(jìn)行了直接延續(xù)。在光影方向上面選擇了縱向區(qū)分,左邊三個(gè)選擇左上角打光,右邊三個(gè)選擇右上角打光。(當(dāng)然也可以統(tǒng)一一個(gè)方向設(shè)置光影)

 

 

 

 

 

 

8. 統(tǒng)一性還是差異化

 

完成的整體設(shè)計(jì)視覺(jué)風(fēng)格雖然比較統(tǒng)一,但是也有一些問(wèn)題存在。圖標(biāo)之間缺少差異化,過(guò)度統(tǒng)一容易視覺(jué)疲勞,于是在統(tǒng)一性和差異化上面開始糾結(jié)了。

 

 

 

 

為了既保障圖標(biāo)設(shè)計(jì)表達(dá)的統(tǒng)一性,又能形成視覺(jué)感的差異化,做出了調(diào)整配色關(guān)系的決定。根據(jù)天氣圖標(biāo)的配色關(guān)系延續(xù)出了其它色系,看看最終的效果如何。

 

 

 

 

 

 

你喜歡哪一版?

 

關(guān)于統(tǒng)一性和差異化因人而異,在朋友圈征集意見也是各有差異,那么你會(huì)喜歡哪一版呢?歡迎留言區(qū)一起互動(dòng)交流。

 

 

 

 


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTQyOTA5Ng==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

常見的 10 大圖標(biāo)設(shè)計(jì)風(fēng)格

天宇 圖標(biāo)設(shè)計(jì)文章及欣賞

圖標(biāo)是產(chǎn)品中不可或缺的部分,隨著設(shè)計(jì)趨勢(shì)的不斷變化,圖標(biāo)設(shè)計(jì)風(fēng)格也在不斷豐富。在產(chǎn)品中會(huì)出現(xiàn)哪些常見的圖標(biāo)設(shè)計(jì)風(fēng)格呢?結(jié)合產(chǎn)品案例體驗(yàn),今天黑馬哥為大家簡(jiǎn)單梳理一下,列舉出常見的 10 個(gè)圖標(biāo)設(shè)計(jì)風(fēng)格。
常見的 10 大圖標(biāo)設(shè)計(jì)風(fēng)格
 
 
 
 
1. 線性功能圖標(biāo)
線性功能圖標(biāo)是產(chǎn)品中最常見的風(fēng)格,設(shè)計(jì)時(shí)控制好圖標(biāo)規(guī)范即可。常見的多為單色(無(wú)彩色系、品牌色等),也有用品牌色作為點(diǎn)綴色的案例。
常見的 10 大圖標(biāo)設(shè)計(jì)風(fēng)格
 
 
 
 
2. 面性功能圖標(biāo)
面性功能圖標(biāo)與線性風(fēng)一樣,也是產(chǎn)品中最常見的風(fēng)格。有單色單圖形、多色疊加風(fēng)、微漸變風(fēng)格等表達(dá)形式。
常見的 10 大圖標(biāo)設(shè)計(jì)風(fēng)格
 
 
 
 
3. 磨砂玻璃質(zhì)感圖標(biāo)
磨砂玻璃質(zhì)感圖標(biāo)是輕質(zhì)感的表達(dá)形式之一,也是近些年較為流行的趨勢(shì)??梢员馄揭部梢晕①|(zhì)感,在立體感圖標(biāo)上面也可以運(yùn)用這類效果。
常見的 10 大圖標(biāo)設(shè)計(jì)風(fēng)格
 
 
 
 
4. 微質(zhì)感圖標(biāo)
微質(zhì)感圖標(biāo)相較于扁平化設(shè)計(jì)而言,更能突出細(xì)節(jié)的深入和真實(shí)感的體現(xiàn)。微質(zhì)感圖標(biāo)的層次感也更豐富,該技法也是設(shè)計(jì)師的必備技能。
常見的 10 大圖標(biāo)設(shè)計(jì)風(fēng)格
 
 
 
 
5. 晶白風(fēng)圖標(biāo)
晶白風(fēng)圖標(biāo)常用于金剛區(qū)欄目,利用白色不透明度關(guān)系和背景色關(guān)系進(jìn)行圖標(biāo)設(shè)計(jì),圖標(biāo)質(zhì)感、層次感、空間感等都能得以體現(xiàn)。
常見的 10 大圖標(biāo)設(shè)計(jì)風(fēng)格
 
 
 
 
6. 立體感圖標(biāo)
立體感圖標(biāo)分為 2.5D、偽 3D、3D 建模等形式,特別是隨著三維設(shè)計(jì)趨勢(shì)的普及,立體感圖標(biāo)的運(yùn)用也逐步普及,也可以利用 AI 工具完成該類型圖標(biāo)。
常見的 10 大圖標(biāo)設(shè)計(jì)風(fēng)格
 
 
 
 
7. 插畫風(fēng)圖標(biāo)
插畫風(fēng)圖標(biāo)是插畫風(fēng)格的簡(jiǎn)化融入,以此提升圖標(biāo)設(shè)計(jì)的特征感,使得圖標(biāo)具備差異化的視覺(jué)效果,也能烘托出整體設(shè)計(jì)的質(zhì)量。
常見的 10 大圖標(biāo)設(shè)計(jì)風(fēng)格
 
 
 
 
8. 主題化圖標(biāo)
主題化圖標(biāo)設(shè)計(jì)風(fēng)格多樣,會(huì)結(jié)合活動(dòng)主題或者節(jié)日慶典等內(nèi)容,根據(jù)主題設(shè)計(jì)圖標(biāo)更能體現(xiàn)產(chǎn)品溫度。
常見的 10 大圖標(biāo)設(shè)計(jì)風(fēng)格
 
 
 
 
9. 寫實(shí)類圖標(biāo)
寫實(shí)圖標(biāo)是以技法表現(xiàn)實(shí)物特征,比較考驗(yàn)質(zhì)感表現(xiàn)、透視光影等技法能力。隨著扁平化趨勢(shì),寫實(shí)類設(shè)計(jì)逐步被淡化,但是也有部分產(chǎn)品會(huì)局部性運(yùn)用。
常見的 10 大圖標(biāo)設(shè)計(jì)風(fēng)格
 
 
 
 
10. 實(shí)物圖圖標(biāo)
直接將產(chǎn)品實(shí)物圖作為圖標(biāo)相對(duì)較少,但是依然有產(chǎn)品會(huì)選擇使用,還原其內(nèi)容表達(dá)的真實(shí)性。
常見的 10 大圖標(biāo)設(shè)計(jì)風(fēng)格
 
 
 
以上為產(chǎn)品中常見的圖標(biāo)設(shè)計(jì)風(fēng)格,根據(jù)不同需求采用。對(duì)于設(shè)計(jì)師而言,這也是首先需要掌握的圖標(biāo)技能。
 
本文由 @黑馬青年(heimaui)原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。

作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYzMDg3Mg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

圖標(biāo)設(shè)計(jì)能力怎么提升?

藍(lán)藍(lán)設(shè)計(jì)的小編

原創(chuàng)能力的提升,就是創(chuàng)建一個(gè)場(chǎng)景給自己出題再反復(fù)驗(yàn)證自己的過(guò)程。而訓(xùn)練和真實(shí)項(xiàng)目不同的是,真實(shí)項(xiàng)目往往操心的事情太多,時(shí)間還少,會(huì)造成很多思想上的負(fù)擔(dān),所以兩者都有提升但類型不同。
只有認(rèn)識(shí)到圖標(biāo)的重要性,并有自我驅(qū)動(dòng)力去制定訓(xùn)練的計(jì)劃,才能真正提升這部分能力。而它的附帶價(jià)值遠(yuǎn)遠(yuǎn)不止畫好圖標(biāo)……

超全!APP 圖標(biāo)設(shè)計(jì)指南:從創(chuàng)意構(gòu)思到視覺(jué)呈現(xiàn)的完美轉(zhuǎn)化

藍(lán)藍(lán)設(shè)計(jì)的小編

APP 圖標(biāo)設(shè)計(jì)從創(chuàng)意構(gòu)思到視覺(jué)呈現(xiàn)是一個(gè)系統(tǒng)而細(xì)致的過(guò)程,需要設(shè)計(jì)師充分理解應(yīng)用的內(nèi)涵與目標(biāo)受眾,挖掘獨(dú)特的創(chuàng)意元素,并運(yùn)用精湛的設(shè)計(jì)技巧將其轉(zhuǎn)化為具有強(qiáng)大視覺(jué)吸引力和品牌傳達(dá)力的圖標(biāo)作品。只有這樣,才能在競(jìng)爭(zhēng)激烈的移動(dòng)應(yīng)用市場(chǎng)中,讓我們的 APP 圖標(biāo)成為吸引用戶的第一道亮麗風(fēng)景線,為應(yīng)用的成功推廣和用戶留存奠定堅(jiān)實(shí)的基礎(chǔ)。

一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

從1973年第一代圖形用戶界面的呱呱落地到今天百家爭(zhēng)鳴,圖形用戶界面竟然已經(jīng)走過(guò)了50年的發(fā)展歷程,更神奇的是,原來(lái)UI設(shè)計(jì)這個(gè)職業(yè)的起源也是因圖標(biāo)的起源而起,后來(lái)圖標(biāo)成了UI設(shè)計(jì)中最重要的視覺(jué)元素之一,接下來(lái),我們一起走進(jìn)圖標(biāo)的世界,了解它神秘背后的故事。
 
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
目錄
一、 圖標(biāo)的起源
二、 圖標(biāo)設(shè)計(jì)的定義
三、 圖標(biāo)的種類
四、 圖標(biāo)設(shè)計(jì)8大原則
五、 圖標(biāo)的6大作用
六、 提升圖標(biāo)設(shè)計(jì)的4個(gè)小技巧
七、 5個(gè)圖標(biāo)網(wǎng)站推薦
八、圖標(biāo)的命名規(guī)范
 
 
 
一、圖標(biāo)的起源
在計(jì)算機(jī)發(fā)展的早期,用戶界面主要是基于命令行的,由字母和數(shù)字組成,操作復(fù)雜且對(duì)普通用戶不友好,用戶需要記住大量的命令和參數(shù)才能使用計(jì)算機(jī)系統(tǒng)。
 
隨著計(jì)算機(jī)技術(shù)的發(fā)展,為了使計(jì)算機(jī)更易于使用和理解,程序員開始開發(fā)圖形化的元素來(lái)代表各種操作和功能,圖標(biāo)概念由此誕生。最初的目的是幫助新手用戶能夠更方便地組織文件和執(zhí)行任務(wù),而無(wú)需記住復(fù)雜的命令。
 
 
1.施樂(lè)公司的開創(chuàng)性工作
1973年,美國(guó)施樂(lè)公司推出了第一批真正意義上具有圖形用戶界面的個(gè)人電腦——Xerox Alto。雖然這款電腦僅生產(chǎn)了約 2000 臺(tái),但它為后來(lái)的計(jì)算機(jī)圖形界面發(fā)展奠定了基礎(chǔ)。它的界面中已經(jīng)出現(xiàn)了一些簡(jiǎn)單的圖標(biāo),如垃圾桶、計(jì)算器、打印機(jī)、文件和文件夾等,這些圖標(biāo)成為了后來(lái)圖標(biāo)設(shè)計(jì)的雛形。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
2.蘋果公司的推動(dòng)
1979年,史蒂夫·喬布斯參觀了施樂(lè)公司的原型機(jī)后,深受啟發(fā),決定開發(fā)自己的圖形界面計(jì)算機(jī)。1983 年,蘋果公司推出了Apple Lisa,這是蘋果首臺(tái)圖形界面計(jì)算機(jī),其界面中的圖標(biāo)設(shè)計(jì)得到了進(jìn)一步的發(fā)展。
在這一時(shí)期,現(xiàn)代圖標(biāo)設(shè)計(jì)之母蘇珊·卡爾擔(dān)任蘋果的創(chuàng)意總監(jiān),她設(shè)計(jì)的像素風(fēng)格圖標(biāo)簡(jiǎn)潔、清晰、易于理解,具有很高的視覺(jué)平衡性,即使在今天看來(lái)也顯得活潑有趣。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
3.微軟的跟進(jìn)與發(fā)展
1985年,微軟發(fā)布了 Windows 1.0操作系統(tǒng),這是微軟在圖形用戶界面領(lǐng)域的重要嘗試。該系統(tǒng)中的圖標(biāo)設(shè)計(jì)也借鑒了蘋果的一些理念,但也有自己的特點(diǎn)。隨著 Windows 操作系統(tǒng)的不斷發(fā)展和普及,圖標(biāo)設(shè)計(jì)也逐漸成為了用戶界面設(shè)計(jì)中不可或缺的一部分。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
二、圖標(biāo)設(shè)計(jì)的定義?
圖標(biāo)設(shè)計(jì)是一種設(shè)計(jì)活動(dòng),主要是創(chuàng)造出用于代表物體、動(dòng)作、概念等各種元素的圖形符號(hào)。
 
這些圖形符號(hào)具有簡(jiǎn)潔性,讓人能快速識(shí)別。比如手機(jī)桌面上的微信圖標(biāo),用兩個(gè)對(duì)話氣泡的簡(jiǎn)單圖案就代表了這個(gè)軟件,讓人一眼就能明白。圖標(biāo)設(shè)計(jì)在很多領(lǐng)域都有應(yīng)用,像軟件界面、網(wǎng)站、移動(dòng)應(yīng)用等,能夠?yàn)橛脩籼峁┮曈X(jué)引導(dǎo),方便用戶操作。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
三、圖標(biāo)的種類
圖標(biāo)在提升產(chǎn)品氣質(zhì)上起著不可估量的地位,在界面中往往起著畫龍點(diǎn)睛的作用,無(wú)法想象在一個(gè)產(chǎn)品中,沒(méi)有圖標(biāo),界面會(huì)顯得多么的無(wú)聊和乏味,但是圖標(biāo)也不能總用一種形式的圖標(biāo),這樣也會(huì)百看讓人生厭,因此也就衍生了圖標(biāo)的多樣性,以下是我整理的常見圖標(biāo)類型:
 
1、從視覺(jué)表現(xiàn)上,有以下12大類圖標(biāo)
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
2、從功能上,有以下6大類圖標(biāo)
?工具圖標(biāo)
工具圖標(biāo)在B端項(xiàng)目中應(yīng)用很廣泛,幾乎每個(gè)組件中都會(huì)包含這類圖標(biāo);比方說(shuō)騰訊文檔上方的文檔編輯圖標(biāo)就是屬于這種類型,它的裝飾性很小,更多是功能的承載。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
?裝飾圖標(biāo)
在一些軟件產(chǎn)品中,會(huì)重點(diǎn)強(qiáng)調(diào)品牌、情感化設(shè)計(jì),大量啟用3D化的裝飾圖標(biāo)來(lái)提升界面的質(zhì)感。
比方說(shuō)騰訊電腦管家下面的這個(gè)界面設(shè)計(jì),它就運(yùn)用了大量具有裝飾性的圖標(biāo)來(lái)傳遞信息表達(dá)品牌,并且中央還采用騰訊電腦管家的IP形象作為切入點(diǎn),萌萌的形象無(wú)形中拉近了與受眾之間的距離。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
?啟動(dòng)圖標(biāo)
在項(xiàng)目中,當(dāng)用戶想表達(dá)品牌時(shí),經(jīng)常會(huì)把LOGO圖標(biāo)做成動(dòng)態(tài)圖,來(lái)更好的傳遞品牌理念,比方說(shuō)聯(lián)想電腦管家,在啟動(dòng)頁(yè)時(shí),就運(yùn)用了動(dòng)態(tài)啟動(dòng)圖標(biāo),同時(shí)下面還附帶了一個(gè)slogan的文字動(dòng)效,很好的向用戶傳遞了安全的理念。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
? 進(jìn)程提示圖標(biāo)
在軟件界面中,經(jīng)常也需要進(jìn)程的提示,這時(shí)候圖標(biāo)就可以起到這樣的作用,比方說(shuō)騰訊電腦管家在清理垃圾時(shí),圖標(biāo)里面的風(fēng)扇就一直在轉(zhuǎn),寓意當(dāng)前清理工作正在進(jìn)行中。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
? 狀態(tài)提示圖標(biāo)
軟件在運(yùn)行過(guò)程中難免會(huì)出現(xiàn)bug或者內(nèi)容為空的時(shí)候,這時(shí)候狀態(tài)提示圖標(biāo)就尤為重要,可以大大減輕人們的焦慮情緒。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
? 增加界面趣味性的圖標(biāo)
圖標(biāo)不僅在理解和使用上給人們提效了,而且有時(shí)添加動(dòng)效的圖標(biāo)還能給人帶來(lái)絲絲驚喜和愉悅。
比方說(shuō)聯(lián)想的這個(gè)動(dòng)態(tài)加載圖標(biāo),看著就很有趣,讓人忍不住多欣賞一下。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
四、圖標(biāo)設(shè)計(jì)8大原則
雖然現(xiàn)在AI盛行,很多酷炫的效果可以用AI實(shí)現(xiàn),但是一些讓圖標(biāo)看起來(lái)更加專業(yè)精致、耐看的秘密我們還是需要知道的,了解這些設(shè)計(jì)原則,我們可以事半功倍,當(dāng)AI生產(chǎn)有偏差時(shí),我們自己可以優(yōu)化、修復(fù)和調(diào)整。
 
 
1、大小統(tǒng)一
圖標(biāo)大小統(tǒng)一,就是一組圖標(biāo)放置在一起,圖標(biāo)大小要看起來(lái)差不多,不能忽大忽小,比方說(shuō)這組圖標(biāo)的第三個(gè)圖標(biāo),電腦圖標(biāo)明顯過(guò)高,跟其他圖標(biāo)放在一起就顯得不是那么的協(xié)調(diào)美觀和統(tǒng)一。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
在大小統(tǒng)一這方面,我們記得就是幾何圖形它們有視覺(jué)差,有的時(shí)候并不是說(shuō)尺寸一樣,大小就一樣了,比方說(shuō)下面這組圖形,左邊的這組它們高度一樣,可是看起來(lái)大小并不太一樣,明顯中間的三角形顯得小;右邊的這組,三角形比左右兩邊的都要高,可是它們放在一起看起來(lái)大小就是差不多的,這就是幾何圖形帶來(lái)的視覺(jué)差,就是我們?cè)谧鰣D的時(shí)候,要記得多去感受,設(shè)計(jì)中的美很多不是用1+1=2能解釋清楚的,它就是一種感受,放下心中的浮躁,我們還是能感受到它們之間的區(qū)別,這種美也沒(méi)那么玄乎,只要用心,一定可以做出大小一致的圖標(biāo)。
 
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
 
2、圓角統(tǒng)一
圓角統(tǒng)一,就是圖標(biāo)之間有相同造型,然后又都有圓角的,那么他們就要保持相同的圓角曲度,比方說(shuō)下面這組圖標(biāo),圖標(biāo)的外形都是正方形且它們都帶有圓角,可是它們的圓角曲度卻明顯不一樣,這樣就看起了不夠規(guī)范和專業(yè)。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
3、風(fēng)格統(tǒng)一
界面中同樣功能的圖標(biāo),樣式和風(fēng)格需要保持一致,比方說(shuō)這組圖標(biāo)樣式,風(fēng)格就保持著高度的一致,都是用的玻璃質(zhì)感的磨砂材質(zhì)。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
4、角度統(tǒng)一
這組扁平化圖標(biāo),在右邊相似的角度都疊加了一個(gè)小色塊,增加了圖標(biāo)的層次感,相同的角度也增加了圖標(biāo)的一致性和系列感。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
5、粗細(xì)統(tǒng)一
圖標(biāo)的粗細(xì)要統(tǒng)一,這樣圖標(biāo)就會(huì)看起來(lái)比較精致,比方說(shuō)下面的這組圖標(biāo),圖標(biāo)外框線都是用的3px,圖標(biāo)里面的線都是用的2px,圖標(biāo)的粗細(xì)都保持一樣的粗細(xì)規(guī)律,這樣的圖標(biāo)看著也是同樣的美觀和一致。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
6、疏密統(tǒng)一
下面是一組類似于插畫風(fēng)格的圖標(biāo),圖標(biāo)的風(fēng)格是布線比較密集飽滿,而三個(gè)圖標(biāo)都遵循了這樣的原則,看起來(lái)出奇的統(tǒng)一,所以它們看起來(lái)像是一組成套圖標(biāo)。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
7、透視統(tǒng)一
當(dāng)設(shè)計(jì)的圖標(biāo)是立體時(shí),要注意它們的透視要統(tǒng)一,就像下面的這組2.5D圖標(biāo),它們的設(shè)計(jì)透視就保持著高度的一致。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
8、易識(shí)別
圖標(biāo)的優(yōu)劣首先取決于其能否讓用戶一目了然地理解其代表的意義,這是很重要的圖標(biāo)設(shè)計(jì)原則。
下面的這組手機(jī)主題圖標(biāo),識(shí)別性就非常的高,簡(jiǎn)潔且好理解。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
五、圖標(biāo)的6大作用
圖標(biāo)在界面設(shè)計(jì)中扮演著至關(guān)重要的角色,它們遍布于應(yīng)用程序的各個(gè)角落。無(wú)論是導(dǎo)航欄、工具欄還是標(biāo)簽欄,亦或是首頁(yè)、詳情頁(yè)、個(gè)人中心頁(yè),功能圖標(biāo)都隨處可見。圖標(biāo)的主要作用在于傳達(dá)信息,相比文字,它們能更直接地傳遞概念,并且能夠?yàn)橛脩舻囊曈X(jué)體驗(yàn)增添樂(lè)趣。
 
1、提升界面的使用效率
功能圖標(biāo)常以簡(jiǎn)潔的圖形呈現(xiàn),它們便于用戶識(shí)別和記憶。這種設(shè)計(jì)讓用戶能夠迅速定位到所需的功能,無(wú)需耗費(fèi)時(shí)間閱讀文字說(shuō)明或?yàn)g覽冗長(zhǎng)的菜單選項(xiàng),大大提升了界面的使用效率。
 
華為云的這個(gè)界面,文字信息很多,因?yàn)橛辛藞D標(biāo)的存在,人們尋找起來(lái)特別高效,能高效定位到想要的信息。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
2、增加用戶的滿意度
圖標(biāo)不僅可以提升界面使用效率,還能提升用戶的體感和滿意度,精美的圖標(biāo)讓人看著都是賞心悅目的,就像我們?cè)诖蠼稚峡吹揭粋€(gè)美女,都忍不住多駐留一伙一樣。
 
華為云這組精美的圖標(biāo)動(dòng)效就給了我很大的視覺(jué)享受,圖標(biāo)設(shè)計(jì)精致,配色舒適,還有動(dòng)效,給足了用戶滿足感。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
3、減少人們認(rèn)知的成本
圖標(biāo)很多的造型都來(lái)源于生活,來(lái)源于我們熟悉的事物,在界面中運(yùn)用我們熟悉的圖形會(huì)大大降低人們的認(rèn)知成本,也會(huì)讓更多人產(chǎn)生共鳴,它的傳達(dá)作用不受語(yǔ)言和國(guó)界的束縛,是一種高效的界面表達(dá)語(yǔ)言。
 
華為云的這組圖標(biāo)就是運(yùn)用了人們?nèi)粘I钪蟹浅J煜さ脑?,共鳴感很強(qiáng),人們學(xué)習(xí)和理解的成本很低。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
4.提升品牌形象
仔細(xì)觀察會(huì)發(fā)現(xiàn),在生活中有很多的軟件產(chǎn)品,會(huì)把企業(yè)的LOGO融入到日常產(chǎn)品的圖標(biāo)設(shè)計(jì)中,大大提升了品牌的一個(gè)曝光度。
 
騰訊云就有這樣的小心思,它會(huì)把騰訊云LOGO融入到banner圖標(biāo)設(shè)計(jì)中,傳遞了信息,同時(shí)也加強(qiáng)了品牌的曝光。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
5、圖標(biāo)可以增加界面的豐富度
有圖標(biāo)的界面,頁(yè)面看起來(lái)豐富度更高,層次感更強(qiáng),信息表達(dá)上也會(huì)更加的清晰整潔。
 
360AI辦公這個(gè)界面之所以看起來(lái)這么豐富,很大原因是在于圖標(biāo)的應(yīng)用,界面中有大圖標(biāo)、小型面圖標(biāo),還有線性小圖標(biāo),有對(duì)比,整個(gè)頁(yè)面就看起來(lái)豐盈了不少。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
6、減少界面的枯燥感
千篇一律的文字,難免會(huì)產(chǎn)生枯燥感,讓人不愿多駐留;圖標(biāo)多彩的配色以及Q萌的造型會(huì)讓人心生愉悅。
佐糖的這個(gè)界面,若不是有圖標(biāo)的潤(rùn)色,光只有功能點(diǎn)和文字介紹,估計(jì)會(huì)乏味不少,但是有了多彩圖標(biāo)的加入,瞬間氛圍感都熱鬧了不少。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
六、提升圖標(biāo)設(shè)計(jì)的4個(gè)小技巧
1、大量臨摹,刻意練習(xí)
任何一項(xiàng)技能的獲得,最開始都離不開臨摹,作為剛接觸UI設(shè)計(jì)的職場(chǎng)新人,可以先從臨摹入手,先臨摹簡(jiǎn)單的,然后循序漸進(jìn),臨摹難度大點(diǎn)的,這樣圖標(biāo)設(shè)計(jì)能力也會(huì)慢慢提升。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
2、多積累好的樣本
想要繪制好看的圖標(biāo),首先要見過(guò)好看的圖標(biāo),所以我們?nèi)粘RB(yǎng)成多收集好圖標(biāo)好設(shè)計(jì)的習(xí)慣,這樣當(dāng)面臨新的需求設(shè)計(jì)時(shí),也不至于手忙腳亂,不知如何下手。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
3、學(xué)會(huì)分析
看到好看的圖標(biāo)設(shè)計(jì)時(shí),我們要學(xué)會(huì)分析,這組圖標(biāo)好,它好在哪,哪里打動(dòng)了你,你分析了這些,你自己在設(shè)計(jì)的時(shí)候也會(huì)不自覺(jué)的運(yùn)用到其中的智慧和思路,這樣我們就可以隨時(shí)原創(chuàng)出符合自己需求的圖標(biāo)設(shè)計(jì)來(lái)。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
4、明確目標(biāo)與受眾
目標(biāo)受眾不同,他們對(duì)圖形的期望也會(huì)不一樣,比方說(shuō)在設(shè)計(jì)兒童產(chǎn)品界面和B端產(chǎn)品界面時(shí),所用的顏色和形狀都是有考究的。
 
兒童類產(chǎn)品的圖標(biāo)設(shè)計(jì),形狀會(huì)比較圓潤(rùn),色彩也比較多彩;但是B端類產(chǎn)品的圖標(biāo)設(shè)計(jì)用色就會(huì)很克制,形狀也不會(huì)過(guò)于圓潤(rùn)。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
七、5個(gè)圖標(biāo)網(wǎng)站推薦
1、Iconfont
(https://www.iconfont.cn/)
iconfont是阿里巴巴的圖標(biāo)庫(kù),應(yīng)該也是受眾最多的一個(gè)圖標(biāo)下載網(wǎng)站,給我們平時(shí)工作提效不少,造福了不少的設(shè)計(jì)師。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
2、IconPark
(https://iconpark.oceanengine.com/)
IconPark是字節(jié)跳動(dòng)旗下的一款圖標(biāo)下載網(wǎng)站,它可以在線把一個(gè)圖標(biāo)實(shí)現(xiàn)多種風(fēng)格的切換,線性、面線、線面結(jié)合,并且線的粗細(xì)大小可以調(diào)節(jié),非常的方便。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
3、Ikonate
(
https://ikonate.com/
)
Ikonate是一款可以在線編輯的圖標(biāo)網(wǎng)站,涵蓋了常用的一些圖標(biāo),可以調(diào)節(jié)線條的粗細(xì)和大小,導(dǎo)出的格式是SVG。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
4、Iconfinder
(https://www.iconfinder.com)
Iconfinder的優(yōu)點(diǎn),我覺(jué)得是造型夠豐富,滿足你有時(shí)候無(wú)法腦補(bǔ)的痛點(diǎn)。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
5、Iconduck
(https://iconduck.com/)
Iconduck的優(yōu)點(diǎn)是有273,858個(gè)免費(fèi)的圖標(biāo)庫(kù)和插畫庫(kù)供大家選擇,儲(chǔ)備夠豐富。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
八、圖標(biāo)的命名規(guī)范
圖標(biāo)一般有四種狀態(tài),正常normal (nor)、高亮highlight (hig)、選中selected (sel)、不可用disable (dis)四種狀態(tài),一個(gè)好的命名習(xí)慣會(huì)給自己的合作搭檔帶來(lái)很好的體驗(yàn),通常在寫界面的時(shí)候,前端都是用英文對(duì)元素進(jìn)行命名的,這里我列舉一下我經(jīng)常合作同事的一個(gè)命名規(guī)范,供大家參考:
模塊-類別-功能-狀態(tài)
例如:Nav_button_message_sel
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
總結(jié):
在深入探索了圖標(biāo)設(shè)計(jì)的豐富世界之后,我相信大家未來(lái)能夠根據(jù)不同的場(chǎng)合挑選出恰當(dāng)?shù)膱D標(biāo)風(fēng)格和樣式。通過(guò)持續(xù)的總結(jié)和歸納,我對(duì)圖標(biāo)設(shè)計(jì)的理解也變得更加深刻。雖然這份總結(jié)可能還有待完善之處,請(qǐng)大家多多海涵,期待在下一篇文章中再次與大家相見。


作者:姝斐suphie
鏈接:https://www.zcool.com.cn/article/ZMTY0MDI2MA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

優(yōu)化UI設(shè)計(jì)規(guī)范:海外項(xiàng)目與國(guó)內(nèi)產(chǎn)品設(shè)計(jì)規(guī)范及組件庫(kù)對(duì)比

藍(lán)藍(lán)設(shè)計(jì)的小編

基于海外組件庫(kù)的核心設(shè)計(jì)原則和特性:交互與反饋,視覺(jué)層次與信息密度,簡(jiǎn)潔與功能性。我們?yōu)椤秏yCommunity》項(xiàng)目的制定專屬規(guī)范,涵蓋按鈕,輸入框,卡片樣式,列表,圖標(biāo)及主題定制換膚等相關(guān)組件庫(kù)。顏色的價(jià)值在于傳達(dá)品牌和情感,并增強(qiáng)可讀性。
文字是信息傳遞的主要載體,標(biāo)準(zhǔn)化的文字設(shè)計(jì)有助于提升可讀性和一致性。
我們不僅制定了文字規(guī)范,還升級(jí)了字體規(guī)范,新增了客戶指定的字體,并加入了沙特當(dāng)?shù)氐陌⒗Z(yǔ)字體。

超全面陰影設(shè)計(jì)指南

藍(lán)藍(lán)小助手

陰影設(shè)計(jì)在界面設(shè)計(jì)中扮演著至關(guān)重要的角色,它不僅能夠增強(qiáng)設(shè)計(jì)的立體感和層次感,還能有效地引導(dǎo)用戶的注意力,提升用戶體驗(yàn)。
陰影向左:
當(dāng)元素(如導(dǎo)航欄、抽屜組件或固定表格欄)位于屏幕右側(cè)時(shí),向左的陰影能夠突出這些元素,并暗示它們是可交互或可擴(kuò)展的。
陰影向右:
對(duì)于位于屏幕左側(cè)的元素(如導(dǎo)航欄、抽屜組件或固定表格欄),向右的陰影能夠吸引用戶的注意力,并強(qiáng)調(diào)這些元素的存在和重要性。
陰影向下:
陰影向下通常用于組件內(nèi)部或組件本身,以營(yíng)造立體感和層次感,這是界面設(shè)計(jì)中比較常規(guī)且有效的視覺(jué)處理方法。

UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)

藍(lán)藍(lán)小助手

俗話說(shuō):“細(xì)節(jié)決定成敗”,細(xì)節(jié)的把控至關(guān)重要,這也是設(shè)計(jì)師能力的代表。隨著項(xiàng)目經(jīng)驗(yàn)的積累和專業(yè)能力的成熟,我們對(duì)于設(shè)計(jì)原則、設(shè)計(jì)細(xì)節(jié)和設(shè)計(jì)經(jīng)驗(yàn)的沉淀也會(huì)越來(lái)越多,設(shè)計(jì)輸出也會(huì)因?yàn)檫@些細(xì)節(jié)而顯得更優(yōu)秀。

日歷

鏈接

個(gè)人資料

存檔