技術(shù)資訊
春意盎然的三種網(wǎng)頁設(shè)計趨勢
2018-03-27 09:52:33
相比于冬季更為大膽的用色,更為輕盈的黑白色調(diào),目的和指向性更為明確的海報式首頁設(shè)計,所有的這些趨勢,將會在這個 3 月發(fā)酵。進入春季之后,溫度的回升,直接影響到情緒的變化,這一點也反映到最新的網(wǎng)頁設(shè)計作品當中,最終以設(shè)計趨勢的形態(tài)呈現(xiàn)出來。就目前來看,我們所觀察到的這些趨勢,其實都是有著相對持久的生命力的,它們通常都植根于某個非常重要的、主流的設(shè)計趨勢。全屏海報風(fēng)的首頁設(shè)計無疑結(jié)合了極簡和對于極致視覺效果的追求,紫色的流行無疑和年度潘通流行色的逐步火熱有著緊密關(guān)聯(lián),而文本字體和漸變色的結(jié)合無疑是經(jīng)典元素和流行配色的結(jié)合。一起跟隨力圖數(shù)字科技的小編看看這個三月將會流行的三種網(wǎng)頁設(shè)計趨勢。
一、漸變色+文本
漸變色不僅適宜同圖片疊加在一起,而且它和文本元素之間也可以構(gòu)成良好的搭配。
就目前而言,在網(wǎng)頁中的字體設(shè)計更加傾向于使用簡單的字體,并且附帶一些「額外的東西」。這些額外的東西可以是色彩,也可以圖片,用來填充到文本字體當中。
而隨著漸變色彩的回歸,在字體中填充漸變色彩成了新的選擇。如果你能夠接受漸變色彩,那么在文本字體中填充色彩,也是可以創(chuàng)造出令人驚嘆的視覺效果的。
Love Lost 這個網(wǎng)頁同樣使用了黑色的背景,字體則選取了優(yōu)雅的襯線字體,這一點和主題非常貼合,而其中所采用的漸變色彩是白到粉紅的漸變,在視覺上是非常貼切的設(shè)計。
Michael Rappaz 的作品集網(wǎng)站當中,漸變色彩并沒有填充到文本當中,而是填充到了文本的周圍。借助高光漸變動畫,設(shè)計師讓這部分文本充滿了視覺吸引力。其余的部分相比之下則顯得頗為簡單,這樣就讓文本部分更容易被用戶注意到。
Zoocha 這個網(wǎng)頁當中,文本是主要的視覺元素,設(shè)計師將使用了從黃到綠的漸變色,填充到文本當中。在黑色的背景映襯之下,顯得非常的醒目。
二、 海報式首頁
全屏式的頁面設(shè)計已經(jīng)流行好一陣子了,超大的圖片和全屏視頻背景是這種網(wǎng)頁中最常見的元素之一。而現(xiàn)在,這種頁面設(shè)計開始出現(xiàn)一種微妙的變化:復(fù)雜的導(dǎo)航和額外的文本信息被移除,頁面以一種類似電影海報的形式呈現(xiàn)出來。
這樣的設(shè)計手法受到了極簡主義風(fēng)格的影響,但是與之相比更加注重視覺上的華麗風(fēng)格和富有凝聚力的表現(xiàn)手法。
雖然這種設(shè)計手法聽起來不夠吸引用戶,但是如果搭配合理的視覺效果,它所能帶來的實際效果并不會差。成就一個優(yōu)秀的海報式首頁,關(guān)鍵在于視覺效果和字體的選取與設(shè)計。如果沒有足夠的空間來為信息創(chuàng)造視覺吸引力,整個頁面很難創(chuàng)造足夠具有凝聚力的視覺效果。
這種設(shè)計趨勢最令人擔憂的是其中的視覺元素類型并不多(即使包括導(dǎo)航和 CTA 按鈕),相比其他的頁面,并沒有那么多內(nèi)容供用戶去閱讀和掃視。這個時候,視覺效果的設(shè)計就直接關(guān)系到了整個頁面是否會給用戶留下足夠深刻的印象。
在下面的兩個案例當中,每個網(wǎng)頁都以不同的方式來呈現(xiàn)海報式首頁的概念。
Tofino Resort 這個網(wǎng)站通過宏大的背景圖片和充滿個性的字體設(shè)計創(chuàng)造出海報式的體驗,導(dǎo)航被隱藏在右上角的漢堡圖標當中,而 CTA 按鈕也為了避免喧賓奪主,被制作成幽靈按鈕,置于海報圖標旁邊。
leadto Digital 選擇白色背景的簡約設(shè)計,而屏幕中央的動畫和有趣的文字處理效果,足以吸引用戶的注意力,其他的文本信息大多被放置在屏幕的邊緣,讓用戶的注意力盡量集中在屏幕中央。
更多優(yōu)秀案例網(wǎng)址賞析:www.leadto.com
三、紫色為主的配色方案
別忘了, 2018 年的年度潘通色是紫外光(18-3838),通過最初幾個月的發(fā)酵之后,這款年度潘通色逐漸在網(wǎng)頁設(shè)計領(lǐng)域中產(chǎn)生影響力。
雖然絕大多數(shù)的網(wǎng)頁設(shè)計師并不一定會選擇紫色來進行設(shè)計,但是潘通推出年度潘通色之后,確實讓更多人開始考慮紅藍兩色的配色以及兩者混合出來的紫色。這種配色的好處在于,它可以和時下的其他流行趨勢很好的結(jié)合起來:比如色調(diào)明亮的 Material Design 的配色,以及復(fù)古的設(shè)計風(fēng)格。
紫色本身是一種獨特且出現(xiàn)頻率較低的色彩,它能成為你的網(wǎng)站在競爭中脫穎而出的一個理由,它往往和藍色相伴出現(xiàn),并且更容易創(chuàng)造良好、獨特的第一印象。
紫色的玩法很多。不同的紫色可以營造不同的氛圍, 傳遞不同的情緒,你可以讓它更偏向紅色,營造出歡快愉悅的情緒;可以讓它偏向黑色,營造出更加深沉神秘的情緒;也可以讓它偏向藍色,營造出更加冷峻的氛圍。
在下面的兩個案例當中,你會看到紫色多樣的用法,以及它和其他不同的領(lǐng)域不同的內(nèi)容之間良好的兼容性。紫色是神秘的,但是它同樣是友好且具有良好兼容性的。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2008-12-30 13:43:00] 一些令人討厭的自作聰明
- [2008-04-14 15:49:00] em和px兩種字體單位的區(qū)別
- [2012-06-22 00:19:35] 書寫體在網(wǎng)頁上的應(yīng)用
- [2015-03-23 09:07:25] 網(wǎng)站工作者必須掌握的技巧
- [2015-12-02 11:34:09] 分析網(wǎng)站排名下降的影響因素
- [2009-02-12 23:05:00] 關(guān)于支付寶一個菜鳥用戶的使用體驗
- [2015-03-19 09:09:02] 如何避免搜索引擎排名的致命錯誤解析?
- [2008-12-10 16:36:00] 找茬:支付寶登錄的改進
- [2009-03-27 09:03:00] 淺談購物類網(wǎng)站如何保持視覺設(shè)計的一致性
- [2009-04-07 08:23:00] 寬屏不是用來閱讀的
- [2012-04-08 22:19:20] 如何處理好網(wǎng)站設(shè)計的細節(jié)
- [2012-05-20 22:25:43] 長尾關(guān)鍵詞在網(wǎng)站優(yōu)化中的作用
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
響應(yīng)式設(shè)計 營銷策略 微官網(wǎng)帶來的好處 青島抖音小程序開發(fā) 企業(yè)網(wǎng)站建設(shè) 網(wǎng)站SEO 青島網(wǎng)站營銷 H5專題頁面 扁平化設(shè)計 網(wǎng)站規(guī)劃 青島做網(wǎng)站多少錢 手機端的網(wǎng)站 青島網(wǎng)站建設(shè)公司哪家好 青島高端網(wǎng)站設(shè)計公司哪家好 青島好的網(wǎng)站優(yōu)化公司 青島網(wǎng)站案例 營銷型網(wǎng)站建設(shè) 高端輪胎網(wǎng)站設(shè)計 視覺靈感 微信營銷的優(yōu)勢 青島開發(fā)區(qū)建站公司 網(wǎng)站設(shè)計趨勢 版面布局 用戶界面 網(wǎng)站策劃 膠南網(wǎng)站建設(shè)公司 微信小程序 外貿(mào)網(wǎng)站設(shè)計 H5 青島網(wǎng)站制作