如何架設網站:了解客製化網站建置流程

Gremlin Works >> 文章列表 Blog >> 網站架設與設計 >> 如何架設網站:了解客製化網站建置流程
最後更新:

完整客製化網站建置流程

1. 策略分析 及 User Story (使用者描述)

架設網站並不是只是發布一些文章和漂亮的圖片那麼簡單,你可是在和網路上所有其他同業競爭!你能做的第一個準備,就是搜尋其他同性質的網頁,觀察他們的經營手法。分析出一些適用的範例,並針對你自己的商業模式及商品價值來做調整。了解你想打入的目標市場、客戶是誰?年齡層、性別、教育水準等等都會影響到他們的網路使用習慣,而網站的設計也將因此而異。譬如說如果你的目標客戶是年輕人,那麽有個簡約高雅的設計可能會為品牌加分。老一輩的客戶,網站上的資訊要淺顯易懂,網頁導覽不要太複雜。

白話的說,策略分析過程就是會針對你的商業模式 (Business Model) ,幫你找出市場上成功的同性質網站,加以分析競爭對手的致勝關鍵,讓你更清楚如何創造出自己的獨特價值!而User Story (使用者描述) 則是針對所有會使用網站的使用者,定義所有它可以在網站上做的行為,以及這個行為帶來的商業價值是什麼。 舉例來說:使用者加入會員,因為加入會員後可以每個月收到10%的商品抵用卷。

在這個階段,你會得到一個最客觀的資料分析,以及徹底了解你的網站使用者及客群真實需求是什麼。對於開發一個網站前有效的正確分析,會讓你的網站提供更準確的內容給使用者,也能大大減少日後的修改程度!其實了解線上市長趨勢是個一直持續的過程,因為網路世界不斷的在變化。你可以從最簡單的開始,注意競爭對手前端使用者介面設計,接著使用者經驗,構想一個你喜歡的網站範本。以後再慢慢深入到文章架構、網頁讀取速度、SEO 等等。

 

2. Sitemap (網站地圖)

接下來,你得思索你想要呈現什麼樣的內容給你的消費者,用什麼方法怎麼呈現?一個網站可以有許多的介面,該如何整理內容,讓你的用戶很快搜尋到他們所需要的資訊?大部分的網頁利用選單來分類內容,通常放置於首頁上方,方便使用者轉換頁面。

 

 

製作Sitemap就像是繪製你的網站地圖,計畫頁面組織以及資訊該存放在哪個位置,讓用戶可以找到他們想去的方向。網路上有很多免費的工具可以讓你快速製作 sitemap,像 GlooMapsFlowchart Maker。網站架構的全貌在這個階段會被具體繪製出來,以「頁面」為單位進行架構的確認,透過 sitemap 圖可以知道各頁面的層級關係及如何連結,以及定義清楚靜態頁面及需要後台管理的頁面。

 

 

3. Wireframe 及 Prototype (圖稿及操作原型)

有了地圖後,你是不是已經等不及要著手設計一套美麗的網站頁面了?想用什麼顏色、特效、字體、連圖片都想好了?

等等!先別急。在買下漂亮的衣服前,總該試穿吧!

製作網頁也是如此,有些設計想像起來好像很棒,真的做出來時又想更改。為了避免一直重複修改消耗成本,必須先做出基本的設計圖稿及原型。Wireframe是將所有頁面的功能繪製出來的靜態線框稿,它完全不考慮任何視覺上的元素 (例如色彩、字型、動畫、照片)。目的就是要專注於頁面的主要資訊及編排架構,就像是施工單位的建築藍圖一樣,你已可以得知各物件的位置。因此,wireframe 基本上就只有黑白的形狀及文字,越簡單越好。沒畫線框稿就製作出網頁,如同沒有藍圖就蓋房子,容易出差錯做白工,畢竟想像跟實體一定有差異。市面上也有很多免費或付費 wireframe 製作工具,如 MockFlowBalsamiq等等。

 

 

