Portaly
方案說明精選帳號文章選集關於我們
Portaly
登入

免費註冊

Portaly Blog

繁體中文 | EN

文章總覽精選範例內容經營使用教學訂閱

網站設計怎麼做?找誰做?5 個網站設計新手必知的實用設計原則教學

2023-10-05

內容目錄

作為企業或個人的品牌形象入口,或因為需要收整大量的資訊、有系統地累積更容易被搜尋到的內容,抑或更彈性自由地規劃功能與設計,「網站」都可以同時回應以上的需求,也是建立網站之所以重要的原因。但一般人要建立網站時,最常問的問題就是:「網站設計怎麼做?」。

一個好網站能幫你加分,但什麼才是好網站呢?如果你不是工程專業,這題的確不容易。因此,這篇文章幫你整理了 5 個重要的網站設計原則以及 4 類實用工具,讓你的網站成為你的品牌資產而非負債。

要先說明的是,這裡說的「網站設計」,並不單指視覺上的設計或排版,還包含網站的資訊架構以及使用者體驗。好的網站須要依據網站目的創造友善的使用體驗,才能滿足使用者的需求、令人印象深刻。

圖片來源

6 種常見的網站設計類型

要創造好的使用體驗,前提是先確認網站的目的,才能以終為始來進行網站設計。以下整理常見的網站設計類型,分別是用「網站目的」以及「頁面數量」來區分,幫助你定位你所負責的網站,屬於哪一種。

建立專屬個人網站

Portaly 是全球最大的中文傳送門服務,可以快速打造屬於自己的微型官網。30 秒註冊、終身免費使用。

免費註冊

一、以網站目的區分

1. 品牌形象官方網站

這就是常見的「企業官網」或「品牌官網」。目的以展現品牌形象為主,資訊則包含公司的重要內容,像是理念願景、提供的產品服務、聯絡方式等。

網站設計重點在於資訊規劃架構是否順暢,以及設計是否展現品牌風格

圖片來源

2. 電商、購物網站

就是我們常聽到的「線上商城」、「網購網站」,規模大到如 PChome、蝦皮購物,小至個人經營的文創電商。目的就是讓大家能瀏覽商品,進而下單購買,所以網站設計重點在於如何創造安全、友善的購物流程,並建立品牌信任感。

圖片來源

3. Blog、媒體網站

這也是常出現在我們生活中的,例如「部落格」、「新聞網站」等。目的不外乎是為了傳遞資訊、累積內容建立知名度或專業度等。網站設計重點在於如何讓閱讀體驗更友善、方便查找使用者需要的資訊等。

圖片來源

4. 個人網站

個人網站最主要的差異在於它的背後是一個「個人」而非「組織」,所以只要背後經營的是個人,就可以稱為個人網站。

這一個分類底下又可依據個人目的不同,細分成個人履歷/作品集網站、個人社群媒體多連結頁面等,完整內容歡迎閱讀【網站架設全攻略】帶你從 0 開始架設個人網站

擁有多種功能的社群個人網站

建立專屬個人網站

Portaly 是全球最大的中文傳送門服務,可以快速打造屬於自己的微型官網。30 秒註冊、終身免費使用。

免費註冊

二、以頁面數量區分

1. 一頁式網站(One-Page-Web,又稱單頁式網站)

顧名思義,就是不需要點選分頁,一直往下滑就能瀏覽完所有網站內容的網站。部分活動網站、產品網站、個人履歷/作品集網站、社群媒體多連結頁面等會是以這種形式呈現。

一頁式網站適合給需要呈現的資訊沒那麼繁雜的人,若資訊量太多且設計不當,一直往下滑反而會造成使用者的體驗下降,產生不耐。

所以網站設計重點在於資訊邏輯的安排、查找內容的友善度、引導動作規劃的流暢度等。

2. 多頁式網站

也就是頁面多於一頁的網站,大部分網站屬於這一個類型。適合給資訊量較多、資訊層級較複雜、動作較多的網站。

