用靈魂感悟設(shè)計(jì) · 用設(shè)計(jì)創(chuàng)造價(jià)值
WITH SOUL FEELING DESIGN WITH DESIGN TO CREATE VALUE
您當(dāng)前位置:  設(shè)計(jì)中國(guó)    ⁄    網(wǎng)頁(yè)設(shè)計(jì)    ⁄ 資訊內(nèi)容

2021年高質(zhì)感網(wǎng)站設(shè)計(jì)大趨勢(shì)

作者:admin      來源:互聯(lián)網(wǎng)      發(fā)布時(shí)間: 2021/1/4 12:02:19     瀏覽:
一個(gè)好的網(wǎng)站,應(yīng)該持續(xù)更新內(nèi)容,內(nèi)容對(duì)用戶有幫助,就有更高的曝光機(jī)會(huì)。

  今年全球受到新冠肺炎的影響,人類的生活受到了重大影響:旅行禁令、封城、停校停課...深遠(yuǎn)影響了所有人,人們利用科技抗疫,網(wǎng)頁(yè)自然也沒有缺席,因此今年許多網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)都圍繞在防疫上。

  舉例來說:為了維持業(yè)績(jī),企業(yè)大多投注了更多預(yù)算于線上商城上;美食外送成為主流,許多食品公司也順勢(shì)推出線上訂購(gòu)料理包的服務(wù),甚至是教育機(jī)構(gòu)將課程搬上網(wǎng)絡(luò),讓學(xué)生減少外出的機(jī)會(huì)避免染疫...這些變化勢(shì)必仍會(huì)延續(xù)到2021年。人們對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的期盼更高,也希望透過網(wǎng)頁(yè)能夠得到更好的服務(wù),更多的資訊,當(dāng)然也要賞心悅目,這些都是對(duì)于2021年網(wǎng)頁(yè)設(shè)計(jì)產(chǎn)業(yè)的挑戰(zhàn)。

  有「閱讀感」的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)

  疫情期間,人與人的互動(dòng)少了,神奇的是人們與書的互動(dòng)變多了。許多資料顯示疫情期間,人們更愿意回到閱讀的懷抱。根據(jù)媒體報(bào)導(dǎo)指出,人們面對(duì)疫情降低人與人的互動(dòng),在家進(jìn)行的休閑娛樂項(xiàng)目需求大增:拼圖、健身、游樂器等都熱銷一空,其中閱讀不但安全,也能滿足人們對(duì)于資訊的需求。

  雜志風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)潮,也吹向了網(wǎng)頁(yè)設(shè)計(jì)。網(wǎng)站能否呈現(xiàn)出類似閱讀的方式呢?

  這一點(diǎn)是十分肯定的,很巧合的是,許多客戶與我們的想法不謀而合,已經(jīng)將故事的概念應(yīng)用在網(wǎng)頁(yè)的產(chǎn)品說明,也十分樂見網(wǎng)頁(yè)設(shè)計(jì)公司將敘說故事的概念設(shè)計(jì)在網(wǎng)頁(yè)上。例如美兆集團(tuán)的Interior室內(nèi)設(shè)計(jì)雜志,采用了雜志設(shè)計(jì)風(fēng)格的版型,讓網(wǎng)頁(yè)瀏覽的過程更具故事性。

  另外一個(gè)例子:大家健康雜志,是以紙本雜志為出版事業(yè)主體,后打造官方入口網(wǎng)站。從紙本的雜志延伸的官網(wǎng),在首頁(yè)的呈現(xiàn)使用了顯著的區(qū)塊做出內(nèi)容區(qū)隔,類似報(bào)章雜志的專欄設(shè)計(jì)風(fēng)格,可以更容易與紙本的媒體有視覺上的連結(jié)。

  雜志風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)呈現(xiàn)方式不只出現(xiàn)在設(shè)計(jì)相關(guān)的產(chǎn)業(yè),連科技產(chǎn)業(yè)也非常喜愛。例如科技人文雜志W(wǎng)IRED的首頁(yè)呈現(xiàn),就呈現(xiàn)出報(bào)章雜志的區(qū)塊式閱讀風(fēng)格,讓人一眼就像是回到了熟悉的紙本媒體。但可惜的是無法避免的廣告干擾了閱讀的廣告,而且很多...畢竟雜志媒體已經(jīng)萎縮了很多,不得不透過廣告獲利。

  放下冷冰冰的產(chǎn)品說明,想想故事吧

  人們都討厭硬生生的廣告,卻很喜歡聽故事,許多令人津津樂道的廣告,多有一段好的故事,讓產(chǎn)品介紹退居第二位,看似將重點(diǎn)放在故事,事實(shí)上以退為進(jìn),反而讓人深深地記得產(chǎn)品與故事的緊密連結(jié)。

  以美琪生技為例,是知名的個(gè)人清潔用品品牌。網(wǎng)站內(nèi)除了產(chǎn)品介紹外,透過部落格的專欄,將清潔防疫相關(guān)的知識(shí)以影片、文字等故事方式敘說給訪客,接著進(jìn)入產(chǎn)品的訊息分享,以故事取代廣告,增加訪客對(duì)于品牌的信任感。

  網(wǎng)頁(yè)也應(yīng)該要有說故事的概念,幸運(yùn)的是網(wǎng)頁(yè)設(shè)計(jì)沒有頁(yè)數(shù)、時(shí)間與篇幅的限制,可以盡情揮灑各種巧思,但網(wǎng)頁(yè)設(shè)計(jì)卻相對(duì)更為困難,舉例來說:要設(shè)計(jì)出滾動(dòng)網(wǎng)頁(yè)視覺特效,就需要Javascript與CSS的技術(shù),加上視覺設(shè)計(jì)、文字設(shè)計(jì)等工作,團(tuán)隊(duì)合作上要有一定的默契。

  2021年網(wǎng)頁(yè)更需互動(dòng)

  越來越多人透過網(wǎng)絡(luò)找尋服務(wù),網(wǎng)站提供的即時(shí)通訊工具,有助于解決信件與表單無法解決的問題。

  網(wǎng)頁(yè)上即時(shí)通訊平臺(tái)首推微信和QQ,原因十分單純:在國(guó)內(nèi)的通用性最高,且基本功能免費(fèi),只要將程式碼交給網(wǎng)頁(yè)設(shè)計(jì)人員,就能讓你的網(wǎng)站搖身一變成為與客戶溝通的平臺(tái)。功能對(duì)中小企業(yè)來說也已經(jīng)夠用,由于微信與QQ已經(jīng)是全球數(shù)以億計(jì)的即時(shí)通訊平臺(tái),越來越多客戶管理系統(tǒng)(CRM)都有串聯(lián)的功能,讓客戶聯(lián)系的過程得以記錄在一個(gè)整合的資料庫(kù)內(nèi)。

  除了即時(shí)通訊工具以外,線上研討會(huì)也是維系客戶的一個(gè)好辦法。在疫情散播之前,許多線上會(huì)議的軟體以企業(yè)為對(duì)主要用戶,價(jià)格并不便宜,疫情爆發(fā)之后,多數(shù)的線上會(huì)議工具暫停收費(fèi)或推出免費(fèi)版,全球掀起了一股線上研討會(huì)的熱潮。

  滿版留白、網(wǎng)頁(yè)設(shè)計(jì)新主流

  用戶來到網(wǎng)站,一開始會(huì)觀察網(wǎng)頁(yè)設(shè)計(jì)的視覺效果,所以如何留下一個(gè)好印象,版型是一個(gè)關(guān)鍵指標(biāo)。以往將網(wǎng)頁(yè)填滿資訊,與大量按鈕的舊式設(shè)計(jì)逐漸退場(chǎng),這幾年的網(wǎng)頁(yè)版型技巧上,滿版+留白設(shè)計(jì)受到不少客戶青睞,有幾個(gè)主要的原因:

  首先,滿版網(wǎng)頁(yè)設(shè)計(jì)非常適合呈現(xiàn)照片式的內(nèi)容,當(dāng)你的主題以照片呈現(xiàn)時(shí),滿版可以讓用戶的專注力聚焦在圖片上。以Allboard English這個(gè)網(wǎng)站來說,一張照片就能呈現(xiàn)出上課時(shí)的環(huán)境、師資與學(xué)生的活力,沒有什么比這樣的照片更具說服力了。

  接著,滿版網(wǎng)頁(yè)設(shè)計(jì)更符合RWD響應(yīng)式的設(shè)計(jì),這一次的案例來說,滿版的網(wǎng)頁(yè)設(shè)計(jì)結(jié)合了區(qū)塊式的內(nèi)容呈現(xiàn),帶來了更鮮明的內(nèi)容呈現(xiàn),恰好與智慧手機(jī)經(jīng)常使用的卡片式內(nèi)容呈現(xiàn)模式相似。此外,大量的按鈕整合在漢堡選單也是一個(gè)顯著的趨勢(shì),使用漢堡選單于網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)很重要的趨勢(shì),尤其是對(duì)于智慧手機(jī)網(wǎng)頁(yè)設(shè)計(jì)來說。

  另外一個(gè)滿版的案例是圣光雕刻,滿版網(wǎng)頁(yè)設(shè)計(jì)的視覺搭配了大量的留白,網(wǎng)頁(yè)沒有被滿滿的圖文擠滿,而是圖文內(nèi)容以和諧的方式呈現(xiàn),與文物的質(zhì)感相互呼應(yīng),雖然用戶得多花一點(diǎn)時(shí)間卷動(dòng)網(wǎng)頁(yè),才能看到完整的內(nèi)容,但訪客會(huì)更樂于停在網(wǎng)站上閱讀內(nèi)容,對(duì)于網(wǎng)站的客戶停留時(shí)間指標(biāo)來說,會(huì)帶來一定的幫助。

  形象區(qū)塊:強(qiáng)而有力的循環(huán)影片

  利用影片于網(wǎng)頁(yè)設(shè)計(jì)的情境很多,最常見的情境之一就是將影片放在首頁(yè)上方,給訪客視覺上的驚喜。不過,我們注意到大多數(shù)的首頁(yè)影片,因?yàn)橛捌瑱n案過大,用戶畫面還沒呈現(xiàn)之前,就已經(jīng)離開了網(wǎng)頁(yè)。

  網(wǎng)頁(yè)設(shè)計(jì)者要考慮到影片檔案遠(yuǎn)比文字、圖片來得大數(shù)十倍,甚至百倍,使用不當(dāng)會(huì)使得網(wǎng)頁(yè)開啟得緩慢,我們建議使用影片務(wù)必優(yōu)化影片,讓影片更適合在網(wǎng)頁(yè)上呈現(xiàn)。

  先從影音服務(wù)開始說起,除了免費(fèi)的視頻平臺(tái)以外,有許多付費(fèi)的影音平臺(tái)提供了無廣告,也更穩(wěn)定的影音服務(wù),這是一個(gè)提升網(wǎng)頁(yè)影音品質(zhì)的策略。另外,將影片的長(zhǎng)度縮短是縮小影片檔案大小最立竿見影的方式,例如我們最近看到了羅技滑鼠的新產(chǎn)品網(wǎng)頁(yè),使用了循環(huán)影片播放的方式,檔案格視為MP4,且大小控制在3MB,既能表現(xiàn)產(chǎn)品的高質(zhì)感又能快速于網(wǎng)頁(yè)上顯示,相當(dāng)值得學(xué)習(xí)。

  網(wǎng)頁(yè)品質(zhì)三要素:響應(yīng)式設(shè)計(jì)、速度、內(nèi)容

  2020年Google Search Console(原站長(zhǎng)工具)出現(xiàn)了很大的新元素:網(wǎng)站核心使用體驗(yàn)。這個(gè)新的標(biāo)準(zhǔn)有三個(gè)新的指標(biāo),LCP (最大內(nèi)容繪制)、FID (首次輸入延遲時(shí)間)和CLS(累計(jì)版面配置轉(zhuǎn)移),這三個(gè)新的指標(biāo)要達(dá)到Google的標(biāo)準(zhǔn)并不容易,考驗(yàn)著網(wǎng)站開發(fā)人員。這三個(gè)標(biāo)準(zhǔn)預(yù)計(jì)在2021年納入指標(biāo),勢(shì)必影響網(wǎng)站排名,相信未來類似百度的國(guó)內(nèi)搜索引擎也會(huì)采用此標(biāo)準(zhǔn)。

  最后,網(wǎng)站的內(nèi)容仍主導(dǎo)了搜尋引擎自然排名的結(jié)果。一個(gè)好的網(wǎng)站,應(yīng)該持續(xù)更新內(nèi)容,內(nèi)容對(duì)用戶有幫助,就有更高的曝光機(jī)會(huì)。網(wǎng)站的內(nèi)容不再局限于文字與圖片,影音早就已經(jīng)是今日網(wǎng)絡(luò)用戶的最愛,企業(yè)應(yīng)該試著開發(fā)出有助于用戶的影音內(nèi)容,并且放在公開的影音平臺(tái)。

  綜觀上述的幾個(gè)趨勢(shì),不難察覺網(wǎng)站的設(shè)計(jì)品質(zhì)決定了一個(gè)網(wǎng)站的排名,遵守搜索引擎的網(wǎng)頁(yè)設(shè)計(jì)規(guī)范,并且優(yōu)化網(wǎng)頁(yè)的讀取效率,加強(qiáng)網(wǎng)站的內(nèi)容品質(zhì),做到這三點(diǎn)的網(wǎng)站必可取得較佳的自然排名。

  讓網(wǎng)頁(yè)具備基本電商功能

  疫情下的經(jīng)濟(jì)大量仰賴電子商務(wù),但要短時(shí)間內(nèi)成立一個(gè)電子商城,并不是一件容易的事情,因此有客戶使用簡(jiǎn)易的表單功能,做到基礎(chǔ)電子商務(wù)的服務(wù)。雖然表單的功能并不強(qiáng)大,便利性也比不上線上金流支付,優(yōu)點(diǎn)是可以與客戶做進(jìn)一步的確認(rèn)訂單,也能減少網(wǎng)絡(luò)詐騙的問題,仍有不少?gòu)S商運(yùn)用表單的方式,達(dá)到電子商務(wù)的目的。

  例如上圖的案例中所推出的湯品調(diào)理包大受市場(chǎng)歡迎,透過表單的功能,能夠讓客戶自己下訂組合不同的組合,并且選擇付款的方式后,就能夠完成線上訂購(gòu)。

  使用表單替代電子商務(wù),我們認(rèn)為最好的方式是與網(wǎng)頁(yè)設(shè)計(jì)結(jié)合,將表單與網(wǎng)站融合在一起,因?yàn)榫W(wǎng)站內(nèi)的產(chǎn)品介紹,聯(lián)絡(luò)資訊等內(nèi)容,都可以提升用戶的信任感,填寫表單也比較不會(huì)擔(dān)心遇到詐騙。