---
# System prepended metadata

title: 網站開發流程

---

# 網站開發流程

確認商業需求（知道需求）->
IA 資訊架構(網站地圖(sitemap),SEO) -> 
Functional Map 功能地圖 ++(適用大型/複雜功能的網站)++ ->
Logic Flow/Flow Chart/UI flow 邏輯流程 ++(適用大型/複雜功能的網站)++ ->
Wireframe 線框圖稿 ->
Mockup設計精稿 ->
Prototype (原型) ->
Dev(開發實作) -> 
網站上線與後續維護

[參考網站](https://ithelp.ithome.com.tw/articles/10234946)
___

**(一) 商業階段**
+ 需求
+ 時程/報價
+ 人力
---
**(二) 企劃階段**
```flow
st=>operation: IA資訊架構
op=>operation: Functional map
op2=>operation: Logic Flow
st->op->op2->
```
++**Step1.** IA資訊架構: 規劃/分類/整理資訊++
```flow
st=>operation: Mind map(心智圖)
op=>operation: Site map(網站地圖)
文字企劃/資訊整理
op2=>operation: Wireframe(原型階段草圖)
畫面企劃

st->op->op2->
```
++**Step2.** Functional map: 功能模組++

++**Step3.** Logic Flow++
```flow
st=>operation: Flow Chart 
流程圖
op=>operation: UI Flow 
介面流程
op2=>operation: Prototype 
原型

st->op->op2->
```
Prototype工具: Adobe XD / Axure RP / 墨刀 / Sketch / Figma
[paper prototype video](https://www.youtube.com/watch?v=y20E3qBmHpg)

---
**(三) 執行階段**
設計 / 程式Develop



