如何提升WordPress網站速度及性能?

WordPress網站速度

我們試圖涵蓋所有內容,包括為什麼速度很重要、什麼會降低您的WordPress網站的速度,以及您可以採取哪些可行的步驟來立即提高您的WordPress網站速度。

為什麼速度對您的WordPress網站很重要?

WordPress網站速度的重要性
WordPress網站速度的重要性

研究表明,從 2000 年到 2016 年,人類的平均注意力持續時間從 12 秒下降到 7 秒。

作為網站所有者,這對您意味著什麼?

「您幾乎沒有時間向用戶展示您的內容並說服他們留在您的網站上。」

緩慢的網站意味著用戶可能會在加載之前離開您的網站。

根據一項涉及Amazon、Google和其他大型網站的 StrangeLoop 案例研究,頁面加載時間延遲 1 秒可能導致 7% 的轉化損失、11% 的頁面瀏覽量和 16% 的客戶滿意度下降

最重要的是,Google和其他搜索引擎已經開始透過在搜索結果中下推網站來懲罰速度較慢的網站,這意味著速度較慢的網站的流量會降低。

總而言之,如果想從您的網站獲得更多流量、訂閱者和收入,那麼必須讓您的WordPress網站快速運行!

如何檢查您的WordPress網站速度?

截圖 2022 08 01 上午2.14.34
PageSpeed Insights

初學者通常認為他們的網站還可以,只是因為在他們的電腦上感覺並不慢。這是一個巨大的錯誤。

由於您經常訪問自己的網站,Chrome 等瀏覽器會將您的網站儲存在快取中,並在您開始輸入網址時自動預取它,這使您的網站幾乎可以立即加載。

但是,第一次訪問您網站的普通用戶可能不會有相同的體驗。事實上,不同地理位置的用戶會有完全不同的體驗。

這就是為什麼我們建議您使用諸如 Google的 PageSpeed Insights 之類的工具來測試您的網站速度。它是一個免費的線上工具,可讓您測試網站的速度。

執行網站速度測試後,您可能想知道良好網站速度是多少?

一個好的頁面加載時間不到 2 秒。

然而,您能盡量加速網站,它就越好。在這裡和那裡進行幾毫秒的改進,可以將加載時間縮短一半甚至一秒。

是什麼減慢了您的WordPress網站?

您的速度測試報告可能會有多項改進建議,但是,其中大部分是初學者很難理解的技術術語。

了解是什麼讓您的網站變慢是提高性能和做出更明智的長期決策的關鍵。

WordPress 網站速度慢的主要原因是:

  • 虛擬主機: 如果您的虛擬主機伺服器配置不正確,可能會損害您的網站速度。
  • WordPress 配置:如果您的 WordPress 網站沒有提供快取頁面,那麼它會使您的伺服器超載,從而導致您的網站運作緩慢或完全崩潰。
  • 頁面大小:主要是未針對網站優化的圖像。
  • 不良外掛:如果您使用的外掛編碼不佳,那麼它會顯著降低您的網站速度。
  • 外部腳本:廣告、字體加載器等外部腳本也會對您的網站性能產生巨大影響。

既然您知道是什麼降低了您的WordPress網站的速度,那麼讓我們來看看如何加快您的WordPress網站的速度。

好的WordPress託管的重要性

您的WordPress網站主機託管服務在網站性能中起著重要作用。

如果您是使用共享主機,您會與許多其他客戶共享伺服器資源。這表示如果您的相鄰站點獲得大量流量,那麼它可能會影響整個伺服器的性能,進而會降低您的網站速度。

好的主機託管服務可為您提供最優化的伺服器配置來運行WordPress網站,也有自動備份等服務。

以簡單的步驟加速WordPress

我們了解,更改您的網站配置對於初學者來說可能是一個可怕的想法,我們將介紹如何透過無需編碼的方法來加速您的WordPress網站。

安裝WordPress快取外掛

WordPress頁面是“動態的”。這意味著每次有人瀏覽您網站上的文章或頁面時,它們都是即時構建的。

要構建您的頁面,WordPress 必須執行一個過程來查找所需的資訊,將它們放在一起,然後將其顯示給您的用戶。

這個過程涉及很多步驟,當您有多個人同時瀏覽它時,它確實會減慢您的網站速度。

快取可以使您的WordPress 網站速度提高 2 倍到 5 倍,這是它的工作原理。

您的快取外掛不是每次都經歷整個頁面生成過程,而是在第一次加載後複製頁面,然後將該快取版本提供給每個後續用戶。

php
網站載入示意圖

正如上圖中所見,當使用者瀏覽您的WordPress網站時,您的伺服器會從 MySQL 數據庫和您的 PHP 文件中檢索資訊,然後它將所有內容放在一起提供給用戶的 HTML 內容中。

這是一個漫長的過程,但是當您使用快取時,您可以跳過很多過程。

有很多不錯的WordPress 快取外掛可用,我們建議使用WP Rocket(高級)或WP Super Cache(免費)外掛。

加入我們的最佳優化服務及提供WP Rocket外掛的商用授權。

優化圖片以提高速度

網站維護
優化圖片

圖片為您的內容帶來活力,並有助於提高參與度。研究人員發現,使用彩色視覺效果會使人們閱讀您的內容的可能性增加 80%。

但是,如果您的圖片沒有經過優化,那麼它們可能弊大於利。事實上,未優化的圖片是在初學者網站上看到最常見的速度問題之一。

在您直接從手機或相機上傳照片之前,我們建議您使用照片編輯軟體來優化您的網站圖片。

這些照片的原始格式可能具有巨大的文件大小,但根據您在編輯軟體中選擇的圖片文件格式壓縮率,您最多可以將圖片大小減小 5 倍。

我們建議只使用兩種圖片格式:JPEG 和 PNG。

PNG圖片格式是未壓縮的。當您壓縮圖片時,它會丟失一些信息,因此未壓縮的圖片將具有更高的質量和更多的細節。缺點是文件比較大,所以加載時間比較長。

另一方面,JPEG是一種壓縮文件格式,它會稍微降低圖像質量,但它的大小要小得多。

那麼如何決定選擇哪種圖片格式呢?

  • 如果照片或圖片有很多不同的顏色,使用 JPEG。
  • 如果它是更簡單的圖片或者我們需要透明圖片,使用 PNG。

進階優化WordPress性能及速度

安裝快取外掛並優化圖片後,會注意到您的網站將開始加載速度更快。

但是,如果真的想盡可能地保持您的網站速度,則需要使用下面列出的進階優化方法。

這些技巧不是太技術性,不需要知道任何程式碼來完成它們,但是使用它們可以防止常見的問題,這些問題會降低您的網站速度。

保持您的 WordPress 網站更新

WordPress 作為一個維護良好的開源項目,核心更新頻繁,每次更新不僅會提供新功能,還會修復安全問題和錯誤,您的 WordPress 主題和外掛也可能有定期更新。

作為網站所有者,您有責任將WordPress網站、主題和外掛更新到最新版本。不這樣做可能會使您的網站變得緩慢且不可靠,並容易受到安全威脅。

優化後台進程

WordPress中的後台進程是在您的WordPress網站後台執行的任務,以下是在 WordPress 網站上執行的一些後台任務:

  • WordPress備份外掛任務
  • 用於發布預定文章的 WordPress cron 作業
  • 用於檢查更新的 WordPress cron 作業
  • 搜索引擎和其他爬蟲試圖獲取內容

定期發布和更新的 cron 作業等任務對網站性能的影響很小。