由於資訊較繁雜,網站設計的重點就在於把每一個分頁的資訊層級、彼此的關係規劃清楚,以及如何引導使用者穿梭在不同的分頁中,最後引導他做出你希望他做的行動,例如訂閱電子報或下單購買等。

圖片來源

網站設計的 5 個基本原則與要點

不管你的網站是以上 6 個類型的哪一種,接下來要介紹的網站設計基本原則,都能幫助你打造一個好網站。

為什麼設計一個好網站很重要?因為它能幫助你建立你的品牌視覺風格、增加使用者停留在網站上的時間,也就代表他喜歡使用你的網站,進而增加品牌信任感。最重要的是讓使用者願意下單購買、或再次造訪,甚至是推薦給其他人。

掌握以下 5 個基本原則,你也就掌握了網站設計的重要方向:

一、創造好的使用者旅程(User Journey Map):UI/UX 佈局

一個網站最重要的就是能達到你的網站目的,而要達到網站目的,規劃友善的使用者旅程便十分重要,這就要仰賴 UI/UX 的佈局。

UI 指的是「User interface 使用者介面」,主要考量的是視覺上的美觀性以及使用上的便利性。例如網站的整體排版、字體大小、字型挑選、段落間距、顏色搭配、按鈕樣式等,為的是讓整體網站符合品牌風格、視覺美觀,以及閱讀操作上的友善。

UX 指的是「User experience 使用者體驗」,著重在這個網站使用起來的感覺。例如感覺起來好不好用、有沒有解決到他的問題或找到他想要的資訊,每一個動作之間夠不夠直覺與流暢等。這仰賴對使用者行為的研究、建立好的資訊架構、規劃使用者體驗流程等,才能打造出好的網站 UX。

有些公司會聘請專業的 UI/UX 設計師來進行以上工作,若你是個人工作者,建議可以多閱讀相關文章、多看其他的網站設計(例如 Awwwards),以及換位思考成為你的使用者,來發想與試用自己的網站,看看如何提升使用體驗。

圖片來源

二、確認你的網站有做好 RWD

RWD 指的是「響應式網頁設計 Responsive Web Design」,意思是網站的畫面會依據瀏覽器或載體的尺寸,自動調整網頁排版,讓網站閱讀與體驗上仍然順暢。

最標準的三種尺寸就是手機、平板與電腦。尤其現在使用手機上網的人又佔了八成以上(資料來源),很多網站公司甚至是從手機介面開始設計,再來調整成平板以及電腦的尺寸。

Portaly RWD
良好的 RWD 是現代網站必備的條件之一

許多架站服務平台都有提供基本的 RWD 功能,讓你的網站可以自動在不同載具上調整排版,不過建議還是要親自檢查,因為如果有跑版或是因此功能壞掉,長期下來對品牌的損失其實很可觀。

(若不確定不同的架站服務平台是否能幫你做到 RWD,推薦閱讀【4 個免費架設個人網站的平台比較:Wordpress、Wix、Weebly、Portaly】來看不同平台的服務比較)

三、規劃友善的 SEO 架構

SEO 指的是「搜尋引擎最佳化 Search Engine Optimization」,白話就是讓 Google 更容易搜尋到你。

這是一種行銷技術,據一項 SEO 研究結果 Google 第一頁就佔據了 86.3% 的流量,也就是說,如果你的網站搜尋結果排在第一頁,就像路口的黃金店面,會吸引最多目光。

而要有好的 SEO,主要分成技術與行銷層面,技術上如果你不是工程師,通常比較難做,所以許多架站服務平台會提供 SEO 的套件讓你使用。

行銷層面則仰賴大量的內容累積,最直接的就是持續撰寫文章放在你的網站上。在撰寫前,要先研究並確認哪些搜尋關鍵字是你想經營的,然後才規劃與這個關鍵字有關的文章內容,接下來便要持續撰寫、累積內容,以及到 Google Analytics(GA)、Google Search Console(GSC)追蹤你的成果。

(延伸閱讀【個人網站的內容應該要放什麼?】來了解不同網站類型,到底適合放哪些內容?以及網站建好後,如何提升網站的 SEO 排名?)

圖片來源

四、提升網站載入速度

