我實話告訴你，這完全不對！！
事實上，你根本不需要把自己打造成一個專業人士、一個天才才能設計網頁。網站設計關乎創作自由，且本文介紹的易於遵循的指南將會協助你完成這項工作，並且告訴你網站設計重點以及你需要避免的網頁設計坑點。
-> 這篇文章旨在闡述如何設計一個網站，如果你想知道如何架設一個網站或關於WordPress架站的內容，你可以參考對應的文章。
1. 如何設計網頁？
（1）設定網站目標和策略
（2）研究最新的網頁設計趨勢
（3）挑選平台
（4）選擇套用模板/佈景主題
（5）確定你的品牌
（6）添加以及優化內容
（7）發佈網頁
1.1 設定網站目標和策略
網頁設計的第一步是「設定網站目標和策略」。
這聽起來很簡單，但在你一頭扎進網站設計之前，你首先需要弄清楚網站目標。
除了簡單地了解你的行業和制定內容戰略之外，你還需考慮你的獨特賣點是什麼，以及你要如何體現出來。
人們並不愚笨。如果你是為了盈利或為了提升自己的形象，人們都能透過網站看出來。你的網站設計與你的品牌直接掛鉤，它需要給人一種真實、真誠的感覺，且要有吸引力，能讓人願意參與進來。
- 你想要獲得什麼？
一旦你的目標明確了，重點就轉移到當訪客造訪你的網站時，你想讓他們做什麼？你的網站只是用來提供訊息？銷售產品？讓訪客註冊？
這個問題的答案最終決定你網站的外觀和給人的感覺。以購物網站為例，你設計的一個關鍵元素是你的登入頁面。
根據頂級數字品牌公司Crowdspring的說法，你的登入頁面應該聚焦於一款產品或活動，並帶有明確的CTA（Call to Action，呼叫行動，即刺激客戶下單）。
曾經有人採訪一家全球科技公司的一位在商品轉化率方面非常頂尖的專家Wolfgang Bruns，問他關於，為不同的訪客提供不同的登入頁面、制定不同的優惠和產品的重要性（這一過程稱為客戶細分）。
他認為，了解自己的客戶對於任何商業模式上的成功都是至關重要的。這意味著你可以客製化以及改進你提供的體驗，更好地滿足他們的需求。這樣做會對利潤產生正面影響。對流量進行細分以提供對號入座的體驗，這是邁向個人化使用者體驗之旅的第一步，隨之而來的便是商業成功。
1.2 研究最新的網頁設計趨勢
網頁設計發展很快，但總歸有值得你去學習的設計。不過，你要知道的是，儘管這種設計比較流行，但並不意味著它一定適合你。
48%的人認為設計是網站最重要的要素，所以花點時間看看競爭對手在做什麼很重要。每個行業都會有不同的風格，所以你要知道你是要融入你的行業，還是要顛覆它，這一點很重要。
1.3 挑選平台
當你尋求高品質的網頁設計時，你首先想到的是不是尋找一個專業網站設計公司的幫助？雖然頂級網站設計公司可以設計出很棒的網站，但所要花費的成本卻是無比貴。
值得慶幸的是，這裡還要另外幾種解決辦法：WordPress、網站建置工具以及電子商務架設平台。這些都是DIY線上工具，允許你設計和架設自己的網站，而不需任何程式技術或設計經驗！
當然，市場上有很多不同質量的選擇，那應該選擇哪一家呢？別擔心，我們已經為你研究、測試出了市場上最好的網站設計、架設工具及平台：
接下來，我們將介紹架設一般網站和電子商務網站優先考慮的前三個架設選項。首先是WordPress。
（1） WordPress
WordPress.org是一個免費的開源程式的內容管理系統（CMS）。當涉及設計、架設網站時，它是最受歡迎的。
WordPress讓你完全掌控你的網站。不過，若想讓網站能夠上線，你需額外支付虛擬主機服務、網域網址、以及額外的功能外掛或佈景主題費用。你是不是認為需要花費大價格才能備齊這些裝備？
其實，作為新手，第一年只需$33（選擇Bluehost WordPress Basic主機方案的話，折算：大約990台幣），就可完成網頁設計、網站架設的工作，並且具有高度的自由性。
-> 如何架設一個WordPress網站？這篇指南將指導你一步一步建置出屬於自己的WordPress網站。
-> 還不知道WordPress到底是什麼？沒關係，請閱讀 WordPress是什麼？
-> 想全方位了解WordPress？請點擊WordPress教學。
本文「WordPress」是指WordPress.org，而非.com ！更多關於這兩者的區別： WordPress.org vs. WordPress.com。
（2） 網站設計工具
除非你想在網上銷售，否則網站設計工具是非專業人士架設自己網站的另一種有效方式。如果你想開一家在線商店，可以直接移步於我們的電商平台區塊。
我們已經調研得出10家最好的網站設計工具供你選擇，所有工具都能滿足不同的需求。
- Wix
Wix通常被認為是市場上最好的網站設計工具。它易於使用的拖放編輯器讓你可以完全施展你的創造能力，允許你添加任何內容，並放置在你認為合適的地方。
Wix有500多個專業設計的套用模板可供選擇，內建了一系列非常棒的功能，還有一個巨大的應用商店供你安裝任何你需要的額外功能apps。
- Squarespace
Squarespace是散發著優雅氣息，並帶有一種光澤、優質感覺的網站設計工具。Squarespace以自己的套用模板而自豪。它們的尖端設計使它們成為創意領域行業的完美選擇，例如攝影師、藝術家或平面設計師。
- Weebly
Weebly宣稱是一款適合所有人的網站設計工具，實際上，它專注於小企業網站。它有很多套用模板可供選擇，還有一個很容易掌握的拖放編輯器。
（3）跨境電商架設平台
電子商務架設平台的工作方式類似於網站設計工具，但它們是專門為幫助你架設在線商店而出現的。有些是專門為電子商務（例如，Shopify）而建的，而另一些（如Wix）則是具有電子商務功能的網站設計工具。
- Shopify
作為最好的電商架設平台之一，Shopify遙遙領先於同行。它有一系列專門為你產品設計的佈景主題，還提供更多的銷售功能。
Shopify非常突出的一點是該平台允許你透過利用不同的管道，以及透過在不同的市場和社群媒體上銷售來擴大在線商店的覆蓋範圍。
Shopify與網站設計工具略有不同，Shopify主要是在控制台上操作，而非在編輯器上操作。
由於網上商店需要考慮的因素太多了：比如行銷、庫存和發貨等，如果你有一個控制中心來管理這一切，當然也包括網站設計，就變得非常有意義了。
- Wix eCommerce
「你們不是已經介紹過Wix了嗎？」是的，但用Wix架設一家網上商店完全是另一回事！
雖然Wix在架設一個「純粹」的在線商店方面無法與Shopify競爭，但對於那些只想在自己的網站上開設一個商店區塊的人來說，Wix是完美的選擇。
任何兼營銷售產品的人都可以從Wix中收益。例如，如果你是一個樂隊的成員，你網站的主要目的可能是向歌迷提供巡演訊息，並接受演唱會的預訂。
不過，你也有可能想在網站上售賣商品，如巡演上衣、專輯和品牌樂器。Wix可以讓你很容易地從一開始就建立一個在線商店，或在中途增加一個商店店鋪。
- BigCommerce
與Shopify和Wix相比，BigCommerce與前者更相似。它完全是為在線銷售而設計的，被廣泛認為是架設在線商店的最佳平台之一。
BigCommerce勝過Shopify的一點是它擁有大量的內建功能。使用Shopify，你最終可能會花費遠遠超過安裝一大堆應用程式的標準月費，而許多應用程式是免費與BigCommerce一起使用的。
不過，BigCommerce無疑比Shopify更難以使用。它使用的一些術語非常專業，而且網站的實際設計可能會變得相當複雜，這意味著它並不是一個適合初學者的平台。
我們會將BigCommerce視為一個為那些有技術且有預算意識的人提供的平台。它比較適合中小企業。所以任何一個只想售賣較少產品的人，更適合使用帶有電商功能的網站設計工具。
1.4 選擇套用模板/佈景主題
現在你已經清楚了你架設網站的目的，知道了最新的網頁設計趨勢，心中有了一個架設平台，接下來就是要挑選一個模板。
套用模板（或佈景主題）是一個網站的佈局，就像房子的結構一樣，在你用東西填滿它之前，它形成了你網站的基本外觀。
大多數平台都會提供一系列模板供你選擇，其中預先填充了示範內容。
模板通常根據行業類別分類，這讓你可以比較容易地從中篩選出適合自己的模板。每個類別都將具有與該行業相關的內建功能的模板，從而可以節省大量時間和精力。
1.5 確定你的品牌
好啦，是時候開始設計網站了！
在設計網頁時，需要考慮你所做的每一件事與你的整體品牌之間的關係。從配色方案到字體風格和形象，一切都在講述品牌故事中發揮著作用，它們應傳遞相同的訊息。
（1）配色方案
色彩是品牌最大的推廣工具之一。事實上，依據Color Matters，一個標誌性的顏色可以提高80%的品牌認知度。
人們對顏色的感知背後有很多心理因素，所以了解它與你的行業相關性是很重要的。
- 綠色：代表財富、健康、寧靜與自然。眼睛最容易處理的顏色，所以它有放鬆的效果。綠色是男性和女性最喜歡的第二種顏色。
- 黃色：代表年輕、樂觀和開朗。經常用來吸引觀眾的注意力。黃色會使眼睛疲勞，所以你要謹慎使用。
- 橙色：代表友好、熱情和創造力。促使人們採取行動：購買和訂閱。橙色吸引衝動的購物者。
- 紅色：代表激情、緊迫感、興奮、活力和危險。經常被用來製造人們購買的緊迫感。有效地引發強烈的情緒反應。餐館用它來刺激食慾。
- 粉色：代表女性、甜蜜、天真、生育和浪漫。通常用於向婦女和年輕女孩推銷服務和產品。
- 紫色：代表皇室、財富、成功和智慧。常用於美容或抗衰老產品。對人有撫慰和鎮靜的作用。
- 藍色：代表信任、安全、穩定、和平與平靜。常用於企業和銀行，以營造品牌的安全感和信任感。藍色是男性和女性最喜歡的顏色。
- 灰色：代表中性、簡單、冷靜、未來主義和邏輯。它缺乏情感，與技術、行業、精確度、控制力、能力甚至成熟聯繫在一起。
- 黑色：代表權力、奢華、精緻和優雅。經常被用來行銷奢侈品牌，以喚起專業、力量和精確度。
大多數品牌都有1種主色，2到3種次要顏色。藍色是最受歡迎的顏色，在排名前100的品牌中，有三分之一的品牌在其logo中使用藍色。
（2）字體樣式
與顏色類似，你選擇的字體讓人們對你的網站的看法有很大的影響。網站使用者平均會在任何給定頁面上閱讀大約20%的文本，所以用合適的字體氛圍來吸引他們是至關重要的。
當然，白領企業會希望使用經典風格的字體。像Arial和Helvetica這樣的字體是專業的代名詞，因此在討論嚴肅的問題時使用它們是很有必要的。
不過，一個更有趣或更好玩的品牌可能希望探索更抽象的字體。但是，在趣味性和可讀性之間取得平衡很重要，因為你最不想做的是疏遠你的讀者群體。
本網站使用的字體是 Noto Sans TC。
（3）圖片
圖片是你如何將一個樸素的網站變成一場視覺盛宴必不可少的要素。
視覺內容對增加點擊量和參與度很有用，因為圖片會縈繞在你心頭，久久不離去，增加訪客對你網站感興趣的幾率。
依據一項研究，如果我們看到一條訊息，我們只會記住其中的10%；但是，如果你加上一張圖片，我們會記住65%。
儘管這樣，你要注意，不要讓你的網站上有過多的圖片。許多高品質的圖片可能看起來很棒，但它們會減慢你的網站速度。訪客可沒有太多耐心，如果你的網站不能快速載入，他們就會離開。
1.6 添加以及優化內容
接下來，你應該知道你要給你的網站添加什麼內容了。在執行這項操作時，你需要考慮兩件事：定位和優化。
定位是指內容在每個頁面上的位置，以及它的佈局方式。與此同時，優化是調整內容以協助其在Google或Bing等搜尋引擎上排名更靠前的過程。
下面，我們將討論這兩者的技術細節，並解釋它們為什麼重要。
（1）定位
研究人們的閱讀習慣後，我們發現人們通常以「F」格式閱讀內容。簡單地說，這意味著網站使用者以類似於F的形狀掃描頁面。
這就是為什麼網站上的導覽欄幾乎總是顯示在頁面頂部，這是人們在登入網站時第一個被吸引的元素。
記住這一點來安排你的內容是很好的做法，這樣就能讓盡可能多的人看到重要的內容。
（2）優化
搜尋引擎優化（Search Engine Optimization, SEO）是指你對你的網站內容做出改變，以提高訪客的品質或數量。可以這樣想SEO：
如果你有一輛賽車，你的目標是贏得一場比賽。你可以擁有看起來最花里胡哨的汽車，但引擎蓋下的東西才是你贏得比賽的關鍵。
當你調整引擎、更換輪胎或減輕底盤重量時，你所做的就是在優化你的賽車。你的賽車看起來好像沒什麼變化，但這樣做會讓你贏得比賽的幾率大大提高。
SEO其實很類似。你的網站看起來可能沒什麼不同，但對內容、圖片和響應度的調整可以對它在搜尋引擎結果中的排名產生巨大影響。
以下是你在設計一個網站時可以做的一些比較重要的優化：
- 元數據
頁面或文章標題和描述，即元數據（Meta Data），是告訴Google你網站是關於什麼內容最簡單的方式。
元數據出現在搜尋結果中，允許用戶在點擊之前就能知道你網站上都有什麼。
- 圖片優化
圖片通常是非常大的檔案。這意味著網站上有大量圖片會減慢你的速度，網路上的瀏覽者耐心有限，他們會在你的網站完全載入之前就離開了。這就是所謂的「跳出頁面」（bouncing）。
那你有什麼解決方案嗎？當然，壓縮圖片。
有大量免費的在線壓縮工具可以減少圖片的像素，還不怎麼扭曲圖片品質。壓縮圖片可能會對頁面載入速度產生很大的正面影響。
本網站顯現的所有圖片均是透過Squoosh.app處理過的.WebP格式的圖片，此過程不但讓圖片的規格變小，且幾乎不怎麼影響圖片品質。
- 圖片替代文字
除了壓縮圖片，SEO的另一個重要工作就是要告訴Google圖片代表什麼。不像文字，搜尋引擎不能「閱讀」圖片，因此，透過在圖像中添加替代（Alt）文字，你可以有效地幫助搜尋引擎理解圖像中所描述的內容。
Alt文本不會直接出現在你的網站上，它是在你編輯圖片的時候添加的。
- 移動響應能力
越來越多網路使用者喜歡透過移動設備，如手機，上網。這就是為什麼Google越來越青睞在移動設備上格式正確的網站。
如今，大多數模板都是移動響應的，會自動格式化你的內容，以適應不同的設備熒幕大小。
如果你想改善使用者的體驗，並為你贏得重要的SEO積分，那麼你就需要考慮移動響應性。因為這也是讓你的網站更容易被更廣泛的客群訪問的一個很好的方式。
- 內部連結
內部連結是指你透過超連結將讀者引到你網站上的另一個網頁。通常是當你提到一些相關內容的時候，你會這樣做。這樣可以告訴Google等搜尋引擎，你是這個主題內容的權威，因為你有很多關於這個主題內容的文章。
-> 本篇文章只介紹了SEO的部份內容，若想知道詳細介紹，請參考SEO教學這篇文章。
1.7 發佈網頁
好，到了這一步，就是準備要發佈網頁了。
在發佈之前，你需要檢查一下一切是否正常。一般你可以檢查：
（1）你網站內的所有連結是否是有效的，是否可以將讀者帶到正確的頁面。
（2）你的所有內容都是可讀的，且很容易找到。
（3）你離首頁的距離永遠不會超過三次點擊。
（4）你的網站在電腦、平板、手機上看起來都很棒。
（5）任何頁面的載入速度都不超過5秒（使用免費的網站速度測試器進行檢查）。
2. 結語
現在，你知道了設計網頁所要考慮的要素。你可將本指南作為你網站設計手冊。這樣的話，當你不確定應該怎麼做時，看一看。
記住：密切關注你的競爭對手，不要害怕向優秀的人學習！遵循我們指南中的步驟，你很快就會發覺設計網頁並不像想象中那麼難，也並不是那麼地枯燥乏味。
3. 網站設計常見問題及解答
（1）設計一個網站需要花多少錢？
很多網站設計工具都提供免費方案。不過，你還是需要支付購買網域的費用（一般是$15/年）。如果你的預算緊張，你可以選取便宜的架站工具方案，費用大約是$5-15/月。
你也可以選擇WordPress.org架站，WordPress軟體免費，你需支付網域和WordPress主機的費用。如果你的預算有限，便宜的虛擬主機方案能讓你一年只需支付$33（大約990台幣），便可以擁有一個功能完全，且所有權屬於你的網站。
（2）我應該找網頁設計公司，還是自己做？
如何選擇其實取決於三點：你的技術水平、預算，以及網站要求。
大多數人都可以在DIY平台設計一個網站，但如果你的網站很複雜，要求的功能很多，我們建議還是尋求網頁設計公司的幫助比較好。
（3）在什麼平台上設計網站最好？
我們首先推薦WordPress。它適合任何類型的網站設計：個人網站、公司形象網站、小企業網站、大企業網站、作品集網站等，甚至可以安裝WooCommerce進行電子商務網站設計，並且，WordPress的佈景主題庫以及外掛庫提供非常多的免費主題和外掛。
另外，Wix是另外一個優質DIY網站設計工具。它是個人網站、小公司和那些希望在線銷售一些產品的人的理想選擇。
與此同時，Shopify是大公司、想在線上銷售較多產品的成熟電子商務網站的絕佳架設平台，它擁有一系列的優質主題和功能。
（4）我是應該使用WordPress還是別的架站工具？
WordPress的自由度更高，可以更改底層程式碼，且設計、架設出的網站歸自己所有，不過，你需選擇網路主機來儲存網站資料。
有人可能認為需要扎實的程式碼知識才能透過WordPress設計、建置網站。
但，我們不是這樣認為的。儘管你不懂技術知識，如今市面上有多款可視化編輯器（如Divi Builder, Elementor）協助你設計、架設網站，你仍然可以架設出自己滿意的網站。
別的架站工具可能會更簡單、更省事，但自主性有限，且價格更高。
-> 想知道WordPress和別的架站工具之間有哪些區別？分別適合哪類人？你可以查看WordPress.com vs WordPress.org，因為WordPress.com就屬於「別的架站工具」。
（5）如何透過網站盈利？
像線上銷售（產品和服務都可以）、聯盟行銷、銷售廣告位等都可以獲得利潤。
0 Comments