但是,其他後台進程(例如備份外掛和搜索引擎的過度抓取)可能會降低網站速度。

對於備份外掛,您需要確保您的WordPress 備份外掛僅在網站上的低流量時間執行,您還需要調整備份頻率和需要備份的數據。

例如,如果您設定完整的每日備份,而您每週只發布兩次新內容,那麼您需要對其進行調整。

至於爬蟲抓取,您需要密切關注 Google Search Console 中的抓取報告,若有錯誤須盡快調整,它可能會導致您的網站變慢或無響應。

在主頁和檔案中使用摘要

默認情況下,WordPress會在您的主頁和檔案中顯示每篇文章的完整內容,這表示您的主頁、分類、標籤和其他存檔頁面的加載速度都會變慢。

在這些頁面上顯示完整文章的另一個缺點是使用者感覺不需要瀏覽實際文章,這會減少您的網頁瀏覽量,以及您的用戶在網站上花費的時間。

為了加快存檔頁面的加載時間,您可以將網站設置為顯示摘錄而不是完整內容。

截圖 2022 09 24 下午6.17.46
設定->閱讀

您可以到後台設定->閱讀,並調整資訊提供中的文章顯示方式:內容摘要

將留言評論分頁

在您的部落格文章中獲得大量評論?恭喜!這是讀者參與度的一個很好的指標。

但不利的一面是,加載所有的留言評論會影響您網站的速度。

截圖 2022 09 24 下午6.18.49
設定->討論

WordPress為此提供了一個內置的解決方案,只需到後台設定->討論,並勾選其他留言設定“將留言進行分頁”的選項。

使用內容傳遞網路 (CDN)

CDN
內容傳遞網路(CDN)

還記得我們上面提到的不同地理位置的用戶在您的網站上可能會遇到不同的加載時間嗎?

這是因為您的網站伺服器的位置可能會影響您的網站速度。

例如,假設您的網路託管公司在美國設有伺服器,同樣在美國的使用者通常會比在印度的訪問者看到更快的加載時間。

使用內容傳遞網路 (CDN) 可以幫助加快所有瀏覽者的加載時間。

CDN 是由世界各地的伺服器組成的網路,每台伺服器都將存儲用於構成您的網站的“靜態”文件。

這些靜態文件包括不變的文件,例如圖像、CSS 和 JavaScript,這與WordPress頁面不同,它們是如上所述的“動態”頁面。

當您使用 CDN 時,每次用戶訪問您的網站時,他們都會從離他們最近的伺服器獲得這些靜態文件。

不要將音頻檔案/影片檔案直接上傳到WordPress

託管音頻檔案和影片檔案將佔用您的頻寬。您的網站託管公司可能會向您收取超額費用,或者他們甚至可能完全關閉您的網站,即使您的方案包括“無限”頻寬。

託管大型媒體文件還會極大地增加網站備份大小,並使您難以從備份中恢復WordPress。

相反,您應該使用像 YouTube、 Vimeo、DailyMotion、SoundCloud 等第三方影音平台,並讓他們來處理繁重的工作。

WordPress 具有內置的影片嵌入功能,因此您可以將影片的網址直接複製並貼到文章中,它將自動嵌入。

使用針對速度優化的主題

在為您的網站選擇主題時,請務必特別注意速度優化。一些漂亮且令人印象深刻的主題實際上編碼不佳,可能會減慢您的網站速度。

通常選擇一個更簡單的主題比選擇一個具有復雜佈局、華麗動畫和其他不必要功能的主題更好。您始終可以使用優質的 WordPress 外掛添加這些功能。

使用更快的外掛

無論您的網站是否需要,編碼不佳的WordPress外掛通常會加載過多的內容,這會提高頁面加載速度並減慢網站速度。

建議您可以安裝外掛之前和之後進行速度測試,可以比較其對性能的影響。

有任何網站維護、網站優化的需求也歡迎找我們諮詢唷!

資料來源:The Ultimate Guide to Boost WordPress Speed & Performance

延伸閱讀:

使用 WordPress 網頁設計的 18 個世界知名品牌、企業

WordPress 網頁設計

為什麼這麼多知名品牌、企業使用 WordPress?

WordPress 是世界上最受歡迎的網站構建器和內容管理系統,它目前為整個網路世界的 40% 以上網站提供支持,包括一些最大的品牌。

使用 WordPress,幾乎可以構建任何類型的網站、形象網站、部落格網站、線上網路商店等等。它有數以千計的免費和高級外掛,可用於擴展您網站的功能。

大多數網站使用 WordPress 是因為它的靈活性、對初學者友好的管理面板以及龐大的主題和外掛庫,無需編寫任何代碼即可快速設置 WordPress 網站。

讓我們一起來看看使用 WordPress 架站的世界知名品牌、企業。

Sony Music 索尼音樂

sony music
Sony Music 索尼音樂

Sony Music 索尼音樂是一個使用 WordPress 架站的全球音樂品牌,該網站展示了其藝術家、最新消息、側邊欄 Twitter 動態面板等等,也包含部落格文章等功能。

PlayStation 部落格

playstation
PlayStation 部落格

