---
# System prepended metadata

title: 9/30 網站企劃概論
tags: [網站企劃概論, 進度筆記, 前端心得, 2021/09/30]

---

# 9/30 網站企劃概論    
###### tags: `網站企劃概論` `2021/09/30` `進度筆記` `前端心得`  
---

講師: 佘昌霖   

# 今日講課 -- 上午的部分 -  
# 先講網站的規劃
> 避免看不懂規格, 跟客戶的需求有出入   

做網站 → 要先決定要做甚麼功能, 和規劃   
要清楚了解客戶(業主)需求的規格   

技術型的 PM, 更容易地把客戶的話轉成業界術語(工程師語言), 有管理能力的設計師   

例如跨平台的 APP, 所需花費多少?  20萬可以做出來整套嗎???   

- ==之後有個人專題(自己選一個主題去做)和團體專題==   

# 除了課堂教學的你要用到那些技能?   
有時候可以關注一下求職網站, 看他們需要的工具(超協槓)   

---
# 如何開始網站專案規劃  

- 之後可以用在個人專題規劃上   

1. 了解需求 (需求訪談)   
2. 初步規劃    
3. 用到心智圖工具去界定範圍   
4. 流程圖 - 去規劃流程(通常不會跟網站地圖明確劃分, 不過流程圖會先做)   
5. 網站地圖   

---

# 個人專題網站 (一頁式網站)
- 找興趣的主題, 這一步就像是業主訪談   
> 找一個有興趣的主題, 當作個人專題網站主題   
> 合法的, 正常向 (?) 內容   
> 盡量找沒有網站的店家(介紹文或粉絲專業)
> 範圍: 賣吃的 / 辦活動的 / 旅遊類 /賣東西  > 可以想一下購買 / 銷售的東西    

## 例如:   

