我們這個(gè)月談?wù)摰淖畲筅厔?shì)始于蘋(píng)果在WWDC上展示了他們操作系統(tǒng)的下一個(gè)版本。這一次有一個(gè)獨(dú)特的設(shè)計(jì)元素。你抓到它了嗎?

以下是本月的設(shè)計(jì)趨勢(shì)。

1. 文本高亮和下劃線

在網(wǎng)站設(shè)計(jì)中，有一條不成文的規(guī)則，即文本使用更簡(jiǎn)潔的樣式。粗體是可以接受的，斜體有時(shí)也可以，但下劃線很少使用。

這種設(shè)計(jì)趨勢(shì)與使用高亮或下劃線強(qiáng)調(diào)關(guān)鍵詞的文本元素的概念相反。它工作得很好。

這需要大量的對(duì)比和適合下劃線或高亮元素的設(shè)計(jì)風(fēng)格。

這種設(shè)計(jì)趨勢(shì)的成功得益于清晰的意圖。文字顯然對(duì)設(shè)計(jì)的整體意義很重要，對(duì)訪問(wèn)者應(yīng)該從內(nèi)容中得到什么也很重要。

它使用了一個(gè)俏皮的下劃線，字母似乎休息在里面，以突出一個(gè)關(guān)鍵短語(yǔ)。形狀和顏色也模仿了下面較大的按鈕，幫助眼睛從一個(gè)元素移動(dòng)到下一個(gè)元素。這是下劃線(或者你可以稱之為高亮)與品牌顏色結(jié)合使用的有效效果。

Zappos的孩子們?cè)诓噬桨钢惺褂糜腥さ母吡敛糠謥?lái)突出關(guān)鍵的文本元素。它看起來(lái)就像一個(gè)按鈕，幫助網(wǎng)站訪問(wèn)者理解整個(gè)英雄圖像區(qū)域是可以點(diǎn)擊的。突出顯示的作用是使文本更具可讀性，交互元素更具功能性。

Zeus Jones在主頁(yè)上使用了多種文本處理方法，但下劃線是最引人注目的，可能是因?yàn)樗诰W(wǎng)站設(shè)計(jì)中是最不常見(jiàn)的。

2. 不同的幾何形狀

幾何形狀在網(wǎng)站設(shè)計(jì)中以各種形式出現(xiàn)，成為趨勢(shì)元素。這種迭代非常簡(jiǎn)單:使用獨(dú)特的幾何圖形作為整體美學(xué)的一部分。

幾何圖形可能與插圖、照片、文本或背景或前景配對(duì)。形狀的偉大之處在于它們是萬(wàn)能的，可以與許多其他設(shè)計(jì)模式一起工作。

形狀和設(shè)計(jì)中最具挑戰(zhàn)性的是，獨(dú)特的幾何形狀需要一些空間和思考。在設(shè)計(jì)中毫無(wú)理由地使用一些三角形或矩形看起來(lái)會(huì)很奇怪。

那么，如何在設(shè)計(jì)中添加幾何形狀，使它們看起來(lái)有意為之呢?這些例子很好地做到了這一點(diǎn)(通過(guò)三種不同的方式)。

馬睿在模塊化網(wǎng)格中使用了方形和矩形容器，每個(gè)容器內(nèi)都有組合項(xiàng)目。這是幾何圖形最常見(jiàn)和最適用的用法之一——作為容器元素。使它脫穎而出的是圓圈，笑臉輪(也是一個(gè)幾何形狀)，它從來(lái)沒(méi)有離開(kāi)過(guò)屏幕的中心。網(wǎng)格的黑色背景也是內(nèi)容塊的一個(gè)很好的對(duì)比元素。

Thompson Stenning在背景中使用形狀和插圖來(lái)創(chuàng)建一個(gè)令人驚嘆的主頁(yè)視覺(jué)。它很大，很大膽，有足夠多的情節(jié)，你想看它，找出場(chǎng)景。也許這個(gè)視覺(jué)概念最吸引人的地方是它使用了許多幾何形狀——矩形、正方形、三角形、廣告圓——而大多數(shù)項(xiàng)目只關(guān)注一個(gè)形狀。

Romain Penchenat使用三維風(fēng)格的角度來(lái)吸引你進(jìn)入作品集網(wǎng)站。他們使用一個(gè)簡(jiǎn)單的動(dòng)畫(huà)“漂浮”在主頁(yè)上，并跟隨滾動(dòng)與其他幾何元素。

3.陰影和漸變圖標(biāo)

你注意到iOS 14預(yù)覽圖片中圖標(biāo)的漸變和細(xì)微的陰影了嗎?或者你只是在查看iPhone屏幕上的其他變化(比如小部件)?

一段時(shí)間以來(lái)，我們看到越來(lái)越多的設(shè)計(jì)師在圖標(biāo)中加入更多的陰影和深度，但這一設(shè)計(jì)領(lǐng)域的主要參與者將把它推向前沿。每個(gè)圖標(biāo)從一個(gè)平面風(fēng)格移動(dòng)到一個(gè)有背景梯度顏色和更多的陰影圖標(biāo)元素的深度。

不用擔(dān)心，這個(gè)設(shè)計(jì)看起來(lái)還是很像蘋(píng)果，但是有點(diǎn)像iOS早期版本的擬物化風(fēng)格圖標(biāo)。

顏色和陰影元素包含在每個(gè)圖標(biāo)中是很好的。這為每個(gè)元素創(chuàng)造了更多的視覺(jué)興趣和深度，而不會(huì)變得雜亂或垃圾。漸變也是超級(jí)簡(jiǎn)單的，在一個(gè)單調(diào)的元素中使用主色的一個(gè)較暗的版本。

這是一種其他人已經(jīng)在使用的圖像風(fēng)格。DG Studio在主頁(yè)上有一組圖標(biāo)，在設(shè)計(jì)中有微妙的漸變和陰影。同樣，這個(gè)趨勢(shì)的好處是它增加了視覺(jué)的深度，而沒(méi)有妨礙視覺(jué)理解的技巧。

Guillaume Gouessan在圖像圖標(biāo)中使用的漸變方式與前面的例子非常相似，但是顏色的變化稍微多一些。在這里，你可以看到當(dāng)使用顏色變化時(shí)，漸變看起來(lái)是什么樣子的，不是非常劇烈的，但比單調(diào)的選項(xiàng)更戲劇性。你可以在他的網(wǎng)站上的大書(shū)桌圖片的滾動(dòng)下方找到一些更單調(diào)的漸變。(點(diǎn)擊幾下絕對(duì)值得一試。)

愛(ài)它或恨它，梯度和陰影似乎在這里停留了一段時(shí)間。

結(jié)論

你發(fā)現(xiàn)自己有多經(jīng)常尋找大品牌和公司的設(shè)計(jì)靈感?雖然很多網(wǎng)站設(shè)計(jì)趨勢(shì)都是從小網(wǎng)站開(kāi)始的，但大公司確實(shí)可以決定哪些網(wǎng)站流行(或者不流行)。

蘋(píng)果移動(dòng)到有更多陰影和漸變的圖標(biāo)的例子就是一個(gè)很好的例子。一段時(shí)間以來(lái)，我們看到越來(lái)越多的這樣的元素悄然出現(xiàn)，但這種風(fēng)格即將再次變得非常大。