PlayStation是世界上最大的遊戲公司之一,他們使用 WordPress 部落格為他們的遊戲網站發布最新消息文章,提供遊戲發布、內幕消息等資訊。並擁有多國語言切換等功能,讓各地的粉絲可以獲得最新的第一手遊戲資訊。(中文版PalyStation網站

TIME 時代雜誌

TIME
TIME 時代雜誌

TIME 時代雜誌是美國歷史最悠久的新聞網站和雜誌之一,該網站涵蓋政治、健康、科技、娛樂、科學等主題,內容豐富,且讀者眾多,WordPress 網頁設計非常適合新聞資訊類的網站,可以為讀者提供良好的閱讀環境。

CNN Press Room 部落格

CNN Press Room
CNN Press Room

CNN Press Room 部落格是 CNN 公關團隊的官方網站,該網站提供新聞稿、事實查核報導、新聞聯繫人等的訪問。網站採用側邊目錄的設計,可以快速切換到其他內容網站。

The Rolling Stones 滾石

滾石
The Rolling Stones

The Rolling Stones 滾石網站展示了他們的最新活動、音樂發布、網路商店等。這是一個非常獨特的 WordPress 網頁設計,具有大膽的色彩、互動元素和影片。部落格設計也相當搶眼,是個極具品牌特色的網站。

Spotify Newsroom

spotify newsroom
使用 WordPress 網頁設計的 18 個世界知名品牌、企業 28

Spotify Newsroom 是 Spotify 音樂串流媒體的新聞網站,讀者可以找到新聞、最新消息、音樂發布和獨特的電子報訂閱表單。整體設計非常有趣,以整齊的矩形切割各個文章區塊、排版,並添加了許多小元素,如跑馬燈、電子報動畫,是個具有品牌設計風格的新聞網站。

The New York Times Company 紐約時報公司

tnyt
紐約時報公司

紐約時報公司是紐約時報背後的企業形象網站。它是世界頂級報紙之一,全球每月擁有超過 1.5 億讀者。企業形象網站設計相當宏觀、簡單,一進入到網站的主要畫面以影片及標題「The Times Brings You the World」吸引使用者,整個網站可以感受到企業的悠久歷史,但又簡潔明瞭的呈現相關資訊,

Microsoft News 微軟新聞

微軟新聞
Microsoft News

Microsoft News 微軟新聞 重點介紹了 Microsoft 內部的最新動態,它包含有關公司的最新消息、更新和故事。

The Harvard Gazette 哈佛公報

哈佛公報
使用 WordPress 網頁設計的 18 個世界知名品牌、企業 29

哈佛公報是哈佛大學的官方新聞網站,它採用非常簡約的設計,涵蓋最新的新聞、事件和更新。網站的目錄設計為漢堡按鈕,點擊後為全屏幕一分為二的搜尋欄加目錄、另一半則是重點分類及文章,相當有特色,是一個非常好看的部落格網站。

Hachette Book Group

hachette
使用 WordPress 網頁設計的 18 個世界知名品牌、企業 30

Hachette Book Group是世界上最大的圖書出版商之一,隸屬於法國最大的出版公司Hachette Livre,也是世界上第三大貿易和教育出版商,出版了諸如《麥田裡的守望者》等著名書籍。該網站以介紹出版作品、作家等為主,並以眾多書籍、線上活動、影片等為特色。

007

007
007

電影 007 官方網站使用 WordPress 突出地呈現與全球詹姆斯邦德宇宙相關的最新消息及故事。

Variety

Variety
Variety

Variety》是Penske Media Corporation 媒體公司旗下的美國媒體公司營辦的雜誌,創立於1905年,是娛樂界業內兩大週刊之一(另一份是《The Hollywood Reporter》)。而 Variety 是一個雜誌的娛樂新聞網站,提供電影評論、電影票房數字、電影獎項更新等。網站內容擁有重大娛樂新聞、評論、票房成績、封面故事、短片、照片圖庫及更多,加上演職人員數據庫、製作圖表及日程,其存檔內容可追溯至1905年。

Thermo (馬來西亞)

thermosmalaysia
THERMO 馬來西亞

Thermo 膳魔師是一個主要商品為食品保溫容器的品牌,該品牌在1904年創立於德國,目前為世界知名品牌。馬來西亞的 Thermo 網站使用 WordPress+WooCommerce 架設,方便消費者利用網站購買商品,設計風格簡單大方,產品資訊一覽無遺。

Meta Newsroom

meta newsroom
Meta Newsroom

是的,甚至 Facebook 也使用 WordPress。最受歡迎的社交媒體平台使用 WordPress 發布他們的新聞和公告,主要使用白色和灰色搭配Meta漸層藍為重點色調,頂部為熱門故事區塊,以下則為其他新聞和公告的部落格列表佈局。在 Facebook 與 Instagram 整合後,它為其亮點添加了更多顏色。

Flickr Blog

Flickr Blog
Flickr Blog

Flickr 是網路上流行的圖片和影片託管服務。它的官方部落格是用 WordPress 構建的,外觀簡潔優雅,頂部有一個固定目錄,帶有半透明的主題,最上面設計以文章特色圖片作為全寬橫幅,吸引大家點進文章閱讀,往下滑可以看到 2 列佈局的靜態圖片文章列表。

Georgia State University 美國喬治亞州立大學

Georgia State University
Georgia State University

有許多美國大學都使用 WordPress!Georgia State University 美國喬治亞州立大學網站也是使用 WordPress 創建的。它由藍白兩色的主題設計而成,頂部有固定的目錄header、動畫按鈕和滑鼠懸停時改變的目錄,首頁由大學推薦、靜態圖片和頭條新聞,以及最新消息活動等等資訊組成。

TED Blog

TED Blog
TED Blog

TED 是一個公正的非營利組織,致力於傳播思想,通常以簡短而有力的演講的形式傳遞各種思想。 TED 始於 1984 年,是一個技術、娛樂和設計融合的演講形式活動,如今幾乎涵蓋了所有主題。他們的部落格網站特別簡單,主要關注特色新聞以及近期的活動。

The Walt Disney Company 華特迪士尼公司

The Walt Disney Company
The Walt Disney Company

受歡迎的華特迪士尼公司使用 WordPress 架設官方形象網站,該網站使用溫暖的米色,並具有大型特色圖片、股票價格、最近的新聞和發展,以及包括關於、投資者關係、職業和慈善事業等多個部分,所有主題都包含高分辨率、彩色縮圖,並有連結到其底部的社群。華特迪士尼公司的使命是透過無與倫比的講故事的力量來娛樂、告知和激勵全球人民,成為世界首屈一指的娛樂公司的標誌性品牌、創意思維和創新技術。

全世界有許多知名品牌都使用 WordPress 架站,還想對 WordPress 或 WooCommerce 有更深入的了解嗎?歡迎閱讀我們的文章:

什麼是WordPress網站?2022年最受歡迎的架站系統

展望2023年的8個網頁設計趨勢

網頁設計趨勢

以人為本的網頁設計將在 2020 年至 2023 年間變得更加普遍。現代網站設計將越來越依賴於移動響應式動畫和圖像。一個乾淨的、完全響應式的設計,最大限度地利用了空白,使網頁設計的當前狀態與眾不同。在 2023 年,您網站的用戶界面 (UI) 必須與其用戶體驗 (UX) 結合起來直觀。

對 SEO 友好的多媒體內容 CSS 網格佈局正在成為 2023 年越來越流行的網頁設計趨勢。在內容和廣告活動中開發有趣故事的能力對於人們與您的網站和您的業務互動至關重要。如果您的網站具有精美的設計和引人入勝的敘述,您網站的使用者將會很高興。

微型動畫 Micro-animations

微型動畫是自動移動或點擊時移動的小動畫,微動畫的唯一目的是增強用戶體驗

透過使用微動畫,用戶可以在理解層次結構方面獲得支持,從而將元素放置在上下文中。這創造了焦點。用戶有一種直接操縱的感覺,因為它看到了直接發生的事情。

動畫增強和豐富您的界面,隨著移動處理器和瀏覽器的改進,在設計中真正考慮動畫變得越來越重要。

在您的界面中使用微動畫時,您可以使其更加直觀。因此,您可以增強您的界面,使用動畫來提供反饋、創建焦點和層次結構,同時也可以增強您的品牌體驗並賦予您的設計更多個性

網頁設計趨勢-1
示例:https://www.magnetism.fr/

沉浸式滾動

2023 年的設計趨勢與動態設計密切相關,傳統的滾動相當乏味,即使是動畫或影片內容,因為它是靜態的。但是由於特定的層次結構,垂直移動仍然可以增強並傳遞消息。

現在,有了JavaScript和動畫庫,設計人員可以更好地控制顯示的內容、順序和外觀。滾動本身也可以修改以實現更平滑或特定的行為。例如,某些元素的過渡、影片的放大和縮小、圖像的形狀改變等。此功能使公司、企業能夠以身臨其境、講故事的方式展示他們的產品。透過正確的策略,網站可以變得更具吸引力和更令人愉悅的使用。

主頁橫幅影片區塊

主頁橫幅(Hero Section)是一個全屏區塊,通常由背景圖像、影片、插圖或動畫組成,帶有文本,有時還有號召性用語。

主頁橫幅影片區塊可幫助您毫不拖延地提供有關您品牌的完整資訊,影片是最被接受的內容形式,它還可以幫助您降低跳出率,因為用戶可能會在網站上停留更長的時間。主頁橫幅影片區塊非常強大,因為它可以展示您網站的很多資訊,甚至無需用戶查看所有其他頁面。

網頁設計趨勢-2
示例:https://theoceanfortlauderdale.com/

Glassmorphism 毛玻璃效果

毛玻璃效果(Glassmorphism)是一種新的設計趨勢風格,它使用玻璃的特性來增強您的設計,賦予其元素半透明或透明的外觀和感覺。毛玻璃元素和形狀在強調充滿活力的彩色背景上效果很好,可幫助您將視覺層次結構添加到您的設計中,並將重點放在您想要突出顯示的內容上。它使設計看起來流暢,激發人的慾望。

網頁設計趨勢-3
示例:https://conquer-the-jungle.webflow.io/

漸變效果

漸變效果在 2016 年被 Instagram 推廣,當時 Instagram 更換了新的漸變Logo設計,他們簡化漸變效果的決定影響了整個設計。如果您正在設計一個適度有趣的網頁設計,漸變效果也是一個非常好的選擇。漸變效果會產生視差錯覺並為您的網站增加深度。為網站添加令人愉悅的漸變效果的最佳方法是使用 2-3 種顏色,而且不要使用太多,太花反而會造成過於凌亂的效果。

網頁設計趨勢-4
示例:https://www.winamp.com/

Modern Split Screens 現代分屏

現代分屏就像一個不斷發展的數位世界。分屏將屏幕垂直分成兩部分,您可以在左側添加圖像或影片,在右側添加文本,反之亦然。分屏提供乾淨的外觀和感覺,並幫助用戶更好地理解。分屏構建了一個從眾多全屏主頁橫幅中脫穎而出的視覺效果。

網頁設計趨勢-5
示例:https://emptystate.com/

該網站以看似靜態的由圖像和文本組成的主頁橫幅頁面,然而,一旦我們開始滾動,它就會顯示為一個分屏部分,或者更確切地說是一個分屏滑塊,左右部分在相反的方向。總共有五張幻燈片,一旦我們瀏覽完所有幻燈片,我們就會返回第一張幻燈片,從中我們可以進一步瀏覽和探索產品,了解工作室或通過聯繫頁面聯繫。調色板定義整齊,由溫暖的灰色粉彩和大膽的海軍藍色組成。顏色的二元性與分屏滑塊提供的平衡及其對稱性非常吻合,因此網站的整體色調是一種衡量和技巧。

3D動畫

3D 無疑是網頁設計中的流行趨勢,3D 網頁設計可幫助您在人類世界和數位世代之間增加深度、真實感和新穎性,從而吸引流量並使用戶體驗與眾不同。如今,網站用戶不只想滾動,還想參與、娛樂和成為網站的一部分。必須仔細製作 3D 動畫以避免任何用戶互動問題。

網頁設計趨勢-6
示例:https://nikeplaylab.com/en

大膽和實驗性的排版

Bold Typography 粗體排版很有趣,它創造了一種有趣的印刷效果,您可以以多種不同的方式使用它。近期,粗體字的使用有所增加。粗體字體賦予文本個性,並留下圖像作為主要元素。排版的重要之處在於它同時描繪了文字和視覺效果。

截圖 2022 09 16 下午4.47.26
示例:https://www.dragonrouge.com/

Dragon Rouge 的排版非常有創意。它打開時會列出其運營所在的國家/地區列表,隨著巨大標題的淡入而滾動。當您瀏覽該網站時,涉及獨特排版的各種屏幕和懸停效果會呈現出來。確保您環顧四周,找到所有很酷的文字效果!

Brutalism 粗野主義

粗野主義,一詞來自法語brut,意為“原始”基於野獸派建築風格,起源於 20 世紀 50 年代的建築領域,強調原始形狀和材料的使用。它將於 2023 年以其純粹的形式回歸,這種風格給人們帶來了懷舊的浪潮,那個時代人們可以打破設計規則,使用系統字體、原始文本、高對比度、普通背景、輪廓、未修改的圖像等創作古怪的頁面。

網頁設計中的粗野主義是一種粗魯、樸素和透明的風格,將功能置於形式之上,將有效性置於美學之上,它的特點是其原始外觀和極簡主義的方法。這種風格可以幫助網站在其他網站中脫穎而出,外觀更加標準和符合規則,人們肯定會注意到並記住它。

Brutalism
示例:https://www.aliciakeys.com/

近年來,歌手、詞曲作者兼演員 Alicia Keys 非常注重「還原」自己的外貌,經常在高調活動中素顏現身。因此,看到她的網站充滿了同樣原始、真實的品質,我們並不感到驚訝。 主頁上的大部分圖片都未經處理。換句話說,它們以原始大小、形狀出現在頁面上。更重要的是,它們伴隨著很少的文字,使用基本的無襯線字體設計。

保留空白空間

與印刷雜誌一樣,現代網站設計正在回歸簡單,強調有意義的空白空間

就像自然流將人們從一個元素帶到另一個元素一樣,空白建立了視覺層次結構,因此您網站的任何部分都不會被其他任何部分所掩蓋。白色空間讓觀眾有機會喘口氣,讓他們的眼睛放鬆

定義頁面組件之間的鏈接也有助於理解。由於兩個組件之間的空白空間最小,人眼將它們視為一個實體。另一方面,如果兩個事物相距較遠,您的眼睛會看到它們是截然不同的。

在您的網站上使用空白空間使用戶更容易辨別您的內容結構。

了解如何有效地使用網站上的空白空間可以幫助您網站的訪問者充分利用他們在網站上花費的時間 ( UX )。

截圖 2022 09 16 下午3.28.59
示例:https://mylesnguyen.com/

2023 年色彩趨勢

每年都會出現新的網路色彩趨勢,今年也不例外。

2021年時,WGSN 和 Coloro 選擇了 AI Aqua,一種受科技啟發的藍色調,作為 2021 年的年度顏色。

2022年,Pantone 選擇了Very Peri(長春藍)作為今年的代表色,充滿活力的長春藍色調和活潑的紫紅色底色,融合了藍色的忠誠和恆常與紅色的活力和興奮。

PANTONE® USA | Pantone Color of the Year 2022 / Palette Exploration
Color of 2022 (by Pantone)

Pantone 公布 2023年度代表色!Viva Magenta 萬歲洋紅,開啟活力新年。萬歲洋紅是勇敢無畏的紅色,是代表脈動的色彩,其旺盛的活力促進了歡樂和正向的慶祝活動,期望大家一同書寫了新的故事。

Pantone 2023 年度代表色
Color of 2023 (by Pantone)

Coloro 和 WGSN 宣布 2023年的代表色,不再只是單一特定色彩,而是由五種色票組成。

並表示,「我們的 S/S 23 主色是為這個即將甦醒的世界選擇的,在經歷長期限制和不確定性之後,這個世界需要更多生機與能量。這些顏色將帶給人們樂觀、希望、穩定和平衡的感覺。隨著人們面臨新的挑戰,療癒習慣將成為日常生活的一部分,而康復儀式將新的焦點放在感覺恢復和支持身心健康的顏色上有機色調將激發人們對自然和鄉村日益增長的興趣,有益健康的自然色調以及低影響和循環來源具有更強的吸引力。另一方面,在對積極性的渴望和虛擬世界日漸成長的影響力的推動下,飽和和刺激的色彩也將回歸,新的自我表達形式正在蓬勃發展。」

color of 2023
Key Colors S/S 23

從 2021 年到 2023 年,漸變色將流行起來,設計師們可能會繼續推動漸變色的可能性。因此,漸變色彩是吸引大眾的理想選擇。

對於 2023 年的網頁設計趨勢,色彩心理將發揮至關重要的影響。在為您的公司創建新的色彩調性之前,請考慮顏色的心理。您的顏色與您的品牌標識保持一致至關重要。從 2021 年到 2023 年,預計網頁設計中幾個與顏色相關的小趨勢將持續存在。

網頁設計趨勢不斷進步,有多種網頁設計靈感可供您選擇,但請始終選擇能夠滿足您的需求並能夠吸引目標受眾的方法。:)

