扁平化設(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)歷了哪些變化。
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
先一起看看最近的一個(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ì)。
回到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ì)更新里,玩了不少 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 對(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)格
上面這些案例展示了現(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
在做產(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)的定義、作用以及在用戶界面中的重要性。
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)的作用
C. UI圖標(biāo)在用戶界面中的重要性
UI圖標(biāo)在用戶界面設(shè)計(jì)中扮演著不可或缺的角色,其重要性體現(xiàn)在以下幾個(gè)方面:
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)的功能和意義。
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)化。
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ì)案例:
B. 分析圖標(biāo)設(shè)計(jì)背后的原理和決策
成功的UI圖標(biāo)設(shè)計(jì)案例背后都有一些共同的原理和決策。
以下是一些分析圖標(biāo)設(shè)計(jì)背后的原理和決策的方法:
A. 總結(jié)UI圖標(biāo)設(shè)計(jì)的重要性和原則
UI圖標(biāo)在用戶界面中扮演著重要的角色,它們不僅能夠傳達(dá)信息和功能,還能夠增強(qiáng)用戶體驗(yàn)和界面的美感。以下是一些重要的UI圖標(biāo)設(shè)計(jì)原則:
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ì)能力。以下是一些建議:
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
對(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)交流。
原創(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)是一個(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ǔ)。
蘭亭妙微(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。
基于海外組件庫(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ì)在界面設(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é)處理方法。
俗話說(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)秀。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn