---
# System prepended metadata

title: 10/04 網站企劃概論 - Site map
tags: [網站企劃概論, 進度筆記, 前端心得, 2021/10/04, 配色, API, 智財]

---

# 10/04 網站企劃概論 - Site map   
###### tags: `網站企劃概論` `配色` `智財` `API` `2021/10/04` `進度筆記` `前端心得`  
---

講師: 佘昌霖   

# 今日講課 -- 上午的部分 - 網站地圖 - 檢討   

# 分類頁面的調整   

- 同學範例: 
> 跟後端串接的部分有點多  
> 個人專題的量有點大, 這次個人專題比較偏形象網站   
> 這次個人主要是前端靜態頁面  
![](https://i.imgur.com/9TWlSG6.png)   

---

# 網站架構圖的部分 - 從心智圖到網站地圖   

- 列出網站幾乎所有功能的選項   
- 那些頁面是網頁設計師去規劃設計   
- 那些功能是程式設計師去做   
- 流程圖幾乎沒有制式, 可能依客戶需求   


# 參考資料   

[Dribbble - Discover the World’s Top Designers & Creative Professionals](https://dribbble.com/)   

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

[淺談網站企劃的工作 \- INSIDE](https://www.inside.com.tw/article/2003-about-website-planning)   

[\-網站企劃\- 製作網站企劃書 @ 索尼的紅燈人生 :: 痞客邦 :: (pixnet.net)](https://sony1708.pixnet.net/blog/post/24115622)   

[做網站需要經過哪些步驟？網頁建置流程大解密│愛貝斯網頁設計 (ibest.tw)](https://www.ibest.tw/website-proccess.php)   

[徹底解說網站的製作流程 \- 塞巴貓網頁設計服務 (cybercats.com.tw)](https://cybercats.com.tw/how-to-build-a-website/)   

[如何做好 網站建置 流程 及在 網站製作 前制定 網站架設 計畫 ？ | 鵠崙設計 (design-hu.com)](https://www.design-hu.com/web-news/webprocess.html)   
  

---

# 時程管理 - 已經做了網站的設計, 下一步?   

- 預估工期, 工項, 多少事情要做, 要做多久之類的   
- 這時候預估的流程會用到(Gantt chart)   

# 參考資料  

[線上免費甘特圖製作：甘特圖製作模板及設計素材 | Adobe Spark](https://www.adobe.com/tw/express/create/chart/gantt)   

[甘特圖是什麼？成為一流人才一定要學會！【2021最新版】 - Verakey拓璞工程 (veracityconsultant.com.tw)](https://veracityconsultant.com.tw/what-is-gantt-chart/)  

[一步步教你用Excel 畫出專案甘特圖 - Project Club 專案管理輕鬆學](https://www.projectclub.com.tw/hard-power/1507-excel-gantt-chart.html)   

[甘特圖 \- 維基百科，自由的百科全書 (wikipedia.org)](https://zh.wikipedia.org/zh-tw/%E7%94%98%E7%89%B9%E5%9B%BE)   


---

# 時程管理  

- 例如 ↓ 甚麼時候會完成甚麼東西   
![](https://i.imgur.com/AQxFhwo.png)   

```
> 一開始要學怎麼抓時程時間, 這很吃經驗   
> 一開始估算時程, 命中率有四成就算不錯了   
> 可能因為業主需求, 或每個東西的眉角, 專案常會反覆改   
*如果能把四成往上提升, 能力增加, 薪水也會增加  
```

- 目前我們不知道, 網頁切版要花多久時間, 像是微軟要花多久時間, 例如學習成本, 哪些才是實際下去做的工  
- 如果是個人接案就會用到抓工期, 才不會在報價的時候才有問題發生  
- 例如微軟, 再切一次這個頁面要花多久時間, 學習的時間成本也要抓出來   
- 如果一個小時可以做超過其他人兩個小時能做的事情, 就比較知道執行效率和價格   
- 合約看是工作天, 還是日曆天, 例如工作天報價, 大部分可能都是以一天八小時下去算   

---

# 老師示範甘特圖(時間管理流程)  

- 會議記錄算企劃提案一部分   
- 設計階段, 跟業主訪談完確認需求(等業主猶豫)  
- 記得工作天, 遇到假日休息   
- 程式製作估算  
- 有些案子也是邊做邊驗收的   
![](https://i.imgur.com/6xgLNw2.png)   
> 一個網站兩個禮拜差不多   
> 知道概念後做, 甘特的工具很多~   

# 通常專題會給三個禮拜下去做   
- 2~3 禮拜   
- 甚至 + / - 一禮拜   
- 可以用網站地圖下去劃分時間流程   
![](https://i.imgur.com/MOoqT8Q.png)   

---

# 課外知識 - 看配色   

- Google 可以直接輸入色碼看配色   

# 參考資料   
[19 個免費顏色搭配網站 讓你的視覺設計不再猶豫！ — BFA 簡報](https://www.bfa.com.tw/blog/color-tools)  

[設計配色完整攻略 | 色彩意義、色彩理論、色彩心理學讓您一次擁有！ (shutterstock.com)](https://www.shutterstock.com/zh-Hant/blog/complete-guide-color-in-design)   

[網頁色彩配置的小發現. 這陣子下班之餘，我將經常使用的網站進行色彩擷取，並紀錄網站中主要的顏色佈局以及字… | by Logan | Medium](https://medium.com/@loganing/%E7%B6%B2%E9%A0%81%E8%89%B2%E5%BD%A9%E9%85%8D%E7%BD%AE%E7%9A%84%E5%B0%8F%E7%99%BC%E7%8F%BE-e420cfb78bde)   
[網頁設計色彩搭配9技巧，不能不知的色彩心理學 (transbiz.com.tw)](https://transbiz.com.tw/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E8%89%B2%E5%BD%A9%E6%90%AD%E9%85%8D%E5%BF%83%E7%90%86%E5%AD%B8/)   

[網站配色訣竅 | 一手掌握10種情境模擬，30種絕佳的網站配色! - Shutterstock Blog 繁體中文](https://www.shutterstock.com/zh-Hant/blog/color-palettes-for-websites)   

[平面設計入門：顏色 - YouTube](https://youtu.be/_2LLXnUdUIc)

---

# 智慧財產權   
# 參考知識  
[智慧財產局著作權主題網-認識著作權-著作權知識+-校園著作權-教師授課著作權錦囊 (tipo.gov.tw)](https://topic.tipo.gov.tw/copyright-tw/cp-415-855924-5dd9b-301.html)   
[創用CC - 維基百科，自由的百科全書 (wikipedia.org)](https://zh.wikipedia.org/wiki/%E7%9F%A5%E8%AF%86%E5%85%B1%E4%BA%AB)   

---

# 下午部分 - Site map 檢討(續)   

# Logo 和 icon 的差別   

- icon 和 logo 的差異   
![](https://i.imgur.com/GqlNMTQ.png)   
> 記得商業標誌(Logo) 和 圖示(icon)  有差別   
> 區塊可以改成直接用故事之類的標題   
> 文件類的還是用淺色+淺色配置   

---

# 文字點擊效果   
- 有甚麼特效的話可以放上來~  
> 文字變清楚的效果可以寫出來  
![](https://i.imgur.com/gA6U0wG.png)   

---

# 把客戶講的話轉成工程師的話   
- 敘述需要時間和經驗   
![](https://i.imgur.com/hXIZIDL.png)   

---

# Scroll down 套件  
- 有套件可以用於滾動效果  
![](https://i.imgur.com/eJPODuI.png)    

---

# 餐廳頁面 - 的商品規劃     
- 主打商品可能可以用整個 banner   
-  比較少的商品可以用 Carousel  
![](https://i.imgur.com/2dgYXx8.png)  
> 可以想放那些動態效果進來~  

---

# 甘特圖檢討 - 設計的部分   
- 設計做完後才開始切版和程式開發   
![](https://i.imgur.com/nzoQ41A.png)   

----

# 文件頁面的擺法  
- 字數太多要怎麼呈現比較好  
![](https://i.imgur.com/cZLgyjX.png)   
> 分店照片的照片擺法, 可能會很難呈現每家店的特色   
> 文案很漂亮  

---

- 第二層的作法   
![](https://i.imgur.com/XwV0uRk.png)   
> 放活動, 當季商品   

> 內容大項包小項   
![](https://i.imgur.com/pg2JAl6.png)   
> 內容不留白, 有咖啡類, 奶類, 冰滴類  

---

- Aside 側邊欄  
- > 其實也跟nav 類似, 都是固定的   
![](https://i.imgur.com/go6b42y.png)   

- 這像是 mock up 惹  
![](https://i.imgur.com/a03b78T.png)   


---
---
---

# Taskade 使用示範   

- 可以分很多細項  
> 工作、家人、朋友等, 許多事項  
![](https://i.imgur.com/HudI9la.png)   

- 客戶名字, 要做甚麼事情   
> 設定細項  
![](https://i.imgur.com/w3pxumY.png)   

- 可以有細項中的細項   
![](https://i.imgur.com/jgJCLso.png)   

- 截止日期  
![](https://i.imgur.com/O1X0EbK.png)   


---

# 找到 API 要先看套件的授權事項   
- 看這些東西是否要不要錢   
![](https://i.imgur.com/D0wjQ0u.png)   
> 在網路上找圖片, 要注意有些公司會把圖片丟在網路上, SEO做得很好, 如果商業引用馬上就有高機會被告~   

---