延伸閱讀:

您需要重新設計網站的 6 大理由,好還能更好!

設計網站-1
設計網站
重新設計您的網站

平均而言,許多大小公司每兩到三年重新設計一次網站,為什麼呢?

90%的人關掉網站離開是因為他們覺得它的設計很糟糕;93% 的人離開網站僅僅是因為加載速度不夠快;94% 的人不信任設計不佳或感覺過時的網站。

嗯,這些都是他們必須重新設計網站的很好理由,重新設計可能會讓網站變得更好。但是,作為小企業主或個人品牌,您為什麼要重新設計您的網站?讓我們開始吧。

您的網站不再反映您的品牌

網頁設計趨勢-6
反映品牌形象的網站

這是一個相當普遍的現象,即企業內部的業務戰略、產品和服務不斷地在變化。如果您是企業員工,那麼您很容易習慣品牌願景及其提供的產品或服務,但問題是很多時候這些推陳出新的概念、商品並沒有在網站上反映出來

您的網站是業務的店面,對嗎?那麼,您為什麼不將最新鮮的商品擺放在前台,或者客戶可以輕鬆找到它們的任何地方呢?

如果您不考慮在網站上更新當前的品牌狀態,那麼我們很抱歉這麼說,但是您的客戶可能就此流失,轉而走進競爭對手的商店。

