一般網(wǎng)站的平均壽命只有三年。像是顏色或是排版字體之類的迭代甚至比這個(gè)時(shí)間更快。這就是為啥時(shí)刻注意網(wǎng)站設(shè)計(jì)趨勢(shì)是如此的重要。關(guān)注這些趨勢(shì)能幫助我們每天在自己的設(shè)計(jì)上做一點(diǎn)小小的變化以保證我們不要與社會(huì)脫節(jié)。
閱讀這篇設(shè)計(jì)趨勢(shì)指導(dǎo),你可以學(xué)習(xí)吸收一些新的設(shè)計(jì)趨勢(shì),并在未來的設(shè)計(jì)工作中發(fā)揚(yáng)光大。
圖片和視頻不是完美的,漂亮的字體設(shè)計(jì)永遠(yuǎn)是被需要的。這一設(shè)計(jì)趨勢(shì)將關(guān)注點(diǎn)放在字體設(shè)計(jì)如何幫助呈現(xiàn)更好的設(shè)計(jì)效果上。
但頁面首屏只有一些色塊和文字元素的時(shí)候,這意味著設(shè)計(jì)必須將關(guān)注點(diǎn)放在“什么信息是用戶需要立即從頁面中提取到的”。
漂亮的字體組合和字體設(shè)計(jì)如何一起和諧工作將成為這一趨勢(shì)的重點(diǎn)。所有的信息需要有很高的可閱讀性 ,并且字體上需要注意不要太過巨大。
尋找一些非襯線字體或者是一些閱讀性高的新奇字體,將它們和一些中立且更有影響力的內(nèi)容相組合。
Try it: Causten Font Family
和上一個(gè)趨勢(shì)完完全全相反的是影像式主頁:主頁由滿屏的圖像配合微量的其他元素來敘述故事。
這種設(shè)計(jì)風(fēng)格會(huì)讓用戶沉浸其中,覺得自己是視頻中的一份子。其他的元素 —— 從文字元素到導(dǎo)航,通常會(huì)以非常小的尺寸縮在屏幕的角落里以提供更多的空間給視頻展示。
這里還有另外一件事很多這樣的項(xiàng)目都會(huì)遇到:他們同時(shí)使用一些影片特效,例如慢動(dòng)作、畫中畫或者其他特效使得影片或視頻看上去更加特殊。
Try it: Slow Beats Slides Opener
不管是內(nèi)容豐富或缺少藝術(shù)氛圍元素的排版需求,都可以通過加入塊狀或格子花紋來幫助所有的信息組合到一起。
有趣的是這種趨勢(shì)可以帶來很多設(shè)計(jì)樣式,不論是用最少量大格子元素和文字組合(如上圖)或者將格子與復(fù)雜的視覺圖片組合在一起(如下圖)都是可以的。
思考如何將格子和塊狀因素組合在一起幫助整合視覺信息是設(shè)計(jì)這種風(fēng)格的重點(diǎn)。使用設(shè)計(jì)去創(chuàng)造額外的點(diǎn)擊元素、信息觸點(diǎn),或者是其他一些可以讓用戶和網(wǎng)頁之間進(jìn)行交互的因素。
Try it: Grid Shape Masks
你可能已經(jīng)知道了,可以在白日與暗夜模式中隨意切換是很受歡迎的一種設(shè)計(jì)風(fēng)格。現(xiàn)在大部分的手機(jī)允許用戶操控核心視覺變化,這種感覺令用戶覺得很棒。將這種切換加入網(wǎng)站可以提升用戶體驗(yàn)。
記住當(dāng)你切換至暗夜或白日模式的時(shí)候,只是將黑變成白或者將白變成黑是完全不夠的。你的設(shè)計(jì)計(jì)劃需要為兩種模式做兩套色盤。
Try it: Fitness Statistics Mobile App Kit
分屏設(shè)計(jì)正在不斷的發(fā)展進(jìn)化中
時(shí)尚分屏可以提供更多的交互性并鼓勵(lì)用戶參與其中,這點(diǎn)非常棒。上面的例子很好地表現(xiàn)了如何使用這種帶有視頻和三維效果的互動(dòng)元素來展示設(shè)計(jì)美學(xué)。
設(shè)計(jì)這個(gè)風(fēng)格的技巧就是要讓他先成為你的風(fēng)格。分屏可以提供給用戶這樣或那樣的各種交互選擇或者僅僅是簡(jiǎn)單的在文字和圖片元素之間制造一種視覺平衡。
Try it: Split IOS UI Kit
有的時(shí)候讓設(shè)計(jì)變得有趣的東西都是藏在幕后的,就像是只有用戶進(jìn)行交互才會(huì)出現(xiàn)的動(dòng)效。
更多的交互動(dòng)效也是今年的設(shè)計(jì)趨勢(shì)之一。圖片、文字或其他元素在用戶進(jìn)行頁面交互時(shí)候在屏幕內(nèi)外隨著用戶操作而移動(dòng)、消失或展現(xiàn)。鼠標(biāo)懸?;驖L動(dòng)時(shí),動(dòng)效反饋?zhàn)兊酶鼮榧磿r(shí)。
這件事更好的鼓勵(lì)網(wǎng)站瀏覽者實(shí)實(shí)在在的觀測(cè)動(dòng)作,并思考動(dòng)作的意義和結(jié)果。反過來,過于復(fù)雜的交互動(dòng)效會(huì)使得網(wǎng)站上一些其他信息被忽視。因此,這種趨勢(shì)最適用于易于理解的簡(jiǎn)單元素。
Try it: Lewis-Creative Portfolio & Agency HTML Template
新的、不同的、有意思的、奇特的字體設(shè)計(jì)可以推動(dòng)設(shè)計(jì)去向更高的層級(jí)。越來越多的項(xiàng)目設(shè)計(jì)將關(guān)注點(diǎn)放在字體設(shè)計(jì)上,試驗(yàn)性字體設(shè)計(jì)成為了一個(gè)必須的工具。
試驗(yàn)性字體設(shè)計(jì)的重點(diǎn)在于:他們是不同的。有些可能是設(shè)計(jì)師制作到一半便停止的設(shè)計(jì),或者干脆是用戶自研的。
你可能會(huì)看到一些超出你想象的圖形或線、三維設(shè)計(jì)字體、動(dòng)效或顏色,并感覺他們非常與眾不同。用實(shí)驗(yàn)性字體來設(shè)計(jì)大屏的首頁,首屏廣告位宣傳語將會(huì)有非常不錯(cuò)的效果,但是他們并不適用于需要高可閱讀性的段落性文案或小方塊內(nèi)的文案,例如操作指引性按鈕。
Try it: Exa Metline Font
設(shè)計(jì)元素并不一定要待在一個(gè)固定的框里,他們可以互相遮擋、疊加。
就像是提供了一條引導(dǎo)視線的路徑一般,重疊設(shè)計(jì)創(chuàng)造了畫面的景深和立體感。
以下是這個(gè)設(shè)計(jì)趨勢(shì)的重點(diǎn):你需要?jiǎng)?chuàng)造這些元素并保持他們的可閱讀性并拼接在一起,同時(shí)你需要使得他們始終保持較高的可閱讀性,即使是在移動(dòng)端設(shè)備上。否則,這個(gè)設(shè)計(jì)趨勢(shì)的重要性將迅速下降。
Try it: Tourist Guide Card Widget
一個(gè)干凈的首頁可以幫助用戶思考更多設(shè)計(jì)背后的故事。極簡(jiǎn)美學(xué),特別是對(duì)于首頁設(shè)計(jì)而言,是今年的重要趨勢(shì)。
如上下圖所示:無論說是干凈的二維背景上僅有字段展示,或圖片和視頻加上僅僅一個(gè)標(biāo)題,甚至連導(dǎo)航也沒有的樣式都可以算作極簡(jiǎn)美學(xué)的范疇。
極簡(jiǎn)美學(xué)幾乎把一切都從設(shè)計(jì)中剝離出來。這個(gè)設(shè)計(jì)趨勢(shì)看上去非常的流線型且簡(jiǎn)單,但真正想要運(yùn)用好也是在冒險(xiǎn),因?yàn)樗苷故镜幕?dòng)太少。
Try it: Vinero Very Clean and Minimal Portfolio WordPress Theme
將實(shí)色和空心字體結(jié)合起來做設(shè)計(jì)(通常是在同一個(gè)頁面中)可以發(fā)揮最大作用。
這個(gè)設(shè)計(jì)趨勢(shì)可以是有交互的頁面也可以是單純的展示頁面。用上面這個(gè)網(wǎng)站來舉例:它使用了實(shí)心字體作為鼠標(biāo)懸停樣式來告知用戶這個(gè)元素是可以點(diǎn)擊的,同時(shí)空心字體則為默認(rèn)無鼠標(biāo)懸停樣式。
這個(gè)結(jié)果非常有趣,你可以使用一些好玩的字體效果來設(shè)計(jì)這種交互動(dòng)效。另外,因?yàn)槟阌猛粋€(gè)字體做了兩種不同的設(shè)計(jì)樣式,這也使得頁面產(chǎn)生了一些微妙的化學(xué)反應(yīng)。
Try it: Visia Duo (Natural and Outline) Typeface
襯線字體——曾因?yàn)榭砷喿x性差而被認(rèn)為是網(wǎng)站上最不適合使用的字體,現(xiàn)在隨處可見?!靶《潭浜托《涛舶汀币r線字體進(jìn)化成“長耳朵”“長尾巴”,這種字體就是天生為閱讀而設(shè)計(jì)的。
這一趨勢(shì)的最大貢獻(xiàn)者可能是高分辨率屏幕(以及它們?cè)谑袌?chǎng)上的主導(dǎo)地位)。由于高清晰度屏幕的出現(xiàn),“小耳朵”“小尾巴”不會(huì)再出現(xiàn)模糊或都抖動(dòng)的情況了。
現(xiàn)在襯線字體和大部分現(xiàn)代、中間字體樣式一樣可以完美的工作了,已經(jīng)可以和無襯線字體一樣可以顯示文本和正文了。
Try this: Aaron Serif Font Family
極簡(jiǎn)設(shè)計(jì)比起留白設(shè)計(jì)而言還是復(fù)雜了些,大量的留白設(shè)計(jì)使得頁面更加簡(jiǎn)約。
留白設(shè)計(jì)最受歡迎的原因就是大面積的留白能讓人更關(guān)注于對(duì)重點(diǎn)的設(shè)計(jì)。留白不是單純的只有空白,而是被某物占據(jù)的余白。
空白空間同樣也展現(xiàn)出了美學(xué)和古典感,可以適用于各種項(xiàng)目的設(shè)計(jì)。
感謝 Ins 上這些酷炫的 gif,網(wǎng)站上貼紙風(fēng)格的 gif 也因此有了更多變化的可能性。
即使是你意想不到的網(wǎng)站,比如上面的電子商務(wù)設(shè)計(jì),也會(huì)用這樣的設(shè)計(jì)來吸引用戶注意。微動(dòng)效可以是任何的元素,它可以是從屏幕上彈出的微小圖像到移動(dòng)的文本元素的任何內(nèi)容。
Try it: Simple Text Rotator WordPress Plugin
如果你還沒有開始在網(wǎng)頁設(shè)計(jì)理使用視頻元素,今年應(yīng)該是個(gè)好機(jī)會(huì)開始使用了。視頻能包含大量的內(nèi)容,而且現(xiàn)在隨時(shí)隨地的觀看視頻越來越成為一個(gè)趨勢(shì)了。
看看上圖這種會(huì)變化的背景設(shè)計(jì) —— 視頻已經(jīng)成為網(wǎng)站設(shè)計(jì)的一部分了,這種故事敘述手法已經(jīng)成為未來的一個(gè)趨勢(shì)。不可否認(rèn)的是:用戶喜歡這個(gè)。從這個(gè)角度而言,在設(shè)計(jì)中使用更多視頻已經(jīng)是一個(gè)可以確定的設(shè)計(jì)趨勢(shì)了,它會(huì)變得越來越受歡迎。(因?yàn)閵蕵分辽习?,人在閱讀視頻時(shí)候視頻把大量的內(nèi)容直接淺顯的印入你的腦子,還沒有時(shí)間思考,視頻會(huì)帶著你前往下一個(gè)內(nèi)容,刷刷抖音就40分鐘過去了呢。)
簡(jiǎn)單、流線型的標(biāo)志設(shè)計(jì)正在取代過去作為全屏品牌元素的一些更復(fù)雜的選項(xiàng)。也許是因?yàn)槠渌聊辉刈兊迷絹碓綇?fù)雜,或者這只是一種時(shí)尚。
不管怎么說,簡(jiǎn)單的 Logo 設(shè)計(jì)到處都是。
這些徽標(biāo)的優(yōu)點(diǎn)在于,簡(jiǎn)單的類型和圖標(biāo)元素易于閱讀。需要注意的一點(diǎn)是,它們的外觀和感覺似乎都很相似。
Try it: Logo Templates
為了方便移動(dòng)端用戶,拇指友好樣式的大按鈕也是所有版本網(wǎng)站的默認(rèn)按鈕。這包括了從操作到引導(dǎo)到導(dǎo)航的各個(gè)方面。
它必須足夠大來方便用手指點(diǎn)擊以免誤觸到其他錯(cuò)誤的元素。
這些按鈕通常會(huì)有不同的顏色或卡片樣式,這樣就可以很容易地看到應(yīng)該發(fā)生什么動(dòng)作,以及哪些元素將通過觸摸來執(zhí)行某些操作。
看看上面這些案例,每一個(gè) box 或者卡片都是一個(gè)巨大的按鈕。在移動(dòng)端設(shè)備上,卡片一般是垂直排列的。
Try it: Google AMP Mobile Template
你是否經(jīng)常對(duì)你的網(wǎng)站設(shè)計(jì)做一些小的改變來保持新鮮感?雖然這可能是個(gè)可怕的想法,但是持續(xù)的對(duì)網(wǎng)站進(jìn)行小的設(shè)計(jì)改版實(shí)際上會(huì)成為你日常工作的一部分,并有助于保持設(shè)計(jì)的新鮮感(它還可以讓你不會(huì)這么快就覺得無聊)。
就像是這文章里說過的,加速設(shè)計(jì)的腳步,這樣您就可以毫無顧慮地緊跟潮流!