顧名思義就是你的網站需要讓人等多久才能看到內容、完成他想要的動作。等越久、讓人越不耐煩,就會讓越多人想跳出網站,你就流失了你的使用者,也對你的品牌形象扣了分數。你的網站的圖片大小、動畫數量、外掛數量、主機環境等都會影響到網站的載入速度,這也是你可以檢查的方向。

除此之外,Google 也直說網站載入速度會影響 SEO 的排名,載入速度越快,排名越高,可見其重要性。

圖片來源

五、與品牌一致的視覺設計

最後,是聽到「網站設計」會最直覺想到的「視覺設計」。一個好的網站視覺設計,會與你的品牌視覺有一定程度的一致性,所以建立一個清楚的品牌視覺規範便很重要。

品牌視覺規範的基本元素例如 logo、標準色、次要搭配色、品牌主要字型、次要字型、輔助圖形等。這些元素需要能運用在品牌的周邊產品上,最重要的像是你的名片、文件、社群媒體、網站等。

延伸品牌視覺基本元素,你甚至可以為網站建立一個屬於網站的視覺設計規範,例如按鈕顏色、標題字型顏色、次標題字型顏色等,讓你的網站有一個清楚的設計規則,且跟你的品牌具有一致性,藉此創造你的品牌識別度。

圖片來源

建立專屬個人網站

Portaly 是全球最大的中文傳送門服務,可以快速打造屬於自己的微型官網。30 秒註冊、終身免費使用。

免費註冊

套版網站與客製化網站設計的差異

掌握以上網站設計要點後,接下來介紹網站設計的兩大形式,主要依據自由與彈性程度來做區分:

一、套版網站:自己做

套版網站指的是使用既定的網站版型來做有限程度的調整。

如果是跟網站公司合作,他們可能會提供過去做過的網站案例,給你挑選合適的來進行調整;若是使用架站服務平台,例如 WixWordPress,則基本上他們會提供多種版型選擇,套用後再讓你進行部分調整。

有一些架站服務平台,例如 Portaly傳送門,專門打造品牌的社群媒體多連結頁面,它的版型相對單純,所以操作起來也很簡單,可以一鍵選擇你的品牌色,就能套用在整個頁面上,讓你建立一致的網站視覺。此外,它本身就是符合手機介面的設計,不需要擔心不同裝置跑版的問題,也符合主流使用手機上網的趨勢。

 (推薦閱讀【〖網站架設全攻略〗帶你從 0 開始架設個人網站】來認識三種主流的架站方式,及不會程式也能架站的五大工具)

Portaly 傳送門
個人網站
客製化網站
使用 Portaly 架設的創作者社群官網

二、客製化網站:找人做

客製化網站指的是完全依據你的視覺風格、內容規劃、目標需求等來做網站設計。若是選擇這個形式,一般會選擇請網站公司完全客製化網站,或是自己寫程式碼,依照自己的喜好來做網站設計。

如果是選用架站平台,比較難做到完全的客製化,除非你自己對程式語言有些了解,才能夠自己進去修改程式碼,增加網站設計的彈性。

套版與客製化網站設計比較

以下整理了選擇套版與客製化網站設計的比較表,幫你選擇一個較適合自己的方式:

套版網站客製化網站
自由度較低較高
所需費用可控制非常高
所需時間較短(1 天-1 個月)較長(1-6 個月)
使用者體驗仰賴版型的 UI/UX 設計仰賴自己或網站公司的專業
RWD大部分架站平台有包含大部分網站公司有包含
SEO大部分架站平台有工具可使用需與網站公司討論 SEO 策略
網站載入速度取決於網站內容大小與複雜度取決於網站公司的程式架構
以及網站內容大小與複雜度
視覺設計依據版型的網站視覺設計邏輯作微調,搭配自製圖片素材由網站公司協助訂定網站視覺設計規範,搭配設計師製作設計素材

幫助網站設計更順利的 4 類實用工具

無論你最後選擇了套版或客製化網站,接下來要介紹的四類實用工具,都能幫助你設計一個更好的網站。

一、UI/UX 的好幫手:Figma / Invision / Whimsical