想想您的企業品牌創建的所有標語、價值主張、欲傳遞的訊息和使命陳述,確保所有這些資訊在整個網站上都清晰且一致地呈現是很重要的。如果這是您現在看不到的東西,您需要重新設計網站,品牌理念帶出一致地設計風格,會讓使用者更信任正在使用的網站,也能提升客戶對品牌的好感度、喜愛度。

您的網站速度緩慢且無響應

現代網路用戶的平均注意力持續時間約為 8.25 秒,若您的網站很慢才載入完成,使用者早已失去耐心,關閉網站離開了。

根據 SEMrush的說法,網頁的理想加載時間應該在 1-2 秒之間。如果您的網站有一段時間速度緩慢或最近開始花費了太多時間加載,那麼這就是您重新設計網站的提示。

緩慢的加載速度對您的網站的SEO會造成很大的傷害。當您的網站變得沒有反應、轉很久、載入時間很長時,還有可能會被誤認為網站掛掉、壞掉了。

另外,73.1% 的網頁設計師認為非響應式(RWD)設計是網站使用者離開網站的首要原因。考慮到數十億人正在使用他們的行動裝置瀏覽網站,因此您的網站必須針對較小的螢幕尺寸進行優化。事實上,一項針對 200 多名網頁設計師和自由職業者的調查顯示,沒有響應式的網站設計是使用者離開網站的主要原因。

您的網站未針對行動裝置進行優化

什麼是 RWD、什麼是 AWD?
在行動裝置上瀏覽網站

幾年前,企業維護他們的桌面網站非常容易,因為大多數使用者都是透過電腦瀏覽網站。但如今,用戶大多透過行動裝置瀏覽網站。

智慧型手機、筆記型電腦、平板電腦,甚至是智能冰箱。是的,我們不是在開玩笑!