![](https://i.imgur.com/YBNne88.png)   

![](https://i.imgur.com/aPAQn0J.jpg)   

---
---
---

# 團體專題 - 鑑定職訓成果   

- 盡量貼近現實 (企業專題, 要上線的網站)   
- 企業提供素材, 認識如何跟業主去談   
- 依照能力分組(作業要交), 大概 5~6個人一組   


----

# 心智圖作法(會放在作業檢核清單)   

- 規劃方式   
常見以自己為主題   
![](https://i.imgur.com/C0s62LP.png)   
> 可以發想自己要做的產品  

不用刻意去想要做甚麼, 用主題去延伸, 讓你發現你一開始沒細想到的內容   

像拉麵裡面有甚麼主題, 他的產品有哪些, 他的裝潢, 他的產品概念, 他的甚麼好東西之類的   

![](https://i.imgur.com/DWejfTd.png)   

![](https://i.imgur.com/ixF0rX3.png)   

![](https://i.imgur.com/N0uPT2K.png)   

---
---
---

# 課堂練習 - 自己做做看心智圖   

![](https://i.imgur.com/YbK7VoE.png)   

> 這個比較像後期的文案, 不過可以有強調品牌的地方   
> 拉出個按鈕 → 聯絡我們 → 營業時間    
> 放個 Q & A  
> 品牌概念 / 核心理念  
> 發展歷史   

- 改進   

![](https://i.imgur.com/gCGq701.jpg)   

---

# ==常用工具:==    

[XMind - Mind Mapping Software](https://www.xmind.net/)   

[diagrams.net](https://app.diagrams.net/)   

https://gitmind.com/tw/   

> 也可以小畫家就開工了 :D"    

# 參考資料:  

[成就非凡心智圖．我的十條規則 – XMind – 數位心智圖法最佳工具軟體 (actsmind.com)](https://actsmind.com/blog/archives/3150)   


[不會製作網站怎麼辦？心智圖可以幫你解決！ \- 建立你的網站 \- Strikingly](https://tw.strikingly.com/content/blog/xinzhitu/)   

[網頁設計教學-心智圖法之網站企劃編寫-網頁設計-月光創意網頁設計公司 (moon-d.com)](https://moon-d.com/page.php?menu_id=7&blog_id=76)  


[心智圖法的優點 | 孫易新心智圖法 (mindmapping.com.tw)](https://www.mindmapping.com.tw/knowledge_details.php?id=2945)  

[心智圖法的4階段程序 – XMind – 數位心智圖法最佳工具軟體 (actsmind.com)](https://actsmind.com/blog/archives/1739)   

[XMind/FreeMind-心智圖的妙用 (ntu.edu.tw)](https://www.cc.ntu.edu.tw/chinese/epaper/0009/20090620_9004.htm)   
  

[\[筆記本: Draw.io\] 跨平台線上製作圖表工具 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10210293)  

----
----
----

# 下午的部分 - 心智圖 discussion    

---

# 如果是有產品購買/網路銷售的通路的話  
![](https://i.imgur.com/sEOkGdY.png)   

> 購買方式可能現場跟網路的部分會很類似(或部分重疊)  
> 細項可以再細分~  

---

# 預購的部分   

- 可能(通常)沒有現貨   
![](https://i.imgur.com/TNd1pxl.png)   

---

# 心智圖下一步 → 網站地圖 → 導覽列  

- 把品牌故事核心價值, 流程釐清, 網站有那些東西會列出來~   
==做得好通常會變導覽列==   

# 如果以銷售網站做為發想   

範例:  
- 同學的作品   

![](https://i.imgur.com/yrBM6Qg.png)   
> 可以直接拿來作網站地圖的樣式~  

---

範例:  
- 同學的作品:  

![](https://i.imgur.com/fZmlH8f.png)   
> 如果有現場即時代購, 分類 服務 → 現場服務 !?

---

範例:
- 同學的作品  

![](https://i.imgur.com/9oFF2lB.png)   
> 網站架構談的話 → 會是以網站架構這個主題去思考  
> 可以以思考 (**Brainstorming**
) 的主題去發想, 品牌, 人生, 甚至晚餐   
> 心智圖主要是以幫助發想的目的出發~  

![](https://i.imgur.com/2QveUUW.png)   


---

- 同學的範例:   

![](https://i.imgur.com/y7u2pvJ.png)   
```
contact → 網路賣場  

或是額外分出 Sales channels →  / Online sales 
                                                   / Shop
```

---

# 如果以廠商做介紹  

- 上課示範介紹:   
![](https://i.imgur.com/WQAzAYm.png)   


---

# 如果以遊戲介紹   
- 系列介紹, 把同一個東西放在一起, 再分細項   
![](https://i.imgur.com/MQOwXPr.png)   

![](https://i.imgur.com/nQupBw2.png)   
> 或可以遊戲性 / 劇情 / 還是版本進去切入去介紹  

---

# 如果以商圈介紹  

- 同學範例:  
![](https://i.imgur.com/LJEU726.png)   
> 特色美食跟周邊餐廳可以有強烈連結   
> 慈濟宮 沒有放在商圈歷史, 而是獨立拉出來 → 可以做為重點強調   

# 如果以餐廳為發想  

- 同學範例:  
![](https://i.imgur.com/RaPDb4U.png)   
評價和菜單可以非常自由~  

- 同學範例:  
![](https://i.imgur.com/xZ1tClJ.png)   
> 有關聯的部分可以連結, 像是飲品互有連結   
> 可以是概念上接近的  
> 文件是為了讓其他人可以看得懂  
> 不同時段有不同的餐點販售   
> 左半部看起來是強調重點位置   

---

# 如果以表演形式為發想  

- 同學範例  
![](https://i.imgur.com/FvfNTek.png)   
> 如果道具是租用/演出的方式, 或許可以把重複的類別縮減   

---
---
---

# 規劃流程 (工具: 流程圖)   

- 找出不合理的地方  
![](https://i.imgur.com/FDRBCjY.png)   
> 如果你手本來就是髒的, 那上廁所前應該先洗手!?  
> 改善策略 → 裝尿布, 導尿管(???   

![](https://i.imgur.com/pBYpuAC.png)   
> 那些東西是選用, 或是幫助你找出流程中不合理的地方, 去簡化改進流程   

---

# 規劃流程的時候要注意決策  

- 決策是這個圖型   
![](https://i.imgur.com/tsAZ2tu.png)  
> 記得在方向分歧上寫 "是 否"   

![](https://i.imgur.com/NyhAKUc.png)   

==流程圖通常有一個開始的起點跟一個結束的終點圖型==   

# ==參考資料:==   

[\[筆記本: Draw.io\] 跨平台線上製作圖表工具 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10210293)  

[流程規劃和流程圖範例：微軟VISIO【桑河數位科技blog】 (shanger.net)](http://blog.shanger.net/article.asp?id=218)   

[新網頁1 (chwa.com.tw)](http://www.chwa.com.tw/TResource/VS/book2/ch2/2-2.htm)   

[\[教學\] 流程圖（Flow Chart）常用符號說明 (free.com.tw)](https://free.com.tw/flow-chart-symbols-and-usage/)  

[電腦語言的學習需要從基礎的流程表設計開始,運用流程表可使用在許多開發生產及製造構思SOP上的邏輯思考,請詳加學習研討新的教育理念. @ 弘榮實業有限公司部落格 :: 隨意窩 Xuite日誌](https://blog.xuite.net/honrong/twblog/243020479)  

[流程圖說明 (tp.edu.tw)](http://www2.lssh.tp.edu.tw/~hlf/class-1/lang-c/flow/flow-chat.htm)   

[Microsoft Word - 文件1 (thu.edu.tw)](https://www.thu.edu.tw/upload/meeting_control_upload/2_%E5%A6%82%E4%BD%95%E7%B9%AA%E8%A3%BD%E6%B5%81%E7%A8%8B%E5%9C%96.pdf)   

[演算法的表示 (ntpc.edu.tw)](http://ms2.ctjh.ntpc.edu.tw/~luti/105al-express.htm)   

[演算法的表示與設計](http://163.28.10.78/content/senior/computer/ks_ks/book/algodata/algorithm/algo3.htm)   

[UML:統一塑模語言精華 開發圖與流程圖_UML 2.5 新發展與限制 UML 2.5, Unified Modeling Diagrams Canon (ntu.edu.tw)](http://tx.liberal.ntu.edu.tw/infomgt/jx/is_im/uml.htm)   



---

# 課堂練習 - ATM 提款流程圖   

不是人去提款的過程, 是機器判斷的過程(簡易就好)  

> 卡片進入到退出   

- 寫一個拿金融卡去提款的過程  

- 簡單範例:  
> 模擬整個領錢流程  

![](https://i.imgur.com/dNMjMyH.png)   

- 自己練習:  
![](https://i.imgur.com/AUepoq0.png)  


# ==參考資料:==  
[演算法的表示 (ntpc.edu.tw)](http://ms2.ctjh.ntpc.edu.tw/~luti/105al-express.htm)   


---

# 專案開發管理工具 - 介紹(移到後面一點講, 先講網站規劃~)  

[All-in-One Collaboration. Remote Team Workspace. | Taskade](https://www.taskade.com/)   

- 蠻常用的, 很多中小型企業會用到   

> 這套目前仍是免費的, 有進度條, 會規畫負責人員, 方便盯進度     
---

[線上管理您團隊的工作、專案和任務 • Asana](https://asana.com/zh-tw)   
![](https://i.imgur.com/AZqCarE.png)   

---

[ClickUp™ | One app to replace them all](https://clickup.com/)   
![](https://i.imgur.com/8243fvM.png)    

像是有甘特圖、心智圖的功能   

----
----

# 溝通的管理   

- 例如 Slack, Line, FB 之類的   

Trello - 大規模專案常見   
![](https://i.imgur.com/6kRO6Uc.png)   


---
---

# 時間的管理   

TimeTree - 也有留言功能   

![](https://i.imgur.com/J6FpS0Z.png)   
