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

講師: 佘昌霖

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

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

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

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

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

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

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

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

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

---

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

## 例如:



---
---
---

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

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

----

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

- 規劃方式
常見以自己為主題
> 可以發想自己要做的產品

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

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




---
---
---

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


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

- 改進


---

# ==常用工具:==

[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

---

# 如果是有產品購買/網路銷售的通路的話

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

---

# 預購的部分

- 可能(通常)沒有現貨

---

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

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

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

範例:
- 同學的作品

> 可以直接拿來作網站地圖的樣式~

---

範例:
- 同學的作品:

> 如果有現場即時代購, 分類 服務 → 現場服務 !?

---

範例:
- 同學的作品

> 網站架構談的話 → 會是以網站架構這個主題去思考
> 可以以思考 (**Brainstorming**
) 的主題去發想, 品牌, 人生, 甚至晚餐
> 心智圖主要是以幫助發想的目的出發~


---

- 同學的範例:


contact → 網路賣場  

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

---

# 如果以廠商做介紹

- 上課示範介紹:

---

# 如果以遊戲介紹
- 系列介紹, 把同一個東西放在一起, 再分細項

> 或可以遊戲性 / 劇情 / 還是版本進去切入去介紹

---

# 如果以商圈介紹

- 同學範例:
> 特色美食跟周邊餐廳可以有強烈連結
> 慈濟宮 沒有放在商圈歷史, 而是獨立拉出來 → 可以做為重點強調

# 如果以餐廳為發想

- 同學範例:
評價和菜單可以非常自由~

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

---

# 如果以表演形式為發想

- 同學範例
> 如果道具是租用/演出的方式, 或許可以把重複的類別縮減

---
---
---

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

- 找出不合理的地方
> 如果你手本來就是髒的, 那上廁所前應該先洗手!?
> 改善策略 → 裝尿布, 導尿管(???

> 那些東西是選用, 或是幫助你找出流程中不合理的地方, 去簡化改進流程

---

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

- 決策是這個圖型
> 記得在方向分歧上寫 "是 否"


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

# ==參考資料:==

[\[筆記本: 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 提款流程圖

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

> 卡片進入到退出

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

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


- 自己練習:

# ==參考資料:==
[演算法的表示 (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)

---

[ClickUp™ | One app to replace them all](https://clickup.com/)

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

----
----

# 溝通的管理

- 例如 Slack, Line, FB 之類的

Trello - 大規模專案常見

---
---

# 時間的管理

TimeTree - 也有留言功能