top of page
person-typing-laptop-keyboard-businessman-working-laptop-he-is-typing-messages-colleagues-

資訊集合

News & Insights

2019年9個讓人欣賞的網站設計趨勢



每當提到設計這個話題,通常第一印象給人的是:"那是設計糸學生的專長" "我不是專業的設計" "我沒有美術天份"。

的確,如果你發現了美的天賦,並不斷精進在設計產業,你確實會是一個讓人驚豔的設計師,但請不要忘記設計的本質:讓人更容易了解

我們總結了自已的經驗,對於明年2019的設計趨勢,提出了一些看法,這並不表示你每一項都需要,設計不是一個蒐集的工作,這些都是選擇,請搭配你的需求,透過具體的行為整合到你的網站。

01、微動畫

不是叫你做出一個像迪士尼卡通的動畫,動畫在過去幾年中一直都是發展趨勢,其中包括Parallax Scrolling 視差滾動(利用動作和背景深度產生視差效果)等。然而,在2019年,動畫出現在一個較小且真實的,稱為mico-animations。

他們有點像當你的網站的瀏覽器執行特定操作時出現的次要動作,但仍然會為你的頁面看起來充滿活力,但頁面下載的時間變短,並確保你網站訪客的注意力集中。你可以將它們視為有助於向訪客發送訊號的路標,並在他們漫遊你的網站時提供積極的反饋。例如,在游標徘迴時,更改按鈕的設計(文字或填充顏色)會向用戶發出訊號,告知他們是在正確的方向上。

除了作為你的網頁指南之外,這些活潑的互動還可以簡單地用於為你的網頁添加閃光,包括使用迷人的電影圖片作為背景,或者在精美圖像庫中精美呈現在大部分劇照中。或者進入為影片添加效果也能進入令人愉快的視野,藉由使用VideoBox輕鬆完成。此工具可讓你使用各種不同的播放模式和行為來增強素材,從而使動態視覺效果的質量超越GIF。無論你走向何方,這些細微的動作肯定會對你網站的設計產生美好的影響。


02、行動優先

隨著谷歌在2018年3月推出行動優先索引以及幾個月後的行動速度更新,SEO(搜索引擎最佳化)遊戲有正式的新規則。現在,在決定如何在搜索結果中對你的網站進行排名時,機器人會在桌面之前檢查你網站的行動版本。此外,下載速度是他們計算行動網站排名的一個因素,完全最佳化的行動網站是你提高搜索引擎顯示排名以及更多潛在客戶和關注者在Google上找到的關鍵。

幸運的是,Wix用戶會檢查你的網站行動版桌面版本,因為你創造的任何網站都會自動生成適合行動設備的版本,完全針對Google的要求進行了最佳化。一旦你有了這個概念為基礎,請確保你擺脫行動版本不必要的內容:因為手機的螢幕很小。無論你的桌機版設計的多美麗,手機視覺永遠呈現不出那些碩大繁複的美,請給手機行動者最優先的考量:快速的找到他們所想要的。


03、幾何形狀

在2019年,你可以在網站上安排幾何圖形,這樣可以簡單地在頁面背景中放置基本形狀或將圖像裁剪成幾何圖形。簡潔的經典三角形線條,圓形 - 如果你感覺時髦的話,甚至是菱形或六邊形 - 為你的頁面帶來美觀,均勻的分佈,讓你輕鬆地實現平衡的設計原則。

這種平衡狀態有三種途徑:對稱,不對稱和放射均衡。以下是每種情況的快速細分:

對稱平衡:

在這種經典方法中,組合的一半上的元素在後半部分可以完美地對映。

不對稱平衡:

雖然頁面的兩半不匹配,但它們各自具有相同的視覺“分量”。這是通過播放顯示的項目的顏色,紋理,形狀和位置來達成的。

放射均衡:

這種風格將設計的所有元素均勻地定位在中心點周圍,使它們向外輻射。你可以想像一個色輪就是一個很好的案例。 在2019年,我們有機會玩一些不對稱的東西。突破風格是現代主義和活力的象徵,這兩個新的特質值得為你帶來的網頁設計。如上所述,形狀是你在頁面上實現不對稱外觀的一種方式。讓我們說你的頁面右側有很多文字。穩定分量的解決方案是在左邊的三角形中塑造誘人的設計。如果你為此選擇幾何形狀,則意味著你的頁面的光滑度很強。你可以同時擁有前衛外觀的設計,並且仍然讓訪客專注於他的網站目的。


04、亮點的顏色

大膽的顏色年復一年地成為趨勢列表是有原因的。在有內容的網路遊覽中,顏色是一種可靠的方式,可以通過你的網路形象發表聲明。你為品牌選擇的調色板仍應以你想傳達的情感、行業標準以及你希望通過你的企業視覺識別傳達的訊息為指導。然而,一旦你理解了對你的業務有意義的顏色略知一二,探索如何使他們的展現靜止特性的工作。

具體來說,顏色如何幫助將訪客聚焦到頁面最重要的部分? 有幾種方法可以做。大膽的色塊在網頁設計場景中風靡一時。你可以在主頁上繪製上方折疊區域(在訪客螢幕上可以立即向下滾動的任何位置之前立即顯示的部分)一個堅實的,停留在你的軌道顏色(像我們建議2019年年度Pantone顏色:活珊瑚橘)。如果這與你的業務氛圍沒有關係,那麼有更微妙的方法來強調你的頁面具有相同的亮度,例如將該顏色合併到你的行動呼籲(CTA)按鈕的文字中,或者使用在你的LOGO。