53.8% 的網頁設計師將「無法在所有裝置上響應」作為重新設計網站的主要原因。(建議閱讀:什麼是RWD響應式網站?什麼是AWD自適應網站?

對於新時代客戶的這種多元裝置,您的網站需要進行響應式設計(RWD設計),一個易於在任何平台上瀏覽的網站。Google 有一個行動裝置測試網站,它會通知搜索者您的網站是否最適合他們的設備。

除非您對失去信譽、點擊率、潛在客戶和銷售量感到滿意(誤),否則現在就重新設計網站!

您的網站沒有將使用者轉化為潛在客戶

即使您的網站每天在吸引大量流量方面表現良好,也不一定意味著它會轉化為越來越多的潛在客戶。要將這些訪問者轉化為潛在客戶,您需要一個策略。

您的網站應該能夠告訴他們您是誰、您在做什麼、您的目標受眾是誰,以及為什麼您適合訪問者的需求。

因此,在重新設計網站後,包含正確號召性用語的新網站將幫助您利用每一個機會將網站瀏覽者轉化為潛在客戶

您的網站缺少功能

易於使用的網站令人驚嘆!如果您的網站已經是一個便利、易於使用的網站,那就更好了。但是隨著您的流量和團隊的增長,您更有可能需要向網站添加更多功能。

這樣做將幫助您滿足使用者的需求,以及後端營銷團隊的期望。

例如,如果您希望添加智能篩選器多語言內容,您將需要一個能夠靈活集成此類功能的平台網站,您可以通過重新設計網站來實現這一目標。

與新趨勢相比,您的網站設計已經過時

就像我們在開始時所說的那樣,流行、趨勢、科技….不斷地在變化,每兩到三年,企業就需要更新他們的網站,以免它們顯得過時。您的競爭對手很可能已經採取了行動,而您現在正陷入困境,試圖弄清楚您是否也應該這樣做,我們只能告訴您,不要猶豫了!

您也可以將您的網站提供給身邊的親朋好友使用,尤其是年輕朋友,讓他們針對網站使用體驗提供一些意見,或許能協助您釐清到底要不要重新設計網站。

結論

專家會告訴您,如果您想確保您的網路店面吸引新客戶並讓他們的體驗更好,請不要猶豫,立即重新設計網站。

網路上有很多工具可以幫助您評估網站的設計、速度,甚至可以幫助您重新設計網站。

現在,重新設計網站聽起來並不是那麼地恐怖,我們還是可以保有原先網站的流量(例如,將新網站轉址到原先的網站網址),趁著機會將舊網站的內容重新整理、改版,讓網站內容變得易於更新、修改,可能也是值得考量的地方。

資料來源:Top 6 Reasons Your Business Needs a Website Redesign

延伸閱讀:

WordPress 預約網站 YITH booking 設定教學

WP預約網站-1

WordPress 外掛 YITH WooCommerce Booking and Appointment 能夠結合外掛 WooCommerce 構建的電子商務網站與強大的預約系統,可供客戶和供應商使用:這非常適合所有不僅以銷售為基礎的專業人士:房地產和旅行社、美髮師、醫生、商業顧問等。

對於企業和客戶來說,管理預約、租賃的最佳方式是透過一個強大且完整的 WooCommerce 預約網站,YITH 可以讓一切變得更順暢、更輕鬆。接下來將教大家如何設定、修改自己的預約網站!

修改新增房型商品、設定

這邊會教大家認識新增房型預約商品的相關使用設定,並教大家新增一個房型商品。

這些功能介紹會包含預約設定、預約人數、預約服務等功能!

新增房型商品

進入網站後台後,到 商品 -> 新增商品,添加新的預約房型商品。

需先設定商品名稱、商品永久連結、商品內容描述、簡短說明、商品圖片圖庫等,一般商品都會設定的部分。

依照需求調整分類、標籤。

WP預約網站教學 1
新增房型商品

房型商品預約設定

接下來往下滑可以看到商品資料的地方,在這邊會進行主要的預約網站設定。

商品資料需選擇 Booking Product,虛擬的地方需打勾,預約的部分屬於虛擬商品。

左邊的Tab會依序做設定,首先看到 Booking Settings

WP預約網站教學 2
商品資料
  • Booking Duration 預約期間:設置您的客戶是否可以預訂幾分鐘、幾小時、幾天或幾個月,房型的預約以天計算。這邊選擇 Customer can book units of。
  • Enable calendar range picker 允許選取日曆日期:在產品頁面中啟用或禁用日曆範圍選擇器。預設是打開的,客戶可以在頁面上操作選取日期範圍。
  • Default start date in booking form 預約默認開始日期:這邊我們設定第一個可以預約的日期,也可以做其他設置,例如:無、今天、明天、客製日期。
  • Full day booking 整日預約:選擇預訂是否全天有效(例如:對於從第1天到第2天的預訂,只有在此選項有效時,第 2 天才會被預訂滿)。這個設定房型商品是關閉的,例如兩天一夜的訂房,客戶會選擇1/1-1/2的日期,但他只要住1/1那個晚上,1/2的晚上並沒有要入住。我們只算第1天的預定,第2天並不計算。

接下來跳到下一個設定 Booking Cost

WP預約網站教學 3
商品價格
  • STANDARD PRICES

標準價錢的地方設定房間單日的金額,後面的框框是決定是否以人數計算。

Extra price of 的地方,您可以為每個添加到指定數字的人設置額外費用。例如,這是一間雙人房,但可以加床到四人,這時您可以設定「訂房人數」超過「2人」時,多加一人收「$1000」。

  • DISCOUNTS

Weekly discount、Monthly discount:可以透過提供每周和每月折扣來鼓勵用戶預訂更長的住宿時間。

Last minute discount:透過提供最後一刻的折扣來鼓勵用戶進行預訂。

  • EXTRA COSTS

如果您不需要收取額外費用,留空即可。

截圖示範額外加收「清潔費$200」,並勾選「乘以人數」。

切換到下一個設定 Booking Availability

WP預約網站教學 4
Booking Availability

第一個區塊是 BOOKING TERMS

  • Max bookings:選擇每個單元允許的最大預訂數量,設置 0(零)表示無限制。
  • Minimum booking duration 最短預訂期限:設定客戶可以選擇的最短預訂期限。
  • Maximum booking duration 最長預訂期限:設置客戶可以選擇的最長預訂期限。
  • Confirmation required 確認預訂:選擇管理員是否必須在接受預訂之前確認預訂。
  • Cancellation available 取消預訂:選擇客戶是否可以取消預訂。
WP預約網站教學 5
Booking Availability

往下第二個區塊設定 BOOKING PREFERENCES

包含入住時間、退房時間。

  • Allowed Start Days:選擇可以開始預訂的星期幾。如果它可以在一周中的任何一天無限制地開始,請留空。
  • Buffer time 緩衝時間:兩次預訂之間的準備或清理時間。房間商品請填0。

BOOKING WINDOW

這邊分別設定最低提前預訂及最大提前預訂。

  • 最低提前預訂:例如:如果您將其設置為 10 天,客戶現在可以預訂 10 天后開始的預訂。
  • 最大提前預訂:例如:如果設置為 6 個月,客戶只能在 6 個月內預訂。

接下來進行 Booking People 設定。

WP預約網站教學 6
Booking People
  • Enable people option 人數設定:如果預訂只能由特定數量的人進行,請選中此框。房間商品需要開啟人數設定。
  • 分別設定最低人數最大人數
  • Count people as separated bookings:將人數計為分開的預訂,房間商品的設定這個需要關閉。
  • Enable people types:您可以使用類型為不同的人設置不同的價格。例如:成人 $1500 元,兒童  $500 元。People Types 需要另外做設定,下個部分會進階講解。

Booking Services 的部分,可以選擇提供什麼加購服務讓顧客一同選購結帳,服務設定會在下個部分教學。

WP預約網站教學 7
Booking Services

最後一個 Booking 相關設定是 Booking Sync 預訂同步

如果您還使用 Booking.com 或 Airbnb 等外部服務來銷售您的預約商品,則需要防止超額預訂。為避免您的預訂產品被超額預訂,您可以將它們的可用性與您的日曆同步。通過產品編輯頁面上可用的預訂同步選項,您可以通過添加外部服務的名稱和 URL 來導入 ICS 日曆。詳細官方教學:Booking Sync

完成商品設定之後,一定要記得更新儲存唷!

查看房型商品demo:https://booking.rab.tw/product/room-middle/ 

設定加購服務、依年齡收費

依照不同類型的人設定不同收費

我們要到網站後台的 Bookings -> People 新增項目,例如:成人、兒童…,可以依照需求隨意命名。

新增好之後再回到預約商品編輯後台進行修改,Booking People -> Enable people types 打開,下面就可以看到設定的地方。

展開後分別進行設定。

  • 輸入所需的最小數量和此類可用的最大數量。例如:您可以設置最少 1 名成人或將其留空。
  • 輸入此類型的自定義基本價格和固定基本費用。這些價格將覆蓋在預訂價格中設置的價格。

確定啟用這些設定的話,須個別將旁邊的 OFF/ON 打開。

WP預約網站教學 11
People Type

加購服務

加購服務的新增與編輯同樣到網站後台的 Bookings -> Booking Services 新增項目。

WP預約網站教學 8
Booking Services

欲修改服務,滑鼠移到服務名稱上會出現編輯,點擊即可。以下介紹可以設定的內容。

以「加購服務-早餐」為例。

  • 內容說明:在前台顯示給顧客看的內容說明。
  • Optional:選擇此服務是否可選(讓客戶選擇添加或不添加)。
  • Hidden:選擇是否要向客戶隱藏此服務。
  • Hidden in search forms:選擇是否要在預訂搜索表單中向客戶隱藏此服務。
  • Multiply cost by units selected:如果您想將此服務的成本乘以所選單位的數量,請選擇此項。例如,顧客訂房三天兩夜,選擇加購早餐,會自動乘以天數,加購兩天的早餐。
  • Multiply cost by people:如果您想將此服務的成本乘以所選人數,請選擇此項。例如,顧客訂了兩人入住雙人房型,選擇加購早餐,會自動乘以人數,加購兩人份的早餐。
  • Has quantity:選擇是否允許為此服務選擇數量,設定最小及最大數量。可以讓顧客自行選擇加購的數量。
  • Price for people types:設定不同類型的人選擇此服務的價格。留空以使用預設價格。
WP預約網站教學 9
WordPress 預約網站 YITH booking 設定教學 66
WP預約網站教學 10
WordPress 預約網站 YITH booking 設定教學 67

修改新增行程商品、設定

這邊會教大家認識新增行程預約商品的相關使用設定,並教大家新增一個行程商品。

新增行程商品

進入網站後台後,到 商品 -> 新增商品,添加新的預約房型商品。

需先設定商品名稱、商品永久連結、商品內容描述、簡短說明、商品圖片圖庫等,一般商品都會設定的部分。

依照需求調整分類、標籤。

WP預約網站教學 12
行程商品

行程商品預約設定

接下來往下滑可以看到商品資料的地方,在這邊會進行主要的預約網站設定。

商品資料同樣需選擇 Booking Product,虛擬的地方需打勾,預約的部分屬於虛擬商品。

左邊的Tab會依序做設定,首先看到 Booking Settings

我們以木作體驗課程為例。

WP預約網站教學 13
編輯行程商品
  • Booking Duration 預約期間:這邊選擇 Fixed units of 3 Hours。因為一次行程為固定的三小時。
  • Default start date in booking form 預約默認開始日期:這邊我們設定第一個可以預約的日期,也可以做其他設置,例如:無、今天、明天、客製日期。
  • Default start time in booking form 預約默認開始時間:這邊我們設定第一個可以預約的時間。

接著在 Booking Costs 設定商品價錢,來到 Booking Availability。這部分比較重要!

第一個區塊是 BOOKING TERMS

  • Max bookings per unit:這裡設定4。因為每場次人數限制4人,所以一次最多只能訂一場次4人。

往下第二個區塊設定 BOOKING PREFERENCES

WP預約網站教學 14
Booking Availability

主要設定

  • Daily Start Time:每天活動開始的時間。
  • Buffer time 緩衝時間:場次與場次間的緩衝時間,需要特別設定唷!
  • Time increment based on duration 基於持續時間的時間增量:需要打勾!選擇您的預訂時間增量是否基於預訂時長。默認情況下,每小時預訂的時間增量為 1 小時,每分鐘預訂的時間增量為 15 分鐘。例如:如果啟用並且您的預訂持續時間為 3 小時,則時間增量將為 3 小時,因此您將看到以下時間段:8:00 – 11:00 – 14:00 – 17:00。
  • Time increment including buffer 時間增量,包括緩衝區:這邊也要打勾,包含緩衝時間。

再往下有 ADDITIONAL AVAILABILITY RULES

WP預約網站教學 15
ADDITIONAL AVAILABILITY RULES

這邊可以做額外的時間限制,例如,我們的木作體驗只有星期六、日的 13:00-20:00,星期一到五及其餘時間就可以設定無法預約。

記得設定完需將 OFF/ON 按鈕打開。

點選 ADD NEW RULE 可以新增新的預約規則。

下來進行 Booking People 設定。 

  • Enable people option 人數設定:行程商品需要開啟人數設定。
  • 分別設定最低人數最大人數
  • Count people as separated bookings:將人數計為分開的預訂,行程商品的設定這個需要打開,若場次人數沒有額滿,其他人是可以預約同個場次的。

若有其他 Booking Services 加購服務的話可以另外設定。

完成之後,記得更新儲存!

查看行程商品demo:https://booking.rab.tw/product/wood-chairs-diy/ 

查看訂單

在網站後台即可查看所有預約訂單,也可以使用月曆,更能一目瞭然商品訂單的狀況。

後台 -> Bookings -> All Bookings 查看所有訂單。

點選訂單編號、編輯或是眼睛圖示,都可以查看訂單詳細內容。

WP預約網站教學 16
All bookings

後台 -> Bookings -> Calendar 查看月曆式的訂單,可以清楚看到哪天有什麼預約,點選訂單會出現訂單內容框。

最上面可以選擇商品,並選擇月份近一步查看。

點選鉛筆圖示可以編輯訂單內容。

WP預約網站教學-17
Calendar

相關設定若有修改,記得儲存設定唷!輕鬆修改你的預約網站!

網站規劃怎麼開始?如何規劃網站內容、架構?

網站規劃手冊-1

為什麼你需要網站?

開啟你的網路領地x建立品牌x網站架設!

網路世代、自媒體時代來臨,近86.6%的人口比例已經習慣用從網路接收資訊,人與人的連接已不侷限實體位置。以前因為地點限制,只能雙手遞上名片、紙本型錄,通過言語交談試圖被了解;現在的網路世界,透過網站連結頁面,產生的視覺、形象、全面內容安排,能夠全年無休為你迎接更多用戶。

過去要架設網站的門檻非常高,隨著自媒體、創業風潮興起、網際網路進步,想要自己規劃網站,甚至能自行調整喜歡的網站樣式,已是能夠辦到的事情!

建立一個速度快、能完整展現品牌特色與風格的網站,讓你或品牌被更多人認識!

該如何開始規劃網站?

截圖 2022 08 02 下午6.09.48
規劃網站前置作業

想要架設網站,我該怎麼規劃網站呢?

我們會需要用到三個工具:文件、表單、資料夾

  • 表單用來產出網站架構。
  • 文件用來撰寫網站內文。
  • 資料夾用來整理需要的圖片、檔案。

我們有做線上表單、文件範例,請先開啟您熟悉的表單下載、文件下載。(加Line@可以獲得好看版圖文網站規劃手冊及線上表單下載連結唷!)

  • Windows可以使用Word、Excel
  • MacOS可使用Pages、Number
  • 線上可以使用google 文件、google表單

接下來,會分成個區塊來釐清規劃:

截圖 2022 08 02 下午6.10.03
釐清你的網站規劃
  • 初衷與目標
  • 自我分析
  • 架構分析
  • 樣式分析

開始架設前,如果是需求快速架站可以直接跳到樣式分析,使用400+精選模板,快速進行架站唷!

看完可能還是毫無頭緒?沒關係!跟著我們,一步一步完成自己的網站規劃!

初衷與目標:為什麼架站需要網站規劃?

為什麼要架設網站?想透過網站達到什麼目標呢?搞清楚製作網站目標,網站規劃重點才不會跑偏。

明白架設網站的目的

截圖 2022 08 02 下午6.35.13
Step1:明白架設網站的目的

網站目的:營造形象、新增網路業務、分類別的子公司網站、紀錄型部落格文章

網站規劃:形象網站、購物車網站、部落格網站、爆品/導流型一頁式網站

目標對象:要了解是要對企業(B2B)還是對大眾消費者(B2C),性別、年齡層、消費族群

地理區域:產品/服務銷售國內或國外

語言版本:依照區域思考需要使用的語言版本,中文、英文、日文

各類型網站的差異

  • 形象網站:普遍公司使用的網站型態,能夠系統化分類、多個頁面切換。形象網站屬於品牌門面(網路名片),網站風格會直接帶給使用者個性化感受,無形中的網路數據也可開發潛在客戶。
  • 購物車網站:24小時營業的網路商店!擁有購物車的網站,有些人也會結合形象網站(購物車+形象網站)。期望長期經營品牌,有網站才能建立價值與區隔性,完全掌握數據,讓手續費不被抽走。
  • 部落格網站:部落格網站適合有文章需求的公司、品牌、個人,例如:新聞、雜誌發表等長篇文章。有些形象網站會需求部落格功能(部落格+形象網站),方便建立SEO,提升網站排名。
  • 一頁式網站(爆品/導流型、單頁型形象網站):只有一個頁面,利用排版及圖片、文字來展現網站頁面風格,用簡易明瞭的方式呈現內容,讓使用者立即瞭解公司業務及服務。

目標對象對網站的調整

  • 年齡層較長:整體字體偏大,盡量白而簡潔,使用標準文字較佳
  • 年齡層較年輕:可新增動態頁面,顏色可靈活應用

地理區域+語言版本

確認是否要做多語言版本,還是單一語言

設定網站架設完後的目標

期望網站完成後,達成的目標,盡量設定可實際量化的目標

可思考達成目標需要串接的功能及資源,也可以方便網站後續行銷唷!

目標可設定

  • 瀏覽數
  • 點閱數
  • 購物車成交數
  • 訂閱數量
  • 社群粉絲數量
  • 廣告像素轉換率
  • ……

自我分析:制定網站內容

這部分可搭配上述的目標來執行,規劃網站需新增的文字內容、圖片、影片等資訊。

規劃網站需要先了解自己的特色與賣點

  • 品牌特色:品牌特色是什麼? 有優於其他的優勢或服務嗎?建議能夠濃縮成關鍵字,可更明白網站上要放置的內容。。
  • 獨特賣點:針對自家商品或服務,用自己的角度,提出能對消費者有好處的地方
  • 問題或解決方案:將賣點變實際,描述目標客群在面對什麼狀況中,需要這些服務,針對這些問題我們提出的解決方案。精準打痛點,讓閱讀者想將資訊看詳細的衝動。
  • 精選商品/服務:有什麼是你必推的商品,把經典、熱門、有得獎的內容先整體出來。 主打商品可放置首頁中,一進入網站就能知道品牌主力。

規劃網站需要的放置項目

網站有什麼是需要特別提到的呢?思考網站需要「放置項目」!我們依照大類別來分類內容:

截圖 2022 09 19 下午6.22.09
Step 4:規劃網站需要的放置項目

架構分析:網站架構與編排

了解自己之後,就要開始著手網站架構!開始進行你的網站規劃重點,動手完成你的網站架構與編排!

選擇一頁式或多頁式網頁

  • 一頁式網站

一頁式網站又稱為「單頁式網站」,把所有東西都集中在一個頁面裡面呈現,使用者只需要不斷往下滑就能夠看完全部的內容。如果你發現你的一頁式網站有選單,點擊選單後,你會發現網址並不會轉址,只是跳轉到頁面中某一個區塊。

適合:特定商品介紹網站、簡易形象網站

  • 多頁式網站

許多不同的頁面與導航系統組成,現在多數的官網都是以這種架構存在。多頁式網站具有架構,每個分類都會清楚地被劃分,因此當我們點擊選單上的項目,就會跳轉到不同的頁面。 

適合:公司/品牌的專業型官網、個人部落格網站、電商的購物車網站

規畫你的選單項目/單元、網站大綱 Sitemap

截圖 2022 09 19 下午6.25.21
Step 6:規畫你的選單項目/單元、網站大綱 Sitemap

集結剛才整理的資訊,是不是有一些想法想要設定選單了呢?思考有什麼項目,是能被匡列在一起的吧!建立網站架構,從網站最上方的橫向選單開始,我們通常會稱為單元,由大而小分類,想要網站有哪些選單,就按照順序寫出來吧!如果是一頁式網頁,選單只會有一層,點擊選單只會跳到該頁面某個區塊。

  • 基本單元架構:首頁、關於我們、商品/服務簡介、服務特色、聯絡我們、FAQ
  • 購物車網站單元:首頁、商品、購買須知、聯繫我們、FAQ、會員登入、購物車
  • 部落格網站單元:首頁、關於我、文章分享、合作方式、youtube頻道
  • 形象+部落格網站:首頁、最新消息、關於我們、團隊介紹、作品/服務、下載專區、聯絡方式、文章分享
截圖 2022 09 19 下午6.28.38
Step 6:進階層級

這裡你就當作你在規劃網站的選單,要有哪些選單 (頁面/分頁) 就都把它寫出來吧。

樣式分析:結合品牌風格設計您的網站

設定吸引人的樣式,想要讓人感受的氛圍,讓網站能被持續點閱!

挑選參考的視覺網站

找出喜歡的「網站風格」,把喜歡的內容視覺化,更清楚想表達的網站氛圍。

我們可能會說希望「簡潔感覺」、「活潑的感受」,但先找找有沒有能表達自己的參考網站,讓我們可以學習其中的表達方式,再結合自己的特色,正確表達自己想傳達的風格。

我們有提供400+精選範本,大家也可以從裡面找出喜歡的網站唷!

定義自己的品牌風格色調

回想一下,我們點進網頁時,最先注意的是不是網站整體配色的氛圍及圖片呢?好看的網頁設計配色,才會讓使用者繼續瀏覽你的網站。

  • 整體氛圍(底色)

主要是深色底色或著白色底色做區分,如果想要呈現個性、神秘、專業,就能夠選擇「深色底」;如果想要呈現簡約、俐落、活潑,就可以選擇「淺色底」。購物車商品頁面通常會使用淺色底。

  • 品牌主色

主色通常會搭配Logo顏色,或能夠展現品牌、企業的顏色,目的是要讓品牌能被識別!

網站視覺風格統一,會讓人覺得有一致性,視覺感受會更舒服

  • 現代感可以搭配大眾主流色系。
    專業感可搭配深色系會顯得更穩重、有信賴感。
  • 餐館會搭配餐廳裝潢風格、Logo,決定配色,呈現出想表達的性格感受。
  • 購物車的主色會依照商品的屬性,調整色調。

整合資料配置各頁面

規劃頁面內容及視覺

截圖 2022 09 19 下午6.32.13
Step 9:規劃頁面內容及視覺
  • 網站屬於品牌門面,我們要思考如何讓訪客精確讀懂傳達的資訊。
  • 頁面安排完成後,開始安排每一頁的內容架構,不論是位置怎麼擺、需要什麼文字/圖片、選擇什麼樣式,都要具體呈現(盡量貼近腦袋想呈現的畫面)。
  • 首頁架構建議:各區塊的文字扼要,以按鈕引導至詳細內頁。

畫出頁面架構圖,可以手繪、使用Word、Excel、PPT都可以,只要有辦法把先呈現區塊即可。「頁面架構圖」主要是將功能區塊分布,最好能把一些標題文字區塊,都先想清楚,接下來思考文案也會比較容易。

RAB獨創拼貼模組DIY組合樣式,直接輸出排版頁面唷!

網站規劃完,架站前,我需要注意什麼?

網頁資訊是否備齊

剛剛規劃要擺放的圖片和文字,要記得放在雲端硬碟整理好備用。
( 頁面:Logo、圖檔、文案、商品圖檔等檔案)。

架站系統是否能完成視覺需求

版型是否符合你的需求,是否能調整位置或文字。我們使用 WordPress 搭配 Elementor,能夠視覺化操作網頁排版,還能修改圖片唷!

是否為RWD響應式網頁

RWD為響應式網頁,代表能夠適應不同尺寸的面板,在各種版型都能顯現。現在人多使用手機、平板,若只是網頁板,會讓手機使用者感到不方便。我們使用WordPress 為網站後台,頁面編輯能夠調整各種不同尺寸面板,符合RWD需求。

架站系統是否開源(能否搬遷、是否會突然消失)

我們總不希望辛苦建立的網站,突然有一天不能使用,或著沒有升級就直接停權(強迫付費)。因此要選擇架站建議選擇開放原始碼的後台,至少東西帶得走,網站不會隨意消失。WordPress是最常見的開源後台,如果有 WordPress 的操作問題,RAB瑞布科技是 WordPress 的網站顧問,有需要都能夠協助您完成。

是否能進行SEO設定

SEO 是用來提升網站排名的方式,通過SEO調整與優化網站,能夠讓網站關鍵字排名提升,也就可以得到比較多自然流量。如果想要提升SEO排名,建議可以增加部落格功能,讓文章也能夠加上SEO關鍵字,讓網站排名能夠往前。要記得了解架站後台是否能夠設定SEO,有無SEO會影響網站的流量。

加入Line@取得好看圖文網站規劃手冊

加入Line@ https://lin.ee/0rgfOHS ,傳送「免費領取架站手冊!」,即可獲得完整版網站規劃手冊,內容豐富,不容錯過!

截圖 2022 08 02 下午6.10.25
(小聲說:頁數有30頁以上!)
私訊 解鎖完整 網站規劃手冊
加入Line@ https://lin.ee/0rgfOHS ,傳送「免費領取架站手冊!」

延伸閱讀: