1. Joomla! 網站規劃
講者：Asika
所有權：I
Love
Joomla!
社群
h1p://ilovejoomla.tw

2. 什麼是網站規劃？

3. ⼀一種施工專用的溝通文件
• 網站製作SOP
• 照表操課不失誤
• 與客戶溝通的橋樑
• 制定規格、驗收標準

4. 與「網站企劃」有什麼不同？
• 網站企劃偏向行銷專案企劃書
• 緣起
• 目標族群
• 預期效益
• 廠商合作、主協辦單位、預算評估、ABC計畫、團隊
簡介、行銷時程、SWOT、PEST、UESD、五力與產品
生命週期........

5. 我們需要的只是⼀一張藍圖

6. 將顧客需求轉化成
網站規劃書

7. 我們可能會碰到幾種客戶
• 很清楚自己在幹嘛的

8. 我們可能會碰到幾種客戶
• 簡單想想條列下來的

9. 我們可能會碰到幾種客戶
• 手繪魔人

10. 我們可能會碰到幾種客戶
• 像在寫作文的

11. 我們可能會碰到幾種客戶
• 克隆星人
阿嬤冗

12. 我們可能會碰到幾種客戶
• 堅持自己畫版面的

13. 我們可能會碰到幾種客戶
• 混沌

14. 因為客戶不懂網站規劃
我們的服務才有價值

15. ⼀一目了然的樹狀規劃
展現我們的專業

16. 不要永遠顧客至上
他們重視的不見得是真正需要的

17. 替顧客想到他們沒想到的
他們不見得知道這麼多行銷輔助工具

18. 設計適合他們的操作流程
vs
有些人控制欲比較強
也有些人碰到電腦就焦慮

19. 該如何開始

20. 第⼀一步：需求蒐集

21. 第⼀一步：需求蒐集
• 案件洽談時，可以依照
之前經驗設計開案用的
紀錄單，記錄顧客需
求。
• 讓洽談工作SOP化

22. 第⼀一步：需求蒐集
• 引導客戶提出需求：
• 準備相關網站分析內容
• 提供常見網頁項目供參考
• 提供制式表格給客戶填寫
• 用紙記下討論內容回去慢慢整理

23. 參考範本I
• 直接讓客戶選想要的頁面

24. 參考範本II
• 制式表格直接填寫

25. 翻譯能力也要訓練
• 我有辦法知道訪客人數嗎？ -> (Analytics or 記數器)
• 我們希望訪客可以問問題與互動 -> (討論區, FAQ, 留言板)
• 你們會不會加上SEO? -> (其實他需要關鍵字廣告)
• 你覺得需要Facebook粉絲頁嗎？->(資訊焦慮)
• 不用做太複雜，只要......就好 -> (沒錢)

26. 第二步：分類整理

27. 第二步：分類整理
• 首先，把所有內容都列出來

28. 第二步：分類整理
• 分類是人類的天性：
「將相似的事物放⼀一起，
不相似的分開」

29. 第二步：分類整理
• 所有內容都要有歸屬點（不要製造孤兒）

30. 第二步：分類整理
• 決定哪些頁面要用
擴充套件來製作

31. 第三步：結構設計

32. 第三步：結構設計
• 首先，清楚Joomla!的內容結構

33. 前後台展現不同的結構層級

34. 第三步：結構設計
• 用編號連結所
有資源
• 方便架站人員
照表操課

35. 第三步：結構設計
• 擴充套件清單

36. 第四步：開始架站啦
• 交給架站人員搞定，喝紅茶去吧～～～

37. 第五步：驗收
• 有了前面精心
設計的結構，
驗收也更方便
• 列成清單，讓
客戶勾選即可

38. 還需要些什麼？

39. 還需要些什麼？
• 頁面規劃圖
• 別嚇到，用
PowerPoint 就可以
做到了

40. 還需要些什麼？
• 時程圖

41. 還需要些什麼？
• 估價表
別忘了加上有效期限

42. 還需要些什麼？
• 主機規格
總是有些客戶想自己買主機

43. 實際操作

44. 簡易流程
• 通常，
我們
會從客戶那
邊拿到…

45. 簡易流程
• 讓我們做⼀一個簡易的排版
FAQ" " "
A" B" C" "
" " "
" "
"

46. 簡易流程
• 區分分類與單篇文章（灰色是分類）
FAQ" " "
A" B" C" "
" " "
" "
"

47. 簡易流程
• 標出特殊功能（元件）
FAQ" " "
A" B" C" "
" " "
" "
"

48. 簡易流程
• 這是我們需要的分類與文章，把他們對應⼀一下
• •
o •
o •
• FAQ •
o
•

49. 簡易流程
• 現在我們知道分類結構了（紅：分類、藍：文章）
前台選單 後台文章分類

50. 簡易流程

51. 簡易流程
• 最後生成的表格

52. 相關資源

53. 相關資源
• PowerPoint 頁面設計工具
• http://www.istartedsomething.com/20071018/powerpoint-prototype-toolkit-01/
• http://www.boxesandarrows.com/view/interactive
• http://www.raizlabs.com/blog/294/wireframing-in-powerpoint
• http://www.michaelgaigg.com/blog/2009/01/23/powerpoint-wireframe-stencils-as-free-
download/
• Keynote 頁面設計工具
• http://keynotopia.com/
• http://keynotekungfu.com/
• http://sonspring.com/journal/keynote-wireframe-toolkit
• http://www.webdesignerdepot.com/2011/07/keynote-as-a-collaborative-wireframing-tool/

54. 相關資源
• 頁面設計軟體
• AxurpRP - http://userxper.com/axure
• Pencil - http://pencil.evolus.vn
• Balsamiq - http://www.balsamiq.com/
• 更多頁面設計資源
• http://www.1stwebdesigner.com/design/wireframing-mockup-prototyping-tools-plan-designs/
• http://www.noupe.com/design/35-excellent-wireframing-resources.html
• http://inspire.twgg.org/c/internet/other/several-useful-prototype-design-tools-prototype.html
• http://inspire.twgg.org/c/inspire/design-concept/wireframe-prototype-of-the-importance-of-
planning-for-web-design.html

55. THANK YOU!