互補配色方案也能掀起波瀾。這種方法是指在色輪上採用兩種顏色完全相反的顏色,如紅色,綠色,黃色和紫色。由此產生的對比度使得每個頁面都比單一頁面來得更多。要創造完整方案,請為補充組合添加中性色。中性色是你在標準色輪上看不到的顏色,如米色,淺棕色,淺灰色,黑色和白色。獲得顏色後,你可以將它們應用於上述相同的位置,或者跨越CTA等重點區域,或者作為一系列相鄰的顏色塊,以幫助觀眾區分頁面上的內容。


05、迷人的排版

字體可以是自己的刻意陳述,更具藝術性和細節的版本能夠發送嚴謹的訊息或異想天開的樂趣。設計師Aarron Walter在設計情感方面表示:“使用認知和視覺對比的優秀設計不僅會讓你脫穎而出,還會影響人們使用界面的方式。”真的,這一切都可以追溯到你的品牌形象。你希望與訪客溝通什麼?使用該答案作為指南針,你可以選擇最適合你網站的字體。

排版的一個流行趨勢是獨特的字體,從訂製手工刻字的復古魅力到大膽筆觸的曝露雜亂和腳本中字母表的優雅弧度。這些風格本身就是藝術專長,將你的文字轉化為引人注目的中心作品。如果你想要大膽,我們建議通過買一個精巧的字體,然後平衡它與更傳統的字體來拉出驚人的效果。對於一些可以很好地協同工作的已證明的字體二重奏,這裡是一些最好的字體配對案例和指針的指南。

你頁面上同時舞動的幾種字體(切記不超過三種)允許你將每個字體分配到頁面的特定方面,使用更加藝術性的一個用於粗體標題,更清晰的線條用於更多文字重複的解釋例如,關於你的業務。這只是另一種方式,字體可以幫助你在網站上創造視覺化層次結構,使用戶可以更輕鬆地篩选和組織訊息。


06、圓角和柔和的線條

2019年將出現圓角和更自然的線條,在文字框,圖像框,按鈕甚至背景中的抽象形狀等元素上隨處可見。這是一個遠離過去的尖角形狀圖像。這就像一個額外堅固的床墊和記憶棉綿床墊之間的區別。後者傳達輕鬆舒適,而前者可以感到有距離感或簡樸的。這是一個很好的案例,說明設計的微妙變化如何能夠真正改變網絡上訪客對你品牌的看法。

怎麼做到這一點?你可以將圖像的形狀裁剪為圓形框架,添加一組顏色鮮豔的無定形狀,為具有曲線的圖形切換矩形按鈕形狀。如果你正在為VideoBox提供令人愉快的微動畫而煩惱,我們在第一個建議中討論過,你可以查看一些影片框上可用的柔和線條。想要將這些動畫片段的格式化到你自己手中嗎?你可以使用輪廓工具來塑造你希望的基本的外觀和感覺。


07、分畫面

現場出現的一種新趨勢是分畫面網站,這意味著它們的內容在頁面的兩邊之間垂直分割。這是插入視覺層次結構的另一種方式,也是為那些遇到你網站的人直觀地“平和下來”。如果你是時尚攝影師或烹飪藝術家,這可以是一個很好的外觀,例如,尋找一種方法將你的文字與圖像分開。

該部門的作用是讓頁面的每個元素都能流露出來,而不是將所有內容疊在一起。從觀看者的角度來看,它可以幫助他們自己處理每個元件,而不是嘗試一次處理各種類型的內容。然而,仍然保持兩個部分之間的一些和諧的一種方法是利用兩列合併作為理想焦點。當訪客在此處,正面和中間登入你的頁面時,請放置你的圖標,CTA或你希望吸引節目的任何其他內容。即使訪客的可看的範圍被縮小,結果也是統一的外觀。使用你佈置排版的創意性並不代表意味著將凝聚力拋到視窗外。


08、從經典網格出發

除了幾何形狀,大膽的背景顏色和微動畫,現在,我們想要強調這個驚喜元素如何在你的網站上更大規模地出現。對於一個訪客的左顧右盼,稍微不平衡的外觀,如果做得恰到好處,可以完全打出鉚接的正確音符,而不會變成“凌亂”。它可能是將幾何形狀或影片微動畫變成一個重點部分,該部分略微位於所有對稱邏輯似乎表明它應該是的右側或左側,或者與另一個元件略微重疊。另一種可能性是用白色空間抵消大圖像。給照片留出40%的空間並保留另外60%作為視覺定格,僅填充CTA或用粗字體書寫的短標題。

我們看到更多網格影片加疊和方格紙背景,你可以在你的頁面上嘗試一些交錯和暴露的線條。它們打破了頁面上的內容的分量,並展現了文字列或文字框的不同大小,同時由於其簡單性和堅固的結構仍然保持著控制感。


09、擁抱極簡主義

我們覺得這是一種不過時的設計原則,因為最終如果你的訪客不確定你的網站對他們的要求,或者找不到他們想要的內容,那麼再酷的動畫功能將無法提供幫助。事實上,前8個趨勢的基礎是對用戶體驗的承諾,所以我們不妨大聲說明我們對來年最重要的事情的最終結論。

用戶體驗旨在確定有效傳達你的品牌標識訊息和你所需的號召性用語的趨勢。探索每個人如何能夠強調頁面的中心訊息。此外,如果你能夠以令人著迷的設計吸引你的網絡大眾,那麼他們將更有可能在你的網頁上留下來。更長的瀏覽時間是提高你的SEO的一個方法。一旦你擁有自己選擇的網站設計趨勢,堅持使用它們,並將精力集中在保持組織結構的緊密性上,並為每個設計元素注入足夠的空間,你一定值得擁有讓人驚豔的網站。


bottom of page