Menu
2020-06-28

網站設計與架設的6個步驟

在開始進行網站設計與架設之前,有些準備工作是必不可少的,了解網站設計與架設流程便是其中之一。透過流程,能夠了解各個階段的重點項目、應該準備的資源以及必須推進的行動,如此循序最近,最後才能順利完成網站設計與架設專案。本文將介紹網站設計與架設流程,不論是自己架站,亦或是與網站設計公司合作,都十分適合做為參考。

第一步:明確目的、受眾及功能需求

在最初的階段,一般至少需要釐清網站的目的、客群及功能需求等等。

  • 網站的目的為何?

    常見的架設目的有建立企業形象、傳遞企業資訊、展示產品、販賣產品等。一般來說,容易出現同時存在多個目的的情況。因此,需要將目的分成主要目的及次要目的,便能釐清規劃、取捨時的優先順位。

    以製造工業產品的企業為例,這類型企業一般以業務拜訪為主要拓展模式,所以網站的主要目的是傳遞企業資訊,讓投資人或潛在合作對象對企業的事業內容有所了解,而次要目的才是展示自家所製造的產品。因此,規劃網站時,會以企業形象、事業內容為主,子頁則放置產品資訊。而若是以製造消費品的企業為例,則網站的主要目的有可能就會是已呈現商品、促進消費者認知為主,此時,首頁放置的內容可能就會強調產品的品牌個性及特色,而非企業的相關資訊。

  • 網站的受眾為何?

    網站的目的很大程度地決定了網站的受眾,而不同的受眾則應該提供不同的內容,甚至設計風格、網站功能。

    以醫療健康領域的企業來說,網站的受眾可能包含醫療專業人員及一般患者。針對這樣性質迥異的受眾,就會需要提供不同等級的資訊,而若將資訊置於同一個頁面,則容易造成混淆。針對這樣的情境,一般會將網站區分出專屬區塊、頁面,甚至直接分成兩個網站。

  • 網站的功能需求為何?

    透過瞭解網站目的及受眾,才能規劃適當的功能,在預算有限的情況下,更能夠排列出實現功能的優先順序。

    以製造工業產品的企業為例,若網站目的是要提升來自網路的產品詢問量,則網站規劃時,就會有個別產品的詢價功能的需求。

由以上可知,這些需要在第一步明確的項目環環相扣,其結果決定了後續步驟的規劃方向以及最終結果。如果沒有明確的話,容易造成後續方向與預期不符,進而導致人力成本及時間成本的浪費。

第二步:網站規劃

透過第一個步驟的討論,我們對網站有了模糊的輪廓。到了網站規劃的步驟,則是要將這個模糊的輪廓更加明確。一般來說,會針對以下幾個項目討論。

  • 明確網站設計與架設範疇

    以傳遞形象、資訊為主要目的的網站,需要明確出具體需要那些頁面,例如:關於、服務、聯絡等,這些頁面裡大概要有那些內容,有哪些功能是必須的。而已販售產品為主要目的的網站,除了要討論前述的內容外,更需要深入討論使用者流程及相對應的功能。舉例來說,一般電商的使用者流程為產品頁、購物車、結帳頁、感謝頁,在這個流程中,是否需要設置滿額免運等優惠方式,又或者在購物車頁面設置加價購,甚至修改結帳表單並讓網站後台符合企業內部作業流程等,都是需要加以明確的內容。

  • 網站地圖

    具體的頁面確定之後,則需要以階層圖的形式繪製出網站地圖。網站地圖能使設計師、工程師等合作夥伴系統性地了解網站整體,有助於網站頁面內容規劃、文案規劃、網站頁面設計、功能流程設計等。

    以FirstHatch一起孵網站為例,首頁以下共有4個頁面,在專案列表頁及Blog列表頁以下,則分別有各自的文章頁面。

    網站地圖

  • 使用者流程圖

    對於電子商務網站、會員網站等較為複雜的網站來說,繪製出使用者流程圖並做為討論依據,能夠協助釐清需要客製化的地方,減少溝通誤差。

    以NGO/NPO領域的網站為例,若需要透過網站進行捐款,則進行捐款的使用者流程可能如下圖所示。

    使用者捐款流程圖

  • 設計規範

    設計規範是網站未來進行網站頁面設計的依據,根據網站的目的、客群及品牌個性的不同,設計規範也會不太一樣,一般來說,至少會包含風格、色調、各級標題的字型及大小,再嚴謹一點的甚至會包含網站使用者介面的規範,例如:選單、按鈕、邊距等,以及錯誤範例。

  • 專案進度圖

    透過專案進度圖,可以把每個步驟可視化,使得合作夥伴了解負責步驟的時間點以及專案進度,進而能在適當時機提供幫助。此外,也能夠藉由專案進度圖預估可能的風險,進而擬定對策,降低專案延遲的概率。

    網站架設進度表

第三步:網站設計

網站設計的階段,可以分成線框圖及設計稿兩個部分。透過這兩個部分,確立網站各個頁面的的使用介面及體驗(UI/UX)。

  • 線框圖與使用者體驗

    線框圖,白話來說,就是草稿。透過線條與圖形的方式,呈現出網頁的各個元素及文案的編排。設計時,需要將使用者體驗(UX)納入考量,根據使用者的習慣,思考透過何種形式能呈現資訊較能達到網站目的,同時也帶給使用者最佳的瀏覽體驗。

  • 設計稿與使用者介面

    設計稿以設計規範為基礎呈現出網站整體視覺以及使用者介面(UI),完成的設計稿即是網站完成後應有的樣子。

線框圖與設計稿

第四步:網站架設

在網站架設階段,工程師依照設計稿、功能需求等,選擇適當的伺服器配置及架站方式,例如:WordPress。在架設的時候,除了要確保成品與設計稿一致之外,也需要注意網站程式結構的搜尋引擎友善度、網站速度、不同瀏覽器或裝置間的顯示、安全性等,才能讓網站最終發揮最大的數位價值。

相關文章
WordPress:超過30%市佔率的內容管理系統

第五步:品質確認

一般來說,網站速度、不同瀏覽器或裝置間的顯示、安全性等是這個階段的主要測試項目。另外,對於功能較為複雜的網站,例如:電子商務網站、會員網站等,則需要設計不同的使用情境,模擬使用者的真實情況,確認有無流程上的瑕疵。

第六步:上線並持續維護

在完成前述五個步驟之後,就可以讓網站上線了。然而,上線並不是終點,為了確保網站運作順暢,需要定時進行維護及更新,例如:伺服器管理、程式更新、資料庫清理、備份等。

FirstHatch一起孵的流程

FirstHatch一起孵基本上就是依循這六個步驟來執行網站設計與架設專案。我們會透過系統性問答的方式,釐清明確網站目的、客群與功能需求,依照專案預算取捨非必要的功能,再透過顧客旅程的思維模式,規劃網頁內容,促進有效轉換。此外,FirstHatch一起孵一般以WordPress作為網站架設工具,注重網站的搜尋引擎友善度,使得網站較易取得良好搜尋排名。最後,專案經理會掌握整個網站設計與架設流程,調度相關資源,並協助客戶掌握進度以及網站完成後的樣貌,以此減少專案執行中的溝通誤差及延遲。如果有任何需求,歡迎立刻行動,聯絡一起孵專員。