這些屬於可以線上協作的設計工具,幫助你或是團隊一起規劃出好的網站使用者旅程。大部分功能大同小異,細部差異或個人喜好就留給你自己體驗看看。

這些工具可以幫助 UX 的規劃,例如使用心智圖或是樹狀圖建立網站的資訊架構,或是利用流程圖來規劃網站的使用體驗步驟,也可以使用白板或便利貼功能來發想網站裡的內容,並且將之分類與整理。

它們也能幫助 UI 的設計,因為它內建許多網頁或手機框架的模板,讓你可以把 UI 設計直接畫下來,來收集回饋、測試、來回討論調整等。是許多 UI 設計師不可缺少的工具。

圖片來源

二、RWD 檢查工具:Window Resizer

Window Resizer 是 Chorme 瀏覽器的擴充外掛工具套件,幫助你的網站做好 RWD(響應式網頁設計)。這個套件已經有超過 70 萬使用者,以及超過 4 顆星的評價。

點擊連結下載後,你即可在 Chrome 瀏覽器將你的網頁視窗大小改成指定的尺寸,來測試網頁在不同尺寸下的排版表現。Window Resizer 提供各式手機、平板、筆電、桌機的型號,幫助不可能同時擁有這些載具的我們,只要點擊滑鼠,就可以做最完整的 RWD 測試。

圖片來源

三、SEO 檢測工具:Screamingfrog / Ubersuggest

這兩個工具都是專門用來檢測你的網站 SEO 表現,不過 Screamingfrog 需要把它的軟體下載下來才能使用; Ubersuggest 則是輸入你的主網址即可進行檢測。

兩個工具的免費版都有掃描頁面的數量限制,不過對於小網站來說已經夠用。

檢測結果會列出網站 SEO 表現不佳或可以更好的地方,例如你的網站是不是有失去內容(出現 404)的狀況?H1、H2 是否有正確定義?圖片是不是有缺 alt(替代文字)?圖片是否太大影響網站速度等,幫你找到切入的方向。

圖片來源

四、網頁速度檢測工具:Google PageSpeed Insights

PageSpeed Insights 是 Google 出的網頁測速工具,只要輸入網址,就可以計算出你的網站載入速度,看看是屬於不及格、尚可還是表現優良。

除此之外,PageSpeed Insights 還會列出可能影響載入速度的問題,以及建議的調整方向,作為你的參考。你也可以輸入與你相似類型的網站,比較看看各自的網站載入速度表現,或許會增加你優化的動力。

網站載入速度越來越重要,因為它連動影響到 SEO 排名,所以絕對是不容小覷的面向。

結語

網站設計絕對不只關乎美感、排版等視覺面向,還包含了所有能讓整體網站體驗更加友善與流暢的各種面向。

這篇文章分享了五個網站設計的基本原則與要點,包含:設計友善的使用者旅程(UI/UX)、RWD(響應式網頁設計)、SEO(搜尋引擎最佳化)、載入速度以及與品牌一致的視覺設計,以上是網站設計需要掌握的原則,也是一個好網站的關鍵。

這五大面向若深入探討,都是各門很深的學問,無法用一篇文章就完整說明。但至少現在你有了判斷「好網站」的標準,並搭配文章中介紹的工具,能幫助你實際做診斷、找出未來可以優化的方向。

對於非網站專業的個人或組織來說,了解網站設計的基本原則與工具,能幫助我們跟網站公司溝通、選擇更適合的架站平台,讓架設網站事半功倍,且能真的為品牌帶來加分。

本文為個人網站經營的基礎教學,你也可以參考以下文章!



作者介紹

Portaly 傳送門是台灣團隊開發的「社群微型網站」服務,一頁整合你的品牌首頁或個人網站,永久免費使用,並且為全球第一的中文 Link-in-Bio 品牌。

官方社群Discord 官方群 | Instagram
用戶精選創作者精選KOL精選品牌精選

打造你的傳送門

Portaly 傳送門迄今超過 20,000 個創作者、品牌、商家使用。30 秒完成註冊,即可打造專屬自己的品牌首頁。

免費註冊