等到 wireframe 圖稿讓你滿意之後,你就可以開始為你的設計上色了!這個時候你可以把之前考慮的字體色彩都套用進去,作出所謂的 Mockup。Mockup 與 Wireframe 專注的都是 UI 使用者介面,也就是網站帶給用戶的視覺感受。在這之後我們就得考慮進階版的展示方式, Prototype。Prototype 和 Mockup 基本上目的一樣,是讓我們得知頁面功能及資訊的原型,但差別在於:Prototype 要考慮 UX 使用者經驗!它是像瀏覽網站一樣可以被操作的,並不是靜態,因此能讓你更真實感受網站使用者的體驗。重點是,製作 Prototype 完全不需要動用任何工程師。什麼東西這麼神奇?目前大部分的 UI/UX設計師都使用的 prototype 軟體有 Sketch、 Axure Adobe XD簡單在 Google 上搜尋一下就可以發現還有很多其他選擇,不妨每一個都試看看,看哪個用起來較順手。

網站架設基礎指南:客製化最適合您的專業網站

4. Front-End (前端程式) & Back-End (後端程式)

如何把設計師畫出一張張美麗的圖稿變成會動的網站呢? 就是前面文章提到的神奇魔法師 – 前端工程師啦!工程師透過千百行的程式,動用不同的程式語言將每頁圖稿變成會動的網站,也就是使用者可以操作的樣貌了。如果你的網站是一個全靜態頁面的,製作流程比較簡單,你的網站基本上也已完成了。 但如果你是希望有後台管理的朋友,那麼你還需要多加個後端的開發過程。

管理者在後台上傳的內容怎麼在畫面中出現呢? 在這個階段後端工程師將會透過程式,將資料存進資料庫中,並在頁面需要出現的地方提供對應的內容。經營網路商店中的結帳流程、線上付費等等需要串接第三方系統的工作,也都是在後端工程師的手中被實現。

 

5. Debug (除錯) & Launch (上稿)

每個網站系統的運作被開發完成後,一定需要經過多次的測試並除錯,透過不同測試者操作每個網站功能,並在各個環境(Windows、Mac、iOS、Android) 及各瀏覽器(Chrome、Safari、Firefox) 反覆測試過後,才能讓網站在上線後,面對不同狀態下的使用者都能正確地被呈現。

最後,網站的管理者及小編要把手上的所有資料都上傳到後台,讓頁面上的資料都是正確的。如此一來,網站就可以正式公告大家上線了!

客製化網站與Wordpress網站建置的差異

完全客製化的網站和Wordpress網站在建構複雜性上還是有些差別,因為Wordpress本身提供很多佈景主題 (theme),有免費及付費選擇。若是你喜歡他們提供的佈景主題,那會節省很多時間,因為你可以對Wordpress主題做客製化。只需要在他們的現有的架構上做一些設計修改,套上你的企業官方顏色等等,就可以讓網頁符合你的企業形象。但如果你野心較大,想要挑戰一些新穎的網頁設計、動畫特效,Wordpress滿足不了你,那麼客製化網站就會花較多時間及成本。

Table 1

Poster of Jiu Zhen Nan
Poster of Jiu Zhen Nan
台北英僑商務協會

接軌英國與台灣會員是專案執行的目標,提供會員企業全方位的線上整合服務,並提升網路形象,創造會員服務價值。

Kymco's homepage template
Kymco homepage
DRIWAYS

全球線上叫車平台技術與服務整合,並透過行銷策略建立品牌網路知名度,成功提升品牌優質形象。

Poster of Jiu Zhen Nan
Poster of Jiu Zhen Nan
凱舟

我們掌握與其他淨水大品牌競爭關鍵要素,挖掘拓展歐美市場利基點。展現服務為導向的品牌網站,成功建立品牌信任感,並跨足國際市場。

品牌網路形象提升為專案核心,我們運用客製化網站服務技術,開發全球會員與訂房系統,有效整合飯店與飯店線上支援。

iONEX banner with man standing next to his scooter

我們優質的跨國行銷團隊已經成功幫助超過200間公司,包括光陽機車、舊振南、BENQ等等。想了解我們其他成功案例,或免費諮詢嗎?歡迎聯絡我們!

previous arrow
next arrow
Slider